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

chore(cosmic-theme): adjustments for button theming

Browse source
This commit is contained in:
Michael Aaron Murphy 2023-09-13 15:50:29 +02:00 • committed by Michael Murphy
parent 1e3c44865a
commit 55095abfce
2 changed files with 174 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -119,34 +119,25 @@ where
} }
/// helper for producing a component from a base color a neutral and an accent /// helper for producing a component from a base color a neutral and an accent
pub fn colored_component(base: C, neutral: C, accent: C) -> Self { pub fn colored_component(base: C, neutral: C, accent: C, hovered: C, pressed: C) -> Self {
let neutral = neutral.clone().into();
let mut neutral_05 = neutral.clone();
let mut neutral_10 = neutral.clone();
let mut neutral_20 = neutral.clone();
neutral_05.alpha = 0.05;
neutral_10.alpha = 0.1;
neutral_20.alpha = 0.2;
let base: Srgba = base.into(); let base: Srgba = base.into();
let mut base_50 = base.clone(); let mut base_50 = base.clone();
base_50.alpha *= 0.5; base_50.alpha *= 0.5;
let on_20 = neutral.clone(); let on_20 = neutral.clone();
let mut on_50 = on_20.clone(); let mut on_50: Srgba = on_20.clone().into();
on_50.alpha = 0.5; on_50.alpha = 0.5;
Component { Component {
base: base.clone().into(), base: base.clone().into(),
hover: over(neutral_10, base).into(), hover: over(hovered.clone(), base).into(),
pressed: over(neutral_20, base).into(), pressed: over(pressed, base).into(),
selected: over(neutral_10, base).into(), selected: over(hovered, base).into(),
selected_text: accent.clone(), selected_text: accent.clone(),
divider: on_20.into(), divider: on_20,
on: neutral.into(), on: neutral,
disabled: base_50.into(), disabled: over(base_50, base).into(),
on_disabled: on_50.into(), on_disabled: over(on_50, base).into(),
focus: accent, focus: accent,
border: base.into(), border: base.into(),
disabled_border: base_50.into(), disabled_border: base_50.into(),
@ -154,30 +145,34 @@ where
} }
/// helper for producing a button component /// helper for producing a button component
pub fn colored_button(base: C, overlay: C, on_button: C, accent: C) -> Self { pub fn colored_button(
let mut component = Component::colored_component(base, overlay, accent); base: C,
overlay: C,
on_button: C,
accent: C,
hovered: C,
pressed: C,
) -> Self {
let mut component = Component::colored_component(base, overlay, accent, hovered, pressed);
component.on = on_button.clone(); component.on = on_button.clone();
let mut on_disabled = on_button.into(); let mut on_disabled = on_button.into();
on_disabled.alpha = 0.5; on_disabled.alpha = 0.5;
component.on_disabled = on_disabled.into(); component.on_disabled = on_disabled.into();
component component
} }
/// helper for producing a component color theme /// helper for producing a component color theme
pub fn component( pub fn component(
base: C, base: C,
component_state_overlay: C,
accent: C, accent: C,
on_component: C, on_component: C,
hovered: C,
pressed: C,
is_high_contrast: bool, is_high_contrast: bool,
border: C, border: C,
) -> Self { ) -> Self {
let component_state_overlay = component_state_overlay.clone().into();
let mut component_state_overlay_10 = component_state_overlay.clone();
let mut component_state_overlay_20 = component_state_overlay.clone();
component_state_overlay_10.alpha = 0.1;
component_state_overlay_20.alpha = 0.2;
let base = base.into(); let base = base.into();
let mut base_50 = base.clone(); let mut base_50 = base.clone();
base_50.alpha *= 0.5; base_50.alpha *= 0.5;
@ -194,9 +189,9 @@ where
Component { Component {
base: base.clone().into(), base: base.clone().into(),
hover: over(component_state_overlay_10, base).into(), hover: over(hovered.clone(), base).into(),
pressed: over(component_state_overlay_20, base).into(), pressed: over(pressed, base).into(),
selected: over(component_state_overlay_10, base).into(), selected: over(hovered, base).into(),
selected_text: accent.clone(), selected_text: accent.clone(),
focus: accent.clone(), focus: accent.clone(),
divider: if is_high_contrast { divider: if is_high_contrast {
@ -205,8 +200,8 @@ where
on_20.into() on_20.into()
}, },
on: on_component.clone(), on: on_component.clone(),
disabled: base_50.into(), disabled: over(base_50, base).into(),
on_disabled: on_50.into(), on_disabled: over(on_50, base).into(),
border: border.into(), border: border.into(),
disabled_border: disabled_border.into(), disabled_border: disabled_border.into(),
} }

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

@ -1,6 +1,6 @@
use crate::{ use crate::{
steps::*, Component, Container, CornerRadii, CosmicPalette, CosmicPaletteInner, Spacing, composite::over, steps::*, Component, Container, CornerRadii, CosmicPalette,
DARK_PALETTE, LIGHT_PALETTE, NAME, CosmicPaletteInner, Spacing, DARK_PALETTE, LIGHT_PALETTE, NAME,
}; };
use cosmic_config::{Config, ConfigGet, ConfigSet, CosmicConfigEntry}; use cosmic_config::{Config, ConfigGet, ConfigSet, CosmicConfigEntry};
use palette::{IntoColor, Srgb, Srgba}; use palette::{IntoColor, Srgb, Srgba};
@ -46,6 +46,10 @@ pub struct Theme<C> {
pub destructive_button: Component<C>, pub destructive_button: Component<C>,
/// warning button element colors /// warning button element colors
pub warning_button: Component<C>, pub warning_button: Component<C>,
/// icon button element colors
pub icon_button: Component<C>,
/// link button element colors
pub link_button: Component<C>,
/// text button element colors /// text button element colors
pub text_button: Component<C>, pub text_button: Component<C>,
/// button component styling /// button component styling
@ -629,9 +633,10 @@ impl ThemeBuilder {
} else { } else {
p_ref.gray_1.clone() p_ref.gray_1.clone()
}; };
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 primary_container_bg = if let Some(primary_container_bg_color) = primary_container_bg { let primary_container_bg = if let Some(primary_container_bg_color) = primary_container_bg {
primary_container_bg_color primary_container_bg_color
} else { } else {
@ -652,11 +657,19 @@ impl ThemeBuilder {
&p_ref.neutral_8, &p_ref.neutral_8,
text_steps_array.as_ref(), text_steps_array.as_ref(),
); );
let mut component_hovered_overlay = p_ref.neutral_0.clone();
component_hovered_overlay.alpha = 0.1;
let mut component_pressed_overlay = p_ref.neutral_0.clone();
component_pressed_overlay.alpha = 0.2;
let bg_component = Component::component( let bg_component = Component::component(
bg_component, bg_component,
p_ref.neutral_0.to_owned(), accent,
accent.clone(),
on_bg_component, on_bg_component,
component_hovered_overlay,
component_pressed_overlay,
is_high_contrast, is_high_contrast,
p_ref.neutral_8, p_ref.neutral_8,
); );
@ -673,9 +686,10 @@ impl ThemeBuilder {
); );
let primary_component = Component::component( let primary_component = Component::component(
primary_component, primary_component,
p_ref.neutral_0.to_owned(), accent,
accent.clone(),
on_primary_component, on_primary_component,
component_hovered_overlay,
component_pressed_overlay,
is_high_contrast, is_high_contrast,
p_ref.neutral_8, p_ref.neutral_8,
); );
@ -687,63 +701,48 @@ impl ThemeBuilder {
color_index(secondary_component, step_array.len()), color_index(secondary_component, step_array.len()),
&step_array, &step_array,
is_dark, is_dark,
&p_ref.neutral_10, &p_ref.neutral_8,
text_steps_array.as_ref(), text_steps_array.as_ref(),
); );
let secondary_component = Component::component( let secondary_component = Component::component(
secondary_component, secondary_component,
p_ref.neutral_0.to_owned(), accent,
accent.clone(),
on_secondary_component, on_secondary_component,
component_hovered_overlay,
component_pressed_overlay,
is_high_contrast, is_high_contrast,
p_ref.neutral_8, p_ref.neutral_8,
); );
let neutral_7 = p_ref.neutral_7; let neutral_7 = p_ref.neutral_7;
let mut button_bg = neutral_7;
button_bg.alpha = 0.25;
let neutral_10 = p_ref.neutral_10;
let mut button_hover_overlay = neutral_10;
button_hover_overlay.alpha = 0.10;
let mut button_press_overlay = neutral_10;
button_press_overlay.alpha = 0.20;
let mut button_disabled_bg = button_bg; // Standard button background is neutral 7 with 25% opacity
button_disabled_bg.alpha *= 0.5; let button_bg = {
let button_border = p_ref.neutral_8.clone(); let mut color = neutral_7.clone();
let mut button_disabled_border = button_border; color.alpha = 0.25;
button_disabled_border.alpha *= 0.5; color
};
let mut text_button = Component::component( let (button_hovered_hue, button_pressed_hye) = if is_dark {
Srgba::new(0.0, 0.0, 0.0, 0.0), (46.0, 22.0)
p_ref.neutral_10, } else {
accent, (158.0, 190.0)
p_ref.neutral_9, };
is_high_contrast,
p_ref.neutral_8, let button_hovered_overlay = Srgba::new(
button_hovered_hue / 255.0,
button_hovered_hue / 255.0,
button_hovered_hue / 255.0,
0.5,
);
let button_pressed_overlay = Srgba::new(
button_pressed_hye / 255.0,
button_pressed_hye / 255.0,
button_pressed_hye / 255.0,
0.5,
); );
let overlay = p_ref.neutral_10.clone();
let mut hover = overlay.clone();
hover.alpha = 0.1;
text_button.hover = hover;
let mut press = overlay.clone();
press.alpha = 0.2;
text_button.pressed = press;
text_button.focus = text_button.base.clone();
let mut theme: Theme<Srgba> = Theme { let mut theme: Theme<Srgba> = Theme {
name: palette.name().to_string(), name: palette.name().to_string(),
background: Container::new(
bg_component,
bg,
get_text(
bg_index,
&step_array,
is_dark,
&p_ref.neutral_8,
text_steps_array.as_ref(),
),
),
primary: Container::new( primary: Container::new(
primary_component, primary_component,
primary_container_bg, primary_container_bg,
@ -767,58 +766,120 @@ impl ThemeBuilder {
), ),
), ),
accent: Component::colored_component( accent: Component::colored_component(
accent.clone(), accent,
p_ref.neutral_0.to_owned(), p_ref.neutral_0,
accent.clone(), accent,
button_hovered_overlay,
button_pressed_overlay,
), ),
success: Component::colored_component( accent_button: Component::colored_button(
success, accent,
p_ref.neutral_0.to_owned(), p_ref.neutral_1,
accent.clone(), p_ref.neutral_0,
accent,
button_hovered_overlay,
button_pressed_overlay,
), ),
destructive: Component::colored_component( background: Container::new(
destructive, bg_component,
p_ref.neutral_0.to_owned(), bg,
accent.clone(), get_text(
), bg_index,
warning: Component::colored_component( &step_array,
warning, is_dark,
p_ref.neutral_0.to_owned(), &p_ref.neutral_8,
accent.clone(), text_steps_array.as_ref(),
),
), ),
button: Component::component( button: Component::component(
button_bg, bg,
p_ref.neutral_10,
accent, accent,
p_ref.neutral_9, on_bg_component,
button_hovered_overlay,
button_pressed_overlay,
is_high_contrast, is_high_contrast,
p_ref.neutral_8, p_ref.neutral_8,
), ),
accent_button: Component::colored_button( destructive: Component::colored_component(
accent.clone(), destructive,
p_ref.neutral_10.to_owned(), p_ref.neutral_0,
p_ref.neutral_0.to_owned(), accent,
accent.clone(), button_hovered_overlay,
), button_pressed_overlay,
success_button: Component::colored_button(
success,
p_ref.neutral_10.to_owned(),
p_ref.neutral_0.to_owned(),
accent.clone(),
), ),
destructive_button: Component::colored_button( destructive_button: Component::colored_button(
destructive, destructive,
p_ref.neutral_10.to_owned(), p_ref.neutral_1,
p_ref.neutral_0.to_owned(), p_ref.neutral_0,
accent.clone(), accent,
button_hovered_overlay,
button_pressed_overlay,
),
icon_button: Component::component(
Srgba::new(0.0, 0.0, 0.0, 0.0),
accent,
p_ref.neutral_8,
button_hovered_overlay,
button_pressed_overlay,
is_high_contrast,
p_ref.neutral_8,
),
link_button: {
let mut component = Component::component(
Srgba::new(0.0, 0.0, 0.0, 0.0),
accent,
accent,
Srgba::new(0.0, 0.0, 0.0, 0.0),
Srgba::new(0.0, 0.0, 0.0, 0.0),
is_high_contrast,
p_ref.neutral_8,
);
let mut on_50 = component.on.clone();
on_50.alpha = 0.5;
component.on_disabled = over(on_50, component.base);
component
},
success: Component::colored_component(
success,
p_ref.neutral_0,
accent,
button_hovered_overlay,
button_pressed_overlay,
),
success_button: Component::colored_button(
success,
p_ref.neutral_1,
p_ref.neutral_0,
accent,
button_hovered_overlay,
button_pressed_overlay,
),
text_button: Component::component(
Srgba::new(0.0, 0.0, 0.0, 0.0),
accent,
accent,
button_hovered_overlay,
button_pressed_overlay,
is_high_contrast,
p_ref.neutral_8,
),
warning: Component::colored_component(
warning,
p_ref.neutral_0,
accent,
button_hovered_overlay,
button_pressed_overlay,
), ),
warning_button: Component::colored_button( warning_button: Component::colored_button(
warning, warning,
p_ref.neutral_10.to_owned(), p_ref.neutral_10,
p_ref.neutral_0.to_owned(), p_ref.neutral_0,
accent.clone(), accent,
button_hovered_overlay,
button_pressed_overlay,
), ),
text_button,
palette: palette.inner(), palette: palette.inner(),
spacing, spacing,
corner_radii, corner_radii,