From a449a52dee6d64bb9c8924f2d8b944c3195960b8 Mon Sep 17 00:00:00 2001 From: Ashley Wulber Date: Tue, 21 Feb 2023 15:23:49 -0500 Subject: [PATCH] wip(theme): use transparent overlays for component colors where possible --- Cargo.toml | 1 + src/theme/mod.rs | 53 ++++++++++++++++++----------------- src/theme/segmented_button.rs | 24 ++++++++-------- src/widget/list/column.rs | 4 +-- src/widget/nav_bar.rs | 4 +-- src/widget/search/field.rs | 4 +-- src/widget/spin_button/mod.rs | 4 +-- src/widget/warning.rs | 2 +- 8 files changed, 49 insertions(+), 47 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 92d344b5..bf8d4527 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -32,6 +32,7 @@ fraction = "0.13.0" [dependencies.cosmic-theme] git = "https://github.com/pop-os/cosmic-theme.git" +branch = "overlays" [dependencies.iced] path = "iced" diff --git a/src/theme/mod.rs b/src/theme/mod.rs index 1e7aa650..629283f9 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -13,6 +13,7 @@ pub use self::segmented_button::SegmentedButton; use cosmic_theme::Component; use iced_core::BorderRadius; +use iced_lazy::component; use iced_style::application; use iced_style::button; use iced_style::checkbox; @@ -47,10 +48,9 @@ lazy_static::lazy_static! { selected: CosmicColor::new(0.0, 0.0, 0.0, 0.0), selected_text: CosmicColor::new(0.0, 0.0, 0.0, 0.0), focus: CosmicColor::new(0.0, 0.0, 0.0, 0.0), - divider: CosmicColor::new(0.0, 0.0, 0.0, 0.0), - on: CosmicColor::new(0.0, 0.0, 0.0, 0.0), disabled: CosmicColor::new(0.0, 0.0, 0.0, 0.0), - on_disabled: CosmicColor::new(0.0, 0.0, 0.0, 0.0), + on: CosmicColor::new(0.0, 0.0, 0.0, 0.0), + on_disabled: CosmicColor::new(0.0, 0.0, 0.0, 0.0) }; } @@ -113,7 +113,7 @@ impl application::StyleSheet for Theme { match style { Application::Default => application::Appearance { background_color: cosmic.bg_color().into(), - text_color: cosmic.on_bg_color().into(), + text_color: cosmic.on.into(), }, Application::Custom(f) => f(*self), } @@ -153,14 +153,14 @@ impl Button { let cosmic = theme.cosmic(); match self { Button::Primary => &cosmic.accent, - Button::Secondary => &cosmic.primary.component, + Button::Secondary => &cosmic.basic, Button::Positive => &cosmic.success, Button::Destructive => &cosmic.destructive, - Button::Text => &cosmic.secondary.component, + Button::Text => &cosmic.basic, Button::Link => &cosmic.accent, - Button::LinkActive => &cosmic.secondary.component, + Button::LinkActive => &cosmic.basic, Button::Transparent => &TRANSPARENT_COMPONENT, - Button::Deactivated => &cosmic.secondary.component, + Button::Deactivated => &cosmic.basic, Button::Custom { .. } => &TRANSPARENT_COMPONENT, } } @@ -174,8 +174,8 @@ impl button::StyleSheet for Theme { return active(self); } - let cosmic = style.cosmic(self); - + let component = style.cosmic(self); + let cosmic = self.cosmic(); button::Appearance { border_radius: match style { Button::Link => BorderRadius::from(0.0), @@ -184,12 +184,12 @@ impl button::StyleSheet for Theme { background: match style { Button::Link | Button::Text => None, Button::LinkActive => Some(Background::Color(cosmic.divider.into())), - _ => Some(Background::Color(cosmic.base.into())), + _ => Some(Background::Color(component.base.into())), }, text_color: match style { - Button::Link => cosmic.base.into(), - Button::LinkActive => cosmic.selected_text.into(), - _ => cosmic.on.into(), + Button::Link => component.base.into(), + Button::LinkActive => component.selected_text.into(), + _ => component.on.into(), }, ..button::Appearance::default() } @@ -201,13 +201,14 @@ impl button::StyleSheet for Theme { } let active = self.active(style); - let cosmic = style.cosmic(self); + let component = style.cosmic(self); + let cosmic = self.cosmic(); button::Appearance { background: match style { Button::Link => None, Button::LinkActive => Some(Background::Color(cosmic.divider.into())), - _ => Some(Background::Color(cosmic.hover.into())), + _ => Some(Background::Color(component.hover.into())), }, ..active } @@ -219,13 +220,13 @@ impl button::StyleSheet for Theme { } let active = self.active(style); - let cosmic = style.cosmic(self); - + let component = style.cosmic(self); + let cosmic = self.cosmic(); button::Appearance { background: match style { Button::Link => None, Button::LinkActive => Some(Background::Color(cosmic.divider.into())), - _ => Some(Background::Color(cosmic.hover.into())), + _ => Some(Background::Color(component.hover.into())), }, ..active } @@ -460,13 +461,13 @@ impl menu::StyleSheet for Theme { let cosmic = self.cosmic(); menu::Appearance { - text_color: cosmic.primary.component.on.into(), + text_color: cosmic.on.into(), background: Background::Color(cosmic.background.base.into()), border_width: 0.0, border_radius: 16.0, border_color: Color::TRANSPARENT, - selected_text_color: cosmic.primary.component.on.into(), - selected_background: Background::Color(cosmic.primary.component.hover.into()), + selected_text_color: cosmic.on.into(), + selected_background: Background::Color(cosmic.basic.hover.into()), } } } @@ -478,7 +479,7 @@ impl pick_list::StyleSheet for Theme { type Style = (); fn active(&self, _style: &()) -> pick_list::Appearance { - let cosmic = &self.cosmic().primary.component; + let cosmic = &self.cosmic(); pick_list::Appearance { text_color: cosmic.on.into(), @@ -492,7 +493,7 @@ impl pick_list::StyleSheet for Theme { } fn hovered(&self, style: &()) -> pick_list::Appearance { - let cosmic = &self.cosmic().primary.component; + let cosmic = &self.cosmic().basic; pick_list::Appearance { background: Background::Color(cosmic.hover.into()), @@ -677,7 +678,7 @@ impl rule::StyleSheet for Theme { fill_mode: rule::FillMode::Full, }, Rule::LightDivider => { - let cosmic = &self.cosmic().primary; + let cosmic = &self.cosmic(); rule::Appearance { color: cosmic.divider.into(), width: 1, @@ -686,7 +687,7 @@ impl rule::StyleSheet for Theme { } } Rule::HeavyDivider => { - let cosmic = &self.cosmic().primary; + let cosmic = &self.cosmic(); rule::Appearance { color: cosmic.divider.into(), width: 4, diff --git a/src/theme/segmented_button.rs b/src/theme/segmented_button.rs index 56fb6b97..fbaf3a62 100644 --- a/src/theme/segmented_button.rs +++ b/src/theme/segmented_button.rs @@ -45,7 +45,7 @@ impl StyleSheet for Theme { border_bottom: Some((1.0, cosmic.accent.base.into())), ..Default::default() }, - text_color: cosmic.primary.on.into(), + text_color: cosmic.on.into(), }, hover: hover(cosmic, &active), focus: focus(cosmic, &active), @@ -59,7 +59,7 @@ impl StyleSheet for Theme { Appearance { border_radius: BorderRadius::from(0.0), inactive: ItemStatusAppearance { - background: Some(Background::Color(cosmic.secondary.component.base.into())), + background: Some(Background::Color(cosmic.basic.base.into())), first: ItemAppearance { border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]), ..Default::default() @@ -72,7 +72,7 @@ impl StyleSheet for Theme { border_radius: BorderRadius::from([0.0, 24.0, 24.0, 0.0]), ..Default::default() }, - text_color: cosmic.primary.on.into(), + text_color: cosmic.on.into(), }, hover: hover(cosmic, &active), focus: focus(cosmic, &active), @@ -94,7 +94,7 @@ impl StyleSheet for Theme { border_radius: BorderRadius::from(0.0), inactive: ItemStatusAppearance { background: None, - text_color: cosmic.primary.on.into(), + text_color: cosmic.on.into(), ..active }, hover: hover(cosmic, &active), @@ -109,7 +109,7 @@ impl StyleSheet for Theme { Appearance { border_radius: BorderRadius::from(0.0), inactive: ItemStatusAppearance { - background: Some(Background::Color(cosmic.secondary.component.base.into())), + background: Some(Background::Color(cosmic.basic.base.into())), first: ItemAppearance { border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]), ..Default::default() @@ -122,7 +122,7 @@ impl StyleSheet for Theme { border_radius: BorderRadius::from([0.0, 0.0, 24.0, 24.0]), ..Default::default() }, - text_color: cosmic.primary.on.into(), + text_color: cosmic.on.into(), }, hover: hover(cosmic, &active), focus: focus(cosmic, &active), @@ -142,7 +142,7 @@ mod horizontal { pub fn selection_active(cosmic: &cosmic_theme::Theme>) -> ItemStatusAppearance { ItemStatusAppearance { - background: Some(Background::Color(cosmic.secondary.component.divider.into())), + background: Some(Background::Color(cosmic.divider.into())), first: ItemAppearance { border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]), ..Default::default() @@ -163,7 +163,7 @@ mod horizontal { cosmic: &cosmic_theme::Theme>, ) -> ItemStatusAppearance { ItemStatusAppearance { - background: Some(Background::Color(cosmic.primary.component.base.into())), + background: Some(Background::Color(cosmic.basic.base.into())), first: ItemAppearance { border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]), border_bottom: Some((4.0, cosmic.accent.base.into())), @@ -189,7 +189,7 @@ pub fn focus( default: &ItemStatusAppearance, ) -> ItemStatusAppearance { ItemStatusAppearance { - background: Some(Background::Color(cosmic.primary.component.focus.into())), + background: Some(Background::Color(cosmic.basic.focus.into())), text_color: cosmic.primary.base.into(), ..*default } @@ -200,7 +200,7 @@ pub fn hover( default: &ItemStatusAppearance, ) -> ItemStatusAppearance { ItemStatusAppearance { - background: Some(Background::Color(cosmic.primary.component.hover.into())), + background: Some(Background::Color(cosmic.basic.hover.into())), text_color: cosmic.accent.base.into(), ..*default } @@ -213,7 +213,7 @@ mod vertical { pub fn selection_active(cosmic: &cosmic_theme::Theme>) -> ItemStatusAppearance { ItemStatusAppearance { - background: Some(Background::Color(cosmic.secondary.component.divider.into())), + background: Some(Background::Color(cosmic.divider.into())), first: ItemAppearance { border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]), ..Default::default() @@ -234,7 +234,7 @@ mod vertical { cosmic: &cosmic_theme::Theme>, ) -> ItemStatusAppearance { ItemStatusAppearance { - background: Some(Background::Color(cosmic.secondary.component.divider.into())), + background: Some(Background::Color(cosmic.divider.into())), first: ItemAppearance { border_radius: BorderRadius::from(24.0), ..Default::default() diff --git a/src/widget/list/column.rs b/src/widget/list/column.rs index db6edcba..9783e016 100644 --- a/src/widget/list/column.rs +++ b/src/widget/list/column.rs @@ -59,10 +59,10 @@ impl<'a, Message: 'static> From> for Element<'a, Message #[must_use] #[allow(clippy::trivially_copy_pass_by_ref)] pub fn style(theme: &crate::Theme) -> iced::widget::container::Appearance { - let cosmic = &theme.cosmic().primary; + let cosmic = &theme.cosmic(); iced::widget::container::Appearance { text_color: Some(cosmic.on.into()), - background: Some(Background::Color(cosmic.base.into())), + background: Some(Background::Color(cosmic.basic.base.into())), border_radius: 8.0, border_width: 0.0, border_color: Color::TRANSPARENT, diff --git a/src/widget/nav_bar.rs b/src/widget/nav_bar.rs index 7986cf9c..be09c267 100644 --- a/src/widget/nav_bar.rs +++ b/src/widget/nav_bar.rs @@ -41,10 +41,10 @@ where #[must_use] pub fn nav_bar_style(theme: &Theme) -> iced_style::container::Appearance { - let cosmic = &theme.cosmic().primary; + let cosmic = &theme.cosmic(); iced_style::container::Appearance { text_color: Some(cosmic.on.into()), - background: Some(Background::Color(cosmic.base.into())), + background: Some(Background::Color(cosmic.primary.base.into())), border_radius: 8.0, border_width: 0.0, border_color: Color::TRANSPARENT, diff --git a/src/widget/search/field.rs b/src/widget/search/field.rs index 463c9ecf..68534984 100644 --- a/src/widget/search/field.rs +++ b/src/widget/search/field.rs @@ -80,8 +80,8 @@ fn clear_button() -> Button<'static, Message, Renderer> { fn active_style(theme: &crate::Theme) -> container::Appearance { let cosmic = &theme.cosmic(); iced::widget::container::Appearance { - text_color: Some(cosmic.primary.on.into()), - background: Some(Background::Color(cosmic.secondary.component.divider.into())), + text_color: Some(cosmic.on.into()), + background: Some(Background::Color(cosmic.divider.into())), border_radius: 24.0, border_width: 2.0, border_color: cosmic.accent.focus.into(), diff --git a/src/widget/spin_button/mod.rs b/src/widget/spin_button/mod.rs index 1115dc56..840c497e 100644 --- a/src/widget/spin_button/mod.rs +++ b/src/widget/spin_button/mod.rs @@ -97,11 +97,11 @@ impl<'a, Message: 'static> From> for Element<'a, Message #[allow(clippy::trivially_copy_pass_by_ref)] fn container_style(theme: &crate::Theme) -> iced_style::container::Appearance { - let secondary = &theme.cosmic().secondary; + let basic = &theme.cosmic().basic; let accent = &theme.cosmic().accent; iced_style::container::Appearance { text_color: None, - background: Some(Background::Color(secondary.component.base.into())), + background: Some(Background::Color(basic.base.into())), border_radius: 24.0, border_width: 0.0, border_color: accent.base.into(), diff --git a/src/widget/warning.rs b/src/widget/warning.rs index 4bc5d497..0cf22410 100644 --- a/src/widget/warning.rs +++ b/src/widget/warning.rs @@ -66,7 +66,7 @@ impl<'a, Message: 'static + Clone> From> for Element<'a, Me pub fn warning_container(theme: &Theme) -> widget::container::Appearance { widget::container::Appearance { - text_color: Some(theme.cosmic().on_warning_color().into()), + text_color: Some(theme.cosmic().warning.on.into()), background: Some(Background::Color(theme.cosmic().warning_color().into())), border_radius: 0.0, border_width: 0.0,