Implement theme styling for TextInput

examples/component/src/main.rs

@@ -95,7 +95,7 @@ mod numeric_input {
         for NumericInput<'a, Message>
     where
         Renderer: 'a + text::Renderer,
-        Renderer::Theme: button::StyleSheet,
+        Renderer::Theme: button::StyleSheet + text_input::StyleSheet,
     {
         type Event = Event;
 
@@ -173,7 +173,7 @@ mod numeric_input {
     where
         Message: 'a,
         Renderer: text::Renderer + 'a,
-        Renderer::Theme: button::StyleSheet,
+        Renderer::Theme: button::StyleSheet + text_input::StyleSheet,
     {
         fn from(numeric_input: NumericInput<'a, Message>) -> Self {
             component::view(numeric_input)

examples/pure/component/src/main.rs

@@ -89,7 +89,8 @@ mod numeric_input {
     impl<Message, Renderer> Component<Message, Renderer> for NumericInput<Message>
     where
         Renderer: text::Renderer + 'static,
-        Renderer::Theme: widget::button::StyleSheet,
+        Renderer::Theme:
+            widget::button::StyleSheet + widget::text_input::StyleSheet,
     {
         type State = ();
         type Event = Event;
@@ -160,7 +161,8 @@ mod numeric_input {
     where
         Message: 'a,
         Renderer: 'static + text::Renderer,
-        Renderer::Theme: widget::button::StyleSheet,
+        Renderer::Theme:
+            widget::button::StyleSheet + widget::text_input::StyleSheet,
     {
         fn from(numeric_input: NumericInput<Message>) -> Self {
             pure::component(numeric_input)

examples/scrollable/src/style.rs

@@ -43,12 +43,6 @@ mod dark {
         0x3F as f32 / 255.0,
     );
 
-    const SURFACE: Color = Color::from_rgb(
-        0x40 as f32 / 255.0,
-        0x44 as f32 / 255.0,
-        0x4B as f32 / 255.0,
-    );
-
     const ACCENT: Color = Color::from_rgb(
         0x6F as f32 / 255.0,
         0xFF as f32 / 255.0,

examples/styling/src/main.rs

@@ -77,8 +77,7 @@ impl Sandbox for Styling {
             Message::InputChanged,
         )
         .padding(10)
-        .size(20)
+        .size(20);
-        .style(self.theme);
 
         let button = Button::new(&mut self.button, Text::new("Submit"))
             .padding(10)
@@ -157,7 +156,7 @@ impl Sandbox for Styling {
 }
 
 mod style {
-    use iced::{scrollable, text_input};
+    use iced::scrollable;
 
     #[derive(Debug, Clone, Copy, PartialEq, Eq)]
     pub enum Theme {
@@ -175,15 +174,6 @@ mod style {
         }
     }
 
-    impl<'a> From<Theme> for Box<dyn text_input::StyleSheet + 'a> {
-        fn from(theme: Theme) -> Self {
-            match theme {
-                Theme::Light => Default::default(),
-                Theme::Dark => dark::TextInput.into(),
-            }
-        }
-    }
-
     impl<'a> From<Theme> for Box<dyn scrollable::StyleSheet + 'a> {
         fn from(theme: Theme) -> Self {
             match theme {
@@ -194,7 +184,7 @@ mod style {
     }
 
     mod dark {
-        use iced::{scrollable, text_input, Color};
+        use iced::{scrollable, Color};
 
         const SURFACE: Color = Color::from_rgb(
             0x40 as f32 / 255.0,
@@ -202,12 +192,6 @@ mod style {
             0x4B as f32 / 255.0,
         );
 
-        const ACCENT: Color = Color::from_rgb(
-            0x6F as f32 / 255.0,
-            0xFF as f32 / 255.0,
-            0xE9 as f32 / 255.0,
-        );
-
         const ACTIVE: Color = Color::from_rgb(
             0x72 as f32 / 255.0,
             0x89 as f32 / 255.0,
@@ -220,47 +204,6 @@ mod style {
             0xC4 as f32 / 255.0,
         );
 
-        pub struct TextInput;
-
-        impl text_input::StyleSheet for TextInput {
-            fn active(&self) -> text_input::Style {
-                text_input::Style {
-                    background: SURFACE.into(),
-                    border_radius: 2.0,
-                    border_width: 0.0,
-                    border_color: Color::TRANSPARENT,
-                }
-            }
-
-            fn focused(&self) -> text_input::Style {
-                text_input::Style {
-                    border_width: 1.0,
-                    border_color: ACCENT,
-                    ..self.active()
-                }
-            }
-
-            fn hovered(&self) -> text_input::Style {
-                text_input::Style {
-                    border_width: 1.0,
-                    border_color: Color { a: 0.3, ..ACCENT },
-                    ..self.focused()
-                }
-            }
-
-            fn placeholder_color(&self) -> Color {
-                Color::from_rgb(0.4, 0.4, 0.4)
-            }
-
-            fn value_color(&self) -> Color {
-                Color::WHITE
-            }
-
-            fn selection_color(&self) -> Color {
-                ACTIVE
-            }
-        }
-
         pub struct Scrollable;
 
         impl scrollable::StyleSheet for Scrollable {

native/src/widget/text_input.rs

@@ -24,7 +24,7 @@ use crate::{
     Shell, Size, Vector, Widget,
 };
 
-pub use iced_style::text_input::{Style, StyleSheet};
+pub use iced_style::text_input::{Appearance, StyleSheet};
 
 /// A field that can be filled with text.
 ///
@@ -52,7 +52,11 @@ pub use iced_style::text_input::{Style, StyleSheet};
 /// ```
 /// ![Text input drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/text_input.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct TextInput<'a, Message, Renderer: text::Renderer> {
+pub struct TextInput<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     state: &'a mut State,
     placeholder: String,
     value: Value,
@@ -63,13 +67,14 @@ pub struct TextInput<'a, Message, Renderer: text::Renderer> {
     size: Option<u16>,
     on_change: Box<dyn Fn(String) -> Message + 'a>,
     on_submit: Option<Message>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> TextInput<'a, Message, Renderer>
 where
     Message: Clone,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// Creates a new [`TextInput`].
     ///
@@ -98,7 +103,7 @@ where
             size: None,
             on_change: Box::new(on_change),
             on_submit: None,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -143,9 +148,9 @@ where
     /// Sets the style of the [`TextInput`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 
@@ -161,12 +166,14 @@ where
     pub fn draw(
         &self,
         renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         layout: Layout<'_>,
         cursor_position: Point,
         value: Option<&Value>,
     ) {
         draw(
             renderer,
+            theme,
             layout,
             cursor_position,
             &self.state,
@@ -175,7 +182,7 @@ where
             self.size,
             &self.font,
             self.is_secure,
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 }
@@ -575,6 +582,7 @@ where
 /// [`Renderer`]: text::Renderer
 pub fn draw<Renderer>(
     renderer: &mut Renderer,
+    theme: &Renderer::Theme,
     layout: Layout<'_>,
     cursor_position: Point,
     state: &State,
@@ -583,9 +591,10 @@ pub fn draw<Renderer>(
     size: Option<u16>,
     font: &Renderer::Font,
     is_secure: bool,
-    style_sheet: &dyn StyleSheet,
+    style: <Renderer::Theme as StyleSheet>::Style,
 ) where
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     let secure_value = is_secure.then(|| value.secure());
     let value = secure_value.as_ref().unwrap_or(&value);
@@ -595,22 +604,22 @@ pub fn draw<Renderer>(
 
     let is_mouse_over = bounds.contains(cursor_position);
 
-    let style = if state.is_focused() {
+    let appearance = if state.is_focused() {
-        style_sheet.focused()
+        theme.focused(style)
     } else if is_mouse_over {
-        style_sheet.hovered()
+        theme.hovered(style)
     } else {
-        style_sheet.active()
+        theme.active(style)
     };
 
     renderer.fill_quad(
         renderer::Quad {
             bounds,
-            border_radius: style.border_radius,
+            border_radius: appearance.border_radius,
-            border_width: style.border_width,
+            border_width: appearance.border_width,
-            border_color: style.border_color,
+            border_color: appearance.border_color,
         },
-        style.background,
+        appearance.background,
     );
 
     let text = value.to_string();
@@ -642,7 +651,7 @@ pub fn draw<Renderer>(
                             border_width: 0.0,
                             border_color: Color::TRANSPARENT,
                         },
-                        style_sheet.value_color(),
+                        theme.value_color(style),
                     )),
                     offset,
                 )
@@ -686,7 +695,7 @@ pub fn draw<Renderer>(
                             border_width: 0.0,
                             border_color: Color::TRANSPARENT,
                         },
-                        style_sheet.selection_color(),
+                        theme.selection_color(style),
                     )),
                     if end == right {
                         right_offset
@@ -714,9 +723,9 @@ pub fn draw<Renderer>(
         renderer.fill_text(Text {
             content: if text.is_empty() { placeholder } else { &text },
             color: if text.is_empty() {
-                style_sheet.placeholder_color()
+                theme.placeholder_color(style)
             } else {
-                style_sheet.value_color()
+                theme.value_color(style)
             },
             font: font.clone(),
             bounds: Rectangle {
@@ -756,6 +765,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
 where
     Message: Clone,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn width(&self) -> Length {
         self.width
@@ -812,13 +822,13 @@ where
     fn draw(
         &self,
         renderer: &mut Renderer,
-        _theme: &Renderer::Theme,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         _viewport: &Rectangle,
     ) {
-        self.draw(renderer, layout, cursor_position, None)
+        self.draw(renderer, theme, layout, cursor_position, None)
     }
 }
 
@@ -827,6 +837,7 @@ impl<'a, Message, Renderer> From<TextInput<'a, Message, Renderer>>
 where
     Message: 'a + Clone,
     Renderer: 'a + text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         text_input: TextInput<'a, Message, Renderer>,

pure/src/helpers.rs

@@ -142,6 +142,7 @@ pub fn text_input<'a, Message, Renderer>(
 where
     Message: Clone,
     Renderer: iced_native::text::Renderer,
+    Renderer::Theme: widget::text_input::StyleSheet,
 {
     widget::TextInput::new(placeholder, value, on_change)
 }

pure/src/widget/text_input.rs

@@ -10,7 +10,7 @@ use iced_native::text;
 use iced_native::widget::text_input;
 use iced_native::{Clipboard, Length, Padding, Point, Rectangle, Shell};
 
-pub use iced_style::text_input::{Style, StyleSheet};
+pub use iced_style::text_input::{Appearance, StyleSheet};
 
 /// A field that can be filled with text.
 ///
@@ -33,7 +33,11 @@ pub use iced_style::text_input::{Style, StyleSheet};
 /// ```
 /// ![Text input drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/text_input.png?raw=true)
 #[allow(missing_debug_implementations)]
-pub struct TextInput<'a, Message, Renderer: text::Renderer> {
+pub struct TextInput<'a, Message, Renderer>
+where
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
+{
     placeholder: String,
     value: text_input::Value,
     is_secure: bool,
@@ -43,13 +47,14 @@ pub struct TextInput<'a, Message, Renderer: text::Renderer> {
     size: Option<u16>,
     on_change: Box<dyn Fn(String) -> Message + 'a>,
     on_submit: Option<Message>,
-    style_sheet: Box<dyn StyleSheet + 'a>,
+    style: <Renderer::Theme as StyleSheet>::Style,
 }
 
 impl<'a, Message, Renderer> TextInput<'a, Message, Renderer>
 where
     Message: Clone,
     Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     /// Creates a new [`TextInput`].
     ///
@@ -71,7 +76,7 @@ where
             size: None,
             on_change: Box::new(on_change),
             on_submit: None,
-            style_sheet: Default::default(),
+            style: Default::default(),
         }
     }
 
@@ -83,7 +88,7 @@ where
 
     /// Sets the [`Font`] of the [`TextInput`].
     ///
-    /// [`Font`]: iced_native::text::Renderer::Font
+    /// [`Font`]: text::Renderer::Font
     pub fn font(mut self, font: Renderer::Font) -> Self {
         self.font = font;
         self
@@ -116,9 +121,9 @@ where
     /// Sets the style of the [`TextInput`].
     pub fn style(
         mut self,
-        style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
+        style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
     ) -> Self {
-        self.style_sheet = style_sheet.into();
+        self.style = style.into();
         self
     }
 }
@@ -127,7 +132,8 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
     for TextInput<'a, Message, Renderer>
 where
     Message: Clone,
-    Renderer: iced_native::text::Renderer,
+    Renderer: text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn tag(&self) -> tree::Tag {
         tree::Tag::of::<text_input::State>()
@@ -198,6 +204,7 @@ where
     ) {
         text_input::draw(
             renderer,
+            theme,
             layout,
             cursor_position,
             tree.state.downcast_ref::<text_input::State>(),
@@ -206,7 +213,7 @@ where
             self.size,
             &self.font,
             self.is_secure,
-            self.style_sheet.as_ref(),
+            self.style,
         )
     }
 
@@ -227,6 +234,7 @@ impl<'a, Message, Renderer> From<TextInput<'a, Message, Renderer>>
 where
     Message: 'a + Clone,
     Renderer: 'a + text::Renderer,
+    Renderer::Theme: StyleSheet,
 {
     fn from(
         text_input: TextInput<'a, Message, Renderer>,

src/pure/widget.rs

@@ -120,7 +120,7 @@ pub mod text_input {
     //! Display fields that can be filled with text.
     use crate::Renderer;
 
-    pub use iced_pure::widget::text_input::{Style, StyleSheet};
+    pub use iced_pure::widget::text_input::{Appearance, StyleSheet};
 
     /// A field that can be filled with text.
     pub type TextInput<'a, Message, Theme> =

src/widget.rs

@@ -140,7 +140,7 @@ pub mod text_input {
     //! A [`TextInput`] has some local [`State`].
     use crate::Renderer;
 
-    pub use iced_native::widget::text_input::{State, Style, StyleSheet};
+    pub use iced_native::widget::text_input::{Appearance, State, StyleSheet};
 
     /// A field that can be filled with text.
     pub type TextInput<'a, Message, Theme> =

style/src/text_input.rs

@@ -3,87 +3,31 @@ use iced_core::{Background, Color};
 
 /// The appearance of a text input.
 #[derive(Debug, Clone, Copy)]
-pub struct Style {
+pub struct Appearance {
     pub background: Background,
     pub border_radius: f32,
     pub border_width: f32,
     pub border_color: Color,
 }
 
-impl std::default::Default for Style {
-    fn default() -> Self {
-        Self {
-            background: Background::Color(Color::WHITE),
-            border_radius: 0.0,
-            border_width: 0.0,
-            border_color: Color::TRANSPARENT,
-        }
-    }
-}
-
 /// A set of rules that dictate the style of a text input.
 pub trait StyleSheet {
+    type Style: Default + Copy;
+
     /// Produces the style of an active text input.
-    fn active(&self) -> Style;
+    fn active(&self, style: Self::Style) -> Appearance;
 
     /// Produces the style of a focused text input.
-    fn focused(&self) -> Style;
+    fn focused(&self, style: Self::Style) -> Appearance;
 
-    fn placeholder_color(&self) -> Color;
+    fn placeholder_color(&self, style: Self::Style) -> Color;
 
-    fn value_color(&self) -> Color;
+    fn value_color(&self, style: Self::Style) -> Color;
 
-    fn selection_color(&self) -> Color;
+    fn selection_color(&self, style: Self::Style) -> Color;
 
     /// Produces the style of an hovered text input.
-    fn hovered(&self) -> Style {
+    fn hovered(&self, style: Self::Style) -> Appearance {
-        self.focused()
+        self.focused(style)
-    }
-}
-
-struct Default;
-
-impl StyleSheet for Default {
-    fn active(&self) -> Style {
-        Style {
-            background: Background::Color(Color::WHITE),
-            border_radius: 5.0,
-            border_width: 1.0,
-            border_color: Color::from_rgb(0.7, 0.7, 0.7),
-        }
-    }
-
-    fn focused(&self) -> Style {
-        Style {
-            border_color: Color::from_rgb(0.5, 0.5, 0.5),
-            ..self.active()
-        }
-    }
-
-    fn placeholder_color(&self) -> Color {
-        Color::from_rgb(0.7, 0.7, 0.7)
-    }
-
-    fn value_color(&self) -> Color {
-        Color::from_rgb(0.3, 0.3, 0.3)
-    }
-
-    fn selection_color(&self) -> Color {
-        Color::from_rgb(0.8, 0.8, 1.0)
-    }
-}
-
-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)
     }
 }

style/src/theme.rs

@@ -10,6 +10,7 @@ use crate::progress_bar;
 use crate::radio;
 use crate::rule;
 use crate::slider;
+use crate::text_input;
 use crate::toggler;
 
 use iced_core::{Background, Color};
@@ -152,22 +153,22 @@ impl checkbox::StyleSheet for Theme {
 
         match style {
             Checkbox::Primary => checkbox_appearance(
-                palette.background.weak,
+                palette.background.base,
                 palette.primary.strong,
                 is_checked,
             ),
             Checkbox::Secondary => checkbox_appearance(
-                palette.background.weak,
+                palette.background.base,
                 palette.background.base,
                 is_checked,
             ),
             Checkbox::Success => checkbox_appearance(
-                palette.background.weak,
+                palette.background.base,
                 palette.success.base,
                 is_checked,
             ),
             Checkbox::Danger => checkbox_appearance(
-                palette.background.weak,
+                palette.background.base,
                 palette.danger.base,
                 is_checked,
             ),
@@ -183,23 +184,23 @@ impl checkbox::StyleSheet for Theme {
 
         match style {
             Checkbox::Primary => checkbox_appearance(
-                palette.background.strong,
+                palette.background.weak,
-                palette.primary.strong,
+                palette.primary.base,
                 is_checked,
             ),
             Checkbox::Secondary => checkbox_appearance(
-                palette.background.strong,
+                palette.background.weak,
-                palette.background.strong,
+                palette.background.base,
                 is_checked,
             ),
             Checkbox::Success => checkbox_appearance(
-                palette.background.strong,
+                palette.background.weak,
-                palette.success.strong,
+                palette.success.base,
                 is_checked,
             ),
             Checkbox::Danger => checkbox_appearance(
-                palette.background.strong,
+                palette.background.weak,
-                palette.danger.strong,
+                palette.danger.base,
                 is_checked,
             ),
         }
@@ -410,7 +411,7 @@ impl progress_bar::StyleSheet for Theme {
         let palette = self.extended_palette();
 
         let from_palette = |bar: Color| progress_bar::Appearance {
-            background: palette.background.weak.color.into(),
+            background: palette.background.strong.color.into(),
             bar: bar.into(),
             border_radius: 2.0,
         };
@@ -456,3 +457,61 @@ impl rule::StyleSheet for Theme {
         }
     }
 }
+
+/*
+ * Text Input
+ */
+impl text_input::StyleSheet for Theme {
+    type Style = ();
+
+    fn active(&self, _style: Self::Style) -> text_input::Appearance {
+        let palette = self.extended_palette();
+
+        text_input::Appearance {
+            background: palette.background.base.color.into(),
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.background.strong.color,
+        }
+    }
+
+    fn hovered(&self, _style: Self::Style) -> text_input::Appearance {
+        let palette = self.extended_palette();
+
+        text_input::Appearance {
+            background: palette.background.base.color.into(),
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.background.base.text,
+        }
+    }
+
+    fn focused(&self, _style: Self::Style) -> text_input::Appearance {
+        let palette = self.extended_palette();
+
+        text_input::Appearance {
+            background: palette.background.base.color.into(),
+            border_radius: 2.0,
+            border_width: 1.0,
+            border_color: palette.primary.strong.color,
+        }
+    }
+
+    fn placeholder_color(&self, _style: Self::Style) -> Color {
+        let palette = self.extended_palette();
+
+        palette.background.strong.color
+    }
+
+    fn value_color(&self, _style: Self::Style) -> Color {
+        let palette = self.extended_palette();
+
+        palette.background.base.text
+    }
+
+    fn selection_color(&self, _style: Self::Style) -> Color {
+        let palette = self.extended_palette();
+
+        palette.primary.weak.color
+    }
+}

style/src/theme/palette.rs

@@ -120,7 +120,7 @@ pub struct Background {
 impl Background {
     pub fn new(base: Color, text: Color) -> Self {
         let weak = mix(base, text, 0.15);
-        let strong = mix(base, text, 0.25);
+        let strong = mix(base, text, 0.40);
 
         Self {
             base: Pair::new(base, text),