[Proposal]: Expose all CSS custom properties (variables) in types or object

[penx]

I would like to reference Radix Themes CSS variables from TypeScript (both those defined by radix colors and the additions by radix themes).

e.g.

const StatusColours = {
  done: '--green-9',
  rejected: '--red-9,
}

or

const StatusColours = {
  done: 'var(--green-9)',
  rejected: 'var(--red-9)',
}

or

const StatusColours = {
  done: 'green-9',
  rejected: 'red-9',
}

I'd like to make sure that only valid radix theme colours can be selected

This is in order to:

• provide code hinting when developing
• show warnings for mistyped variables
• guard against breaking changes in future updates
• encourage other developers to only select from this list

Either by:

1. Using TypeScript

type Status = 'done' | 'rejected';
const StatusColours: Record<Status, RadixColor>  = {
  done: : '--green-9',
  rejected: '--thing',  // errors
}

2. Using an imported object

const StatusColours  = {
  done: : RadixColours.Green9, // --green-9  or  green-9
  rejected: RadixColours.Thing, // errors
}

3. Using a typed function

const StatusColours  = {
  done: : radixColor('green-9'), // --green-9  or  green-9
  rejected: radixColor('thing'), // errors
}