Implement theme styling for Slider

style/src/slider.rs

@@ -26,70 +26,14 @@ pub enum HandleShape {
 
 /// A set of rules that dictate the style of a slider.
 pub trait StyleSheet {
+    type Variant: Default + Copy;
+
     /// Produces the style of an active slider.
-    fn active(&self) -> Style;
+    fn active(&self, variant: Self::Variant) -> Style;
 
     /// Produces the style of an hovered slider.
-    fn hovered(&self) -> Style;
+    fn hovered(&self, variant: Self::Variant) -> Style;
 
     /// Produces the style of a slider that is being dragged.
-    fn dragging(&self) -> Style;
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn active(&self) -> Style {
-        Style {
-            rail_colors: ([0.6, 0.6, 0.6, 0.5].into(), Color::WHITE),
-            handle: Handle {
-                shape: HandleShape::Rectangle {
-                    width: 8,
-                    border_radius: 4.0,
-                },
-                color: Color::from_rgb(0.95, 0.95, 0.95),
-                border_color: Color::from_rgb(0.6, 0.6, 0.6),
-                border_width: 1.0,
-            },
-        }
-    }
-
-    fn hovered(&self) -> Style {
-        let active = self.active();
-
-        Style {
-            handle: Handle {
-                color: Color::from_rgb(0.90, 0.90, 0.90),
-                ..active.handle
-            },
-            ..active
-        }
-    }
-
-    fn dragging(&self) -> Style {
-        let active = self.active();
-
-        Style {
-            handle: Handle {
-                color: Color::from_rgb(0.85, 0.85, 0.85),
-                ..active.handle
-            },
-            ..active
-        }
-    }
-}
-
-impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
-    fn default() -> Self {
-        Box::new(Default)
-    }
-}
-
-impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
-where
-    T: StyleSheet + 'a,
-{
-    fn from(style_sheet: T) -> Self {
-        Box::new(style_sheet)
-    }
+    fn dragging(&self, variant: Self::Variant) -> Style;
 }

style/src/theme.rs

@@ -3,6 +3,7 @@ mod palette;
 pub use self::palette::Palette;
 
 use crate::button;
+use crate::slider;
 
 use iced_core::{Background, Color};
 
@@ -118,3 +119,56 @@ impl button::StyleSheet for Theme {
         }
     }
 }
+
+impl slider::StyleSheet for Theme {
+    type Variant = ();
+
+    fn active(&self, _variant: Self::Variant) -> slider::Style {
+        let palette = self.extended_palette();
+
+        let handle = slider::Handle {
+            shape: slider::HandleShape::Rectangle {
+                width: 8,
+                border_radius: 4.0,
+            },
+            color: Color::WHITE,
+            border_color: Color::WHITE,
+            border_width: 1.0,
+        };
+
+        slider::Style {
+            rail_colors: (palette.background.strong, palette.background.base),
+            handle: slider::Handle {
+                color: palette.background.base,
+                border_color: palette.border,
+                ..handle
+            },
+        }
+    }
+
+    fn hovered(&self, variant: Self::Variant) -> slider::Style {
+        let active = self.active(variant);
+        let palette = self.extended_palette();
+
+        slider::Style {
+            handle: slider::Handle {
+                color: palette.background.weak,
+                ..active.handle
+            },
+            ..active
+        }
+    }
+
+    fn dragging(&self, variant: Self::Variant) -> slider::Style {
+        let active = self.active(variant);
+        let palette = self.extended_palette();
+
+        slider::Style {
+            handle: slider::Handle {
+                color: palette.background.strong,
+                ..active.handle
+            },
+            ..active
+        }
+    }
+}

style/src/theme/palette.rs

@@ -59,6 +59,7 @@ pub struct Extended {
     pub primary: Group,
     pub success: Group,
     pub danger: Group,
+    pub border: Color,
 }
 
 lazy_static! {
@@ -86,6 +87,7 @@ impl Extended {
                 palette.background,
                 palette.text,
             ),
+            border: mix(palette.background, palette.text, 0.7),
         }
     }
 }