Support css variables in Color

[tume]

Provide a general summary of the feature here

Would be nice to have support for css variables in different Color* components.

🤔 Expected Behavior?

These should use css defined --primary-color as specified.

 <ColorSlider
      colorSpace="rgb"
      channel="alpha"
      defaultValue="var(--primary-color)"
    />

<ColorSwatch color="var(--primary-color)" />

😯 Current Behavior

Currently passing the "var(--primary-color)" will result Error: Invalid color value: var(--primary-color)

💁 Possible Solution

No response

🔦 Context

I have whole theme(colors) defined in css variables and current use case is that would be nice to have defaultValue set straight from css variables as don't have the color defined anywhere else.

💻 Examples

No response

🧢 Your Company/Team

ReceiptHero

🕷 Tracking Issue

No response

[reidbarber]

I think you could create a utility function:

let getCSSVariableValue = (variableName) => window.getComputedStyle(document.body).getPropertyValue(`--${variableName}`)

// ...

<ColorSlider
    colorSpace="rgb"
    channel="alpha"
    defaultValue={getCSSVariableValue("primary-color")}
  />

and use that. I'm not sure about including this as part of the API. We'd need to update parseColor from '@react-stately/color' to parse this. It doesn't really match the existing function of passing in a color value.