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

Inset can be used for dark mode shadows shadows to provide some extra contrast. 

https://codyhouse.co/nuggets/beautiful-css-shadows

In that example the shadow looks something like this:
```
inset 0 0 0.5px 1px hsla(0, 0%,  100%, 0.075),
0 0 0 1px hsla(0, 0%, 0%, 0.05),
0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
0 3.5px 6px hsla(0, 0%, 0%, 0.09);
```

applying a global inset doesn't work in this case, instead it should be at the object level in the array.

I feel like cobalt-ui's implementation is very straightforward with:
```
"$value": [
  {
    "inset": true,
    "offsetX": "0px",
    "offsetY": "0.5px",
    "blur": "0px",
    "color": "rgba(255, 255, 255, 0.1)"
  },
  {
    "inset": true,
    "offsetX": "0px",
    "offsetY": "0px",
    "blur": "0.5px",
    "color": "rgba(255, 255, 255, 0.3)"
  },
  {
    "offsetX": "0px",
    "offsetY": "0px",
    "blur": "0.5px",
    "color": "rgba(0, 0, 0, 0.5)"
  },
  {
    "offsetX": "0px",
    "offsetY": "1px",
    "blur": "3px",
    "color": "rgba(0, 0, 0, 0.4)"
  }
]
```

For consistency sake, having it always be an array makes most sense to me, though it could support both. Having both single object and array creates some added complexity for library maintainers when parsing it, but not too much imo.

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


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

Received on Tuesday, 17 October 2023 19:52:12 UTC