feat(theme): improvements and refactoring of theme module

fix: theme rebase

src/app/cosmic.rs

@@ -156,7 +156,7 @@ where
     }
 
     fn theme(&self) -> Self::Theme {
-        THEME.with(|t| t.borrow().clone())
+        crate::theme::active()
     }
 
     #[cfg(feature = "wayland")]

src/app/settings.rs

@@ -91,7 +91,7 @@ impl Default for Settings {
             size: (1024, 768),
             #[cfg(feature = "wayland")]
             size_limits: Limits::NONE.min_height(1.0).min_width(1.0),
-            theme: crate::theme::theme(),
+            theme: crate::theme::system_preference(),
             transparent: false,
         }
     }

src/theme/button.rs

@@ -1,113 +0,0 @@
-// Copyright 2023 System76 <info@system76.com>
-// SPDX-License-Identifier: MPL-2.0
-
-use cosmic_theme::Component;
-use iced_core::{Background, Color};
-use palette::{rgb::Rgb, Alpha};
-
-use crate::{
-    app,
-    widget::button::{Appearance, StyleSheet},
-};
-
-#[derive(Copy, Clone, Debug, Default)]
-pub enum Button {
-    Destructive,
-    Link,
-    Icon,
-    #[default]
-    Standard,
-    Suggested,
-    Text,
-}
-
-pub fn appearance(
-    theme: &crate::Theme,
-    focused: bool,
-    style: &Button,
-    color: fn(&Component<Alpha<Rgb, f32>>) -> Color,
-) -> Appearance {
-    let cosmic = theme.cosmic();
-    let mut corner_radii = &cosmic.corner_radii.radius_xl;
-    let mut appearance = Appearance::new();
-
-    match style {
-        Button::Standard => {
-            let component = &theme.current_container().component;
-            appearance.background = Some(Background::Color(color(component)));
-            appearance.text_color = component.on.into();
-        }
-
-        Button::Icon | Button::Text => {
-            let component = &cosmic.text_button;
-            appearance.background = None;
-            appearance.text_color = component.on.into();
-        }
-
-        Button::Suggested => {
-            let component = &cosmic.accent_button;
-            appearance.background = Some(Background::Color(color(component)));
-            appearance.icon_color = Some(component.on.into());
-            appearance.text_color = component.on.into();
-        }
-
-        Button::Destructive => {
-            let component = &cosmic.destructive_button;
-            appearance.background = Some(Background::Color(color(component)));
-            appearance.icon_color = Some(component.on.into());
-            appearance.text_color = component.on.into();
-        }
-
-        Button::Link => {
-            appearance.background = None;
-            appearance.icon_color = Some(cosmic.accent.base.into());
-            appearance.text_color = cosmic.accent.base.into();
-            corner_radii = &cosmic.corner_radii.radius_0;
-        }
-    }
-
-    appearance.border_radius = (*corner_radii).into();
-
-    if focused {
-        appearance.outline_width = 1.0;
-        appearance.outline_color = cosmic.accent.base.into();
-        appearance.border_width = 2.0;
-        appearance.border_color = Color::TRANSPARENT;
-    }
-
-    appearance
-}
-
-impl StyleSheet for crate::Theme {
-    type Style = Button;
-
-    fn active(&self, focused: bool, style: &Self::Style) -> Appearance {
-        appearance(self, focused, style, |component| component.base.into())
-    }
-
-    fn disabled(&self, style: &Self::Style) -> Appearance {
-        appearance(self, false, style, |component| {
-            let mut color = Color::from(component.base);
-            color.a *= 0.5;
-            color
-        })
-    }
-
-    fn drop_target(&self, style: &Self::Style) -> Appearance {
-        let mut appearance = self.active(false, style);
-
-        appearance
-    }
-
-    fn hovered(&self, focused: bool, style: &Self::Style) -> Appearance {
-        appearance(self, focused, style, |component| component.hover.into())
-    }
-
-    fn pressed(&self, focused: bool, style: &Self::Style) -> Appearance {
-        appearance(self, focused, style, |component| component.pressed.into())
-    }
-
-    fn selected(&self, focused: bool, style: &Self::Style) -> Appearance {
-        appearance(self, focused, style, |component| component.selected.into())
-    }
-}

src/theme/style/button.rs

@@ -0,0 +1,134 @@
+// Copyright 2023 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+//! Contains stylesheet implementation for [`crate::widget::button`].
+
+use cosmic_theme::Component;
+use iced_core::{Background, Color};
+use palette::{rgb::Rgb, Alpha};
+
+use crate::widget::button::{Appearance, StyleSheet};
+
+#[derive(Copy, Clone, Debug, Default)]
+pub enum Button {
+    Destructive,
+    Link,
+    Icon,
+    IconVertical,
+    #[default]
+    Standard,
+    Suggested,
+    Text,
+}
+
+pub fn appearance(
+    theme: &crate::Theme,
+    focused: bool,
+    style: &Button,
+    color: impl Fn(&Component<Alpha<Rgb, f32>>) -> (Color, Color, Option<Color>),
+) -> Appearance {
+    let cosmic = theme.cosmic();
+    let mut corner_radii = &cosmic.corner_radii.radius_xl;
+    let mut appearance = Appearance::new();
+
+    match style {
+        Button::Standard | Button::Text | Button::Suggested | Button::Destructive => {
+            let style_component = match style {
+                Button::Standard => &cosmic.button,
+                Button::Text => &cosmic.text_button,
+                Button::Suggested => &cosmic.accent_button,
+                Button::Destructive => &cosmic.destructive_button,
+                _ => return appearance,
+            };
+
+            let (background, text, icon) = color(style_component);
+            appearance.background = Some(Background::Color(background));
+            appearance.text_color = text;
+            appearance.icon_color = icon;
+        }
+
+        Button::Icon | Button::IconVertical => {
+            if let Button::IconVertical = style {
+                corner_radii = &cosmic.corner_radii.radius_m;
+            }
+
+            let (background, text, icon) = color(&cosmic.icon_button);
+            appearance.background = Some(Background::Color(background));
+            if focused {
+                appearance.text_color = cosmic.accent.on.into();
+                appearance.icon_color = Some(cosmic.accent.on.into());
+            } else {
+                appearance.text_color = text;
+                appearance.icon_color = icon;
+            }
+        }
+
+        Button::Link => {
+            appearance.background = None;
+            appearance.icon_color = Some(cosmic.accent.base.into());
+            appearance.text_color = cosmic.accent.base.into();
+            corner_radii = &cosmic.corner_radii.radius_0;
+        }
+    }
+
+    appearance.border_radius = (*corner_radii).into();
+
+    if focused {
+        appearance.outline_width = 1.0;
+        appearance.outline_color = cosmic.accent.base.into();
+        appearance.border_width = 2.0;
+        appearance.border_color = Color::TRANSPARENT;
+    }
+
+    appearance
+}
+
+impl StyleSheet for crate::Theme {
+    type Style = Button;
+
+    fn active(&self, focused: bool, style: &Self::Style) -> Appearance {
+        appearance(self, focused, style, |component| {
+            (
+                component.base.into(),
+                component.on.into(),
+                Some(component.on.into()),
+            )
+        })
+    }
+
+    fn disabled(&self, style: &Self::Style) -> Appearance {
+        appearance(self, false, style, |component| {
+            let mut background = Color::from(component.base);
+            background.a *= 0.5;
+            (
+                background,
+                component.on_disabled.into(),
+                Some(component.on_disabled.into()),
+            )
+        })
+    }
+
+    fn drop_target(&self, style: &Self::Style) -> Appearance {
+        self.active(false, style)
+    }
+
+    fn hovered(&self, focused: bool, style: &Self::Style) -> Appearance {
+        appearance(self, focused, style, |component| {
+            (
+                component.hover.into(),
+                component.on.into(),
+                Some(component.on.into()),
+            )
+        })
+    }
+
+    fn pressed(&self, focused: bool, style: &Self::Style) -> Appearance {
+        appearance(self, focused, style, |component| {
+            (
+                component.pressed.into(),
+                component.on.into(),
+                Some(component.on.into()),
+            )
+        })
+    }
+}

src/theme/style/mod.rs

@@ -0,0 +1,22 @@
+// Copyright 2022 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+//! Stylesheet implements for [`crate::Theme`]
+
+mod button;
+pub use self::button::Button;
+
+pub mod iced;
+pub use iced::Application;
+pub use iced::Checkbox;
+pub use iced::Container;
+pub use iced::ProgressBar;
+pub use iced::Rule;
+pub use iced::Svg;
+pub use iced::Text;
+
+mod segmented_button;
+pub use self::segmented_button::SegmentedButton;
+
+mod text_input;
+pub use self::text_input::TextInput;

src/theme/style/segmented_button.rs

@@ -1,6 +1,8 @@
-// Copyright 2023 System76 <info@system76.com>
+// Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
 
+//! Contains stylesheet implementation for [`crate::widget::segmented_button`].
+
 use crate::widget::segmented_button::{Appearance, ItemAppearance, StyleSheet};
 use crate::{theme::Theme, widget::segmented_button::ItemStatusAppearance};
 use iced_core::{Background, BorderRadius};

src/theme/style/text_input.rs

@@ -0,0 +1,328 @@
+// Copyright 2023 System76 <info@system76.com>
+// SPDX-License-Identifier: MPL-2.0
+
+//! Contains stylesheet implementation for [`cosmic::widget::text_input`].
+
+use crate::ext::ColorExt;
+use crate::widget::text_input::{Appearance, StyleSheet};
+use iced_core::Color;
+
+#[derive(Default)]
+pub enum TextInput {
+    #[default]
+    Default,
+    ExpandableSearch,
+    Search,
+    Inline,
+    Custom {
+        active: Box<dyn Fn(&crate::Theme) -> Appearance>,
+        error: Box<dyn Fn(&crate::Theme) -> Appearance>,
+        hovered: Box<dyn Fn(&crate::Theme) -> Appearance>,
+        focused: Box<dyn Fn(&crate::Theme) -> Appearance>,
+        disabled: Box<dyn Fn(&crate::Theme) -> Appearance>,
+    },
+}
+
+impl StyleSheet for crate::Theme {
+    type Style = TextInput;
+
+    fn active(&self, style: &Self::Style) -> Appearance {
+        let palette = self.cosmic();
+        let container = self.current_container();
+
+        let mut background: Color = container.component.base.into();
+        background.a = 0.25;
+
+        let corner = palette.corner_radii;
+        let label_color = palette.palette.neutral_9;
+        match style {
+            TextInput::Default => Appearance {
+                background: background.into(),
+                border_radius: corner.radius_s.into(),
+                border_width: 1.0,
+                border_offset: None,
+                border_color: container.component.divider.into(),
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::ExpandableSearch => Appearance {
+                background: Color::TRANSPARENT.into(),
+                border_radius: corner.radius_xl.into(),
+                border_width: 0.0,
+                border_offset: None,
+                border_color: Color::TRANSPARENT,
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Search => Appearance {
+                background: background.into(),
+                border_radius: corner.radius_xl.into(),
+                border_width: 1.0,
+                border_offset: None,
+                border_color: container.component.divider.into(),
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Inline => Appearance {
+                background: Color::TRANSPARENT.into(),
+                border_radius: corner.radius_0.into(),
+                border_width: 0.0,
+                border_offset: None,
+                border_color: Color::TRANSPARENT,
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Custom { active, .. } => active(self),
+        }
+    }
+
+    fn error(&self, style: &Self::Style) -> Appearance {
+        let palette = self.cosmic();
+        let container = self.current_container();
+
+        let mut background: Color = container.component.base.into();
+        background.a = 0.25;
+
+        let corner = palette.corner_radii;
+        let label_color = palette.palette.neutral_9;
+
+        match style {
+            TextInput::Default => Appearance {
+                background: background.into(),
+                border_radius: corner.radius_s.into(),
+                border_width: 1.0,
+                border_offset: Some(2.0),
+                border_color: Color::from(palette.destructive_color()),
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Search | TextInput::ExpandableSearch => Appearance {
+                background: background.into(),
+                border_radius: corner.radius_xl.into(),
+                border_width: 0.0,
+                border_offset: None,
+                border_color: Color::TRANSPARENT,
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Inline => Appearance {
+                background: Color::TRANSPARENT.into(),
+                border_radius: corner.radius_0.into(),
+                border_width: 0.0,
+                border_offset: None,
+                border_color: Color::TRANSPARENT,
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Custom { error, .. } => error(self),
+        }
+    }
+
+    fn hovered(&self, style: &Self::Style) -> Appearance {
+        let palette = self.cosmic();
+        let container = self.current_container();
+
+        let mut background: Color = container.component.base.into();
+        background.a = 0.25;
+
+        let corner = palette.corner_radii;
+        let label_color = palette.palette.neutral_9;
+
+        match style {
+            TextInput::Default => Appearance {
+                background: background.into(),
+                border_radius: corner.radius_s.into(),
+                border_width: 1.0,
+                border_offset: None,
+                border_color: palette.accent.base.into(),
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Search => Appearance {
+                background: background.into(),
+                border_radius: corner.radius_xl.into(),
+                border_offset: None,
+                border_width: 1.0,
+                border_color: palette.accent.base.into(),
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::ExpandableSearch => Appearance {
+                background: background.into(),
+                border_radius: corner.radius_xl.into(),
+                border_offset: None,
+                border_width: 0.0,
+                border_color: Color::TRANSPARENT,
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Inline => Appearance {
+                background: Color::from(container.component.hover).into(),
+                border_radius: corner.radius_0.into(),
+                border_width: 0.0,
+                border_offset: None,
+                border_color: Color::TRANSPARENT,
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Custom { hovered, .. } => hovered(self),
+        }
+    }
+
+    fn focused(&self, style: &Self::Style) -> Appearance {
+        let palette = self.cosmic();
+        let container = self.current_container();
+
+        let mut background: Color = container.component.base.into();
+        background.a = 0.25;
+
+        let corner = palette.corner_radii;
+        let label_color = palette.palette.neutral_9;
+
+        match style {
+            TextInput::Default => Appearance {
+                background: background.into(),
+                border_radius: corner.radius_s.into(),
+                border_width: 1.0,
+                border_offset: Some(2.0),
+                border_color: palette.accent.base.into(),
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Search | TextInput::ExpandableSearch => Appearance {
+                background: background.into(),
+                border_radius: corner.radius_xl.into(),
+                border_width: 1.0,
+                border_offset: Some(2.0),
+                border_color: palette.accent.base.into(),
+                icon_color: container.on.into(),
+                text_color: container.on.into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Inline => Appearance {
+                background: Color::from(palette.accent.base).into(),
+                border_radius: corner.radius_0.into(),
+                border_width: 0.0,
+                border_offset: None,
+                border_color: Color::TRANSPARENT,
+                icon_color: container.on.into(),
+                // TODO use regular text color here after text rendering handles multiple colors
+                // in this case, for selected and unselected text
+                text_color: palette.on_accent_color().into(),
+                placeholder_color: {
+                    let color: Color = container.on.into();
+                    color.blend_alpha(background, 0.7)
+                },
+                selected_text_color: palette.on_accent_color().into(),
+                selected_fill: palette.accent_color().into(),
+                label_color: label_color.into(),
+            },
+            TextInput::Custom { focused, .. } => focused(self),
+        }
+    }
+
+    fn disabled(&self, style: &Self::Style) -> Appearance {
+        if let TextInput::Custom { disabled, .. } = style {
+            return disabled(self);
+        }
+
+        let mut appearance = self.active(style);
+
+        // TODO: iced will not render alpha itself on text or icon colors.
+        let background: Color = self.current_container().component.base.into();
+        appearance.text_color = appearance.text_color.blend_alpha(background, 0.5);
+        appearance.icon_color = appearance.icon_color.blend_alpha(background, 0.5);
+
+        appearance
+    }
+}