Re: [csswg-drafts] css expression inheritance (#2749)

The design tokens spec, which is being used by tools such as Figma, require that references are preserved:

> Tools SHOULD preserve references and therefore only resolve them whenever the actual value needs to be retrieved

https://tr.designtokens.org/format/#aliases-references

This means that, in Figma, if you change the value of a variable in a layer, all other variables that point to this also update.

As above, this isn't the case with CSS variables. In the below example, repointing primary-light does not update button-bg-color:

```css
button {
  background-color: var(--button-bg-color);
}

:root {
  --primary-light: #0000FF;
  --primary-dark: #6666FF;
  --button-bg-color: var(--primary-light);
}

[data-mode="dark"] {
  --button-bg-color: var(--primary-dark);
}

[data-color="red"] {
  --primary-light: #FF0000;
  --primary-dark: #FF6666; 
}
```

```html
<body data-mode="dark">
  <div data-color="red">
    <button>Button</button>
  </div>
</body>
```

Unless I am missing something in the [inherit() function spec](https://github.com/w3c/csswg-drafts/issues/2864), it seems that in order to accurately implement design tokens references using CSS variables, the ability to preserve references (e.g. with expression inheritance) will be needed?

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


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

Received on Tuesday, 26 November 2024 12:59:43 UTC