@nova-design-system/nova-base 3.12.0 → 3.14.0-beta.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.
@@ -67,6 +67,18 @@ exports.NOVA_TAILWIND_TOKENS = {
67
67
  '.border-feedback-error-high': {
68
68
  'border-color': 'var(--color-feedback-error-high-border)'
69
69
  },
70
+ '.bg-feedback-error-high-contrast': {
71
+ 'background-color': 'var(--color-feedback-error-high-contrast-background)'
72
+ },
73
+ '.border-feedback-error-high-contrast': {
74
+ 'border-color': 'var(--color-feedback-error-high-contrast-border)'
75
+ },
76
+ '.icon-feedback-error-high-contrast': {
77
+ 'color': 'var(--color-feedback-error-high-contrast-icon)'
78
+ },
79
+ '.text-feedback-error-high-contrast': {
80
+ 'color': 'var(--color-feedback-error-high-contrast-text)'
81
+ },
70
82
  '.icon-feedback-error-high': {
71
83
  'color': 'var(--color-feedback-error-high-icon)'
72
84
  },
@@ -91,6 +103,18 @@ exports.NOVA_TAILWIND_TOKENS = {
91
103
  '.border-feedback-information-high': {
92
104
  'border-color': 'var(--color-feedback-information-high-border)'
93
105
  },
106
+ '.bg-feedback-information-high-contrast': {
107
+ 'background-color': 'var(--color-feedback-information-high-contrast-background)'
108
+ },
109
+ '.border-feedback-information-high-contrast': {
110
+ 'border-color': 'var(--color-feedback-information-high-contrast-border)'
111
+ },
112
+ '.icon-feedback-information-high-contrast': {
113
+ 'color': 'var(--color-feedback-information-high-contrast-icon)'
114
+ },
115
+ '.text-feedback-information-high-contrast': {
116
+ 'color': 'var(--color-feedback-information-high-contrast-text)'
117
+ },
94
118
  '.icon-feedback-information-high': {
95
119
  'color': 'var(--color-feedback-information-high-icon)'
96
120
  },
@@ -115,6 +139,18 @@ exports.NOVA_TAILWIND_TOKENS = {
115
139
  '.border-feedback-neutral-high': {
116
140
  'border-color': 'var(--color-feedback-neutral-high-border)'
117
141
  },
142
+ '.bg-feedback-neutral-high-contrast': {
143
+ 'background-color': 'var(--color-feedback-neutral-high-contrast-background)'
144
+ },
145
+ '.border-feedback-neutral-high-contrast': {
146
+ 'border-color': 'var(--color-feedback-neutral-high-contrast-border)'
147
+ },
148
+ '.icon-feedback-neutral-high-contrast': {
149
+ 'color': 'var(--color-feedback-neutral-high-contrast-icon)'
150
+ },
151
+ '.text-feedback-neutral-high-contrast': {
152
+ 'color': 'var(--color-feedback-neutral-high-contrast-text)'
153
+ },
118
154
  '.icon-feedback-neutral-high': {
119
155
  'color': 'var(--color-feedback-neutral-high-icon)'
120
156
  },
@@ -139,6 +175,18 @@ exports.NOVA_TAILWIND_TOKENS = {
139
175
  '.border-feedback-success-high': {
140
176
  'border-color': 'var(--color-feedback-success-high-border)'
141
177
  },
178
+ '.bg-feedback-success-high-contrast': {
179
+ 'background-color': 'var(--color-feedback-success-high-contrast-background)'
180
+ },
181
+ '.border-feedback-success-high-contrast': {
182
+ 'border-color': 'var(--color-feedback-success-high-contrast-border)'
183
+ },
184
+ '.icon-feedback-success-high-contrast': {
185
+ 'color': 'var(--color-feedback-success-high-contrast-icon)'
186
+ },
187
+ '.text-feedback-success-high-contrast': {
188
+ 'color': 'var(--color-feedback-success-high-contrast-text)'
189
+ },
142
190
  '.icon-feedback-success-high': {
143
191
  'color': 'var(--color-feedback-success-high-icon)'
144
192
  },
@@ -163,6 +211,18 @@ exports.NOVA_TAILWIND_TOKENS = {
163
211
  '.border-feedback-warning-high': {
164
212
  'border-color': 'var(--color-feedback-warning-high-border)'
165
213
  },
214
+ '.bg-feedback-warning-high-contrast': {
215
+ 'background-color': 'var(--color-feedback-warning-high-contrast-background)'
216
+ },
217
+ '.border-feedback-warning-high-contrast': {
218
+ 'border-color': 'var(--color-feedback-warning-high-contrast-border)'
219
+ },
220
+ '.icon-feedback-warning-high-contrast': {
221
+ 'color': 'var(--color-feedback-warning-high-contrast-icon)'
222
+ },
223
+ '.text-feedback-warning-high-contrast': {
224
+ 'color': 'var(--color-feedback-warning-high-contrast-text)'
225
+ },
166
226
  '.icon-feedback-warning-high': {
167
227
  'color': 'var(--color-feedback-warning-high-icon)'
168
228
  },
package/dist/css/mccs.css CHANGED
@@ -24,8 +24,6 @@
24
24
  --components-form-opacity-default: 100%;
25
25
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
26
26
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
27
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
28
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
29
27
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
30
28
  --components-button-lower-border-active: rgba(255, 255, 255, 0);
31
29
  --components-button-lower-border: rgba(255, 255, 255, 0);
@@ -176,6 +174,11 @@
176
174
  --color-rainbow-1-border: var(--color-amber-500);
177
175
  --color-rainbow-1-background: var(--color-amber-900);
178
176
  --color-focus-brand: var(--color-petrol-400);
177
+ --color-feedback-success-high-contrast-title: var(--color-base-black);
178
+ --color-feedback-success-high-contrast-text: var(--color-base-black);
179
+ --color-feedback-success-high-contrast-icon: var(--color-base-black);
180
+ --color-feedback-success-high-contrast-border: var(--color-status-green-300);
181
+ --color-feedback-success-high-contrast-background: var(--color-status-green-300);
179
182
  --color-feedback-success-low-text: var(--color-status-green-300);
180
183
  --color-feedback-success-low-icon: var(--color-status-green-300);
181
184
  --color-feedback-success-low-border: var(--color-status-green-300);
@@ -184,6 +187,11 @@
184
187
  --color-feedback-success-high-icon: var(--color-base-black);
185
188
  --color-feedback-success-high-border: var(--color-status-green-300);
186
189
  --color-feedback-success-high-background: var(--color-status-green-300);
190
+ --color-feedback-warning-high-contrast-title: var(--color-base-black);
191
+ --color-feedback-warning-high-contrast-text: var(--color-base-black);
192
+ --color-feedback-warning-high-contrast-icon: var(--color-base-black);
193
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-300);
194
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-300);
187
195
  --color-feedback-warning-low-text: var(--color-status-yellow-300);
188
196
  --color-feedback-warning-low-icon: var(--color-status-yellow-300);
189
197
  --color-feedback-warning-low-border: var(--color-status-yellow-300);
@@ -192,6 +200,11 @@
192
200
  --color-feedback-warning-high-icon: var(--color-base-black);
193
201
  --color-feedback-warning-high-border: var(--color-status-yellow-300);
194
202
  --color-feedback-warning-high-background: var(--color-status-yellow-300);
203
+ --color-feedback-neutral-high-contrast-title: var(--color-base-black);
204
+ --color-feedback-neutral-high-contrast-text: var(--color-base-black);
205
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-black);
206
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-300);
207
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-300);
195
208
  --color-feedback-neutral-low-text: var(--color-gray-ocean-300);
196
209
  --color-feedback-neutral-low-icon: var(--color-gray-ocean-300);
197
210
  --color-feedback-neutral-low-border: var(--color-gray-ocean-300);
@@ -200,6 +213,11 @@
200
213
  --color-feedback-neutral-high-icon: var(--color-base-black);
201
214
  --color-feedback-neutral-high-border: var(--color-gray-ocean-300);
202
215
  --color-feedback-neutral-high-background: var(--color-gray-ocean-300);
216
+ --color-feedback-error-high-contrast-title: var(--color-base-black);
217
+ --color-feedback-error-high-contrast-text: var(--color-base-black);
218
+ --color-feedback-error-high-contrast-icon: var(--color-base-black);
219
+ --color-feedback-error-high-contrast-border: var(--color-status-red-400);
220
+ --color-feedback-error-high-contrast-background: var(--color-status-red-400);
203
221
  --color-feedback-error-low-text: var(--color-status-red-400);
204
222
  --color-feedback-error-low-icon: var(--color-status-red-400);
205
223
  --color-feedback-error-low-border: var(--color-status-red-400);
@@ -208,6 +226,11 @@
208
226
  --color-feedback-error-high-icon: var(--color-base-black);
209
227
  --color-feedback-error-high-border: var(--color-status-red-400);
210
228
  --color-feedback-error-high-background: var(--color-status-red-400);
229
+ --color-feedback-information-high-contrast-title: var(--color-base-black);
230
+ --color-feedback-information-high-contrast-text: var(--color-base-black);
231
+ --color-feedback-information-high-contrast-icon: var(--color-base-black);
232
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
233
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
211
234
  --color-feedback-information-low-text: var(--color-status-blue-300);
212
235
  --color-feedback-information-low-icon: var(--color-status-blue-300);
213
236
  --color-feedback-information-low-border: var(--color-status-blue-300);
@@ -326,6 +349,7 @@
326
349
  --components-notification-warning-border: var(--color-feedback-warning-low-border);
327
350
  --components-notification-warning-background: var(--color-level-20-background);
328
351
  --components-notification-content-title: var(--color-content-high-text);
352
+ --components-notification-content-timestamp: var(--color-content-medium-text);
329
353
  --components-notification-content-description: var(--color-content-medium-text);
330
354
  --components-notification-information-border: var(--color-feedback-information-low-border);
331
355
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
@@ -335,6 +359,10 @@
335
359
  --components-menu-contextual-border: var(--color-content-low-border);
336
360
  --components-menu-contextual-background: var(--color-level-00-background);
337
361
  --components-calendar-background: var(--color-level-00-background);
362
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
363
+ --components-calendar-weeks-text: var(--color-level-inverted-15-background);
364
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
365
+ --components-calendar-weeks-background: var(--color-level-10-background);
338
366
  --components-calendar-cell-text-today: var(--color-content-high-text);
339
367
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
340
368
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -343,10 +371,6 @@
343
371
  --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
344
372
  --components-calendar-cell-dot: var(--color-content-high-icon);
345
373
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
346
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
347
- --components-calendar-weeks-text: var(--color-level-inverted-15-background);
348
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
349
- --components-calendar-weeks-background: var(--color-level-10-background);
350
374
  --components-calendar-header-text: var(--color-content-high-text);
351
375
  --components-calendar-border: var(--color-content-low-border);
352
376
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -585,8 +609,6 @@
585
609
  --components-form-opacity-default: 100%;
586
610
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
587
611
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
588
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
589
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
590
612
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
591
613
  --components-button-lower-border-active: rgba(255, 255, 255, 0);
592
614
  --components-button-lower-border: rgba(255, 255, 255, 0);
@@ -737,6 +759,11 @@
737
759
  --color-rainbow-1-border: var(--color-amber-600);
738
760
  --color-rainbow-1-background: var(--color-amber-50);
739
761
  --color-focus-brand: var(--color-petrol-500);
762
+ --color-feedback-success-high-contrast-title: var(--color-base-white);
763
+ --color-feedback-success-high-contrast-text: var(--color-base-white);
764
+ --color-feedback-success-high-contrast-icon: var(--color-base-white);
765
+ --color-feedback-success-high-contrast-border: var(--color-status-green-500);
766
+ --color-feedback-success-high-contrast-background: var(--color-status-green-500);
740
767
  --color-feedback-success-low-text: var(--color-status-green-500);
741
768
  --color-feedback-success-low-icon: var(--color-status-green-500);
742
769
  --color-feedback-success-low-border: var(--color-status-green-500);
@@ -745,6 +772,11 @@
745
772
  --color-feedback-success-high-icon: var(--color-base-white);
746
773
  --color-feedback-success-high-border: var(--color-status-green-400);
747
774
  --color-feedback-success-high-background: var(--color-status-green-400);
775
+ --color-feedback-warning-high-contrast-title: var(--color-base-white);
776
+ --color-feedback-warning-high-contrast-text: var(--color-base-white);
777
+ --color-feedback-warning-high-contrast-icon: var(--color-base-white);
778
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-500);
779
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-500);
748
780
  --color-feedback-warning-low-text: var(--color-status-yellow-500);
749
781
  --color-feedback-warning-low-icon: var(--color-status-yellow-500);
750
782
  --color-feedback-warning-low-border: var(--color-status-yellow-500);
@@ -753,6 +785,11 @@
753
785
  --color-feedback-warning-high-icon: var(--color-base-white);
754
786
  --color-feedback-warning-high-border: var(--color-status-yellow-400);
755
787
  --color-feedback-warning-high-background: var(--color-status-yellow-400);
788
+ --color-feedback-neutral-high-contrast-title: var(--color-base-white);
789
+ --color-feedback-neutral-high-contrast-text: var(--color-base-white);
790
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-white);
791
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-400);
792
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-400);
756
793
  --color-feedback-neutral-low-text: var(--color-gray-ocean-400);
757
794
  --color-feedback-neutral-low-icon: var(--color-gray-ocean-400);
758
795
  --color-feedback-neutral-low-border: var(--color-gray-ocean-400);
@@ -761,6 +798,11 @@
761
798
  --color-feedback-neutral-high-icon: var(--color-base-white);
762
799
  --color-feedback-neutral-high-border: var(--color-gray-ocean-400);
763
800
  --color-feedback-neutral-high-background: var(--color-gray-ocean-400);
801
+ --color-feedback-error-high-contrast-title: var(--color-base-white);
802
+ --color-feedback-error-high-contrast-text: var(--color-base-white);
803
+ --color-feedback-error-high-contrast-icon: var(--color-base-white);
804
+ --color-feedback-error-high-contrast-border: var(--color-status-red-500);
805
+ --color-feedback-error-high-contrast-background: var(--color-status-red-500);
764
806
  --color-feedback-error-low-text: var(--color-status-red-500);
765
807
  --color-feedback-error-low-icon: var(--color-status-red-500);
766
808
  --color-feedback-error-low-border: var(--color-status-red-500);
@@ -769,6 +811,11 @@
769
811
  --color-feedback-error-high-icon: var(--color-base-white);
770
812
  --color-feedback-error-high-border: var(--color-status-red-500);
771
813
  --color-feedback-error-high-background: var(--color-status-red-500);
814
+ --color-feedback-information-high-contrast-title: var(--color-base-white);
815
+ --color-feedback-information-high-contrast-text: var(--color-base-white);
816
+ --color-feedback-information-high-contrast-icon: var(--color-base-white);
817
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-400);
818
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-400);
772
819
  --color-feedback-information-low-text: var(--color-status-blue-500);
773
820
  --color-feedback-information-low-icon: var(--color-status-blue-500);
774
821
  --color-feedback-information-low-border: var(--color-status-blue-500);
@@ -887,6 +934,7 @@
887
934
  --components-notification-warning-border: var(--color-feedback-warning-low-border);
888
935
  --components-notification-warning-background: var(--color-level-00-background);
889
936
  --components-notification-content-title: var(--color-content-high-text);
937
+ --components-notification-content-timestamp: var(--color-content-medium-text);
890
938
  --components-notification-content-description: var(--color-content-medium-text);
891
939
  --components-notification-information-border: var(--color-feedback-information-low-border);
892
940
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
@@ -896,6 +944,10 @@
896
944
  --components-menu-contextual-border: var(--color-content-low-border);
897
945
  --components-menu-contextual-background: var(--color-level-00-background);
898
946
  --components-calendar-background: var(--color-level-00-background);
947
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
948
+ --components-calendar-weeks-text: var(--color-content-high-text);
949
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
950
+ --components-calendar-weeks-background: var(--color-level-10-background);
899
951
  --components-calendar-cell-text-today: var(--color-content-high-text);
900
952
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
901
953
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -904,10 +956,6 @@
904
956
  --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
905
957
  --components-calendar-cell-dot: var(--color-content-high-icon);
906
958
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
907
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
908
- --components-calendar-weeks-text: var(--color-content-high-text);
909
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
910
- --components-calendar-weeks-background: var(--color-level-10-background);
911
959
  --components-calendar-header-text: var(--color-content-high-text);
912
960
  --components-calendar-border: var(--color-content-low-border);
913
961
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -1128,8 +1176,6 @@
1128
1176
  --letter-spacing-heading-md: -0.5000px;
1129
1177
  --letter-spacing-heading-sm: -0.2500px;
1130
1178
  --letter-spacing-heading-xs: 0.0000px;
1131
- --spacing-09: 36.0000px;
1132
- --spacing-07: 28.0000px;
1133
1179
  --spacing-3-5: 14.0000px;
1134
1180
  --spacing-2-5: 10.0000px;
1135
1181
  --spacing-1-5: 6.0000px;
@@ -1402,22 +1448,6 @@
1402
1448
  */
1403
1449
 
1404
1450
  :root {
1405
- --togglegroup-md-iconbutton-padding-y: 7.0000px;
1406
- --togglegroup-md-button-radius: 3.0000px;
1407
- --togglegroup-md-button-padding-y: 5.0000px;
1408
- --togglegroup-md-padding: 3.0000px;
1409
- --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1410
- --togglegroup-lg-button-radius: 5.0000px;
1411
- --togglegroup-lg-button-padding-y: 7.0000px;
1412
- --togglegroup-lg-padding: 3.0000px;
1413
- --togglegroup-sm-padding: 3.0000px;
1414
- --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1415
- --togglegroup-sm-button-radius: 2.0000px;
1416
- --togglegroup-sm-button-padding-y: 3.0000px;
1417
- --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1418
- --togglegroup-xs-button-radius: 1.0000px;
1419
- --togglegroup-xs-button-padding-y: 1.0000px;
1420
- --togglegroup-xs-padding: 3.0000px;
1421
1451
  --slider-tick-radius: 1.0000px;
1422
1452
  --global-typography-legend-font-style: uppercase;
1423
1453
  --global-typography-label-font-style: normal;
@@ -1430,6 +1460,22 @@
1430
1460
  --global-typography-h2-font-style: normal;
1431
1461
  --global-typography-h1-font-style: normal;
1432
1462
  --tooltip-font-weight: 500;
1463
+ --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1464
+ --togglegroup-lg-button-radius: 5.0000px;
1465
+ --togglegroup-lg-button-padding-y: 7.0000px;
1466
+ --togglegroup-lg-padding: 3.0000px;
1467
+ --togglegroup-md-iconbutton-padding-y: 7.0000px;
1468
+ --togglegroup-md-button-radius: 3.0000px;
1469
+ --togglegroup-md-button-padding-y: 5.0000px;
1470
+ --togglegroup-md-padding: 3.0000px;
1471
+ --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1472
+ --togglegroup-sm-button-radius: 2.0000px;
1473
+ --togglegroup-sm-button-padding-y: 3.0000px;
1474
+ --togglegroup-sm-padding: 3.0000px;
1475
+ --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1476
+ --togglegroup-xs-button-radius: 1.0000px;
1477
+ --togglegroup-xs-button-padding-y: 1.0000px;
1478
+ --togglegroup-xs-padding: 3.0000px;
1433
1479
  --popover-shadow-2-x: 0.0000px;
1434
1480
  --popover-shadow-1-blur: 1.0000px;
1435
1481
  --popover-shadow-1-x: 0.0000px;
@@ -1473,6 +1519,8 @@
1473
1519
  --notification-border-width-low-emphasis: var(--spacing-px);
1474
1520
  --notification-border-width-high-emphasis: var(--spacing-2);
1475
1521
  --notification-radius: var(--radius-rounded-lg);
1522
+ --notification-padding-left: var(--spacing-6);
1523
+ --notification-padding-right: var(--spacing-6);
1476
1524
  --notification-padding: var(--spacing-4);
1477
1525
  --notification-gap-y: var(--spacing-1);
1478
1526
  --notification-gap-x-title: var(--spacing-2);
@@ -1549,24 +1597,13 @@
1549
1597
  --alert-heading-font-weight: var(--font-weight-medium-emphasis);
1550
1598
  --alert-heading-font-size: var(--font-size-sm);
1551
1599
  --alert-radius: var(--radius-rounded-lg);
1600
+ --alert-padding-right: var(--spacing-8);
1552
1601
  --alert-padding: var(--spacing-4);
1553
1602
  --alert-gap-y: var(--spacing-1);
1554
1603
  --alert-icon-position-y: var(--spacing-4);
1555
1604
  --alert-icon-position-x: var(--spacing-4);
1556
1605
  --alert-gap-x: var(--spacing-3);
1557
1606
  --alert-icon-size: var(--spacing-5);
1558
- --togglegroup-md-height: var(--spacing-10);
1559
- --togglegroup-md-gap: var(--spacing-0-5);
1560
- --togglegroup-md-radius: var(--radius-rounded-md);
1561
- --togglegroup-lg-height: var(--spacing-12);
1562
- --togglegroup-lg-gap: var(--spacing-0-5);
1563
- --togglegroup-lg-radius: var(--radius-rounded-lg);
1564
- --togglegroup-sm-height: var(--spacing-8);
1565
- --togglegroup-sm-gap: var(--spacing-0-5);
1566
- --togglegroup-sm-radius: var(--radius-rounded);
1567
- --togglegroup-xs-height: var(--spacing-6);
1568
- --togglegroup-xs-gap: var(--spacing-0-5);
1569
- --togglegroup-xs-radius: var(--radius-rounded-sm);
1570
1607
  --slider-track-radius: var(--radius-rounded-sm);
1571
1608
  --slider-track-padding-x: var(--spacing-3);
1572
1609
  --slider-track-height: var(--spacing-1);
@@ -1611,6 +1648,18 @@
1611
1648
  --tooltip-padding-y: var(--spacing-3);
1612
1649
  --tooltip-padding-x: var(--spacing-3);
1613
1650
  --tooltip-font-size: var(--font-size-sm);
1651
+ --togglegroup-lg-height: var(--spacing-12);
1652
+ --togglegroup-lg-gap: var(--spacing-0-5);
1653
+ --togglegroup-lg-radius: var(--radius-rounded-lg);
1654
+ --togglegroup-md-height: var(--spacing-10);
1655
+ --togglegroup-md-gap: var(--spacing-0-5);
1656
+ --togglegroup-md-radius: var(--radius-rounded-md);
1657
+ --togglegroup-sm-height: var(--spacing-8);
1658
+ --togglegroup-sm-gap: var(--spacing-0-5);
1659
+ --togglegroup-sm-radius: var(--radius-rounded);
1660
+ --togglegroup-xs-height: var(--spacing-6);
1661
+ --togglegroup-xs-gap: var(--spacing-0-5);
1662
+ --togglegroup-xs-radius: var(--radius-rounded-sm);
1614
1663
  --popover-radius: var(--radius-rounded-md);
1615
1664
  --popover-padding-y: var(--spacing-2);
1616
1665
  --popover-padding-x: var(--spacing-2);
@@ -1710,11 +1759,11 @@
1710
1759
  --list-native-line-height: var(--line-height-base);
1711
1760
  --list-native-font-size: var(--font-size-md);
1712
1761
  --list-native-icon-size: var(--spacing-5);
1713
- --icon-xl: var(--spacing-7);
1714
- --icon-lg: var(--spacing-6);
1715
- --icon-md: var(--spacing-5);
1716
- --icon-sm: var(--spacing-4);
1717
- --icon-xs: var(--spacing-3);
1762
+ --icon-size-xl: var(--spacing-7);
1763
+ --icon-size-lg: var(--spacing-6);
1764
+ --icon-size-md: var(--spacing-5);
1765
+ --icon-size-sm: var(--spacing-4);
1766
+ --icon-size-xs: var(--spacing-3);
1718
1767
  --calendar-navigation-buttons-gap: var(--spacing-1);
1719
1768
  --calendar-controls-padding-top: var(--spacing-2);
1720
1769
  --calendar-controls-margin-top: var(--spacing-1);
@@ -6790,6 +6790,22 @@ h6 {
6790
6790
  border-color: var(--color-feedback-error-high-border);
6791
6791
  }
6792
6792
 
6793
+ .bg-feedback-error-high-contrast {
6794
+ background-color: var(--color-feedback-error-high-contrast-background);
6795
+ }
6796
+
6797
+ .border-feedback-error-high-contrast {
6798
+ border-color: var(--color-feedback-error-high-contrast-border);
6799
+ }
6800
+
6801
+ .icon-feedback-error-high-contrast {
6802
+ color: var(--color-feedback-error-high-contrast-icon);
6803
+ }
6804
+
6805
+ .text-feedback-error-high-contrast {
6806
+ color: var(--color-feedback-error-high-contrast-text);
6807
+ }
6808
+
6793
6809
  .icon-feedback-error-high {
6794
6810
  color: var(--color-feedback-error-high-icon);
6795
6811
  }
@@ -6822,6 +6838,22 @@ h6 {
6822
6838
  border-color: var(--color-feedback-information-high-border);
6823
6839
  }
6824
6840
 
6841
+ .bg-feedback-information-high-contrast {
6842
+ background-color: var(--color-feedback-information-high-contrast-background);
6843
+ }
6844
+
6845
+ .border-feedback-information-high-contrast {
6846
+ border-color: var(--color-feedback-information-high-contrast-border);
6847
+ }
6848
+
6849
+ .icon-feedback-information-high-contrast {
6850
+ color: var(--color-feedback-information-high-contrast-icon);
6851
+ }
6852
+
6853
+ .text-feedback-information-high-contrast {
6854
+ color: var(--color-feedback-information-high-contrast-text);
6855
+ }
6856
+
6825
6857
  .icon-feedback-information-high {
6826
6858
  color: var(--color-feedback-information-high-icon);
6827
6859
  }
@@ -6854,6 +6886,22 @@ h6 {
6854
6886
  border-color: var(--color-feedback-neutral-high-border);
6855
6887
  }
6856
6888
 
6889
+ .bg-feedback-neutral-high-contrast {
6890
+ background-color: var(--color-feedback-neutral-high-contrast-background);
6891
+ }
6892
+
6893
+ .border-feedback-neutral-high-contrast {
6894
+ border-color: var(--color-feedback-neutral-high-contrast-border);
6895
+ }
6896
+
6897
+ .icon-feedback-neutral-high-contrast {
6898
+ color: var(--color-feedback-neutral-high-contrast-icon);
6899
+ }
6900
+
6901
+ .text-feedback-neutral-high-contrast {
6902
+ color: var(--color-feedback-neutral-high-contrast-text);
6903
+ }
6904
+
6857
6905
  .icon-feedback-neutral-high {
6858
6906
  color: var(--color-feedback-neutral-high-icon);
6859
6907
  }
@@ -6886,6 +6934,22 @@ h6 {
6886
6934
  border-color: var(--color-feedback-success-high-border);
6887
6935
  }
6888
6936
 
6937
+ .bg-feedback-success-high-contrast {
6938
+ background-color: var(--color-feedback-success-high-contrast-background);
6939
+ }
6940
+
6941
+ .border-feedback-success-high-contrast {
6942
+ border-color: var(--color-feedback-success-high-contrast-border);
6943
+ }
6944
+
6945
+ .icon-feedback-success-high-contrast {
6946
+ color: var(--color-feedback-success-high-contrast-icon);
6947
+ }
6948
+
6949
+ .text-feedback-success-high-contrast {
6950
+ color: var(--color-feedback-success-high-contrast-text);
6951
+ }
6952
+
6889
6953
  .icon-feedback-success-high {
6890
6954
  color: var(--color-feedback-success-high-icon);
6891
6955
  }
@@ -6918,6 +6982,22 @@ h6 {
6918
6982
  border-color: var(--color-feedback-warning-high-border);
6919
6983
  }
6920
6984
 
6985
+ .bg-feedback-warning-high-contrast {
6986
+ background-color: var(--color-feedback-warning-high-contrast-background);
6987
+ }
6988
+
6989
+ .border-feedback-warning-high-contrast {
6990
+ border-color: var(--color-feedback-warning-high-contrast-border);
6991
+ }
6992
+
6993
+ .icon-feedback-warning-high-contrast {
6994
+ color: var(--color-feedback-warning-high-contrast-icon);
6995
+ }
6996
+
6997
+ .text-feedback-warning-high-contrast {
6998
+ color: var(--color-feedback-warning-high-contrast-text);
6999
+ }
7000
+
6921
7001
  .icon-feedback-warning-high {
6922
7002
  color: var(--color-feedback-warning-high-icon);
6923
7003
  }