- From: Ryan Johnson via GitHub <sysbot+gh@w3.org>
- Date: Mon, 06 Jun 2022 20:45:59 +0000
- To: public-design-tokens-log@w3.org
Akin to https://github.com/design-tokens/community-group/issues/100#issuecomment-1037948510 and https://github.com/design-tokens/community-group/issues/100#issuecomment-1039804291, a boolean `inset` property is required to clarify whether a shadow should be internal vs external.
Figma provides two ways to define shadows (Drop Shadow and Inner Shadow):
<img width="450" alt="Screen Shot 2022-06-06 at 3 37 41 PM" src="https://user-images.githubusercontent.com/545605/172244710-44fcd35e-6e91-485a-a1de-009c718bfe4e.png">
Inner Shadow corresponds to the use of the `inset` keyword for a CSS `box-shadow` property.
The equivalent tokens for the above shadows should be as follows:
```json
{
"dropShadow": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "0px",
"blur": "2px",
"spread": "4px",
"color": "#cccccc"
}
},
"innerShadow": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "0px",
"blur": "2px",
"spread": "4px",
"color": "#cccccc",
"inner": true
}
}
}
```
## Resolution
* `dropShadow.$value.inner` should resolve to `false`, if not present
## Caveats
1. Similar to the `spread` property, the `inner` property doesn't apply for CSS `text-shadow`.
--
GitHub Notification of comment by CITguy
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/100#issuecomment-1147908111 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 6 June 2022 20:46:00 UTC