search

tkashkin / Adwaita-for-Steam

A skin to make Steam look more like a native GNOME app
MIT License
1.12k stars 25 forks source link

Use rgb only css variables #189

Closed Foldex closed 5 months ago

Foldex commented 1 year ago

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);