Multiple defaults for CSS Custom Properties

Consider this case

class MyElement extends HTMLElement {
  constructor() {
    super().attachShadow({ mode: 'open' }).innerHTML = `
      <style>
        :host { color: var(--my-color, red); }
        @media (prefers-color-scheme: dark) {
          :host { color: var(--my-color, blue); }
        }
      </style>
    `;
  }
}

Should I get

"cssProperties": [
  {
    "name": "--my-color",
    "default": "red"
  }
]

Or

"cssProperties": [
  {
    "name": "--my-color",
    "default": "blue"
  }
]

And if I get either, that’s not really correct is it?

We should add a schema facility for declaring multiple defaults and their conditions

[bennypowers]

Something to consider: if condition or conditions is meant to be machine-readable, then the values should be strictly identical

i.e. a tool like storybook or <api-viewer> might check a css property’s contexts like so:

propertyContext.condition === '@media(prefers-color-scheme: dark)'

Or, it might perform a regexp check that allows for whichever whitespace rules that condition’s language allows.

[castastrophe]

I see these as variations or contexts. They’re still defaults for the same CSS property but they are dependent upon certain conditions. What about defining these contexts in connection to the primary definition like this:

"cssProperties": [{
    "name": "--my-color",
    "description": "Change the color of the button",
    "default": "blue",
    "contexts": [{
        "description": "Dark mode button color",
        "default": "red",
        "condition": "@media (prefers-color-scheme: dark)"
    }]
}]