chore(cosmic-theme): adjustments for button theming
This commit is contained in:
Michael Aaron Murphy
Michael Murphy
parent
1e3c44865a
commit
55095abfce
2 changed files with 174 additions and 118 deletions
|
|
@ -119,34 +119,25 @@ where
|
|||
}
|
||||
|
||||
/// 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 {
|
||||
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;
|
||||
|
||||
pub fn colored_component(base: C, neutral: C, accent: C, hovered: C, pressed: C) -> Self {
|
||||
let base: Srgba = base.into();
|
||||
let mut base_50 = base.clone();
|
||||
base_50.alpha *= 0.5;
|
||||
|
||||
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;
|
||||
|
||||
Component {
|
||||
base: base.clone().into(),
|
||||
hover: over(neutral_10, base).into(),
|
||||
pressed: over(neutral_20, base).into(),
|
||||
selected: over(neutral_10, base).into(),
|
||||
hover: over(hovered.clone(), base).into(),
|
||||
pressed: over(pressed, base).into(),
|
||||
selected: over(hovered, base).into(),
|
||||
selected_text: accent.clone(),
|
||||
divider: on_20.into(),
|
||||
on: neutral.into(),
|
||||
disabled: base_50.into(),
|
||||
on_disabled: on_50.into(),
|
||||
divider: on_20,
|
||||
on: neutral,
|
||||
disabled: over(base_50, base).into(),
|
||||
on_disabled: over(on_50, base).into(),
|
||||
focus: accent,
|
||||
border: base.into(),
|
||||
disabled_border: base_50.into(),
|
||||
|
|
@ -154,30 +145,34 @@ where
|
|||
}
|
||||
|
||||
/// helper for producing a button component
|
||||
pub fn colored_button(base: C, overlay: C, on_button: C, accent: C) -> Self {
|
||||
let mut component = Component::colored_component(base, overlay, accent);
|
||||
pub fn colored_button(
|
||||
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();
|
||||
|
||||
let mut on_disabled = on_button.into();
|
||||
on_disabled.alpha = 0.5;
|
||||
component.on_disabled = on_disabled.into();
|
||||
|
||||
component
|
||||
}
|
||||
|
||||
/// helper for producing a component color theme
|
||||
pub fn component(
|
||||
base: C,
|
||||
component_state_overlay: C,
|
||||
accent: C,
|
||||
on_component: C,
|
||||
hovered: C,
|
||||
pressed: C,
|
||||
is_high_contrast: bool,
|
||||
border: C,
|
||||
) -> 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 mut base_50 = base.clone();
|
||||
base_50.alpha *= 0.5;
|
||||
|
|
@ -194,9 +189,9 @@ where
|
|||
|
||||
Component {
|
||||
base: base.clone().into(),
|
||||
hover: over(component_state_overlay_10, base).into(),
|
||||
pressed: over(component_state_overlay_20, base).into(),
|
||||
selected: over(component_state_overlay_10, base).into(),
|
||||
hover: over(hovered.clone(), base).into(),
|
||||
pressed: over(pressed, base).into(),
|
||||
selected: over(hovered, base).into(),
|
||||
selected_text: accent.clone(),
|
||||
focus: accent.clone(),
|
||||
divider: if is_high_contrast {
|
||||
|
|
@ -205,8 +200,8 @@ where
|
|||
on_20.into()
|
||||
},
|
||||
on: on_component.clone(),
|
||||
disabled: base_50.into(),
|
||||
on_disabled: on_50.into(),
|
||||
disabled: over(base_50, base).into(),
|
||||
on_disabled: over(on_50, base).into(),
|
||||
border: border.into(),
|
||||
disabled_border: disabled_border.into(),
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
use crate::{
|
||||
steps::*, Component, Container, CornerRadii, CosmicPalette, CosmicPaletteInner, Spacing,
|
||||
DARK_PALETTE, LIGHT_PALETTE, NAME,
|
||||
composite::over, steps::*, Component, Container, CornerRadii, CosmicPalette,
|
||||
CosmicPaletteInner, Spacing, DARK_PALETTE, LIGHT_PALETTE, NAME,
|
||||
};
|
||||
use cosmic_config::{Config, ConfigGet, ConfigSet, CosmicConfigEntry};
|
||||
use palette::{IntoColor, Srgb, Srgba};
|
||||
|
|
@ -46,6 +46,10 @@ pub struct Theme<C> {
|
|||
pub destructive_button: Component<C>,
|
||||
/// warning button element colors
|
||||
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
|
||||
pub text_button: Component<C>,
|
||||
/// button component styling
|
||||
|
|
@ -629,9 +633,10 @@ impl ThemeBuilder {
|
|||
} else {
|
||||
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 primary_container_bg = if let Some(primary_container_bg_color) = primary_container_bg {
|
||||
primary_container_bg_color
|
||||
} else {
|
||||
|
|
@ -652,11 +657,19 @@ impl ThemeBuilder {
|
|||
&p_ref.neutral_8,
|
||||
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(
|
||||
bg_component,
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
accent,
|
||||
on_bg_component,
|
||||
component_hovered_overlay,
|
||||
component_pressed_overlay,
|
||||
is_high_contrast,
|
||||
p_ref.neutral_8,
|
||||
);
|
||||
|
|
@ -673,9 +686,10 @@ impl ThemeBuilder {
|
|||
);
|
||||
let primary_component = Component::component(
|
||||
primary_component,
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
accent,
|
||||
on_primary_component,
|
||||
component_hovered_overlay,
|
||||
component_pressed_overlay,
|
||||
is_high_contrast,
|
||||
p_ref.neutral_8,
|
||||
);
|
||||
|
|
@ -687,63 +701,48 @@ impl ThemeBuilder {
|
|||
color_index(secondary_component, step_array.len()),
|
||||
&step_array,
|
||||
is_dark,
|
||||
&p_ref.neutral_10,
|
||||
&p_ref.neutral_8,
|
||||
text_steps_array.as_ref(),
|
||||
);
|
||||
let secondary_component = Component::component(
|
||||
secondary_component,
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
accent,
|
||||
on_secondary_component,
|
||||
component_hovered_overlay,
|
||||
component_pressed_overlay,
|
||||
is_high_contrast,
|
||||
p_ref.neutral_8,
|
||||
);
|
||||
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;
|
||||
button_disabled_bg.alpha *= 0.5;
|
||||
let button_border = p_ref.neutral_8.clone();
|
||||
let mut button_disabled_border = button_border;
|
||||
button_disabled_border.alpha *= 0.5;
|
||||
// Standard button background is neutral 7 with 25% opacity
|
||||
let button_bg = {
|
||||
let mut color = neutral_7.clone();
|
||||
color.alpha = 0.25;
|
||||
color
|
||||
};
|
||||
|
||||
let mut text_button = Component::component(
|
||||
Srgba::new(0.0, 0.0, 0.0, 0.0),
|
||||
p_ref.neutral_10,
|
||||
accent,
|
||||
p_ref.neutral_9,
|
||||
is_high_contrast,
|
||||
p_ref.neutral_8,
|
||||
let (button_hovered_hue, button_pressed_hye) = if is_dark {
|
||||
(46.0, 22.0)
|
||||
} else {
|
||||
(158.0, 190.0)
|
||||
};
|
||||
|
||||
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 {
|
||||
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_component,
|
||||
primary_container_bg,
|
||||
|
|
@ -767,58 +766,120 @@ impl ThemeBuilder {
|
|||
),
|
||||
),
|
||||
accent: Component::colored_component(
|
||||
accent.clone(),
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
accent,
|
||||
p_ref.neutral_0,
|
||||
accent,
|
||||
button_hovered_overlay,
|
||||
button_pressed_overlay,
|
||||
),
|
||||
success: Component::colored_component(
|
||||
success,
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
accent_button: Component::colored_button(
|
||||
accent,
|
||||
p_ref.neutral_1,
|
||||
p_ref.neutral_0,
|
||||
accent,
|
||||
button_hovered_overlay,
|
||||
button_pressed_overlay,
|
||||
),
|
||||
destructive: Component::colored_component(
|
||||
destructive,
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
),
|
||||
warning: Component::colored_component(
|
||||
warning,
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
background: Container::new(
|
||||
bg_component,
|
||||
bg,
|
||||
get_text(
|
||||
bg_index,
|
||||
&step_array,
|
||||
is_dark,
|
||||
&p_ref.neutral_8,
|
||||
text_steps_array.as_ref(),
|
||||
),
|
||||
),
|
||||
button: Component::component(
|
||||
button_bg,
|
||||
p_ref.neutral_10,
|
||||
bg,
|
||||
accent,
|
||||
p_ref.neutral_9,
|
||||
on_bg_component,
|
||||
button_hovered_overlay,
|
||||
button_pressed_overlay,
|
||||
is_high_contrast,
|
||||
p_ref.neutral_8,
|
||||
),
|
||||
accent_button: Component::colored_button(
|
||||
accent.clone(),
|
||||
p_ref.neutral_10.to_owned(),
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
),
|
||||
success_button: Component::colored_button(
|
||||
success,
|
||||
p_ref.neutral_10.to_owned(),
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
destructive: Component::colored_component(
|
||||
destructive,
|
||||
p_ref.neutral_0,
|
||||
accent,
|
||||
button_hovered_overlay,
|
||||
button_pressed_overlay,
|
||||
),
|
||||
destructive_button: Component::colored_button(
|
||||
destructive,
|
||||
p_ref.neutral_10.to_owned(),
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
p_ref.neutral_1,
|
||||
p_ref.neutral_0,
|
||||
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,
|
||||
p_ref.neutral_10.to_owned(),
|
||||
p_ref.neutral_0.to_owned(),
|
||||
accent.clone(),
|
||||
p_ref.neutral_10,
|
||||
p_ref.neutral_0,
|
||||
accent,
|
||||
button_hovered_overlay,
|
||||
button_pressed_overlay,
|
||||
),
|
||||
text_button,
|
||||
palette: palette.inner(),
|
||||
spacing,
|
||||
corner_radii,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue