Skip to content

Commit 5db8448

Browse files
committed
Add experimental to colour aliases (#9312)
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? prefixing the `experimental` keyword on the color Aliases allows us to use the experimental tokens where the Alias types are used. For example, on the [Box component](https://polaris.shopify.com/components/layout-and-structure/box) you could now use the experimental tokens as a background without type errors. ``` <Box background={'experimental-bg-input-hover'} /> ```
1 parent 76c8d4e commit 5db8448

File tree

1 file changed

+12
-17
lines changed

1 file changed

+12
-17
lines changed

polaris-tokens/src/token-groups/color.ts

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ export type ColorBackgroundAlias =
6767
| 'bg-success-subdued'
6868
| 'bg-success-subdued-active'
6969
| 'bg-success-subdued-hover'
70-
| 'bg-warning';
70+
| 'bg-warning'
71+
| ColorExperimentalBackgroundAlias;
7172

7273
export type ColorBorderAlias =
7374
| 'border'
@@ -147,23 +148,21 @@ export type ColorTextAlias =
147148
| 'text-success-strong'
148149
| 'text-warning-strong';
149150

150-
type ColorExperimentalAlias =
151-
| 'subdued-link'
152-
| 'bg-input-hover'
153-
| 'bg-input-active'
154-
| 'bg-transparent'
155-
| 'bg-transparent-subdued'
156-
| 'bg-transparent-hover'
157-
| 'bg-transparent-active'
158-
| 'bg-inverse-transparent-hover'
159-
| 'bg-inverse-transparent-active';
151+
type ColorExperimentalBackgroundAlias =
152+
| 'experimental-bg-input-hover'
153+
| 'experimental-bg-input-active'
154+
| 'experimental-bg-transparent'
155+
| 'experimental-bg-transparent-subdued'
156+
| 'experimental-bg-transparent-hover'
157+
| 'experimental-bg-transparent-active'
158+
| 'experimental-bg-inverse-transparent-hover'
159+
| 'experimental-bg-inverse-transparent-active';
160160

161161
export type ColorTokenName =
162162
| `color-${ColorBackgroundAlias}`
163163
| `color-${ColorBorderAlias}`
164164
| `color-${ColorIconAlias}`
165-
| `color-${ColorTextAlias}`
166-
| `color-experimental-${ColorExperimentalAlias}`;
165+
| `color-${ColorTextAlias}`;
167166

168167
export type ColorTokenGroup = {
169168
[TokenName in ColorTokenName]: string;
@@ -843,10 +842,6 @@ export const color: {
843842
description: '',
844843
},
845844
// Experimental tokens
846-
'color-experimental-subdued-link': {
847-
value: colorsExperimental.blue[12],
848-
description: '',
849-
},
850845
'color-experimental-bg-input-hover': {
851846
value: colorsExperimental.gray[3](),
852847
description: '',

0 commit comments

Comments
 (0)