Update shadow tokens to new values on next #10738
Assignees
Comments
lgriffee
added a commit
that referenced
this issue
Sep 28, 2023
### WHY are these changes introduced? Fixes #10738 ### WHAT is this pull request doing? Updates shadow tokens to the following corrected values: | New Token | Value | | ------------------------- | ------------------------ | | `--p-shadow-0` | `none` | | `--p-shadow-100` | `0 1px 0 0 rgba(26, 26, 26, 0.07)` | | `--p-shadow-200` | `0 3px 1px -1px rgba(26, 26, 26, 0.07)` | | `--p-shadow-300` | `0 4px 6px -2px rgba(26, 26, 26, 0.20)` | | `--p-shadow-400` | `0 8px 16px -4px rgba(26, 26, 26, 0.22)` | | `--p-shadow-500` | `0 12px 20px -8px rgba(26, 26, 26, 0.24)` | | `--p-shadow-600` | `0 20px 20px -8px rgba(26, 26, 26, 0.28)` | | `--p-shadow-bevel-100` | `0 1px 0 0 rgba(208, 208, 208, 0.40) inset, 1px 0 0 0 #E3E3E3 inset, -1px 0 0 0 #E3E3E3 inset, 0 -1px 0 0 #D4D4D4 inset` | | `--p-shadow-inset-100` | `0 1px 2px 0 rgba(26, 26, 26, 0.15) inset, 0 1px 1px 0px rgba(26, 26, 26, 0.15) inset` | | `--p-shadow-inset-200` | `0 2px 1px 0 rgba(26, 26, 26, 0.20) inset, 1px 0 1px 0 rgba(26, 26, 26, 0.12) inset, -1px 0 1px 0 rgba(26, 26, 26, 0.12) inset` | | `--p-shadow-button` | `0 1px 0 0 #E3E3E3 inset, 1px 0 0 0 #E3E3E3 inset, -1px 0 0 0 #E3E3E3 inset, 0 -1px 0 0 #B5B5B5 inset` | | `--p-shadow-button-hover` | `0 1px 0 0 #EBEBEB inset, -1px 0 0 0 #EBEBEB inset, 1px 0 0 0 #EBEBEB inset, 0 -1px 0 0 #CCC inset` | | `--p-shadow-button-inset` | `0 2px 1px 0 rgba(26, 26, 26, 0.20) inset, 1px 0 1px 0 rgba(26, 26, 26, 0.12) inset, -1px 0 1px 0 rgba(26, 26, 26, 0.12) inset` | | `--p-shadow-button-primary` | `0 1px 0 0 rgba(255, 255, 255, 0.24) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1px 0 0 #000 inset, 0 -1px 0 1px #1A1A1A` | | `--p-shadow-button-primary-inset` | `0 3px 0 0 #000 inset` | | `--p-shadow-button-primary-hover` | `0 1px 0 0 rgba(255, 255, 255, 0.24) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0px rgba(255, 255, 255, 0.20) inset, 0 -1px 0 0 #000 inset, 0 -1px 0 1px #1A1A1A` | | `--p-shadow-button-primary-critical` | `0 1px 0 0 rgba(255, 255, 255, 0.48) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-critical-hover` | `0 1px 0 0 rgba(255, 255, 255, 0.48) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-critical-inset` | `0 2px 0 0 rgba(0, 0, 0, 0.60) inset, 1px 0 1px 0 rgba(0, 0, 0, 0.20) inset, -1px 0 1px 0 rgba(0, 0, 0, 0.20) inset` | | `--p-shadow-button-primary-success` | `0 1px 0 0 rgba(255, 255, 255, 0.48) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-success-hover` | `0 1px 0 0 rgba(255, 255, 255, 0.48) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-success-inset` | `0 2px 0 0 rgba(0, 0, 0, 0.60) inset, 1px 0 1px 0 rgba(0, 0, 0, 0.20) inset, -1px 0 1px 0 rgba(0, 0, 0, 0.20) inset` | | `--p-shadow-border-inset` | `0 0 0 1px rgba(0, 0, 0, 0.08) inset` | </details>
AnnaCheba
pushed a commit
to AnnaCheba/polaris
that referenced
this issue
Apr 22, 2024
### WHY are these changes introduced? Fixes Shopify#10738 ### WHAT is this pull request doing? Updates shadow tokens to the following corrected values: | New Token | Value | | ------------------------- | ------------------------ | | `--p-shadow-0` | `none` | | `--p-shadow-100` | `0 1px 0 0 rgba(26, 26, 26, 0.07)` | | `--p-shadow-200` | `0 3px 1px -1px rgba(26, 26, 26, 0.07)` | | `--p-shadow-300` | `0 4px 6px -2px rgba(26, 26, 26, 0.20)` | | `--p-shadow-400` | `0 8px 16px -4px rgba(26, 26, 26, 0.22)` | | `--p-shadow-500` | `0 12px 20px -8px rgba(26, 26, 26, 0.24)` | | `--p-shadow-600` | `0 20px 20px -8px rgba(26, 26, 26, 0.28)` | | `--p-shadow-bevel-100` | `0 1px 0 0 rgba(208, 208, 208, 0.40) inset, 1px 0 0 0 #E3E3E3 inset, -1px 0 0 0 #E3E3E3 inset, 0 -1px 0 0 #D4D4D4 inset` | | `--p-shadow-inset-100` | `0 1px 2px 0 rgba(26, 26, 26, 0.15) inset, 0 1px 1px 0px rgba(26, 26, 26, 0.15) inset` | | `--p-shadow-inset-200` | `0 2px 1px 0 rgba(26, 26, 26, 0.20) inset, 1px 0 1px 0 rgba(26, 26, 26, 0.12) inset, -1px 0 1px 0 rgba(26, 26, 26, 0.12) inset` | | `--p-shadow-button` | `0 1px 0 0 #E3E3E3 inset, 1px 0 0 0 #E3E3E3 inset, -1px 0 0 0 #E3E3E3 inset, 0 -1px 0 0 #B5B5B5 inset` | | `--p-shadow-button-hover` | `0 1px 0 0 #EBEBEB inset, -1px 0 0 0 #EBEBEB inset, 1px 0 0 0 #EBEBEB inset, 0 -1px 0 0 #CCC inset` | | `--p-shadow-button-inset` | `0 2px 1px 0 rgba(26, 26, 26, 0.20) inset, 1px 0 1px 0 rgba(26, 26, 26, 0.12) inset, -1px 0 1px 0 rgba(26, 26, 26, 0.12) inset` | | `--p-shadow-button-primary` | `0 1px 0 0 rgba(255, 255, 255, 0.24) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1px 0 0 #000 inset, 0 -1px 0 1px #1A1A1A` | | `--p-shadow-button-primary-inset` | `0 3px 0 0 #000 inset` | | `--p-shadow-button-primary-hover` | `0 1px 0 0 rgba(255, 255, 255, 0.24) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0px rgba(255, 255, 255, 0.20) inset, 0 -1px 0 0 #000 inset, 0 -1px 0 1px #1A1A1A` | | `--p-shadow-button-primary-critical` | `0 1px 0 0 rgba(255, 255, 255, 0.48) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-critical-hover` | `0 1px 0 0 rgba(255, 255, 255, 0.48) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-critical-inset` | `0 2px 0 0 rgba(0, 0, 0, 0.60) inset, 1px 0 1px 0 rgba(0, 0, 0, 0.20) inset, -1px 0 1px 0 rgba(0, 0, 0, 0.20) inset` | | `--p-shadow-button-primary-success` | `0 1px 0 0 rgba(255, 255, 255, 0.48) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-success-hover` | `0 1px 0 0 rgba(255, 255, 255, 0.48) inset, 1px 0 0 0 rgba(255, 255, 255, 0.20) inset, -1px 0 0 0 rgba(255, 255, 255, 0.20) inset, 0 -1.5px 0 0 rgba(0, 0, 0, 0.25) inset` | | `--p-shadow-button-primary-success-inset` | `0 2px 0 0 rgba(0, 0, 0, 0.60) inset, 1px 0 1px 0 rgba(0, 0, 0, 0.20) inset, -1px 0 1px 0 rgba(0, 0, 0, 0.20) inset` | | `--p-shadow-border-inset` | `0 0 0 1px rgba(0, 0, 0, 0.08) inset` | </details>
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: