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

fix(theme): gtk3 css doesn't allow hex colors with alpha

Browse source
This commit is contained in:
Ashley Wulber 2024-05-24 20:40:18 -04:00 • committed by Jeremy Soller
parent 428dafe37c
commit 8b0bb6a677
2 changed files with 79 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

142
cosmic-theme/src/output/gtk4_output.rs
View file

@ -6,7 +6,7 @@ use std::{
num::NonZeroUsize, num::NonZeroUsize,
}; };
use super::{to_hex, OutputError}; use super::{to_rgba, OutputError};
impl Theme { impl Theme {
#[must_use] #[must_use]
@ -24,50 +24,50 @@ impl Theme {
.. ..
} = self; } = self;
let window_bg = to_hex(background.base); let window_bg = to_rgba(background.base);
let window_fg = to_hex(background.on); let window_fg = to_rgba(background.on);
let view_bg = to_hex(primary.base); let view_bg = to_rgba(primary.base);
let view_fg = to_hex(primary.on); let view_fg = to_rgba(primary.on);
let headerbar_bg = to_hex(background.base); let headerbar_bg = to_rgba(background.base);
let headerbar_fg = to_hex(background.on); let headerbar_fg = to_rgba(background.on);
let headerbar_border_color = to_hex(background.divider); let headerbar_border_color = to_rgba(background.divider);
let sidebar_bg = to_hex(primary.base); let sidebar_bg = to_rgba(primary.base);
let sidebar_fg = to_hex(primary.on); let sidebar_fg = to_rgba(primary.on);
let sidebar_shade = to_hex(if self.is_dark { let sidebar_shade = to_rgba(if self.is_dark {
Rgba::new(0.0, 0.0, 0.0, 0.08) Rgba::new(0.0, 0.0, 0.0, 0.08)
} else { } else {
Rgba::new(0.0, 0.0, 0.0, 0.32) Rgba::new(0.0, 0.0, 0.0, 0.32)
}); });
let backdrop_overlay = Srgba::new(1.0, 1.0, 1.0, if self.is_dark { 0.08 } else { 0.32 }); let backdrop_overlay = Srgba::new(1.0, 1.0, 1.0, if self.is_dark { 0.08 } else { 0.32 });
let sidebar_backdrop = to_hex(over(backdrop_overlay, primary.base)); let sidebar_backdrop = to_rgba(over(backdrop_overlay, primary.base));
let secondary_sidebar_bg = to_hex(secondary.base); let secondary_sidebar_bg = to_rgba(secondary.base);
let secondary_sidebar_fg = to_hex(secondary.on); let secondary_sidebar_fg = to_rgba(secondary.on);
let secondary_sidebar_shade = to_hex(if self.is_dark { let secondary_sidebar_shade = to_rgba(if self.is_dark {
Rgba::new(0.0, 0.0, 0.0, 0.08) Rgba::new(0.0, 0.0, 0.0, 0.08)
} else { } else {
Rgba::new(0.0, 0.0, 0.0, 0.32) Rgba::new(0.0, 0.0, 0.0, 0.32)
}); });
let secondary_sidebar_backdrop = to_hex(over(backdrop_overlay, secondary.base)); let secondary_sidebar_backdrop = to_rgba(over(backdrop_overlay, secondary.base));
let headerbar_backdrop = to_hex(background.base); let headerbar_backdrop = to_rgba(background.base);
let card_bg = to_hex(background.component.base); let card_bg = to_rgba(background.component.base);
let card_fg = to_hex(background.component.on); let card_fg = to_rgba(background.component.on);
let thumbnail_bg = to_hex(background.component.base); let thumbnail_bg = to_rgba(background.component.base);
let thumbnail_fg = to_hex(background.component.on); let thumbnail_fg = to_rgba(background.component.on);
let dialog_bg = to_hex(primary.base); let dialog_bg = to_rgba(primary.base);
let dialog_fg = to_hex(primary.on); let dialog_fg = to_rgba(primary.on);
let popover_bg = to_hex(background.component.base); let popover_bg = to_rgba(background.component.base);
let popover_fg = to_hex(background.component.on); let popover_fg = to_rgba(background.component.on);
let shade = to_hex(if self.is_dark { let shade = to_rgba(if self.is_dark {
Rgba::new(0.0, 0.0, 0.0, 0.32) Rgba::new(0.0, 0.0, 0.0, 0.32)
} else { } else {
Rgba::new(0.0, 0.0, 0.0, 0.08) Rgba::new(0.0, 0.0, 0.0, 0.08)
@ -75,44 +75,44 @@ impl Theme {
let mut inverted_bg_divider = background.base; let mut inverted_bg_divider = background.base;
inverted_bg_divider.alpha = 0.5; inverted_bg_divider.alpha = 0.5;
let scrollbar_outline = to_hex(inverted_bg_divider); let scrollbar_outline = to_rgba(inverted_bg_divider);
let mut css = format! {r#" let mut css = format! {r#"
@define-color window_bg_color #{window_bg}; @define-color window_bg_color {window_bg};
@define-color window_fg_color #{window_fg}; @define-color window_fg_color {window_fg};
@define-color view_bg_color #{view_bg}; @define-color view_bg_color {view_bg};
@define-color view_fg_color #{view_fg}; @define-color view_fg_color {view_fg};
@define-color headerbar_bg_color #{headerbar_bg}; @define-color headerbar_bg_color {headerbar_bg};
@define-color headerbar_fg_color #{headerbar_fg}; @define-color headerbar_fg_color {headerbar_fg};
@define-color headerbar_border_color_color #{headerbar_border_color}; @define-color headerbar_border_color_color {headerbar_border_color};
@define-color headerbar_backdrop_color #{headerbar_backdrop}; @define-color headerbar_backdrop_color {headerbar_backdrop};
@define-color sidebar_bg_color #{sidebar_bg}; @define-color sidebar_bg_color {sidebar_bg};
@define-color sidebar_fg_color #{sidebar_fg}; @define-color sidebar_fg_color {sidebar_fg};
@define-color sidebar_shade_color #{sidebar_shade}; @define-color sidebar_shade_color {sidebar_shade};
@define-color sidebar_backdrop_color #{sidebar_backdrop}; @define-color sidebar_backdrop_color {sidebar_backdrop};
@define-color secondary_sidebar_bg_color #{secondary_sidebar_bg}; @define-color secondary_sidebar_bg_color {secondary_sidebar_bg};
@define-color secondary_sidebar_fg_color #{secondary_sidebar_fg}; @define-color secondary_sidebar_fg_color {secondary_sidebar_fg};
@define-color secondary_sidebar_shade_color #{secondary_sidebar_shade}; @define-color secondary_sidebar_shade_color {secondary_sidebar_shade};
@define-color secondary_sidebar_backdrop_color #{secondary_sidebar_backdrop}; @define-color secondary_sidebar_backdrop_color {secondary_sidebar_backdrop};
@define-color card_bg_color #{card_bg}; @define-color card_bg_color {card_bg};
@define-color card_fg_color #{card_fg}; @define-color card_fg_color {card_fg};
@define-color thumbnail_bg_color #{thumbnail_bg}; @define-color thumbnail_bg_color {thumbnail_bg};
@define-color thumbnail_fg_color #{thumbnail_fg}; @define-color thumbnail_fg_color {thumbnail_fg};
@define-color dialog_bg_color #{dialog_bg}; @define-color dialog_bg_color {dialog_bg};
@define-color dialog_fg_color #{dialog_fg}; @define-color dialog_fg_color {dialog_fg};
@define-color popover_bg_color #{popover_bg}; @define-color popover_bg_color {popover_bg};
@define-color popover_fg_color #{popover_fg}; @define-color popover_fg_color {popover_fg};
@define-color shade_color #{shade}; @define-color shade_color {shade};
@define-color scrollbar_outline_color #{scrollbar_outline}; @define-color scrollbar_outline_color {scrollbar_outline};
"#}; "#};
css.push_str(&component_gtk4_css("accent", accent)); css.push_str(&component_gtk4_css("accent", accent));
@ -130,10 +130,10 @@ impl Theme {
css.push_str(&color_css("purple", palette.ext_purple)); css.push_str(&color_css("purple", palette.ext_purple));
let neutral_steps = steps(palette.neutral_5, NonZeroUsize::new(10).unwrap()); let neutral_steps = steps(palette.neutral_5, NonZeroUsize::new(10).unwrap());
for (i, c) in neutral_steps[..5].iter().enumerate() { for (i, c) in neutral_steps[..5].iter().enumerate() {
css.push_str(&format!("@define-color light_{i} #{};\n", to_hex(*c))); css.push_str(&format!("@define-color light_{i} {};\n", to_rgba(*c)));
} }
for (i, c) in neutral_steps[5..].iter().enumerate() { for (i, c) in neutral_steps[5..].iter().enumerate() {
css.push_str(&format!("@define-color dark_{i} #{};\n", to_hex(*c))); css.push_str(&format!("@define-color dark_{i} {};\n", to_rgba(*c)));
} }
css css
} }
@ -232,13 +232,13 @@ impl Theme {
fn component_gtk4_css(prefix: &str, c: &Component) -> String { fn component_gtk4_css(prefix: &str, c: &Component) -> String {
format!( format!(
r#" r#"
@define-color {prefix}_color #{}; @define-color {prefix}_color {};
@define-color {prefix}_bg_color #{}; @define-color {prefix}_bg_color {};
@define-color {prefix}_fg_color #{}; @define-color {prefix}_fg_color {};
"#, "#,
to_hex(c.base), to_rgba(c.base),
to_hex(c.base), to_rgba(c.base),
to_hex(c.on), to_rgba(c.on),
) )
} }
@ -248,17 +248,17 @@ fn color_css(prefix: &str, c_3: Srgba) -> String {
let c_1: Srgba = oklch.lighten(0.2).into_color(); let c_1: Srgba = oklch.lighten(0.2).into_color();
let c_4: Srgba = oklch.darken(0.1).into_color(); let c_4: Srgba = oklch.darken(0.1).into_color();
let c_5: Srgba = oklch.darken(0.2).into_color(); let c_5: Srgba = oklch.darken(0.2).into_color();
let c_1 = to_hex(c_1); let c_1 = to_rgba(c_1);
let c_2 = to_hex(c_2); let c_2 = to_rgba(c_2);
let c_3 = to_hex(c_3); let c_3 = to_rgba(c_3);
let c_4 = to_hex(c_4); let c_4 = to_rgba(c_4);
let c_5 = to_hex(c_5); let c_5 = to_rgba(c_5);
format! {r#" format! {r#"
@define-color {prefix}_1 #{c_1}; @define-color {prefix}_1 {c_1};
@define-color {prefix}_2 #{c_2}; @define-color {prefix}_2 {c_2};
@define-color {prefix}_3 #{c_3}; @define-color {prefix}_3 {c_3};
@define-color {prefix}_4 #{c_4}; @define-color {prefix}_4 {c_4};
@define-color {prefix}_5 #{c_5}; @define-color {prefix}_5 {c_5};
"#} "#}
} }

8
cosmic-theme/src/output/mod.rs
View file

@ -47,3 +47,11 @@ pub fn to_hex(c: Srgba) -> String {
c_u8.red, c_u8.green, c_u8.blue, c_u8.alpha c_u8.red, c_u8.green, c_u8.blue, c_u8.alpha
) )
} }
pub fn to_rgba(c: Srgba) -> String {
let c_u8: Rgba<palette::encoding::Srgb, u8> = c.into_format();
format!(
"rgba({}, {}, {}, {:1.2})",
c_u8.red, c_u8.green, c_u8.blue, c.alpha
)
}