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

fix: theme updates

Browse source
This commit is contained in:
Ashley Wulber 2025-07-29 15:45:52 -04:00 • committed by Ashley Wulber
parent 5e136f9499
commit 05874e8ea2
4 changed files with 132 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -957,7 +957,7 @@ impl ThemeBuilder {
/// build the theme /// build the theme
pub fn build(self) -> Theme { pub fn build(self) -> Theme {
let Self { let Self {
mut palette, palette,
spacing, spacing,
corner_radii, corner_radii,
neutral_tint, neutral_tint,
@ -1063,6 +1063,7 @@ impl ThemeBuilder {
get_surface_color(bg_index, 5, &step_array, is_dark, &control_steps_array[1]) get_surface_color(bg_index, 5, &step_array, is_dark, &control_steps_array[1])
}; };
let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
let base_index: usize = color_index(container_bg, step_array.len()); let base_index: usize = color_index(container_bg, step_array.len());
let component_base = let component_base =
get_surface_color(base_index, 6, &step_array, is_dark, &control_steps_array[3]); get_surface_color(base_index, 6, &step_array, is_dark, &control_steps_array[3]);
@ -1185,6 +1186,7 @@ impl ThemeBuilder {
get_surface_color(bg_index, 10, &step_array, is_dark, &control_steps_array[2]) get_surface_color(bg_index, 10, &step_array, is_dark, &control_steps_array[2])
}; };
let step_array = steps(container_bg, NonZeroUsize::new(100).unwrap());
let base_index = color_index(container_bg, step_array.len()); let base_index = color_index(container_bg, step_array.len());
let secondary_component = let secondary_component =
get_surface_color(base_index, 3, &step_array, is_dark, &control_steps_array[4]); get_surface_color(base_index, 3, &step_array, is_dark, &control_steps_array[4]);

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

@ -209,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.background.small_widget.into() self.current_container().small_widget.into()
}), }),
icon_color: cosmic.accent.on.into(), icon_color: cosmic.accent.on.into(),
border: Border { border: Border {
@ -229,13 +229,13 @@ impl iced_checkbox::Catalog for Theme {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
cosmic.background.component.base.into() cosmic.background.component.base.into()
} else { } else {
cosmic.background.base.into() self.current_container().small_widget.into()
}), }),
icon_color: cosmic.background.on.into(), icon_color: cosmic.background.on.into(),
border: Border { border: Border {
radius: corners.radius_xs.into(), radius: corners.radius_xs.into(),
width: if is_checked { 0.0 } else { 1.0 }, width: if is_checked { 0.0 } else { 1.0 },
color: cosmic.button.border.into(), color: cosmic.palette.neutral_8.into(),
}, },
text_color: None, text_color: None,
}, },
@ -243,7 +243,7 @@ impl iced_checkbox::Catalog for Theme {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
cosmic.success.base.into() cosmic.success.base.into()
} else { } else {
cosmic.button.base.into() self.current_container().small_widget.into()
}), }),
icon_color: cosmic.success.on.into(), icon_color: cosmic.success.on.into(),
border: Border { border: Border {
@ -262,7 +262,7 @@ impl iced_checkbox::Catalog for Theme {
background: Background::Color(if is_checked { background: Background::Color(if is_checked {
cosmic.destructive.base.into() cosmic.destructive.base.into()
} else { } else {
cosmic.button.base.into() self.current_container().small_widget.into()
}), }),
icon_color: cosmic.destructive.on.into(), icon_color: cosmic.destructive.on.into(),
border: Border { border: Border {
@ -271,7 +271,7 @@ impl iced_checkbox::Catalog for Theme {
color: if is_checked { color: if is_checked {
cosmic.destructive.base cosmic.destructive.base
} else { } else {
cosmic.button.border cosmic.palette.neutral_8
} }
.into(), .into(),
}, },
@ -294,84 +294,89 @@ impl iced_checkbox::Catalog for Theme {
} }
active active
} }
iced_checkbox::Status::Hovered { is_checked } => match class { iced_checkbox::Status::Hovered { is_checked } => {
Checkbox::Primary => iced_checkbox::Style { let cur_container = self.current_container().small_widget;
background: Background::Color(if is_checked { // TODO: this should probably be done with a custom widget instead, or the theme needs more small widget variables.
cosmic.accent.base.into() let hovered_bg = over(cosmic.palette.neutral_0.with_alpha(0.1), cur_container);
} else { match class {
cosmic.button.base.into() Checkbox::Primary => iced_checkbox::Style {
}), background: Background::Color(if is_checked {
icon_color: cosmic.accent.on.into(), cosmic.accent.hover_state_color().into()
border: Border {
radius: corners.radius_xs.into(),
width: if is_checked { 0.0 } else { 1.0 },
color: if is_checked {
cosmic.accent.base
} else { } else {
cosmic.button.border hovered_bg.into()
} }),
.into(), icon_color: cosmic.accent.on.into(),
border: Border {
radius: corners.radius_xs.into(),
width: if is_checked { 0.0 } else { 1.0 },
color: if is_checked {
cosmic.accent.base
} else {
cosmic.palette.neutral_8
}
.into(),
},
text_color: None,
}, },
text_color: None, Checkbox::Secondary => iced_checkbox::Style {
}, background: Background::Color(if is_checked {
Checkbox::Secondary => iced_checkbox::Style { self.current_container().component.hover.into()
background: Background::Color(if is_checked {
self.current_container().base.into()
} else {
cosmic.button.base.into()
}),
icon_color: self.current_container().on.into(),
border: Border {
radius: corners.radius_xs.into(),
width: if is_checked { 0.0 } else { 1.0 },
color: if is_checked {
self.current_container().base
} else { } else {
cosmic.button.border hovered_bg.into()
} }),
.into(), icon_color: self.current_container().on.into(),
border: Border {
radius: corners.radius_xs.into(),
width: if is_checked { 0.0 } else { 1.0 },
color: if is_checked {
self.current_container().base
} else {
cosmic.palette.neutral_8
}
.into(),
},
text_color: None,
}, },
text_color: None, Checkbox::Success => iced_checkbox::Style {
}, background: Background::Color(if is_checked {
Checkbox::Success => iced_checkbox::Style { cosmic.success.hover.into()
background: Background::Color(if is_checked {
cosmic.success.base.into()
} else {
cosmic.button.base.into()
}),
icon_color: cosmic.success.on.into(),
border: Border {
radius: corners.radius_xs.into(),
width: if is_checked { 0.0 } else { 1.0 },
color: if is_checked {
cosmic.success.base
} else { } else {
cosmic.button.border hovered_bg.into()
} }),
.into(), icon_color: cosmic.success.on.into(),
border: Border {
radius: corners.radius_xs.into(),
width: if is_checked { 0.0 } else { 1.0 },
color: if is_checked {
cosmic.success.base
} else {
cosmic.palette.neutral_8
}
.into(),
},
text_color: None,
}, },
text_color: None, Checkbox::Danger => iced_checkbox::Style {
}, background: Background::Color(if is_checked {
Checkbox::Danger => iced_checkbox::Style { cosmic.destructive.hover.into()
background: Background::Color(if is_checked {
cosmic.destructive.base.into()
} else {
cosmic.button.base.into()
}),
icon_color: cosmic.destructive.on.into(),
border: Border {
radius: corners.radius_xs.into(),
width: if is_checked { 0.0 } else { 1.0 },
color: if is_checked {
cosmic.destructive.base
} else { } else {
cosmic.button.border hovered_bg.into()
} }),
.into(), icon_color: cosmic.destructive.on.into(),
border: Border {
radius: corners.radius_xs.into(),
width: if is_checked { 0.0 } else { 1.0 },
color: if is_checked {
cosmic.destructive.base
} else {
cosmic.palette.neutral_8
}
.into(),
},
text_color: None,
}, },
text_color: None, }
}, }
},
} }
} }
} }
@ -821,6 +826,7 @@ impl radio::Catalog for Theme {
fn default<'a>() -> Self::Class<'a> {} fn default<'a>() -> Self::Class<'a> {}
fn style(&self, class: &Self::Class<'_>, status: radio::Status) -> radio::Style { fn style(&self, class: &Self::Class<'_>, status: radio::Status) -> radio::Style {
let cur_container = self.current_container();
let theme = self.cosmic(); let theme = self.cosmic();
match status { match status {
@ -829,7 +835,7 @@ 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.small_widget).into() Color::from(cur_container.small_widget).into()
}, },
dot_color: theme.accent.on.into(), dot_color: theme.accent.on.into(),
border_width: 1.0, border_width: 1.0,
@ -840,22 +846,26 @@ impl radio::Catalog for Theme {
}, },
text_color: None, text_color: None,
}, },
radio::Status::Hovered { is_selected } => radio::Style { radio::Status::Hovered { is_selected } => {
background: if is_selected { let bg = if is_selected {
Color::from(theme.accent.base).into() theme.accent.base
} else { } else {
Color::from(theme.background.small_widget.with_alpha(0.2)).into() self.current_container().small_widget
}, };
dot_color: theme.accent.on.into(), // TODO: this should probably be done with a custom widget instead, or the theme needs more small widget variables.
border_width: 1.0, let hovered_bg = Color::from(over(theme.palette.neutral_0.with_alpha(0.1), bg));
border_color: if is_selected { radio::Style {
Color::from(theme.accent.base) background: hovered_bg.into(),
} else { dot_color: theme.accent.on.into(),
// TODO: this seems to be defined weirdly in FIGMA border_width: 1.0,
Color::from(theme.palette.neutral_7) border_color: if is_selected {
}, Color::from(theme.accent.base)
text_color: None, } else {
}, Color::from(theme.palette.neutral_8)
},
text_color: None,
}
}
} }
} }
} }
@ -1102,8 +1112,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 mut neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7); let neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7);
let mut neutral_6 = cosmic.palette.neutral_6.with_alpha(0.7); let 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 {
@ -1144,11 +1154,17 @@ impl scrollable::Catalog for Theme {
}, },
gap: None, gap: None,
}; };
let small_widget_container = self
.current_container()
.small_widget
.clone()
.with_alpha(0.7);
if matches!(class, Scrollable::Permanent) { if matches!(class, Scrollable::Permanent) {
let neutral_3 = cosmic.palette.neutral_3.with_alpha(0.7); a.horizontal_rail.background =
a.horizontal_rail.background = Some(Background::Color(neutral_3.into())); Some(Background::Color(small_widget_container.into()));
a.vertical_rail.background = Some(Background::Color(neutral_3.into())); a.vertical_rail.background =
Some(Background::Color(small_widget_container.into()));
} }
a a
@ -1156,9 +1172,8 @@ 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 mut neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7); let neutral_5 = cosmic.palette.neutral_5.with_alpha(0.7);
let mut neutral_6 = cosmic.palette.neutral_6.with_alpha(0.7); let neutral_6 = cosmic.palette.neutral_6.with_alpha(0.7);
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);
@ -1206,8 +1221,11 @@ impl scrollable::Catalog for Theme {
}; };
if matches!(class, Scrollable::Permanent) { if matches!(class, Scrollable::Permanent) {
let small_widget_container = let small_widget_container = self
cosmic.background.small_widget.clone().with_alpha(0.7); .current_container()
.small_widget
.clone()
.with_alpha(0.7);
a.horizontal_rail.background = a.horizontal_rail.background =
Some(Background::Color(small_widget_container.into())); Some(Background::Color(small_widget_container.into()));
@ -1309,7 +1327,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 mut bg = palette.background.small_widget.with_alpha(0.25); let bg = self.current_container().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();
@ -1345,7 +1363,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 mut bg = palette.background.small_widget.with_alpha(0.25); let bg = self.current_container().small_widget.with_alpha(0.25);
match class { match class {
TextInput::Default => text_input::Style { TextInput::Default => text_input::Style {
@ -1374,7 +1392,7 @@ impl text_input::Catalog for Theme {
} }
} }
text_input::Status::Focused => { text_input::Status::Focused => {
let mut bg = palette.background.small_widget.with_alpha(0.25); let bg = self.current_container().small_widget.with_alpha(0.25);
match class { match class {
TextInput::Default => text_input::Style { TextInput::Default => text_input::Style {

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

@ -177,9 +177,7 @@ mod horizontal {
let rad_0 = cosmic.corner_radii.radius_0; let rad_0 = cosmic.corner_radii.radius_0;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color( background: Some(Background::Color(component.selected_state_color().into())),
cosmic.palette.neutral_5.with_alpha(0.2).into(),
)),
first: ItemAppearance { first: ItemAppearance {
border_radius: Radius::from([rad_m[0], rad_0[1], rad_0[2], rad_m[3]]), border_radius: Radius::from([rad_m[0], rad_0[1], rad_0[2], rad_m[3]]),
..Default::default() ..Default::default()

10
src/theme/style/text_input.rs
View file

@ -6,6 +6,7 @@
use crate::ext::ColorExt; use crate::ext::ColorExt;
use crate::widget::text_input::{Appearance, StyleSheet}; use crate::widget::text_input::{Appearance, StyleSheet};
use iced_core::Color; use iced_core::Color;
use palette::WithAlpha;
#[derive(Default)] #[derive(Default)]
pub enum TextInput { pub enum TextInput {
@ -31,8 +32,7 @@ impl StyleSheet for crate::Theme {
let palette = self.cosmic(); let palette = self.cosmic();
let container = self.current_container(); let container = self.current_container();
let mut background: Color = container.component.base.into(); let background: Color = container.small_widget.with_alpha(0.25).into();
background.a = 0.25;
let corner = palette.corner_radii; let corner = palette.corner_radii;
let label_color = palette.palette.neutral_9; let label_color = palette.palette.neutral_9;
@ -125,7 +125,7 @@ impl StyleSheet for crate::Theme {
let palette = self.cosmic(); let palette = self.cosmic();
let container = self.current_container(); let container = self.current_container();
let mut background: Color = container.component.base.into(); let mut background: Color = container.small_widget.into();
background.a = 0.25; background.a = 0.25;
let corner = palette.corner_radii; let corner = palette.corner_radii;
@ -188,7 +188,7 @@ impl StyleSheet for crate::Theme {
let palette = self.cosmic(); let palette = self.cosmic();
let container = self.current_container(); let container = self.current_container();
let mut background: Color = container.component.base.into(); let mut background: Color = container.small_widget.into();
background.a = 0.25; background.a = 0.25;
let corner = palette.corner_radii; let corner = palette.corner_radii;
@ -283,7 +283,7 @@ impl StyleSheet for crate::Theme {
let palette = self.cosmic(); let palette = self.cosmic();
let container = self.current_container(); let container = self.current_container();
let mut background: Color = container.component.base.into(); let mut background: Color = container.small_widget.into();
background.a = 0.25; background.a = 0.25;
let corner = palette.corner_radii; let corner = palette.corner_radii;