@commercetools-frontend/ui-kit 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-frontend-ui-kit.cjs.dev.js +7 -1
  2. package/dist/commercetools-frontend-ui-kit.cjs.prod.js +7 -1
  3. package/dist/commercetools-frontend-ui-kit.esm.js +2 -1
  4. package/dist/declarations/src/index.d.ts +1 -0
  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 +37 -36
package/materials/internals/definition.yaml CHANGED
@@ -36,54 +36,54 @@ choiceGroupsByTheme:
36
36
  prefix: color
37
37
  description: All colors in the system
38
38
  choices:
39
- color-primary: 'hsl(175, 55%, 45%)'
40
- color-primary-10: 'hsl(175, 55%, 10%)' # This design token is not used in the default theme; it's included only for export purposes
41
- color-primary-20: 'hsl(175, 55%, 20%)'
42
- color-primary-25: 'hsl(175, 55%, 25%)'
43
- color-primary-30: 'hsl(175, 55%, 30%)'
44
- color-primary-40: 'hsl(175, 55%, 40%)'
45
- color-primary-85: 'hsl(175, 70%, 85%)'
46
- color-primary-90: 'hsl(175, 70%, 90%)'
47
- color-primary-95: 'hsl(175, 90%, 95%)'
48
- color-primary-98: 'hsl(175, 100%, 99%)' # This design token is not used in the default theme; it's included only for export purposes
39
+ color-primary: 'hsl(240, 64%, 58%)'
40
+ color-primary-10: 'hsl(240, 66%, 19%)'
41
+ color-primary-20: 'hsl(240, 45%, 33%)'
42
+ color-primary-25: 'hsl(240, 46%, 48%)'
43
+ color-primary-30: 'hsl(240, 46%, 53%)'
44
+ color-primary-40: 'hsl(240, 100%, 67%)'
45
+ color-primary-85: 'hsl(244, 100%, 84%)'
46
+ color-primary-90: 'hsl(243, 100%, 93%)'
47
+ color-primary-95: 'hsl(244, 100%, 97%)'
48
+ color-primary-98: 'hsl(244, 100%, 99%)'
49
49
  color-accent: '#213c45'
50
- color-accent-10: 'hsl(195, 35.2941176471%, 10%)'
51
- color-accent-20: 'hsl(195, 35.2941176471%, 20%)'
52
- color-accent-30: 'hsl(195, 35.2941176471%, 30%)'
53
- color-accent-40: 'hsl(195, 35.2941176471%, 40%)'
54
- color-accent-50: 'hsl(195, 35%, 50%)'
55
- color-accent-60: 'hsl(195, 35.2941176471%, 60%)'
56
- color-accent-85: 'hsl(195, 35%, 85%)'
57
- color-accent-90: 'hsl(195, 35.2941176471%, 90%)'
58
- color-accent-95: 'hsl(195, 35.2941176471%, 95%)'
59
- color-accent-98: 'hsl(195, 35.2941176471%, 98%)'
60
- color-brown-10: 'hsl(35, 90%, 10%)'
61
- color-brown-20: 'hsl(35, 50%, 20%)'
62
- color-brown-35: 'hsl(35, 25%, 35%)'
63
- color-brown-50: 'hsl(35, 30%, 50%)'
64
- color-brown-70: 'hsl(35, 40%, 70%)'
65
- color-brown-85: 'hsl(35, 60%, 85%)'
66
- color-brown-90: 'hsl(35, 90%, 90%)'
67
- color-brown-95: 'hsl(35, 80%, 95%)'
68
- color-brown-98: 'hsl(35, 90%, 98%)'
69
- color-purple-10: 'hsl(248, 90%, 10%)'
50
+ color-accent-10: 'hsl(195, 100%, 10%)'
51
+ color-accent-20: 'hsl(195, 80%, 20%)'
52
+ color-accent-30: 'hsl(195, 70%, 30%)'
53
+ color-accent-40: 'hsl(195, 70%, 40%)'
54
+ color-accent-50: 'hsl(195, 70%, 50%)'
55
+ color-accent-60: 'hsl(195, 70%, 60%)'
56
+ color-accent-85: 'hsl(195, 85%, 85%)'
57
+ color-accent-90: 'hsl(195, 90%, 90%)'
58
+ color-accent-95: 'hsl(195, 95%, 95%)'
59
+ color-accent-98: 'hsl(195, 100%, 98%)'
60
+ color-brown-10: 'hsl(41, 100%, 10%)'
61
+ color-brown-20: 'hsl(41, 100%, 20%)'
62
+ color-brown-35: 'hsl(41, 96%, 35%)'
63
+ color-brown-50: 'hsl(41, 95%, 44%)'
64
+ color-brown-70: 'hsl(47, 95%, 70%)'
65
+ color-brown-85: 'hsl(47, 100%, 85%)'
66
+ color-brown-90: 'hsl(47, 100%, 90%)'
67
+ color-brown-95: 'hsl(47, 100%, 95%)'
68
+ color-brown-98: 'hsl(48, 100%, 97%)'
69
+ color-purple-10: 'hsl(248, 88%, 10%)'
70
70
  color-purple-20: 'hsl(248, 50%, 20%)'
71
71
  color-purple-35: 'hsl(248, 25%, 35%)'
72
- color-purple-50: 'hsl(248, 30%,50%)'
73
- color-purple-70: 'hsl(248, 40%, 70%)'
74
- color-purple-85: 'hsl(248, 60%, 85%)'
75
- color-purple-90: 'hsl(248, 50%, 90%)'
76
- color-purple-95: 'hsl(248, 80%, 95%)'
77
- color-purple-98: 'hsl(248, 90%, 98%)'
78
- color-turquoise-10: 'hsl(180, 90%, 10%)'
79
- color-turquoise-20: 'hsl(180, 50%, 20%)'
80
- color-turquoise-35: 'hsl(180, 25%, 35%)'
81
- color-turquoise-50: 'hsl(180, 30%, 45%)'
82
- color-turquoise-70: 'hsl(180, 40%, 70%)'
83
- color-turquoise-85: 'hsl(180, 60%, 85%)'
84
- color-turquoise-90: 'hsl(180, 40%, 90%)'
85
- color-turquoise-95: 'hsl(180, 80%, 95%)'
86
- color-turquoise-98: 'hsl(180, 90%, 98%)'
72
+ color-purple-50: 'hsl(248, 64%, 58%)'
73
+ color-purple-70: 'hsl(248, 80%, 70%)'
74
+ color-purple-85: 'hsl(249, 100%, 85%)'
75
+ color-purple-90: 'hsl(248, 100%, 90%)'
76
+ color-purple-95: 'hsl(248, 100%, 95%)'
77
+ color-purple-98: 'hsl(246, 100%, 98%)'
78
+ color-turquoise-10: 'hsl(180, 88%, 10%)'
79
+ color-turquoise-20: 'hsl(180, 90%, 20%)'
80
+ color-turquoise-35: 'hsl(178, 88%, 35%)'
81
+ color-turquoise-50: 'hsl(178, 67%, 50%)'
82
+ color-turquoise-70: 'hsl(180, 75%, 70%)'
83
+ color-turquoise-85: 'hsl(180, 90%, 85%)'
84
+ color-turquoise-90: 'hsl(180, 88%, 90%)'
85
+ color-turquoise-95: 'hsl(180, 88%, 95%)'
86
+ color-turquoise-98: 'hsl(180, 100%, 98%)'
87
87
  color-neutral: 'hsl(232, 18%, 80%)'
88
88
  color-neutral-05: 'hsl(0deg 0% 80% / 5%)'
89
89
  color-neutral-10: 'hsl(0deg 0% 80% / 10%)'
@@ -99,28 +99,28 @@ choiceGroupsByTheme:
99
99
  color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
100
100
  color-info-90: '#CEEBFD'
101
101
  color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
102
- color-warning: '#f16d0e'
103
- color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
104
- color-warning-40: 'hsl(25.110132158590307, 89.0196078431%, 40%)'
105
- color-warning-60: 'hsl(25.110132158590307, 90%, 60%)' # This design token is not used in the default theme; it's included only for export purposes
106
- color-warning-85: 'hsl(25.110132158590307, 89.0196078431%, 85%)'
107
- color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
108
- color-error: '#e60050'
109
- color-error-25: 'hsl(339.1304347826087, 100%, 25%)'
110
- color-error-40: 'hsl(339.1304347826087, 100%, 40%)'
111
- color-error-85: 'hsl(339.1304347826087, 100%, 85%)'
112
- color-error-95: 'hsl(339.1304347826087, 100%, 95%)'
102
+ color-warning: 'hsl(35, 90%, 45%)'
103
+ color-warning-25: 'hsl(33, 83%, 25%)'
104
+ color-warning-40: 'hsl(33, 80%, 34%)'
105
+ color-warning-60: 'hsl(35, 90%, 55%)'
106
+ color-warning-85: 'hsl(33, 90%, 80%)'
107
+ color-warning-95: 'hsl(45, 100%, 92%)'
108
+ color-error: 'hsl(3, 65%, 58%)'
109
+ color-error-25: 'hsl(4, 69%, 37%)'
110
+ color-error-40: 'hsl(3, 60%, 46%)'
111
+ color-error-85: 'hsl(1, 55%, 74%)'
112
+ color-error-95: 'hsl(349, 66%, 92%)'
113
113
  color-solid: '#1a1a1a'
114
114
  color-solid-02: 'hsl(0deg 0% 10% / 2%)'
115
115
  color-solid-05: 'hsl(0deg 0% 10% / 5%)'
116
116
  color-solid-10: 'hsl(0deg 0% 10% / 10%)'
117
117
  color-surface: '#fff'
118
118
  color-transparent: 'transparent'
119
- color-success: 'hsl(152, 77%, 39%)' # Design token copied from recolouring theme
120
- color-success-25: 'hsl(155, 84%, 20%)' # Design token copied from recolouring theme
121
- color-success-40: 'hsl(155, 90%, 24%)' # Design token copied from recolouring theme
122
- color-success-85: 'hsl(144, 69%, 80%)' # Design token copied from recolouring theme
123
- color-success-95: 'hsl(141, 76%, 92%)' # Design token copied from recolouring theme
119
+ color-success: 'hsl(152, 77%, 39%)'
120
+ color-success-25: 'hsl(155, 84%, 20%)'
121
+ color-success-40: 'hsl(155, 90%, 24%)'
122
+ color-success-85: 'hsl(144, 69%, 80%)'
123
+ color-success-95: 'hsl(141, 76%, 92%)'
124
124
 
125
125
  borderRadiuses:
126
126
  label: Border Radiuses
@@ -273,76 +273,6 @@ choiceGroupsByTheme:
273
273
  break-point-giantdesktop: 1680px
274
274
  break-point-jumbodesktop: 1920px
275
275
 
276
- recolouring:
277
- colors:
278
- label: Colors
279
- prefix: color
280
- description: All colors in the system
281
- choices:
282
- color-primary: 'hsl(240, 64%, 58%)'
283
- color-primary-10: 'hsl(240, 66%, 19%)'
284
- color-primary-20: 'hsl(240, 45%, 33%)'
285
- color-primary-25: 'hsl(240, 46%, 48%)'
286
- color-primary-30: 'hsl(240, 46%, 53%)'
287
- color-primary-40: 'hsl(240, 100%, 67%)'
288
- color-primary-85: 'hsl(244, 100%, 84%)'
289
- color-primary-90: 'hsl(243, 100%, 93%)'
290
- color-primary-95: 'hsl(244, 100%, 97%)'
291
- color-primary-98: 'hsl(244, 100%, 99%)'
292
- color-accent-10: 'hsl(195, 100%, 10%)'
293
- color-accent-20: 'hsl(195, 80%, 20%)'
294
- color-accent-30: 'hsl(195, 70%, 30%)'
295
- color-accent-40: 'hsl(195, 70%, 40%)'
296
- color-accent-50: 'hsl(195, 70%, 50%)'
297
- color-accent-60: 'hsl(195, 70%, 60%)'
298
- color-accent-85: 'hsl(195, 85%, 85%)'
299
- color-accent-90: 'hsl(195, 90%, 90%)'
300
- color-accent-95: 'hsl(195, 95%, 95%)'
301
- color-accent-98: 'hsl(195, 100%, 98%)'
302
- color-brown-10: 'hsl(41, 100%, 10%)'
303
- color-brown-20: 'hsl(41, 100%, 20%)'
304
- color-brown-35: 'hsl(41, 96%, 35%)'
305
- color-brown-50: 'hsl(41, 95%, 44%)'
306
- color-brown-70: 'hsl(47, 95%, 70%)'
307
- color-brown-85: 'hsl(47, 100%, 85%)'
308
- color-brown-90: 'hsl(47, 100%, 90%)'
309
- color-brown-95: 'hsl(47, 100%, 95%)'
310
- color-brown-98: 'hsl(48, 100%, 97%)'
311
- color-purple-10: 'hsl(248, 88%, 10%)'
312
- color-purple-20: 'hsl(248, 50%, 20%)'
313
- color-purple-35: 'hsl(248, 25%, 35%)'
314
- color-purple-50: 'hsl(248, 64%, 58%)'
315
- color-purple-70: 'hsl(248, 80%, 70%)'
316
- color-purple-85: 'hsl(249, 100%, 85%)'
317
- color-purple-90: 'hsl(248, 100%, 90%)'
318
- color-purple-95: 'hsl(248, 100%, 95%)'
319
- color-purple-98: 'hsl(246, 100%, 98%)'
320
- color-turquoise-10: 'hsl(180, 88%, 10%)'
321
- color-turquoise-20: 'hsl(180, 90%, 20%)'
322
- color-turquoise-35: 'hsl(178, 88%, 35%)'
323
- color-turquoise-50: 'hsl(178, 67%, 50%)'
324
- color-turquoise-70: 'hsl(180, 75%, 70%)'
325
- color-turquoise-85: 'hsl(180, 90%, 85%)'
326
- color-turquoise-90: 'hsl(180, 88%, 90%)'
327
- color-turquoise-95: 'hsl(180, 88%, 95%)'
328
- color-turquoise-98: 'hsl(180, 100%, 98%)'
329
- color-success: 'hsl(152, 77%, 39%)'
330
- color-success-25: 'hsl(155, 84%, 20%)'
331
- color-success-40: 'hsl(155, 90%, 24%)'
332
- color-success-85: 'hsl(144, 69%, 80%)'
333
- color-success-95: 'hsl(141, 76%, 92%)'
334
- color-warning: 'hsl(35, 90%, 45%)'
335
- color-warning-25: 'hsl(33, 83%, 25%)'
336
- color-warning-40: 'hsl(33, 80%, 34%)'
337
- color-warning-60: 'hsl(35, 90%, 55%)'
338
- color-warning-85: 'hsl(33, 90%, 80%)'
339
- color-warning-95: 'hsl(45, 100%, 92%)'
340
- color-error: 'hsl(3, 65%, 58%)'
341
- color-error-25: 'hsl(4, 69%, 37%)'
342
- color-error-40: 'hsl(3, 60%, 46%)'
343
- color-error-85: 'hsl(1, 55%, 74%)'
344
- color-error-95: 'hsl(349, 66%, 92%)'
345
-
346
276
  states:
347
277
  active:
348
278
  description: 'Trigged while the user is currently interacting with the element'
@@ -350,22 +280,16 @@ states:
350
280
  description: 'When the mouse is over the element'
351
281
  disabled:
352
282
  description: 'When the element can not be interacted with'
353
- active-disabled:
354
- description: 'When the element is active but can not be interacted with'
355
283
  focused:
356
284
  description: 'When the element is currently selected to receive input'
357
285
  readonly:
358
286
  description: 'When the element can not be modified'
359
- info:
360
- description: 'When the element has an info state'
361
287
  warning:
362
288
  description: 'When the element shows a warning state'
363
289
  success:
364
290
  description: 'When the element has a successful state'
365
291
  error:
366
292
  description: 'When the element has invalid input'
367
- selected:
368
- description: 'When the element is selected'
369
293
 
370
294
  variants:
371
295
  small:
@@ -374,66 +298,16 @@ variants:
374
298
  description: 'To differentiate component medium size'
375
299
  big:
376
300
  description: 'To differentiate component big size'
377
- quiet:
378
- description: 'When the element is quiet style'
379
- # recolouring rollout
380
301
  secondary:
381
302
  description: 'To differentiate component secondary type'
382
- primary:
383
- description: 'To differentiate component primary type'
384
- flat:
385
- description: 'To differentiate component flat type'
386
- default:
387
- description: 'To differentiate component default type'
388
- critical:
389
- description: 'To differentiate component critical type'
390
- urgent:
391
- description: 'To differentiate component urgent type'
392
- positive:
393
- description: 'To differentiate component positive type'
394
- turquoise:
395
- description: 'To differentiate component turquoise type'
396
303
 
397
304
  componentGroups:
398
305
  button:
399
306
  description: 'Button elements'
400
- icon-button:
401
- description: 'Icon button elements'
402
307
  input:
403
308
  description: 'Input elements'
404
309
  localized-input-label:
405
310
  description: 'Localized multiline text input label elements'
406
- # recolouring rollout
407
- view-switcher-button:
408
- description: 'Viewswitcher Button elements'
409
- stamp:
410
- description: 'Stamp elements'
411
- toggle-track:
412
- description: 'Toggle track elements'
413
- toggle-thumb:
414
- description: 'Toggle thumb elements'
415
- loading-spinner-track:
416
- description: 'Loading spinner track elements'
417
- loading-spinner-dot:
418
- description: 'Loading spinner dot elements'
419
- content-notification:
420
- description: 'Content notification elements'
421
- avatar:
422
- description: 'Avatar elements'
423
- leading-icon:
424
- description: 'Leading icon elements'
425
- checkbox-input:
426
- description: 'Checkbox input elements'
427
- radio-option:
428
- description: 'Radio option elements'
429
- tag:
430
- description: 'Tag elements'
431
- dropdown:
432
- description: 'Dropdown elements'
433
- dropdown-option:
434
- description: 'Dropdown option elements'
435
- text:
436
- description: 'Text elements'
437
311
 
438
312
  decisionGroupsByTheme:
439
313
  default:
@@ -441,91 +315,26 @@ decisionGroupsByTheme:
441
315
  label: Background Colors
442
316
  prefix: background-color
443
317
  decisions:
444
- background-color-for-button-when-active:
445
- choice: color-neutral-95
446
- background-color-for-button-when-hovered:
447
- choice: color-neutral-98
448
- background-color-for-button-when-disabled:
449
- choice: color-accent-95
450
- background-color-for-icon-button-when-disabled:
451
- choice: color-accent-95
452
318
  background-color-for-input:
453
319
  choice: color-surface
454
- background-color-for-input-when-selected:
455
- choice: color-accent-95
456
320
  background-color-for-input-when-disabled:
457
321
  choice: color-neutral-95
458
- background-color-for-input-when-hovered:
459
- choice: color-neutral-98
460
- background-color-for-input-when-focused:
461
- choice: color-surface
462
322
  background-color-for-input-when-readonly:
463
323
  choice: color-neutral-95
464
- background-color-for-input-when-active:
465
- choice: color-info-95
466
- background-color-for-input-as-quiet:
467
- choice: color-transparent
468
- background-color-for-input-as-quiet-when-hovered:
469
- choice: color-solid-02
324
+ background-color-for-input-when-hovered:
325
+ choice: color-primary-98
470
326
  background-color-for-localized-input-label:
471
327
  choice: color-surface
472
328
  background-color-for-localized-input-label-when-readonly:
473
329
  choice: color-neutral-95
474
330
  background-color-for-localized-input-label-when-disabled:
475
331
  choice: color-neutral-95
476
- # recolouring rollout
477
- background-color-for-button-as-primary:
478
- choice: '#15a390'
479
- background-color-for-button-as-primary-when-hovered:
480
- choice: color-primary
481
- background-color-for-button-as-primary-as-default-when-hovered:
482
- choice: '#17ab97'
483
- background-color-for-button-as-primary-as-default-when-active:
484
- choice: '#15a390'
485
- background-color-for-button-as-primary-as-urgent:
486
- choice: color-warning
487
- background-color-for-stamp-as-primary:
488
- choice: color-primary-90
489
- background-color-for-stamp-as-positive:
332
+ background-color-for-button-when-active:
490
333
  choice: color-primary-90
491
- background-color-for-toggle-thumb-when-active:
492
- choice: color-primary-25
493
- background-color-for-toggle-track-when-active:
494
- choice: color-primary-40
495
- background-color-for-toggle-thumb-when-disabled:
496
- choice: color-accent-60
497
- background-color-for-toggle-track-when-disabled:
498
- choice: color-accent-90
499
- background-color-for-toggle-thumb-when-active-when-disabled:
500
- choice: color-neutral-60
501
- deprecated: true
502
- background-color-for-toggle-track-when-active-when-disabled:
503
- choice: color-neutral-90
504
- deprecated: true
505
- background-color-for-toggle-thumb-when-hovered:
506
- choice: 'rgba(0, 0, 0, 0.1)'
507
- background-color-for-loading-spinner-track:
508
- choice: color-accent
509
- background-color-for-loading-spinner-dot:
510
- choice: color-accent
511
- background-color-for-content-notification-when-success:
334
+ background-color-for-button-when-hovered:
512
335
  choice: color-primary-95
513
- background-color-for-view-switcher-button-when-active:
514
- choice: color-neutral-95
515
- background-color-for-checkbox-input-when-hovered:
516
- choice: color-neutral-90
517
- background-color-for-radio-option-when-hovered:
518
- choice: color-neutral-90
519
- background-color-for-tag:
520
- choice: color-neutral-95
521
- background-color-for-tag-when-hovered:
522
- choice: color-neutral-90
523
- background-color-for-dropdown-when-hovered:
336
+ background-color-for-button-when-disabled:
524
337
  choice: color-neutral-95
525
- background-color-for-dropdown-when-active:
526
- choice: color-neutral-90
527
- background-color-for-dropdown-option-when-active:
528
- choice: color-info-95
529
338
 
530
339
  borderColors:
531
340
  label: Border Colors
@@ -533,8 +342,6 @@ decisionGroupsByTheme:
533
342
  decisions:
534
343
  border-color-for-input:
535
344
  choice: color-neutral
536
- border-color-for-input-when-focused:
537
- choice: color-primary
538
345
  border-color-for-input-when-disabled:
539
346
  choice: color-neutral
540
347
  border-color-for-input-when-readonly:
@@ -545,46 +352,18 @@ decisionGroupsByTheme:
545
352
  choice: color-warning
546
353
  border-color-for-input-when-hovered:
547
354
  choice: color-neutral
548
- border-color-for-input-as-quiet:
549
- choice: color-transparent
550
- # recolouring rollout
355
+ border-color-for-input-when-focused:
356
+ choice: color-primary-40
551
357
  border-color-for-button-as-secondary:
552
- choice: color-neutral
553
- border-color-for-dropdown:
554
- choice: color-neutral
555
- border-color-for-content-notification-when-success:
556
358
  choice: color-primary-85
557
- border-color-for-checkbox-input:
558
- choice: color-primary
559
- border-color-for-checkbox-input-when-active:
560
- choice: color-primary
561
- border-color-for-tag:
562
- choice: color-neutral-85
563
359
 
564
360
  borderRadiuses:
565
361
  label: Border Radius
566
362
  prefix: border-radius
567
363
  decisions:
568
- border-radius-for-button-as-big:
569
- choice: border-radius-4
570
- border-radius-for-button-as-medium:
571
- choice: border-radius-4
572
364
  border-radius-for-input:
573
365
  choice: border-radius-4
574
366
 
575
- borderWidths:
576
- label: Border width
577
- prefix: border-width
578
- decisions:
579
- border-width-for-input:
580
- choice: border-width-1
581
- border-width-for-input-when-warning:
582
- choice: border-width-1
583
- border-width-for-input-when-error:
584
- choice: border-width-1
585
- border-width-for-input-when-focused:
586
- choice: border-width-1
587
-
588
367
  fontColors:
589
368
  label: Font Colors
590
369
  prefix: font-color
@@ -594,32 +373,13 @@ decisionGroupsByTheme:
594
373
  font-color-for-input-when-disabled:
595
374
  choice: color-neutral-60
596
375
  font-color-for-input-when-error:
597
- choice: color-error
376
+ choice: color-error-40
598
377
  font-color-for-input-when-readonly:
599
378
  choice: color-neutral-40
600
379
  font-color-for-input-when-warning:
601
380
  choice: color-warning
602
- # recolouring rollout
603
381
  font-color-for-button-as-secondary:
604
- choice: color-solid
605
- font-color-for-button-as-flat-when-hovered:
606
- choice: color-primary
607
- font-color-for-button-as-flat-as-critical:
608
- choice: color-error
609
- font-color-for-button-as-flat-as-critical-when-hovered:
610
- choice: color-error-25
611
- font-color-for-view-switcher-button:
612
- choice: color-neutral-40
613
- font-color-for-stamp-as-positive:
614
- choice: color-primary-25
615
- font-color-for-content-notification-when-success:
616
382
  choice: color-primary
617
- font-color-for-avatar-as-turquoise:
618
- choice: color-turquoise-50
619
- font-color-for-leading-icon-as-turquoise:
620
- choice: color-turquoise-50
621
- font-color-for-text-as-positive:
622
- choice: color-primary-25
623
383
 
624
384
  heights:
625
385
  label: Height
@@ -627,10 +387,10 @@ decisionGroupsByTheme:
627
387
  decisions:
628
388
  height-for-button-as-big:
629
389
  choice: '40px'
630
- height-for-button-as-medium:
631
- choice: '32px'
632
390
  height-for-button-as-small:
633
391
  choice: '16px'
392
+ height-for-button-as-medium:
393
+ choice: '32px'
634
394
  height-for-input:
635
395
  choice: '40px'
636
396
  # This is a temporary one to be able to remove the legay 'size-height-for-input'
@@ -638,34 +398,6 @@ decisionGroupsByTheme:
638
398
  choice: '32px'
639
399
  description: 'Legacy token to be removed'
640
400
 
641
- placeholderFontColors:
642
- label: Placeholder font colors
643
- prefix: placeholder-font-color
644
- decisions:
645
- placeholder-font-color-for-input:
646
- description: ''
647
- choice: color-neutral-60
648
-
649
- fontSizes:
650
- label: Font Sizes
651
- prefix: font-size
652
- decisions:
653
- font-size-for-button:
654
- choice: font-size-20
655
- font-size-for-input:
656
- choice: font-size-30
657
-
658
- paddings:
659
- label: Paddings
660
- prefix: padding
661
- decisions:
662
- padding-for-input:
663
- choice: '0 var(--spacing-30)'
664
- padding-for-input-as-quiet:
665
- choice: '0 var(--spacing-20)'
666
- padding-for-button:
667
- choice: '0 var(--spacing-30)'
668
-
669
401
  shadows:
670
402
  label: Shadows
671
403
  prefix: shadow
@@ -678,121 +410,3 @@ decisionGroupsByTheme:
678
410
  choice: 'inset 0 0 0 1px var(--color-error)'
679
411
  shadow-for-input-when-warning:
680
412
  choice: 'inset 0 0 0 1px var(--color-warning)'
681
-
682
- recolouring:
683
- borderColors:
684
- label: Border Colors
685
- prefix: border-color
686
- decisions:
687
- border-color-for-button-as-secondary:
688
- choice: color-primary-85
689
- border-color-for-dropdown:
690
- choice: color-primary-85
691
- border-color-for-input-when-focused:
692
- choice: color-primary-40
693
- border-color-for-content-notification-when-success:
694
- choice: color-success-85
695
- border-color-for-checkbox-input:
696
- choice: color-neutral-60
697
- border-color-for-checkbox-input-when-active:
698
- choice: color-primary
699
- border-color-for-tag:
700
- choice: color-primary-90
701
-
702
- backgroundColors:
703
- label: Background Colors
704
- prefix: background-color
705
- decisions:
706
- background-color-for-button-when-active:
707
- choice: color-primary-90
708
- background-color-for-button-when-hovered:
709
- choice: color-primary-95
710
- background-color-for-icon-button-when-disabled:
711
- choice: 'color-transparent'
712
- background-color-for-button-as-primary:
713
- choice: color-primary
714
- background-color-for-button-as-primary-when-hovered:
715
- choice: color-primary-40
716
- background-color-for-button-as-primary-as-default-when-hovered:
717
- choice: color-primary-40
718
- background-color-for-button-as-primary-as-default-when-active:
719
- choice: color-primary-25
720
- background-color-for-button-as-primary-as-urgent:
721
- choice: color-warning-60
722
- background-color-for-input-when-selected:
723
- choice: color-primary-95
724
- background-color-for-stamp-as-primary:
725
- choice: color-primary-95
726
- background-color-for-stamp-as-positive:
727
- choice: color-success-95
728
- background-color-for-toggle-thumb-when-active:
729
- choice: color-primary-40
730
- background-color-for-toggle-track-when-active:
731
- choice: color-primary-85
732
- background-color-for-toggle-thumb-when-disabled:
733
- choice: color-neutral-60
734
- background-color-for-toggle-track-when-disabled:
735
- choice: color-neutral-90
736
- background-color-for-toggle-thumb-when-active-when-disabled:
737
- choice: color-primary-85
738
- deprecated: true
739
- background-color-for-toggle-track-when-active-when-disabled:
740
- choice: color-primary-90
741
- deprecated: true
742
- background-color-for-toggle-thumb-when-hovered:
743
- choice: 'hsla(240, 64%, 58%, 4%)'
744
- background-color-for-loading-spinner-track:
745
- choice: color-primary-90
746
- background-color-for-loading-spinner-dot:
747
- choice: color-primary
748
- background-color-for-content-notification-when-success:
749
- choice: color-success-95
750
- background-color-for-view-switcher-button-when-active:
751
- choice: color-primary-95
752
- background-color-for-checkbox-input-when-hovered:
753
- choice: color-primary-95
754
- background-color-for-radio-option-when-hovered:
755
- choice: color-primary-95
756
- background-color-for-tag:
757
- choice: color-primary-95
758
- background-color-for-tag-when-hovered:
759
- choice: color-primary-90
760
- background-color-for-dropdown-when-hovered:
761
- choice: color-primary-95
762
- background-color-for-dropdown-when-active:
763
- choice: color-primary-90
764
- background-color-for-dropdown-option-when-active:
765
- choice: color-primary-95
766
- background-color-for-input-as-quiet-when-hovered:
767
- choice: 'hsla(240, 64%, 58%, 4%)'
768
- background-color-for-input-when-active:
769
- choice: color-primary-95
770
- background-color-for-input-when-hovered:
771
- choice: color-primary-98
772
-
773
- fontColors:
774
- label: Font Colors
775
- prefix: font-color
776
- decisions:
777
- font-color-for-button-as-secondary:
778
- choice: color-primary
779
- font-color-for-button-as-flat-when-hovered:
780
- choice: color-primary-40
781
- font-color-for-button-as-flat-as-critical:
782
- choice: color-error-40
783
- font-color-for-button-as-flat-as-critical-when-hovered:
784
- choice: color-error
785
- font-color-for-view-switcher-button:
786
- choice: color-primary
787
- font-color-for-input-when-error:
788
- choice: color-error-40
789
- font-color-for-stamp-as-positive:
790
- choice: color-success-40
791
- font-color-for-content-notification-when-success:
792
- choice: color-success
793
- font-color-for-avatar-as-turquoise:
794
- choice: color-turquoise-35
795
- font-color-for-leading-icon-as-turquoise:
796
- choice: color-turquoise-35
797
- font-color-for-text-as-positive:
798
- choice: color-success-40