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

Great ideas here! Just reposting here what I already posted on X too.

Some people use BEM like notation for color variants, so e.g. `--color-primary--400` (notice the double `-`). It would be nice to be able to define a variable like this to have full control over the variable variants notation:
```css
:root {
  --color-primary*: {
    base: #00f;
    --100: #66f;
  }
}
```

The wildcard at the end of the variable name could tell the parser: this is a variable group. To reuse a variable group, one can use:
```css
.card {
  --card-color-primary*: var(--color-primary*);
}
```

This makes it very clear that we're reusing the entire variable group, not just the base value. Now if you were to leave out the asterix, you would just use the base value only:
```css
.card {
  --card-color-primary*: var(--color-primary); /* no asterix at the end */
}
```

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


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

Received on Monday, 26 February 2024 08:25:25 UTC