diff --git a/src/context.rs b/src/context.rs
index 1086ae4..834a5fe 100644
--- a/src/context.rs
+++ b/src/context.rs
@@ -15,7 +15,7 @@ use kludgine::{Color, Kludgine};
 use crate::graphics::Graphics;
 use crate::styles::components::{HighlightColor, VisualOrder, WidgetBackground};
 use crate::styles::{ComponentDefaultvalue, ComponentDefinition, Styles, Theme, ThemePair};
-use crate::value::{Dynamic, Value};
+use crate::value::{Dynamic, IntoValue, Value};
 use crate::widget::{EventHandling, ManagedWidget, WidgetId, WidgetInstance, WidgetRef};
 use crate::window::sealed::WindowCommand;
 use crate::window::{RunningWindow, ThemeMode};
@@ -890,8 +890,8 @@ impl<'context, 'window> WidgetContext<'context, 'window> {
     ///
     /// Style queries for children will return any values matching this
     /// collection.
-    pub fn attach_styles(&self, styles: Value<Styles>) {
-        self.current_node.attach_styles(styles);
+    pub fn attach_styles(&self, styles: impl IntoValue<Styles>) {
+        self.current_node.attach_styles(styles.into_value());
     }
 
     /// Attaches `theme` to the widget hierarchy for this widget.
diff --git a/src/styles.rs b/src/styles.rs
index 89327ba..931ccc7 100644
--- a/src/styles.rs
+++ b/src/styles.rs
@@ -1008,7 +1008,7 @@ impl SurfaceTheme {
         Self {
             color: neutral.color(98),
             dim_color: neutral_variant.color(70),
-            bright_color: neutral.color(99),
+            bright_color: neutral.color(100),
             lowest_container: neutral.color(100),
             low_container: neutral.color(96),
             container: neutral.color(95),
@@ -1028,7 +1028,7 @@ impl SurfaceTheme {
         Self {
             color: neutral.color(10),
             dim_color: neutral_variant.color(2),
-            bright_color: neutral.color(10),
+            bright_color: neutral.color(11),
             lowest_container: neutral.color(15),
             low_container: neutral.color(20),
             container: neutral.color(25),
@@ -1159,6 +1159,7 @@ impl ColorSource {
     #[must_use]
     pub fn contrast_between(self, other: Self) -> ZeroToOne {
         let saturation_delta = self.saturation.difference_between(other.saturation);
+
         let self_hue = self.hue.into_positive_degrees();
         let other_hue = other.hue.into_positive_degrees();
         // Calculate the shortest distance between the hues, taking into account
@@ -1278,7 +1279,7 @@ impl ColorExt for Color {
         let other_alpha = ZeroToOne::new(self.alpha_f32());
         let alpha_delta = check_alpha.difference_between(other_alpha);
 
-        lightness_delta * source_change * alpha_delta
+        ZeroToOne::new((*lightness_delta + *source_change + *alpha_delta) / 3.)
     }
 
     fn most_contrasting(self, others: &[Self]) -> Self
diff --git a/src/widgets/button.rs b/src/widgets/button.rs
index aa16f25..3953372 100644
--- a/src/widgets/button.rs
+++ b/src/widgets/button.rs
@@ -323,9 +323,9 @@ impl ComponentGroup for Button {
 define_components! {
     Button {
         /// The background color of the button.
-        ButtonBackground(Color, "background_color", .surface.color)
+        ButtonBackground(Color, "background_color", .surface.highest_container) // TODO highest_container seems wrong, but it's what material uses. Perhaps we should add another color so that buttons don't blend with the highest container level.
         /// The background color of the button when it is active (depressed).
-        ButtonActiveBackground(Color, "active_background_color", .surface.dim_color)
+        ButtonActiveBackground(Color, "active_background_color", .surface.color)
         /// The background color of the button when the mouse cursor is hovering over
         /// it.
         ButtonHoverBackground(Color, "hover_background_color", .surface.bright_color)
@@ -335,12 +335,12 @@ define_components! {
         /// The foreground color of the button.
         ButtonForeground(Color, "foreground_color", contrasting!(ButtonBackground, TextColor, SurfaceColor))
         /// The foreground color of the button when it is active (depressed).
-        ButtonActiveForeground(Color, "active_foreground_color", contrasting!(ButtonActiveBackground, ButtonForeground, SurfaceColor))
+        ButtonActiveForeground(Color, "active_foreground_color", contrasting!(ButtonActiveBackground, ButtonForeground, TextColor, SurfaceColor))
         /// The foreground color of the button when the mouse cursor is hovering over
         /// it.
-        ButtonHoverForeground(Color, "hover_foreground_color", contrasting!(ButtonHoverBackground, ButtonForeground, SurfaceColor))
+        ButtonHoverForeground(Color, "hover_foreground_color", contrasting!(ButtonHoverBackground, ButtonForeground, TextColor, SurfaceColor))
         /// The foreground color of the button when the mouse cursor is hovering over
         /// it.
-        ButtonDisabledForeground(Color, "disabled_foreground_color", contrasting!(ButtonDisabledBackground, ButtonForeground, SurfaceColor))
+        ButtonDisabledForeground(Color, "disabled_foreground_color", contrasting!(ButtonDisabledBackground, ButtonForeground, TextColor, SurfaceColor))
     }
 }
diff --git a/src/widgets/label.rs b/src/widgets/label.rs
index f27365d..ffdf5e5 100644
--- a/src/widgets/label.rs
+++ b/src/widgets/label.rs
@@ -1,4 +1,5 @@
 //! A read-only text widget.
+
 use std::borrow::Cow;
 
 use kludgine::figures::units::{Px, UPx};
diff --git a/src/widgets/slider.rs b/src/widgets/slider.rs
index 0f73095..0b2c46a 100644
--- a/src/widgets/slider.rs
+++ b/src/widgets/slider.rs
@@ -406,7 +406,7 @@ impl ComponentDefinition for InactiveTrackColor {
     type ComponentType = Color;
 
     fn default_value(&self, context: &WidgetContext<'_, '_>) -> Self::ComponentType {
-        context.theme().surface.outline
+        context.theme().surface.highest_container // TODO this is the same as ButtonBackground. This should be abstracted into its own component both can depend on.
     }
 }