Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use rgb only css variables #189

Closed
Foldex opened this issue Jul 29, 2023 · 0 comments · Fixed by #228
Closed

Use rgb only css variables #189

Foldex opened this issue Jul 29, 2023 · 0 comments · Fixed by #228
Labels
enhancement New feature or request

Comments

@Foldex
Copy link
Contributor

Foldex commented Jul 29, 2023

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
2 participants