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

Interesting stuff!

> ```css
> --color-green: {
>   100: oklch(95% 13% 135);
>   200: oklch(95% 15% 135);
>   /* ... */
>   900: oklch(25% 20% 135);
> }
> ```
> Then this is equivalent to creating `--color-green-100`, `--color-green-200`, etc. variables. 
>
> We may need to start with a hyphen (or two)

Did you consider following compound nesting syntax?

```css
--color-green: {
  &-100: oklch(95% 13% 135);
  &-200: oklch(95% 15% 135);
  /* ... */
  &-900: oklch(25% 20% 135);
}
```

Pros: no new pattern of an implicit separator, eliminates hyphen question. Con: more verbose, could imply that `--color-green: { my-component: /* … */ }` might mean something. IMO those pro > those cons.

With that change, the essence of this proposal would be to extend nest syntax beyond selectors to custom properties. That extension feels natural to me, and the doors it opens might be valuable if the future is heavier in custom property use.

> you can set a base value via the special `base` property (alternative names: `default`, `value`) which defines a plain value for when the property is used in a context that does not support groups, such as any of the existing non-custom properties:

`initial` would a CSS-y name choice, e.g. `--color-green: { initial: oklch(65% 50% 135); /* styles --color-green */}`

But what are the contexts which would support this magic key but not groups?

I've built from designs that used "default" as a color level, and have been glad to have that word available.

This feels to me more radical (new "magic key" pattern) and restrictive (can't use that word in a single-word nests) than it's worth to make this

```css
--color-green: {
  base: oklch(65% 50% 135); /* styles --color-green */
}
```

create `--color-green` rather than `--color-green-base`.

Removing the magic eliminates the question "how do we override just the default value?":

```css
--color-green: {
  base: oklch(65% 50% 135); /* styles --color-green-base */
}
--color-green-base: oklch(65% 50% 130);
```

would work to make core green a little yellower, with no special case needed.

Share more about the motivation?

> ```css
> :root {
>   --color-green: {};
> }
> 
> my-component {
>   --color-primary: var(--color-green);
>   background: var(--color-primary-200);
> }
> 
> /* design-system.css */
> :root {
>   --color-green-100: oklch(95% 13% 135);
>   --color-green-200: oklch(95% 15% 135);
>   /* ... */
>   --color-green-900: oklch(25% 20% 135);
> }
> ```

In what way is the result different from removing the first three lines?

```css
my-component {
  --color-primary: var(--color-green);
  background: var(--color-primary-200);
}

/* design-system.css */
:root {
  --color-green-100: oklch(95% 13% 135);
  --color-green-200: oklch(95% 15% 135);
  /* ... */
  --color-green-900: oklch(25% 20% 135);
}
```


-- 
GitHub Notification of comment by olets
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9992#issuecomment-1962320262 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 10:19:49 UTC