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

12
cosmic-theme/src/model/derivation.rs
View file

@ -15,18 +15,28 @@ pub struct Container {
pub divider: Srgba, pub divider: Srgba,
/// the color of text in the container /// the color of text in the container
pub on: Srgba, pub on: Srgba,
/// the color of @small_widget_container
pub small_widget: Srgba,
} }
impl Container { impl Container {
pub(crate) fn new(component: Component, base: Srgba, on: Srgba) -> Self { pub(crate) fn new(
component: Component,
base: Srgba,
on: Srgba,
mut small_widget: Srgba,
) -> Self {
let mut divider_c = on; let mut divider_c = on;
divider_c.alpha = 0.2; divider_c.alpha = 0.2;
small_widget.alpha = 0.25;
Self { Self {
base, base,
component, component,
divider: over(divider_c, base), divider: over(divider_c, base),
on, on,
small_widget,
} }
} }
} }

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

@ -5,7 +5,7 @@ use crate::{
DARK_PALETTE, LIGHT_PALETTE, NAME, DARK_PALETTE, LIGHT_PALETTE, NAME,
}; };
use cosmic_config::{Config, CosmicConfigEntry}; use cosmic_config::{Config, CosmicConfigEntry};
use palette::{IntoColor, Oklcha, Srgb, Srgba}; use palette::{rgb::Rgb, IntoColor, Oklcha, Srgb, Srgba};
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use std::num::NonZeroUsize; use std::num::NonZeroUsize;
@ -182,13 +182,6 @@ impl Theme {
self.warning.base self.warning.base
} }
#[must_use]
#[allow(clippy::doc_markdown)]
/// get @small_container_widget
pub fn small_container_widget(&self) -> Srgba {
self.palette.gray_2
}
#[must_use] #[must_use]
#[allow(clippy::doc_markdown)] #[allow(clippy::doc_markdown)]
/// get @small_widget_divider /// get @small_widget_divider
@ -774,6 +767,11 @@ impl ThemeBuilder {
let p_ref = palette.as_ref(); let p_ref = palette.as_ref();
let neutral_steps = steps(
neutral_tint.unwrap_or(Rgb::new(0.0, 0.0, 0.0)),
NonZeroUsize::new(100).unwrap(),
);
let bg = if let Some(bg_color) = bg_color { let bg = if let Some(bg_color) = bg_color {
bg_color bg_color
} else { } else {
@ -783,10 +781,14 @@ impl ThemeBuilder {
let step_array = steps(bg, NonZeroUsize::new(100).unwrap()); let step_array = steps(bg, NonZeroUsize::new(100).unwrap());
let bg_index = color_index(bg, step_array.len()); let bg_index = color_index(bg, step_array.len());
let mut component_hovered_overlay = p_ref.neutral_0; let mut component_hovered_overlay = if bg_index < 91 {
p_ref.neutral_10
} else {
p_ref.neutral_0
};
component_hovered_overlay.alpha = 0.1; component_hovered_overlay.alpha = 0.1;
let mut component_pressed_overlay = p_ref.neutral_0; let mut component_pressed_overlay = component_hovered_overlay;
component_pressed_overlay.alpha = 0.2; component_pressed_overlay.alpha = 0.2;
// Standard button background is neutral 7 with 25% opacity // Standard button background is neutral 7 with 25% opacity
@ -805,7 +807,6 @@ impl ThemeBuilder {
let on_bg_component = get_text( let on_bg_component = get_text(
color_index(bg_component, step_array.len()), color_index(bg_component, step_array.len()),
&step_array, &step_array,
is_dark,
&p_ref.neutral_8, &p_ref.neutral_8,
text_steps_array.as_ref(), text_steps_array.as_ref(),
); );
@ -831,10 +832,16 @@ impl ThemeBuilder {
get_text( get_text(
bg_index, bg_index,
&step_array, &step_array,
is_dark,
&p_ref.neutral_8, &p_ref.neutral_8,
text_steps_array.as_ref(), text_steps_array.as_ref(),
), ),
get_surface_color(
bg_index,
5,
&neutral_steps,
bg_index <= 65,
&p_ref.neutral_6,
),
), ),
primary: { primary: {
let container_bg = if let Some(primary_container_bg_color) = primary_container_bg { let container_bg = if let Some(primary_container_bg_color) = primary_container_bg {
@ -843,10 +850,20 @@ impl ThemeBuilder {
get_surface_color(bg_index, 5, &step_array, is_dark, &p_ref.neutral_1) get_surface_color(bg_index, 5, &step_array, is_dark, &p_ref.neutral_1)
}; };
let base_index = 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, &p_ref.neutral_3); get_surface_color(base_index, 6, &step_array, is_dark, &p_ref.neutral_3);
component_hovered_overlay = if base_index < 91 {
p_ref.neutral_10
} else {
p_ref.neutral_0
};
component_hovered_overlay.alpha = 0.1;
component_pressed_overlay = component_hovered_overlay;
component_pressed_overlay.alpha = 0.2;
let container = Container::new( let container = Container::new(
Component::component( Component::component(
component_base, component_base,
@ -854,7 +871,6 @@ impl ThemeBuilder {
get_text( get_text(
color_index(component_base, step_array.len()), color_index(component_base, step_array.len()),
&step_array, &step_array,
is_dark,
&p_ref.neutral_8, &p_ref.neutral_8,
text_steps_array.as_ref(), text_steps_array.as_ref(),
), ),
@ -867,10 +883,16 @@ impl ThemeBuilder {
get_text( get_text(
base_index, base_index,
&step_array, &step_array,
is_dark,
&p_ref.neutral_8, &p_ref.neutral_8,
text_steps_array.as_ref(), text_steps_array.as_ref(),
), ),
get_surface_color(
base_index,
5,
&neutral_steps,
base_index <= 65,
&p_ref.neutral_6,
),
); );
container container
@ -886,6 +908,16 @@ impl ThemeBuilder {
let secondary_component = let secondary_component =
get_surface_color(base_index, 3, &step_array, is_dark, &p_ref.neutral_4); get_surface_color(base_index, 3, &step_array, is_dark, &p_ref.neutral_4);
component_hovered_overlay = if base_index < 91 {
p_ref.neutral_10
} else {
p_ref.neutral_0
};
component_hovered_overlay.alpha = 0.1;
component_pressed_overlay = component_hovered_overlay;
component_pressed_overlay.alpha = 0.2;
Container::new( Container::new(
Component::component( Component::component(
secondary_component, secondary_component,
@ -893,7 +925,6 @@ impl ThemeBuilder {
get_text( get_text(
color_index(secondary_component, step_array.len()), color_index(secondary_component, step_array.len()),
&step_array, &step_array,
is_dark,
&p_ref.neutral_8, &p_ref.neutral_8,
text_steps_array.as_ref(), text_steps_array.as_ref(),
), ),
@ -906,10 +937,16 @@ impl ThemeBuilder {
get_text( get_text(
base_index, base_index,
&step_array, &step_array,
is_dark,
&p_ref.neutral_8, &p_ref.neutral_8,
text_steps_array.as_ref(), text_steps_array.as_ref(),
), ),
get_surface_color(
base_index,
5,
&neutral_steps,
base_index <= 65,
&p_ref.neutral_6,
),
) )
}, },
accent: Component::colored_component( accent: Component::colored_component(

23
cosmic-theme/src/steps.rs
View file

@ -43,16 +43,15 @@ pub fn get_surface_color(
is_dark = is_dark || base_index < 91; is_dark = is_dark || base_index < 91;
get_index(base_index, steps, step_array.len(), is_dark) *get_index(base_index, steps, step_array.len(), is_dark)
.and_then(|i| step_array.get(i).cloned()) .and_then(|i| step_array.get(i))
.unwrap_or_else(|| fallback.to_owned()) .unwrap_or(fallback)
} }
/// get text color given a base background color /// get text color given a base background color
pub fn get_text( pub fn get_text(
base_index: usize, base_index: usize,
step_array: &Vec<Srgba>, step_array: &Vec<Srgba>,
is_dark: bool,
fallback: &Srgba, fallback: &Srgba,
tint_array: Option<&Vec<Srgba>>, tint_array: Option<&Vec<Srgba>>,
) -> Srgba { ) -> Srgba {
@ -63,16 +62,14 @@ pub fn get_text(
} else { } else {
step_array step_array
}; };
let Some(index) = get_index(base_index, 70, step_array.len(), is_dark)
.or_else(|| get_index(base_index, 50, step_array.len(), is_dark))
else {
return fallback.to_owned();
};
step_array let is_dark = base_index < 60;
.get(index)
.cloned() let index = get_index(base_index, 70, step_array.len(), is_dark)
.unwrap_or_else(|| fallback.to_owned()) .or_else(|| get_index(base_index, 50, step_array.len(), is_dark))
.unwrap_or_else(|| if is_dark { 99 } else { 0 });
*step_array.get(index).unwrap_or(fallback)
} }
/// get the index into the steps array for a given color /// get the index into the steps array for a given color

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

@ -64,8 +64,10 @@ pub fn appearance(
let (background, text, icon) = color(style_component); let (background, text, icon) = color(style_component);
appearance.background = Some(Background::Color(background)); appearance.background = Some(Background::Color(background));
appearance.text_color = text; if !matches!(style, Button::Standard | Button::Text) {
appearance.icon_color = icon; appearance.text_color = text;
appearance.icon_color = icon;
}
} }
Button::Icon | Button::IconVertical | Button::HeaderBar => { Button::Icon | Button::IconVertical | Button::HeaderBar => {
@ -152,15 +154,14 @@ impl StyleSheet for crate::Theme {
if let Button::Custom { active, .. } = style { if let Button::Custom { active, .. } = style {
return active(focused, self); 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!( let text_color = if matches!(
style, style,
Button::Icon | Button::IconVertical | Button::HeaderBar Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected ) && selected
{ {
Some(accent.into()) Some(self.cosmic().accent_color().into())
} else if matches!(style, Button::HeaderBar) && !selected { } else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on); let mut c = Color::from(component.on);
c.a = 0.8; c.a = 0.8;
@ -197,7 +198,6 @@ impl StyleSheet for crate::Theme {
if let Button::Custom { hovered, .. } = style { if let Button::Custom { hovered, .. } = style {
return hovered(focused, self); return hovered(focused, self);
} }
let accent = self.cosmic().accent_button.hover;
appearance( appearance(
self, self,
@ -210,7 +210,7 @@ impl StyleSheet for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected ) && selected
{ {
Some(accent.into()) Some(self.cosmic().accent_color().into())
} else if matches!(style, Button::HeaderBar) && !selected { } else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on); let mut c = Color::from(component.on);
c.a = 0.8; c.a = 0.8;
@ -228,7 +228,6 @@ impl StyleSheet for crate::Theme {
if let Button::Custom { pressed, .. } = style { if let Button::Custom { pressed, .. } = style {
return pressed(focused, self); return pressed(focused, self);
} }
let accent = self.cosmic().accent_button.pressed;
appearance(self, focused, selected, style, |component| { appearance(self, focused, selected, style, |component| {
let text_color = if matches!( let text_color = if matches!(
@ -236,7 +235,7 @@ impl StyleSheet for crate::Theme {
Button::Icon | Button::IconVertical | Button::HeaderBar Button::Icon | Button::IconVertical | Button::HeaderBar
) && selected ) && selected
{ {
Some(accent.into()) Some(self.cosmic().accent_color().into())
} else if matches!(style, Button::HeaderBar) && !selected { } else if matches!(style, Button::HeaderBar) && !selected {
let mut c = Color::from(component.on); let mut c = Color::from(component.on);
c.a = 0.8; 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)] #[allow(clippy::too_many_lines)]
fn appearance(&self, style: &Self::Style) -> container::Appearance { fn appearance(&self, style: &Self::Style) -> container::Appearance {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
match style { match style {
Container::Transparent => container::Appearance::default(), Container::Transparent => container::Appearance::default(),
@ -459,13 +460,7 @@ impl container::StyleSheet for Theme {
}, },
Container::List => { Container::List => {
// TODO: The primary component has the wrong color on the light theme. let component = &self.current_container().component;
let component = if cosmic.is_dark {
&self.current_container().component
} else {
&cosmic.background.component
};
container::Appearance { container::Appearance {
icon_color: Some(component.on.into()), icon_color: Some(component.on.into()),
text_color: Some(component.on.into()), text_color: Some(component.on.into()),
@ -479,7 +474,7 @@ impl container::StyleSheet for Theme {
} }
Container::HeaderBar => container::Appearance { 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)), text_color: Some(Color::from(cosmic.background.on)),
background: Some(iced::Background::Color(cosmic.background.base.into())), background: Some(iced::Background::Color(cosmic.background.base.into())),
border: Border { 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::widget::segmented_button::{Appearance, ItemAppearance, StyleSheet};
use crate::{theme::Theme, widget::segmented_button::ItemStatusAppearance}; use crate::{theme::Theme, widget::segmented_button::ItemStatusAppearance};
use cosmic_theme::{Component, Container};
use iced_core::{border::Radius, Background}; use iced_core::{border::Radius, Background};
#[derive(Default)] #[derive(Default)]
@ -23,6 +24,8 @@ impl StyleSheet for Theme {
#[allow(clippy::too_many_lines)] #[allow(clippy::too_many_lines)]
fn horizontal(&self, style: &Self::Style) -> Appearance { fn horizontal(&self, style: &Self::Style) -> Appearance {
let container = &self.current_container();
match style { match style {
SegmentedButton::TabBar => { SegmentedButton::TabBar => {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
@ -46,25 +49,24 @@ impl StyleSheet for Theme {
border_bottom: Some((1.0, cosmic.accent.base.into())), border_bottom: Some((1.0, cosmic.accent.base.into())),
..Default::default() ..Default::default()
}, },
text_color: cosmic.on_bg_color().into(), text_color: container.component.on.into(),
}, },
hover: hover(cosmic, &active), hover: hover(cosmic, &container.component, &active),
focus: focus(cosmic, &active), focus: focus(cosmic, container, &active),
active, active,
..Default::default() ..Default::default()
} }
} }
SegmentedButton::Control => { SegmentedButton::Control => {
let cosmic = self.cosmic(); let cosmic = self.cosmic();
let active = horizontal::selection_active(cosmic); let active = horizontal::selection_active(cosmic, &container.component);
let mut neutral_5 = cosmic.palette.neutral_5;
neutral_5.alpha = 0.2;
let rad_m = cosmic.corner_radii.radius_m; let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0; let rad_0 = cosmic.corner_radii.radius_0;
Appearance { Appearance {
border_radius: cosmic.corner_radii.radius_0.into(), background: Some(Background::Color(container.small_widget.into())),
border_radius: rad_m.into(),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: Some(Background::Color(cosmic.small_container_widget().into())), background: None,
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()
@ -77,10 +79,10 @@ impl StyleSheet for Theme {
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.on_bg_color().into(), text_color: container.component.on.into(),
}, },
hover: hover(cosmic, &active), hover: hover(cosmic, &container.component, &active),
focus: focus(cosmic, &active), focus: focus(cosmic, container, &active),
active, active,
..Default::default() ..Default::default()
} }
@ -96,28 +98,29 @@ impl StyleSheet for Theme {
let rad_0 = cosmic.corner_radii.radius_0; let rad_0 = cosmic.corner_radii.radius_0;
match style { match style {
SegmentedButton::TabBar => { SegmentedButton::TabBar => {
let container = &self.cosmic().primary;
let active = vertical::tab_bar_active(cosmic); let active = vertical::tab_bar_active(cosmic);
Appearance { Appearance {
border_radius: cosmic.corner_radii.radius_0.into(), border_radius: cosmic.corner_radii.radius_0.into(),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: None, background: None,
text_color: cosmic.on_bg_color().into(), text_color: container.component.on.into(),
..active ..active
}, },
hover: hover(cosmic, &active), hover: hover(cosmic, &container.component, &active),
focus: focus(cosmic, &active), focus: focus(cosmic, container, &active),
active, active,
..Default::default() ..Default::default()
} }
} }
SegmentedButton::Control => { SegmentedButton::Control => {
let active = vertical::selection_active(cosmic); let container = self.current_container();
let mut neutral_5 = cosmic.palette.neutral_5; let active = vertical::selection_active(cosmic, &container.component);
neutral_5.alpha = 0.2;
Appearance { Appearance {
border_radius: cosmic.corner_radii.radius_0.into(), background: Some(Background::Color(container.small_widget.into())),
border_radius: rad_m.into(),
inactive: ItemStatusAppearance { inactive: ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: None,
first: ItemAppearance { first: ItemAppearance {
border_radius: Radius::from([rad_m[0], rad_m[1], rad_0[0], rad_0[0]]), border_radius: Radius::from([rad_m[0], rad_m[1], rad_0[0], rad_0[0]]),
..Default::default() ..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]]), border_radius: Radius::from([rad_0[0], rad_0[1], rad_m[2], rad_m[3]]),
..Default::default() ..Default::default()
}, },
text_color: cosmic.on_bg_color().into(), text_color: container.component.on.into(),
}, },
hover: hover(cosmic, &active), hover: hover(cosmic, &container.component, &active),
focus: focus(cosmic, &active), focus: focus(cosmic, container, &active),
active, active,
..Default::default() ..Default::default()
} }
@ -145,15 +148,21 @@ impl StyleSheet for Theme {
mod horizontal { mod horizontal {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance}; use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use cosmic_theme::Component;
use iced_core::{border::Radius, Background}; use iced_core::{border::Radius, Background};
pub fn selection_active(cosmic: &cosmic_theme::Theme) -> ItemStatusAppearance { pub fn selection_active(
let mut neutral_5 = cosmic.palette.neutral_5; cosmic: &cosmic_theme::Theme,
neutral_5.alpha = 0.2; component: &Component,
) -> ItemStatusAppearance {
let mut color = cosmic.palette.neutral_5;
color.alpha = 0.2;
let rad_m = cosmic.corner_radii.radius_m; let rad_m = cosmic.corner_radii.radius_m;
let rad_0 = cosmic.corner_radii.radius_0; let rad_0 = cosmic.corner_radii.radius_0;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(color.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()
@ -197,23 +206,28 @@ mod horizontal {
} }
} }
pub fn focus(cosmic: &cosmic_theme::Theme, default: &ItemStatusAppearance) -> ItemStatusAppearance { pub fn focus(
// TODO: This is a hack to make the hover color lighter than the selected color cosmic: &cosmic_theme::Theme,
// I'm not sure why the alpha is being applied differently here than in figma container: &Container,
let mut neutral_5 = cosmic.palette.neutral_5; default: &ItemStatusAppearance,
neutral_5.alpha = 0.2; ) -> ItemStatusAppearance {
let color = container.small_widget;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(color.into())),
text_color: cosmic.accent.base.into(), text_color: cosmic.accent.base.into(),
..*default ..*default
} }
} }
pub fn hover(cosmic: &cosmic_theme::Theme, default: &ItemStatusAppearance) -> ItemStatusAppearance { pub fn hover(
let mut neutral_10 = cosmic.palette.neutral_10; cosmic: &cosmic_theme::Theme,
neutral_10.alpha = 0.1; component: &Component,
default: &ItemStatusAppearance,
) -> ItemStatusAppearance {
let mut color = cosmic.palette.neutral_8;
color.alpha = 0.2;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_10.into())), background: Some(Background::Color(color.into())),
text_color: cosmic.accent.base.into(), text_color: cosmic.accent.base.into(),
..*default ..*default
} }
@ -221,15 +235,21 @@ pub fn hover(cosmic: &cosmic_theme::Theme, default: &ItemStatusAppearance) -> It
mod vertical { mod vertical {
use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance}; use crate::widget::segmented_button::{ItemAppearance, ItemStatusAppearance};
use cosmic_theme::Component;
use iced_core::{border::Radius, Background}; use iced_core::{border::Radius, Background};
pub fn selection_active(cosmic: &cosmic_theme::Theme) -> ItemStatusAppearance { pub fn selection_active(
let mut neutral_5 = cosmic.palette.neutral_5; cosmic: &cosmic_theme::Theme,
neutral_5.alpha = 0.2; component: &Component,
) -> ItemStatusAppearance {
let mut color = component.selected_state_color();
color.alpha = 0.3;
let rad_0 = cosmic.corner_radii.radius_0; let rad_0 = cosmic.corner_radii.radius_0;
let rad_m = cosmic.corner_radii.radius_m; let rad_m = cosmic.corner_radii.radius_m;
ItemStatusAppearance { ItemStatusAppearance {
background: Some(Background::Color(neutral_5.into())), background: Some(Background::Color(color.into())),
first: ItemAppearance { first: ItemAppearance {
border_radius: Radius::from([rad_m[0], rad_m[1], rad_0[2], rad_0[3]]), border_radius: Radius::from([rad_m[0], rad_m[1], rad_0[2], rad_0[3]]),
..Default::default() ..Default::default()