@nova-design-system/nova-base 3.0.0 → 3.1.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 (26) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-tokens.js +36 -0
  3. package/dist/cjs/plugin/nova-plugin.js +0 -2
  4. package/dist/css/mccs.css +53 -27
  5. package/dist/css/nova-utils.css +8361 -8313
  6. package/dist/css/ocean.css +118 -92
  7. package/dist/css/spark.css +119 -93
  8. package/dist/generated/nova-tailwind-tokens.d.ts +36 -0
  9. package/dist/generated/nova-tailwind-tokens.js +36 -0
  10. package/dist/js/mccs_dark.d.ts +22 -10
  11. package/dist/js/mccs_dark.js +27 -15
  12. package/dist/js/mccs_light.d.ts +22 -10
  13. package/dist/js/mccs_light.js +29 -17
  14. package/dist/js/ocean_dark.d.ts +22 -10
  15. package/dist/js/ocean_dark.js +89 -77
  16. package/dist/js/ocean_light.d.ts +22 -10
  17. package/dist/js/ocean_light.js +94 -82
  18. package/dist/js/primitives.js +3 -3
  19. package/dist/js/spacings.d.ts +2 -0
  20. package/dist/js/spacings.js +2 -0
  21. package/dist/js/spark_dark.d.ts +22 -10
  22. package/dist/js/spark_dark.js +89 -77
  23. package/dist/js/spark_light.d.ts +22 -10
  24. package/dist/js/spark_light.js +96 -84
  25. package/dist/plugin/nova-plugin.js +0 -2
  26. package/package.json +1 -1
package/dist/cjs/generated/nova-tailwind-tokens.js CHANGED
@@ -301,36 +301,72 @@ exports.NOVA_TAILWIND_TOKENS = {
301
301
  '.icon-interaction-link-high-hover': {
302
302
  'color': 'var(--color-interaction-link-high-icon-hover)'
303
303
  },
304
+ '.icon-interaction-link-high-inactive': {
305
+ 'color': 'var(--color-interaction-link-high-icon-inactive)'
306
+ },
307
+ '.icon-interaction-link-high-visited': {
308
+ 'color': 'var(--color-interaction-link-high-icon-visited)'
309
+ },
304
310
  '.text-interaction-link-high': {
305
311
  'color': 'var(--color-interaction-link-high-text)'
306
312
  },
307
313
  '.text-interaction-link-high-hover': {
308
314
  'color': 'var(--color-interaction-link-high-text-hover)'
309
315
  },
316
+ '.text-interaction-link-high-inactive': {
317
+ 'color': 'var(--color-interaction-link-high-text-inactive)'
318
+ },
319
+ '.text-interaction-link-high-visited': {
320
+ 'color': 'var(--color-interaction-link-high-text-visited)'
321
+ },
310
322
  '.icon-interaction-link-inverted': {
311
323
  'color': 'var(--color-interaction-link-inverted-icon)'
312
324
  },
313
325
  '.icon-interaction-link-inverted-hover': {
314
326
  'color': 'var(--color-interaction-link-inverted-icon-hover)'
315
327
  },
328
+ '.icon-interaction-link-inverted-inactive': {
329
+ 'color': 'var(--color-interaction-link-inverted-icon-inactive)'
330
+ },
331
+ '.icon-interaction-link-inverted-visited': {
332
+ 'color': 'var(--color-interaction-link-inverted-icon-visited)'
333
+ },
316
334
  '.text-interaction-link-inverted': {
317
335
  'color': 'var(--color-interaction-link-inverted-text)'
318
336
  },
319
337
  '.text-interaction-link-inverted-hover': {
320
338
  'color': 'var(--color-interaction-link-inverted-text-hover)'
321
339
  },
340
+ '.text-interaction-link-inverted-inactive': {
341
+ 'color': 'var(--color-interaction-link-inverted-text-inactive)'
342
+ },
343
+ '.text-interaction-link-inverted-visited': {
344
+ 'color': 'var(--color-interaction-link-inverted-text-visited)'
345
+ },
322
346
  '.icon-interaction-link-low': {
323
347
  'color': 'var(--color-interaction-link-low-icon)'
324
348
  },
325
349
  '.icon-interaction-link-low-hover': {
326
350
  'color': 'var(--color-interaction-link-low-icon-hover)'
327
351
  },
352
+ '.icon-interaction-link-low-inactive': {
353
+ 'color': 'var(--color-interaction-link-low-icon-inactive)'
354
+ },
355
+ '.icon-interaction-link-low-visited': {
356
+ 'color': 'var(--color-interaction-link-low-icon-visited)'
357
+ },
328
358
  '.text-interaction-link-low': {
329
359
  'color': 'var(--color-interaction-link-low-text)'
330
360
  },
331
361
  '.text-interaction-link-low-hover': {
332
362
  'color': 'var(--color-interaction-link-low-text-hover)'
333
363
  },
364
+ '.text-interaction-link-low-inactive': {
365
+ 'color': 'var(--color-interaction-link-low-text-inactive)'
366
+ },
367
+ '.text-interaction-link-low-visited': {
368
+ 'color': 'var(--color-interaction-link-low-text-visited)'
369
+ },
334
370
  '.bg-level-00': {
335
371
  'background-color': 'var(--color-level-00-background)'
336
372
  },
package/dist/cjs/plugin/nova-plugin.js CHANGED
@@ -101,7 +101,5 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
101
101
  }, '.w-unset': {
102
102
  width: 'unset',
103
103
  } }));
104
- }, {
105
- important: true,
106
104
  });
107
105
  exports.default = exports.novaTailwindPlugin;
package/dist/css/mccs.css CHANGED
@@ -270,14 +270,20 @@
270
270
  --color-level-20-background: var(--color-gray-ocean-700);
271
271
  --color-level-15-background: var(--color-gray-ocean-750);
272
272
  --color-level-10-background: var(--color-gray-ocean-800);
273
- --color-interaction-link-inverted-icon-hover: var(--color-petrol-400);
273
+ --color-interaction-link-inverted-text-visited: var(--color-petrol-400);
274
274
  --color-interaction-link-inverted-text-hover: var(--color-petrol-400);
275
- --color-interaction-link-low-icon-hover: var(--color-petrol-400);
275
+ --color-interaction-link-inverted-icon-visited: var(--color-petrol-600);
276
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-400);
277
+ --color-interaction-link-low-text-visited: var(--color-petrol-600);
276
278
  --color-interaction-link-low-text-hover: var(--color-petrol-400);
277
- --color-interaction-link-high-icon-hover: var(--color-petrol-300);
278
- --color-interaction-link-high-icon: var(--color-petrol-400);
279
+ --color-interaction-link-low-icon-visited: var(--color-petrol-600);
280
+ --color-interaction-link-low-icon-hover: var(--color-petrol-400);
281
+ --color-interaction-link-high-text-visited: var(--color-petrol-600);
279
282
  --color-interaction-link-high-text-hover: var(--color-petrol-300);
280
283
  --color-interaction-link-high-text: var(--color-petrol-400);
284
+ --color-interaction-link-high-icon-visited: var(--color-petrol-600);
285
+ --color-interaction-link-high-icon-hover: var(--color-petrol-300);
286
+ --color-interaction-link-high-icon: var(--color-petrol-400);
281
287
  --color-interaction-container-neutral-text-active: var(--color-petrol-300);
282
288
  --color-interaction-container-neutral-icon-active: var(--color-petrol-300);
283
289
  --color-interaction-container-neutral-border-active: var(--color-petrol-300);
@@ -329,7 +335,11 @@
329
335
  --components-menu-contextual-border: var(--color-content-low-border);
330
336
  --components-menu-contextual-background: var(--color-level-00-background);
331
337
  --components-calendar-background: var(--color-level-00-background);
332
- --components-calendar-cell-text-today: var(--color-interaction-container-neutral-text-active);
338
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
339
+ --components-calendar-weeks-text: var(--color-level-inverted-15-background);
340
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
341
+ --components-calendar-weeks-background: var(--color-level-10-background);
342
+ --components-calendar-cell-text-today: var(--color-content-high-text);
333
343
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
334
344
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
335
345
  --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
@@ -337,10 +347,6 @@
337
347
  --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
338
348
  --components-calendar-cell-dot: var(--color-content-high-icon);
339
349
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
340
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
341
- --components-calendar-weeks-text: var(--color-level-inverted-15-background);
342
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
343
- --components-calendar-weeks-background: var(--color-level-10-background);
344
350
  --components-calendar-header-text: var(--color-content-high-text);
345
351
  --components-calendar-border: var(--color-content-low-border);
346
352
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -491,10 +497,16 @@
491
497
  --color-focus-destructive: var(--color-feedback-error-high-border);
492
498
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
493
499
  --color-focus-background: var(--color-level-00-background);
494
- --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
500
+ --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
495
501
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
496
- --color-interaction-link-low-icon: var(--color-content-high-text);
502
+ --color-interaction-link-inverted-icon-inactive: var(--color-content-inverted-low-icon);
503
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
504
+ --color-interaction-link-low-text-inactive: var(--color-content-low-text);
497
505
  --color-interaction-link-low-text: var(--color-content-high-text);
506
+ --color-interaction-link-low-icon-inactive: var(--color-content-low-icon);
507
+ --color-interaction-link-low-icon: var(--color-content-high-text);
508
+ --color-interaction-link-high-text-inactive: var(--color-content-low-text);
509
+ --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
498
510
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
499
511
  --color-interaction-container-neutral-text: var(--color-content-low-text);
500
512
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -676,7 +688,7 @@
676
688
  --color-rainbow-5-text: var(--color-turquoise-800);
677
689
  --color-rainbow-5-icon: var(--color-turquoise-800);
678
690
  --color-rainbow-5-border: var(--color-turquoise-800);
679
- --color-rainbow-5-background: var(--color-turquoise-100);
691
+ --color-rainbow-5-background: var(--color-turquoise-50);
680
692
  --color-rainbow-4-text: var(--color-red-500);
681
693
  --color-rainbow-4-icon: var(--color-red-500);
682
694
  --color-rainbow-4-border: var(--color-red-500);
@@ -713,7 +725,7 @@
713
725
  --color-feedback-neutral-low-text: var(--color-gray-ocean-400);
714
726
  --color-feedback-neutral-low-icon: var(--color-gray-ocean-400);
715
727
  --color-feedback-neutral-low-border: var(--color-gray-ocean-400);
716
- --color-feedback-neutral-low-background: var(--color-gray-ocean-75);
728
+ --color-feedback-neutral-low-background: var(--color-gray-ocean-50);
717
729
  --color-feedback-neutral-high-text: var(--color-base-white);
718
730
  --color-feedback-neutral-high-icon: var(--color-base-white);
719
731
  --color-feedback-neutral-high-border: var(--color-gray-ocean-400);
@@ -784,14 +796,20 @@
784
796
  --color-level-20-background: var(--color-gray-ocean-00);
785
797
  --color-level-15-background: var(--color-gray-ocean-75);
786
798
  --color-level-10-background: var(--color-gray-ocean-50);
787
- --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
799
+ --color-interaction-link-inverted-text-visited: var(--color-petrol-600);
788
800
  --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
789
- --color-interaction-link-low-icon-hover: var(--color-petrol-600);
801
+ --color-interaction-link-inverted-icon-visited: var(--color-petrol-400);
802
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
803
+ --color-interaction-link-low-text-visited: var(--color-petrol-400);
790
804
  --color-interaction-link-low-text-hover: var(--color-petrol-600);
791
- --color-interaction-link-high-icon-hover: var(--color-petrol-700);
792
- --color-interaction-link-high-icon: var(--color-petrol-600);
805
+ --color-interaction-link-low-icon-visited: var(--color-petrol-400);
806
+ --color-interaction-link-low-icon-hover: var(--color-petrol-600);
807
+ --color-interaction-link-high-text-visited: var(--color-petrol-800);
793
808
  --color-interaction-link-high-text-hover: var(--color-petrol-700);
794
809
  --color-interaction-link-high-text: var(--color-petrol-600);
810
+ --color-interaction-link-high-icon-visited: var(--color-petrol-800);
811
+ --color-interaction-link-high-icon-hover: var(--color-petrol-700);
812
+ --color-interaction-link-high-icon: var(--color-petrol-600);
795
813
  --color-interaction-container-neutral-text-active: var(--color-petrol-700);
796
814
  --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
797
815
  --color-interaction-container-neutral-border-active: var(--color-petrol-700);
@@ -843,7 +861,11 @@
843
861
  --components-menu-contextual-border: var(--color-content-low-border);
844
862
  --components-menu-contextual-background: var(--color-level-00-background);
845
863
  --components-calendar-background: var(--color-level-00-background);
846
- --components-calendar-cell-text-today: var(--color-interaction-container-neutral-text-active);
864
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
865
+ --components-calendar-weeks-text: var(--color-content-high-text);
866
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
867
+ --components-calendar-weeks-background: var(--color-level-10-background);
868
+ --components-calendar-cell-text-today: var(--color-content-high-text);
847
869
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
848
870
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
849
871
  --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
@@ -851,10 +873,6 @@
851
873
  --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
852
874
  --components-calendar-cell-dot: var(--color-content-high-icon);
853
875
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
854
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
855
- --components-calendar-weeks-text: var(--color-content-high-text);
856
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
857
- --components-calendar-weeks-background: var(--color-level-10-background);
858
876
  --components-calendar-header-text: var(--color-content-high-text);
859
877
  --components-calendar-border: var(--color-content-low-border);
860
878
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -1004,10 +1022,16 @@
1004
1022
  --color-focus-destructive: var(--color-feedback-error-high-border);
1005
1023
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
1006
1024
  --color-focus-background: var(--color-level-00-background);
1007
- --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
1025
+ --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1008
1026
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1009
- --color-interaction-link-low-icon: var(--color-content-high-text);
1027
+ --color-interaction-link-inverted-icon-inactive: var(--color-content-inverted-low-icon);
1028
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
1029
+ --color-interaction-link-low-text-inactive: var(--color-content-low-text);
1010
1030
  --color-interaction-link-low-text: var(--color-content-high-text);
1031
+ --color-interaction-link-low-icon-inactive: var(--color-content-low-icon);
1032
+ --color-interaction-link-low-icon: var(--color-content-high-text);
1033
+ --color-interaction-link-high-text-inactive: var(--color-content-low-text);
1034
+ --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1011
1035
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1012
1036
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1013
1037
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -1133,7 +1157,7 @@
1133
1157
  --color-yellow-200: #ffe286;
1134
1158
  --color-yellow-100: #ffecb3;
1135
1159
  --color-yellow-50: #fff7df;
1136
- --color-turquoise-900: #203330;
1160
+ --color-turquoise-900: #1c2b28;
1137
1161
  --color-turquoise-800: #32504c;
1138
1162
  --color-turquoise-700: #456e68;
1139
1163
  --color-turquoise-600: #578b84;
@@ -1288,8 +1312,8 @@
1288
1312
  --color-crimson-300: #bd597c;
1289
1313
  --color-crimson-200: #cf869f;
1290
1314
  --color-crimson-100: #e0b3c2;
1291
- --color-crimson-50: #f2dfe6;
1292
- --color-amber-900: #482608;
1315
+ --color-crimson-50: #f7e9ee;
1316
+ --color-amber-900: #432306;
1293
1317
  --color-amber-800: #723d0c;
1294
1318
  --color-amber-700: #9c5311;
1295
1319
  --color-amber-600: #c66a15;
@@ -1394,7 +1418,9 @@
1394
1418
  --breadcrumb-padding-y: var(--spacing-1);
1395
1419
  --badge-radius: var(--radius-rounded-full);
1396
1420
  --badge-padding-y: var(--spacing-1);
1421
+ --badge-padding-icon-only-x: var(--spacing-1);
1397
1422
  --badge-padding-x: var(--spacing-2);
1423
+ --badge-gap-icon-only-x: var(--spacing-0);
1398
1424
  --badge-gap-x: var(--spacing-1);
1399
1425
  --avatar-xl-size: var(--spacing-16);
1400
1426
  --avatar-xl-icon-size: var(--spacing-11);