leyoda/libcosmic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip(theme): use transparent overlays for component colors where possible

Browse source
This commit is contained in:
Ashley Wulber 2023-02-21 15:23:49 -05:00 • committed by Jeremy Soller
parent 2dde95ee42
commit a449a52dee
8 changed files with 49 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Cargo.toml
View file

@ -32,6 +32,7 @@ fraction = "0.13.0"
[dependencies.cosmic-theme] [dependencies.cosmic-theme]
git = "https://github.com/pop-os/cosmic-theme.git" git = "https://github.com/pop-os/cosmic-theme.git"
branch = "overlays"
[dependencies.iced] [dependencies.iced]
path = "iced" path = "iced"

53
src/theme/mod.rs
View file

@ -13,6 +13,7 @@ pub use self::segmented_button::SegmentedButton;
use cosmic_theme::Component; use cosmic_theme::Component;
use iced_core::BorderRadius; use iced_core::BorderRadius;
use iced_lazy::component;
use iced_style::application; use iced_style::application;
use iced_style::button; use iced_style::button;
use iced_style::checkbox; use iced_style::checkbox;
@ -47,10 +48,9 @@ lazy_static::lazy_static! {
selected: CosmicColor::new(0.0, 0.0, 0.0, 0.0), selected: CosmicColor::new(0.0, 0.0, 0.0, 0.0),
selected_text: 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), 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), 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 { match style {
Application::Default => application::Appearance { Application::Default => application::Appearance {
background_color: cosmic.bg_color().into(), background_color: cosmic.bg_color().into(),
text_color: cosmic.on_bg_color().into(), text_color: cosmic.on.into(),
}, },
Application::Custom(f) => f(*self), Application::Custom(f) => f(*self),
} }
@ -153,14 +153,14 @@ impl Button {
let cosmic = theme.cosmic(); let cosmic = theme.cosmic();
match self { match self {
Button::Primary => &cosmic.accent, Button::Primary => &cosmic.accent,
Button::Secondary => &cosmic.primary.component, Button::Secondary => &cosmic.basic,
Button::Positive => &cosmic.success, Button::Positive => &cosmic.success,
Button::Destructive => &cosmic.destructive, Button::Destructive => &cosmic.destructive,
Button::Text => &cosmic.secondary.component, Button::Text => &cosmic.basic,
Button::Link => &cosmic.accent, Button::Link => &cosmic.accent,
Button::LinkActive => &cosmic.secondary.component, Button::LinkActive => &cosmic.basic,
Button::Transparent => &TRANSPARENT_COMPONENT, Button::Transparent => &TRANSPARENT_COMPONENT,
Button::Deactivated => &cosmic.secondary.component, Button::Deactivated => &cosmic.basic,
Button::Custom { .. } => &TRANSPARENT_COMPONENT, Button::Custom { .. } => &TRANSPARENT_COMPONENT,
} }
} }
@ -174,8 +174,8 @@ impl button::StyleSheet for Theme {
return active(self); return active(self);
} }
let cosmic = style.cosmic(self); let component = style.cosmic(self);
let cosmic = self.cosmic();
button::Appearance { button::Appearance {
border_radius: match style { border_radius: match style {
Button::Link => BorderRadius::from(0.0), Button::Link => BorderRadius::from(0.0),
@ -184,12 +184,12 @@ impl button::StyleSheet for Theme {
background: match style { background: match style {
Button::Link | Button::Text => None, Button::Link | Button::Text => None,
Button::LinkActive => Some(Background::Color(cosmic.divider.into())), Button::LinkActive => Some(Background::Color(cosmic.divider.into())),
_ => Some(Background::Color(cosmic.base.into())), _ => Some(Background::Color(component.base.into())),
}, },
text_color: match style { text_color: match style {
Button::Link => cosmic.base.into(), Button::Link => component.base.into(),
Button::LinkActive => cosmic.selected_text.into(), Button::LinkActive => component.selected_text.into(),
_ => cosmic.on.into(), _ => component.on.into(),
}, },
..button::Appearance::default() ..button::Appearance::default()
} }
@ -201,13 +201,14 @@ impl button::StyleSheet for Theme {
} }
let active = self.active(style); let active = self.active(style);
let cosmic = style.cosmic(self); let component = style.cosmic(self);
let cosmic = self.cosmic();
button::Appearance { button::Appearance {
background: match style { background: match style {
Button::Link => None, Button::Link => None,
Button::LinkActive => Some(Background::Color(cosmic.divider.into())), Button::LinkActive => Some(Background::Color(cosmic.divider.into())),
_ => Some(Background::Color(cosmic.hover.into())), _ => Some(Background::Color(component.hover.into())),
}, },
..active ..active
} }
@ -219,13 +220,13 @@ impl button::StyleSheet for Theme {
} }
let active = self.active(style); let active = self.active(style);
let cosmic = style.cosmic(self); let component = style.cosmic(self);
let cosmic = self.cosmic();
button::Appearance { button::Appearance {
background: match style { background: match style {
Button::Link => None, Button::Link => None,
Button::LinkActive => Some(Background::Color(cosmic.divider.into())), Button::LinkActive => Some(Background::Color(cosmic.divider.into())),
_ => Some(Background::Color(cosmic.hover.into())), _ => Some(Background::Color(component.hover.into())),
}, },
..active ..active
} }
@ -460,13 +461,13 @@ impl menu::StyleSheet for Theme {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
menu::Appearance { menu::Appearance {
text_color: cosmic.primary.component.on.into(), text_color: cosmic.on.into(),
background: Background::Color(cosmic.background.base.into()), background: Background::Color(cosmic.background.base.into()),
border_width: 0.0, border_width: 0.0,
border_radius: 16.0, border_radius: 16.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
selected_text_color: cosmic.primary.component.on.into(), selected_text_color: cosmic.on.into(),
selected_background: Background::Color(cosmic.primary.component.hover.into()), selected_background: Background::Color(cosmic.basic.hover.into()),
} }
} }
} }
@ -478,7 +479,7 @@ impl pick_list::StyleSheet for Theme {
type Style = (); type Style = ();
fn active(&self, _style: &()) -> pick_list::Appearance { fn active(&self, _style: &()) -> pick_list::Appearance {
let cosmic = &self.cosmic().primary.component; let cosmic = &self.cosmic();
pick_list::Appearance { pick_list::Appearance {
text_color: cosmic.on.into(), text_color: cosmic.on.into(),
@ -492,7 +493,7 @@ impl pick_list::StyleSheet for Theme {
} }
fn hovered(&self, style: &()) -> pick_list::Appearance { fn hovered(&self, style: &()) -> pick_list::Appearance {
let cosmic = &self.cosmic().primary.component; let cosmic = &self.cosmic().basic;
pick_list::Appearance { pick_list::Appearance {
background: Background::Color(cosmic.hover.into()), background: Background::Color(cosmic.hover.into()),
@ -677,7 +678,7 @@ impl rule::StyleSheet for Theme {
fill_mode: rule::FillMode::Full, fill_mode: rule::FillMode::Full,
}, },
Rule::LightDivider => { Rule::LightDivider => {
let cosmic = &self.cosmic().primary; let cosmic = &self.cosmic();
rule::Appearance { rule::Appearance {
color: cosmic.divider.into(), color: cosmic.divider.into(),
width: 1, width: 1,
@ -686,7 +687,7 @@ impl rule::StyleSheet for Theme {
} }
} }
Rule::HeavyDivider => { Rule::HeavyDivider => {
let cosmic = &self.cosmic().primary; let cosmic = &self.cosmic();
rule::Appearance { rule::Appearance {
color: cosmic.divider.into(), color: cosmic.divider.into(),
width: 4, width: 4,

24
src/theme/segmented_button.rs
View file

@ -45,7 +45,7 @@ impl StyleSheet for Theme {
border_bottom: Some((1.0, cosmic.accent.base.into())), border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default() ..Default::default()
}, },
text_color: cosmic.primary.on.into(), text_color: cosmic.on.into(),
}, },
hover: hover(cosmic, &active), hover: hover(cosmic, &active),
focus: focus(cosmic, &active), focus: focus(cosmic, &active),
@ -59,7 +59,7 @@ impl StyleSheet for Theme {
Appearance { Appearance {
border_radius: BorderRadius::from(0.0), border_radius: BorderRadius::from(0.0),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.base.into())), background: Some(Background::Color(cosmic.basic.base.into())),
first: ItemAppearance { first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]), border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
..Default::default() ..Default::default()
@ -72,7 +72,7 @@ impl StyleSheet for Theme {
border_radius: BorderRadius::from([0.0, 24.0, 24.0, 0.0]), border_radius: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
..Default::default() ..Default::default()
}, },
text_color: cosmic.primary.on.into(), text_color: cosmic.on.into(),
}, },
hover: hover(cosmic, &active), hover: hover(cosmic, &active),
focus: focus(cosmic, &active), focus: focus(cosmic, &active),
@ -94,7 +94,7 @@ impl StyleSheet for Theme {
border_radius: BorderRadius::from(0.0), border_radius: BorderRadius::from(0.0),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: None, background: None,
text_color: cosmic.primary.on.into(), text_color: cosmic.on.into(),
..active ..active
}, },
hover: hover(cosmic, &active), hover: hover(cosmic, &active),
@ -109,7 +109,7 @@ impl StyleSheet for Theme {
Appearance { Appearance {
border_radius: BorderRadius::from(0.0), border_radius: BorderRadius::from(0.0),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.base.into())), background: Some(Background::Color(cosmic.basic.base.into())),
first: ItemAppearance { first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]), border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]),
..Default::default() ..Default::default()
@ -122,7 +122,7 @@ impl StyleSheet for Theme {
border_radius: BorderRadius::from([0.0, 0.0, 24.0, 24.0]), border_radius: BorderRadius::from([0.0, 0.0, 24.0, 24.0]),
..Default::default() ..Default::default()
}, },
text_color: cosmic.primary.on.into(), text_color: cosmic.on.into(),
}, },
hover: hover(cosmic, &active), hover: hover(cosmic, &active),
focus: focus(cosmic, &active), focus: focus(cosmic, &active),
@ -142,7 +142,7 @@ mod horizontal {
pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance { pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance {
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.divider.into())), background: Some(Background::Color(cosmic.divider.into())),
first: ItemAppearance { first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]), border_radius: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
..Default::default() ..Default::default()
@ -163,7 +163,7 @@ mod horizontal {
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>, cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(cosmic.primary.component.base.into())), background: Some(Background::Color(cosmic.basic.base.into())),
first: ItemAppearance { first: ItemAppearance {
border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]), border_radius: BorderRadius::from([8.0, 8.0, 0.0, 0.0]),
border_bottom: Some((4.0, cosmic.accent.base.into())), border_bottom: Some((4.0, cosmic.accent.base.into())),
@ -189,7 +189,7 @@ pub fn focus(
default: &ItemStatusAppearance, default: &ItemStatusAppearance,
) -> ItemStatusAppearance { ) -> 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(), text_color: cosmic.primary.base.into(),
..*default ..*default
} }
@ -200,7 +200,7 @@ pub fn hover(
default: &ItemStatusAppearance, default: &ItemStatusAppearance,
) -> ItemStatusAppearance { ) -> 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(), text_color: cosmic.accent.base.into(),
..*default ..*default
} }
@ -213,7 +213,7 @@ mod vertical {
pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance { pub fn selection_active(cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>) -> ItemStatusAppearance {
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.divider.into())), background: Some(Background::Color(cosmic.divider.into())),
first: ItemAppearance { first: ItemAppearance {
border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]), border_radius: BorderRadius::from([24.0, 24.0, 0.0, 0.0]),
..Default::default() ..Default::default()
@ -234,7 +234,7 @@ mod vertical {
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>, cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(cosmic.secondary.component.divider.into())), background: Some(Background::Color(cosmic.divider.into())),
first: ItemAppearance { first: ItemAppearance {
border_radius: BorderRadius::from(24.0), border_radius: BorderRadius::from(24.0),
..Default::default() ..Default::default()

4
src/widget/list/column.rs
View file

@ -59,10 +59,10 @@ impl<'a, Message: 'static> From<ListColumn<'a, Message>> for Element<'a, Message
#[must_use] #[must_use]
#[allow(clippy::trivially_copy_pass_by_ref)] #[allow(clippy::trivially_copy_pass_by_ref)]
pub fn style(theme: &crate::Theme) -> iced::widget::container::Appearance { pub fn style(theme: &crate::Theme) -> iced::widget::container::Appearance {
let cosmic = &theme.cosmic().primary; let cosmic = &theme.cosmic();
iced::widget::container::Appearance { iced::widget::container::Appearance {
text_color: Some(cosmic.on.into()), 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_radius: 8.0,
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,

4
src/widget/nav_bar.rs
View file

@ -41,10 +41,10 @@ where
#[must_use] #[must_use]
pub fn nav_bar_style(theme: &Theme) -> iced_style::container::Appearance { pub fn nav_bar_style(theme: &Theme) -> iced_style::container::Appearance {
let cosmic = &theme.cosmic().primary; let cosmic = &theme.cosmic();
iced_style::container::Appearance { iced_style::container::Appearance {
text_color: Some(cosmic.on.into()), 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_radius: 8.0,
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,

4
src/widget/search/field.rs
View file

@ -80,8 +80,8 @@ fn clear_button<Message: 'static>() -> Button<'static, Message, Renderer> {
fn active_style(theme: &crate::Theme) -> container::Appearance { fn active_style(theme: &crate::Theme) -> container::Appearance {
let cosmic = &theme.cosmic(); let cosmic = &theme.cosmic();
iced::widget::container::Appearance { iced::widget::container::Appearance {
text_color: Some(cosmic.primary.on.into()), text_color: Some(cosmic.on.into()),
background: Some(Background::Color(cosmic.secondary.component.divider.into())), background: Some(Background::Color(cosmic.divider.into())),
border_radius: 24.0, border_radius: 24.0,
border_width: 2.0, border_width: 2.0,
border_color: cosmic.accent.focus.into(), border_color: cosmic.accent.focus.into(),

4
src/widget/spin_button/mod.rs
View file

@ -97,11 +97,11 @@ impl<'a, Message: 'static> From<SpinButton<'a, Message>> for Element<'a, Message
#[allow(clippy::trivially_copy_pass_by_ref)] #[allow(clippy::trivially_copy_pass_by_ref)]
fn container_style(theme: &crate::Theme) -> iced_style::container::Appearance { 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; let accent = &theme.cosmic().accent;
iced_style::container::Appearance { iced_style::container::Appearance {
text_color: None, text_color: None,
background: Some(Background::Color(secondary.component.base.into())), background: Some(Background::Color(basic.base.into())),
border_radius: 24.0, border_radius: 24.0,
border_width: 0.0, border_width: 0.0,
border_color: accent.base.into(), border_color: accent.base.into(),

2
src/widget/warning.rs
View file

@ -66,7 +66,7 @@ impl<'a, Message: 'static + Clone> From<Warning<'a, Message>> for Element<'a, Me
pub fn warning_container(theme: &Theme) -> widget::container::Appearance { pub fn warning_container(theme: &Theme) -> widget::container::Appearance {
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())), background: Some(Background::Color(theme.cosmic().warning_color().into())),
border_radius: 0.0, border_radius: 0.0,
border_width: 0.0, border_width: 0.0,