Update semantic shadow token layer
#10512
Assignees
Comments
lgriffee
added a commit
that referenced
this issue
Sep 21, 2023
### WHY are these changes introduced? Fixes #10511 Fixes #10512 ### WHAT is this pull request doing? Adds the following values to new public primitive and semantic `shadow` token scales: | New Token | Value | | ------------------------- | ------------------------ | | `--p-shadow-0` | `none` | | `--p-shadow-100` | `0px 0px 2px rgba(31, 33, 36, 0.24)` | | `--p-shadow-200` | `0px 1px 1px rgba(31, 33, 36, 0.1)` | | `--p-shadow-300` | `0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px rgba(31, 33, 36, 0.05)` | | `--p-shadow-400` | `0px 4px 12px rgba(31, 33, 36, 0.2), 0px 2px 6px rgba(31, 33, 36, 0.05)` | | `--p-shadow-500` | `0px 4px 18px -2px rgba(31, 33, 36, 0.08), 0px 12px 18px -2px rgba(31, 33, 36, 0.15)` | | `--p-shadow-600` | `0px 32px 32px rgba(31, 33, 36, 0.15), 0px 32px 56px -2px rgba(31, 33, 36, 0.16)` | | `--p-shadow-bevel-100` | `1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, 0px 1px 0px 0px rgba(204, 204, 204, 0.5) inset` | | `--p-shadow-inset-100` | `inset 0px 0px 3px rgba(31, 33, 36, 0.56)` | | `--p-shadow-inset-200` | `inset 0px 2px 4px rgba(31, 33, 36, 0.32)` | | `--p-shadow-button` | `inset 0px -1px 0px #B5B5B5, inset -1px 0px 0px #E3E3E3, inset 1px 0px 0px #E3E3E3, inset 0px 1px 0px #E3E3E3` | | `--p-shadow-button-hover` | `inset 0px -1px 0px #CCCCCC, inset 1px 0px 0px #EBEBEB, inset -1px 0px 0px #EBEBEB, inset 0px 1px 0px #EBEBEB` | | `--p-shadow-button-primary` | `0px 2px 0px 0px rgba(255, 255, 255, 0.2) inset, 2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 1px #000 inset, 0px 1px 0px 0px #000 inset` | | `--p-shadow-button-primary-inset` | `0px 3px 0px 0px #000 inset` | | `--p-shadow-button-primary-hover` | `0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.16) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px -1.5px 0px 0px rgba(255, 255, 255, 0.07) inset, 0px 0px 0px 0.5px #1A1A1A` | | `--p-shadow-button-primary-critical` | `0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-critical-hover` | `-1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.25), 0px -1.5px 0px 0px rgba(255, 255, 255, 0.07) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset` | | `--p-shadow-button-primary-critical-inset` | `0px 2px 0px 0px rgba(0, 0, 0, 0.60) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset, -1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset` | | `--p-shadow-button-primary-success` | `0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-success-hover` | `-1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.25), 0px -1.5px 0px 0px rgba(255, 255, 255, 0.07) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset` | | `--p-shadow-button-primary-success-inset` | `0px 2px 0px 0px rgba(0, 0, 0, 0.60) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset, -1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset` | | `--p-shadow-border-inset` | `0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset` |
AnnaCheba
pushed a commit
to AnnaCheba/polaris
that referenced
this issue
Apr 22, 2024
### WHY are these changes introduced? Fixes Shopify#10511 Fixes Shopify#10512 ### WHAT is this pull request doing? Adds the following values to new public primitive and semantic `shadow` token scales: | New Token | Value | | ------------------------- | ------------------------ | | `--p-shadow-0` | `none` | | `--p-shadow-100` | `0px 0px 2px rgba(31, 33, 36, 0.24)` | | `--p-shadow-200` | `0px 1px 1px rgba(31, 33, 36, 0.1)` | | `--p-shadow-300` | `0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px rgba(31, 33, 36, 0.05)` | | `--p-shadow-400` | `0px 4px 12px rgba(31, 33, 36, 0.2), 0px 2px 6px rgba(31, 33, 36, 0.05)` | | `--p-shadow-500` | `0px 4px 18px -2px rgba(31, 33, 36, 0.08), 0px 12px 18px -2px rgba(31, 33, 36, 0.15)` | | `--p-shadow-600` | `0px 32px 32px rgba(31, 33, 36, 0.15), 0px 32px 56px -2px rgba(31, 33, 36, 0.16)` | | `--p-shadow-bevel-100` | `1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, 0px 1px 0px 0px rgba(204, 204, 204, 0.5) inset` | | `--p-shadow-inset-100` | `inset 0px 0px 3px rgba(31, 33, 36, 0.56)` | | `--p-shadow-inset-200` | `inset 0px 2px 4px rgba(31, 33, 36, 0.32)` | | `--p-shadow-button` | `inset 0px -1px 0px #B5B5B5, inset -1px 0px 0px #E3E3E3, inset 1px 0px 0px #E3E3E3, inset 0px 1px 0px #E3E3E3` | | `--p-shadow-button-hover` | `inset 0px -1px 0px #CCCCCC, inset 1px 0px 0px #EBEBEB, inset -1px 0px 0px #EBEBEB, inset 0px 1px 0px #EBEBEB` | | `--p-shadow-button-primary` | `0px 2px 0px 0px rgba(255, 255, 255, 0.2) inset, 2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 1px #000 inset, 0px 1px 0px 0px #000 inset` | | `--p-shadow-button-primary-inset` | `0px 3px 0px 0px #000 inset` | | `--p-shadow-button-primary-hover` | `0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.16) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px -1.5px 0px 0px rgba(255, 255, 255, 0.07) inset, 0px 0px 0px 0.5px #1A1A1A` | | `--p-shadow-button-primary-critical` | `0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-critical-hover` | `-1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.25), 0px -1.5px 0px 0px rgba(255, 255, 255, 0.07) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset` | | `--p-shadow-button-primary-critical-inset` | `0px 2px 0px 0px rgba(0, 0, 0, 0.60) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset, -1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset` | | `--p-shadow-button-primary-success` | `0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-success-hover` | `-1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.25), 0px -1.5px 0px 0px rgba(255, 255, 255, 0.07) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset` | | `--p-shadow-button-primary-success-inset` | `0px 2px 0px 0px rgba(0, 0, 0, 0.60) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset, -1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset` | | `--p-shadow-border-inset` | `0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: