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

So, you want custom longhand properties with systematic names based on their shorthand. I think you should make clearer that whatever syntax this ends up using could likely also be backported to normal properties. 

Could it be possible to drop `base` and put the default before the braces?

~~~~ css
:root {
--color-green: 
  oklch(65% 50% 135deg) {
    &-100: oklch(95% 13% 135deg);
    /* … */
    &-900: oklch(25% 20% 135deg);
  };
  font: serif {
    &-size: 2em;
    line-height: 3em;
  };
}
~~~~

> Design tokens and design systems are about a lot more than color, but I’ll focus on color here, as that is the worst of it and also easier to explain.

Still, it makes me wonder whether this could be solved even better in a way specific to colors, because this reminds me a bit of CNS (with custom base values). Alas, everything I can think up allows arbitrary variants, e.g. 0% through 100% for some parameter, which goes against the philosophy of (atomic) design systems which try to increase maintainability by limiting the implementation choices for authors. 



-- 
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9992#issuecomment-1962419868 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 16:45:24 UTC