@commercetools-uikit/design-system 19.0.0 → 19.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/commercetools-uikit-design-system.cjs.dev.js +143 -371
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +143 -371
  3. package/dist/commercetools-uikit-design-system.esm.js +143 -371
  4. package/dist/declarations/src/design-tokens.d.ts +136 -367
  5. package/materials/custom-properties.css +68 -158
  6. package/materials/custom-properties.json +68 -126
  7. package/materials/custom-properties_default.css +68 -158
  8. package/materials/custom-properties_recolouring.css +9 -83
  9. package/materials/internals/definition.yaml +71 -457
  10. package/package.json +2 -2
package/dist/commercetools-uikit-design-system.esm.js CHANGED
@@ -29,54 +29,54 @@ import { jsx } from '@emotion/react/jsx-runtime';
29
29
  */
30
30
  const themes = {
31
31
  default: {
32
- colorPrimary: 'hsl(175, 55%, 45%)',
33
- colorPrimary10: 'hsl(175, 55%, 10%)',
34
- colorPrimary20: 'hsl(175, 55%, 20%)',
35
- colorPrimary25: 'hsl(175, 55%, 25%)',
36
- colorPrimary30: 'hsl(175, 55%, 30%)',
37
- colorPrimary40: 'hsl(175, 55%, 40%)',
38
- colorPrimary85: 'hsl(175, 70%, 85%)',
39
- colorPrimary90: 'hsl(175, 70%, 90%)',
40
- colorPrimary95: 'hsl(175, 90%, 95%)',
41
- colorPrimary98: 'hsl(175, 100%, 99%)',
32
+ colorPrimary: 'hsl(240, 64%, 58%)',
33
+ colorPrimary10: 'hsl(240, 66%, 19%)',
34
+ colorPrimary20: 'hsl(240, 45%, 33%)',
35
+ colorPrimary25: 'hsl(240, 46%, 48%)',
36
+ colorPrimary30: 'hsl(240, 46%, 53%)',
37
+ colorPrimary40: 'hsl(240, 100%, 67%)',
38
+ colorPrimary85: 'hsl(244, 100%, 84%)',
39
+ colorPrimary90: 'hsl(243, 100%, 93%)',
40
+ colorPrimary95: 'hsl(244, 100%, 97%)',
41
+ colorPrimary98: 'hsl(244, 100%, 99%)',
42
42
  colorAccent: '#213c45',
43
- colorAccent10: 'hsl(195, 35.2941176471%, 10%)',
44
- colorAccent20: 'hsl(195, 35.2941176471%, 20%)',
45
- colorAccent30: 'hsl(195, 35.2941176471%, 30%)',
46
- colorAccent40: 'hsl(195, 35.2941176471%, 40%)',
47
- colorAccent50: 'hsl(195, 35%, 50%)',
48
- colorAccent60: 'hsl(195, 35.2941176471%, 60%)',
49
- colorAccent85: 'hsl(195, 35%, 85%)',
50
- colorAccent90: 'hsl(195, 35.2941176471%, 90%)',
51
- colorAccent95: 'hsl(195, 35.2941176471%, 95%)',
52
- colorAccent98: 'hsl(195, 35.2941176471%, 98%)',
53
- colorBrown10: 'hsl(35, 90%, 10%)',
54
- colorBrown20: 'hsl(35, 50%, 20%)',
55
- colorBrown35: 'hsl(35, 25%, 35%)',
56
- colorBrown50: 'hsl(35, 30%, 50%)',
57
- colorBrown70: 'hsl(35, 40%, 70%)',
58
- colorBrown85: 'hsl(35, 60%, 85%)',
59
- colorBrown90: 'hsl(35, 90%, 90%)',
60
- colorBrown95: 'hsl(35, 80%, 95%)',
61
- colorBrown98: 'hsl(35, 90%, 98%)',
62
- colorPurple10: 'hsl(248, 90%, 10%)',
43
+ colorAccent10: 'hsl(195, 100%, 10%)',
44
+ colorAccent20: 'hsl(195, 80%, 20%)',
45
+ colorAccent30: 'hsl(195, 70%, 30%)',
46
+ colorAccent40: 'hsl(195, 70%, 40%)',
47
+ colorAccent50: 'hsl(195, 70%, 50%)',
48
+ colorAccent60: 'hsl(195, 70%, 60%)',
49
+ colorAccent85: 'hsl(195, 85%, 85%)',
50
+ colorAccent90: 'hsl(195, 90%, 90%)',
51
+ colorAccent95: 'hsl(195, 95%, 95%)',
52
+ colorAccent98: 'hsl(195, 100%, 98%)',
53
+ colorBrown10: 'hsl(41, 100%, 10%)',
54
+ colorBrown20: 'hsl(41, 100%, 20%)',
55
+ colorBrown35: 'hsl(41, 96%, 35%)',
56
+ colorBrown50: 'hsl(41, 95%, 44%)',
57
+ colorBrown70: 'hsl(47, 95%, 70%)',
58
+ colorBrown85: 'hsl(47, 100%, 85%)',
59
+ colorBrown90: 'hsl(47, 100%, 90%)',
60
+ colorBrown95: 'hsl(47, 100%, 95%)',
61
+ colorBrown98: 'hsl(48, 100%, 97%)',
62
+ colorPurple10: 'hsl(248, 88%, 10%)',
63
63
  colorPurple20: 'hsl(248, 50%, 20%)',
64
64
  colorPurple35: 'hsl(248, 25%, 35%)',
65
- colorPurple50: 'hsl(248, 30%,50%)',
66
- colorPurple70: 'hsl(248, 40%, 70%)',
67
- colorPurple85: 'hsl(248, 60%, 85%)',
68
- colorPurple90: 'hsl(248, 50%, 90%)',
69
- colorPurple95: 'hsl(248, 80%, 95%)',
70
- colorPurple98: 'hsl(248, 90%, 98%)',
71
- colorTurquoise10: 'hsl(180, 90%, 10%)',
72
- colorTurquoise20: 'hsl(180, 50%, 20%)',
73
- colorTurquoise35: 'hsl(180, 25%, 35%)',
74
- colorTurquoise50: 'hsl(180, 30%, 45%)',
75
- colorTurquoise70: 'hsl(180, 40%, 70%)',
76
- colorTurquoise85: 'hsl(180, 60%, 85%)',
77
- colorTurquoise90: 'hsl(180, 40%, 90%)',
78
- colorTurquoise95: 'hsl(180, 80%, 95%)',
79
- colorTurquoise98: 'hsl(180, 90%, 98%)',
65
+ colorPurple50: 'hsl(248, 64%, 58%)',
66
+ colorPurple70: 'hsl(248, 80%, 70%)',
67
+ colorPurple85: 'hsl(249, 100%, 85%)',
68
+ colorPurple90: 'hsl(248, 100%, 90%)',
69
+ colorPurple95: 'hsl(248, 100%, 95%)',
70
+ colorPurple98: 'hsl(246, 100%, 98%)',
71
+ colorTurquoise10: 'hsl(180, 88%, 10%)',
72
+ colorTurquoise20: 'hsl(180, 90%, 20%)',
73
+ colorTurquoise35: 'hsl(178, 88%, 35%)',
74
+ colorTurquoise50: 'hsl(178, 67%, 50%)',
75
+ colorTurquoise70: 'hsl(180, 75%, 70%)',
76
+ colorTurquoise85: 'hsl(180, 90%, 85%)',
77
+ colorTurquoise90: 'hsl(180, 88%, 90%)',
78
+ colorTurquoise95: 'hsl(180, 88%, 95%)',
79
+ colorTurquoise98: 'hsl(180, 100%, 98%)',
80
80
  colorNeutral: 'hsl(232, 18%, 80%)',
81
81
  colorNeutral05: 'hsl(0deg 0% 80% / 5%)',
82
82
  colorNeutral10: 'hsl(0deg 0% 80% / 10%)',
@@ -92,17 +92,17 @@ const themes = {
92
92
  colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
93
93
  colorInfo90: '#CEEBFD',
94
94
  colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
95
- colorWarning: '#f16d0e',
96
- colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
97
- colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)',
98
- colorWarning60: 'hsl(25.110132158590307, 90%, 60%)',
99
- colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
100
- colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
101
- colorError: '#e60050',
102
- colorError25: 'hsl(339.1304347826087, 100%, 25%)',
103
- colorError40: 'hsl(339.1304347826087, 100%, 40%)',
104
- colorError85: 'hsl(339.1304347826087, 100%, 85%)',
105
- colorError95: 'hsl(339.1304347826087, 100%, 95%)',
95
+ colorWarning: 'hsl(35, 90%, 45%)',
96
+ colorWarning25: 'hsl(33, 83%, 25%)',
97
+ colorWarning40: 'hsl(33, 80%, 34%)',
98
+ colorWarning60: 'hsl(35, 90%, 55%)',
99
+ colorWarning85: 'hsl(33, 90%, 80%)',
100
+ colorWarning95: 'hsl(45, 100%, 92%)',
101
+ colorError: 'hsl(3, 65%, 58%)',
102
+ colorError25: 'hsl(4, 69%, 37%)',
103
+ colorError40: 'hsl(3, 60%, 46%)',
104
+ colorError85: 'hsl(1, 55%, 74%)',
105
+ colorError95: 'hsl(349, 66%, 92%)',
106
106
  colorSolid: '#1a1a1a',
107
107
  colorSolid02: 'hsl(0deg 0% 10% / 2%)',
108
108
  colorSolid05: 'hsl(0deg 0% 10% / 5%)',
@@ -211,264 +211,91 @@ const themes = {
211
211
  breakPointBiggerdesktop: '1280px',
212
212
  breakPointGiantdesktop: '1680px',
213
213
  breakPointJumbodesktop: '1920px',
214
- backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)',
215
- backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)',
216
- backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
217
- backgroundColorForIconButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
218
214
  backgroundColorForInput: '#fff',
219
- backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
220
215
  backgroundColorForInputWhenDisabled: 'hsl(232, 18%, 95%)',
221
- backgroundColorForInputWhenHovered: 'hsl(232, 18%, 98%)',
222
- backgroundColorForInputWhenFocused: '#fff',
223
216
  backgroundColorForInputWhenReadonly: 'hsl(232, 18%, 95%)',
224
- backgroundColorForInputWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
225
- backgroundColorForInputAsQuiet: 'transparent',
226
- backgroundColorForInputAsQuietWhenHovered: 'hsl(0deg 0% 10% / 2%)',
217
+ backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)',
227
218
  backgroundColorForLocalizedInputLabel: '#fff',
228
219
  backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(232, 18%, 95%)',
229
220
  backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(232, 18%, 95%)',
230
- backgroundColorForButtonAsPrimary: '#15a390',
231
- backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(175, 55%, 45%)',
232
- backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: '#17ab97',
233
- backgroundColorForButtonAsPrimaryAsDefaultWhenActive: '#15a390',
234
- backgroundColorForButtonAsPrimaryAsUrgent: '#f16d0e',
235
- backgroundColorForStampAsPrimary: 'hsl(175, 70%, 90%)',
236
- backgroundColorForStampAsPositive: 'hsl(175, 70%, 90%)',
237
- backgroundColorForToggleThumbWhenActive: 'hsl(175, 55%, 25%)',
238
- backgroundColorForToggleTrackWhenActive: 'hsl(175, 55%, 40%)',
239
- backgroundColorForToggleThumbWhenDisabled: 'hsl(195, 35.2941176471%, 60%)',
240
- backgroundColorForToggleTrackWhenDisabled: 'hsl(195, 35.2941176471%, 90%)',
241
- backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(232, 18%, 60%)',
242
- backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(232, 18%, 90%)',
243
- backgroundColorForToggleThumbWhenHovered: 'rgba(0, 0, 0, 0.1)',
244
- backgroundColorForLoadingSpinnerTrack: '#213c45',
245
- backgroundColorForLoadingSpinnerDot: '#213c45',
246
- backgroundColorForContentNotificationWhenSuccess: 'hsl(175, 90%, 95%)',
247
- backgroundColorForViewSwitcherButtonWhenActive: 'hsl(232, 18%, 95%)',
248
- backgroundColorForCheckboxInputWhenHovered: 'hsl(232, 18%, 90%)',
249
- backgroundColorForRadioOptionWhenHovered: 'hsl(232, 18%, 90%)',
250
- backgroundColorForTag: 'hsl(232, 18%, 95%)',
251
- backgroundColorForTagWhenHovered: 'hsl(232, 18%, 90%)',
252
- backgroundColorForDropdownWhenHovered: 'hsl(232, 18%, 95%)',
253
- backgroundColorForDropdownWhenActive: 'hsl(232, 18%, 90%)',
254
- backgroundColorForDropdownOptionWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
221
+ backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)',
222
+ backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)',
223
+ backgroundColorForButtonWhenDisabled: 'hsl(232, 18%, 95%)',
255
224
  borderColorForInput: 'hsl(232, 18%, 80%)',
256
- borderColorForInputWhenFocused: 'hsl(175, 55%, 45%)',
257
225
  borderColorForInputWhenDisabled: 'hsl(232, 18%, 80%)',
258
226
  borderColorForInputWhenReadonly: '#fff',
259
- borderColorForInputWhenError: '#e60050',
260
- borderColorForInputWhenWarning: '#f16d0e',
227
+ borderColorForInputWhenError: 'hsl(3, 65%, 58%)',
228
+ borderColorForInputWhenWarning: 'hsl(35, 90%, 45%)',
261
229
  borderColorForInputWhenHovered: 'hsl(232, 18%, 80%)',
262
- borderColorForInputAsQuiet: 'transparent',
263
- borderColorForButtonAsSecondary: 'hsl(232, 18%, 80%)',
264
- borderColorForDropdown: 'hsl(232, 18%, 80%)',
265
- borderColorForContentNotificationWhenSuccess: 'hsl(175, 70%, 85%)',
266
- borderColorForCheckboxInput: 'hsl(175, 55%, 45%)',
267
- borderColorForCheckboxInputWhenActive: 'hsl(175, 55%, 45%)',
268
- borderColorForTag: 'hsl(232, 18%, 85%)',
269
- borderRadiusForButtonAsBig: '4px',
270
- borderRadiusForButtonAsMedium: '4px',
230
+ borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)',
231
+ borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)',
271
232
  borderRadiusForInput: '4px',
272
- borderWidthForInput: '1px',
273
- borderWidthForInputWhenWarning: '1px',
274
- borderWidthForInputWhenError: '1px',
275
- borderWidthForInputWhenFocused: '1px',
276
233
  fontColorForInput: '#1a1a1a',
277
234
  fontColorForInputWhenDisabled: 'hsl(232, 18%, 60%)',
278
- fontColorForInputWhenError: '#e60050',
235
+ fontColorForInputWhenError: 'hsl(3, 60%, 46%)',
279
236
  fontColorForInputWhenReadonly: 'hsl(232, 18%, 40%)',
280
- fontColorForInputWhenWarning: '#f16d0e',
281
- fontColorForButtonAsSecondary: '#1a1a1a',
282
- fontColorForButtonAsFlatWhenHovered: 'hsl(175, 55%, 45%)',
283
- fontColorForButtonAsFlatAsCritical: '#e60050',
284
- fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)',
285
- fontColorForViewSwitcherButton: 'hsl(232, 18%, 40%)',
286
- fontColorForStampAsPositive: 'hsl(175, 55%, 25%)',
287
- fontColorForContentNotificationWhenSuccess: 'hsl(175, 55%, 45%)',
288
- fontColorForAvatarAsTurquoise: 'hsl(180, 30%, 45%)',
289
- fontColorForLeadingIconAsTurquoise: 'hsl(180, 30%, 45%)',
290
- fontColorForTextAsPositive: 'hsl(175, 55%, 25%)',
237
+ fontColorForInputWhenWarning: 'hsl(35, 90%, 45%)',
238
+ fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)',
291
239
  heightForButtonAsBig: '40px',
292
- heightForButtonAsMedium: '32px',
293
240
  heightForButtonAsSmall: '16px',
241
+ heightForButtonAsMedium: '32px',
294
242
  heightForInput: '40px',
295
243
  heightForInputAsSmall: '32px',
296
- placeholderFontColorForInput: 'hsl(232, 18%, 60%)',
297
- fontSizeForButton: '0.875rem',
298
- fontSizeForInput: '1rem',
299
- paddingForInput: '0 var(--spacing-30)',
300
- paddingForInputAsQuiet: '0 var(--spacing-20)',
301
- paddingForButton: '0 var(--spacing-30)',
302
244
  shadowForInput: 'none',
303
245
  shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)',
304
246
  shadowForInputWhenError: 'inset 0 0 0 1px var(--color-error)',
305
247
  shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)'
306
- },
307
- recolouring: {
308
- colorPrimary: 'hsl(240, 64%, 58%)',
309
- colorPrimary10: 'hsl(240, 66%, 19%)',
310
- colorPrimary20: 'hsl(240, 45%, 33%)',
311
- colorPrimary25: 'hsl(240, 46%, 48%)',
312
- colorPrimary30: 'hsl(240, 46%, 53%)',
313
- colorPrimary40: 'hsl(240, 100%, 67%)',
314
- colorPrimary85: 'hsl(244, 100%, 84%)',
315
- colorPrimary90: 'hsl(243, 100%, 93%)',
316
- colorPrimary95: 'hsl(244, 100%, 97%)',
317
- colorPrimary98: 'hsl(244, 100%, 99%)',
318
- colorAccent10: 'hsl(195, 100%, 10%)',
319
- colorAccent20: 'hsl(195, 80%, 20%)',
320
- colorAccent30: 'hsl(195, 70%, 30%)',
321
- colorAccent40: 'hsl(195, 70%, 40%)',
322
- colorAccent50: 'hsl(195, 70%, 50%)',
323
- colorAccent60: 'hsl(195, 70%, 60%)',
324
- colorAccent85: 'hsl(195, 85%, 85%)',
325
- colorAccent90: 'hsl(195, 90%, 90%)',
326
- colorAccent95: 'hsl(195, 95%, 95%)',
327
- colorAccent98: 'hsl(195, 100%, 98%)',
328
- colorBrown10: 'hsl(41, 100%, 10%)',
329
- colorBrown20: 'hsl(41, 100%, 20%)',
330
- colorBrown35: 'hsl(41, 96%, 35%)',
331
- colorBrown50: 'hsl(41, 95%, 44%)',
332
- colorBrown70: 'hsl(47, 95%, 70%)',
333
- colorBrown85: 'hsl(47, 100%, 85%)',
334
- colorBrown90: 'hsl(47, 100%, 90%)',
335
- colorBrown95: 'hsl(47, 100%, 95%)',
336
- colorBrown98: 'hsl(48, 100%, 97%)',
337
- colorPurple10: 'hsl(248, 88%, 10%)',
338
- colorPurple20: 'hsl(248, 50%, 20%)',
339
- colorPurple35: 'hsl(248, 25%, 35%)',
340
- colorPurple50: 'hsl(248, 64%, 58%)',
341
- colorPurple70: 'hsl(248, 80%, 70%)',
342
- colorPurple85: 'hsl(249, 100%, 85%)',
343
- colorPurple90: 'hsl(248, 100%, 90%)',
344
- colorPurple95: 'hsl(248, 100%, 95%)',
345
- colorPurple98: 'hsl(246, 100%, 98%)',
346
- colorTurquoise10: 'hsl(180, 88%, 10%)',
347
- colorTurquoise20: 'hsl(180, 90%, 20%)',
348
- colorTurquoise35: 'hsl(178, 88%, 35%)',
349
- colorTurquoise50: 'hsl(178, 67%, 50%)',
350
- colorTurquoise70: 'hsl(180, 75%, 70%)',
351
- colorTurquoise85: 'hsl(180, 90%, 85%)',
352
- colorTurquoise90: 'hsl(180, 88%, 90%)',
353
- colorTurquoise95: 'hsl(180, 88%, 95%)',
354
- colorTurquoise98: 'hsl(180, 100%, 98%)',
355
- colorSuccess: 'hsl(152, 77%, 39%)',
356
- colorSuccess25: 'hsl(155, 84%, 20%)',
357
- colorSuccess40: 'hsl(155, 90%, 24%)',
358
- colorSuccess85: 'hsl(144, 69%, 80%)',
359
- colorSuccess95: 'hsl(141, 76%, 92%)',
360
- colorWarning: 'hsl(35, 90%, 45%)',
361
- colorWarning25: 'hsl(33, 83%, 25%)',
362
- colorWarning40: 'hsl(33, 80%, 34%)',
363
- colorWarning60: 'hsl(35, 90%, 55%)',
364
- colorWarning85: 'hsl(33, 90%, 80%)',
365
- colorWarning95: 'hsl(45, 100%, 92%)',
366
- colorError: 'hsl(3, 65%, 58%)',
367
- colorError25: 'hsl(4, 69%, 37%)',
368
- colorError40: 'hsl(3, 60%, 46%)',
369
- colorError85: 'hsl(1, 55%, 74%)',
370
- colorError95: 'hsl(349, 66%, 92%)',
371
- borderColorForButtonAsSecondary: 'hsl(244, 100%, 84%)',
372
- borderColorForDropdown: 'hsl(244, 100%, 84%)',
373
- borderColorForInputWhenFocused: 'hsl(240, 100%, 67%)',
374
- borderColorForContentNotificationWhenSuccess: 'hsl(144, 69%, 80%)',
375
- borderColorForCheckboxInput: 'hsl(232, 18%, 60%)',
376
- borderColorForCheckboxInputWhenActive: 'hsl(240, 64%, 58%)',
377
- borderColorForTag: 'hsl(243, 100%, 93%)',
378
- backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)',
379
- backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)',
380
- backgroundColorForIconButtonWhenDisabled: 'transparent',
381
- backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)',
382
- backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)',
383
- backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)',
384
- backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'hsl(240, 46%, 48%)',
385
- backgroundColorForButtonAsPrimaryAsUrgent: 'hsl(35, 90%, 55%)',
386
- backgroundColorForInputWhenSelected: 'hsl(244, 100%, 97%)',
387
- backgroundColorForStampAsPrimary: 'hsl(244, 100%, 97%)',
388
- backgroundColorForStampAsPositive: 'hsl(141, 76%, 92%)',
389
- backgroundColorForToggleThumbWhenActive: 'hsl(240, 100%, 67%)',
390
- backgroundColorForToggleTrackWhenActive: 'hsl(244, 100%, 84%)',
391
- backgroundColorForToggleThumbWhenDisabled: 'hsl(232, 18%, 60%)',
392
- backgroundColorForToggleTrackWhenDisabled: 'hsl(232, 18%, 90%)',
393
- backgroundColorForToggleThumbWhenActiveWhenDisabled: 'hsl(244, 100%, 84%)',
394
- backgroundColorForToggleTrackWhenActiveWhenDisabled: 'hsl(243, 100%, 93%)',
395
- backgroundColorForToggleThumbWhenHovered: 'hsla(240, 64%, 58%, 4%)',
396
- backgroundColorForLoadingSpinnerTrack: 'hsl(243, 100%, 93%)',
397
- backgroundColorForLoadingSpinnerDot: 'hsl(240, 64%, 58%)',
398
- backgroundColorForContentNotificationWhenSuccess: 'hsl(141, 76%, 92%)',
399
- backgroundColorForViewSwitcherButtonWhenActive: 'hsl(244, 100%, 97%)',
400
- backgroundColorForCheckboxInputWhenHovered: 'hsl(244, 100%, 97%)',
401
- backgroundColorForRadioOptionWhenHovered: 'hsl(244, 100%, 97%)',
402
- backgroundColorForTag: 'hsl(244, 100%, 97%)',
403
- backgroundColorForTagWhenHovered: 'hsl(243, 100%, 93%)',
404
- backgroundColorForDropdownWhenHovered: 'hsl(244, 100%, 97%)',
405
- backgroundColorForDropdownWhenActive: 'hsl(243, 100%, 93%)',
406
- backgroundColorForDropdownOptionWhenActive: 'hsl(244, 100%, 97%)',
407
- backgroundColorForInputAsQuietWhenHovered: 'hsla(240, 64%, 58%, 4%)',
408
- backgroundColorForInputWhenActive: 'hsl(244, 100%, 97%)',
409
- backgroundColorForInputWhenHovered: 'hsl(244, 100%, 99%)',
410
- fontColorForButtonAsSecondary: 'hsl(240, 64%, 58%)',
411
- fontColorForButtonAsFlatWhenHovered: 'hsl(240, 100%, 67%)',
412
- fontColorForButtonAsFlatAsCritical: 'hsl(3, 60%, 46%)',
413
- fontColorForButtonAsFlatAsCriticalWhenHovered: 'hsl(3, 65%, 58%)',
414
- fontColorForViewSwitcherButton: 'hsl(240, 64%, 58%)',
415
- fontColorForInputWhenError: 'hsl(3, 60%, 46%)',
416
- fontColorForStampAsPositive: 'hsl(155, 90%, 24%)',
417
- fontColorForContentNotificationWhenSuccess: 'hsl(152, 77%, 39%)',
418
- fontColorForAvatarAsTurquoise: 'hsl(178, 88%, 35%)',
419
- fontColorForLeadingIconAsTurquoise: 'hsl(178, 88%, 35%)',
420
- fontColorForTextAsPositive: 'hsl(155, 90%, 24%)'
421
248
  }
422
249
  };
423
250
  const designTokens = {
424
- colorPrimary: 'var(--color-primary, hsl(175, 55%, 45%))',
425
- colorPrimary10: 'var(--color-primary-10, hsl(175, 55%, 10%))',
426
- colorPrimary20: 'var(--color-primary-20, hsl(175, 55%, 20%))',
427
- colorPrimary25: 'var(--color-primary-25, hsl(175, 55%, 25%))',
428
- colorPrimary30: 'var(--color-primary-30, hsl(175, 55%, 30%))',
429
- colorPrimary40: 'var(--color-primary-40, hsl(175, 55%, 40%))',
430
- colorPrimary85: 'var(--color-primary-85, hsl(175, 70%, 85%))',
431
- colorPrimary90: 'var(--color-primary-90, hsl(175, 70%, 90%))',
432
- colorPrimary95: 'var(--color-primary-95, hsl(175, 90%, 95%))',
433
- colorPrimary98: 'var(--color-primary-98, hsl(175, 100%, 99%))',
251
+ colorPrimary: 'var(--color-primary, hsl(240, 64%, 58%))',
252
+ colorPrimary10: 'var(--color-primary-10, hsl(240, 66%, 19%))',
253
+ colorPrimary20: 'var(--color-primary-20, hsl(240, 45%, 33%))',
254
+ colorPrimary25: 'var(--color-primary-25, hsl(240, 46%, 48%))',
255
+ colorPrimary30: 'var(--color-primary-30, hsl(240, 46%, 53%))',
256
+ colorPrimary40: 'var(--color-primary-40, hsl(240, 100%, 67%))',
257
+ colorPrimary85: 'var(--color-primary-85, hsl(244, 100%, 84%))',
258
+ colorPrimary90: 'var(--color-primary-90, hsl(243, 100%, 93%))',
259
+ colorPrimary95: 'var(--color-primary-95, hsl(244, 100%, 97%))',
260
+ colorPrimary98: 'var(--color-primary-98, hsl(244, 100%, 99%))',
434
261
  colorAccent: 'var(--color-accent, #213c45)',
435
- colorAccent10: 'var(--color-accent-10, hsl(195, 35.2941176471%, 10%))',
436
- colorAccent20: 'var(--color-accent-20, hsl(195, 35.2941176471%, 20%))',
437
- colorAccent30: 'var(--color-accent-30, hsl(195, 35.2941176471%, 30%))',
438
- colorAccent40: 'var(--color-accent-40, hsl(195, 35.2941176471%, 40%))',
439
- colorAccent50: 'var(--color-accent-50, hsl(195, 35%, 50%))',
440
- colorAccent60: 'var(--color-accent-60, hsl(195, 35.2941176471%, 60%))',
441
- colorAccent85: 'var(--color-accent-85, hsl(195, 35%, 85%))',
442
- colorAccent90: 'var(--color-accent-90, hsl(195, 35.2941176471%, 90%))',
443
- colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))',
444
- colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))',
445
- colorBrown10: 'var(--color-brown-10, hsl(35, 90%, 10%))',
446
- colorBrown20: 'var(--color-brown-20, hsl(35, 50%, 20%))',
447
- colorBrown35: 'var(--color-brown-35, hsl(35, 25%, 35%))',
448
- colorBrown50: 'var(--color-brown-50, hsl(35, 30%, 50%))',
449
- colorBrown70: 'var(--color-brown-70, hsl(35, 40%, 70%))',
450
- colorBrown85: 'var(--color-brown-85, hsl(35, 60%, 85%))',
451
- colorBrown90: 'var(--color-brown-90, hsl(35, 90%, 90%))',
452
- colorBrown95: 'var(--color-brown-95, hsl(35, 80%, 95%))',
453
- colorBrown98: 'var(--color-brown-98, hsl(35, 90%, 98%))',
454
- colorPurple10: 'var(--color-purple-10, hsl(248, 90%, 10%))',
262
+ colorAccent10: 'var(--color-accent-10, hsl(195, 100%, 10%))',
263
+ colorAccent20: 'var(--color-accent-20, hsl(195, 80%, 20%))',
264
+ colorAccent30: 'var(--color-accent-30, hsl(195, 70%, 30%))',
265
+ colorAccent40: 'var(--color-accent-40, hsl(195, 70%, 40%))',
266
+ colorAccent50: 'var(--color-accent-50, hsl(195, 70%, 50%))',
267
+ colorAccent60: 'var(--color-accent-60, hsl(195, 70%, 60%))',
268
+ colorAccent85: 'var(--color-accent-85, hsl(195, 85%, 85%))',
269
+ colorAccent90: 'var(--color-accent-90, hsl(195, 90%, 90%))',
270
+ colorAccent95: 'var(--color-accent-95, hsl(195, 95%, 95%))',
271
+ colorAccent98: 'var(--color-accent-98, hsl(195, 100%, 98%))',
272
+ colorBrown10: 'var(--color-brown-10, hsl(41, 100%, 10%))',
273
+ colorBrown20: 'var(--color-brown-20, hsl(41, 100%, 20%))',
274
+ colorBrown35: 'var(--color-brown-35, hsl(41, 96%, 35%))',
275
+ colorBrown50: 'var(--color-brown-50, hsl(41, 95%, 44%))',
276
+ colorBrown70: 'var(--color-brown-70, hsl(47, 95%, 70%))',
277
+ colorBrown85: 'var(--color-brown-85, hsl(47, 100%, 85%))',
278
+ colorBrown90: 'var(--color-brown-90, hsl(47, 100%, 90%))',
279
+ colorBrown95: 'var(--color-brown-95, hsl(47, 100%, 95%))',
280
+ colorBrown98: 'var(--color-brown-98, hsl(48, 100%, 97%))',
281
+ colorPurple10: 'var(--color-purple-10, hsl(248, 88%, 10%))',
455
282
  colorPurple20: 'var(--color-purple-20, hsl(248, 50%, 20%))',
456
283
  colorPurple35: 'var(--color-purple-35, hsl(248, 25%, 35%))',
457
- colorPurple50: 'var(--color-purple-50, hsl(248, 30%,50%))',
458
- colorPurple70: 'var(--color-purple-70, hsl(248, 40%, 70%))',
459
- colorPurple85: 'var(--color-purple-85, hsl(248, 60%, 85%))',
460
- colorPurple90: 'var(--color-purple-90, hsl(248, 50%, 90%))',
461
- colorPurple95: 'var(--color-purple-95, hsl(248, 80%, 95%))',
462
- colorPurple98: 'var(--color-purple-98, hsl(248, 90%, 98%))',
463
- colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 90%, 10%))',
464
- colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 50%, 20%))',
465
- colorTurquoise35: 'var(--color-turquoise-35, hsl(180, 25%, 35%))',
466
- colorTurquoise50: 'var(--color-turquoise-50, hsl(180, 30%, 45%))',
467
- colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 40%, 70%))',
468
- colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 60%, 85%))',
469
- colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 40%, 90%))',
470
- colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 80%, 95%))',
471
- colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 90%, 98%))',
284
+ colorPurple50: 'var(--color-purple-50, hsl(248, 64%, 58%))',
285
+ colorPurple70: 'var(--color-purple-70, hsl(248, 80%, 70%))',
286
+ colorPurple85: 'var(--color-purple-85, hsl(249, 100%, 85%))',
287
+ colorPurple90: 'var(--color-purple-90, hsl(248, 100%, 90%))',
288
+ colorPurple95: 'var(--color-purple-95, hsl(248, 100%, 95%))',
289
+ colorPurple98: 'var(--color-purple-98, hsl(246, 100%, 98%))',
290
+ colorTurquoise10: 'var(--color-turquoise-10, hsl(180, 88%, 10%))',
291
+ colorTurquoise20: 'var(--color-turquoise-20, hsl(180, 90%, 20%))',
292
+ colorTurquoise35: 'var(--color-turquoise-35, hsl(178, 88%, 35%))',
293
+ colorTurquoise50: 'var(--color-turquoise-50, hsl(178, 67%, 50%))',
294
+ colorTurquoise70: 'var(--color-turquoise-70, hsl(180, 75%, 70%))',
295
+ colorTurquoise85: 'var(--color-turquoise-85, hsl(180, 90%, 85%))',
296
+ colorTurquoise90: 'var(--color-turquoise-90, hsl(180, 88%, 90%))',
297
+ colorTurquoise95: 'var(--color-turquoise-95, hsl(180, 88%, 95%))',
298
+ colorTurquoise98: 'var(--color-turquoise-98, hsl(180, 100%, 98%))',
472
299
  colorNeutral: 'var(--color-neutral, hsl(232, 18%, 80%))',
473
300
  colorNeutral05: 'var(--color-neutral-05, hsl(0deg 0% 80% / 5%))',
474
301
  colorNeutral10: 'var(--color-neutral-10, hsl(0deg 0% 80% / 10%))',
@@ -484,17 +311,17 @@ const designTokens = {
484
311
  colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
485
312
  colorInfo90: 'var(--color-info-90, #CEEBFD)',
486
313
  colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
487
- colorWarning: 'var(--color-warning, #f16d0e)',
488
- colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))',
489
- colorWarning40: 'var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))',
490
- colorWarning60: 'var(--color-warning-60, hsl(25.110132158590307, 90%, 60%))',
491
- colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))',
492
- colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))',
493
- colorError: 'var(--color-error, #e60050)',
494
- colorError25: 'var(--color-error-25, hsl(339.1304347826087, 100%, 25%))',
495
- colorError40: 'var(--color-error-40, hsl(339.1304347826087, 100%, 40%))',
496
- colorError85: 'var(--color-error-85, hsl(339.1304347826087, 100%, 85%))',
497
- colorError95: 'var(--color-error-95, hsl(339.1304347826087, 100%, 95%))',
314
+ colorWarning: 'var(--color-warning, hsl(35, 90%, 45%))',
315
+ colorWarning25: 'var(--color-warning-25, hsl(33, 83%, 25%))',
316
+ colorWarning40: 'var(--color-warning-40, hsl(33, 80%, 34%))',
317
+ colorWarning60: 'var(--color-warning-60, hsl(35, 90%, 55%))',
318
+ colorWarning85: 'var(--color-warning-85, hsl(33, 90%, 80%))',
319
+ colorWarning95: 'var(--color-warning-95, hsl(45, 100%, 92%))',
320
+ colorError: 'var(--color-error, hsl(3, 65%, 58%))',
321
+ colorError25: 'var(--color-error-25, hsl(4, 69%, 37%))',
322
+ colorError40: 'var(--color-error-40, hsl(3, 60%, 46%))',
323
+ colorError85: 'var(--color-error-85, hsl(1, 55%, 74%))',
324
+ colorError95: 'var(--color-error-95, hsl(349, 66%, 92%))',
498
325
  colorSolid: 'var(--color-solid, #1a1a1a)',
499
326
  colorSolid02: 'var(--color-solid-02, hsl(0deg 0% 10% / 2%))',
500
327
  colorSolid05: 'var(--color-solid-05, hsl(0deg 0% 10% / 5%))',
@@ -603,94 +430,36 @@ const designTokens = {
603
430
  breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)',
604
431
  breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)',
605
432
  breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)',
606
- backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(232, 18%, 95%))',
607
- backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))',
608
- backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
609
- backgroundColorForIconButtonWhenDisabled: 'var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
610
433
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
611
- backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
612
434
  backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))',
613
- backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))',
614
- backgroundColorForInputWhenFocused: 'var(--background-color-for-input-when-focused, #fff)',
615
435
  backgroundColorForInputWhenReadonly: 'var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))',
616
- backgroundColorForInputWhenActive: 'var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))',
617
- backgroundColorForInputAsQuiet: 'var(--background-color-for-input-as-quiet, transparent)',
618
- backgroundColorForInputAsQuietWhenHovered: 'var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))',
436
+ backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(244, 100%, 99%))',
619
437
  backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)',
620
438
  backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))',
621
439
  backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))',
622
- backgroundColorForButtonAsPrimary: 'var(--background-color-for-button-as-primary, #15a390)',
623
- backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, hsl(175, 55%, 45%))',
624
- backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'var(--background-color-for-button-as-primary-as-default-when-hovered, #17ab97)',
625
- backgroundColorForButtonAsPrimaryAsDefaultWhenActive: 'var(--background-color-for-button-as-primary-as-default-when-active, #15a390)',
626
- backgroundColorForButtonAsPrimaryAsUrgent: 'var(--background-color-for-button-as-primary-as-urgent, #f16d0e)',
627
- backgroundColorForStampAsPrimary: 'var(--background-color-for-stamp-as-primary, hsl(175, 70%, 90%))',
628
- backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(175, 70%, 90%))',
629
- backgroundColorForToggleThumbWhenActive: 'var(--background-color-for-toggle-thumb-when-active, hsl(175, 55%, 25%))',
630
- backgroundColorForToggleTrackWhenActive: 'var(--background-color-for-toggle-track-when-active, hsl(175, 55%, 40%))',
631
- backgroundColorForToggleThumbWhenDisabled: 'var(--background-color-for-toggle-thumb-when-disabled, hsl(195, 35.2941176471%, 60%))',
632
- backgroundColorForToggleTrackWhenDisabled: 'var(--background-color-for-toggle-track-when-disabled, hsl(195, 35.2941176471%, 90%))',
633
- backgroundColorForToggleThumbWhenActiveWhenDisabled: 'var(--background-color-for-toggle-thumb-when-active-when-disabled, hsl(232, 18%, 60%))',
634
- backgroundColorForToggleTrackWhenActiveWhenDisabled: 'var(--background-color-for-toggle-track-when-active-when-disabled, hsl(232, 18%, 90%))',
635
- backgroundColorForToggleThumbWhenHovered: 'var(--background-color-for-toggle-thumb-when-hovered, rgba(0, 0, 0, 0.1))',
636
- backgroundColorForLoadingSpinnerTrack: 'var(--background-color-for-loading-spinner-track, #213c45)',
637
- backgroundColorForLoadingSpinnerDot: 'var(--background-color-for-loading-spinner-dot, #213c45)',
638
- backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(175, 90%, 95%))',
639
- backgroundColorForViewSwitcherButtonWhenActive: 'var(--background-color-for-view-switcher-button-when-active, hsl(232, 18%, 95%))',
640
- backgroundColorForCheckboxInputWhenHovered: 'var(--background-color-for-checkbox-input-when-hovered, hsl(232, 18%, 90%))',
641
- backgroundColorForRadioOptionWhenHovered: 'var(--background-color-for-radio-option-when-hovered, hsl(232, 18%, 90%))',
642
- backgroundColorForTag: 'var(--background-color-for-tag, hsl(232, 18%, 95%))',
643
- backgroundColorForTagWhenHovered: 'var(--background-color-for-tag-when-hovered, hsl(232, 18%, 90%))',
644
- backgroundColorForDropdownWhenHovered: 'var(--background-color-for-dropdown-when-hovered, hsl(232, 18%, 95%))',
645
- backgroundColorForDropdownWhenActive: 'var(--background-color-for-dropdown-when-active, hsl(232, 18%, 90%))',
646
- backgroundColorForDropdownOptionWhenActive: 'var(--background-color-for-dropdown-option-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))',
440
+ backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(243, 100%, 93%))',
441
+ backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(244, 100%, 97%))',
442
+ backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(232, 18%, 95%))',
647
443
  borderColorForInput: 'var(--border-color-for-input, hsl(232, 18%, 80%))',
648
- borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))',
649
444
  borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))',
650
445
  borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #fff)',
651
- borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)',
652
- borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)',
446
+ borderColorForInputWhenError: 'var(--border-color-for-input-when-error, hsl(3, 65%, 58%))',
447
+ borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))',
653
448
  borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))',
654
- borderColorForInputAsQuiet: 'var(--border-color-for-input-as-quiet, transparent)',
655
- borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(232, 18%, 80%))',
656
- borderColorForDropdown: 'var(--border-color-for-dropdown, hsl(232, 18%, 80%))',
657
- borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(175, 70%, 85%))',
658
- borderColorForCheckboxInput: 'var(--border-color-for-checkbox-input, hsl(175, 55%, 45%))',
659
- borderColorForCheckboxInputWhenActive: 'var(--border-color-for-checkbox-input-when-active, hsl(175, 55%, 45%))',
660
- borderColorForTag: 'var(--border-color-for-tag, hsl(232, 18%, 85%))',
661
- borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)',
662
- borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
449
+ borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))',
450
+ borderColorForButtonAsSecondary: 'var(--border-color-for-button-as-secondary, hsl(244, 100%, 84%))',
663
451
  borderRadiusForInput: 'var(--border-radius-for-input, 4px)',
664
- borderWidthForInput: 'var(--border-width-for-input, 1px)',
665
- borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)',
666
- borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)',
667
- borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)',
668
452
  fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
669
453
  fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))',
670
- fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)',
454
+ fontColorForInputWhenError: 'var(--font-color-for-input-when-error, hsl(3, 60%, 46%))',
671
455
  fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))',
672
- fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)',
673
- fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, #1a1a1a)',
674
- fontColorForButtonAsFlatWhenHovered: 'var(--font-color-for-button-as-flat-when-hovered, hsl(175, 55%, 45%))',
675
- fontColorForButtonAsFlatAsCritical: 'var(--font-color-for-button-as-flat-as-critical, #e60050)',
676
- fontColorForButtonAsFlatAsCriticalWhenHovered: 'var(--font-color-for-button-as-flat-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))',
677
- fontColorForViewSwitcherButton: 'var(--font-color-for-view-switcher-button, hsl(232, 18%, 40%))',
678
- fontColorForStampAsPositive: 'var(--font-color-for-stamp-as-positive, hsl(175, 55%, 25%))',
679
- fontColorForContentNotificationWhenSuccess: 'var(--font-color-for-content-notification-when-success, hsl(175, 55%, 45%))',
680
- fontColorForAvatarAsTurquoise: 'var(--font-color-for-avatar-as-turquoise, hsl(180, 30%, 45%))',
681
- fontColorForLeadingIconAsTurquoise: 'var(--font-color-for-leading-icon-as-turquoise, hsl(180, 30%, 45%))',
682
- fontColorForTextAsPositive: 'var(--font-color-for-text-as-positive, hsl(175, 55%, 25%))',
456
+ fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, hsl(35, 90%, 45%))',
457
+ fontColorForButtonAsSecondary: 'var(--font-color-for-button-as-secondary, hsl(240, 64%, 58%))',
683
458
  heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)',
684
- heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
685
459
  heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)',
460
+ heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
686
461
  heightForInput: 'var(--height-for-input, 40px)',
687
462
  heightForInputAsSmall: 'var(--height-for-input-as-small, 32px)',
688
- placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))',
689
- fontSizeForButton: 'var(--font-size-for-button, 0.875rem)',
690
- fontSizeForInput: 'var(--font-size-for-input, 1rem)',
691
- paddingForInput: 'var(--padding-for-input, 0 var(--spacing-30))',
692
- paddingForInputAsQuiet: 'var(--padding-for-input-as-quiet, 0 var(--spacing-20))',
693
- paddingForButton: 'var(--padding-for-button, 0 var(--spacing-30))',
694
463
  shadowForInput: 'var(--shadow-for-input, none)',
695
464
  shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))',
696
465
  shadowForInputWhenError: 'var(--shadow-for-input-when-error, inset 0 0 0 1px var(--color-error))',
@@ -826,7 +595,10 @@ const useTheme = function () {
826
595
  attributes: true,
827
596
  attributeFilter: ['data-theme']
828
597
  });
829
- const themedValue = useCallback((defaultThemeValue, newThemeValue) => theme === 'default' ? defaultThemeValue : newThemeValue, [theme]);
598
+
599
+ // TODO - make sure old and new theme return same value as new defaultThemeValue
600
+ // At least for the remaining places that we still use this function
601
+ const themedValue = useCallback((defaultThemeValue, _newThemeValue) => defaultThemeValue, []);
830
602
 
831
603
  // If we use 'useLayoutEffect' here, we would be trying to read the
832
604
  // data attribute before it gets set from the effect in the ThemeProvider
@@ -841,10 +613,10 @@ const useTheme = function () {
841
613
  }
842
614
  }, []);
843
615
  return {
844
- theme: 'default',
616
+ theme,
845
617
  themedValue,
846
618
  isNewTheme: false,
847
- isRecolouringTheme: theme === 'recolouring'
619
+ isRecolouringTheme: true
848
620
  };
849
621
  };
850
622
  const withThemeContext = WrappedComponent => {
@@ -856,6 +628,6 @@ const withThemeContext = WrappedComponent => {
856
628
  };
857
629
 
858
630
  // NOTE: This string will be replaced on build time with the package version.
859
- var version = "19.0.0";
631
+ var version = "19.2.0";
860
632
 
861
633
  export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext };