Skip to content

Commit fe1aac1

Browse files
aaronccasanovasarahill
aaronccasanova
and
sarahill
authored
Update private primitive colors (#10465)
### WHY are these changes introduced? Fixes #10414 ### WHAT is this pull request doing? - Removed transparency from the `gray` color scale - Added a new private primitive `blackAlpha` color scale - Updated typings to better enforce our conventions for opaque and transparent scales - Find/replaced opaque `gray` color scale references with the original computed member access syntax - Updated transparent `gray` color scale references to use the new `blackAlpha` color scale --------- Co-authored-by: Sara Hill <[email protected]>
1 parent 120e96e commit fe1aac1

File tree

4 files changed

+122
-98
lines changed

4 files changed

+122
-98
lines changed

‎.changeset/chatty-dryers-sneeze.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+
Updated private primitive `colors`

‎polaris-tokens/src/colors-experimental.ts‎

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,30 @@ type ColorScale =
1717
| '16';
1818

1919
type Color = {
20-
[Scale in ColorScale]: string;
20+
[Scale in ColorScale]: `rgba(${number}, ${number}, ${number}, 1)`;
2121
};
2222

23-
type ColorWithAlpha = {
24-
[Scale in ColorScale]: (alpha?: string) => string;
23+
type ColorAlpha = {
24+
[Scale in ColorScale]: `rgba(${number}, ${number}, ${number}, ${number})`;
2525
};
2626

27-
export const gray: ColorWithAlpha = {
28-
'1': (alpha = '1') => `rgba(255, 255, 255, ${alpha})`,
29-
'2': (alpha = '1') => `rgba(253, 253, 253, ${alpha})`,
30-
'3': (alpha = '1') => `rgba(250, 250, 250, ${alpha})`,
31-
'4': (alpha = '1') => `rgba(247, 247, 247, ${alpha})`,
32-
'5': (alpha = '1') => `rgba(243, 243, 243, ${alpha})`,
33-
'6': (alpha = '1') => `rgba(241, 241, 241, ${alpha})`,
34-
'7': (alpha = '1') => `rgba(235, 235, 235, ${alpha})`,
35-
'8': (alpha = '1') => `rgba(227, 227, 227, ${alpha})`,
36-
'9': (alpha = '1') => `rgba(212, 212, 212, ${alpha})`,
37-
'10': (alpha = '1') => `rgba(204, 204, 204, ${alpha})`,
38-
'11': (alpha = '1') => `rgba(181, 181, 181, ${alpha})`,
39-
'12': (alpha = '1') => `rgba(138, 138, 138, ${alpha})`,
40-
'13': (alpha = '1') => `rgba(97, 97, 97, ${alpha})`,
41-
'14': (alpha = '1') => `rgba(74, 74, 74, ${alpha})`,
42-
'15': (alpha = '1') => `rgba(48, 48, 48, ${alpha})`,
43-
'16': (alpha = '1') => `rgba(26, 26, 26, ${alpha})`,
27+
export const gray: Color = {
28+
1: 'rgba(255, 255, 255, 1)',
29+
2: 'rgba(253, 253, 253, 1)',
30+
3: 'rgba(250, 250, 250, 1)',
31+
4: 'rgba(247, 247, 247, 1)',
32+
5: 'rgba(243, 243, 243, 1)',
33+
6: 'rgba(241, 241, 241, 1)',
34+
7: 'rgba(235, 235, 235, 1)',
35+
8: 'rgba(227, 227, 227, 1)',
36+
9: 'rgba(212, 212, 212, 1)',
37+
10: 'rgba(204, 204, 204, 1)',
38+
11: 'rgba(181, 181, 181, 1)',
39+
12: 'rgba(138, 138, 138, 1)',
40+
13: 'rgba(97, 97, 97, 1)',
41+
14: 'rgba(74, 74, 74, 1)',
42+
15: 'rgba(48, 48, 48, 1)',
43+
16: 'rgba(26, 26, 26, 1)',
4444
};
4545

4646
export const azure: Color = {
@@ -270,3 +270,22 @@ export const yellow: Color = {
270270
'15': 'rgba(51, 46, 0, 1)',
271271
'16': 'rgba(31, 28, 0, 1)',
272272
};
273+
274+
export const blackAlpha: ColorAlpha = {
275+
1: 'rgba(0, 0, 0, 0)',
276+
2: 'rgba(0, 0, 0, 0.01)',
277+
3: 'rgba(0, 0, 0, 0.02)',
278+
4: 'rgba(0, 0, 0, 0.03)',
279+
5: 'rgba(0, 0, 0, 0.05)',
280+
6: 'rgba(0, 0, 0, 0.06)',
281+
7: 'rgba(0, 0, 0, 0.08)',
282+
8: 'rgba(0, 0, 0, 0.11)',
283+
9: 'rgba(0, 0, 0, 0.17)',
284+
10: 'rgba(0, 0, 0, 0.20)',
285+
11: 'rgba(0, 0, 0, 0.29)',
286+
12: 'rgba(0, 0, 0, 0.46)',
287+
13: 'rgba(0, 0, 0, 0.62)',
288+
14: 'rgba(0, 0, 0, 0.71)',
289+
15: 'rgba(0, 0, 0, 0.81)',
290+
16: 'rgba(0, 0, 0, 0.90)',
291+
};

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -768,61 +768,61 @@ export const color: {
768768
},
769769
// Experimental tokens
770770
'color-bg-backdrop-experimental': {
771-
value: colorsExperimental.gray[16]('0.75'),
771+
value: colorsExperimental.blackAlpha[14],
772772
description: '',
773773
},
774774
'color-bg-primary-disabled-experimental': {
775-
value: colorsExperimental.gray[9](),
775+
value: colorsExperimental.gray[9],
776776
description: '',
777777
},
778778
'color-bg-secondary-experimental': {
779-
value: colorsExperimental.gray[5](),
779+
value: colorsExperimental.gray[5],
780780
description: '',
781781
},
782782
'color-bg-input-hover-experimental': {
783-
value: colorsExperimental.gray[3](),
783+
value: colorsExperimental.gray[3],
784784
description: '',
785785
},
786786
'color-border-input-active-experimental': {
787-
value: colorsExperimental.gray[16](),
787+
value: colorsExperimental.gray[16],
788788
},
789789
'color-border-critical-strong-experimental': {
790790
value: colorsExperimental.red[14],
791791
},
792792
'color-bg-input-active-experimental': {
793-
value: colorsExperimental.gray[4](),
793+
value: colorsExperimental.gray[4],
794794
description: '',
795795
},
796796
'color-bg-transparent-experimental': {
797-
value: colorsExperimental.gray[16]('0'),
797+
value: colorsExperimental.blackAlpha[1],
798798
description: '',
799799
},
800800
'color-bg-transparent-subdued-experimental': {
801-
value: colorsExperimental.gray[16]('0.07'),
801+
value: colorsExperimental.blackAlpha[6],
802802
description: '',
803803
},
804804
'color-bg-transparent-hover-experimental': {
805-
value: colorsExperimental.gray[16]('0.05'),
805+
value: colorsExperimental.blackAlpha[5],
806806
description: '',
807807
},
808808
'color-bg-transparent-active-experimental': {
809-
value: colorsExperimental.gray[16]('0.07'),
809+
value: colorsExperimental.blackAlpha[6],
810810
description: '',
811811
},
812812
'color-bg-transparent-disabled-experimental': {
813-
value: colorsExperimental.gray[16]('0.04'),
813+
value: colorsExperimental.blackAlpha[5],
814814
description: '',
815815
},
816816
'color-bg-transparent-secondary-disabled-experimental': {
817-
value: colorsExperimental.gray[16]('0.08'),
817+
value: colorsExperimental.blackAlpha[7],
818818
description: '',
819819
},
820820
'color-bg-transparent-primary-disabled-experimental': {
821-
value: colorsExperimental.gray[16]('0.18'),
821+
value: colorsExperimental.blackAlpha[9],
822822
description: '',
823823
},
824824
'color-bg-transparent-primary-experimental': {
825-
value: colorsExperimental.gray[16]('0.60'),
825+
value: colorsExperimental.blackAlpha[13],
826826
description: '',
827827
},
828828
'color-bg-success-strong-hover-experimental': {
@@ -874,11 +874,11 @@ export const color: {
874874
description: '',
875875
},
876876
'color-avatar-background-experimental': {
877-
value: colorsExperimental.gray[11](),
877+
value: colorsExperimental.gray[11],
878878
description: '',
879879
},
880880
'color-avatar-color-experimental': {
881-
value: colorsExperimental.gray[1](),
881+
value: colorsExperimental.gray[1],
882882
description: '',
883883
},
884884
'color-avatar-style-one-background-experimental': {

‎polaris-tokens/src/themes/light-uplift.ts‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -22,37 +22,37 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
2222
},
2323
color: {
2424
// v11.0.0
25-
'color-bg-inverse': {value: colors.gray[16]()},
26-
'color-bg-inset-strong': {value: colors.gray[15]()},
27-
'color-bg-inverse-hover': {value: colors.gray[14]()},
28-
'color-bg-inverse-active': {value: colors.gray[13]()},
29-
'color-bg-strong-hover': {value: colors.gray[9]()},
30-
'color-bg-strong-active': {value: colors.gray[10]()},
31-
'color-bg-strong': {value: colors.gray[8]()},
32-
'color-bg-subdued-active': {value: colors.gray[7]()},
33-
'color-bg-disabled': {value: colors.gray[7]()},
34-
'color-bg-interactive-disabled': {value: colors.gray[7]()},
35-
'color-bg-app': {value: colors.gray[6]()},
36-
'color-bg-app-hover': {value: colors.gray[2]()},
37-
'color-bg-app-selected': {value: colors.gray[3]()},
38-
'color-bg-active': {value: colors.gray[4]()},
39-
'color-bg-subdued-hover': {value: colors.gray[6]()},
40-
'color-bg-inset': {value: colors.gray[6]()},
41-
'color-bg-hover': {value: colors.gray[3]()},
42-
'color-bg-subdued': {value: colors.gray[4]()},
43-
'color-bg-input': {value: colors.gray[1]()},
44-
'color-bg': {value: colors.gray[1]()},
45-
'color-bg-primary-active': {value: colors.gray[16]()},
46-
'color-bg-primary-hover': {value: colors.gray[16]()},
47-
'color-bg-primary': {value: colors.gray[15]()},
25+
'color-bg-inverse': {value: colors.gray[16]},
26+
'color-bg-inset-strong': {value: colors.gray[15]},
27+
'color-bg-inverse-hover': {value: colors.gray[14]},
28+
'color-bg-inverse-active': {value: colors.gray[13]},
29+
'color-bg-strong-hover': {value: colors.gray[9]},
30+
'color-bg-strong-active': {value: colors.gray[10]},
31+
'color-bg-strong': {value: colors.gray[8]},
32+
'color-bg-subdued-active': {value: colors.gray[7]},
33+
'color-bg-disabled': {value: colors.gray[7]},
34+
'color-bg-interactive-disabled': {value: colors.gray[7]},
35+
'color-bg-app': {value: colors.gray[6]},
36+
'color-bg-app-hover': {value: colors.gray[2]},
37+
'color-bg-app-selected': {value: colors.gray[3]},
38+
'color-bg-active': {value: colors.gray[4]},
39+
'color-bg-subdued-hover': {value: colors.gray[6]},
40+
'color-bg-inset': {value: colors.gray[6]},
41+
'color-bg-hover': {value: colors.gray[3]},
42+
'color-bg-subdued': {value: colors.gray[4]},
43+
'color-bg-input': {value: colors.gray[1]},
44+
'color-bg': {value: colors.gray[1]},
45+
'color-bg-primary-active': {value: colors.gray[16]},
46+
'color-bg-primary-hover': {value: colors.gray[16]},
47+
'color-bg-primary': {value: colors.gray[15]},
4848
'color-bg-success-strong': {value: colors.green[12]},
4949
'color-bg-success': {value: colors.green[3]},
50-
'color-bg-primary-subdued-active': {value: colors.gray[6]()},
50+
'color-bg-primary-subdued-active': {value: colors.gray[6]},
5151
'color-bg-success-subdued': {value: colors.green[3]},
52-
'color-bg-primary-subdued-hover': {value: colors.gray[7]()},
52+
'color-bg-primary-subdued-hover': {value: colors.gray[7]},
5353
'color-bg-success-subdued-hover': {value: colors.green[5]},
54-
'color-bg-primary-subdued': {value: colors.gray[8]()},
55-
'color-bg-primary-subdued-selected': {value: colors.gray[6]()},
54+
'color-bg-primary-subdued': {value: colors.gray[8]},
55+
'color-bg-primary-subdued-selected': {value: colors.gray[6]},
5656
'color-bg-critical-strong-active': {value: colors.red[14]},
5757
'color-bg-critical-strong-hover': {value: colors.red[13]},
5858
'color-bg-critical-strong': {value: colors.red[12]},
@@ -70,13 +70,13 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
7070
'color-bg-info': {value: colors.azure[4]},
7171
'color-bg-info-subdued': {value: colors.azure[3]},
7272
'color-bg-info-subdued-hover': {value: colors.azure[4]},
73-
'color-bg-interactive-active': {value: colors.gray[14]()},
74-
'color-bg-interactive-hover': {value: colors.gray[15]()},
75-
'color-bg-interactive': {value: colors.gray[16]()},
76-
'color-bg-interactive-subdued-active': {value: colors.gray[6]()},
77-
'color-bg-interactive-subdued-hover': {value: colors.gray[7]()},
78-
'color-bg-interactive-subdued': {value: colors.gray[8]()},
79-
'color-bg-interactive-selected': {value: colors.gray[6]()},
73+
'color-bg-interactive-active': {value: colors.gray[14]},
74+
'color-bg-interactive-hover': {value: colors.gray[15]},
75+
'color-bg-interactive': {value: colors.gray[16]},
76+
'color-bg-interactive-subdued-active': {value: colors.gray[6]},
77+
'color-bg-interactive-subdued-hover': {value: colors.gray[7]},
78+
'color-bg-interactive-subdued': {value: colors.gray[8]},
79+
'color-bg-interactive-selected': {value: colors.gray[6]},
8080
'color-bg-warning': {value: colors.orange[7]},
8181
'color-bg-magic-strong': {value: colors.purple[12]},
8282
'color-bg-magic-hover': {value: colors.purple[7]},
@@ -85,17 +85,17 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
8585
'color-bg-magic-subdued-hover': {value: colors.purple[4]},
8686
'color-bg-magic-subdued-active': {value: colors.purple[6]},
8787
'color-bg-magic-subdued': {value: colors.purple[3]},
88-
'color-border-input-hover': {value: colors.gray[13]()},
89-
'color-border-inverse': {value: colors.gray[13]()},
90-
'color-border-strong-hover': {value: colors.gray[11]()},
91-
'color-border-input': {value: colors.gray[12]()},
92-
'color-border-hover': {value: colors.gray[10]()},
93-
'color-border-strong': {value: colors.gray[10]()},
94-
'color-border': {value: colors.gray[8]()},
95-
'color-border-disabled': {value: colors.gray[7]()},
96-
'color-border-subdued': {value: colors.gray[7]()},
97-
'color-border-interactive-disabled': {value: colors.gray[7]()},
98-
'color-border-primary': {value: colors.gray[8]()},
88+
'color-border-input-hover': {value: colors.gray[13]},
89+
'color-border-inverse': {value: colors.gray[13]},
90+
'color-border-strong-hover': {value: colors.gray[11]},
91+
'color-border-input': {value: colors.gray[12]},
92+
'color-border-hover': {value: colors.gray[10]},
93+
'color-border-strong': {value: colors.gray[10]},
94+
'color-border': {value: colors.gray[8]},
95+
'color-border-disabled': {value: colors.gray[7]},
96+
'color-border-subdued': {value: colors.gray[7]},
97+
'color-border-interactive-disabled': {value: colors.gray[7]},
98+
'color-border-primary': {value: colors.gray[8]},
9999
'color-border-success': {value: colors.green[5]},
100100
'color-border-success-subdued': {value: colors.green[5]},
101101
'color-border-critical-active': {value: colors.red[11]},
@@ -113,14 +113,14 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
113113
'color-border-interactive-subdued': {value: colors.blue[13]},
114114
'color-border-magic-strong': {value: colors.purple[12]},
115115
'color-border-magic': {value: colors.purple[10]},
116-
'color-icon-hover': {value: colors.gray[15]()},
117-
'color-icon': {value: colors.gray[14]()},
118-
'color-icon-subdued': {value: colors.gray[12]()},
119-
'color-icon-disabled': {value: colors.gray[10]()},
120-
'color-icon-interactive-disabled': {value: colors.gray[10]()},
121-
'color-icon-inverse': {value: colors.gray[8]()},
122-
'color-icon-on-color': {value: colors.gray[1]()},
123-
'color-icon-primary': {value: colors.gray[16]()},
116+
'color-icon-hover': {value: colors.gray[15]},
117+
'color-icon': {value: colors.gray[14]},
118+
'color-icon-subdued': {value: colors.gray[12]},
119+
'color-icon-disabled': {value: colors.gray[10]},
120+
'color-icon-interactive-disabled': {value: colors.gray[10]},
121+
'color-icon-inverse': {value: colors.gray[8]},
122+
'color-icon-on-color': {value: colors.gray[1]},
123+
'color-icon-primary': {value: colors.gray[16]},
124124
'color-icon-success': {value: colors.green[12]},
125125
'color-icon-critical': {value: colors.red[11]},
126126
'color-icon-caution': {value: colors.yellow[11]},
@@ -131,17 +131,17 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
131131
'color-icon-interactive': {value: colors.blue[13]},
132132
'color-icon-interactive-inverse': {value: colors.blue[8]},
133133
'color-icon-magic': {value: colors.purple[13]},
134-
'color-text': {value: colors.gray[15]()},
135-
'color-text-subdued': {value: colors.gray[13]()},
136-
'color-text-disabled': {value: colors.gray[11]()},
137-
'color-text-interactive-disabled': {value: colors.gray[10]()},
138-
'color-text-inverse-subdued': {value: colors.gray[10]()},
139-
'color-text-inverse': {value: colors.gray[8]()},
140-
'color-text-on-color': {value: colors.gray[1]()},
134+
'color-text': {value: colors.gray[15]},
135+
'color-text-subdued': {value: colors.gray[13]},
136+
'color-text-disabled': {value: colors.gray[11]},
137+
'color-text-interactive-disabled': {value: colors.gray[10]},
138+
'color-text-inverse-subdued': {value: colors.gray[10]},
139+
'color-text-inverse': {value: colors.gray[8]},
140+
'color-text-on-color': {value: colors.gray[1]},
141141
'color-text-success-strong': {value: colors.green[15]},
142142
'color-text-success': {value: colors.green[15]},
143-
'color-text-primary': {value: colors.gray[14]()},
144-
'color-text-primary-hover': {value: colors.gray[14]()},
143+
'color-text-primary': {value: colors.gray[14]},
144+
'color-text-primary-hover': {value: colors.gray[14]},
145145
'color-text-critical-strong': {value: colors.red[14]},
146146
'color-text-critical-active': {value: colors.red[16]},
147147
'color-text-critical': {value: colors.red[14]},

0 commit comments

Comments
 (0)