Shopify/polaris-tokens

[new DL] Define and expose shadows

tleunen opened this issue · 2 comments

Designers have access to different levels/depths of shadows in Figma, but these shadows are not defined or exposed for developers and consumers of Polaris to be used.

Depth shadows can be found here on figma: https://www.figma.com/file/4dAAt5iFPSaxUKiYVKrkYj/DL%E2%80%93Polaris-(Web)%3A-Components?node-id=1%3A2

Depth 1: 0px 2px 1px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(66, 71, 76, 0.45);
Depth 2: 0px 4px 12px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.33);
Depth 3: 0px 6px 15px rgba(33, 43, 54, 0.12), 0px 0px 1px rgba(33, 43, 54, 0.45);
Depth 4: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 26px 80px rgba(0, 0, 0, 0.2);

This other issue could also be related to this one #78

I've updated the Figma doc to include a new level for buttons and have tweaked the rest of the depth scale so it follows a exponential curve.

https://www.figma.com/file/O3sxnpfbMTuV2e4Yb3HOsh/Tokens-Shadows-Light-Mode-WIP?node-id=244%3A737

Another one that is used quite often is a divider shadow.

box-shadow: inset 0px -1px 0px var(--p-divider)