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]
git = "https://github.com/pop-os/cosmic-theme.git"
branch = "overlays"
[dependencies.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 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,

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())),
..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<Alpha<Rgb, f32>>) -> 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<Alpha<Rgb, f32>>,
) -> 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<Alpha<Rgb, f32>>) -> 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<Alpha<Rgb, f32>>,
) -> 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()

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]
#[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,

4
src/widget/nav_bar.rs
View file

@ -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,

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 {
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(),

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)]
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(),

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 {
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,