Adwaita-for-Steam icon indicating copy to clipboard operation
Adwaita-for-Steam copied to clipboard

Use rgb only css variables

Open Foldex opened this issue 1 year ago • 0 comments

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

Foldex avatar Jul 29 '23 04:07 Foldex