Adwaita-for-Steam
Adwaita-for-Steam copied to clipboard
Use rgb only css variables
Currently themes and some vars use hexidecimal format ala:
--var: #000000;
--var_with_alpha: #000000FF;
Issue being we often make use of the same base color at a different alpha value:
--accent: #78aeed;
--accent_bg: #3584e4;
--accent_fg: var(--fg);
--accent_disabled: rgba(120, 174, 237, 0.5);
--accent_hover_bg: rgba(120, 174, 237, 0.07);
--accent_active_bg: rgba(120, 174, 237, 0.16);
Meaning themes and custom css overrides have to individually change all these variables.
If we use a variable that only holds the rgb value, we can reuse a single color across multiple rgb/rgba functions, something that hex doesn't support. Meaning we only have to change/override a single variable.
--accent_rgb: 120, 174, 237;
--accent: rgb(var(--accent_rgb));
--accent_disabled: rgba(var(--accent_rgb), 0.5);
--accent_hover_bg: rgba(var(--accent_rgb), 0.07);
--accent_active_bg: rgba(var(--accent_rgb), 0.16);
--focusring: rgba(var(--accent_rgb), 0.5);
--profile_online: rgba(var(--accent_rgb), 0.5);