Re: [community-group] Shadow type feedback (#100)

Another problem that I notices is multi-layer shadows. In modern design most shadows are defined from multiple layers to get a better visual. However with the current spec it would be a very cumbersome work of defining multiple shadow layers and applying those after transformation:

```jsonc
{
  "shadows": {
    "sm": {
      "layer-01": //... shadow token,
      "layer-02": //... shadow token
    }
  }
}
```

And to apply in e.g. css:

```css
button {
  box-shadow: var(--shadows-sm-layer-01), var(--shadows-sm-layer-01);
}
```

Not only is this more work for the end-users, it also means they need to know internal details of the shadows, to be able to combine the right layers.

I would love to see an option for an `array` of value groups for shadow tokens, so that the above would change to:


```jsonc
{
  "shadows": {
    "sm": {
      "$type": "shadow",
      "$value": [
        { // layer 01
          "color": "#cccccc66",
          "offsetX": "0px",
          "offsetY": "1px",
          "blur": "0px",
          "spread": "0px"
        },
        { // layer 02
          "color": "#cccccc33",
          "offsetX": "0px",
          "offsetY": "1px",
          "blur": "3px",
          "spread": "0px"
        }
      ]
    }
  }
}
```

And to apply in e.g. css:

```css
button {
  box-shadow: var(--shadows-sm);
}
```


-- 
GitHub Notification of comment by lukasoppermann
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/100#issuecomment-1321657488 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 21 November 2022 08:16:14 UTC