@nova-design-system/nova-base 3.13.0 → 3.14.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.
@@ -20,13 +20,8 @@
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;
26
23
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
27
24
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
28
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
29
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
30
25
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
31
26
  --components-button-lower-border-active: rgba(255, 255, 255, 0);
32
27
  --components-button-lower-border: rgba(255, 255, 255, 0);
@@ -72,11 +67,21 @@
72
67
  --color-white: #ffffff;
73
68
  --color-black: #000000;
74
69
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
70
+ --components-toggle-shape-hover: var(--color-gray-ocean-300);
71
+ --components-toggle-shape-default: var(--color-gray-ocean-400);
72
+ --components-toggle-background-disabled-checked: var(--color-gray-ocean-600);
73
+ --components-toggle-background-disabled: var(--color-gray-ocean-600);
74
+ --components-toggle-border-disabled-checked: var(--color-gray-ocean-600);
75
+ --components-toggle-border-disabled: var(--color-gray-ocean-600);
76
+ --components-toggle-border-hover: var(--color-gray-ocean-300);
77
+ --components-toggle-border-default: var(--color-gray-ocean-400);
75
78
  --components-tooltip-border: var(--color-gray-ocean-50);
76
79
  --components-tooltip-background: var(--color-gray-ocean-50);
77
80
  --components-popover-background: var(--color-gray-ocean-900);
78
81
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
79
82
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
83
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
84
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
80
85
  --components-overlay-background: var(--color-gray-ocean-650);
81
86
  --components-button-destructive-high-icon-hover: var(--color-base-black);
82
87
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -110,8 +115,6 @@
110
115
  --components-form-shape-background-hover: var(--color-gray-ocean-350);
111
116
  --components-form-shape-background-default: var(--color-gray-ocean-400);
112
117
  --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);
115
118
  --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
116
119
  --components-button-gr-as-complementary-icon: var(--color-base-white);
117
120
  --components-button-gr-as-complementary-text-hover: var(--color-base-white);
@@ -320,6 +323,12 @@
320
323
  --color-interaction-container-neutral-border-active: var(--color-petrol-400);
321
324
  --color-interaction-container-neutral-background-active: var(--color-petrol-900);
322
325
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
326
+ --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
327
+ --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
328
+ --components-toggle-background-hover-checked: var(--color-interaction-container-branded-high-background-hover);
329
+ --components-toggle-background-default-checked: var(--color-interaction-container-branded-high-background);
330
+ --components-toggle-border-hover-checked: var(--color-interaction-container-branded-high-border-hover);
331
+ --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
323
332
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
324
333
  --components-tooltip-text: var(--color-content-inverted-high-text);
325
334
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -351,10 +360,6 @@
351
360
  --components-menu-contextual-border: var(--color-content-low-border);
352
361
  --components-menu-contextual-background: var(--color-level-00-background);
353
362
  --components-calendar-background: var(--color-level-00-background);
354
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
355
- --components-calendar-weeks-text: var(--color-content-high-text);
356
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
357
- --components-calendar-weeks-background: var(--color-level-10-background);
358
363
  --components-calendar-cell-text-today: var(--color-content-high-text);
359
364
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
360
365
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -365,11 +370,24 @@
365
370
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
366
371
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
367
372
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
373
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
374
+ --components-calendar-weeks-text: var(--color-content-high-text);
375
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
376
+ --components-calendar-weeks-background: var(--color-level-10-background);
368
377
  --components-calendar-header-text: var(--color-content-high-text);
369
378
  --components-calendar-border: var(--color-content-low-border);
370
379
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
371
380
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
372
381
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
382
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
383
+ --components-datagrid-expander-border: var(--color-content-low-border);
384
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
385
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
386
+ --components-datagrid-body-subtext: var(--color-content-low-text);
387
+ --components-datagrid-body-text: var(--color-content-medium-text);
388
+ --components-datagrid-body-border: var(--color-content-low-border);
389
+ --components-datagrid-header-text: var(--color-content-high-text);
390
+ --components-datagrid-header-border: var(--color-content-medium-border);
373
391
  --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
374
392
  --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
375
393
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
@@ -478,12 +496,6 @@
478
496
  --components-form-text-label-default: var(--color-content-high-text);
479
497
  --components-form-text-info-icon: var(--color-content-medium-text);
480
498
  --components-form-text-required: var(--color-feedback-error-low-icon);
481
- --components-datagrid-expander-expander-background: var(--color-level-10-background);
482
- --components-datagrid-expander-border: var(--color-content-low-border);
483
- --components-datagrid-expander-content-background: var(--color-level-00-background);
484
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
485
- --components-datagrid-body-border: var(--color-content-low-border);
486
- --components-datagrid-header-border: var(--color-content-medium-border);
487
499
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
488
500
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
489
501
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -541,6 +553,10 @@
541
553
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
542
554
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
543
555
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
556
+ --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
557
+ --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
558
+ --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
559
+ --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
544
560
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
545
561
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
546
562
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -567,6 +583,7 @@
567
583
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
568
584
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
569
585
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
586
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
570
587
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
571
588
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
572
589
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
@@ -574,7 +591,6 @@
574
591
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
575
592
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
576
593
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
577
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
578
594
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
579
595
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
580
596
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -628,13 +644,8 @@
628
644
  --components-list-native-background: #565558;
629
645
  --components-form-opacity-disabled: 50%;
630
646
  --components-form-opacity-default: 100%;
631
- --components-datagrid-body-subtext: #0000ff;
632
- --components-datagrid-body-text: #ff0000;
633
- --components-datagrid-header-text: #ff0000;
634
647
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
635
648
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
636
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
637
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
638
649
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
639
650
  --components-button-lower-border-active: rgba(255, 255, 255, 0);
640
651
  --components-button-lower-border: rgba(255, 255, 255, 0);
@@ -680,11 +691,21 @@
680
691
  --color-white: #ffffff;
681
692
  --color-black: #000000;
682
693
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
694
+ --components-toggle-shape-hover: var(--color-gray-ocean-400);
695
+ --components-toggle-shape-default: var(--color-gray-ocean-300);
696
+ --components-toggle-background-disabled-checked: var(--color-gray-ocean-150);
697
+ --components-toggle-background-disabled: var(--color-gray-ocean-150);
698
+ --components-toggle-border-disabled-checked: var(--color-gray-ocean-150);
699
+ --components-toggle-border-disabled: var(--color-gray-ocean-150);
700
+ --components-toggle-border-hover: var(--color-gray-ocean-400);
701
+ --components-toggle-border-default: var(--color-gray-spark-300);
683
702
  --components-tooltip-border: var(--color-gray-ocean-900);
684
703
  --components-tooltip-background: var(--color-gray-ocean-900);
685
704
  --components-popover-background: var(--color-gray-ocean-00);
686
705
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
687
706
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
707
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
708
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
688
709
  --components-overlay-background: var(--color-gray-ocean-850);
689
710
  --components-button-destructive-high-icon-hover: var(--color-base-white);
690
711
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -718,8 +739,6 @@
718
739
  --components-form-shape-background-hover: var(--color-gray-ocean-100);
719
740
  --components-form-shape-background-default: var(--color-gray-ocean-75);
720
741
  --components-form-field-background-checked: var(--color-petrol-600);
721
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
722
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
723
742
  --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
724
743
  --components-button-gr-as-complementary-icon: var(--color-base-black);
725
744
  --components-button-gr-as-complementary-text-hover: var(--color-base-black);
@@ -928,6 +947,12 @@
928
947
  --color-interaction-container-neutral-border-active: var(--color-petrol-700);
929
948
  --color-interaction-container-neutral-background-active: var(--color-petrol-50);
930
949
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
950
+ --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
951
+ --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
952
+ --components-toggle-background-hover-checked: var(--color-interaction-container-branded-high-background-hover);
953
+ --components-toggle-background-default-checked: var(--color-interaction-container-branded-high-background);
954
+ --components-toggle-border-hover-checked: var(--color-interaction-container-branded-high-border-hover);
955
+ --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
931
956
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
932
957
  --components-tooltip-text: var(--color-content-inverted-high-text);
933
958
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -959,10 +984,6 @@
959
984
  --components-menu-contextual-border: var(--color-content-low-border);
960
985
  --components-menu-contextual-background: var(--color-level-00-background);
961
986
  --components-calendar-background: var(--color-level-00-background);
962
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
963
- --components-calendar-weeks-text: var(--color-content-high-text);
964
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
965
- --components-calendar-weeks-background: var(--color-level-10-background);
966
987
  --components-calendar-cell-text-today: var(--color-content-high-text);
967
988
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
968
989
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -973,11 +994,24 @@
973
994
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
974
995
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
975
996
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
997
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
998
+ --components-calendar-weeks-text: var(--color-content-high-text);
999
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
1000
+ --components-calendar-weeks-background: var(--color-level-10-background);
976
1001
  --components-calendar-header-text: var(--color-content-high-text);
977
1002
  --components-calendar-border: var(--color-content-low-border);
978
1003
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
979
1004
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
980
1005
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
1006
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
1007
+ --components-datagrid-expander-border: var(--color-content-low-border);
1008
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
1009
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
1010
+ --components-datagrid-body-subtext: var(--color-content-low-text);
1011
+ --components-datagrid-body-text: var(--color-content-medium-text);
1012
+ --components-datagrid-body-border: var(--color-content-low-border);
1013
+ --components-datagrid-header-text: var(--color-content-high-text);
1014
+ --components-datagrid-header-border: var(--color-content-medium-border);
981
1015
  --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
982
1016
  --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
983
1017
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
@@ -1086,12 +1120,6 @@
1086
1120
  --components-form-text-label-default: var(--color-content-high-text);
1087
1121
  --components-form-text-info-icon: var(--color-content-low-text);
1088
1122
  --components-form-text-required: var(--color-feedback-error-low-icon);
1089
- --components-datagrid-expander-expander-background: var(--color-level-10-background);
1090
- --components-datagrid-expander-border: var(--color-content-low-border);
1091
- --components-datagrid-expander-content-background: var(--color-level-00-background);
1092
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
1093
- --components-datagrid-body-border: var(--color-content-low-border);
1094
- --components-datagrid-header-border: var(--color-content-medium-border);
1095
1123
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
1096
1124
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
1097
1125
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -1149,6 +1177,10 @@
1149
1177
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1150
1178
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1151
1179
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1180
+ --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
1181
+ --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
1182
+ --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
1183
+ --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
1152
1184
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1153
1185
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1154
1186
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1175,6 +1207,7 @@
1175
1207
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1176
1208
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1177
1209
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1210
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1178
1211
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1179
1212
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1180
1213
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
@@ -1182,7 +1215,6 @@
1182
1215
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1183
1216
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1184
1217
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1185
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1186
1218
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1187
1219
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
1188
1220
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -20,13 +20,8 @@
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: #0000ff;
24
- --components-datagrid-body-text: #ff0000;
25
- --components-datagrid-header-text: #ff0000;
26
23
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
27
24
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
28
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
29
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
30
25
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
31
26
  --components-button-lower-border-active: rgba(255, 255, 255, 0);
32
27
  --components-button-lower-border: rgba(255, 255, 255, 0);
@@ -72,11 +67,22 @@
72
67
  --color-white: #ffffff;
73
68
  --color-black: #000000;
74
69
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
70
+ --components-toggle-shape-hover: var(--color-gray-spark-300);
71
+ --components-toggle-shape-default: var(--color-gray-spark-400);
72
+ --components-toggle-background-disabled-checked: var(--color-gray-spark-600);
73
+ --components-toggle-background-disabled: var(--color-gray-spark-600);
74
+ --components-toggle-background-default: var(--color-interaction-container-neutral-background);
75
+ --components-toggle-border-disabled-checked: var(--color-gray-spark-600);
76
+ --components-toggle-border-disabled: var(--color-gray-spark-600);
77
+ --components-toggle-border-hover: var(--color-gray-spark-300);
78
+ --components-toggle-border-default: var(--color-gray-spark-400);
75
79
  --components-tooltip-border: var(--color-gray-spark-50);
76
80
  --components-tooltip-background: var(--color-gray-spark-50);
77
81
  --components-popover-background: var(--color-gray-spark-900);
78
82
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
79
83
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
84
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
85
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
80
86
  --components-overlay-background: var(--color-gray-spark-650);
81
87
  --components-button-destructive-high-icon-hover: var(--color-base-black);
82
88
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -104,14 +110,12 @@
104
110
  --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
105
111
  --components-list-native-item-content-hover: var(--color-base-white);
106
112
  --components-list-native-item-content-default: var(--color-base-white);
107
- --components-form-shape-foreground-default: var(--color-base-white);
113
+ --components-form-shape-foreground-default: var(--color-base-black);
108
114
  --components-form-shape-background-selected: var(--color-orange-500);
109
115
  --components-form-shape-background-disabled: var(--color-gray-spark-700);
110
116
  --components-form-shape-background-hover: var(--color-gray-spark-350);
111
117
  --components-form-shape-background-default: var(--color-gray-spark-400);
112
118
  --components-form-field-background-checked: var(--color-orange-500);
113
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
114
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
115
119
  --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
116
120
  --components-button-gr-as-complementary-icon: var(--color-base-white);
117
121
  --components-button-gr-as-complementary-text-hover: var(--color-base-white);
@@ -309,8 +313,8 @@
309
313
  --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
310
314
  --color-interaction-container-branded-high-icon-active: var(--color-base-black);
311
315
  --color-interaction-container-branded-high-icon: var(--color-base-black);
312
- --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
313
- --color-interaction-container-branded-high-border-active: var(--color-orange-600);
316
+ --color-interaction-container-branded-high-border-hover: var(--color-orange-400);
317
+ --color-interaction-container-branded-high-border-active: var(--color-orange-400);
314
318
  --color-interaction-container-branded-high-border: var(--color-orange-500);
315
319
  --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
316
320
  --color-interaction-container-branded-high-background-active: var(--color-orange-400);
@@ -320,6 +324,12 @@
320
324
  --color-interaction-container-neutral-border-active: var(--color-orange-400);
321
325
  --color-interaction-container-neutral-background-active: var(--color-orange-900);
322
326
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
327
+ --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
328
+ --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
329
+ --components-toggle-background-hover-checked: var(--color-interaction-container-branded-high-background-hover);
330
+ --components-toggle-background-default-checked: var(--color-interaction-container-branded-high-background);
331
+ --components-toggle-border-hover-checked: var(--color-interaction-container-branded-high-border-hover);
332
+ --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
323
333
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
324
334
  --components-tooltip-text: var(--color-content-inverted-high-text);
325
335
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -351,10 +361,6 @@
351
361
  --components-menu-contextual-border: var(--color-content-low-border);
352
362
  --components-menu-contextual-background: var(--color-level-00-background);
353
363
  --components-calendar-background: var(--color-level-00-background);
354
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
355
- --components-calendar-weeks-text: var(--color-content-high-text);
356
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
357
- --components-calendar-weeks-background: var(--color-level-10-background);
358
364
  --components-calendar-cell-text-today: var(--color-content-high-text);
359
365
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
360
366
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -365,11 +371,24 @@
365
371
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
366
372
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
367
373
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
374
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
375
+ --components-calendar-weeks-text: var(--color-content-high-text);
376
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
377
+ --components-calendar-weeks-background: var(--color-level-10-background);
368
378
  --components-calendar-header-text: var(--color-content-high-text);
369
379
  --components-calendar-border: var(--color-content-low-border);
370
380
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
371
381
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
372
382
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
383
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
384
+ --components-datagrid-expander-border: var(--color-content-low-border);
385
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
386
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
387
+ --components-datagrid-body-subtext: var(--color-content-low-text);
388
+ --components-datagrid-body-text: var(--color-content-medium-text);
389
+ --components-datagrid-body-border: var(--color-content-low-border);
390
+ --components-datagrid-header-text: var(--color-content-high-text);
391
+ --components-datagrid-header-border: var(--color-content-medium-border);
373
392
  --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
374
393
  --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
375
394
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
@@ -478,12 +497,6 @@
478
497
  --components-form-text-label-default: var(--color-content-high-text);
479
498
  --components-form-text-info-icon: var(--color-content-low-text);
480
499
  --components-form-text-required: var(--color-feedback-error-low-icon);
481
- --components-datagrid-expander-expander-background: var(--color-level-10-background);
482
- --components-datagrid-expander-border: var(--color-content-low-border);
483
- --components-datagrid-expander-content-background: var(--color-level-00-background);
484
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
485
- --components-datagrid-body-border: var(--color-content-low-border);
486
- --components-datagrid-header-border: var(--color-content-medium-border);
487
500
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
488
501
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
489
502
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -541,6 +554,9 @@
541
554
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
542
555
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
543
556
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
557
+ --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
558
+ --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
559
+ --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
544
560
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
545
561
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
546
562
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -567,6 +583,7 @@
567
583
  --components-field-time-text-hover: var(--color-interaction-container-neutral-icon-hover);
568
584
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
569
585
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
586
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
570
587
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
571
588
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
572
589
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
@@ -574,7 +591,6 @@
574
591
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
575
592
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
576
593
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
577
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
578
594
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
579
595
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
580
596
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -628,13 +644,8 @@
628
644
  --components-list-native-background: #565558;
629
645
  --components-form-opacity-disabled: 50%;
630
646
  --components-form-opacity-default: 100%;
631
- --components-datagrid-body-subtext: #0000ff;
632
- --components-datagrid-body-text: #ff0000;
633
- --components-datagrid-header-text: #ff0000;
634
647
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
635
648
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
636
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
637
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
638
649
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
639
650
  --components-button-lower-border-active: rgba(255, 255, 255, 0);
640
651
  --components-button-lower-border: rgba(255, 255, 255, 0);
@@ -678,11 +689,22 @@
678
689
  --color-white: #ffffff;
679
690
  --color-black: #000000;
680
691
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
692
+ --components-toggle-shape-hover: var(--color-gray-spark-400);
693
+ --components-toggle-shape-default: var(--color-gray-spark-300);
694
+ --components-toggle-background-disabled-checked: var(--color-gray-spark-150);
695
+ --components-toggle-background-disabled: var(--color-gray-spark-150);
696
+ --components-toggle-background-default: var(--color-interaction-container-neutral-background);
697
+ --components-toggle-border-disabled-checked: var(--color-gray-spark-150);
698
+ --components-toggle-border-disabled: var(--color-gray-spark-150);
699
+ --components-toggle-border-hover: var(--color-gray-spark-400);
700
+ --components-toggle-border-default: var(--color-gray-spark-300);
681
701
  --components-tooltip-border: var(--color-gray-spark-900);
682
702
  --components-tooltip-background: var(--color-gray-spark-900);
683
703
  --components-popover-background: var(--color-gray-spark-00);
684
704
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
685
705
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
706
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
707
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
686
708
  --components-overlay-background: var(--color-gray-spark-850);
687
709
  --components-button-destructive-high-icon-hover: var(--color-base-white);
688
710
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -716,8 +738,6 @@
716
738
  --components-form-shape-background-hover: var(--color-gray-spark-100);
717
739
  --components-form-shape-background-default: var(--color-gray-spark-75);
718
740
  --components-form-field-background-checked: var(--color-orange-500);
719
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
720
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
721
741
  --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
722
742
  --components-button-gr-as-complementary-icon: var(--color-base-black);
723
743
  --components-button-gr-as-complementary-text-hover: var(--color-base-black);
@@ -926,6 +946,12 @@
926
946
  --color-interaction-container-neutral-border-active: var(--color-orange-600);
927
947
  --color-interaction-container-neutral-background-active: var(--color-orange-50);
928
948
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
949
+ --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
950
+ --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
951
+ --components-toggle-background-hover-checked: var(--color-interaction-container-branded-high-background-hover);
952
+ --components-toggle-background-default-checked: var(--color-interaction-container-branded-high-background);
953
+ --components-toggle-border-hover-checked: var(--color-interaction-container-branded-high-border-hover);
954
+ --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
929
955
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
930
956
  --components-tooltip-text: var(--color-content-inverted-high-text);
931
957
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -957,10 +983,6 @@
957
983
  --components-menu-contextual-border: var(--color-content-low-border);
958
984
  --components-menu-contextual-background: var(--color-level-00-background);
959
985
  --components-calendar-background: var(--color-level-00-background);
960
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
961
- --components-calendar-weeks-text: var(--color-content-high-text);
962
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
963
- --components-calendar-weeks-background: var(--color-level-10-background);
964
986
  --components-calendar-cell-text-today: var(--color-content-high-text);
965
987
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
966
988
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -970,11 +992,24 @@
970
992
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
971
993
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
972
994
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
995
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
996
+ --components-calendar-weeks-text: var(--color-content-high-text);
997
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
998
+ --components-calendar-weeks-background: var(--color-level-10-background);
973
999
  --components-calendar-header-text: var(--color-content-high-text);
974
1000
  --components-calendar-border: var(--color-content-low-border);
975
1001
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
976
1002
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
977
1003
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
1004
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
1005
+ --components-datagrid-expander-border: var(--color-content-low-border);
1006
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
1007
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
1008
+ --components-datagrid-body-subtext: var(--color-content-low-text);
1009
+ --components-datagrid-body-text: var(--color-content-medium-text);
1010
+ --components-datagrid-body-border: var(--color-content-low-border);
1011
+ --components-datagrid-header-text: var(--color-content-high-text);
1012
+ --components-datagrid-header-border: var(--color-content-medium-border);
978
1013
  --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
979
1014
  --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
980
1015
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
@@ -1083,12 +1118,6 @@
1083
1118
  --components-form-text-label-default: var(--color-content-high-text);
1084
1119
  --components-form-text-info-icon: var(--color-content-low-text);
1085
1120
  --components-form-text-required: var(--color-feedback-error-low-icon);
1086
- --components-datagrid-expander-expander-background: var(--color-level-10-background);
1087
- --components-datagrid-expander-border: var(--color-content-low-border);
1088
- --components-datagrid-expander-content-background: var(--color-level-00-background);
1089
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
1090
- --components-datagrid-body-border: var(--color-content-low-border);
1091
- --components-datagrid-header-border: var(--color-content-medium-border);
1092
1121
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
1093
1122
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
1094
1123
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -1148,6 +1177,9 @@
1148
1177
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1149
1178
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1150
1179
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1180
+ --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
1181
+ --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
1182
+ --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
1151
1183
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1152
1184
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1153
1185
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1175,6 +1207,7 @@
1175
1207
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1176
1208
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1177
1209
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1210
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1178
1211
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1179
1212
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1180
1213
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
@@ -1182,7 +1215,6 @@
1182
1215
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1183
1216
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1184
1217
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1185
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1186
1218
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1187
1219
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
1188
1220
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -287,8 +287,6 @@ export const ComponentsButtonLowTextHover : string;
287
287
  export const ComponentsButtonLowerBorder : string;
288
288
  export const ComponentsButtonLowerBorderActive : string;
289
289
  export const ComponentsButtonLowerBorderHover : string;
290
- export const ComponentsButtonLowerBorder2 : string;
291
- export const ComponentsButtonLowerBorderHover2 : string;
292
290
  export const ComponentsButtonLowerBackground : string;
293
291
  export const ComponentsButtonLowerBackgroundActive : string;
294
292
  export const ComponentsButtonLowerBackgroundHover : string;
@@ -318,18 +316,6 @@ export const ComponentsButtonMediumIconHover : string;
318
316
  export const ComponentsButtonMediumText : string;
319
317
  export const ComponentsButtonMediumTextActive : string;
320
318
  export const ComponentsButtonMediumTextHover : string;
321
- export const ComponentsDatagridHeaderText : string;
322
- export const ComponentsDatagridHeaderBorder : string;
323
- export const ComponentsDatagridHeaderBackground : string;
324
- export const ComponentsDatagridBodyText : string;
325
- export const ComponentsDatagridBodySubtext : string;
326
- export const ComponentsDatagridBodyBorder : string;
327
- export const ComponentsDatagridBodyBackgroundDefault : string;
328
- export const ComponentsDatagridBodyBackgroundActive : string;
329
- export const ComponentsDatagridBodyBackgroundHover : string;
330
- export const ComponentsDatagridExpanderContentBackground : string;
331
- export const ComponentsDatagridExpanderBorder : string;
332
- export const ComponentsDatagridExpanderExpanderBackground : string;
333
319
  export const ComponentsFormOpacityDefault : string;
334
320
  export const ComponentsFormOpacityDisabled : string;
335
321
  export const ComponentsFormTextRequired : string;
@@ -495,6 +481,18 @@ export const ComponentsButtongroupLowBorder : string;
495
481
  export const ComponentsButtongroupLowBackground : string;
496
482
  export const ComponentsButtongroupLowerBorder : string;
497
483
  export const ComponentsButtongroupLowerBackground : string;
484
+ export const ComponentsDatagridHeaderBorder : string;
485
+ export const ComponentsDatagridHeaderText : string;
486
+ export const ComponentsDatagridHeaderBackground : string;
487
+ export const ComponentsDatagridBodyBorder : string;
488
+ export const ComponentsDatagridBodyText : string;
489
+ export const ComponentsDatagridBodySubtext : string;
490
+ export const ComponentsDatagridBodyBackgroundDefault : string;
491
+ export const ComponentsDatagridBodyBackgroundActive : string;
492
+ export const ComponentsDatagridBodyBackgroundHover : string;
493
+ export const ComponentsDatagridExpanderContentBackground : string;
494
+ export const ComponentsDatagridExpanderBorder : string;
495
+ export const ComponentsDatagridExpanderExpanderBackground : string;
498
496
  export const ComponentsFieldTimeBackgroundDefault : string;
499
497
  export const ComponentsFieldTimeBackgroundHover : string;
500
498
  export const ComponentsFieldTimeBackgroundActive : string;
@@ -504,6 +502,10 @@ export const ComponentsFieldTimeTextActive : string;
504
502
  export const ComponentsFieldTimeBorderActive : string;
505
503
  export const ComponentsCalendarBorder : string;
506
504
  export const ComponentsCalendarHeaderText : string;
505
+ export const ComponentsCalendarWeeksBackground : string;
506
+ export const ComponentsCalendarWeeksBackgroundHover : string;
507
+ export const ComponentsCalendarWeeksText : string;
508
+ export const ComponentsCalendarWeeksTextHover : string;
507
509
  export const ComponentsCalendarCellBackground : string;
508
510
  export const ComponentsCalendarCellBackgroundSelected : string;
509
511
  export const ComponentsCalendarCellBackgroundInRange : string;
@@ -518,10 +520,6 @@ export const ComponentsCalendarCellTextInRange : string;
518
520
  export const ComponentsCalendarCellTextHover : string;
519
521
  export const ComponentsCalendarCellTextOutsideMonth : string;
520
522
  export const ComponentsCalendarCellTextToday : string;
521
- export const ComponentsCalendarWeeksBackground : string;
522
- export const ComponentsCalendarWeeksBackgroundHover : string;
523
- export const ComponentsCalendarWeeksText : string;
524
- export const ComponentsCalendarWeeksTextHover : string;
525
523
  export const ComponentsCalendarBackground : string;
526
524
  export const ComponentsMenuContextualBackground : string;
527
525
  export const ComponentsMenuContextualBorder : string;
@@ -576,6 +574,24 @@ export const ComponentsTooltipBackground : string;
576
574
  export const ComponentsTooltipBorder : string;
577
575
  export const ComponentsTooltipText : string;
578
576
  export const ComponentsTooltipSupportingText : string;
577
+ export const ComponentsToggleBorderDefault : string;
578
+ export const ComponentsToggleBorderDefaultChecked : string;
579
+ export const ComponentsToggleBorderHover : string;
580
+ export const ComponentsToggleBorderHoverChecked : string;
581
+ export const ComponentsToggleBorderDisabled : string;
582
+ export const ComponentsToggleBorderDisabledChecked : string;
583
+ export const ComponentsToggleBackgroundDefault : string;
584
+ export const ComponentsToggleBackgroundDefaultChecked : string;
585
+ export const ComponentsToggleBackgroundHover : string;
586
+ export const ComponentsToggleBackgroundHoverChecked : string;
587
+ export const ComponentsToggleBackgroundDisabled : string;
588
+ export const ComponentsToggleBackgroundDisabledChecked : string;
589
+ export const ComponentsToggleShapeDefault : string;
590
+ export const ComponentsToggleShapeDefaultChecked : string;
591
+ export const ComponentsToggleShapeHover : string;
592
+ export const ComponentsToggleShapeHoverChecked : string;
593
+ export const ComponentsToggleShapeDisabled : string;
594
+ export const ComponentsToggleShapeDisabledChecked : string;
579
595
  export const ComponentsTogglegroupHighBorder : string;
580
596
  export const ComponentsTogglegroupHighBackground : string;
581
597
  export const ComponentsTogglegroupLowBorder : string;