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

Just want to show my  support this a million and the DS typography use case.

All of these maps are hidden plain sight in all our gazillion tokens `--style-body-small-size`

```
--style-body: {
   small: {
     size: var(--serif-size-100);
     weight: var(--serif-weight-400);
     height: var(--line-height-compact);
  }
  ...  
}

--text-styles: {
   body: var(--text-style-body);
   heading: var(--text-style-heading);
}
```

Would make all of <p class="body small"> and `<Text variant="small" />` so easy to implement in one swipe.

```
line-height: --text-style-height(--family, --size)
```

I guess functions can take care of defaults using `var(, var())` but map like acess by key is essential

```
--family: heading;
--variant: hero;
--line-height: --text-styles[var(--family)][var(--variant)].height;
``` 

I guess `--text-styles[--family][--variant]` reads better 😅 though


The ability to return maps from functions would also be some kind of magic of course. Would avoid having to create different accessors to retrieve related tokens, resolving them all at once.

```
--family: inputs;
--variant: large;
--style:  --text-style(--family, --variant);

line-height:var(--style.height)
```

Again! Kudos 💯

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


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

Received on Tuesday, 18 March 2025 17:21:57 UTC