Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Commit 120e96e

Browse files
lgriffeeaaronccasanova
lgriffee
and
aaronccasanova
authored
Update public primitive base and light-uplift theme scales (#10485)
### WHY are these changes introduced? In order to support the opt out se23 feature flag with our pre v12 migrations we need to refactor how our new public primitive tokens are being referenced in `base` and `light-uplift` themes. ### WHAT is this pull request doing? - Maps our new tokens to their values in the `light-uplift` theme. <details> <summary>✨ New <code>border-radius</code> maps</summary> | New Token | Value | | ------------------------- | ------------------------ | | `--p-border-radius-0` | `size[0]` | | `--p-border-radius-050` | `size['050']` | | `--p-border-radius-100` | `size[100]` | | `--p-border-radius-150` | `size[150]` | | `--p-border-radius-200` | `size[200]` | | `--p-border-radius-300` | `size[300]` | | `--p-border-radius-400` | `size[400]` | | `--p-border-radius-500` | `size[500]` | | `--p-border-radius-750` | `size[750]` | </details> <details> <summary>✨ New <code>border-width</code> maps</summary> | New Token | Value | | ------------------------- | ------------------------ | | `--p-border-width-0165` | `size[0165]` | | `--p-border-width-025` | `size[025]` | | `--p-border-width-050` | `size['050']` | | `--p-border-width-100` | `size[100]` | </details> <details> <summary>✨ New <code>space</code> maps</summary> | New Token | Value | | ------------------------- | ------------------------ | | `--p-space-050` | `size['050']` | | `--p-space-100` | `size[100]` | | `--p-space-150` | `size[150]` | | `--p-space-200` | `size[200]` | | `--p-space-300` | `size[300]` | | `--p-space-400` | `size[400]` | | `--p-space-500` | `size[500]` | | `--p-space-600` | `size[600]` | | `--p-space-800` | `size[800]` | | `--p-space-1000` | `size[1000]` | | `--p-space-1200` | `size[1200]` | | `--p-space-1600` | `size[1600]` | | `--p-space-2000` | `size[2000]` | | `--p-space-2400` | `size[2400]` | | `--p-space-2800` | `size[2800]` | | `--p-space-3200` | `size[3200]` | </details> <details> <summary>✨ New <code>height</code> maps</summary> | New Token | Value | | ------------------------- | ------------------------ | | `--p-height-0` | `size['0']` | | `--p-height-025` | `size['025']` | | `--p-height-050` | `size['050']` | | `--p-height-100` | `size[100]` | | `--p-height-150` | `size[150]` | | `--p-height-200` | `size[200]` | | `--p-height-300` | `size[300]` | | `--p-height-400` | `size[400]` | | `--p-height-500` | `size[500]` | | `--p-height-600` | `size[600]` | | `--p-height-700` | `size[700]` | | `--p-height-800` | `size[800]` | | `--p-height-900` | `size[900]` | | `--p-height-1000` | `size[1000]` | | `--p-height-1200` | `size[1200]` | | `--p-height-1600` | `size[1600]` | | `--p-height-2000` | `size[2000]` | | `--p-height-2400` | `size[2400]` | | `--p-height-2800` | `size[2800]` | | `--p-height-3200` | `size[3200]` | </details> <details> <summary>✨ New <code>width</code> maps</summary> | New Token | Value | | ------------------------- | ------------------------ | | `--p-width-0` | `size['0']` | | `--p-width-025` | `size['025']` | | `--p-width-050` | `size['050']` | | `--p-width-100` | `size[100]` | | `--p-width-150` | `size[150]` | | `--p-width-200` | `size[200]` | | `--p-width-300` | `size[300]` | | `--p-width-400` | `size[400]` | | `--p-width-500` | `size[500]` | | `--p-width-600` | `size[600]` | | `--p-width-700` | `size[700]` | | `--p-width-800` | `size[800]` | | `--p-width-900` | `size[900]` | | `--p-width-1000` | `size[1000]` | | `--p-width-1200` | `size[1200]` | | `--p-width-1600` | `size[1600]` | | `--p-width-2000` | `size[2000]` | | `--p-width-2400` | `size[2400]` | | `--p-width-2800` | `size[2800]` | | `--p-width-3200` | `size[3200]` | </details> <details> <summary>✨ New <code>font-size</code> maps</summary> | New Token | Value | | ------------------------- | ------------------------ | | `--p-font-size-275` | `size[275]` | | ~`--p-font-size-300`~ | ~`size[300]`~ | | `--p-font-size-325` | `size[325]` | | `--p-font-size-350` | `size[350]` | | ~`--p-font-size-400`~ | ~`size[400]`~ | | ~`--p-font-size-500`~ | ~`size[500]`~ | | ~`--p-font-size-600`~ | ~`size[600]`~ | | `--p-font-size-750` | `size[750]` | | `--p-font-size-900` | `size[900]` | | `--p-font-size-1000` | `size[1000]` | > [!NOTE] > The following values were not added since they conflict with existing tokens with the same name. These tokens will have their values updated in the next major version v12: | New Token | Value | Value (in px) | ------------------------- | ------------------------ | ------------------------ | | `--p-font-size-300` | `size[300]` | `12px` | | `--p-font-size-400` | `size[400]` | `16px` | | `--p-font-size-500` | `size[500]` | `20px` | | `--p-font-size-600` | `size[600]` | `24px` | </details> <details> <summary>✨ New <code>line-height</code> maps</summary> | New Token | Value | | ------------------------- | ------------------------ | | `--p-font-line-height-300` | `size[300]` | | `--p-font-line-height-400` | `size[400]` | | `--p-font-line-height-500` | `size[500]` | | `--p-font-line-height-600` | `size[600]` | | `--p-font-line-height-700` | `size[700]` | | `--p-font-line-height-800` | `size[800]` | | `--p-font-line-height-1000` | `size[1000]` | | `--p-font-line-height-1200` | `size[1200]` | </details> - Maps our new tokens to the tokens they will be replacing in the `base` theme (for opt out support) <details> <summary>↔️ Replacement <code>border-radius</code> maps</summary> | Deprecated Token | Replacement Value | | ------------------------- | ------------------------ | | `--p-border-radius-0-experimental` | `--p-border-radius-0` | | `--p-border-radius-05` | `--p-border-radius-050` | | `--p-border-radius-1` | `--p-border-radius-100` | | `--p-border-radius-1_5-experimental` | `--p-border-radius-150` | | `--p-border-radius-2` | `--p-border-radius-200` | | `--p-border-radius-3` | `--p-border-radius-300` | | `--p-border-radius-4` | `--p-border-radius-400` | | `--p-border-radius-5` | `--p-border-radius-500` | | `--p-border-radius-6` | `--p-border-radius-750` | </details> <details> <summary>↔️ Replacement <code>border-width</code> maps</summary> | Deprecated Token | Replacement Value | | ------------------------- | ------------------------ | | `--p-border-width-1` | `--p-border-width-025` | | `--p-border-width-1-experimental` | `--p-border-width-0165` | | `--p-border-width-2` | `--p-border-width-050` | | `--p-border-width-2-experimental` | `--p-border-width-025` | | `--p-border-width-3` | `--p-border-width-050` | | `--p-border-width-4` | `--p-border-width-100` | | `--p-border-width-5` | `--p-border-width-100` | </details> <details> <summary>↔️ Replacement <code>space</code> maps</summary> | Deprecated Token | Replacement Value | | ------------------------- | ------------------------ | | `--p-space-05` | `--p-space-050` | | `--p-space-1` | `--p-space-100` | | `--p-space-1_5-experimental` | `--p-space-150` | | `--p-space-2` | `--p-space-200` | | `--p-space-3` | `--p-space-300` | | `--p-space-4` | `--p-space-400` | | `--p-space-5` | `--p-space-500` | | `--p-space-6` | `--p-space-600` | | `--p-space-8` | `--p-space-800` | | `--p-space-10` | `--p-space-1000` | | `--p-space-12` | `--p-space-1200` | | `--p-space-16` | `--p-space-1600` | | `--p-space-20` | `--p-space-2000` | | `--p-space-24` | `--p-space-2400` | | `--p-space-28` | `--p-space-2800` | | `--p-space-32` | `--p-space-3200` | </details> <details> <summary>↔️ Replacement <code>font-size</code> maps</summary> | Deprecated Token | Replacement Value | | ------------------------- | ------------------------ | | `--p-font-size-70-experimental` | `--p-font-size-275` | | `--p-font-size-75` | `--p-font-size-300` | | `--p-font-size-80-experimental` | `--p-font-size-325` | | `--p-font-size-100` | `--p-font-size-350` | | `--p-font-size-200` | `--p-font-size-400` | | `--p-font-size-300` | `--p-font-size-500` | | `--p-font-size-400` | `--p-font-size-600` | | `--p-font-size-500` | `--p-font-size-750` | | `--p-font-size-600` | `--p-font-size-900` | | `--p-font-size-700` | `--p-font-size-1000` | </details> <details> <summary>↔️ Replacement <code>line-height</code> maps</summary> | Deprecated Token | Replacement Value | | ------------------------- | ------------------------ | | `--p-font-line-height-075-experimental` | `--p-font-line-height-300` | | `--p-font-line-height-1` | `--p-font-line-height-400` | | `--p-font-line-height-2` | `--p-font-line-height-500` | | `--p-font-line-height-3` | `--p-font-line-height-600` | | `--p-font-line-height-4` | `--p-font-line-height-700` | | `--p-font-line-height-5` | `--p-font-line-height-800` | | `--p-font-line-height-6` | `--p-font-line-height-1000` | | `--p-font-line-height-7` | `--p-font-line-height-1200` | </details> --------- Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
1 parent 8be227e commit 120e96e

File tree

6 files changed

+152
-75
lines changed

6 files changed

+152
-75
lines changed

‎.changeset/tasty-ducks-punch.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris-tokens': patch
3+
---
4+
5+
Updated public primitive `base` and `light-uplift` theme scales

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

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import {size} from '../../size';
21
import type {Experimental} from '../../types';
32
import type {MetaTokenProperties} from '../types';
3+
import {createVarName} from '../../utilities';
44

55
type BorderRadiusScaleExperimental = Experimental<'0' | '1_5'>;
66

@@ -50,31 +50,31 @@ export const border: {
5050
[TokenName in BorderTokenName]: MetaTokenProperties;
5151
} = {
5252
'border-radius-0': {
53-
value: size[0],
53+
value: createVar('border-radius-0-experimental'),
5454
},
5555
'border-radius-050': {
56-
value: size['050'],
56+
value: createVar('border-radius-05'),
5757
},
5858
'border-radius-100': {
59-
value: size[100],
59+
value: createVar('border-radius-1'),
6060
},
6161
'border-radius-150': {
62-
value: size[150],
62+
value: createVar('border-radius-1_5-experimental'),
6363
},
6464
'border-radius-200': {
65-
value: size[200],
65+
value: createVar('border-radius-2'),
6666
},
6767
'border-radius-300': {
68-
value: size[300],
68+
value: createVar('border-radius-3'),
6969
},
7070
'border-radius-400': {
71-
value: size[400],
71+
value: createVar('border-radius-4'),
7272
},
7373
'border-radius-500': {
74-
value: size[500],
74+
value: createVar('border-radius-5'),
7575
},
7676
'border-radius-750': {
77-
value: size[750],
77+
value: createVar('border-radius-6'),
7878
},
7979
'border-radius-full': {
8080
value: '9999px',
@@ -107,16 +107,16 @@ export const border: {
107107
value: '6px',
108108
},
109109
'border-width-0165': {
110-
value: size['0165'],
110+
value: createVar('border-width-1-experimental'),
111111
},
112112
'border-width-025': {
113-
value: size['025'],
113+
value: createVar('border-width-1'),
114114
},
115115
'border-width-050': {
116-
value: size['050'],
116+
value: createVar('border-width-2'),
117117
},
118118
'border-width-100': {
119-
value: size[100],
119+
value: createVar('border-width-4'),
120120
},
121121
'border-width-1': {
122122
value: '1px',
@@ -140,3 +140,7 @@ export const border: {
140140
value: '1px',
141141
},
142142
};
143+
144+
function createVar(borderTokenName: BorderTokenName) {
145+
return `var(${createVarName(borderTokenName)})`;
146+
}

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

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {size} from '../../size';
21
import type {Experimental} from '../../types';
2+
import {createVarName} from '../../utilities';
33
import type {MetaTokenProperties} from '../types';
44

55
type FontFamilyAlias = 'sans' | 'mono';
@@ -67,22 +67,22 @@ export const font: {
6767
"ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
6868
},
6969
'font-size-275': {
70-
value: size[275],
70+
value: createVar('font-size-70-experimental'),
7171
},
7272
'font-size-325': {
73-
value: size[325],
73+
value: createVar('font-size-80-experimental'),
7474
},
7575
'font-size-350': {
76-
value: size[350],
76+
value: createVar('font-size-100'),
7777
},
7878
'font-size-750': {
79-
value: size[750],
79+
value: createVar('font-size-500'),
8080
},
8181
'font-size-900': {
82-
value: size[900],
82+
value: createVar('font-size-600'),
8383
},
8484
'font-size-1000': {
85-
value: size[1000],
85+
value: createVar('font-size-700'),
8686
},
8787
'font-size-70-experimental': {
8888
value: '11px',
@@ -127,28 +127,28 @@ export const font: {
127127
value: '700',
128128
},
129129
'font-line-height-300': {
130-
value: size[300],
130+
value: createVar('font-line-height-075-experimental'),
131131
},
132132
'font-line-height-400': {
133-
value: size[400],
133+
value: createVar('font-line-height-1'),
134134
},
135135
'font-line-height-500': {
136-
value: size[500],
136+
value: createVar('font-line-height-2'),
137137
},
138138
'font-line-height-600': {
139-
value: size[600],
139+
value: createVar('font-line-height-3'),
140140
},
141141
'font-line-height-700': {
142-
value: size[700],
142+
value: createVar('font-line-height-4'),
143143
},
144144
'font-line-height-800': {
145-
value: size[800],
145+
value: createVar('font-line-height-5'),
146146
},
147147
'font-line-height-1000': {
148-
value: size[1000],
148+
value: createVar('font-line-height-6'),
149149
},
150150
'font-line-height-1200': {
151-
value: size[1200],
151+
value: createVar('font-line-height-7'),
152152
},
153153
'font-line-height-075-experimental': {
154154
value: '12px',
@@ -175,3 +175,7 @@ export const font: {
175175
value: '48px',
176176
},
177177
};
178+
179+
function createVar(fontTokenName: FontTokenName) {
180+
return `var(${createVarName(fontTokenName)})`;
181+
}

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

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {size} from '../../size';
22
import type {Experimental} from '../../types';
3+
import {createVarName} from '../../utilities';
34
import type {MetaTokenProperties} from '../types';
45

56
type SpaceScaleExperimental = Experimental<'1_5'>;
@@ -56,52 +57,52 @@ export const space: {
5657
value: size['025'],
5758
},
5859
'space-050': {
59-
value: size['050'],
60+
value: createVar('space-05'),
6061
},
6162
'space-100': {
62-
value: size[100],
63+
value: createVar('space-1'),
6364
},
6465
'space-150': {
65-
value: size[150],
66+
value: createVar('space-1_5-experimental'),
6667
},
6768
'space-200': {
68-
value: size[200],
69+
value: createVar('space-2'),
6970
},
7071
'space-300': {
71-
value: size[300],
72+
value: createVar('space-3'),
7273
},
7374
'space-400': {
74-
value: size[400],
75+
value: createVar('space-4'),
7576
},
7677
'space-500': {
77-
value: size[500],
78+
value: createVar('space-5'),
7879
},
7980
'space-600': {
80-
value: size[600],
81+
value: createVar('space-6'),
8182
},
8283
'space-800': {
83-
value: size[800],
84+
value: createVar('space-8'),
8485
},
8586
'space-1000': {
86-
value: size[1000],
87+
value: createVar('space-10'),
8788
},
8889
'space-1200': {
89-
value: size[1200],
90+
value: createVar('space-12'),
9091
},
9192
'space-1600': {
92-
value: size[1600],
93+
value: createVar('space-16'),
9394
},
9495
'space-2000': {
95-
value: size[2000],
96+
value: createVar('space-20'),
9697
},
9798
'space-2400': {
98-
value: size[2400],
99+
value: createVar('space-24'),
99100
},
100101
'space-2800': {
101-
value: size[2800],
102+
value: createVar('space-28'),
102103
},
103104
'space-3200': {
104-
value: size[3200],
105+
value: createVar('space-32'),
105106
},
106107
'space-05': {
107108
value: '2px',
@@ -152,3 +153,7 @@ export const space: {
152153
value: '128px',
153154
},
154155
};
156+
157+
function createVar(spaceTokenName: SpaceTokenName) {
158+
return `var(${createVarName(spaceTokenName)})`;
159+
}

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

Lines changed: 85 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,27 @@
11
import * as colors from '../colors-experimental';
2+
import {size} from '../size';
23

34
import {createMetaTheme, createMetaThemePartial} from './utils';
45

56
export const metaThemeLightUpliftPartial = createMetaThemePartial({
6-
motion: {
7-
'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
8-
},
9-
font: {
10-
'font-family-sans': {
11-
value:
12-
"'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
13-
},
14-
'font-size-500': {value: '30px'},
15-
'font-size-600': {value: '36px'},
16-
},
17-
shadow: {
18-
'shadow-inset-lg': {
19-
value:
20-
'inset -1px 0px 1px rgba(0, 0, 0, 0.2), inset 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.6)',
21-
},
22-
'shadow-inset-md': {
23-
value:
24-
'inset -1px 0px 1px rgba(0, 0, 0, 0.12), inset 1px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 1px rgba(0, 0, 0, 0.2)',
25-
},
26-
'shadow-inset-sm': {
27-
value:
28-
'inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(255, 255, 255, 0.15)',
29-
},
30-
'shadow-xs': {value: '0px 1px 0px rgba(0, 0, 0, 0.07)'},
31-
'shadow-sm': {value: '0px 3px 1px -1px rgba(0, 0, 0, 0.07)'},
32-
'shadow-md': {value: '0px 4px 6px -2px rgba(0, 0, 0, 0.2)'},
33-
'shadow-lg': {value: '0px 8px 16px -4px rgba(0, 0, 0, 0.22)'},
34-
'shadow-xl': {value: '0px 12px 20px -8px rgba(0, 0, 0, 0.24)'},
35-
'shadow-2xl': {value: '0px 20px 20px -8px rgba(0, 0, 0, 0.28)'},
7+
border: {
8+
// v12.0.0
9+
'border-radius-0': {value: size[0]},
10+
'border-radius-050': {value: size['050']},
11+
'border-radius-100': {value: size[100]},
12+
'border-radius-150': {value: size[150]},
13+
'border-radius-200': {value: size[200]},
14+
'border-radius-300': {value: size[300]},
15+
'border-radius-400': {value: size[400]},
16+
'border-radius-500': {value: size[500]},
17+
'border-radius-750': {value: size[750]},
18+
'border-width-0165': {value: size['0165']},
19+
'border-width-025': {value: size['025']},
20+
'border-width-050': {value: size['050']},
21+
'border-width-100': {value: size[100]},
3622
},
3723
color: {
24+
// v11.0.0
3825
'color-bg-inverse': {value: colors.gray[16]()},
3926
'color-bg-inset-strong': {value: colors.gray[15]()},
4027
'color-bg-inverse-hover': {value: colors.gray[14]()},
@@ -170,6 +157,74 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
170157
'color-text-magic-strong': {value: colors.purple[15]},
171158
'color-text-magic': {value: colors.purple[14]},
172159
},
160+
font: {
161+
// v12.0.0
162+
'font-size-275': {value: size[275]},
163+
'font-size-325': {value: size[325]},
164+
'font-size-350': {value: size[350]},
165+
'font-size-750': {value: size[750]},
166+
'font-size-900': {value: size[900]},
167+
'font-size-1000': {value: size[1000]},
168+
'font-line-height-300': {value: size[300]},
169+
'font-line-height-400': {value: size[400]},
170+
'font-line-height-500': {value: size[500]},
171+
'font-line-height-600': {value: size[600]},
172+
'font-line-height-700': {value: size[700]},
173+
'font-line-height-800': {value: size[800]},
174+
'font-line-height-1000': {value: size[1000]},
175+
'font-line-height-1200': {value: size[1200]},
176+
// v11.0.0
177+
'font-family-sans': {
178+
value:
179+
"'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
180+
},
181+
'font-size-500': {value: '30px'},
182+
'font-size-600': {value: '36px'},
183+
},
184+
motion: {
185+
// v11.0.0
186+
'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
187+
},
188+
space: {
189+
// v12.0.0
190+
'space-050': {value: size['050']},
191+
'space-100': {value: size[100]},
192+
'space-150': {value: size[150]},
193+
'space-200': {value: size[200]},
194+
'space-300': {value: size[300]},
195+
'space-400': {value: size[400]},
196+
'space-500': {value: size[500]},
197+
'space-600': {value: size[600]},
198+
'space-800': {value: size[800]},
199+
'space-1000': {value: size[1000]},
200+
'space-1200': {value: size[1200]},
201+
'space-1600': {value: size[1600]},
202+
'space-2000': {value: size[2000]},
203+
'space-2400': {value: size[2400]},
204+
'space-2800': {value: size[2800]},
205+
'space-3200': {value: size[3200]},
206+
},
207+
shadow: {
208+
// v11.0.0
209+
'shadow-inset-lg': {
210+
value:
211+
'inset -1px 0px 1px rgba(0, 0, 0, 0.2), inset 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.6)',
212+
},
213+
'shadow-inset-md': {
214+
value:
215+
'inset -1px 0px 1px rgba(0, 0, 0, 0.12), inset 1px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 1px rgba(0, 0, 0, 0.2)',
216+
},
217+
'shadow-inset-sm': {
218+
value:
219+
'inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(255, 255, 255, 0.15)',
220+
},
221+
'shadow-xs': {value: '0px 1px 0px rgba(0, 0, 0, 0.07)'},
222+
'shadow-sm': {value: '0px 3px 1px -1px rgba(0, 0, 0, 0.07)'},
223+
'shadow-md': {value: '0px 4px 6px -2px rgba(0, 0, 0, 0.2)'},
224+
'shadow-lg': {value: '0px 8px 16px -4px rgba(0, 0, 0, 0.22)'},
225+
'shadow-xl': {value: '0px 12px 20px -8px rgba(0, 0, 0, 0.24)'},
226+
'shadow-2xl': {value: '0px 20px 20px -8px rgba(0, 0, 0, 0.28)'},
227+
},
173228
});
174229

175230
export const metaThemeLightUplift = createMetaTheme(

‎polaris-tokens/src/utilities.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,10 @@ export function tokensToRems<T extends Exact<MetadataGroup, T>>(tokenGroup: T) {
9292
) as T;
9393
}
9494

95+
export function createVarName(token: string) {
96+
return `--p-${token}`;
97+
}
98+
9599
export function createVar(token: string) {
96100
return `--p-${token}`;
97101
}

0 commit comments

Comments
 (0)