@nova-design-system/nova-base 3.11.0 → 3.13.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 (28) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-components.js +10 -20
  3. package/dist/cjs/generated/nova-tailwind-tokens.js +60 -0
  4. package/dist/css/mccs.css +96 -43
  5. package/dist/css/nova-utils.css +80 -10
  6. package/dist/css/ocean.css +106 -53
  7. package/dist/css/spark.css +106 -53
  8. package/dist/generated/nova-tailwind-components.d.ts +0 -10
  9. package/dist/generated/nova-tailwind-components.js +10 -20
  10. package/dist/generated/nova-tailwind-tokens.d.ts +60 -0
  11. package/dist/generated/nova-tailwind-tokens.js +60 -0
  12. package/dist/js/mccs_dark.d.ts +30 -4
  13. package/dist/js/mccs_dark.js +30 -4
  14. package/dist/js/mccs_light.d.ts +30 -4
  15. package/dist/js/mccs_light.js +30 -4
  16. package/dist/js/ocean_dark.d.ts +30 -4
  17. package/dist/js/ocean_dark.js +40 -14
  18. package/dist/js/ocean_light.d.ts +30 -4
  19. package/dist/js/ocean_light.js +30 -4
  20. package/dist/js/primitives.d.ts +0 -2
  21. package/dist/js/primitives.js +0 -2
  22. package/dist/js/spacings.d.ts +36 -33
  23. package/dist/js/spacings.js +36 -33
  24. package/dist/js/spark_dark.d.ts +30 -4
  25. package/dist/js/spark_dark.js +40 -14
  26. package/dist/js/spark_light.d.ts +30 -4
  27. package/dist/js/spark_light.js +30 -4
  28. package/package.json +1 -1
package/dist/css/ocean.css CHANGED
@@ -163,6 +163,11 @@
163
163
  --color-rainbow-1-border: var(--color-amber-500);
164
164
  --color-rainbow-1-background: var(--color-amber-900);
165
165
  --color-focus-brand: var(--color-petrol-500);
166
+ --color-feedback-success-high-contrast-title: var(--color-base-black);
167
+ --color-feedback-success-high-contrast-text: var(--color-status-green-900);
168
+ --color-feedback-success-high-contrast-icon: var(--color-base-black);
169
+ --color-feedback-success-high-contrast-border: var(--color-status-green-400);
170
+ --color-feedback-success-high-contrast-background: var(--color-status-green-400);
166
171
  --color-feedback-success-low-text: var(--color-status-green-400);
167
172
  --color-feedback-success-low-icon: var(--color-status-green-400);
168
173
  --color-feedback-success-low-border: var(--color-status-green-400);
@@ -171,6 +176,11 @@
171
176
  --color-feedback-success-high-icon: var(--color-status-green-800);
172
177
  --color-feedback-success-high-border: var(--color-status-green-300);
173
178
  --color-feedback-success-high-background: var(--color-status-green-300);
179
+ --color-feedback-warning-high-contrast-title: var(--color-base-black);
180
+ --color-feedback-warning-high-contrast-text: var(--color-status-yellow-900);
181
+ --color-feedback-warning-high-contrast-icon: var(--color-base-black);
182
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-500);
183
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-500);
174
184
  --color-feedback-warning-low-text: var(--color-status-yellow-500);
175
185
  --color-feedback-warning-low-icon: var(--color-status-yellow-500);
176
186
  --color-feedback-warning-low-border: var(--color-status-yellow-500);
@@ -179,6 +189,11 @@
179
189
  --color-feedback-warning-high-icon: var(--color-status-yellow-900);
180
190
  --color-feedback-warning-high-border: var(--color-status-yellow-500);
181
191
  --color-feedback-warning-high-background: var(--color-status-yellow-500);
192
+ --color-feedback-neutral-high-contrast-title: var(--color-base-black);
193
+ --color-feedback-neutral-high-contrast-text: var(--color-gray-ocean-900);
194
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-black);
195
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-250);
196
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-250);
182
197
  --color-feedback-neutral-low-text: var(--color-gray-ocean-250);
183
198
  --color-feedback-neutral-low-icon: var(--color-gray-ocean-250);
184
199
  --color-feedback-neutral-low-border: var(--color-gray-ocean-250);
@@ -187,6 +202,11 @@
187
202
  --color-feedback-neutral-high-icon: var(--color-gray-ocean-800);
188
203
  --color-feedback-neutral-high-border: var(--color-gray-ocean-250);
189
204
  --color-feedback-neutral-high-background: var(--color-gray-ocean-250);
205
+ --color-feedback-error-high-contrast-title: var(--color-base-black);
206
+ --color-feedback-error-high-contrast-text: var(--color-status-red-900);
207
+ --color-feedback-error-high-contrast-icon: var(--color-base-black);
208
+ --color-feedback-error-high-contrast-border: var(--color-status-red-300);
209
+ --color-feedback-error-high-contrast-background: var(--color-status-red-300);
190
210
  --color-feedback-error-low-text: var(--color-status-red-300);
191
211
  --color-feedback-error-low-icon: var(--color-status-red-300);
192
212
  --color-feedback-error-low-border: var(--color-status-red-300);
@@ -195,6 +215,11 @@
195
215
  --color-feedback-error-high-icon: var(--color-status-red-900);
196
216
  --color-feedback-error-high-border: var(--color-status-red-300);
197
217
  --color-feedback-error-high-background: var(--color-status-red-300);
218
+ --color-feedback-information-high-contrast-title: var(--color-base-black);
219
+ --color-feedback-information-high-contrast-text: var(--color-status-blue-900);
220
+ --color-feedback-information-high-contrast-icon: var(--color-base-black);
221
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
222
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
198
223
  --color-feedback-information-low-text: var(--color-status-blue-300);
199
224
  --color-feedback-information-low-icon: var(--color-status-blue-300);
200
225
  --color-feedback-information-low-border: var(--color-status-blue-300);
@@ -213,16 +238,16 @@
213
238
  --color-chart-3: var(--color-petrol-500);
214
239
  --color-chart-2: var(--color-dark-gray-500);
215
240
  --color-chart-1: var(--color-amber-500);
216
- --color-accent-900: var(--color-orange-900);
217
- --color-accent-800: var(--color-orange-800);
218
- --color-accent-700: var(--color-orange-700);
219
- --color-accent-600: var(--color-orange-600);
220
- --color-accent-500: var(--color-orange-500);
221
- --color-accent-400: var(--color-orange-400);
222
- --color-accent-300: var(--color-orange-300);
223
- --color-accent-200: var(--color-orange-200);
224
- --color-accent-100: var(--color-orange-100);
225
- --color-accent-50: var(--color-orange-50);
241
+ --color-accent-900: var(--color-orange-50);
242
+ --color-accent-800: var(--color-orange-100);
243
+ --color-accent-700: var(--color-orange-200);
244
+ --color-accent-600: var(--color-orange-300);
245
+ --color-accent-500: var(--color-orange-400);
246
+ --color-accent-400: var(--color-orange-500);
247
+ --color-accent-300: var(--color-orange-600);
248
+ --color-accent-200: var(--color-orange-700);
249
+ --color-accent-100: var(--color-orange-800);
250
+ --color-accent-50: var(--color-orange-900);
226
251
  --color-content-inverted-low-icon: var(--color-gray-ocean-450);
227
252
  --color-content-inverted-low-text: var(--color-gray-ocean-450);
228
253
  --color-content-inverted-medium-icon: var(--color-gray-ocean-650);
@@ -316,6 +341,7 @@
316
341
  --components-notification-warning-border: var(--color-feedback-warning-low-border);
317
342
  --components-notification-warning-background: var(--color-level-20-background);
318
343
  --components-notification-content-title: var(--color-content-high-text);
344
+ --components-notification-content-timestamp: var(--color-content-medium-text);
319
345
  --components-notification-content-description: var(--color-content-medium-text);
320
346
  --components-notification-information-border: var(--color-feedback-information-low-border);
321
347
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
@@ -325,6 +351,10 @@
325
351
  --components-menu-contextual-border: var(--color-content-low-border);
326
352
  --components-menu-contextual-background: var(--color-level-00-background);
327
353
  --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);
328
358
  --components-calendar-cell-text-today: var(--color-content-high-text);
329
359
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
330
360
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -335,10 +365,6 @@
335
365
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
336
366
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
337
367
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
338
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
339
- --components-calendar-weeks-text: var(--color-content-high-text);
340
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
341
- --components-calendar-weeks-background: var(--color-level-10-background);
342
368
  --components-calendar-header-text: var(--color-content-high-text);
343
369
  --components-calendar-border: var(--color-content-low-border);
344
370
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -745,6 +771,11 @@
745
771
  --color-rainbow-1-border: var(--color-amber-700);
746
772
  --color-rainbow-1-background: var(--color-amber-50);
747
773
  --color-focus-brand: var(--color-petrol-600);
774
+ --color-feedback-success-high-contrast-title: var(--color-base-white);
775
+ --color-feedback-success-high-contrast-text: var(--color-status-green-50);
776
+ --color-feedback-success-high-contrast-icon: var(--color-base-white);
777
+ --color-feedback-success-high-contrast-border: var(--color-status-green-600);
778
+ --color-feedback-success-high-contrast-background: var(--color-status-green-600);
748
779
  --color-feedback-success-low-text: var(--color-status-green-600);
749
780
  --color-feedback-success-low-icon: var(--color-status-green-600);
750
781
  --color-feedback-success-low-border: var(--color-status-green-600);
@@ -753,6 +784,11 @@
753
784
  --color-feedback-success-high-icon: var(--color-status-green-800);
754
785
  --color-feedback-success-high-border: var(--color-status-green-400);
755
786
  --color-feedback-success-high-background: var(--color-status-green-400);
787
+ --color-feedback-warning-high-contrast-title: var(--color-base-white);
788
+ --color-feedback-warning-high-contrast-text: var(--color-status-yellow-50);
789
+ --color-feedback-warning-high-contrast-icon: var(--color-base-white);
790
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-700);
791
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-700);
756
792
  --color-feedback-warning-low-text: var(--color-status-yellow-700);
757
793
  --color-feedback-warning-low-icon: var(--color-status-yellow-700);
758
794
  --color-feedback-warning-low-border: var(--color-status-yellow-700);
@@ -761,6 +797,11 @@
761
797
  --color-feedback-warning-high-icon: var(--color-status-yellow-900);
762
798
  --color-feedback-warning-high-border: var(--color-status-yellow-500);
763
799
  --color-feedback-warning-high-background: var(--color-status-yellow-500);
800
+ --color-feedback-neutral-high-contrast-title: var(--color-base-white);
801
+ --color-feedback-neutral-high-contrast-text: var(--color-gray-ocean-50);
802
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-white);
803
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-450);
804
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-450);
764
805
  --color-feedback-neutral-low-text: var(--color-gray-ocean-450);
765
806
  --color-feedback-neutral-low-icon: var(--color-gray-ocean-450);
766
807
  --color-feedback-neutral-low-border: var(--color-gray-ocean-450);
@@ -769,6 +810,11 @@
769
810
  --color-feedback-neutral-high-icon: var(--color-gray-ocean-800);
770
811
  --color-feedback-neutral-high-border: var(--color-gray-ocean-250);
771
812
  --color-feedback-neutral-high-background: var(--color-gray-ocean-250);
813
+ --color-feedback-error-high-contrast-title: var(--color-base-white);
814
+ --color-feedback-error-high-contrast-text: var(--color-status-red-50);
815
+ --color-feedback-error-high-contrast-icon: var(--color-base-white);
816
+ --color-feedback-error-high-contrast-border: var(--color-status-red-600);
817
+ --color-feedback-error-high-contrast-background: var(--color-status-red-600);
772
818
  --color-feedback-error-low-text: var(--color-status-red-600);
773
819
  --color-feedback-error-low-icon: var(--color-status-red-600);
774
820
  --color-feedback-error-low-border: var(--color-status-red-600);
@@ -777,6 +823,11 @@
777
823
  --color-feedback-error-high-icon: var(--color-status-red-900);
778
824
  --color-feedback-error-high-border: var(--color-status-red-300);
779
825
  --color-feedback-error-high-background: var(--color-status-red-300);
826
+ --color-feedback-information-high-contrast-title: var(--color-base-white);
827
+ --color-feedback-information-high-contrast-text: var(--color-status-blue-50);
828
+ --color-feedback-information-high-contrast-icon: var(--color-base-white);
829
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
830
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
780
831
  --color-feedback-information-low-text: var(--color-status-blue-500);
781
832
  --color-feedback-information-low-icon: var(--color-status-blue-500);
782
833
  --color-feedback-information-low-border: var(--color-status-blue-500);
@@ -898,6 +949,7 @@
898
949
  --components-notification-warning-border: var(--color-feedback-warning-low-border);
899
950
  --components-notification-warning-background: var(--color-level-00-background);
900
951
  --components-notification-content-title: var(--color-content-high-text);
952
+ --components-notification-content-timestamp: var(--color-content-medium-text);
901
953
  --components-notification-content-description: var(--color-content-medium-text);
902
954
  --components-notification-information-border: var(--color-feedback-information-low-border);
903
955
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
@@ -907,6 +959,10 @@
907
959
  --components-menu-contextual-border: var(--color-content-low-border);
908
960
  --components-menu-contextual-background: var(--color-level-00-background);
909
961
  --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);
910
966
  --components-calendar-cell-text-today: var(--color-content-high-text);
911
967
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
912
968
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -917,10 +973,6 @@
917
973
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
918
974
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
919
975
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
920
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
921
- --components-calendar-weeks-text: var(--color-content-high-text);
922
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
923
- --components-calendar-weeks-background: var(--color-level-10-background);
924
976
  --components-calendar-header-text: var(--color-content-high-text);
925
977
  --components-calendar-border: var(--color-content-low-border);
926
978
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -1149,8 +1201,6 @@
1149
1201
  --letter-spacing-heading-md: -0.5000px;
1150
1202
  --letter-spacing-heading-sm: -0.2500px;
1151
1203
  --letter-spacing-heading-xs: 0.0000px;
1152
- --spacing-09: 36.0000px;
1153
- --spacing-07: 28.0000px;
1154
1204
  --spacing-3-5: 14.0000px;
1155
1205
  --spacing-2-5: 10.0000px;
1156
1206
  --spacing-1-5: 6.0000px;
@@ -1423,22 +1473,6 @@
1423
1473
  */
1424
1474
 
1425
1475
  :root {
1426
- --togglegroup-md-iconbutton-padding-y: 7.0000px;
1427
- --togglegroup-md-button-radius: 3.0000px;
1428
- --togglegroup-md-button-padding-y: 5.0000px;
1429
- --togglegroup-md-padding: 3.0000px;
1430
- --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1431
- --togglegroup-lg-button-radius: 5.0000px;
1432
- --togglegroup-lg-button-padding-y: 7.0000px;
1433
- --togglegroup-lg-padding: 3.0000px;
1434
- --togglegroup-sm-padding: 3.0000px;
1435
- --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1436
- --togglegroup-sm-button-radius: 2.0000px;
1437
- --togglegroup-sm-button-padding-y: 3.0000px;
1438
- --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1439
- --togglegroup-xs-button-radius: 1.0000px;
1440
- --togglegroup-xs-button-padding-y: 1.0000px;
1441
- --togglegroup-xs-padding: 3.0000px;
1442
1476
  --slider-tick-radius: 1.0000px;
1443
1477
  --global-typography-legend-font-style: uppercase;
1444
1478
  --global-typography-label-font-style: normal;
@@ -1451,6 +1485,22 @@
1451
1485
  --global-typography-h2-font-style: normal;
1452
1486
  --global-typography-h1-font-style: normal;
1453
1487
  --tooltip-font-weight: 500;
1488
+ --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1489
+ --togglegroup-lg-button-radius: 5.0000px;
1490
+ --togglegroup-lg-button-padding-y: 7.0000px;
1491
+ --togglegroup-lg-padding: 3.0000px;
1492
+ --togglegroup-md-iconbutton-padding-y: 7.0000px;
1493
+ --togglegroup-md-button-radius: 3.0000px;
1494
+ --togglegroup-md-button-padding-y: 5.0000px;
1495
+ --togglegroup-md-padding: 3.0000px;
1496
+ --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1497
+ --togglegroup-sm-button-radius: 2.0000px;
1498
+ --togglegroup-sm-button-padding-y: 3.0000px;
1499
+ --togglegroup-sm-padding: 3.0000px;
1500
+ --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1501
+ --togglegroup-xs-button-radius: 1.0000px;
1502
+ --togglegroup-xs-button-padding-y: 1.0000px;
1503
+ --togglegroup-xs-padding: 3.0000px;
1454
1504
  --popover-shadow-2-x: 0.0000px;
1455
1505
  --popover-shadow-1-blur: 1.0000px;
1456
1506
  --popover-shadow-1-x: 0.0000px;
@@ -1494,6 +1544,8 @@
1494
1544
  --notification-border-width-low-emphasis: var(--spacing-px);
1495
1545
  --notification-border-width-high-emphasis: var(--spacing-2);
1496
1546
  --notification-radius: var(--radius-rounded-lg);
1547
+ --notification-padding-left: var(--spacing-6);
1548
+ --notification-padding-right: var(--spacing-6);
1497
1549
  --notification-padding: var(--spacing-4);
1498
1550
  --notification-gap-y: var(--spacing-1);
1499
1551
  --notification-gap-x-title: var(--spacing-2);
@@ -1570,24 +1622,13 @@
1570
1622
  --alert-heading-font-weight: var(--font-weight-medium-emphasis);
1571
1623
  --alert-heading-font-size: var(--font-size-sm);
1572
1624
  --alert-radius: var(--radius-rounded-lg);
1625
+ --alert-padding-right: var(--spacing-8);
1573
1626
  --alert-padding: var(--spacing-4);
1574
1627
  --alert-gap-y: var(--spacing-1);
1575
1628
  --alert-icon-position-y: var(--spacing-4);
1576
1629
  --alert-icon-position-x: var(--spacing-4);
1577
1630
  --alert-gap-x: var(--spacing-3);
1578
1631
  --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);
1591
1632
  --slider-track-radius: var(--radius-rounded-sm);
1592
1633
  --slider-track-padding-x: var(--spacing-3);
1593
1634
  --slider-track-height: var(--spacing-1);
@@ -1632,6 +1673,18 @@
1632
1673
  --tooltip-padding-y: var(--spacing-3);
1633
1674
  --tooltip-padding-x: var(--spacing-3);
1634
1675
  --tooltip-font-size: var(--font-size-sm);
1676
+ --togglegroup-lg-height: var(--spacing-12);
1677
+ --togglegroup-lg-gap: var(--spacing-0-5);
1678
+ --togglegroup-lg-radius: var(--radius-rounded-lg);
1679
+ --togglegroup-md-height: var(--spacing-10);
1680
+ --togglegroup-md-gap: var(--spacing-0-5);
1681
+ --togglegroup-md-radius: var(--radius-rounded-md);
1682
+ --togglegroup-sm-height: var(--spacing-8);
1683
+ --togglegroup-sm-gap: var(--spacing-0-5);
1684
+ --togglegroup-sm-radius: var(--radius-rounded);
1685
+ --togglegroup-xs-height: var(--spacing-6);
1686
+ --togglegroup-xs-gap: var(--spacing-0-5);
1687
+ --togglegroup-xs-radius: var(--radius-rounded-sm);
1635
1688
  --popover-radius: var(--radius-rounded-md);
1636
1689
  --popover-padding-y: var(--spacing-2);
1637
1690
  --popover-padding-x: var(--spacing-2);
@@ -1731,11 +1784,11 @@
1731
1784
  --list-native-line-height: var(--line-height-base);
1732
1785
  --list-native-font-size: var(--font-size-md);
1733
1786
  --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);
1787
+ --icon-size-xl: var(--spacing-7);
1788
+ --icon-size-lg: var(--spacing-6);
1789
+ --icon-size-md: var(--spacing-5);
1790
+ --icon-size-sm: var(--spacing-4);
1791
+ --icon-size-xs: var(--spacing-3);
1739
1792
  --calendar-navigation-buttons-gap: var(--spacing-1);
1740
1793
  --calendar-controls-padding-top: var(--spacing-2);
1741
1794
  --calendar-controls-margin-top: var(--spacing-1);
package/dist/css/spark.css CHANGED
@@ -163,6 +163,11 @@
163
163
  --color-rainbow-1-border: var(--color-amber-500);
164
164
  --color-rainbow-1-background: var(--color-amber-900);
165
165
  --color-focus-brand: var(--color-orange-500);
166
+ --color-feedback-success-high-contrast-title: var(--color-base-black);
167
+ --color-feedback-success-high-contrast-text: var(--color-status-green-900);
168
+ --color-feedback-success-high-contrast-icon: var(--color-base-black);
169
+ --color-feedback-success-high-contrast-border: var(--color-status-green-400);
170
+ --color-feedback-success-high-contrast-background: var(--color-status-green-400);
166
171
  --color-feedback-success-low-text: var(--color-status-green-400);
167
172
  --color-feedback-success-low-icon: var(--color-status-green-400);
168
173
  --color-feedback-success-low-border: var(--color-status-green-400);
@@ -171,6 +176,11 @@
171
176
  --color-feedback-success-high-icon: var(--color-status-green-800);
172
177
  --color-feedback-success-high-border: var(--color-status-green-300);
173
178
  --color-feedback-success-high-background: var(--color-status-green-300);
179
+ --color-feedback-warning-high-contrast-title: var(--color-base-black);
180
+ --color-feedback-warning-high-contrast-text: var(--color-status-yellow-900);
181
+ --color-feedback-warning-high-contrast-icon: var(--color-base-black);
182
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-500);
183
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-500);
174
184
  --color-feedback-warning-low-text: var(--color-status-yellow-500);
175
185
  --color-feedback-warning-low-icon: var(--color-status-yellow-500);
176
186
  --color-feedback-warning-low-border: var(--color-status-yellow-500);
@@ -179,6 +189,11 @@
179
189
  --color-feedback-warning-high-icon: var(--color-status-yellow-900);
180
190
  --color-feedback-warning-high-border: var(--color-status-yellow-500);
181
191
  --color-feedback-warning-high-background: var(--color-status-yellow-500);
192
+ --color-feedback-neutral-high-contrast-title: var(--color-base-black);
193
+ --color-feedback-neutral-high-contrast-text: var(--color-gray-spark-900);
194
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-black);
195
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-spark-250);
196
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-spark-250);
182
197
  --color-feedback-neutral-low-text: var(--color-gray-spark-250);
183
198
  --color-feedback-neutral-low-icon: var(--color-gray-spark-250);
184
199
  --color-feedback-neutral-low-border: var(--color-gray-spark-250);
@@ -187,6 +202,11 @@
187
202
  --color-feedback-neutral-high-icon: var(--color-gray-spark-800);
188
203
  --color-feedback-neutral-high-border: var(--color-gray-spark-250);
189
204
  --color-feedback-neutral-high-background: var(--color-gray-spark-250);
205
+ --color-feedback-error-high-contrast-title: var(--color-base-black);
206
+ --color-feedback-error-high-contrast-text: var(--color-status-red-900);
207
+ --color-feedback-error-high-contrast-icon: var(--color-base-black);
208
+ --color-feedback-error-high-contrast-border: var(--color-status-red-300);
209
+ --color-feedback-error-high-contrast-background: var(--color-status-red-300);
190
210
  --color-feedback-error-low-text: var(--color-status-red-300);
191
211
  --color-feedback-error-low-icon: var(--color-status-red-300);
192
212
  --color-feedback-error-low-border: var(--color-status-red-300);
@@ -195,6 +215,11 @@
195
215
  --color-feedback-error-high-icon: var(--color-status-red-900);
196
216
  --color-feedback-error-high-border: var(--color-status-red-300);
197
217
  --color-feedback-error-high-background: var(--color-status-red-300);
218
+ --color-feedback-information-high-contrast-title: var(--color-base-black);
219
+ --color-feedback-information-high-contrast-text: var(--color-status-blue-900);
220
+ --color-feedback-information-high-contrast-icon: var(--color-base-black);
221
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
222
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
198
223
  --color-feedback-information-low-text: var(--color-status-blue-300);
199
224
  --color-feedback-information-low-icon: var(--color-status-blue-300);
200
225
  --color-feedback-information-low-border: var(--color-status-blue-300);
@@ -213,16 +238,16 @@
213
238
  --color-chart-3: var(--color-petrol-500);
214
239
  --color-chart-2: var(--color-dark-gray-500);
215
240
  --color-chart-1: var(--color-amber-500);
216
- --color-accent-900: var(--color-petrol-900);
217
- --color-accent-800: var(--color-petrol-800);
218
- --color-accent-700: var(--color-petrol-700);
219
- --color-accent-600: var(--color-petrol-600);
220
- --color-accent-500: var(--color-petrol-500);
221
- --color-accent-400: var(--color-petrol-400);
222
- --color-accent-300: var(--color-petrol-300);
223
- --color-accent-200: var(--color-petrol-200);
224
- --color-accent-100: var(--color-petrol-100);
225
- --color-accent-50: var(--color-petrol-50);
241
+ --color-accent-900: var(--color-petrol-50);
242
+ --color-accent-800: var(--color-petrol-100);
243
+ --color-accent-700: var(--color-petrol-200);
244
+ --color-accent-600: var(--color-petrol-300);
245
+ --color-accent-500: var(--color-petrol-400);
246
+ --color-accent-400: var(--color-petrol-500);
247
+ --color-accent-300: var(--color-petrol-600);
248
+ --color-accent-200: var(--color-petrol-700);
249
+ --color-accent-100: var(--color-petrol-800);
250
+ --color-accent-50: var(--color-petrol-900);
226
251
  --color-content-inverted-low-icon: var(--color-gray-spark-400);
227
252
  --color-content-inverted-low-text: var(--color-gray-spark-400);
228
253
  --color-content-inverted-medium-icon: var(--color-gray-spark-550);
@@ -316,6 +341,7 @@
316
341
  --components-notification-warning-border: var(--color-feedback-warning-low-border);
317
342
  --components-notification-warning-background: var(--color-level-20-background);
318
343
  --components-notification-content-title: var(--color-content-high-text);
344
+ --components-notification-content-timestamp: var(--color-content-medium-text);
319
345
  --components-notification-content-description: var(--color-content-medium-text);
320
346
  --components-notification-information-border: var(--color-feedback-information-low-border);
321
347
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
@@ -325,6 +351,10 @@
325
351
  --components-menu-contextual-border: var(--color-content-low-border);
326
352
  --components-menu-contextual-background: var(--color-level-00-background);
327
353
  --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);
328
358
  --components-calendar-cell-text-today: var(--color-content-high-text);
329
359
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
330
360
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -335,10 +365,6 @@
335
365
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
336
366
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
337
367
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
338
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
339
- --components-calendar-weeks-text: var(--color-content-high-text);
340
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
341
- --components-calendar-weeks-background: var(--color-level-10-background);
342
368
  --components-calendar-header-text: var(--color-content-high-text);
343
369
  --components-calendar-border: var(--color-content-low-border);
344
370
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -743,6 +769,11 @@
743
769
  --color-rainbow-1-border: var(--color-amber-700);
744
770
  --color-rainbow-1-background: var(--color-amber-50);
745
771
  --color-focus-brand: var(--color-orange-500);
772
+ --color-feedback-success-high-contrast-title: var(--color-base-white);
773
+ --color-feedback-success-high-contrast-text: var(--color-status-green-50);
774
+ --color-feedback-success-high-contrast-icon: var(--color-base-white);
775
+ --color-feedback-success-high-contrast-border: var(--color-status-green-600);
776
+ --color-feedback-success-high-contrast-background: var(--color-status-green-600);
746
777
  --color-feedback-success-low-text: var(--color-status-green-600);
747
778
  --color-feedback-success-low-icon: var(--color-status-green-600);
748
779
  --color-feedback-success-low-border: var(--color-status-green-600);
@@ -751,6 +782,11 @@
751
782
  --color-feedback-success-high-icon: var(--color-status-green-800);
752
783
  --color-feedback-success-high-border: var(--color-status-green-400);
753
784
  --color-feedback-success-high-background: var(--color-status-green-400);
785
+ --color-feedback-warning-high-contrast-title: var(--color-base-white);
786
+ --color-feedback-warning-high-contrast-text: var(--color-status-yellow-50);
787
+ --color-feedback-warning-high-contrast-icon: var(--color-base-white);
788
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-700);
789
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-700);
754
790
  --color-feedback-warning-low-text: var(--color-status-yellow-700);
755
791
  --color-feedback-warning-low-icon: var(--color-status-yellow-700);
756
792
  --color-feedback-warning-low-border: var(--color-status-yellow-700);
@@ -759,6 +795,11 @@
759
795
  --color-feedback-warning-high-icon: var(--color-status-yellow-900);
760
796
  --color-feedback-warning-high-border: var(--color-status-yellow-500);
761
797
  --color-feedback-warning-high-background: var(--color-status-yellow-500);
798
+ --color-feedback-neutral-high-contrast-title: var(--color-base-white);
799
+ --color-feedback-neutral-high-contrast-text: var(--color-gray-spark-50);
800
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-white);
801
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-spark-450);
802
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-spark-450);
762
803
  --color-feedback-neutral-low-text: var(--color-gray-spark-450);
763
804
  --color-feedback-neutral-low-icon: var(--color-gray-spark-450);
764
805
  --color-feedback-neutral-low-border: var(--color-gray-spark-450);
@@ -767,6 +808,11 @@
767
808
  --color-feedback-neutral-high-icon: var(--color-gray-spark-800);
768
809
  --color-feedback-neutral-high-border: var(--color-gray-spark-250);
769
810
  --color-feedback-neutral-high-background: var(--color-gray-spark-250);
811
+ --color-feedback-error-high-contrast-title: var(--color-base-white);
812
+ --color-feedback-error-high-contrast-text: var(--color-status-red-50);
813
+ --color-feedback-error-high-contrast-icon: var(--color-base-white);
814
+ --color-feedback-error-high-contrast-border: var(--color-status-red-600);
815
+ --color-feedback-error-high-contrast-background: var(--color-status-red-600);
770
816
  --color-feedback-error-low-text: var(--color-status-red-600);
771
817
  --color-feedback-error-low-icon: var(--color-status-red-600);
772
818
  --color-feedback-error-low-border: var(--color-status-red-600);
@@ -775,6 +821,11 @@
775
821
  --color-feedback-error-high-icon: var(--color-status-red-900);
776
822
  --color-feedback-error-high-border: var(--color-status-red-300);
777
823
  --color-feedback-error-high-background: var(--color-status-red-300);
824
+ --color-feedback-information-high-contrast-title: var(--color-base-white);
825
+ --color-feedback-information-high-contrast-text: var(--color-status-blue-50);
826
+ --color-feedback-information-high-contrast-icon: var(--color-base-white);
827
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-800);
828
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-800);
778
829
  --color-feedback-information-low-text: var(--color-status-blue-500);
779
830
  --color-feedback-information-low-icon: var(--color-status-blue-500);
780
831
  --color-feedback-information-low-border: var(--color-status-blue-500);
@@ -896,6 +947,7 @@
896
947
  --components-notification-warning-border: var(--color-feedback-warning-low-border);
897
948
  --components-notification-warning-background: var(--color-level-00-background);
898
949
  --components-notification-content-title: var(--color-content-high-text);
950
+ --components-notification-content-timestamp: var(--color-content-medium-text);
899
951
  --components-notification-content-description: var(--color-content-medium-text);
900
952
  --components-notification-information-border: var(--color-feedback-information-low-border);
901
953
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
@@ -905,6 +957,10 @@
905
957
  --components-menu-contextual-border: var(--color-content-low-border);
906
958
  --components-menu-contextual-background: var(--color-level-00-background);
907
959
  --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);
908
964
  --components-calendar-cell-text-today: var(--color-content-high-text);
909
965
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
910
966
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -914,10 +970,6 @@
914
970
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
915
971
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
916
972
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
917
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
918
- --components-calendar-weeks-text: var(--color-content-high-text);
919
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
920
- --components-calendar-weeks-background: var(--color-level-10-background);
921
973
  --components-calendar-header-text: var(--color-content-high-text);
922
974
  --components-calendar-border: var(--color-content-low-border);
923
975
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -1149,8 +1201,6 @@
1149
1201
  --letter-spacing-heading-md: -0.5000px;
1150
1202
  --letter-spacing-heading-sm: -0.2500px;
1151
1203
  --letter-spacing-heading-xs: 0.0000px;
1152
- --spacing-09: 36.0000px;
1153
- --spacing-07: 28.0000px;
1154
1204
  --spacing-3-5: 14.0000px;
1155
1205
  --spacing-2-5: 10.0000px;
1156
1206
  --spacing-1-5: 6.0000px;
@@ -1423,22 +1473,6 @@
1423
1473
  */
1424
1474
 
1425
1475
  :root {
1426
- --togglegroup-md-iconbutton-padding-y: 7.0000px;
1427
- --togglegroup-md-button-radius: 3.0000px;
1428
- --togglegroup-md-button-padding-y: 5.0000px;
1429
- --togglegroup-md-padding: 3.0000px;
1430
- --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1431
- --togglegroup-lg-button-radius: 5.0000px;
1432
- --togglegroup-lg-button-padding-y: 7.0000px;
1433
- --togglegroup-lg-padding: 3.0000px;
1434
- --togglegroup-sm-padding: 3.0000px;
1435
- --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1436
- --togglegroup-sm-button-radius: 2.0000px;
1437
- --togglegroup-sm-button-padding-y: 3.0000px;
1438
- --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1439
- --togglegroup-xs-button-radius: 1.0000px;
1440
- --togglegroup-xs-button-padding-y: 1.0000px;
1441
- --togglegroup-xs-padding: 3.0000px;
1442
1476
  --slider-tick-radius: 1.0000px;
1443
1477
  --global-typography-legend-font-style: uppercase;
1444
1478
  --global-typography-label-font-style: normal;
@@ -1451,6 +1485,22 @@
1451
1485
  --global-typography-h2-font-style: normal;
1452
1486
  --global-typography-h1-font-style: normal;
1453
1487
  --tooltip-font-weight: 500;
1488
+ --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1489
+ --togglegroup-lg-button-radius: 5.0000px;
1490
+ --togglegroup-lg-button-padding-y: 7.0000px;
1491
+ --togglegroup-lg-padding: 3.0000px;
1492
+ --togglegroup-md-iconbutton-padding-y: 7.0000px;
1493
+ --togglegroup-md-button-radius: 3.0000px;
1494
+ --togglegroup-md-button-padding-y: 5.0000px;
1495
+ --togglegroup-md-padding: 3.0000px;
1496
+ --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1497
+ --togglegroup-sm-button-radius: 2.0000px;
1498
+ --togglegroup-sm-button-padding-y: 3.0000px;
1499
+ --togglegroup-sm-padding: 3.0000px;
1500
+ --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1501
+ --togglegroup-xs-button-radius: 1.0000px;
1502
+ --togglegroup-xs-button-padding-y: 1.0000px;
1503
+ --togglegroup-xs-padding: 3.0000px;
1454
1504
  --popover-shadow-2-x: 0.0000px;
1455
1505
  --popover-shadow-1-blur: 1.0000px;
1456
1506
  --popover-shadow-1-x: 0.0000px;
@@ -1494,6 +1544,8 @@
1494
1544
  --notification-border-width-low-emphasis: var(--spacing-px);
1495
1545
  --notification-border-width-high-emphasis: var(--spacing-2);
1496
1546
  --notification-radius: var(--radius-rounded-lg);
1547
+ --notification-padding-left: var(--spacing-6);
1548
+ --notification-padding-right: var(--spacing-6);
1497
1549
  --notification-padding: var(--spacing-4);
1498
1550
  --notification-gap-y: var(--spacing-1);
1499
1551
  --notification-gap-x-title: var(--spacing-2);
@@ -1570,24 +1622,13 @@
1570
1622
  --alert-heading-font-weight: var(--font-weight-medium-emphasis);
1571
1623
  --alert-heading-font-size: var(--font-size-sm);
1572
1624
  --alert-radius: var(--radius-rounded-lg);
1625
+ --alert-padding-right: var(--spacing-8);
1573
1626
  --alert-padding: var(--spacing-4);
1574
1627
  --alert-gap-y: var(--spacing-1);
1575
1628
  --alert-icon-position-y: var(--spacing-4);
1576
1629
  --alert-icon-position-x: var(--spacing-4);
1577
1630
  --alert-gap-x: var(--spacing-3);
1578
1631
  --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);
1591
1632
  --slider-track-radius: var(--radius-rounded-sm);
1592
1633
  --slider-track-padding-x: var(--spacing-3);
1593
1634
  --slider-track-height: var(--spacing-1);
@@ -1632,6 +1673,18 @@
1632
1673
  --tooltip-padding-y: var(--spacing-3);
1633
1674
  --tooltip-padding-x: var(--spacing-3);
1634
1675
  --tooltip-font-size: var(--font-size-sm);
1676
+ --togglegroup-lg-height: var(--spacing-12);
1677
+ --togglegroup-lg-gap: var(--spacing-0-5);
1678
+ --togglegroup-lg-radius: var(--radius-rounded-lg);
1679
+ --togglegroup-md-height: var(--spacing-10);
1680
+ --togglegroup-md-gap: var(--spacing-0-5);
1681
+ --togglegroup-md-radius: var(--radius-rounded-md);
1682
+ --togglegroup-sm-height: var(--spacing-8);
1683
+ --togglegroup-sm-gap: var(--spacing-0-5);
1684
+ --togglegroup-sm-radius: var(--radius-rounded);
1685
+ --togglegroup-xs-height: var(--spacing-6);
1686
+ --togglegroup-xs-gap: var(--spacing-0-5);
1687
+ --togglegroup-xs-radius: var(--radius-rounded-sm);
1635
1688
  --popover-radius: var(--radius-rounded-md);
1636
1689
  --popover-padding-y: var(--spacing-2);
1637
1690
  --popover-padding-x: var(--spacing-2);
@@ -1731,11 +1784,11 @@
1731
1784
  --list-native-line-height: var(--line-height-base);
1732
1785
  --list-native-font-size: var(--font-size-md);
1733
1786
  --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);
1787
+ --icon-size-xl: var(--spacing-7);
1788
+ --icon-size-lg: var(--spacing-6);
1789
+ --icon-size-md: var(--spacing-5);
1790
+ --icon-size-sm: var(--spacing-4);
1791
+ --icon-size-xs: var(--spacing-3);
1739
1792
  --calendar-navigation-buttons-gap: var(--spacing-1);
1740
1793
  --calendar-controls-padding-top: var(--spacing-2);
1741
1794
  --calendar-controls-margin-top: var(--spacing-1);