Skip to content

Commit d4e6bd4

Browse files
lgriffeelgriffee
authored
Add public primitive and semantic shadow token scale (#10600)
### 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` |
1 parent fb6bb74 commit d4e6bd4

File tree

2 files changed

+110
-1
lines changed

2 files changed

+110
-1
lines changed

‎.changeset/light-cherries-compare.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris-tokens': minor
3+
---
4+
5+
Added public primitive and semantic `shadow` token scales

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

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

45
type ShadowAliasExperimental = Experimental<
@@ -18,7 +19,26 @@ type ShadowAliasExperimental = Experimental<
1819
| 'border-inset'
1920
>;
2021

22+
export type ShadowScale = '0' | '100' | '200' | '300' | '400' | '500' | '600';
23+
24+
export type ShadowBevelScale = '100';
25+
26+
export type ShadowInsetScale = '100' | '200';
27+
2128
export type ShadowAlias =
29+
| 'button'
30+
| 'button-hover'
31+
| 'button-inset'
32+
| 'button-primary'
33+
| 'button-primary-hover'
34+
| 'button-primary-inset'
35+
| 'button-primary-critical'
36+
| 'button-primary-critical-hover'
37+
| 'button-primary-critical-inset'
38+
| 'button-primary-success'
39+
| 'button-primary-success-hover'
40+
| 'button-primary-success-inset'
41+
| 'border-inset'
2242
| 'inset-lg'
2343
| 'inset-md'
2444
| 'inset-sm'
@@ -31,7 +51,12 @@ export type ShadowAlias =
3151
| '2xl'
3252
| ShadowAliasExperimental;
3353

34-
export type ShadowTokenName = `shadow-${ShadowAlias}`;
54+
export type ShadowAliasOrScale = ShadowAlias | ShadowScale;
55+
56+
export type ShadowTokenName =
57+
| `shadow-${ShadowAliasOrScale}`
58+
| `shadow-bevel-${ShadowBevelScale}`
59+
| `shadow-inset-${ShadowInsetScale}`;
3560

3661
export type ShadowTokenGroup = {
3762
[TokenName in ShadowTokenName]: string;
@@ -40,6 +65,81 @@ export type ShadowTokenGroup = {
4065
export const shadow: {
4166
[TokenName in ShadowTokenName]: MetaTokenProperties;
4267
} = {
68+
'shadow-0': {
69+
value: 'none',
70+
},
71+
'shadow-100': {
72+
value: '0px 0px 2px rgba(31, 33, 36, 0.24)',
73+
},
74+
'shadow-200': {
75+
value: '0px 1px 1px rgba(31, 33, 36, 0.1)',
76+
},
77+
'shadow-300': {
78+
value:
79+
'0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px rgba(31, 33, 36, 0.05)',
80+
},
81+
'shadow-400': {
82+
value:
83+
'0px 4px 12px rgba(31, 33, 36, 0.2), 0px 2px 6px rgba(31, 33, 36, 0.05)',
84+
},
85+
'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)',
88+
},
89+
'shadow-600': {
90+
value:
91+
'0px 32px 32px rgba(31, 33, 36, 0.15), 0px 32px 56px -2px rgba(31, 33, 36, 0.16)',
92+
},
93+
'shadow-bevel-100': {
94+
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',
96+
},
97+
'shadow-inset-100': {
98+
value: 'inset 0px 0px 3px rgba(31, 33, 36, 0.56)',
99+
},
100+
'shadow-inset-200': {
101+
value: 'inset 0px 2px 4px rgba(31, 33, 36, 0.32)',
102+
},
103+
'shadow-button': {
104+
value:
105+
'inset 0px -1px 0px #B5B5B5, inset -1px 0px 0px #E3E3E3, inset 1px 0px 0px #E3E3E3, inset 0px 1px 0px #E3E3E3',
106+
},
107+
'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`,
109+
},
110+
'shadow-button-inset': {
111+
value: createVar('shadow-inset-200'),
112+
},
113+
'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`,
115+
},
116+
'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`,
118+
},
119+
'shadow-button-primary-inset': {
120+
value: `0px 3px 0px 0px #000 inset`,
121+
},
122+
'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+
},
125+
'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`,
127+
},
128+
'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`,
130+
},
131+
'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`,
133+
},
134+
'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`,
136+
},
137+
'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`,
139+
},
140+
'shadow-border-inset': {
141+
value: `0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset`,
142+
},
43143
'shadow-inset-lg': {
44144
value: 'inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)',
45145
},
@@ -127,3 +227,7 @@ export const shadow: {
127227
value: '0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset',
128228
},
129229
};
230+
231+
function createVar(shadowTokenName: ShadowTokenName) {
232+
return `var(${createVarName(shadowTokenName)})`;
233+
}

0 commit comments

Comments
 (0)