Skip to content

Commit 8bdbb70

Browse files
jvaclavikjvaclavik
committed
fix(ds): fix (negative) elevations
1 parent 1e49357 commit 8bdbb70

File tree

3 files changed

+38
-20
lines changed

3 files changed

+38
-20
lines changed

‎packages/components/src/components/buttons/buttonStyleUtils.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,7 @@ const mapElevationToButtonBackground = ({
7777
const capitalizedState = capitalizeFirstLetter(state);
7878

7979
const map: Record<Elevation, Color> = {
80-
'-1': `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation3`, // For example left menu is negative elevation
81-
82-
// Button lies always on elevation so for example Button that lies has elevation 0, lies on elevation -1.
83-
// This is why the values here a shifted by 1.
80+
'-1': `interactionBackgroundTertiaryDefault${capitalizedState}OnElevationNegative`, // For example left menu is negative elevation
8481
0: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation0`,
8582
1: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation1`,
8683
2: `interactionBackgroundTertiaryDefault${capitalizedState}OnElevation2`,

‎packages/theme/src/colors.ts

+36-16
Original file line numberDiff line numberDiff line change
@@ -31,49 +31,59 @@ const light = {
3131
// Figma Colors
3232
backgroundAlertBlueBold: palette.lightAccentBlue600,
3333
backgroundAlertBlueBoldAlt: palette.lightAccentBlue700,
34+
backgroundAlertBlueSubtleOnElevationNegative: palette.lightAccentBlue400,
3435
backgroundAlertBlueSubtleOnElevation0: palette.lightAccentBlue300,
3536
backgroundAlertBlueSubtleOnElevation1: palette.lightAccentBlue200,
3637
backgroundAlertBlueSubtleOnElevation2: palette.lightAccentBlue300,
3738
backgroundAlertPurpleBold: palette.lightAccentPurple600,
3839
backgroundAlertPurpleBoldAlt: palette.lightAccentPurple700,
40+
backgroundAlertPurpleSubtleOnElevationNegative: palette.lightAccentPurple400,
3941
backgroundAlertPurpleSubtleOnElevation0: palette.lightAccentPurple300,
4042
backgroundAlertPurpleSubtleOnElevation1: palette.lightAccentPurple200,
4143
backgroundAlertPurpleSubtleOnElevation2: palette.lightAccentPurple300,
4244
backgroundAlertRedBold: palette.lightAccentRed600,
4345
backgroundAlertRedBoldAlt: palette.lightAccentRed700,
46+
backgroundAlertRedSubtleOnElevationNegative: palette.lightAccentRed400,
4447
backgroundAlertRedSubtleOnElevation0: palette.lightAccentRed300,
4548
backgroundAlertRedSubtleOnElevation1: palette.lightAccentRed200,
4649
backgroundAlertRedSubtleOnElevation2: palette.lightAccentRed300,
4750
backgroundAlertYellowBold: palette.lightAccentYellow600,
4851
backgroundAlertYellowBoldAlt: palette.lightAccentYellow700,
52+
backgroundAlertYellowSubtleOnElevationNegative: palette.lightAccentYellow400,
4953
backgroundAlertYellowSubtleOnElevation0: palette.lightAccentYellow300,
5054
backgroundAlertYellowSubtleOnElevation1: palette.lightAccentYellow200,
5155
backgroundAlertYellowSubtleOnElevation2: palette.lightAccentYellow300,
5256
backgroundNeutralBold: palette.lightGray1000,
5357
backgroundNeutralBoldInverted: palette.lightWhiteAlpha1000,
5458
backgroundNeutralDisabled: palette.lightGray200,
5559
backgroundNeutralSubdued: palette.lightGray500,
60+
backgroundNeutralSubtleOnElevationNegative: palette.lightGray400,
5661
backgroundNeutralSubtleOnElevation0: palette.lightGray300,
5762
backgroundNeutralSubtleOnElevation1: palette.lightGray200,
5863
backgroundPrimaryDefault: palette.lightPrimaryForest800,
5964
backgroundPrimaryPressed: palette.lightPrimaryForest900,
65+
backgroundPrimarySubtleOnElevationNegative: palette.lightPrimaryForest400,
6066
backgroundPrimarySubtleOnElevation0: palette.lightPrimaryForest300,
6167
backgroundPrimarySubtleOnElevation1: palette.lightPrimaryForest200,
6268
backgroundSecondaryDefault: palette.lightSecondaryEmerald800,
6369
backgroundSecondaryPressed: palette.lightSecondaryEmerald900,
70+
backgroundSurfaceElevationNegative: palette.lightGray200,
6471
backgroundSurfaceElevation0: palette.lightGray100,
6572
backgroundSurfaceElevation1: palette.lightWhiteAlpha1000,
6673
backgroundSurfaceElevation2: palette.lightGray100,
6774
backgroundSurfaceElevation3: palette.lightWhiteAlpha1000,
75+
backgroundTertiaryDefaultOnElevationNegative: palette.lightGray400,
6876
backgroundTertiaryDefaultOnElevation0: palette.lightGray300,
6977
backgroundTertiaryDefaultOnElevation1: palette.lightGray200,
78+
backgroundTertiaryPressedOnElevationNegative: palette.lightGray300,
7079
backgroundTertiaryPressedOnElevation0: palette.lightGray400,
7180
backgroundTertiaryPressedOnElevation1: palette.lightGray300,
7281
borderAlertRed: palette.lightAccentRed600,
7382
borderDashed: palette.lightGray400,
7483
borderFocus: palette.lightGray500,
7584
borderInputDefault: palette.lightGray400,
7685
borderInverted: palette.lightWhiteAlpha1000,
86+
borderOnElevationNegative: palette.lightGray400,
7787
borderOnElevation0: palette.lightGray300,
7888
borderOnElevation1: palette.lightGray200,
7989
borderSecondary: palette.lightSecondaryEmerald800,
@@ -95,34 +105,42 @@ const light = {
95105
iconPrimaryDefault: palette.lightPrimaryForest800,
96106
iconPrimaryPressed: palette.lightPrimaryForest900,
97107
iconSubdued: palette.lightGray700,
108+
interactionBackgroundDestructiveDefaultHoverOnElevationNegative: palette.lightAccentRed300,
98109
interactionBackgroundDestructiveDefaultHoverOnElevation0: palette.lightAccentRed400,
99110
interactionBackgroundDestructiveDefaultHoverOnElevation1: palette.lightAccentRed300,
100111
interactionBackgroundDestructiveDefaultHoverOnElevation2: palette.lightAccentRed400,
101112
interactionBackgroundDestructiveDefaultHoverOnElevation3: palette.lightAccentRed300,
113+
interactionBackgroundDestructiveDefaultNormalOnElevationNegative: palette.lightAccentRed400,
102114
interactionBackgroundDestructiveDefaultNormalOnElevation0: palette.lightAccentRed300,
103115
interactionBackgroundDestructiveDefaultNormalOnElevation1: palette.lightAccentRed200,
104116
interactionBackgroundDestructiveDefaultNormalOnElevation2: palette.lightAccentRed300,
105117
interactionBackgroundDestructiveDefaultNormalOnElevation3: palette.lightAccentRed200,
118+
interactionBackgroundInfoDefaultHoverOnElevationNegative: palette.lightAccentBlue300,
106119
interactionBackgroundInfoDefaultHoverOnElevation0: palette.lightAccentBlue400,
107120
interactionBackgroundInfoDefaultHoverOnElevation1: palette.lightAccentBlue300,
108121
interactionBackgroundInfoDefaultHoverOnElevation2: palette.lightAccentBlue400,
109122
interactionBackgroundInfoDefaultHoverOnElevation3: palette.lightAccentBlue300,
123+
interactionBackgroundInfoDefaultNormalOnElevationNegative: palette.lightAccentBlue400,
110124
interactionBackgroundInfoDefaultNormalOnElevation0: palette.lightAccentBlue300,
111125
interactionBackgroundInfoDefaultNormalOnElevation1: palette.lightAccentBlue200,
112126
interactionBackgroundInfoDefaultNormalOnElevation2: palette.lightAccentBlue300,
113127
interactionBackgroundInfoDefaultNormalOnElevation3: palette.lightAccentBlue200,
128+
interactionBackgroundTertiaryDefaultHoverOnElevationNegative: palette.lightGray300,
114129
interactionBackgroundTertiaryDefaultHoverOnElevation0: palette.lightGray400,
115130
interactionBackgroundTertiaryDefaultHoverOnElevation1: palette.lightGray300,
116131
interactionBackgroundTertiaryDefaultHoverOnElevation2: palette.lightGray400,
117132
interactionBackgroundTertiaryDefaultHoverOnElevation3: palette.lightGray300,
133+
interactionBackgroundTertiaryDefaultNormalOnElevationNegative: palette.lightGray400,
118134
interactionBackgroundTertiaryDefaultNormalOnElevation0: palette.lightGray300,
119135
interactionBackgroundTertiaryDefaultNormalOnElevation1: palette.lightGray200,
120136
interactionBackgroundTertiaryDefaultNormalOnElevation2: palette.lightGray300,
121137
interactionBackgroundTertiaryDefaultNormalOnElevation3: palette.lightGray200,
138+
interactionBackgroundWarningDefaultHoverOnElevationNegative: palette.lightAccentYellow300,
122139
interactionBackgroundWarningDefaultHoverOnElevation0: palette.lightAccentYellow400,
123140
interactionBackgroundWarningDefaultHoverOnElevation1: palette.lightAccentYellow300,
124141
interactionBackgroundWarningDefaultHoverOnElevation2: palette.lightAccentYellow400,
125142
interactionBackgroundWarningDefaultHoverOnElevation3: palette.lightAccentYellow300,
143+
interactionBackgroundWarningDefaultNormalOnElevationNegative: palette.lightAccentYellow400,
126144
interactionBackgroundWarningDefaultNormalOnElevation0: palette.lightAccentYellow300,
127145
interactionBackgroundWarningDefaultNormalOnElevation1: palette.lightAccentYellow200,
128146
interactionBackgroundWarningDefaultNormalOnElevation2: palette.lightAccentYellow300,
@@ -147,15 +165,7 @@ const light = {
147165
textSubdued: palette.lightGray700,
148166

149167
// non-valid tokens (should be removed)
150-
backgroundAlertBlueSubtleOnElevationNegative: palette.lightAccentBlue400,
151-
backgroundAlertPurpleSubtleOnElevationNegative: palette.lightAccentPurple400,
152-
backgroundAlertRedSubtleOnElevationNegative: palette.lightAccentRed400,
153-
backgroundAlertYellowSubtleOnElevationNegative: palette.lightAccentYellow400,
154-
backgroundNeutralSubtleOnElevationNegative: palette.lightGray300,
155168
backgroundPrimarySubtleOnElevation2: palette.lightPrimaryForest100,
156-
backgroundPrimarySubtleOnElevationNegative: palette.lightPrimaryForest400,
157-
backgroundSurfaceElevationNegative: palette.lightGray200,
158-
backgroundTertiaryDefaultOnElevationNegative: palette.lightGray300,
159169
borderElevation0: palette.lightGray300,
160170
borderElevation1: palette.lightGray200,
161171
borderElevation2: palette.lightGray200,
@@ -195,49 +205,59 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
195205
// Figma Colors
196206
backgroundAlertBlueBold: palette.darkAccentBlue600,
197207
backgroundAlertBlueBoldAlt: palette.darkAccentBlue700,
208+
backgroundAlertBlueSubtleOnElevationNegative: palette.darkAccentBlue100,
198209
backgroundAlertBlueSubtleOnElevation0: palette.darkAccentBlue200,
199210
backgroundAlertBlueSubtleOnElevation1: palette.darkAccentBlue300,
200211
backgroundAlertBlueSubtleOnElevation2: palette.darkAccentBlue400,
201212
backgroundAlertPurpleBold: palette.darkAccentPurple600,
202213
backgroundAlertPurpleBoldAlt: palette.darkAccentPurple700,
214+
backgroundAlertPurpleSubtleOnElevationNegative: palette.darkAccentPurple100,
203215
backgroundAlertPurpleSubtleOnElevation0: palette.darkAccentPurple200,
204216
backgroundAlertPurpleSubtleOnElevation1: palette.darkAccentPurple300,
205217
backgroundAlertPurpleSubtleOnElevation2: palette.darkAccentPurple400,
206218
backgroundAlertRedBold: palette.darkAccentRed600,
207219
backgroundAlertRedBoldAlt: palette.darkAccentRed700,
220+
backgroundAlertRedSubtleOnElevationNegative: palette.darkAccentRed100,
208221
backgroundAlertRedSubtleOnElevation0: palette.darkAccentRed200,
209222
backgroundAlertRedSubtleOnElevation1: palette.darkAccentRed300,
210223
backgroundAlertRedSubtleOnElevation2: palette.darkAccentRed400,
211224
backgroundAlertYellowBold: palette.darkAccentYellow600,
212225
backgroundAlertYellowBoldAlt: palette.darkAccentYellow700,
226+
backgroundAlertYellowSubtleOnElevationNegative: palette.darkAccentYellow100,
213227
backgroundAlertYellowSubtleOnElevation0: palette.darkAccentYellow200,
214228
backgroundAlertYellowSubtleOnElevation1: palette.darkAccentYellow300,
215229
backgroundAlertYellowSubtleOnElevation2: palette.darkAccentYellow400,
216230
backgroundNeutralBold: palette.darkGray1000,
217231
backgroundNeutralBoldInverted: palette.darkGray000,
218232
backgroundNeutralDisabled: palette.darkGray200,
219233
backgroundNeutralSubdued: palette.darkGray500,
234+
backgroundNeutralSubtleOnElevationNegative: palette.darkGray100,
220235
backgroundNeutralSubtleOnElevation0: palette.darkGray200,
221236
backgroundNeutralSubtleOnElevation1: palette.darkGray300,
222237
backgroundPrimaryDefault: palette.darkPrimaryForest800,
223238
backgroundPrimaryPressed: palette.darkPrimaryForest900,
239+
backgroundPrimarySubtleOnElevationNegative: palette.darkPrimaryForest100,
224240
backgroundPrimarySubtleOnElevation0: palette.darkPrimaryForest200,
225241
backgroundPrimarySubtleOnElevation1: palette.darkPrimaryForest300,
226242
backgroundSecondaryDefault: palette.darkSecondaryGreen800,
227243
backgroundSecondaryPressed: palette.darkSecondaryGreen900,
244+
backgroundSurfaceElevationNegative: palette.darkGray000,
228245
backgroundSurfaceElevation0: palette.darkGray50,
229246
backgroundSurfaceElevation1: palette.darkGray100,
230247
backgroundSurfaceElevation2: palette.darkGray200,
231248
backgroundSurfaceElevation3: palette.darkGray300,
249+
backgroundTertiaryDefaultOnElevationNegative: palette.darkGray100,
232250
backgroundTertiaryDefaultOnElevation0: palette.darkGray200,
233251
backgroundTertiaryDefaultOnElevation1: palette.darkGray300,
252+
backgroundTertiaryPressedOnElevationNegative: palette.darkGray200,
234253
backgroundTertiaryPressedOnElevation0: palette.darkGray300,
235254
backgroundTertiaryPressedOnElevation1: palette.darkGray400,
236255
borderAlertRed: palette.darkAccentRed600,
237256
borderDashed: palette.darkGray300,
238257
borderFocus: palette.darkGray500,
239258
borderInputDefault: palette.darkGray400,
240259
borderInverted: palette.darkGray000,
260+
borderOnElevationNegative: palette.darkGray200,
241261
borderOnElevation0: palette.darkGray300,
242262
borderOnElevation1: palette.darkGray400,
243263
borderSecondary: palette.darkSecondaryGreen800,
@@ -259,34 +279,42 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
259279
iconPrimaryDefault: palette.darkPrimaryForest800,
260280
iconPrimaryPressed: palette.darkPrimaryForest900,
261281
iconSubdued: palette.darkGray700,
282+
interactionBackgroundDestructiveDefaultHoverOnElevationNegative: palette.darkAccentRed200,
262283
interactionBackgroundDestructiveDefaultHoverOnElevation0: palette.darkAccentRed300,
263284
interactionBackgroundDestructiveDefaultHoverOnElevation1: palette.darkAccentRed400,
264285
interactionBackgroundDestructiveDefaultHoverOnElevation2: palette.darkAccentRed500,
265286
interactionBackgroundDestructiveDefaultHoverOnElevation3: palette.darkAccentRed400,
287+
interactionBackgroundDestructiveDefaultNormalOnElevationNegative: palette.darkAccentRed100,
266288
interactionBackgroundDestructiveDefaultNormalOnElevation0: palette.darkAccentRed200,
267289
interactionBackgroundDestructiveDefaultNormalOnElevation1: palette.darkAccentRed300,
268290
interactionBackgroundDestructiveDefaultNormalOnElevation2: palette.darkAccentRed400,
269291
interactionBackgroundDestructiveDefaultNormalOnElevation3: palette.darkAccentRed500,
292+
interactionBackgroundInfoDefaultHoverOnElevationNegative: palette.darkAccentBlue200,
270293
interactionBackgroundInfoDefaultHoverOnElevation0: palette.darkAccentBlue300,
271294
interactionBackgroundInfoDefaultHoverOnElevation1: palette.darkAccentBlue400,
272295
interactionBackgroundInfoDefaultHoverOnElevation2: palette.darkAccentBlue500,
273296
interactionBackgroundInfoDefaultHoverOnElevation3: palette.darkAccentBlue400,
297+
interactionBackgroundInfoDefaultNormalOnElevationNegative: palette.darkAccentBlue100,
274298
interactionBackgroundInfoDefaultNormalOnElevation0: palette.darkAccentBlue200,
275299
interactionBackgroundInfoDefaultNormalOnElevation1: palette.darkAccentBlue300,
276300
interactionBackgroundInfoDefaultNormalOnElevation2: palette.darkAccentBlue400,
277301
interactionBackgroundInfoDefaultNormalOnElevation3: palette.darkAccentBlue500,
302+
interactionBackgroundTertiaryDefaultHoverOnElevationNegative: palette.darkGray200,
278303
interactionBackgroundTertiaryDefaultHoverOnElevation0: palette.darkGray300,
279304
interactionBackgroundTertiaryDefaultHoverOnElevation1: palette.darkGray400,
280305
interactionBackgroundTertiaryDefaultHoverOnElevation2: palette.darkGray500,
281306
interactionBackgroundTertiaryDefaultHoverOnElevation3: palette.darkGray400,
307+
interactionBackgroundTertiaryDefaultNormalOnElevationNegative: palette.darkGray100,
282308
interactionBackgroundTertiaryDefaultNormalOnElevation0: palette.darkGray200,
283309
interactionBackgroundTertiaryDefaultNormalOnElevation1: palette.darkGray300,
284310
interactionBackgroundTertiaryDefaultNormalOnElevation2: palette.darkGray400,
285311
interactionBackgroundTertiaryDefaultNormalOnElevation3: palette.darkGray500,
312+
interactionBackgroundWarningDefaultHoverOnElevationNegative: palette.darkAccentYellow200,
286313
interactionBackgroundWarningDefaultHoverOnElevation0: palette.darkAccentYellow300,
287314
interactionBackgroundWarningDefaultHoverOnElevation1: palette.darkAccentYellow400,
288315
interactionBackgroundWarningDefaultHoverOnElevation2: palette.darkAccentYellow500,
289316
interactionBackgroundWarningDefaultHoverOnElevation3: palette.darkAccentYellow400,
317+
interactionBackgroundWarningDefaultNormalOnElevationNegative: palette.darkAccentYellow100,
290318
interactionBackgroundWarningDefaultNormalOnElevation0: palette.darkAccentYellow200,
291319
interactionBackgroundWarningDefaultNormalOnElevation1: palette.darkAccentYellow300,
292320
interactionBackgroundWarningDefaultNormalOnElevation2: palette.darkAccentYellow400,
@@ -311,15 +339,7 @@ export const colorVariants: Record<ThemeColorVariant, Colors> = {
311339
textSubdued: palette.darkGray700,
312340

313341
// non-valid tokens (should be removed)
314-
backgroundAlertBlueSubtleOnElevationNegative: palette.darkAccentBlue100,
315-
backgroundAlertPurpleSubtleOnElevationNegative: palette.darkAccentPurple400,
316-
backgroundAlertRedSubtleOnElevationNegative: palette.darkAccentRed100,
317-
backgroundAlertYellowSubtleOnElevationNegative: palette.darkAccentYellow100,
318-
backgroundNeutralSubtleOnElevationNegative: palette.darkGray50,
319342
backgroundPrimarySubtleOnElevation2: palette.darkPrimaryForest400,
320-
backgroundPrimarySubtleOnElevationNegative: palette.darkPrimaryForest100,
321-
backgroundSurfaceElevationNegative: palette.darkGray000,
322-
backgroundTertiaryDefaultOnElevationNegative: palette.darkGray50,
323343
borderElevation0: palette.darkGray100,
324344
borderElevation1: palette.darkGray200,
325345
borderElevation2: palette.darkGray300,

‎scripts/convertFigmaPalette.ts

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { hideBin } from 'yargs/helpers';
2222

2323
const normalizeName = (name: string) =>
2424
name
25+
.replace(/(-1)/g, 'Negative')
2526
.replace(/-/g, ' ')
2627
.replace(/\//g, ' ')
2728
.replace(/[^a-zA-Z0-9 ]/g, '')

0 commit comments

Comments
 (0)