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

chore: theme color updates

Browse source
This commit is contained in:
Ashley Wulber 2025-07-21 10:49:47 -04:00 • committed by Michael Murphy
parent b8eaad2a7e
commit 8c4cb2e54f
8 changed files with 84 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

4
cosmic-theme/src/model/theme.rs
View file

@ -1277,7 +1277,7 @@ impl ThemeBuilder {
let mut component = Component::component( let mut component = Component::component(
Srgba::new(0.0, 0.0, 0.0, 0.0), Srgba::new(0.0, 0.0, 0.0, 0.0),
accent, accent,
accent, accent_text.unwrap_or(accent),
Srgba::new(0.0, 0.0, 0.0, 0.0), Srgba::new(0.0, 0.0, 0.0, 0.0),
Srgba::new(0.0, 0.0, 0.0, 0.0), Srgba::new(0.0, 0.0, 0.0, 0.0),
is_high_contrast, is_high_contrast,
@ -1305,7 +1305,7 @@ impl ThemeBuilder {
text_button: Component::component( text_button: Component::component(
Srgba::new(0.0, 0.0, 0.0, 0.0), Srgba::new(0.0, 0.0, 0.0, 0.0),
accent, accent,
accent, accent_text.unwrap_or(accent),
button_hovered_overlay, button_hovered_overlay,
button_pressed_overlay, button_pressed_overlay,
is_high_contrast, is_high_contrast,

12
src/theme/style/button.rs
View file

@ -99,7 +99,7 @@ pub fn appearance(
Button::Image => { Button::Image => {
appearance.background = None; appearance.background = None;
appearance.text_color = Some(cosmic.accent.base.into()); appearance.text_color = Some(cosmic.accent_text_color().into());
appearance.icon_color = Some(cosmic.accent.base.into()); appearance.icon_color = Some(cosmic.accent.base.into());
corner_radii = &cosmic.corner_radii.radius_s; corner_radii = &cosmic.corner_radii.radius_s;
@ -119,7 +119,7 @@ pub fn appearance(
Button::Link => { Button::Link => {
appearance.background = None; appearance.background = None;
appearance.icon_color = Some(cosmic.accent.base.into()); appearance.icon_color = Some(cosmic.accent.base.into());
appearance.text_color = Some(cosmic.accent.base.into()); appearance.text_color = Some(cosmic.accent_text_color().into());
corner_radii = &cosmic.corner_radii.radius_0; corner_radii = &cosmic.corner_radii.radius_0;
} }
@ -156,7 +156,7 @@ pub fn appearance(
appearance.background = appearance.background =
Some(Background::Color(cosmic.primary.component.hover.into())); Some(Background::Color(cosmic.primary.component.hover.into()));
appearance.icon_color = Some(cosmic.accent.base.into()); appearance.icon_color = Some(cosmic.accent.base.into());
appearance.text_color = Some(cosmic.accent.base.into()); appearance.text_color = Some(cosmic.accent_text_color().into());
} else { } else {
appearance.background = Some(Background::Color(background)); appearance.background = Some(Background::Color(background));
appearance.icon_color = icon; appearance.icon_color = icon;
@ -203,7 +203,7 @@ impl Catalog for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected ) && selected
{ {
Some(self.cosmic().accent_color().into()) Some(self.cosmic().accent_text_color().into())
} else { } else {
Some(component.on.into()) Some(component.on.into())
}; };
@ -249,7 +249,7 @@ impl Catalog for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected ) && selected
{ {
Some(self.cosmic().accent_color().into()) Some(self.cosmic().accent_text_color().into())
} else { } else {
Some(component.on.into()) Some(component.on.into())
}; };
@ -270,7 +270,7 @@ impl Catalog for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected ) && selected
{ {
Some(self.cosmic().accent_color().into()) Some(self.cosmic().accent_text_color().into())
} else { } else {
Some(component.on.into()) Some(component.on.into())
}; };

2
src/theme/style/dropdown.rs
View file

@ -21,7 +21,7 @@ impl dropdown::menu::StyleSheet for Theme {
hovered_text_color: cosmic.on_bg_color().into(), hovered_text_color: cosmic.on_bg_color().into(),
hovered_background: Background::Color(cosmic.primary.component.hover.into()), hovered_background: Background::Color(cosmic.primary.component.hover.into()),
selected_text_color: cosmic.accent.base.into(), selected_text_color: cosmic.accent_text_color().into(),
selected_background: Background::Color(cosmic.primary.component.hover.into()), selected_background: Background::Color(cosmic.primary.component.hover.into()),
description_color: cosmic.primary.component.on_disabled.into(), description_color: cosmic.primary.component.on_disabled.into(),

91
src/theme/style/iced.rs
View file

@ -156,8 +156,8 @@ impl Button {
Self::Positive => &cosmic.success_button, Self::Positive => &cosmic.success_button,
Self::Destructive => &cosmic.destructive_button, Self::Destructive => &cosmic.destructive_button,
Self::Text => &cosmic.text_button, Self::Text => &cosmic.text_button,
Self::Link => &cosmic.accent_button, Self::Link => &cosmic.link_button,
Self::LinkActive => &cosmic.accent_button, Self::LinkActive => &cosmic.link_button,
Self::Transparent => &TRANSPARENT_COMPONENT, Self::Transparent => &TRANSPARENT_COMPONENT,
Self::Deactivated => &theme.current_container().component, Self::Deactivated => &theme.current_container().component,
Self::Card => &theme.current_container().component, Self::Card => &theme.current_container().component,
@ -190,6 +190,7 @@ impl iced_checkbox::Catalog for Theme {
Checkbox::default() Checkbox::default()
} }
#[allow(clippy::too_many_lines)]
fn style( fn style(
&self, &self,
class: &Self::Class<'_>, class: &Self::Class<'_>,
@ -208,7 +209,7 @@ impl iced_checkbox::Catalog for Theme {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
cosmic.accent.base.into() cosmic.accent.base.into()
} else { } else {
cosmic.button.base.into() cosmic.background.small_widget.into()
}), }),
icon_color: cosmic.accent.on.into(), icon_color: cosmic.accent.on.into(),
border: Border { border: Border {
@ -217,7 +218,7 @@ impl iced_checkbox::Catalog for Theme {
color: if is_checked { color: if is_checked {
cosmic.accent.base cosmic.accent.base
} else { } else {
cosmic.button.border cosmic.palette.neutral_8
} }
.into(), .into(),
}, },
@ -251,7 +252,7 @@ impl iced_checkbox::Catalog for Theme {
color: if is_checked { color: if is_checked {
cosmic.success.base cosmic.success.base
} else { } else {
cosmic.button.border cosmic.palette.neutral_8
} }
.into(), .into(),
}, },
@ -504,7 +505,7 @@ impl iced_container::Catalog for Theme {
Container::HeaderBar { focused } => { Container::HeaderBar { focused } => {
let (icon_color, text_color) = if *focused { let (icon_color, text_color) = if *focused {
( (
Color::from(cosmic.accent.base), Color::from(cosmic.accent_text_color()),
Color::from(cosmic.background.on), Color::from(cosmic.background.on),
) )
} else { } else {
@ -667,9 +668,9 @@ impl slider::Catalog for Theme {
( (
cosmic.accent_text_color(), cosmic.accent_text_color(),
if is_dark { if is_dark {
cosmic.palette.neutral_6 cosmic.palette.neutral_5
} else { } else {
cosmic.palette.neutral_4 cosmic.palette.neutral_3
}, },
) )
} else { } else {
@ -828,15 +829,14 @@ impl radio::Catalog for Theme {
Color::from(theme.accent.base).into() Color::from(theme.accent.base).into()
} else { } else {
// TODO: this seems to be defined weirdly in FIGMA // TODO: this seems to be defined weirdly in FIGMA
Color::from(theme.background.base).into() Color::from(theme.background.small_widget).into()
}, },
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) Color::from(theme.accent.base)
} else { } else {
// TODO: this seems to be defined weirdly in FIGMA Color::from(theme.palette.neutral_8)
Color::from(theme.palette.neutral_7)
}, },
text_color: None, text_color: None,
}, },
@ -844,8 +844,7 @@ impl radio::Catalog for Theme {
background: if is_selected { background: if is_selected {
Color::from(theme.accent.base).into() Color::from(theme.accent.base).into()
} else { } else {
// TODO: this seems to be defined weirdly in FIGMA Color::from(theme.background.small_widget.with_alpha(0.2)).into()
Color::from(theme.palette.neutral_10.with_alpha(0.1)).into()
}, },
dot_color: theme.accent.on.into(), dot_color: theme.accent.on.into(),
border_width: 1.0, border_width: 1.0,
@ -878,7 +877,11 @@ impl toggler::Catalog for Theme {
background: if matches!(status, toggler::Status::Active { is_toggled: true }) { background: if matches!(status, toggler::Status::Active { is_toggled: true }) {
cosmic.accent.base.into() cosmic.accent.base.into()
} else { } else {
cosmic.palette.neutral_5.into() if cosmic.is_dark {
cosmic.palette.neutral_6.into()
} else {
cosmic.palette.neutral_5.into()
}
}, },
foreground: cosmic.palette.neutral_2.into(), foreground: cosmic.palette.neutral_2.into(),
border_radius: cosmic.radius_xl().into(), border_radius: cosmic.radius_xl().into(),
@ -900,7 +903,14 @@ impl toggler::Catalog for Theme {
background: if is_active { background: if is_active {
over(neutral_10, cosmic.accent_color()) over(neutral_10, cosmic.accent_color())
} else { } else {
over(neutral_10, cosmic.palette.neutral_5) over(
neutral_10,
if cosmic.is_dark {
cosmic.palette.neutral_6
} else {
cosmic.palette.neutral_5
},
)
} }
.into(), .into(),
..active ..active
@ -1092,7 +1102,8 @@ impl scrollable::Catalog for Theme {
match status { match status {
scrollable::Status::Active => { scrollable::Status::Active => {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
let neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7); let mut neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7);
let mut neutral_6 = cosmic.palette.neutral_6.with_alpha(0.7);
let mut a = scrollable::Style { let mut a = scrollable::Style {
container: iced_container::transparent(self), container: iced_container::transparent(self),
vertical_rail: scrollable::Rail { vertical_rail: scrollable::Rail {
@ -1102,7 +1113,11 @@ impl scrollable::Catalog for Theme {
}, },
background: None, background: None,
scroller: scrollable::Scroller { scroller: scrollable::Scroller {
color: neutral_5.into(), color: if cosmic.is_dark {
neutral_6.into()
} else {
neutral_5.into()
},
border: Border { border: Border {
radius: cosmic.corner_radii.radius_s.into(), radius: cosmic.corner_radii.radius_s.into(),
..Default::default() ..Default::default()
@ -1116,7 +1131,11 @@ impl scrollable::Catalog for Theme {
}, },
background: None, background: None,
scroller: scrollable::Scroller { scroller: scrollable::Scroller {
color: neutral_5.into(), color: if cosmic.is_dark {
neutral_6.into()
} else {
neutral_5.into()
},
border: Border { border: Border {
radius: cosmic.corner_radii.radius_s.into(), radius: cosmic.corner_radii.radius_s.into(),
..Default::default() ..Default::default()
@ -1137,9 +1156,9 @@ impl scrollable::Catalog for Theme {
// TODO handle vertical / horizontal // TODO handle vertical / horizontal
scrollable::Status::Hovered { .. } | scrollable::Status::Dragged { .. } => { scrollable::Status::Hovered { .. } | scrollable::Status::Dragged { .. } => {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
let neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7); let mut neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7);
let mut neutral_6 = cosmic.palette.neutral_6.with_alpha(0.7);
// TODO hover let mut neutral_3 = cosmic.palette.neutral_3;
// if is_mouse_over_scrollbar { // if is_mouse_over_scrollbar {
// let hover_overlay = cosmic.palette.neutral_0.with_alpha(0.2); // let hover_overlay = cosmic.palette.neutral_0.with_alpha(0.2);
@ -1154,7 +1173,11 @@ impl scrollable::Catalog for Theme {
}, },
background: None, background: None,
scroller: scrollable::Scroller { scroller: scrollable::Scroller {
color: neutral_5.into(), color: if cosmic.is_dark {
neutral_6.into()
} else {
neutral_5.into()
},
border: Border { border: Border {
radius: cosmic.corner_radii.radius_s.into(), radius: cosmic.corner_radii.radius_s.into(),
..Default::default() ..Default::default()
@ -1168,7 +1191,11 @@ impl scrollable::Catalog for Theme {
}, },
background: None, background: None,
scroller: scrollable::Scroller { scroller: scrollable::Scroller {
color: neutral_5.into(), color: if cosmic.is_dark {
neutral_6.into()
} else {
neutral_5.into()
},
border: Border { border: Border {
radius: cosmic.corner_radii.radius_s.into(), radius: cosmic.corner_radii.radius_s.into(),
..Default::default() ..Default::default()
@ -1179,9 +1206,13 @@ impl scrollable::Catalog for Theme {
}; };
if matches!(class, Scrollable::Permanent) { if matches!(class, Scrollable::Permanent) {
let neutral_3 = cosmic.palette.neutral_3.with_alpha(0.7); let small_widget_container =
a.horizontal_rail.background = Some(Background::Color(neutral_3.into())); cosmic.background.small_widget.clone().with_alpha(0.7);
a.vertical_rail.background = Some(Background::Color(neutral_3.into()));
a.horizontal_rail.background =
Some(Background::Color(small_widget_container.into()));
a.vertical_rail.background =
Some(Background::Color(small_widget_container.into()));
} }
a a
@ -1250,7 +1281,7 @@ impl iced_widget::text::Catalog for Theme {
fn style(&self, class: &Self::Class<'_>) -> iced_widget::text::Style { fn style(&self, class: &Self::Class<'_>) -> iced_widget::text::Style {
match class { match class {
Text::Accent => iced_widget::text::Style { Text::Accent => iced_widget::text::Style {
color: Some(self.cosmic().accent.base.into()), color: Some(self.cosmic().accent_text_color().into()),
}, },
Text::Default => iced_widget::text::Style { color: None }, Text::Default => iced_widget::text::Style { color: None },
Text::Color(c) => iced_widget::text::Style { color: Some(*c) }, Text::Color(c) => iced_widget::text::Style { color: Some(*c) },
@ -1278,7 +1309,7 @@ impl text_input::Catalog for Theme {
fn style(&self, class: &Self::Class<'_>, status: text_input::Status) -> text_input::Style { fn style(&self, class: &Self::Class<'_>, status: text_input::Status) -> text_input::Style {
let palette = self.cosmic(); let palette = self.cosmic();
let bg = palette.palette.neutral_7.with_alpha(0.25); let mut bg = palette.background.small_widget.with_alpha(0.25);
let neutral_9 = palette.palette.neutral_9; let neutral_9 = palette.palette.neutral_9;
let value = neutral_9.into(); let value = neutral_9.into();
@ -1314,7 +1345,7 @@ impl text_input::Catalog for Theme {
match status { match status {
text_input::Status::Active => appearance, text_input::Status::Active => appearance,
text_input::Status::Hovered => { text_input::Status::Hovered => {
let bg = palette.palette.neutral_7.with_alpha(0.25); let mut bg = palette.background.small_widget.with_alpha(0.25);
match class { match class {
TextInput::Default => text_input::Style { TextInput::Default => text_input::Style {
@ -1343,7 +1374,7 @@ impl text_input::Catalog for Theme {
} }
} }
text_input::Status::Focused => { text_input::Status::Focused => {
let bg = palette.palette.neutral_7.with_alpha(0.25); let mut bg = palette.background.small_widget.with_alpha(0.25);
match class { match class {
TextInput::Default => text_input::Style { TextInput::Default => text_input::Style {

14
src/theme/style/segmented_button.rs
View file

@ -192,7 +192,7 @@ mod horizontal {
border_radius: Radius::from([rad_0[0], rad_m[1], rad_m[2], rad_0[3]]), border_radius: Radius::from([rad_0[0], rad_m[1], rad_m[2], rad_0[3]]),
..Default::default() ..Default::default()
}, },
text_color: cosmic.accent.base.into(), text_color: cosmic.accent_text_color().into(),
} }
} }
@ -218,7 +218,7 @@ mod horizontal {
border_bottom: Some((4.0, cosmic.accent.base.into())), border_bottom: Some((4.0, cosmic.accent.base.into())),
..Default::default() ..Default::default()
}, },
text_color: cosmic.accent.base.into(), text_color: cosmic.accent_text_color().into(),
} }
} }
} }
@ -231,7 +231,7 @@ pub fn focus(
let color = container.small_widget; let color = container.small_widget;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(color.into())), background: Some(Background::Color(color.into())),
text_color: cosmic.accent.base.into(), text_color: cosmic.accent_text_color().into(),
..*default ..*default
} }
} }
@ -242,9 +242,7 @@ pub fn hover(
default: &ItemStatusAppearance, default: &ItemStatusAppearance,
) -> ItemStatusAppearance { ) -> ItemStatusAppearance {
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color( background: Some(Background::Color(component.hover.with_alpha(0.2).into())),
cosmic.palette.neutral_8.with_alpha(0.2).into(),
)),
text_color: cosmic.accent.base.into(), text_color: cosmic.accent.base.into(),
..*default ..*default
} }
@ -279,7 +277,7 @@ mod vertical {
border_radius: Radius::from([rad_0[0], rad_0[1], rad_m[2], rad_m[3]]), border_radius: Radius::from([rad_0[0], rad_0[1], rad_m[2], rad_m[3]]),
..Default::default() ..Default::default()
}, },
text_color: cosmic.accent.base.into(), text_color: cosmic.accent_text_color().into(),
} }
} }
@ -300,7 +298,7 @@ mod vertical {
border_radius: cosmic.corner_radii.radius_m.into(), border_radius: cosmic.corner_radii.radius_m.into(),
..Default::default() ..Default::default()
}, },
text_color: cosmic.accent.base.into(), text_color: cosmic.accent_text_color().into(),
} }
} }
} }

8
src/widget/color_picker/mod.rs
View file

@ -940,7 +940,7 @@ pub fn color_button<'a, Message: Clone + 'static>(
background: color.map(Background::from).or(standard.background), background: color.map(Background::from).or(standard.background),
border_radius: cosmic.radius_xs().into(), border_radius: cosmic.radius_xs().into(),
border_width: 1.0, border_width: 1.0,
border_color: cosmic.on_bg_color().into(), border_color: cosmic.palette.neutral_8.into(),
outline_width, outline_width,
outline_color, outline_color,
icon_color: None, icon_color: None,
@ -957,7 +957,7 @@ pub fn color_button<'a, Message: Clone + 'static>(
background: color.map(Background::from).or(standard.background), background: color.map(Background::from).or(standard.background),
border_radius: cosmic.radius_xs().into(), border_radius: cosmic.radius_xs().into(),
border_width: 1.0, border_width: 1.0,
border_color: cosmic.on_bg_color().into(), border_color: cosmic.palette.neutral_8.into(),
outline_width: 0.0, outline_width: 0.0,
outline_color: Color::TRANSPARENT, outline_color: Color::TRANSPARENT,
icon_color: None, icon_color: None,
@ -980,7 +980,7 @@ pub fn color_button<'a, Message: Clone + 'static>(
background: color.map(Background::from).or(standard.background), background: color.map(Background::from).or(standard.background),
border_radius: cosmic.radius_xs().into(), border_radius: cosmic.radius_xs().into(),
border_width: 1.0, border_width: 1.0,
border_color: cosmic.on_bg_color().into(), border_color: cosmic.palette.neutral_8.into(),
outline_width, outline_width,
outline_color, outline_color,
icon_color: None, icon_color: None,
@ -1003,7 +1003,7 @@ pub fn color_button<'a, Message: Clone + 'static>(
background: color.map(Background::from).or(standard.background), background: color.map(Background::from).or(standard.background),
border_radius: cosmic.radius_xs().into(), border_radius: cosmic.radius_xs().into(),
border_width: 1.0, border_width: 1.0,
border_color: cosmic.on_bg_color().into(), border_color: cosmic.palette.neutral_8.into(),
outline_width, outline_width,
outline_color, outline_color,
icon_color: None, icon_color: None,

3
src/widget/menu/menu_tree.rs
View file

@ -262,7 +262,6 @@ pub fn menu_items<
items.insert(1, widget::Space::with_width(spacing.space_xxs).into()); items.insert(1, widget::Space::with_width(spacing.space_xxs).into());
} }
// dbg!("button with action...", action.message());
let menu_button = menu_button(items).on_press(action.message()); let menu_button = menu_button(items).on_press(action.message());
trees.push(MenuTree::<Message>::from(Element::from(menu_button))); trees.push(MenuTree::<Message>::from(Element::from(menu_button)));
@ -296,7 +295,7 @@ pub fn menu_items<
.icon() .icon()
.class(theme::Svg::Custom(Rc::new(|theme| { .class(theme::Svg::Custom(Rc::new(|theme| {
iced_widget::svg::Style { iced_widget::svg::Style {
color: Some(theme.cosmic().accent_color().into()), color: Some(theme.cosmic().accent_text_color().into()),
} }
}))) })))
.width(Length::Fixed(16.0)) .width(Length::Fixed(16.0))

6
src/widget/spin_button.rs
View file

@ -221,8 +221,8 @@ fn container_style(theme: &crate::Theme) -> iced_widget::container::Style {
let cosmic_theme = &theme.cosmic(); let cosmic_theme = &theme.cosmic();
let accent = &cosmic_theme.accent; let accent = &cosmic_theme.accent;
let corners = &cosmic_theme.corner_radii; let corners = &cosmic_theme.corner_radii;
let current_container = theme.current_container();
let border = if theme.theme_type.is_high_contrast() { let border = if theme.theme_type.is_high_contrast() {
let current_container = theme.current_container();
Border { Border {
radius: corners.radius_s.into(), radius: corners.radius_s.into(),
width: 1., width: 1.,
@ -237,8 +237,8 @@ fn container_style(theme: &crate::Theme) -> iced_widget::container::Style {
}; };
iced_widget::container::Style { iced_widget::container::Style {
icon_color: Some(accent.base.into()), icon_color: Some(current_container.on.into()),
text_color: Some(cosmic_theme.palette.neutral_10.into()), text_color: Some(current_container.on.into()),
background: None, background: None,
border, border,
shadow: Shadow::default(), shadow: Shadow::default(),