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

Wanted to see if I could come up with a formal proposal to incorporate some of the feedback here! I really want to get multiple shadows into the spec, since it's so common in my own use cases (and others', as shown in this thread).

So, a shadow looks like this:

```
{
  offsetX: dimension
  offsetY: dimension
  blur: dimension
  color: color
  spread: dimension     // optional
  inset: boolean        // optional
}
```

Technically you can define a css drop shadow without a color, which essentially causes its color to have the value `inherit`. I think it's reasonable to require color, and the spec does so today.

Spread is no longer required. I believe it's possible to define shadows in CSS (box, drop, and text shadows included) and Flutter without spread, and in Swift and Kotlin I don't see any use for it.

As for how parsers know the difference between drop, box, and text shadows, I think the simplest first step would be to let the parser be "dumb" and not try to figure out which is which, but to put it on the user to define the token correctly for their use case, ie don't add spread and inset if you intend to use the parsed css value in a `filter: drop-shadow()` context. A parser might even allow a user to specify that they want a particular token formatted to be compatible with CSS drop-shadow or text-shadow; either way, I don't think we should try to write inference logic into the spec.

As for multiple shadows, we allow the `$value` of a shadow token to be a single shadow or an array of shadows. This is pretty forgiving to the author at the expense of an little bit of parser complexity. I don't think it'll break the bank, though.

So, the final token looks like:

```json
{
  "shadow": {
    "small": {
      "$type": "shadow",
      "$value": [
        {
          "color": "rgba(0, 0, 0, 0.12)",
          "offsetX": "0px",
          "offsetY": "1px",
          "blur": "1px",
          "spread": "1px",
          "inset": true
        },
        {
          "color": "rgba(14, 14, 17, 0.40)",
          "offsetX": "0px",
          "offsetY": "2px",
          "blur": "5px",
          "spread": "0px"
        }
      ]
    }
  }
}
```

wdyt? any objections to moving this forward to the editors for consideration?

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


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

Received on Monday, 18 December 2023 21:26:15 UTC