Proposal: CSS Variable Groups (as a solution to several design systems pain points)
The [whole proposal is here](https://lea.verou.me/docs/var-groups/), I have included a summary below. ## Pain points (summary) The main pain point is **aliasing**. Currently, design systems are specified as a long series of variables, e.g. `--color-green-100`, `--color-crimson-950` etc. Aliasing them to other names (e.g. semantic names such as `--color-primary` or simply shorter/simpler names) is currently author hostile, as it requires manually [aliasing every single one](https://www.radix-ui.com/themes/docs/theme/color#aliasing-colors), i.e. hundreds of declarations. Not only is this painful to do for the whole page, it makes it very hard to theme areas on the page with a different color, or pass design tokens to components. Additionally, tints and shades for each color are generated manually, even if some of them could be inferred via interpolation. Theoretically that can already be done via a series of `color-mix()` values, but it is very tedious and repetitive, especially if you want to tweak the endpoints by adding more manual values where the interpolated ones don't work well. ## Other ideas explored The following are useful in their own right, but I don’t think solve the pain points equally well. - [Custom functions](https://lea.verou.me/docs/var-groups/#custom-functions) - [CSS functions for tints and shades](https://lea.verou.me/docs/var-groups/#tint-shade) - [Dedicated syntax for design tokens with standardized names for the low level common things](https://le
Posted by LeaVerou on Feb 24, 2024, 2:20 AM
Tags
Related issues
- To be fair, Inform7 can't succeed, generally, because there is no market for the kind of games that you create with Inform7.
- > The notion that somehow LR reliability is misunderstood by Consumer Reports, JD Power, Car & Driver, Automobile etc.
- Custom trigger IDs are not displayed in the new 2026.10 trigger selector
- I hate that too, but I think it’s more the ux than the concept of a default.
- > The biggest problem with UX developers is they know better than you AND force you into their paradigm.
- "Focus follows mouse" is what I use to keep the file manager from popping up when click-dragging files.
Raise real-world problems, find people facing the same issue, and discuss solutions.2,000 issues0 comments
ux (Other)
To be fair, Inform7 can't succeed, generally, because there is no market for the kind of games that you create with Inform7.
New> The notion that somehow LR reliability is misunderstood by Consumer Reports, JD Power, Car & Driver, Automobile etc.
Custom trigger IDs are not displayed in the new 2026.10 trigger selector
I hate that too, but I think it’s more the ux than the concept of a default.
> The biggest problem with UX developers is they know better than you AND force you into their paradigm.
"Focus follows mouse" is what I use to keep the file manager from popping up when click-dragging files.
The biggest problem with this is if the target URL doesn't load but also doesn't quickly error out, like e.g.
Google wants to build up a private web here.
Proposal: CSS Variable Groups (as a solution to several design systems pain points)
The [whole proposal is here](https://lea.verou.me/docs/var-groups/), I have included a summary below. ## Pain points (summary) The main pain point is **aliasing**. Currently, design systems are specified as a long series of variables, e.g. `--color-green-100`, `--color-crimson-950` etc. Aliasing them to other names (e.g. semantic names such as `--color-primary` or simply shorter/simpler names) is currently author hostile, as it requires manually [aliasing every single one](https://www.radix-ui.com/themes/docs/theme/color#aliasing-colors), i.e. hundreds of declarations. Not only is this painful to do for the whole page, it makes it very hard to theme areas on the page with a different color, or pass design tokens to components. Additionally, tints and shades for each color are generated manually, even if some of them could be inferred via interpolation. Theoretically that can already be done via a series of `color-mix()` values, but it is very tedious and repetitive, especially if you want to tweak the endpoints by adding more manual values where the interpolated ones don't work well. ## Other ideas explored The following are useful in their own right, but I don’t think solve the pain points equally well. - [Custom functions](https://lea.verou.me/docs/var-groups/#custom-functions) - [CSS functions for tints and shades](https://lea.verou.me/docs/var-groups/#tint-shade) - [Dedicated syntax for design tokens with standardized names for the low level common things](https://le
Comments (0)
No comments yet. Start the discussion.