Re: [csswg-drafts] Proposal: CSS Variable Groups (as a solution to several design systems pain points) (#9992)

I like this and I wonder if it can also solve length values?

In design systems it is really common to also have a bunch of length values for margin, padding, font-sizes,...

Design tools only offer the ability to export everything as pixels or as rem.
But CSS authors need both. Sometimes `rem` is right unit, sometimes `px` to ensure that the design scales correctly for end users who scale the content for easier reading.

So we end up writing this mess :

```css
:root {
 --space-1--px: 1px;
 --space-1--rem: 0.0625rem;
 --space-2--px: 2px;
 --space-2--rem: 0.125rem;
 --space-4--px: 4px;
 --space-4--rem: 0.25rem;
 --space-6--px: 6px;
 --space-6--rem: 0.375rem;
 --space-8--px: 8px;
 --space-8--rem: 0.5rem;
 --space-15--px: 15px;
 --space-15--rem: 0.9375rem;
 --space-16--px: 16px;
 --space-16--rem: 1rem;
 --space-18--px: 18px;
 --space-18--rem: 1.125rem;
        /* goes al the way to 96 ... */
}
```

Maybe there is something to [custom units](https://github.com/w3c/csswg-drafts/issues/7379) with are also a kind of custom prop?

-- 
GitHub Notification of comment by romainmenke
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9992#issuecomment-1962314537 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 24 February 2024 09:52:39 UTC