Reuse theme properties

[crswll]

I'm trying to use a CSS config and I'd like to reuse specific colors for groups of properties. In JS this would be pretty trivial:

const foregroundColors = {
  primary: 'blue',
  danger: 'red',
  success: 'green',
  warning: 'yellow',
  subtle: 'lightgray',
}

const backgroundColors = {
  primary: 'lightblue',
  danger: 'lightred',
  success: 'lightgreen',
  warning: 'lightyellow',
}

const borderColors = {
  primary: 'darkblue',
  danger: 'darkred',
  success: 'darkgreen',
  warning: 'goldenrod',
}

const theme = {
  textColor: foregroundColors,
  textDecorationColor: foregroundColors,
  caretColor: foregroundColors,

  borderColors,
  outlineColor: borderColors,
  ringColor: borderColor,
  divideColor: borderColor,

  backgroundColors,
  ringOffsetColor: backgroundColors,
}

However, in CSS, this gets really tedious and prone to little typos that are hard to notice.

@theme {
  --color-*: initial;
  --text-color-primary: ...;
  --text-color-danger: ...;
  --text-color-success: ...;
  --text-color-warning: ...;
  --text-color-subtle: ...;
  --text-decoration-color-primary: ...;
  --text-decoration-color-danger: ...;
  --text-decoration-color-success: ...;
  --text-decoration-color-warning: ...;
  --text-decoration-color-subtle: ...;
  --caret-color-primary: ...;
  --caret-color-danger: ...;
  --caret-color-success: ...;
  --caret-color-warning: ...;
  --caret-color-subtle: ...;

  --border-color-primary: ...;
  ...
}

Is there a way we can reuse groups of properties? Something along the lines of:

@theme {
  --color-*: initial;

  --text-color-primary: blue;
  --text-color-danger: red;
  --text-color-success: green;
  --text-color-warning: yellow;
  --text-color-subtle: lightgray;
  --text-decoration-color-*: --text-color-*;
  --caret-color-*: --text-color-*;

  --border-color-primary: darkblue;  
  --border-color-danger: red;
  --border-color-success: green;  
  --border-color-warning: yellow;
  --outline-color-*: --border-color-*;
  --ring-color-*: --border-color-*;
  --divide-color-*: --border-color-*;
  --stroke-*: --border-color-*;

  --background-color-primary: lightblue;
  --background-color-danger: lightred;
  --background-color-success: lightgreen;
  --background-color-warning: goldenrod;
  --ring-offset-color-*: --background-color-*;
  --fill-*: --background-color-*;
}

[crswll]

You answered absolutely nothing by just repeating me.

[rozsazoltan]

Some AI-generated content - they commented under quite a few discussions. Reporting is such a hassle that I just give up.

Someone just give them that badge already:
https://github.com/orgs/community/discussions/169636#discussioncomment-14087870

[rozsazoltan]

This has crossed my mind a few times as well - reusing namespaces globally with -* is an absolutely great idea.