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(
Srgba::new(0.0, 0.0, 0.0, 0.0),
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),
is_high_contrast,
@ -1305,7 +1305,7 @@ impl ThemeBuilder {
text_button: Component::component(
Srgba::new(0.0, 0.0, 0.0, 0.0),
accent,
accent,
accent_text.unwrap_or(accent),
button_hovered_overlay,
button_pressed_overlay,
is_high_contrast,

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

@ -99,7 +99,7 @@ pub fn appearance(
Button::Image => {
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());
corner_radii = &cosmic.corner_radii.radius_s;
@ -119,7 +119,7 @@ pub fn appearance(
Button::Link => {
appearance.background = None;
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;
}
@ -156,7 +156,7 @@ pub fn appearance(
appearance.background =
Some(Background::Color(cosmic.primary.component.hover.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 {
appearance.background = Some(Background::Color(background));
appearance.icon_color = icon;
@ -203,7 +203,7 @@ impl Catalog for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(self.cosmic().accent_color().into())
Some(self.cosmic().accent_text_color().into())
} else {
Some(component.on.into())
};
@ -249,7 +249,7 @@ impl Catalog for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(self.cosmic().accent_color().into())
Some(self.cosmic().accent_text_color().into())
} else {
Some(component.on.into())
};
@ -270,7 +270,7 @@ impl Catalog for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(self.cosmic().accent_color().into())
Some(self.cosmic().accent_text_color().into())
} else {
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_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()),
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::Destructive => &cosmic.destructive_button,
Self::Text => &cosmic.text_button,
Self::Link => &cosmic.accent_button,
Self::LinkActive => &cosmic.accent_button,
Self::Link => &cosmic.link_button,
Self::LinkActive => &cosmic.link_button,
Self::Transparent => &TRANSPARENT_COMPONENT,
Self::Deactivated => &theme.current_container().component,
Self::Card => &theme.current_container().component,
@ -190,6 +190,7 @@ impl iced_checkbox::Catalog for Theme {
Checkbox::default()
}
#[allow(clippy::too_many_lines)]
fn style(
&self,
class: &Self::Class<'_>,
@ -208,7 +209,7 @@ impl iced_checkbox::Catalog for Theme {
background: Background::Color(if is_checked {
cosmic.accent.base.into()
} else {
cosmic.button.base.into()
cosmic.background.small_widget.into()
}),
icon_color: cosmic.accent.on.into(),
border: Border {
@ -217,7 +218,7 @@ impl iced_checkbox::Catalog for Theme {
color: if is_checked {
cosmic.accent.base
} else {
cosmic.button.border
cosmic.palette.neutral_8
}
.into(),
},
@ -251,7 +252,7 @@ impl iced_checkbox::Catalog for Theme {
color: if is_checked {
cosmic.success.base
} else {
cosmic.button.border
cosmic.palette.neutral_8
}
.into(),
},
@ -504,7 +505,7 @@ impl iced_container::Catalog for Theme {
Container::HeaderBar { focused } => {
let (icon_color, text_color) = if *focused {
(
Color::from(cosmic.accent.base),
Color::from(cosmic.accent_text_color()),
Color::from(cosmic.background.on),
)
} else {
@ -667,9 +668,9 @@ impl slider::Catalog for Theme {
(
cosmic.accent_text_color(),
if is_dark {
cosmic.palette.neutral_6
cosmic.palette.neutral_5
} else {
cosmic.palette.neutral_4
cosmic.palette.neutral_3
},
)
} else {
@ -828,15 +829,14 @@ impl radio::Catalog for Theme {
Color::from(theme.accent.base).into()
} else {
// 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(),
border_width: 1.0,
border_color: if is_selected {
Color::from(theme.accent.base)
} else {
// TODO: this seems to be defined weirdly in FIGMA
Color::from(theme.palette.neutral_7)
Color::from(theme.palette.neutral_8)
},
text_color: None,
},
@ -844,8 +844,7 @@ impl radio::Catalog for Theme {
background: if is_selected {
Color::from(theme.accent.base).into()
} else {
// TODO: this seems to be defined weirdly in FIGMA
Color::from(theme.palette.neutral_10.with_alpha(0.1)).into()
Color::from(theme.background.small_widget.with_alpha(0.2)).into()
},
dot_color: theme.accent.on.into(),
border_width: 1.0,
@ -878,7 +877,11 @@ impl toggler::Catalog for Theme {
background: if matches!(status, toggler::Status::Active { is_toggled: true }) {
cosmic.accent.base.into()
} 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(),
border_radius: cosmic.radius_xl().into(),
@ -900,7 +903,14 @@ impl toggler::Catalog for Theme {
background: if is_active {
over(neutral_10, cosmic.accent_color())
} 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(),
..active
@ -1092,7 +1102,8 @@ impl scrollable::Catalog for Theme {
match status {
scrollable::Status::Active => {
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 {
container: iced_container::transparent(self),
vertical_rail: scrollable::Rail {
@ -1102,7 +1113,11 @@ impl scrollable::Catalog for Theme {
},
background: None,
scroller: scrollable::Scroller {
color: neutral_5.into(),
color: if cosmic.is_dark {
neutral_6.into()
} else {
neutral_5.into()
},
border: Border {
radius: cosmic.corner_radii.radius_s.into(),
..Default::default()
@ -1116,7 +1131,11 @@ impl scrollable::Catalog for Theme {
},
background: None,
scroller: scrollable::Scroller {
color: neutral_5.into(),
color: if cosmic.is_dark {
neutral_6.into()
} else {
neutral_5.into()
},
border: Border {
radius: cosmic.corner_radii.radius_s.into(),
..Default::default()
@ -1137,9 +1156,9 @@ impl scrollable::Catalog for Theme {
// TODO handle vertical / horizontal
scrollable::Status::Hovered { .. } | scrollable::Status::Dragged { .. } => {
let cosmic = self.cosmic();
let neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7);
// TODO hover
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 neutral_3 = cosmic.palette.neutral_3;
// if is_mouse_over_scrollbar {
// let hover_overlay = cosmic.palette.neutral_0.with_alpha(0.2);
@ -1154,7 +1173,11 @@ impl scrollable::Catalog for Theme {
},
background: None,
scroller: scrollable::Scroller {
color: neutral_5.into(),
color: if cosmic.is_dark {
neutral_6.into()
} else {
neutral_5.into()
},
border: Border {
radius: cosmic.corner_radii.radius_s.into(),
..Default::default()
@ -1168,7 +1191,11 @@ impl scrollable::Catalog for Theme {
},
background: None,
scroller: scrollable::Scroller {
color: neutral_5.into(),
color: if cosmic.is_dark {
neutral_6.into()
} else {
neutral_5.into()
},
border: Border {
radius: cosmic.corner_radii.radius_s.into(),
..Default::default()
@ -1179,9 +1206,13 @@ impl scrollable::Catalog for Theme {
};
if matches!(class, Scrollable::Permanent) {
let neutral_3 = cosmic.palette.neutral_3.with_alpha(0.7);
a.horizontal_rail.background = Some(Background::Color(neutral_3.into()));
a.vertical_rail.background = Some(Background::Color(neutral_3.into()));
let small_widget_container =
cosmic.background.small_widget.clone().with_alpha(0.7);
a.horizontal_rail.background =
Some(Background::Color(small_widget_container.into()));
a.vertical_rail.background =
Some(Background::Color(small_widget_container.into()));
}
a
@ -1250,7 +1281,7 @@ impl iced_widget::text::Catalog for Theme {
fn style(&self, class: &Self::Class<'_>) -> iced_widget::text::Style {
match class {
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::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 {
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 value = neutral_9.into();
@ -1314,7 +1345,7 @@ impl text_input::Catalog for Theme {
match status {
text_input::Status::Active => appearance,
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 {
TextInput::Default => text_input::Style {
@ -1343,7 +1374,7 @@ impl text_input::Catalog for Theme {
}
}
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 {
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]]),
..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())),
..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;
ItemStatusAppearance {
background: Some(Background::Color(color.into())),
text_color: cosmic.accent.base.into(),
text_color: cosmic.accent_text_color().into(),
..*default
}
}
@ -242,9 +242,7 @@ pub fn hover(
default: &ItemStatusAppearance,
) -> ItemStatusAppearance {
ItemStatusAppearance {
background: Some(Background::Color(
cosmic.palette.neutral_8.with_alpha(0.2).into(),
)),
background: Some(Background::Color(component.hover.with_alpha(0.2).into())),
text_color: cosmic.accent.base.into(),
..*default
}
@ -279,7 +277,7 @@ mod vertical {
border_radius: Radius::from([rad_0[0], rad_0[1], rad_m[2], rad_m[3]]),
..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(),
..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),
border_radius: cosmic.radius_xs().into(),
border_width: 1.0,
border_color: cosmic.on_bg_color().into(),
border_color: cosmic.palette.neutral_8.into(),
outline_width,
outline_color,
icon_color: None,
@ -957,7 +957,7 @@ pub fn color_button<'a, Message: Clone + 'static>(
background: color.map(Background::from).or(standard.background),
border_radius: cosmic.radius_xs().into(),
border_width: 1.0,
border_color: cosmic.on_bg_color().into(),
border_color: cosmic.palette.neutral_8.into(),
outline_width: 0.0,
outline_color: Color::TRANSPARENT,
icon_color: None,
@ -980,7 +980,7 @@ pub fn color_button<'a, Message: Clone + 'static>(
background: color.map(Background::from).or(standard.background),
border_radius: cosmic.radius_xs().into(),
border_width: 1.0,
border_color: cosmic.on_bg_color().into(),
border_color: cosmic.palette.neutral_8.into(),
outline_width,
outline_color,
icon_color: None,
@ -1003,7 +1003,7 @@ pub fn color_button<'a, Message: Clone + 'static>(
background: color.map(Background::from).or(standard.background),
border_radius: cosmic.radius_xs().into(),
border_width: 1.0,
border_color: cosmic.on_bg_color().into(),
border_color: cosmic.palette.neutral_8.into(),
outline_width,
outline_color,
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());
}
// dbg!("button with action...", action.message());
let menu_button = menu_button(items).on_press(action.message());
trees.push(MenuTree::<Message>::from(Element::from(menu_button)));
@ -296,7 +295,7 @@ pub fn menu_items<
.icon()
.class(theme::Svg::Custom(Rc::new(|theme| {
iced_widget::svg::Style {
color: Some(theme.cosmic().accent_color().into()),
color: Some(theme.cosmic().accent_text_color().into()),
}
})))
.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 accent = &cosmic_theme.accent;
let corners = &cosmic_theme.corner_radii;
let current_container = theme.current_container();
let border = if theme.theme_type.is_high_contrast() {
let current_container = theme.current_container();
Border {
radius: corners.radius_s.into(),
width: 1.,
@ -237,8 +237,8 @@ fn container_style(theme: &crate::Theme) -> iced_widget::container::Style {
};
iced_widget::container::Style {
icon_color: Some(accent.base.into()),
text_color: Some(cosmic_theme.palette.neutral_10.into()),
icon_color: Some(current_container.on.into()),
text_color: Some(current_container.on.into()),
background: None,
border,
shadow: Shadow::default(),