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

Yeah, this would be incredibly useful. Thanks @LeaVerou for such a well thought out proposal!

### get

I think the `get()` [idea](https://github.com/w3c/csswg-drafts/issues/9992#issuecomment-1962321439) should just be incorporated into the proposal directly as it would provide a lot of compositional power.

### functions

Regarding some of the [short-comings of using functions](https://lea.verou.me/docs/var-groups/#custom-functions) for this,  some (but not all) could be addressed by just allowing [functions/mixins to be passed/consumed as variables](https://github.com/w3c/csswg-drafts/issues/10006).

### base

@LeaVerou [said](https://github.com/w3c/csswg-drafts/issues/9992#issuecomment-1962741329) this was important because:

> 1. To ensure that groups produce a value when used in regular properties

Why is that good? There's no guarantee that a variable value will work for any property, the type has to be suitable.
> 2. Communication: In many design systems it's unclear what the "base" value is.

Most systems have stuff like `--primary-color` so I assume you mean there's `red-100...900` but not `red-base`. That need seems design system specific. In [material](https://m3.material.io/), for example, the defaults are really de-emphasized and the colors are all [generated](https://m3.material.io/theme-builder#/custom) from a few input values.

### the `-` delimiter

I think it would be nice to make this explicit since it's only really a common convention. @layer uses `.` so if there is a canonical delimiter would that be more consistent?

### @property and inheritance

What happens if there's an `@property` defined for a group sub-property that does not inherit and the group does inherit? Does the sub-property not get included in the inherited group?

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


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

Received on Tuesday, 27 February 2024 17:43:49 UTC