Skip to content

Discrepancy in shadow-100 token value #13998

@daviareias

Description

@daviareias

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

  1. Find the value of shadow-100 in docs here: https://polaris-react.shopify.com/tokens/shadow
  2. Compare it with the actual value by using browser inspector:
Image
  1. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugSomething is broken and not working as intended in the system.untriaged

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions