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

feat(theme): use cosmic-theme

Browse source
This commit is contained in:
Ashley Wulber 2023-02-27 18:45:54 -05:00 • committed by Jeremy Soller
parent becdbb6eb3
commit cbb21932d8
5 changed files with 42 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/theme/cosmic.rs
View file

@ -1,2 +0,0 @@
// Copyright 2022 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0

74
src/theme/mod.rs
View file

@ -232,7 +232,6 @@ impl button::StyleSheet for Theme {
let active = self.active(style); let active = self.active(style);
let component = 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,
@ -266,12 +265,12 @@ impl checkbox::StyleSheet for Theme {
fn active(&self, style: &Self::Style, is_checked: bool) -> checkbox::Appearance { fn active(&self, style: &Self::Style, is_checked: bool) -> checkbox::Appearance {
let palette = self.cosmic(); let palette = self.cosmic();
let mut neutral_7 = palette.palette.neutral_10.clone(); let neutral_7 = palette.palette.neutral_10;
match style { match style {
Checkbox::Primary => checkbox::Appearance { Checkbox::Primary => checkbox::Appearance {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
palette.accent.base.clone().into() palette.accent.base.into()
} else { } else {
palette.background.base.into() palette.background.base.into()
}), }),
@ -288,7 +287,7 @@ impl checkbox::StyleSheet for Theme {
}, },
Checkbox::Secondary => checkbox::Appearance { Checkbox::Secondary => checkbox::Appearance {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
palette.background.component.base.clone().into() palette.background.component.base.into()
} else { } else {
palette.background.base.into() palette.background.base.into()
}), }),
@ -300,7 +299,7 @@ impl checkbox::StyleSheet for Theme {
}, },
Checkbox::Success => checkbox::Appearance { Checkbox::Success => checkbox::Appearance {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
palette.success.base.clone().into() palette.success.base.into()
} else { } else {
palette.background.base.into() palette.background.base.into()
}), }),
@ -317,7 +316,7 @@ impl checkbox::StyleSheet for Theme {
}, },
Checkbox::Danger => checkbox::Appearance { Checkbox::Danger => checkbox::Appearance {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
palette.destructive.base.clone().into() palette.destructive.base.into()
} else { } else {
palette.background.base.into() palette.background.base.into()
}), }),
@ -337,22 +336,22 @@ impl checkbox::StyleSheet for Theme {
fn hovered(&self, style: &Self::Style, is_checked: bool) -> checkbox::Appearance { fn hovered(&self, style: &Self::Style, is_checked: bool) -> checkbox::Appearance {
let palette = self.cosmic(); let palette = self.cosmic();
let mut neutral_10 = palette.palette.neutral_10.clone(); let mut neutral_10 = palette.palette.neutral_10;
let mut neutral_7 = palette.palette.neutral_10.clone(); let neutral_7 = palette.palette.neutral_10;
neutral_10.alpha = 0.1; neutral_10.alpha = 0.1;
match style { match style {
Checkbox::Primary => checkbox::Appearance { Checkbox::Primary => checkbox::Appearance {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
palette.destructive.base.clone().into() palette.accent.base.into()
} else { } else {
neutral_10.into() neutral_10.into()
}), }),
checkmark_color: palette.destructive.on.into(), checkmark_color: palette.accent.on.into(),
border_radius: 4.0, border_radius: 4.0,
border_width: if is_checked { 0.0 } else { 1.0 }, border_width: if is_checked { 0.0 } else { 1.0 },
border_color: if is_checked { border_color: if is_checked {
palette.destructive.base palette.accent.base
} else { } else {
neutral_7 neutral_7
} }
@ -361,15 +360,15 @@ impl checkbox::StyleSheet for Theme {
}, },
Checkbox::Secondary => checkbox::Appearance { Checkbox::Secondary => checkbox::Appearance {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
palette.destructive.base.clone().into() palette.current_container().base.into()
} else { } else {
neutral_10.into() neutral_10.into()
}), }),
checkmark_color: palette.destructive.on.into(), checkmark_color: palette.current_container().on.into(),
border_radius: 4.0, border_radius: 4.0,
border_width: if is_checked { 0.0 } else { 1.0 }, border_width: if is_checked { 0.0 } else { 1.0 },
border_color: if is_checked { border_color: if is_checked {
palette.destructive.base palette.current_container().base
} else { } else {
neutral_7 neutral_7
} }
@ -378,15 +377,15 @@ impl checkbox::StyleSheet for Theme {
}, },
Checkbox::Success => checkbox::Appearance { Checkbox::Success => checkbox::Appearance {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
palette.destructive.base.clone().into() palette.success.base.into()
} else { } else {
neutral_10.into() neutral_10.into()
}), }),
checkmark_color: palette.destructive.on.into(), checkmark_color: palette.success.on.into(),
border_radius: 4.0, border_radius: 4.0,
border_width: if is_checked { 0.0 } else { 1.0 }, border_width: if is_checked { 0.0 } else { 1.0 },
border_color: if is_checked { border_color: if is_checked {
palette.destructive.base palette.success.base
} else { } else {
neutral_7 neutral_7
} }
@ -395,7 +394,7 @@ impl checkbox::StyleSheet for Theme {
}, },
Checkbox::Danger => checkbox::Appearance { Checkbox::Danger => checkbox::Appearance {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
palette.destructive.base.clone().into() palette.destructive.base.into()
} else { } else {
neutral_10.into() neutral_10.into()
}), }),
@ -414,26 +413,6 @@ impl checkbox::StyleSheet for Theme {
} }
} }
fn checkbox_appearance<T: Into<Color> + Clone>(
checkmark_color: T,
base: T,
accent: T,
is_checked: bool,
) -> checkbox::Appearance {
checkbox::Appearance {
background: Background::Color(if is_checked {
accent.clone().into()
} else {
base.into()
}),
checkmark_color: checkmark_color.into(),
border_radius: 4.0,
border_width: if is_checked { 0.0 } else { 1.0 },
border_color: accent.into(),
text_color: None,
}
}
#[derive(Clone, Copy)] #[derive(Clone, Copy)]
pub enum Expander { pub enum Expander {
Default, Default,
@ -560,7 +539,7 @@ impl slider::StyleSheet for Theme {
let mut style = self.active(style); let mut style = self.active(style);
style.handle.shape = slider::HandleShape::Circle { radius: 16.0 }; style.handle.shape = slider::HandleShape::Circle { radius: 16.0 };
style.handle.border_width = 6.0; style.handle.border_width = 6.0;
let mut border_color = self.cosmic.palette.neutral_10.clone(); let mut border_color = self.cosmic.palette.neutral_10;
border_color.alpha = 0.1; border_color.alpha = 0.1;
style.handle.border_color = border_color.into(); style.handle.border_color = border_color.into();
style style
@ -568,7 +547,7 @@ impl slider::StyleSheet for Theme {
fn dragging(&self, style: &Self::Style) -> slider::Appearance { fn dragging(&self, style: &Self::Style) -> slider::Appearance {
let mut style = self.hovered(style); let mut style = self.hovered(style);
let mut border_color = self.cosmic.palette.neutral_10.clone(); let mut border_color = self.cosmic.palette.neutral_10;
border_color.alpha = 0.2; border_color.alpha = 0.2;
style.handle.border_color = border_color.into(); style.handle.border_color = border_color.into();
@ -647,19 +626,18 @@ impl radio::StyleSheet for Theme {
dot_color: theme.accent.on.into(), dot_color: theme.accent.on.into(),
border_width: 1.0, border_width: 1.0,
border_color: if is_selected { border_color: if is_selected {
Color::from(theme.accent.base).into() Color::from(theme.accent.base)
} else { } else {
// TODO: this seems to be defined weirdly in FIGMA // TODO: this seems to be defined weirdly in FIGMA
Color::from(theme.palette.neutral_7).into() Color::from(theme.palette.neutral_7)
}, },
text_color: None, text_color: None,
} }
} }
fn hovered(&self, style: &Self::Style, is_selected: bool) -> radio::Appearance { fn hovered(&self, _style: &Self::Style, is_selected: bool) -> radio::Appearance {
let active = self.active(style, is_selected);
let theme = self.cosmic(); let theme = self.cosmic();
let mut neutral_10 = theme.palette.neutral_10.clone(); let mut neutral_10 = theme.palette.neutral_10;
neutral_10.alpha = 0.1; neutral_10.alpha = 0.1;
radio::Appearance { radio::Appearance {
@ -672,10 +650,10 @@ impl radio::StyleSheet for Theme {
dot_color: theme.accent.on.into(), dot_color: theme.accent.on.into(),
border_width: 1.0, border_width: 1.0,
border_color: if is_selected { border_color: if is_selected {
Color::from(theme.accent.base).into() Color::from(theme.accent.base)
} else { } else {
// TODO: this seems to be defined weirdly in FIGMA // TODO: this seems to be defined weirdly in FIGMA
Color::from(theme.palette.neutral_7).into() Color::from(theme.palette.neutral_7)
}, },
text_color: None, text_color: None,
} }
@ -708,7 +686,7 @@ impl toggler::StyleSheet for Theme {
fn hovered(&self, style: &Self::Style, is_active: bool) -> toggler::Appearance { fn hovered(&self, style: &Self::Style, is_active: bool) -> toggler::Appearance {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
//TODO: grab colors from palette //TODO: grab colors from palette
let mut neutral_10 = cosmic.palette.neutral_10.clone(); let mut neutral_10 = cosmic.palette.neutral_10;
neutral_10.alpha = 0.1; neutral_10.alpha = 0.1;
toggler::Appearance { toggler::Appearance {
background: if is_active { background: if is_active {

16
src/theme/segmented_button.rs
View file

@ -57,7 +57,7 @@ impl StyleSheet for Theme {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
let active = horizontal::selection_active(cosmic); let active = horizontal::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.25; neutral_5.alpha = 0.2;
Appearance { Appearance {
border_radius: BorderRadius::from(0.0), border_radius: BorderRadius::from(0.0),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
@ -109,7 +109,7 @@ impl StyleSheet for Theme {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
let active = vertical::selection_active(cosmic); let active = vertical::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.25; neutral_5.alpha = 0.2;
Appearance { Appearance {
border_radius: BorderRadius::from(0.0), border_radius: BorderRadius::from(0.0),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
@ -146,7 +146,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 {
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.25; neutral_5.alpha = 0.2;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { first: ItemAppearance {
@ -169,7 +169,7 @@ mod horizontal {
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>, cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.25; neutral_5.alpha = 0.2;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { first: ItemAppearance {
@ -196,8 +196,10 @@ pub fn focus(
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>, cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
default: &ItemStatusAppearance, default: &ItemStatusAppearance,
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
// TODO: This is a hack to make the hover color lighter than the selected color
// I'm not sure why the alpha is being applied differently here than in figma
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.25; neutral_5.alpha = 0.2;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
text_color: cosmic.accent.base.into(), text_color: cosmic.accent.base.into(),
@ -225,7 +227,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 {
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.25; neutral_5.alpha = 0.2;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { first: ItemAppearance {
@ -248,7 +250,7 @@ mod vertical {
cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>, cosmic: &cosmic_theme::Theme<Alpha<Rgb, f32>>,
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5; let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.25; neutral_5.alpha = 0.2;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(neutral_5.into())),
first: ItemAppearance { first: ItemAppearance {

8
src/widget/cosmic_container.rs
View file

@ -17,7 +17,11 @@ pub fn cosmic_container<'a, Message: 'static, T>(
where where
T: Into<Element<'a, Message, crate::Renderer>>, T: Into<Element<'a, Message, crate::Renderer>>,
{ {
CosmicContainer::new(content, layer) CosmicContainer::new(content, layer).style(match layer {
cosmic_theme::Layer::Background => crate::theme::Container::Background,
cosmic_theme::Layer::Primary => crate::theme::Container::Primary,
cosmic_theme::Layer::Secondary => crate::theme::Container::Secondary,
})
} }
/// An element decorating some content. /// An element decorating some content.
@ -142,7 +146,7 @@ where
} }
fn layout(&self, renderer: &Renderer, limits: &layout::Limits) -> layout::Node { fn layout(&self, renderer: &Renderer, limits: &layout::Limits) -> layout::Node {
self.container.layout(renderer, &limits) self.container.layout(renderer, limits)
} }
fn operate(&self, tree: &mut Tree, layout: Layout<'_>, operation: &mut dyn Operation<Message>) { fn operate(&self, tree: &mut Tree, layout: Layout<'_>, operation: &mut dyn Operation<Message>) {

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

@ -60,7 +60,7 @@ impl<'a, Message: 'static> From<ListColumn<'a, Message>> for Element<'a, Message
#[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(); let cosmic = &theme.cosmic();
let container = cosmic.current_container(); let container = &cosmic.current_container().component;
iced::widget::container::Appearance { iced::widget::container::Appearance {
text_color: Some(container.on.into()), text_color: Some(container.on.into()),
background: Some(Background::Color(container.base.into())), background: Some(Background::Color(container.base.into())),