Skip to content

Commit

Permalink
Update shadow tokens to new values (#10760)
Browse files Browse the repository at this point in the history 
### 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>
  • Loading branch information
@lgriffee
lgriffee committed Sep 28, 2023
1 parent 7fa0c1e commit 2a46724
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 31 deletions.
5 changes: 5 additions & 0 deletions .changeset/fair-rocks-occur.md
View file
@@ -0,0 +1,5 @@
---
'@shopify/polaris-tokens': major
---

Updated `shadow` token values
65 changes: 34 additions & 31 deletions polaris-tokens/src/themes/base/shadow.ts
View file
@@ -1,5 +1,4 @@
import type {Experimental} from '../../types';
import {createVarName} from '../../utilities';
import type {MetaTokenProperties} from '../types';

type ShadowAliasExperimental = Experimental<
Expand Down Expand Up @@ -69,76 +68,84 @@ export const shadow: {
value: 'none',
},
'shadow-100': {
value: '0px 0px 2px rgba(31, 33, 36, 0.24)',
value: '0 1px 0 0 rgba(26, 26, 26, 0.07)',
},
'shadow-200': {
value: '0px 1px 1px rgba(31, 33, 36, 0.1)',
value: '0 3px 1px -1px rgba(26, 26, 26, 0.07)',
},
'shadow-300': {
value:
'0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px rgba(31, 33, 36, 0.05)',
value: '0 4px 6px -2px rgba(26, 26, 26, 0.20)',
},
'shadow-400': {
value:
'0px 4px 12px rgba(31, 33, 36, 0.2), 0px 2px 6px rgba(31, 33, 36, 0.05)',
value: '0 8px 16px -4px rgba(26, 26, 26, 0.22)',
},
'shadow-500': {
value:
'0px 4px 18px -2px rgba(31, 33, 36, 0.08), 0px 12px 18px -2px rgba(31, 33, 36, 0.15)',
value: '0 12px 20px -8px rgba(26, 26, 26, 0.24)',
},
'shadow-600': {
value:
'0px 32px 32px rgba(31, 33, 36, 0.15), 0px 32px 56px -2px rgba(31, 33, 36, 0.16)',
value: '0 20px 20px -8px rgba(26, 26, 26, 0.28)',
},
'shadow-bevel-100': {
value:
'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',
'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',
},
'shadow-inset-100': {
value: 'inset 0px 0px 3px rgba(31, 33, 36, 0.56)',
value:
'0 1px 2px 0 rgba(26, 26, 26, 0.15) inset, 0 1px 1px 0 rgba(26, 26, 26, 0.15) inset',
},
'shadow-inset-200': {
value: 'inset 0px 2px 4px rgba(31, 33, 36, 0.32)',
value:
'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',
},
'shadow-button': {
value:
'inset 0px -1px 0px #B5B5B5, inset -1px 0px 0px #E3E3E3, inset 1px 0px 0px #E3E3E3, inset 0px 1px 0px #E3E3E3',
'0 1px 0 0 #E3E3E3 inset, 1px 0 0 0 #E3E3E3 inset, -1px 0 0 0 #E3E3E3 inset, 0 -1px 0 0 #B5B5B5 inset',
},
'shadow-button-hover': {
value: `inset 0px -1px 0px #CCCCCC, inset 1px 0px 0px #EBEBEB, inset -1px 0px 0px #EBEBEB, inset 0px 1px 0px #EBEBEB`,
value:
'0 1px 0 0 #EBEBEB inset, -1px 0 0 0 #EBEBEB inset, 1px 0 0 0 #EBEBEB inset, 0 -1px 0 0 #CCC inset',
},
'shadow-button-inset': {
value: createVar('shadow-inset-200'),
value:
'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',
},
'shadow-button-primary': {
value: `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`,
value:
'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',
},
'shadow-button-primary-hover': {
value: `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`,
value:
'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',
},
'shadow-button-primary-inset': {
value: `0px 3px 0px 0px #000 inset`,
value: '0 3px 0 0 #000 inset',
},
'shadow-button-primary-critical': {
value: `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`,
value:
'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',
},
'shadow-button-primary-critical-hover': {
value: `-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`,
value:
'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',
},
'shadow-button-primary-critical-inset': {
value: `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`,
value:
'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',
},
'shadow-button-primary-success': {
value: `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`,
value:
'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',
},
'shadow-button-primary-success-hover': {
value: `-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`,
value:
'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',
},
'shadow-button-primary-success-inset': {
value: `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`,
value:
'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',
},
'shadow-border-inset': {
value: `0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset`,
value: '0 0 0 1px rgba(0, 0, 0, 0.08) inset',
},
'shadow-inset-lg': {
value: 'inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)',
Expand Down Expand Up @@ -223,7 +230,3 @@ export const shadow: {
value: '0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset',
},
};

function createVar(shadowTokenName: ShadowTokenName) {
return `var(${createVarName(shadowTokenName)})`;
}

0 comments on commit 2a46724

Please sign in to comment.