improv(theme): list_button style

This adds a new `list_button` field to theme, which makes ListItem buttons stay transparent when pressed. It's essentially a mix of `text_button` and `background.component`, without hover highlights (as per designs).
This commit is contained in:
Vukašin Vojinović 2026-04-28 12:52:16 +02:00 • committed by Michael Murphy
parent 99c038a66a
commit 564ef834ce
2 changed files with 16 additions and 21 deletions

View file

@ -75,6 +75,8 @@ pub struct Theme {
pub icon_button: Component, pub icon_button: Component,
/// link button element colors /// link button element colors
pub link_button: Component, pub link_button: Component,
/// list button element colors
pub list_button: Component,
/// text button element colors /// text button element colors
pub text_button: Component, pub text_button: Component,
/// button component styling /// button component styling
@ -1285,6 +1287,15 @@ impl ThemeBuilder {
component.on_disabled = over(component.on.with_alpha(0.5), component.base); component.on_disabled = over(component.on.with_alpha(0.5), component.base);
component component
}, },
list_button: Component::component(
Srgba::new(0.0, 0.0, 0.0, 0.0),
accent,
on_bg_component,
Srgba::new(0.0, 0.0, 0.0, 0.0),
button_pressed_overlay,
is_high_contrast,
control_steps_array[8],
),
success: Component::colored_component( success: Component::colored_component(
success, success,
control_steps_array[0], control_steps_array[0],

View file

@ -150,7 +150,7 @@ pub fn appearance(
} }
Button::ListItem(radii) => { Button::ListItem(radii) => {
corner_radii = radii; corner_radii = radii;
let (background, text, icon) = color(&cosmic.background.component); let (background, text, icon) = color(&cosmic.list_button);
if selected { if selected {
appearance.background = appearance.background =
@ -197,7 +197,7 @@ impl Catalog for crate::Theme {
return active(focused, self); return active(focused, self);
} }
let mut s = appearance(self, focused, selected, false, style, move |component| { appearance(self, focused, selected, false, style, move |component| {
let text_color = if matches!( let text_color = if matches!(
style, style,
Button::Icon | Button::IconVertical | Button::HeaderBar Button::Icon | Button::IconVertical | Button::HeaderBar
@ -209,15 +209,7 @@ impl Catalog for crate::Theme {
}; };
(component.base.into(), text_color, text_color) (component.base.into(), text_color, text_color)
}); })
if let Button::ListItem(_) = style {
if !selected {
s.background = None;
}
}
s
} }
fn disabled(&self, style: &Self::Class) -> Style { fn disabled(&self, style: &Self::Class) -> Style {
@ -245,7 +237,7 @@ impl Catalog for crate::Theme {
return hovered(focused, self); return hovered(focused, self);
} }
let mut s = appearance( appearance(
self, self,
focused || matches!(style, Button::Image), focused || matches!(style, Button::Image),
selected, selected,
@ -264,15 +256,7 @@ impl Catalog for crate::Theme {
(component.hover.into(), text_color, text_color) (component.hover.into(), text_color, text_color)
}, },
); )
if let Button::ListItem(_) = style {
if !selected {
s.background = None;
}
}
s
} }
fn pressed(&self, focused: bool, selected: bool, style: &Self::Class) -> Style { fn pressed(&self, focused: bool, selected: bool, style: &Self::Class) -> Style {