Support Semantic Tokens in a CompositeShadow

[cgatian]

Description

Composite shadows do not support using semantic tokens.

Problem Statement/Justification

Composite shadows take numerical values, not string values which could be semantic tokens.

  offsetX: number
  offsetY: number
  blur: number
  spread: number

This makes mapping values from a W3 spec difficult to implement as you need to combine the properties into the string version.

 "drop-shadow-3": {
    "$type": "shadow",
    "$value": [
      {
        "offsetX": "{Atomic Scale.0}",
        "offsetY": "{Atomic Scale.300}",
        "blur": "{Atomic Scale.400}",
        "spread": "{Atomic Scale.100}",
        "color": "{Surface.drop-shadow}"
      }
    ]
  },

Proposed Solution or API

Allow supplying number or string values which are sematic tokens

Alternatives

Using the string version works properly. I was able to wrap my shadows in a reducer before supplying them to the panda theme.

shadows: Object.entries(getShadows()).reduce((acc, [key, entry]) => {
    acc[key] = {
      value: `${entry.value.offsetX} ${entry.value.offsetY} ${entry.value.blur} ${entry.value.spread} ${entry.value.color}`,
    };
    return acc;
  }, {}),

Additional Information

No response