-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
Summary
The shadow-100
token value in @shopify/polaris-tokens
differs from the actual style being used in Shopify dashboard.
Expected behavior
When inspecting the Shopify dashboard, the actual shadow-100
value observed is:
0rem .3125rem .3125rem -.15625rem rgba(0, 0, 0, .03), 0rem .1875rem .1875rem -.09375rem rgba(0, 0, 0, .02), 0rem .125rem .125rem -.0625rem rgba(0, 0, 0, .02), 0rem .0625rem .0625rem -.03125rem rgba(0, 0, 0, .03), 0rem .03125rem .03125rem 0rem rgba(0, 0, 0, .04), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .06)
This suggests the token value might be out of sync with the current design system implementation in the dashboard.
Actual behavior
The shadow-100
token value in @shopify/polaris-tokens
is currently defined as:
0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07)
Steps to reproduce
- Find the value of
shadow-100
in docs here: https://polaris-react.shopify.com/tokens/shadow - Compare it with the actual value by using browser inspector:

- You can also just see the difference visually
Are you using React components?
None
Polaris version number
Latest, @shopify/polaris-tokens 9.42
Browser
Firefox, Safari, Brave
Device
Desktop