@nova-design-system/nova-base 3.9.0 → 3.10.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 (23) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-components.js +20 -10
  3. package/dist/css/mccs.css +109 -17
  4. package/dist/css/nova-utils.css +10 -0
  5. package/dist/css/ocean.css +189 -97
  6. package/dist/css/spark.css +167 -75
  7. package/dist/generated/nova-tailwind-components.d.ts +10 -0
  8. package/dist/generated/nova-tailwind-components.js +20 -10
  9. package/dist/js/mccs_dark.d.ts +16 -1
  10. package/dist/js/mccs_dark.js +21 -6
  11. package/dist/js/mccs_light.d.ts +16 -1
  12. package/dist/js/mccs_light.js +18 -3
  13. package/dist/js/ocean_dark.d.ts +60 -45
  14. package/dist/js/ocean_dark.js +68 -53
  15. package/dist/js/ocean_light.d.ts +60 -45
  16. package/dist/js/ocean_light.js +66 -51
  17. package/dist/js/spacings.d.ts +67 -5
  18. package/dist/js/spacings.js +67 -5
  19. package/dist/js/spark_dark.d.ts +48 -33
  20. package/dist/js/spark_dark.js +57 -42
  21. package/dist/js/spark_light.d.ts +48 -33
  22. package/dist/js/spark_light.js +54 -39
  23. package/package.json +1 -1
package/dist/css/ocean.css CHANGED
@@ -20,6 +20,9 @@
20
20
  --components-list-native-background: #565558;
21
21
  --components-form-opacity-disabled: 50%;
22
22
  --components-form-opacity-default: 100%;
23
+ --components-datagrid-body-subtext: #00b4ff;
24
+ --components-datagrid-body-text: #ff0000;
25
+ --components-datagrid-header-text: #ff0000;
23
26
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
24
27
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
25
28
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -31,7 +34,6 @@
31
34
  --components-button-low-border-active: rgba(255, 255, 255, 0);
32
35
  --components-button-low-border: rgba(255, 255, 255, 0);
33
36
  --components-button-low-background: rgba(255, 255, 255, 0);
34
- --components-button-medium-background: rgba(255, 255, 255, 0);
35
37
  --components-button-high-border-active: rgba(255, 255, 255, 0);
36
38
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
37
39
  --components-button-high-border: rgba(255, 255, 255, 0);
@@ -69,21 +71,12 @@
69
71
  --color-transparent: rgba(255, 255, 255, 0);
70
72
  --color-white: #ffffff;
71
73
  --color-black: #000000;
72
- --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
73
74
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
74
- --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
75
75
  --components-tooltip-border: var(--color-gray-ocean-50);
76
76
  --components-tooltip-background: var(--color-gray-ocean-50);
77
77
  --components-popover-background: var(--color-gray-ocean-900);
78
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
79
78
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
80
- --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
81
- --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
82
- --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
83
79
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
84
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
85
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
86
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
87
80
  --components-overlay-background: var(--color-gray-ocean-650);
88
81
  --components-button-destructive-high-icon-hover: var(--color-base-black);
89
82
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -108,7 +101,6 @@
108
101
  --components-loader-white-foreground: var(--color-base-white);
109
102
  --components-list-dropdown-group-title-background: var(--color-transparent);
110
103
  --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
111
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
112
104
  --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
113
105
  --components-list-native-item-content-hover: var(--color-base-white);
114
106
  --components-list-native-item-content-default: var(--color-base-white);
@@ -118,13 +110,14 @@
118
110
  --components-form-shape-background-hover: var(--color-gray-ocean-350);
119
111
  --components-form-shape-background-default: var(--color-gray-ocean-400);
120
112
  --components-form-field-background-checked: var(--color-petrol-500);
113
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
114
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
121
115
  --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
122
116
  --components-button-gr-as-complementary-icon: var(--color-base-white);
123
117
  --components-button-gr-as-complementary-text-hover: var(--color-base-white);
124
118
  --components-button-gr-as-complementary-text: var(--color-base-white);
125
119
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
126
120
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
127
- --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
128
121
  --components-button-lower-background: var(--color-interaction-container-neutral-background);
129
122
  --color-dont-use-background: var(--color-gray-ocean-900);
130
123
  --color-dont-use-content: var(--color-gray-ocean-750);
@@ -274,10 +267,17 @@
274
267
  --color-interaction-link-high-icon-visited: var(--color-petrol-400);
275
268
  --color-interaction-link-high-icon-hover: var(--color-petrol-400);
276
269
  --color-interaction-link-high-icon: var(--color-petrol-500);
277
- --color-interaction-container-neutral-text-active: var(--color-petrol-400);
278
- --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
279
- --color-interaction-container-neutral-border-active: var(--color-petrol-400);
280
- --color-interaction-container-neutral-background-active: var(--color-petrol-900);
270
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
271
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
272
+ --color-interaction-container-branded-low-text: var(--color-petrol-500);
273
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
274
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-400);
275
+ --color-interaction-container-branded-low-icon: var(--color-petrol-500);
276
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
277
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-400);
278
+ --color-interaction-container-branded-low-border: var(--color-petrol-500);
279
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
280
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-900);
281
281
  --color-interaction-container-branded-high-text-hover: var(--color-base-black);
282
282
  --color-interaction-container-branded-high-text-active: var(--color-base-black);
283
283
  --color-interaction-container-branded-high-text: var(--color-base-black);
@@ -290,17 +290,11 @@
290
290
  --color-interaction-container-branded-high-background-hover: var(--color-petrol-400);
291
291
  --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
292
292
  --color-interaction-container-branded-high-background: var(--color-petrol-500);
293
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
294
- --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
295
- --color-interaction-container-branded-low-text: var(--color-petrol-500);
296
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
297
- --color-interaction-container-branded-low-icon-active: var(--color-petrol-400);
298
- --color-interaction-container-branded-low-icon: var(--color-petrol-500);
299
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
300
- --color-interaction-container-branded-low-border-active: var(--color-petrol-400);
301
- --color-interaction-container-branded-low-border: var(--color-petrol-500);
302
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
303
- --color-interaction-container-branded-low-background-active: var(--color-petrol-900);
293
+ --color-interaction-container-neutral-text-active: var(--color-petrol-400);
294
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
295
+ --color-interaction-container-neutral-border-active: var(--color-petrol-400);
296
+ --color-interaction-container-neutral-background-active: var(--color-petrol-900);
297
+ --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
304
298
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
305
299
  --components-tooltip-text: var(--color-content-inverted-high-text);
306
300
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -350,15 +344,12 @@
350
344
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
351
345
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
352
346
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
353
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
354
- --components-datagrid-body-subtext: var(--color-content-low-text);
355
- --components-datagrid-body-text: var(--color-content-high-text);
356
- --components-datagrid-body-border: var(--color-content-low-border);
357
- --components-datagrid-header-text: var(--color-content-low-text);
358
- --components-datagrid-header-border: var(--color-content-medium-border);
347
+ --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
348
+ --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
349
+ --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
350
+ --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
359
351
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
360
- --components-breadcrumb-text-active: var(--color-content-medium-text);
361
- --components-breadcrumb-text: var(--color-content-low-text);
352
+ --components-breadcrumb-text-active: var(--color-content-high-text);
362
353
  --components-avatar-content-10: var(--color-rainbow-10-icon);
363
354
  --components-avatar-content-9: var(--color-rainbow-9-text);
364
355
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -461,17 +452,12 @@
461
452
  --components-form-text-label-default: var(--color-content-high-text);
462
453
  --components-form-text-info-icon: var(--color-content-medium-text);
463
454
  --components-form-text-required: var(--color-feedback-error-low-icon);
464
- --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
465
- --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
466
- --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
467
- --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
468
- --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
469
- --components-button-low-text: var(--color-interaction-container-branded-low-text);
470
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
471
- --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
472
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
473
- --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
474
- --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
455
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
456
+ --components-datagrid-expander-border: var(--color-content-low-border);
457
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
458
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
459
+ --components-datagrid-body-border: var(--color-content-low-border);
460
+ --components-datagrid-header-border: var(--color-content-medium-border);
475
461
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
476
462
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
477
463
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -483,6 +469,17 @@
483
469
  --components-button-medium-border: var(--color-interaction-container-branded-low-border);
484
470
  --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
485
471
  --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
472
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
473
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
474
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
475
+ --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
476
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
477
+ --components-button-low-text: var(--color-interaction-container-branded-low-text);
478
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
479
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
480
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
481
+ --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
482
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
486
483
  --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
487
484
  --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
488
485
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
@@ -507,12 +504,17 @@
507
504
  --color-interaction-link-low-icon: var(--color-content-high-text);
508
505
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
509
506
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
507
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
510
508
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
511
509
  --color-interaction-container-neutral-text: var(--color-content-low-text);
512
510
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
513
511
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
514
512
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
515
513
  --color-interaction-container-neutral-border: var(--color-content-low-text);
514
+ --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
515
+ --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
516
+ --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
517
+ --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
516
518
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
517
519
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
518
520
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -531,15 +533,28 @@
531
533
  --components-slider-track-filled-default: var(--components-form-field-border-default);
532
534
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
533
535
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
536
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
534
537
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
535
538
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
539
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
540
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
536
541
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
537
542
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
543
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
544
+ --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
545
+ --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
546
+ --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
547
+ --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
548
+ --components-breadcrumb-text: var(--color-interaction-link-low-text);
549
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
538
550
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
551
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
552
+ --components-button-medium-background: var(--color-interaction-container-branded-low-background);
539
553
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
540
554
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
541
555
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
542
556
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
557
+ --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
543
558
  }
544
559
 
545
560
  :root {
@@ -587,6 +602,9 @@
587
602
  --components-list-native-background: #565558;
588
603
  --components-form-opacity-disabled: 50%;
589
604
  --components-form-opacity-default: 100%;
605
+ --components-datagrid-body-subtext: #0000ff;
606
+ --components-datagrid-body-text: #ff0000;
607
+ --components-datagrid-header-text: #ff0000;
590
608
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
591
609
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
592
610
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -598,7 +616,6 @@
598
616
  --components-button-low-border-active: rgba(255, 255, 255, 0);
599
617
  --components-button-low-border: rgba(255, 255, 255, 0);
600
618
  --components-button-low-background: rgba(255, 255, 255, 0);
601
- --components-button-medium-background: rgba(255, 255, 255, 0);
602
619
  --components-button-high-border-active: rgba(255, 255, 255, 0);
603
620
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
604
621
  --components-button-high-border: rgba(255, 255, 255, 0);
@@ -636,21 +653,12 @@
636
653
  --color-transparent: rgba(255, 255, 255, 0);
637
654
  --color-white: #ffffff;
638
655
  --color-black: #000000;
639
- --color-interaction-container-neutral-background-hover: rgba(165, 166, 167, 0.12);
640
656
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
641
- --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
642
657
  --components-tooltip-border: var(--color-gray-ocean-900);
643
658
  --components-tooltip-background: var(--color-gray-ocean-900);
644
659
  --components-popover-background: var(--color-gray-ocean-00);
645
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
646
660
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
647
- --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
648
- --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
649
- --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
650
661
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
651
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
652
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
653
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
654
662
  --components-overlay-background: var(--color-gray-ocean-850);
655
663
  --components-button-destructive-high-icon-hover: var(--color-base-white);
656
664
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -675,7 +683,6 @@
675
683
  --components-loader-white-foreground: var(--color-base-white);
676
684
  --components-list-dropdown-group-title-background: var(--color-transparent);
677
685
  --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
678
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
679
686
  --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
680
687
  --components-list-native-item-content-hover: var(--color-base-white);
681
688
  --components-list-native-item-content-default: var(--color-base-white);
@@ -685,13 +692,14 @@
685
692
  --components-form-shape-background-hover: var(--color-gray-ocean-100);
686
693
  --components-form-shape-background-default: var(--color-gray-ocean-75);
687
694
  --components-form-field-background-checked: var(--color-petrol-600);
695
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
696
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
688
697
  --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
689
698
  --components-button-gr-as-complementary-icon: var(--color-base-black);
690
699
  --components-button-gr-as-complementary-text-hover: var(--color-base-black);
691
700
  --components-button-gr-as-complementary-text: var(--color-base-black);
692
701
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
693
702
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
694
- --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
695
703
  --components-button-lower-background: var(--color-interaction-container-neutral-background);
696
704
  --color-dont-use-background: var(--color-gray-ocean-50);
697
705
  --color-dont-use-content: var(--color-gray-ocean-150);
@@ -841,10 +849,17 @@
841
849
  --color-interaction-link-high-icon-visited: var(--color-petrol-700);
842
850
  --color-interaction-link-high-icon-hover: var(--color-petrol-700);
843
851
  --color-interaction-link-high-icon: var(--color-petrol-600);
844
- --color-interaction-container-neutral-text-active: var(--color-petrol-700);
845
- --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
846
- --color-interaction-container-neutral-border-active: var(--color-petrol-700);
847
- --color-interaction-container-neutral-background-active: var(--color-petrol-50);
852
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
853
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
854
+ --color-interaction-container-branded-low-text: var(--color-petrol-600);
855
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
856
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
857
+ --color-interaction-container-branded-low-icon: var(--color-petrol-600);
858
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
859
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
860
+ --color-interaction-container-branded-low-border: var(--color-petrol-600);
861
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
862
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-50);
848
863
  --color-interaction-container-branded-high-text-hover: var(--color-base-white);
849
864
  --color-interaction-container-branded-high-text-active: var(--color-base-white);
850
865
  --color-interaction-container-branded-high-text: var(--color-base-white);
@@ -857,17 +872,11 @@
857
872
  --color-interaction-container-branded-high-background-hover: var(--color-petrol-700);
858
873
  --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
859
874
  --color-interaction-container-branded-high-background: var(--color-petrol-600);
860
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
861
- --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
862
- --color-interaction-container-branded-low-text: var(--color-petrol-600);
863
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
864
- --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
865
- --color-interaction-container-branded-low-icon: var(--color-petrol-600);
866
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
867
- --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
868
- --color-interaction-container-branded-low-border: var(--color-petrol-600);
869
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
870
- --color-interaction-container-branded-low-background-active: var(--color-petrol-50);
875
+ --color-interaction-container-neutral-text-active: var(--color-petrol-700);
876
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
877
+ --color-interaction-container-neutral-border-active: var(--color-petrol-700);
878
+ --color-interaction-container-neutral-background-active: var(--color-petrol-50);
879
+ --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
871
880
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
872
881
  --components-tooltip-text: var(--color-content-inverted-high-text);
873
882
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -917,15 +926,12 @@
917
926
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
918
927
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
919
928
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
920
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
921
- --components-datagrid-body-subtext: var(--color-content-low-text);
922
- --components-datagrid-body-text: var(--color-content-high-text);
923
- --components-datagrid-body-border: var(--color-content-low-border);
924
- --components-datagrid-header-text: var(--color-content-low-text);
925
- --components-datagrid-header-border: var(--color-content-medium-border);
929
+ --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
930
+ --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
931
+ --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
932
+ --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
926
933
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
927
- --components-breadcrumb-text-active: var(--color-content-medium-text);
928
- --components-breadcrumb-text: var(--color-content-low-text);
934
+ --components-breadcrumb-text-active: var(--color-content-high-text);
929
935
  --components-avatar-content-10: var(--color-rainbow-10-icon);
930
936
  --components-avatar-content-9: var(--color-rainbow-9-text);
931
937
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -1028,17 +1034,12 @@
1028
1034
  --components-form-text-label-default: var(--color-content-high-text);
1029
1035
  --components-form-text-info-icon: var(--color-content-low-text);
1030
1036
  --components-form-text-required: var(--color-feedback-error-low-icon);
1031
- --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
1032
- --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
1033
- --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
1034
- --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
1035
- --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
1036
- --components-button-low-text: var(--color-interaction-container-branded-low-text);
1037
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
1038
- --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
1039
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
1040
- --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
1041
- --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
1037
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
1038
+ --components-datagrid-expander-border: var(--color-content-low-border);
1039
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
1040
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
1041
+ --components-datagrid-body-border: var(--color-content-low-border);
1042
+ --components-datagrid-header-border: var(--color-content-medium-border);
1042
1043
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
1043
1044
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
1044
1045
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -1050,6 +1051,17 @@
1050
1051
  --components-button-medium-border: var(--color-interaction-container-branded-low-border);
1051
1052
  --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
1052
1053
  --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
1054
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
1055
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
1056
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
1057
+ --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
1058
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
1059
+ --components-button-low-text: var(--color-interaction-container-branded-low-text);
1060
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
1061
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
1062
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
1063
+ --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
1064
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
1053
1065
  --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
1054
1066
  --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
1055
1067
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
@@ -1074,12 +1086,17 @@
1074
1086
  --color-interaction-link-low-icon: var(--color-content-high-text);
1075
1087
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1076
1088
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1089
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1077
1090
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1078
1091
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1079
1092
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
1080
1093
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
1081
1094
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1082
1095
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
1096
+ --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
1097
+ --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1098
+ --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1099
+ --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1083
1100
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1084
1101
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1085
1102
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1098,15 +1115,28 @@
1098
1115
  --components-slider-track-filled-default: var(--components-form-field-border-default);
1099
1116
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1100
1117
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1118
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1101
1119
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1102
1120
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1121
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
1122
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
1103
1123
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1104
1124
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1125
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1126
+ --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1127
+ --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1128
+ --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1129
+ --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1130
+ --components-breadcrumb-text: var(--color-interaction-link-low-text);
1131
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1105
1132
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1133
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1134
+ --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1106
1135
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
1107
1136
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
1108
1137
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1109
1138
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
1139
+ --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
1110
1140
  }
1111
1141
 
1112
1142
  /**
@@ -1393,6 +1423,22 @@
1393
1423
  */
1394
1424
 
1395
1425
  :root {
1426
+ --togglegroup-md-iconbutton-padding-y: 7px;
1427
+ --togglegroup-md-button-radius: 3px;
1428
+ --togglegroup-md-button-padding-y: 5px;
1429
+ --togglegroup-md-padding: 3px;
1430
+ --togglegroup-lg-iconbutton-padding-y: 9px;
1431
+ --togglegroup-lg-button-radius: 5px;
1432
+ --togglegroup-lg-button-padding-y: 7px;
1433
+ --togglegroup-lg-padding: 3px;
1434
+ --togglegroup-sm-padding: 3px;
1435
+ --togglegroup-sm-iconbutton-padding-y: 5px;
1436
+ --togglegroup-sm-button-radius: 2px;
1437
+ --togglegroup-sm-button-padding-y: 3px;
1438
+ --togglegroup-xs-iconbutton-padding-y: 3px;
1439
+ --togglegroup-xs-button-radius: 1px;
1440
+ --togglegroup-xs-button-padding-y: 1px;
1441
+ --togglegroup-xs-padding: 3px;
1396
1442
  --slider-tick-radius: 1px;
1397
1443
  --global-typography-legend-font-style: uppercase;
1398
1444
  --global-typography-label-font-style: normal;
@@ -1415,11 +1461,27 @@
1415
1461
  --form-field-badge-gap: 0px;
1416
1462
  --list-native-separator-padding-y: 3px;
1417
1463
  --list-native-separator-padding-x: 9px;
1464
+ --icon-stroke-xl: 1.899999976158142px;
1465
+ --icon-stroke-lg: 1.7999999523162842px;
1466
+ --icon-stroke-md: 1.600000023841858px;
1467
+ --icon-stroke-sm: 1.399999976158142px;
1468
+ --icon-stroke-xs: 1.2000000476837158px;
1418
1469
  --calendar-cell-dot-size: 3px;
1419
1470
  --button-lg-ring-radius: 9px;
1420
1471
  --button-md-ring-radius: 7px;
1421
1472
  --button-sm-ring-radius: 5px;
1422
1473
  --button-xs-ring-radius: 3px;
1474
+ --buttongroup-md-button-radius: 3px;
1475
+ --buttongroup-md-button-padding-y: 5px;
1476
+ --buttongroup-md-padding: 3px;
1477
+ --buttongroup-lg-button-radius: 4px;
1478
+ --buttongroup-lg-button-padding-y: 6px;
1479
+ --buttongroup-lg-padding: 4px;
1480
+ --buttongroup-sm-padding: 2px;
1481
+ --buttongroup-sm-button-radius: 2px;
1482
+ --buttongroup-sm-button-padding-y: 4px;
1483
+ --buttongroup-xs-button-radius: 1px;
1484
+ --buttongroup-xs-padding: 2px;
1423
1485
  --notification-title-line-height: var(--line-height-sm);
1424
1486
  --notification-title-font-weight: var(--font-weight-medium-emphasis);
1425
1487
  --notification-title-font-size: var(--font-size-sm);
@@ -1445,11 +1507,6 @@
1445
1507
  --navigation-primary-item-padding-y: var(--spacing-2);
1446
1508
  --navigation-primary-item-padding-x: var(--spacing-3);
1447
1509
  --navigation-primary-item-gap-x: var(--spacing-2);
1448
- --icon-xl: var(--spacing-7);
1449
- --icon-lg: var(--spacing-6);
1450
- --icon-md: var(--spacing-5);
1451
- --icon-sm: var(--spacing-4);
1452
- --icon-xs: var(--spacing-3);
1453
1510
  --loader-size-xl: var(--spacing-8);
1454
1511
  --loader-size-lg: var(--spacing-7);
1455
1512
  --loader-size-md: var(--spacing-6);
@@ -1470,9 +1527,14 @@
1470
1527
  --dialog-header-gap-y: var(--spacing-0);
1471
1528
  --dialog-dismissible-position-right: var(--spacing-3);
1472
1529
  --dialog-dismissible-position-top: var(--spacing-5);
1530
+ --datagrid-expanded-padding-left: var(--spacing-14);
1531
+ --datagrid-expanded-padding-y: var(--spacing-4);
1532
+ --datagrid-expanded-padding-right: var(--spacing-4);
1533
+ --datagrid-cell-header-chevron-padding-x: var(--spacing-0);
1473
1534
  --datagrid-cell-header-padding-y: var(--spacing-3);
1474
1535
  --datagrid-cell-header-padding-right: var(--spacing-2);
1475
1536
  --datagrid-cell-header-padding-x: var(--spacing-4);
1537
+ --datagrid-cell-body-chevron-padding-x: var(--spacing-0);
1476
1538
  --datagrid-cell-body-actions-padding-y: var(--spacing-1);
1477
1539
  --datagrid-cell-body-padding-y: var(--spacing-2);
1478
1540
  --datagrid-cell-body-actions-gap-x: var(--spacing-2);
@@ -1514,6 +1576,18 @@
1514
1576
  --alert-icon-position-x: var(--spacing-4);
1515
1577
  --alert-gap-x: var(--spacing-3);
1516
1578
  --alert-icon-size: var(--spacing-5);
1579
+ --togglegroup-md-height: var(--spacing-10);
1580
+ --togglegroup-md-gap: var(--spacing-0-5);
1581
+ --togglegroup-md-radius: var(--radius-rounded-md);
1582
+ --togglegroup-lg-height: var(--spacing-12);
1583
+ --togglegroup-lg-gap: var(--spacing-0-5);
1584
+ --togglegroup-lg-radius: var(--radius-rounded-lg);
1585
+ --togglegroup-sm-height: var(--spacing-8);
1586
+ --togglegroup-sm-gap: var(--spacing-0-5);
1587
+ --togglegroup-sm-radius: var(--radius-rounded);
1588
+ --togglegroup-xs-height: var(--spacing-6);
1589
+ --togglegroup-xs-gap: var(--spacing-0-5);
1590
+ --togglegroup-xs-radius: var(--radius-rounded-sm);
1517
1591
  --slider-track-radius: var(--radius-rounded-sm);
1518
1592
  --slider-track-padding-x: var(--spacing-3);
1519
1593
  --slider-track-height: var(--spacing-1);
@@ -1657,6 +1731,11 @@
1657
1731
  --list-native-line-height: var(--line-height-base);
1658
1732
  --list-native-font-size: var(--font-size-md);
1659
1733
  --list-native-icon-size: var(--spacing-5);
1734
+ --icon-xl: var(--spacing-7);
1735
+ --icon-lg: var(--spacing-6);
1736
+ --icon-md: var(--spacing-5);
1737
+ --icon-sm: var(--spacing-4);
1738
+ --icon-xs: var(--spacing-3);
1660
1739
  --calendar-navigation-buttons-gap: var(--spacing-1);
1661
1740
  --calendar-controls-padding-top: var(--spacing-2);
1662
1741
  --calendar-controls-margin-top: var(--spacing-1);
@@ -1712,5 +1791,18 @@
1712
1791
  --button-xs-gap: var(--spacing-1);
1713
1792
  --button-xs-font-size: var(--font-size-xs);
1714
1793
  --button-xs-border-radius: var(--radius-rounded-sm);
1794
+ --buttongroup-md-height: var(--spacing-10);
1795
+ --buttongroup-md-gap: var(--spacing-px);
1796
+ --buttongroup-md-radius: var(--radius-rounded-md);
1797
+ --buttongroup-lg-height: var(--spacing-12);
1798
+ --buttongroup-lg-gap: var(--spacing-px);
1799
+ --buttongroup-lg-radius: var(--radius-rounded-lg);
1800
+ --buttongroup-sm-height: var(--spacing-8);
1801
+ --buttongroup-sm-gap: var(--spacing-px);
1802
+ --buttongroup-sm-radius: var(--radius-rounded);
1803
+ --buttongroup-xs-height: var(--spacing-6);
1804
+ --buttongroup-xs-gap: var(--spacing-px);
1805
+ --buttongroup-xs-radius: var(--radius-rounded-sm);
1806
+ --buttongroup-xs-button-padding-y: var(--spacing-0-5);
1715
1807
  }
1716
1808