Restricting colour tokens per property

[loicplaire]

Hi, thanks for Panda CSS, it has been great to work with so far!

I have colour tokens that are roughly structured like this:

{
  "grey-50": { "value": "#ffffff", "type": "color" },
  "grey-500": { "value": "#dfe0e6", "type": "color" },
  "purple-900": { "value": "#3d1cba", "type": "color" },

  "surface-color": {
    "value": "{grey-50}",
    "type": "color",
  },
  "surface-color-accent": {
    "value": "{purple-900}",
    "type": "color",
  },

  "border-color": {
    "value": "{grey-500}",
    "type": "color",
  },
  "border-color-accent": {
    "value": "{purple-900}",
    "type": "color",
  },

  "text-color": {
    "value": "#1e163c",
    "type": "color",
  },
  "text-color-danger": {
    "value": "{red-900}",
    "type": "color",
  }
}

Ideally I would like:

• background CSS properties to only accept surface-* tokens
• border properties to only accept border-* tokens
• text colour to only accept text-* tokens
• etc.

For example:

// valid 
css({
  backgroundColor: 'surface-color',
  borderColor: 'border-color',
  color: 'text-color',
})

// not allowed 
css({
  backgroundColor: 'border-color',     // would like this to fail at type level
})

css({
  color: 'surface-color', // would like this to fail at type level
})

Is this kind of per property restriction currently possible in Panda, based on the token name or group? Or are all colour tokens always treated as part of a single colours space?

Thanks a lot for your help!

[segunadebayo]

This is an interesting idea that might be worth implementing.