From 664251f3f5c7b76f69a97683af1468094bba887f Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 14 May 2022 01:47:55 +0200 Subject: Draft first-class `Theme` support RFC: https://github.com/iced-rs/rfcs/pull/6 --- style/src/theme.rs | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 style/src/theme.rs (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs new file mode 100644 index 00000000..7d420c8a --- /dev/null +++ b/style/src/theme.rs @@ -0,0 +1,45 @@ +use crate::button; + +use iced_core::{Color, Vector}; + +#[derive(Debug, Clone, Copy, PartialEq, Eq)] +pub enum Theme { + Light, + Dark, +} + +impl Default for Theme { + fn default() -> Self { + Self::Light + } +} + +#[derive(Debug, Clone, Copy, PartialEq, Eq)] +pub enum Button { + Primary, + Secondary, + Positive, + Destructive, + Text, +} + +impl Default for Button { + fn default() -> Self { + Self::Primary + } +} + +impl button::StyleSheet for Theme { + type Variant = Button; + + fn active(&self, _variant: Self::Variant) -> button::Style { + button::Style { + shadow_offset: Vector::default(), + background: None, + border_radius: 0.0, + border_width: 0.0, + border_color: Color::TRANSPARENT, + text_color: Color::BLACK, + } + } +} -- cgit From 2cfb307f8c3927a0876c6b754a5d7d673b9edfee Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 21 May 2022 17:33:31 -0400 Subject: Implement basic theming `Palette` --- style/src/theme.rs | 79 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 71 insertions(+), 8 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 7d420c8a..91a9e921 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -1,6 +1,10 @@ +mod palette; + +pub use self::palette::Palette; + use crate::button; -use iced_core::{Color, Vector}; +use iced_core::Background; #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Theme { @@ -8,6 +12,22 @@ pub enum Theme { Dark, } +impl Theme { + pub fn palette(self) -> Palette { + match self { + Self::Light => Palette::LIGHT, + Self::Dark => Palette::DARK, + } + } + + fn extended_palette(&self) -> &palette::Extended { + match self { + Self::Light => &palette::EXTENDED_LIGHT, + Self::Dark => &palette::EXTENDED_DARK, + } + } +} + impl Default for Theme { fn default() -> Self { Self::Light @@ -32,14 +52,57 @@ impl Default for Button { impl button::StyleSheet for Theme { type Variant = Button; - fn active(&self, _variant: Self::Variant) -> button::Style { + fn active(&self, variant: Self::Variant) -> button::Style { + let palette = self.extended_palette(); + + let style = button::Style { + border_radius: 2.0, + ..button::Style::default() + }; + + match variant { + Button::Primary => button::Style { + background: Some(palette.primary.strong.into()), + text_color: palette.primary.text, + ..style + }, + Button::Secondary => button::Style { + background: Some(palette.background.weak.into()), + text_color: palette.background.text, + ..style + }, + Button::Positive => button::Style { + background: Some(palette.success.base.into()), + text_color: palette.success.text, + ..style + }, + Button::Destructive => button::Style { + background: Some(palette.danger.base.into()), + text_color: palette.danger.text, + ..style + }, + Button::Text => button::Style { + text_color: palette.background.text, + ..style + }, + } + } + + fn hovered(&self, variant: Self::Variant) -> button::Style { + let active = self.active(variant); + let palette = self.extended_palette(); + + let background = match variant { + Button::Primary => Some(palette.primary.base), + Button::Secondary => Some(palette.background.strong), + Button::Positive => Some(palette.success.strong), + Button::Destructive => Some(palette.danger.strong), + Button::Text => None, + }; + button::Style { - shadow_offset: Vector::default(), - background: None, - border_radius: 0.0, - border_width: 0.0, - border_color: Color::TRANSPARENT, - text_color: Color::BLACK, + background: background.map(Background::from), + ..active } } } -- cgit From 03eda9b162012c503ead649e5ccb95b7ef1d10ed Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 25 May 2022 05:01:18 +0200 Subject: Let a `Theme` control the background color of an application ... and remove `Application::background_color` --- style/src/theme.rs | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 91a9e921..16f24923 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -4,7 +4,7 @@ pub use self::palette::Palette; use crate::button; -use iced_core::Background; +use iced_core::{Background, Color}; #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Theme { @@ -34,6 +34,18 @@ impl Default for Theme { } } +pub trait Definition { + fn background_color(&self) -> Color; +} + +impl Definition for Theme { + fn background_color(&self) -> Color { + let palette = self.extended_palette(); + + palette.background.base + } +} + #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Button { Primary, -- cgit From 3a820b45f336398c48f8bedf7b8c4b8af876efff Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 00:40:27 +0200 Subject: Implement theme styling for `Slider` --- style/src/theme.rs | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 16f24923..e3c0efc6 100644 --- a/style/src/theme.rs +++ b/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 + } + } +} -- cgit From 822a3cd04f9edeb887d85164b0b3e556c3fde6bb Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 01:10:26 +0200 Subject: Let a `Theme` control the `text_color` of an application --- style/src/theme.rs | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index e3c0efc6..1ddf97c3 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -31,12 +31,14 @@ impl Theme { impl Default for Theme { fn default() -> Self { - Self::Light + Self::Dark } } pub trait Definition { fn background_color(&self) -> Color; + + fn text_color(&self) -> Color; } impl Definition for Theme { @@ -45,6 +47,12 @@ impl Definition for Theme { palette.background.base } + + fn text_color(&self) -> Color { + let palette = self.extended_palette(); + + palette.background.text + } } #[derive(Debug, Clone, Copy, PartialEq, Eq)] -- cgit From 5a39dad506a1614fd0ccacb1f56e83acbaf4961a Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 05:31:25 +0200 Subject: Tweak styling of `Slider` and improve contrast of `Background` --- style/src/theme.rs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 1ddf97c3..cf939824 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -31,7 +31,7 @@ impl Theme { impl Default for Theme { fn default() -> Self { - Self::Dark + Self::Light } } @@ -145,10 +145,10 @@ impl slider::StyleSheet for Theme { }; slider::Style { - rail_colors: (palette.background.strong, palette.background.base), + rail_colors: (palette.primary.base, palette.background.base), handle: slider::Handle { color: palette.background.base, - border_color: palette.border, + border_color: palette.primary.base, ..handle }, } @@ -160,7 +160,7 @@ impl slider::StyleSheet for Theme { slider::Style { handle: slider::Handle { - color: palette.background.weak, + color: palette.primary.weak, ..active.handle }, ..active @@ -173,7 +173,7 @@ impl slider::StyleSheet for Theme { slider::Style { handle: slider::Handle { - color: palette.background.strong, + color: palette.primary.base, ..active.handle }, ..active -- cgit From 7f3b7075db68a215f4331b4bfba1c8ddd1c4d7f3 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 19:02:15 +0200 Subject: Rename `theme::Definition` to `application::StyleSheet` --- style/src/theme.rs | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index cf939824..9cfbd1d5 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -2,6 +2,7 @@ mod palette; pub use self::palette::Palette; +use crate::application; use crate::button; use crate::slider; @@ -35,13 +36,7 @@ impl Default for Theme { } } -pub trait Definition { - fn background_color(&self) -> Color; - - fn text_color(&self) -> Color; -} - -impl Definition for Theme { +impl application::StyleSheet for Theme { fn background_color(&self) -> Color { let palette = self.extended_palette(); -- cgit From cf0230072c01ea9523f4d98a3656f5c975b3f347 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 23:07:34 +0200 Subject: Rename `Variant` to `Style` and `Style` to `Appearance` --- style/src/theme.rs | 56 +++++++++++++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 9cfbd1d5..df67f594 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -66,49 +66,49 @@ impl Default for Button { } impl button::StyleSheet for Theme { - type Variant = Button; + type Style = Button; - fn active(&self, variant: Self::Variant) -> button::Style { + fn active(&self, style: Self::Style) -> button::Appearance { let palette = self.extended_palette(); - let style = button::Style { + let appearance = button::Appearance { border_radius: 2.0, - ..button::Style::default() + ..button::Appearance::default() }; - match variant { - Button::Primary => button::Style { + match style { + Button::Primary => button::Appearance { background: Some(palette.primary.strong.into()), text_color: palette.primary.text, - ..style + ..appearance }, - Button::Secondary => button::Style { + Button::Secondary => button::Appearance { background: Some(palette.background.weak.into()), text_color: palette.background.text, - ..style + ..appearance }, - Button::Positive => button::Style { + Button::Positive => button::Appearance { background: Some(palette.success.base.into()), text_color: palette.success.text, - ..style + ..appearance }, - Button::Destructive => button::Style { + Button::Destructive => button::Appearance { background: Some(palette.danger.base.into()), text_color: palette.danger.text, - ..style + ..appearance }, - Button::Text => button::Style { + Button::Text => button::Appearance { text_color: palette.background.text, - ..style + ..appearance }, } } - fn hovered(&self, variant: Self::Variant) -> button::Style { - let active = self.active(variant); + fn hovered(&self, style: Self::Style) -> button::Appearance { + let active = self.active(style); let palette = self.extended_palette(); - let background = match variant { + let background = match style { Button::Primary => Some(palette.primary.base), Button::Secondary => Some(palette.background.strong), Button::Positive => Some(palette.success.strong), @@ -116,7 +116,7 @@ impl button::StyleSheet for Theme { Button::Text => None, }; - button::Style { + button::Appearance { background: background.map(Background::from), ..active } @@ -124,9 +124,9 @@ impl button::StyleSheet for Theme { } impl slider::StyleSheet for Theme { - type Variant = (); + type Style = (); - fn active(&self, _variant: Self::Variant) -> slider::Style { + fn active(&self, _style: Self::Style) -> slider::Appearance { let palette = self.extended_palette(); let handle = slider::Handle { @@ -139,7 +139,7 @@ impl slider::StyleSheet for Theme { border_width: 1.0, }; - slider::Style { + slider::Appearance { rail_colors: (palette.primary.base, palette.background.base), handle: slider::Handle { color: palette.background.base, @@ -149,11 +149,11 @@ impl slider::StyleSheet for Theme { } } - fn hovered(&self, variant: Self::Variant) -> slider::Style { - let active = self.active(variant); + fn hovered(&self, style: Self::Style) -> slider::Appearance { + let active = self.active(style); let palette = self.extended_palette(); - slider::Style { + slider::Appearance { handle: slider::Handle { color: palette.primary.weak, ..active.handle @@ -162,11 +162,11 @@ impl slider::StyleSheet for Theme { } } - fn dragging(&self, variant: Self::Variant) -> slider::Style { - let active = self.active(variant); + fn dragging(&self, style: Self::Style) -> slider::Appearance { + let active = self.active(style); let palette = self.extended_palette(); - slider::Style { + slider::Appearance { handle: slider::Handle { color: palette.primary.base, ..active.handle -- cgit From d988d813d77bc23147a179586206048e6cc42157 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 26 May 2022 23:58:56 +0200 Subject: Introduce specific types for each `palette::Extended` field We will have more control over color calculations for each semantic purpose this way. --- style/src/theme.rs | 54 ++++++++++++++++++++++-------------------------------- 1 file changed, 22 insertions(+), 32 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index df67f594..c9fae3c2 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -40,13 +40,13 @@ impl application::StyleSheet for Theme { fn background_color(&self) -> Color { let palette = self.extended_palette(); - palette.background.base + palette.background.base.color } fn text_color(&self) -> Color { let palette = self.extended_palette(); - palette.background.text + palette.background.base.text } } @@ -76,29 +76,19 @@ impl button::StyleSheet for Theme { ..button::Appearance::default() }; + let from_pair = |pair: palette::Pair| button::Appearance { + background: Some(pair.color.into()), + text_color: pair.text, + ..appearance + }; + match style { - Button::Primary => button::Appearance { - background: Some(palette.primary.strong.into()), - text_color: palette.primary.text, - ..appearance - }, - Button::Secondary => button::Appearance { - background: Some(palette.background.weak.into()), - text_color: palette.background.text, - ..appearance - }, - Button::Positive => button::Appearance { - background: Some(palette.success.base.into()), - text_color: palette.success.text, - ..appearance - }, - Button::Destructive => button::Appearance { - background: Some(palette.danger.base.into()), - text_color: palette.danger.text, - ..appearance - }, + Button::Primary => from_pair(palette.primary.strong), + Button::Secondary => from_pair(palette.secondary.base), + Button::Positive => from_pair(palette.success.base), + Button::Destructive => from_pair(palette.danger.base), Button::Text => button::Appearance { - text_color: palette.background.text, + text_color: palette.background.base.text, ..appearance }, } @@ -109,10 +99,10 @@ impl button::StyleSheet for Theme { let palette = self.extended_palette(); let background = match style { - Button::Primary => Some(palette.primary.base), - Button::Secondary => Some(palette.background.strong), - Button::Positive => Some(palette.success.strong), - Button::Destructive => Some(palette.danger.strong), + Button::Primary => Some(palette.primary.base.color), + Button::Secondary => Some(palette.background.strong.color), + Button::Positive => Some(palette.success.strong.color), + Button::Destructive => Some(palette.danger.strong.color), Button::Text => None, }; @@ -140,10 +130,10 @@ impl slider::StyleSheet for Theme { }; slider::Appearance { - rail_colors: (palette.primary.base, palette.background.base), + rail_colors: (palette.primary.base.color, Color::TRANSPARENT), handle: slider::Handle { - color: palette.background.base, - border_color: palette.primary.base, + color: palette.background.base.color, + border_color: palette.primary.base.color, ..handle }, } @@ -155,7 +145,7 @@ impl slider::StyleSheet for Theme { slider::Appearance { handle: slider::Handle { - color: palette.primary.weak, + color: palette.primary.weak.color, ..active.handle }, ..active @@ -168,7 +158,7 @@ impl slider::StyleSheet for Theme { slider::Appearance { handle: slider::Handle { - color: palette.primary.base, + color: palette.primary.base.color, ..active.handle }, ..active -- cgit From 28d09bfff1dde55190986bab10d7aaeb0ceb49de Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 27 May 2022 01:26:57 +0200 Subject: Implement theme styling for `Radio` --- style/src/theme.rs | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index c9fae3c2..e3b151aa 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -4,6 +4,7 @@ pub use self::palette::Palette; use crate::application; use crate::button; +use crate::radio; use crate::slider; use iced_core::{Background, Color}; @@ -165,3 +166,30 @@ impl slider::StyleSheet for Theme { } } } + +impl radio::StyleSheet for Theme { + type Style = (); + + fn active(&self, _style: Self::Style) -> radio::Appearance { + let palette = self.extended_palette(); + + radio::Appearance { + background: Color::TRANSPARENT.into(), + dot_color: palette.primary.strong.color.into(), + border_width: 1.0, + border_color: palette.primary.strong.color, + text_color: None, + } + } + + fn hovered(&self, style: Self::Style) -> radio::Appearance { + let active = self.active(style); + let palette = self.extended_palette(); + + radio::Appearance { + dot_color: palette.primary.weak.text.into(), + background: palette.primary.weak.color.into(), + ..active + } + } +} -- cgit From 3e2b6247f72815b6e928237f242c2d66478cf15d Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 31 May 2022 05:13:57 +0200 Subject: Implement theme styling for `Toggler` ... and wire up theming to the `styling` example. --- style/src/theme.rs | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index e3b151aa..2f9fd4fa 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -6,6 +6,7 @@ use crate::application; use crate::button; use crate::radio; use crate::slider; +use crate::toggler; use iced_core::{Background, Color}; @@ -51,6 +52,9 @@ impl application::StyleSheet for Theme { } } +/* + * Button + */ #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Button { Primary, @@ -114,6 +118,9 @@ impl button::StyleSheet for Theme { } } +/* + * Slider + */ impl slider::StyleSheet for Theme { type Style = (); @@ -167,6 +174,9 @@ impl slider::StyleSheet for Theme { } } +/* + * Radio + */ impl radio::StyleSheet for Theme { type Style = (); @@ -193,3 +203,53 @@ impl radio::StyleSheet for Theme { } } } + +/* + * Toggler + */ +impl toggler::StyleSheet for Theme { + type Style = (); + + fn active( + &self, + _style: Self::Style, + is_active: bool, + ) -> toggler::Appearance { + let palette = self.extended_palette(); + + toggler::Appearance { + background: if is_active { + palette.primary.strong.color + } else { + palette.background.strong.color + }, + background_border: None, + foreground: if is_active { + palette.primary.strong.text + } else { + palette.background.base.color + }, + foreground_border: None, + } + } + + fn hovered( + &self, + style: Self::Style, + is_active: bool, + ) -> toggler::Appearance { + let palette = self.extended_palette(); + + toggler::Appearance { + foreground: if is_active { + Color { + a: 0.5, + ..palette.primary.strong.text + } + } else { + palette.background.weak.color + }, + ..self.active(style, is_active) + } + } +} -- cgit From 6f69df3d415bfc922ce15539746026843bd410e6 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 1 Jun 2022 01:44:59 +0200 Subject: Implement theme styling for `PaneGrid` --- style/src/theme.rs | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 2f9fd4fa..71330c2e 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -4,6 +4,7 @@ pub use self::palette::Palette; use crate::application; use crate::button; +use crate::pane_grid; use crate::radio; use crate::slider; use crate::toggler; @@ -253,3 +254,28 @@ impl toggler::StyleSheet for Theme { } } } + +/* + * Pane Grid + */ +impl pane_grid::StyleSheet for Theme { + type Style = (); + + fn picked_split(&self, _style: Self::Style) -> Option { + let palette = self.extended_palette(); + + Some(pane_grid::Line { + color: palette.primary.strong.color, + width: 2.0, + }) + } + + fn hovered_split(&self, _style: Self::Style) -> Option { + let palette = self.extended_palette(); + + Some(pane_grid::Line { + color: palette.primary.base.color, + width: 2.0, + }) + } +} -- cgit From c275fde67a7f5d1d5789540dc7905250a2f01fe7 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 1 Jun 2022 01:56:46 +0200 Subject: Implement theme styling for `Rule` --- style/src/theme.rs | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 71330c2e..713225e1 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -6,6 +6,7 @@ use crate::application; use crate::button; use crate::pane_grid; use crate::radio; +use crate::rule; use crate::slider; use crate::toggler; @@ -279,3 +280,21 @@ impl pane_grid::StyleSheet for Theme { }) } } + +/* + * Rule + */ +impl rule::StyleSheet for Theme { + type Style = (); + + fn style(&self, _style: Self::Style) -> rule::Appearance { + let palette = self.extended_palette(); + + rule::Appearance { + color: palette.background.strong.color, + width: 1, + radius: 0.0, + fill_mode: rule::FillMode::Full, + } + } +} -- cgit From e4ca779e436561bf48e5d34cdf554292fd4761e4 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 1 Jun 2022 02:04:23 +0200 Subject: Introduce `Custom` style variant for `Rule` --- style/src/theme.rs | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 713225e1..71a25dbe 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -284,17 +284,32 @@ impl pane_grid::StyleSheet for Theme { /* * Rule */ +#[derive(Clone, Copy)] +pub enum Rule { + Default, + Custom(fn(&Theme) -> rule::Appearance), +} + +impl Default for Rule { + fn default() -> Self { + Self::Default + } +} + impl rule::StyleSheet for Theme { - type Style = (); + type Style = Rule; - fn style(&self, _style: Self::Style) -> rule::Appearance { + fn style(&self, style: Self::Style) -> rule::Appearance { let palette = self.extended_palette(); - rule::Appearance { - color: palette.background.strong.color, - width: 1, - radius: 0.0, - fill_mode: rule::FillMode::Full, + match style { + Rule::Default => rule::Appearance { + color: palette.background.strong.color, + width: 1, + radius: 0.0, + fill_mode: rule::FillMode::Full, + }, + Rule::Custom(f) => f(self), } } } -- cgit From 77dc9dc2cb4ac092ce88c2700253fbfc54292e2b Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 1 Jun 2022 02:40:42 +0200 Subject: Implement theme styling for `ProgressBar` --- style/src/theme.rs | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 71a25dbe..ca780457 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -5,6 +5,7 @@ pub use self::palette::Palette; use crate::application; use crate::button; use crate::pane_grid; +use crate::progress_bar; use crate::radio; use crate::rule; use crate::slider; @@ -281,6 +282,44 @@ impl pane_grid::StyleSheet for Theme { } } +/* + * Progress Bar + */ +#[derive(Clone, Copy)] +pub enum ProgressBar { + Primary, + Success, + Danger, + Custom(fn(&Theme) -> progress_bar::Appearance), +} + +impl Default for ProgressBar { + fn default() -> Self { + Self::Primary + } +} + +impl progress_bar::StyleSheet for Theme { + type Style = ProgressBar; + + fn appearance(&self, style: Self::Style) -> progress_bar::Appearance { + let palette = self.extended_palette(); + + let from_palette = |bar: Color| progress_bar::Appearance { + background: palette.background.weak.color.into(), + bar: bar.into(), + border_radius: 2.0, + }; + + match style { + ProgressBar::Primary => from_palette(palette.primary.base.color), + ProgressBar::Success => from_palette(palette.success.base.color), + ProgressBar::Danger => from_palette(palette.danger.base.color), + ProgressBar::Custom(f) => f(self), + } + } +} + /* * Rule */ -- cgit From 1388d71f0368731e7efd799ee274ede9b8d3c690 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 4 Jun 2022 03:04:43 +0200 Subject: Expose `palette` module in `theme` --- style/src/theme.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index ca780457..305c5cc2 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -1,4 +1,4 @@ -mod palette; +pub mod palette; pub use self::palette::Palette; @@ -27,7 +27,7 @@ impl Theme { } } - fn extended_palette(&self) -> &palette::Extended { + pub fn extended_palette(&self) -> &palette::Extended { match self { Self::Light => &palette::EXTENDED_LIGHT, Self::Dark => &palette::EXTENDED_DARK, -- cgit From 835877fc636d71c1faaa4826cbfde8e09b3c82ba Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 4 Jun 2022 03:26:53 +0200 Subject: Implement theme styling for `Checkbox` --- style/src/theme.rs | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 305c5cc2..b0846c0e 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -4,6 +4,7 @@ pub use self::palette::Palette; use crate::application; use crate::button; +use crate::checkbox; use crate::pane_grid; use crate::progress_bar; use crate::radio; @@ -121,6 +122,109 @@ impl button::StyleSheet for Theme { } } +/* + * Checkbox + */ + +#[derive(Debug, Clone, Copy, PartialEq, Eq)] +pub enum Checkbox { + Primary, + Secondary, + Success, + Danger, +} + +impl Default for Checkbox { + fn default() -> Self { + Self::Primary + } +} + +impl checkbox::StyleSheet for Theme { + type Style = Checkbox; + + fn active( + &self, + style: Self::Style, + is_checked: bool, + ) -> checkbox::Appearance { + let palette = self.extended_palette(); + + match style { + Checkbox::Primary => checkbox_appearance( + palette.background.weak, + palette.primary.strong, + is_checked, + ), + Checkbox::Secondary => checkbox_appearance( + palette.background.weak, + palette.background.base, + is_checked, + ), + Checkbox::Success => checkbox_appearance( + palette.background.weak, + palette.success.base, + is_checked, + ), + Checkbox::Danger => checkbox_appearance( + palette.background.weak, + palette.danger.base, + is_checked, + ), + } + } + + fn hovered( + &self, + style: Self::Style, + is_checked: bool, + ) -> checkbox::Appearance { + let palette = self.extended_palette(); + + match style { + Checkbox::Primary => checkbox_appearance( + palette.background.strong, + palette.primary.strong, + is_checked, + ), + Checkbox::Secondary => checkbox_appearance( + palette.background.strong, + palette.background.strong, + is_checked, + ), + Checkbox::Success => checkbox_appearance( + palette.background.strong, + palette.success.strong, + is_checked, + ), + Checkbox::Danger => checkbox_appearance( + palette.background.strong, + palette.danger.strong, + is_checked, + ), + } + } +} + +fn checkbox_appearance( + base: palette::Pair, + accent: palette::Pair, + is_checked: bool, +) -> checkbox::Appearance { + checkbox::Appearance { + background: Background::Color(if is_checked { + accent.color + } else { + base.color + }), + checkmark_color: accent.text, + border_radius: 2.0, + border_width: 1.0, + border_color: accent.color, + text_color: None, + } +} + /* * Slider */ -- cgit From ce53d3933c860cd958636cce415ac97c04aee746 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jun 2022 01:11:35 +0200 Subject: Implement theme styling for `TextInput` --- style/src/theme.rs | 85 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 72 insertions(+), 13 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index b0846c0e..e1ac719e 100644 --- a/style/src/theme.rs +++ b/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.primary.strong, + palette.background.weak, + palette.primary.base, is_checked, ), Checkbox::Secondary => checkbox_appearance( - palette.background.strong, - palette.background.strong, + palette.background.weak, + palette.background.base, is_checked, ), Checkbox::Success => checkbox_appearance( - palette.background.strong, - palette.success.strong, + palette.background.weak, + palette.success.base, is_checked, ), Checkbox::Danger => checkbox_appearance( - palette.background.strong, - palette.danger.strong, + palette.background.weak, + 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 + } +} -- cgit From de21a651c0616307bb6bfd36da1a06119e629b10 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jun 2022 03:26:48 +0200 Subject: Implement theme styling for `Scrollable` --- style/src/theme.rs | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index e1ac719e..3eb4ea70 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -9,6 +9,7 @@ use crate::pane_grid; use crate::progress_bar; use crate::radio; use crate::rule; +use crate::scrollable; use crate::slider; use crate::text_input; use crate::toggler; @@ -458,6 +459,48 @@ impl rule::StyleSheet for Theme { } } +/* + * Scrollable + */ + +impl scrollable::StyleSheet for Theme { + type Style = (); + + fn active(&self, _style: Self::Style) -> scrollable::Scrollbar { + let palette = self.extended_palette(); + + scrollable::Scrollbar { + background: palette.background.weak.color.into(), + border_radius: 2.0, + border_width: 0.0, + border_color: Color::TRANSPARENT, + scroller: scrollable::Scroller { + color: palette.background.strong.color.into(), + border_radius: 2.0, + border_width: 0.0, + border_color: Color::TRANSPARENT, + }, + } + } + + fn hovered(&self, _style: Self::Style) -> scrollable::Scrollbar { + let palette = self.extended_palette(); + + scrollable::Scrollbar { + background: palette.background.weak.color.into(), + border_radius: 2.0, + border_width: 0.0, + border_color: Color::TRANSPARENT, + scroller: scrollable::Scroller { + color: palette.primary.strong.color.into(), + border_radius: 2.0, + border_width: 0.0, + border_color: Color::TRANSPARENT, + }, + } + } +} + /* * Text Input */ -- cgit From 97555e67af8b4bcc77df69c5e72156e14948150e Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jun 2022 04:11:24 +0200 Subject: Implement theme styling for `Container` --- style/src/theme.rs | 46 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 3eb4ea70..0e9a5964 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -5,6 +5,7 @@ pub use self::palette::Palette; use crate::application; use crate::button; use crate::checkbox; +use crate::container; use crate::pane_grid; use crate::progress_bar; use crate::radio; @@ -127,7 +128,6 @@ impl button::StyleSheet for Theme { /* * Checkbox */ - #[derive(Debug, Clone, Copy, PartialEq, Eq)] pub enum Checkbox { Primary, @@ -227,6 +227,50 @@ fn checkbox_appearance( } } +/* + * Container + */ +#[derive(Clone, Copy)] +pub enum Container { + Transparent, + Box, + Custom(fn(&Theme) -> container::Appearance), +} + +impl Default for Container { + fn default() -> Self { + Self::Transparent + } +} + +impl From container::Appearance> for Container { + fn from(f: fn(&Theme) -> container::Appearance) -> Self { + Self::Custom(f) + } +} + +impl container::StyleSheet for Theme { + type Style = Container; + + fn appearance(&self, style: Self::Style) -> container::Appearance { + match style { + Container::Transparent => Default::default(), + Container::Box => { + let palette = self.extended_palette(); + + container::Appearance { + text_color: None, + background: palette.background.weak.color.into(), + border_radius: 2.0, + border_width: 0.0, + border_color: Color::TRANSPARENT, + } + } + Container::Custom(f) => f(self), + } + } +} + /* * Slider */ -- cgit From 396735b682433928f52ba777891e14f2fbc703c7 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 7 Jun 2022 04:51:44 +0200 Subject: Implement theme styling for `PickList` and `Menu` --- style/src/theme.rs | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 0e9a5964..b1e18c55 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -6,7 +6,9 @@ use crate::application; use crate::button; use crate::checkbox; use crate::container; +use crate::menu; use crate::pane_grid; +use crate::pick_list; use crate::progress_bar; use crate::radio; use crate::rule; @@ -327,6 +329,61 @@ impl slider::StyleSheet for Theme { } } +/* + * Menu + */ +impl menu::StyleSheet for Theme { + type Style = (); + + fn appearance(&self, _style: Self::Style) -> menu::Appearance { + let palette = self.extended_palette(); + + menu::Appearance { + text_color: palette.background.weak.text, + background: palette.background.weak.color.into(), + border_width: 1.0, + border_color: palette.background.strong.color, + selected_text_color: palette.primary.strong.text, + selected_background: palette.primary.strong.color.into(), + } + } +} + +/* + * Pick List + */ +impl pick_list::StyleSheet for Theme { + type Style = (); + + fn active(&self, _style: ()) -> pick_list::Appearance { + let palette = self.extended_palette(); + + pick_list::Appearance { + text_color: palette.background.weak.text, + background: palette.background.weak.color.into(), + placeholder_color: palette.background.strong.color, + border_radius: 2.0, + border_width: 1.0, + border_color: palette.background.strong.color, + icon_size: 0.7, + } + } + + fn hovered(&self, _style: ()) -> pick_list::Appearance { + let palette = self.extended_palette(); + + pick_list::Appearance { + text_color: palette.background.weak.text, + background: palette.background.weak.color.into(), + placeholder_color: palette.background.strong.color, + border_radius: 2.0, + border_width: 1.0, + border_color: palette.primary.strong.color, + icon_size: 0.7, + } + } +} + /* * Radio */ @@ -506,7 +563,6 @@ impl rule::StyleSheet for Theme { /* * Scrollable */ - impl scrollable::StyleSheet for Theme { type Style = (); -- cgit From 1dd1a2f97fc747e15e12b5188dad6c41b0d052ea Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 29 Jun 2022 10:51:01 +0200 Subject: Introduce `StyleSheet` for `Text` widget --- style/src/theme.rs | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index b1e18c55..0bae671e 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -14,6 +14,7 @@ use crate::radio; use crate::rule; use crate::scrollable; use crate::slider; +use crate::text; use crate::text_input; use crate::toggler; @@ -601,6 +602,40 @@ impl scrollable::StyleSheet for Theme { } } +/* + * Text + */ +#[derive(Clone, Copy)] +pub enum Text { + Default, + Color(Color), + Custom(fn(&Theme) -> text::Appearance), +} + +impl Default for Text { + fn default() -> Self { + Self::Default + } +} + +impl From for Text { + fn from(color: Color) -> Self { + Text::Color(color) + } +} + +impl text::StyleSheet for Theme { + type Style = Text; + + fn appearance(&self, style: Self::Style) -> text::Appearance { + match style { + Text::Default => Default::default(), + Text::Color(c) => text::Appearance { color: Some(c) }, + Text::Custom(f) => f(self), + } + } +} + /* * Text Input */ -- cgit From bb07d017e8c8e43ac74f66bf649643bebdc5f71d Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 8 Jul 2022 20:07:33 +0200 Subject: Add `Style` variant support to `application::StyleSheet` --- style/src/theme.rs | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 0bae671e..70b32edf 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -48,17 +48,31 @@ impl Default for Theme { } } -impl application::StyleSheet for Theme { - fn background_color(&self) -> Color { - let palette = self.extended_palette(); +#[derive(Debug, Clone, Copy)] +pub enum Application { + Default, + Custom(fn(Theme) -> application::Appearance), +} - palette.background.base.color +impl Default for Application { + fn default() -> Self { + Self::Default } +} - fn text_color(&self) -> Color { +impl application::StyleSheet for Theme { + type Style = Application; + + fn appearance(&self, style: Self::Style) -> application::Appearance { let palette = self.extended_palette(); - palette.background.base.text + match style { + Application::Default => application::Appearance { + background_color: palette.background.base.color, + text_color: palette.background.base.text, + }, + Application::Custom(f) => f(*self), + } } } -- cgit From 3e643a9d6b904bcb46f94d2961d911deea915cf1 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 8 Jul 2022 20:23:38 +0200 Subject: Fix inconsistent styling for `Radio` and `Checkbox` --- style/src/theme.rs | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'style/src/theme.rs') diff --git a/style/src/theme.rs b/style/src/theme.rs index 70b32edf..d2de8a5d 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -171,21 +171,25 @@ impl checkbox::StyleSheet for Theme { match style { Checkbox::Primary => checkbox_appearance( + palette.primary.strong.text, palette.background.base, palette.primary.strong, is_checked, ), Checkbox::Secondary => checkbox_appearance( + palette.background.base.text, palette.background.base, palette.background.base, is_checked, ), Checkbox::Success => checkbox_appearance( + palette.success.base.text, palette.background.base, palette.success.base, is_checked, ), Checkbox::Danger => checkbox_appearance( + palette.danger.base.text, palette.background.base, palette.danger.base, is_checked, @@ -202,21 +206,25 @@ impl checkbox::StyleSheet for Theme { match style { Checkbox::Primary => checkbox_appearance( + palette.primary.strong.text, palette.background.weak, palette.primary.base, is_checked, ), Checkbox::Secondary => checkbox_appearance( + palette.background.base.text, palette.background.weak, palette.background.base, is_checked, ), Checkbox::Success => checkbox_appearance( + palette.success.base.text, palette.background.weak, palette.success.base, is_checked, ), Checkbox::Danger => checkbox_appearance( + palette.danger.base.text, palette.background.weak, palette.danger.base, is_checked, @@ -226,6 +234,7 @@ impl checkbox::StyleSheet for Theme { } fn checkbox_appearance( + checkmark_color: Color, base: palette::Pair, accent: palette::Pair, is_checked: bool, @@ -236,7 +245,7 @@ fn checkbox_appearance( } else { base.color }), - checkmark_color: accent.text, + checkmark_color, border_radius: 2.0, border_width: 1.0, border_color: accent.color, @@ -422,7 +431,7 @@ impl radio::StyleSheet for Theme { let palette = self.extended_palette(); radio::Appearance { - dot_color: palette.primary.weak.text.into(), + dot_color: palette.primary.strong.color.into(), background: palette.primary.weak.color.into(), ..active } -- cgit