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

improv(theme): theme generation improvements

Browse source
This commit is contained in:
Michael Aaron Murphy 2024-04-24 03:22:45 +02:00 • committed by Michael Murphy
parent 950a1a54f5
commit 14bd633356
6 changed files with 146 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -64,8 +64,10 @@ pub fn appearance(
let (background, text, icon) = color(style_component);
appearance.background = Some(Background::Color(background));
appearance.text_color = text;
appearance.icon_color = icon;
if !matches!(style, Button::Standard | Button::Text) {
appearance.text_color = text;
appearance.icon_color = icon;
}
}
Button::Icon | Button::IconVertical | Button::HeaderBar => {
@ -152,15 +154,14 @@ impl StyleSheet for crate::Theme {
if let Button::Custom { active, .. } = style {
return active(focused, self);
}
let accent = self.cosmic().accent_color();
appearance(self, focused, selected, style, |component| {
appearance(self, focused, selected, style, move |component| {
let text_color = if matches!(
style,
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(accent.into())
Some(self.cosmic().accent_color().into())
} else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on);
c.a = 0.8;
@ -197,7 +198,6 @@ impl StyleSheet for crate::Theme {
if let Button::Custom { hovered, .. } = style {
return hovered(focused, self);
}
let accent = self.cosmic().accent_button.hover;
appearance(
self,
@ -210,7 +210,7 @@ impl StyleSheet for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(accent.into())
Some(self.cosmic().accent_color().into())
} else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on);
c.a = 0.8;
@ -228,7 +228,6 @@ impl StyleSheet for crate::Theme {
if let Button::Custom { pressed, .. } = style {
return pressed(focused, self);
}
let accent = self.cosmic().accent_button.pressed;
appearance(self, focused, selected, style, |component| {
let text_color = if matches!(
@ -236,7 +235,7 @@ impl StyleSheet for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected
{
Some(accent.into())
Some(self.cosmic().accent_color().into())
} else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on);
c.a = 0.8;

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

@ -436,6 +436,7 @@ impl container::StyleSheet for Theme {
#[allow(clippy::too_many_lines)]
fn appearance(&self, style: &Self::Style) -> container::Appearance {
let cosmic = self.cosmic();
match style {
Container::Transparent => container::Appearance::default(),
@ -459,13 +460,7 @@ impl container::StyleSheet for Theme {
},
Container::List => {
// TODO: The primary component has the wrong color on the light theme.
let component = if cosmic.is_dark {
&self.current_container().component
} else {
&cosmic.background.component
};
let component = &self.current_container().component;
container::Appearance {
icon_color: Some(component.on.into()),
text_color: Some(component.on.into()),
@ -479,7 +474,7 @@ impl container::StyleSheet for Theme {
}
Container::HeaderBar => container::Appearance {
icon_color: Some(Color::from(cosmic.accent.base)),
icon_color: Some(Color::from(cosmic.background.on)),
text_color: Some(Color::from(cosmic.background.on)),
background: Some(iced::Background::Color(cosmic.background.base.into())),
border: Border {

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

@ -5,6 +5,7 @@
use crate::widget::segmented_button::{Appearance, ItemAppearance, StyleSheet};
use crate::{theme::Theme, widget::segmented_button::ItemStatusAppearance};
use cosmic_theme::{Component, Container};
use iced_core::{border::Radius, Background};
#[derive(Default)]
@ -23,6 +24,8 @@ impl StyleSheet for Theme {
#[allow(clippy::too_many_lines)]
fn horizontal(&self, style: &Self::Style) -> Appearance {
let container = &self.current_container();
match style {
SegmentedButton::TabBar => {
let cosmic = self.cosmic();
@ -46,25 +49,24 @@ impl StyleSheet for Theme {
border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default()
},
text_color: cosmic.on_bg_color().into(),
text_color: container.component.on.into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
hover: hover(cosmic, &container.component, &active),
focus: focus(cosmic, container, &active),
active,
..Default::default()
}
}
SegmentedButton::Control => {
let cosmic = self.cosmic();
let active = horizontal::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
let active = horizontal::selection_active(cosmic, &container.component);
let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0;
Appearance {
border_radius: cosmic.corner_radii.radius_0.into(),
background: Some(Background::Color(container.small_widget.into())),
border_radius: rad_m.into(),
inactive: ItemStatusAppearance {
background: Some(Background::Color(cosmic.small_container_widget().into())),
background: None,
first: ItemAppearance {
border_radius: Radius::from([rad_m[0], rad_0[1], rad_0[2], rad_m[3]]),
..Default::default()
@ -77,10 +79,10 @@ impl StyleSheet for Theme {
border_radius: Radius::from([rad_0[0], rad_m[1], rad_m[2], rad_0[3]]),
..Default::default()
},
text_color: cosmic.on_bg_color().into(),
text_color: container.component.on.into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
hover: hover(cosmic, &container.component, &active),
focus: focus(cosmic, container, &active),
active,
..Default::default()
}
@ -96,28 +98,29 @@ impl StyleSheet for Theme {
let rad_0 = cosmic.corner_radii.radius_0;
match style {
SegmentedButton::TabBar => {
let container = &self.cosmic().primary;
let active = vertical::tab_bar_active(cosmic);
Appearance {
border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance {
background: None,
text_color: cosmic.on_bg_color().into(),
text_color: container.component.on.into(),
..active
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
hover: hover(cosmic, &container.component, &active),
focus: focus(cosmic, container, &active),
active,
..Default::default()
}
}
SegmentedButton::Control => {
let active = vertical::selection_active(cosmic);
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
let container = self.current_container();
let active = vertical::selection_active(cosmic, &container.component);
Appearance {
border_radius: cosmic.corner_radii.radius_0.into(),
background: Some(Background::Color(container.small_widget.into())),
border_radius: rad_m.into(),
inactive: ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
background: None,
first: ItemAppearance {
border_radius: Radius::from([rad_m[0], rad_m[1], rad_0[0], rad_0[0]]),
..Default::default()
@ -130,10 +133,10 @@ impl StyleSheet for Theme {
border_radius: Radius::from([rad_0[0], rad_0[1], rad_m[2], rad_m[3]]),
..Default::default()
},
text_color: cosmic.on_bg_color().into(),
text_color: container.component.on.into(),
},
hover: hover(cosmic, &active),
focus: focus(cosmic, &active),
hover: hover(cosmic, &container.component, &active),
focus: focus(cosmic, container, &active),
active,
..Default::default()
}
@ -145,15 +148,21 @@ impl StyleSheet for Theme {
mod horizontal {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use cosmic_theme::Component;
use iced_core::{border::Radius, Background};
pub fn selection_active(cosmic: &cosmic_theme::Theme) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
pub fn selection_active(
cosmic: &cosmic_theme::Theme,
component: &Component,
) -> ItemStatusAppearance {
let mut color = cosmic.palette.neutral_5;
color.alpha = 0.2;
let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
background: Some(Background::Color(color.into())),
first: ItemAppearance {
border_radius: Radius::from([rad_m[0], rad_0[1], rad_0[2], rad_m[3]]),
..Default::default()
@ -197,23 +206,28 @@ mod horizontal {
}
}
pub fn focus(cosmic: &cosmic_theme::Theme, default: &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;
neutral_5.alpha = 0.2;
pub fn focus(
cosmic: &cosmic_theme::Theme,
container: &Container,
default: &ItemStatusAppearance,
) -> ItemStatusAppearance {
let color = container.small_widget;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
background: Some(Background::Color(color.into())),
text_color: cosmic.accent.base.into(),
..*default
}
}
pub fn hover(cosmic: &cosmic_theme::Theme, default: &ItemStatusAppearance) -> ItemStatusAppearance {
let mut neutral_10 = cosmic.palette.neutral_10;
neutral_10.alpha = 0.1;
pub fn hover(
cosmic: &cosmic_theme::Theme,
component: &Component,
default: &ItemStatusAppearance,
) -> ItemStatusAppearance {
let mut color = cosmic.palette.neutral_8;
color.alpha = 0.2;
ItemStatusAppearance {
background: Some(Background::Color(neutral_10.into())),
background: Some(Background::Color(color.into())),
text_color: cosmic.accent.base.into(),
..*default
}
@ -221,15 +235,21 @@ pub fn hover(cosmic: &cosmic_theme::Theme, default: &ItemStatusAppearance) -> It
mod vertical {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use cosmic_theme::Component;
use iced_core::{border::Radius, Background};
pub fn selection_active(cosmic: &cosmic_theme::Theme) -> ItemStatusAppearance {
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
pub fn selection_active(
cosmic: &cosmic_theme::Theme,
component: &Component,
) -> ItemStatusAppearance {
let mut color = component.selected_state_color();
color.alpha = 0.3;
let rad_0 = cosmic.corner_radii.radius_0;
let rad_m = cosmic.corner_radii.radius_m;
ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())),
background: Some(Background::Color(color.into())),
first: ItemAppearance {
border_radius: Radius::from([rad_m[0], rad_m[1], rad_0[2], rad_0[3]]),
..Default::default()