[new DL] Define and expose shadows
tleunen opened this issue · 2 comments
tleunen commented
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
jessebc commented
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
tleunen commented
Another one that is used quite often is a divider
shadow.
box-shadow: inset 0px -1px 0px var(--p-divider)