Skip to content

Commit 2a46724

Browse files
lgriffeelgriffee
authored
Update shadow tokens to new values (#10760)
### 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>
1 parent 7fa0c1e commit 2a46724

File tree

2 files changed

+39
-31
lines changed

2 files changed

+39
-31
lines changed

‎.changeset/fair-rocks-occur.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris-tokens': major
3+
---
4+
5+
Updated `shadow` token values

‎polaris-tokens/src/themes/base/shadow.ts‎

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type {Experimental} from '../../types';
2-
import {createVarName} from '../../utilities';
32
import type {MetaTokenProperties} from '../types';
43

54
type ShadowAliasExperimental = Experimental<
@@ -69,76 +68,84 @@ export const shadow: {
6968
value: 'none',
7069
},
7170
'shadow-100': {
72-
value: '0px 0px 2px rgba(31, 33, 36, 0.24)',
71+
value: '0 1px 0 0 rgba(26, 26, 26, 0.07)',
7372
},
7473
'shadow-200': {
75-
value: '0px 1px 1px rgba(31, 33, 36, 0.1)',
74+
value: '0 3px 1px -1px rgba(26, 26, 26, 0.07)',
7675
},
7776
'shadow-300': {
78-
value:
79-
'0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px rgba(31, 33, 36, 0.05)',
77+
value: '0 4px 6px -2px rgba(26, 26, 26, 0.20)',
8078
},
8179
'shadow-400': {
82-
value:
83-
'0px 4px 12px rgba(31, 33, 36, 0.2), 0px 2px 6px rgba(31, 33, 36, 0.05)',
80+
value: '0 8px 16px -4px rgba(26, 26, 26, 0.22)',
8481
},
8582
'shadow-500': {
86-
value:
87-
'0px 4px 18px -2px rgba(31, 33, 36, 0.08), 0px 12px 18px -2px rgba(31, 33, 36, 0.15)',
83+
value: '0 12px 20px -8px rgba(26, 26, 26, 0.24)',
8884
},
8985
'shadow-600': {
90-
value:
91-
'0px 32px 32px rgba(31, 33, 36, 0.15), 0px 32px 56px -2px rgba(31, 33, 36, 0.16)',
86+
value: '0 20px 20px -8px rgba(26, 26, 26, 0.28)',
9287
},
9388
'shadow-bevel-100': {
9489
value:
95-
'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',
90+
'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',
9691
},
9792
'shadow-inset-100': {
98-
value: 'inset 0px 0px 3px rgba(31, 33, 36, 0.56)',
93+
value:
94+
'0 1px 2px 0 rgba(26, 26, 26, 0.15) inset, 0 1px 1px 0 rgba(26, 26, 26, 0.15) inset',
9995
},
10096
'shadow-inset-200': {
101-
value: 'inset 0px 2px 4px rgba(31, 33, 36, 0.32)',
97+
value:
98+
'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',
10299
},
103100
'shadow-button': {
104101
value:
105-
'inset 0px -1px 0px #B5B5B5, inset -1px 0px 0px #E3E3E3, inset 1px 0px 0px #E3E3E3, inset 0px 1px 0px #E3E3E3',
102+
'0 1px 0 0 #E3E3E3 inset, 1px 0 0 0 #E3E3E3 inset, -1px 0 0 0 #E3E3E3 inset, 0 -1px 0 0 #B5B5B5 inset',
106103
},
107104
'shadow-button-hover': {
108-
value: `inset 0px -1px 0px #CCCCCC, inset 1px 0px 0px #EBEBEB, inset -1px 0px 0px #EBEBEB, inset 0px 1px 0px #EBEBEB`,
105+
value:
106+
'0 1px 0 0 #EBEBEB inset, -1px 0 0 0 #EBEBEB inset, 1px 0 0 0 #EBEBEB inset, 0 -1px 0 0 #CCC inset',
109107
},
110108
'shadow-button-inset': {
111-
value: createVar('shadow-inset-200'),
109+
value:
110+
'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',
112111
},
113112
'shadow-button-primary': {
114-
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`,
113+
value:
114+
'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',
115115
},
116116
'shadow-button-primary-hover': {
117-
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`,
117+
value:
118+
'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',
118119
},
119120
'shadow-button-primary-inset': {
120-
value: `0px 3px 0px 0px #000 inset`,
121+
value: '0 3px 0 0 #000 inset',
121122
},
122123
'shadow-button-primary-critical': {
123-
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`,
124+
value:
125+
'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',
124126
},
125127
'shadow-button-primary-critical-hover': {
126-
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`,
128+
value:
129+
'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',
127130
},
128131
'shadow-button-primary-critical-inset': {
129-
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`,
132+
value:
133+
'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',
130134
},
131135
'shadow-button-primary-success': {
132-
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`,
136+
value:
137+
'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',
133138
},
134139
'shadow-button-primary-success-hover': {
135-
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`,
140+
value:
141+
'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',
136142
},
137143
'shadow-button-primary-success-inset': {
138-
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`,
144+
value:
145+
'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',
139146
},
140147
'shadow-border-inset': {
141-
value: `0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset`,
148+
value: '0 0 0 1px rgba(0, 0, 0, 0.08) inset',
142149
},
143150
'shadow-inset-lg': {
144151
value: 'inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)',
@@ -223,7 +230,3 @@ export const shadow: {
223230
value: '0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset',
224231
},
225232
};
226-
227-
function createVar(shadowTokenName: ShadowTokenName) {
228-
return `var(${createVarName(shadowTokenName)})`;
229-
}

0 commit comments

Comments
 (0)