@nova-design-system/nova-base 3.5.0 → 3.7.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 (19) hide show
  1. package/README.md +6 -0
  2. package/dist/cjs/plugin/nova-plugin.js +1 -1
  3. package/dist/css/mccs.css +32 -32
  4. package/dist/css/ocean.css +32 -32
  5. package/dist/css/spark.css +33 -33
  6. package/dist/js/mccs_dark.d.ts +13 -13
  7. package/dist/js/mccs_dark.js +21 -21
  8. package/dist/js/mccs_light.d.ts +13 -13
  9. package/dist/js/mccs_light.js +20 -20
  10. package/dist/js/ocean_dark.d.ts +13 -13
  11. package/dist/js/ocean_dark.js +20 -20
  12. package/dist/js/ocean_light.d.ts +13 -13
  13. package/dist/js/ocean_light.js +20 -20
  14. package/dist/js/spark_dark.d.ts +13 -13
  15. package/dist/js/spark_dark.js +20 -20
  16. package/dist/js/spark_light.d.ts +13 -13
  17. package/dist/js/spark_light.js +20 -20
  18. package/dist/plugin/nova-plugin.js +1 -1
  19. package/package.json +1 -1
package/README.md CHANGED
@@ -16,6 +16,12 @@ The Nova Components Base package provides essential tokens and precompiled CSS f
16
16
  npm install @nova-design-system/nova-base
17
17
  ```
18
18
 
19
+ > In some case, you might experience SSL certificate issues when working on Developers' VM. As documented in the [Developers' setup guide](https://wiki.eliagroup.eu/spaces/EAing/pages/89296007/2.3.3.10+Developer+Setup#id-2.3.3.10DeveloperSetup-NPMconfig), you need to turn off the SSL certificate verification:
20
+
21
+ ```bash
22
+ npm config set strict-ssl false
23
+ ```
24
+
19
25
  ## Usage
20
26
 
21
27
  ### Include Tokens CSS
package/dist/cjs/plugin/nova-plugin.js CHANGED
@@ -208,7 +208,7 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
208
208
  }, '.typo-text-md-regular': {
209
209
  'font-size': 'var(--font-size-md)',
210
210
  'font-weight': '400',
211
- 'line-height': 'var(--line-height-b ase)',
211
+ 'line-height': 'var(--line-height-base)',
212
212
  }, '.typo-text-md-medium': {
213
213
  'font-size': 'var(--font-size-md)',
214
214
  'font-weight': '500',
package/dist/css/mccs.css CHANGED
@@ -274,16 +274,16 @@
274
274
  --color-interaction-link-inverted-text-hover: var(--color-petrol-400);
275
275
  --color-interaction-link-inverted-icon-visited: var(--color-petrol-600);
276
276
  --color-interaction-link-inverted-icon-hover: var(--color-petrol-400);
277
- --color-interaction-link-low-text-visited: var(--color-petrol-600);
277
+ --color-interaction-link-low-text-visited: var(--color-petrol-400);
278
278
  --color-interaction-link-low-text-hover: var(--color-petrol-400);
279
- --color-interaction-link-low-icon-visited: var(--color-petrol-600);
279
+ --color-interaction-link-low-icon-visited: var(--color-petrol-400);
280
280
  --color-interaction-link-low-icon-hover: var(--color-petrol-400);
281
- --color-interaction-link-high-text-visited: var(--color-petrol-600);
282
- --color-interaction-link-high-text-hover: var(--color-petrol-300);
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
+ --color-interaction-link-high-text-visited: var(--color-petrol-400);
282
+ --color-interaction-link-high-text-hover: var(--color-petrol-400);
283
+ --color-interaction-link-high-text: var(--color-petrol-500);
284
+ --color-interaction-link-high-icon-visited: var(--color-petrol-400);
285
+ --color-interaction-link-high-icon-hover: var(--color-petrol-400);
286
+ --color-interaction-link-high-icon: var(--color-petrol-500);
287
287
  --color-interaction-container-neutral-text-active: var(--color-petrol-300);
288
288
  --color-interaction-container-neutral-icon-active: var(--color-petrol-300);
289
289
  --color-interaction-container-neutral-border-active: var(--color-petrol-300);
@@ -338,10 +338,6 @@
338
338
  --components-menu-contextual-border: var(--color-content-low-border);
339
339
  --components-menu-contextual-background: var(--color-level-00-background);
340
340
  --components-calendar-background: var(--color-level-00-background);
341
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
342
- --components-calendar-weeks-text: var(--color-level-inverted-15-background);
343
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
344
- --components-calendar-weeks-background: var(--color-level-10-background);
345
341
  --components-calendar-cell-text-today: var(--color-content-high-text);
346
342
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
347
343
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -350,10 +346,19 @@
350
346
  --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
351
347
  --components-calendar-cell-dot: var(--color-content-high-icon);
352
348
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
349
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
350
+ --components-calendar-weeks-text: var(--color-level-inverted-15-background);
351
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
352
+ --components-calendar-weeks-background: var(--color-level-10-background);
353
353
  --components-calendar-header-text: var(--color-content-high-text);
354
354
  --components-calendar-border: var(--color-content-low-border);
355
355
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
356
356
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
357
+ --components-datagrid-body-subtext: var(--color-content-low-text);
358
+ --components-datagrid-body-text: var(--color-content-high-text);
359
+ --components-datagrid-body-border: var(--color-content-low-border);
360
+ --components-datagrid-header-text: var(--color-content-low-text);
361
+ --components-datagrid-header-border: var(--color-content-low-border);
357
362
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
358
363
  --components-breadcrumb-text-active: var(--color-content-medium-text);
359
364
  --components-breadcrumb-text: var(--color-content-low-text);
@@ -387,11 +392,6 @@
387
392
  --components-avatar-background-3: var(--color-rainbow-3-background);
388
393
  --components-avatar-background-2: var(--color-rainbow-2-background);
389
394
  --components-avatar-background-1: var(--color-rainbow-1-background);
390
- --components-datagrid-body-subtext: var(--color-content-low-text);
391
- --components-datagrid-body-text: var(--color-content-high-text);
392
- --components-datagrid-body-border: var(--color-content-low-border);
393
- --components-datagrid-header-text: var(--color-content-low-text);
394
- --components-datagrid-header-border: var(--color-content-low-border);
395
395
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
396
396
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
397
397
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -820,14 +820,14 @@
820
820
  --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
821
821
  --color-interaction-link-inverted-icon-visited: var(--color-petrol-400);
822
822
  --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
823
- --color-interaction-link-low-text-visited: var(--color-petrol-400);
824
- --color-interaction-link-low-text-hover: var(--color-petrol-600);
825
- --color-interaction-link-low-icon-visited: var(--color-petrol-400);
826
- --color-interaction-link-low-icon-hover: var(--color-petrol-600);
827
- --color-interaction-link-high-text-visited: var(--color-petrol-800);
823
+ --color-interaction-link-low-text-visited: var(--color-petrol-700);
824
+ --color-interaction-link-low-text-hover: var(--color-petrol-700);
825
+ --color-interaction-link-low-icon-visited: var(--color-petrol-700);
826
+ --color-interaction-link-low-icon-hover: var(--color-petrol-700);
827
+ --color-interaction-link-high-text-visited: var(--color-petrol-700);
828
828
  --color-interaction-link-high-text-hover: var(--color-petrol-700);
829
829
  --color-interaction-link-high-text: var(--color-petrol-600);
830
- --color-interaction-link-high-icon-visited: var(--color-petrol-800);
830
+ --color-interaction-link-high-icon-visited: var(--color-petrol-700);
831
831
  --color-interaction-link-high-icon-hover: var(--color-petrol-700);
832
832
  --color-interaction-link-high-icon: var(--color-petrol-600);
833
833
  --color-interaction-container-neutral-text-active: var(--color-petrol-700);
@@ -884,10 +884,6 @@
884
884
  --components-menu-contextual-border: var(--color-content-low-border);
885
885
  --components-menu-contextual-background: var(--color-level-00-background);
886
886
  --components-calendar-background: var(--color-level-00-background);
887
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
888
- --components-calendar-weeks-text: var(--color-content-high-text);
889
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
890
- --components-calendar-weeks-background: var(--color-level-10-background);
891
887
  --components-calendar-cell-text-today: var(--color-content-high-text);
892
888
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
893
889
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -896,10 +892,19 @@
896
892
  --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
897
893
  --components-calendar-cell-dot: var(--color-content-high-icon);
898
894
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
895
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
896
+ --components-calendar-weeks-text: var(--color-content-high-text);
897
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
898
+ --components-calendar-weeks-background: var(--color-level-10-background);
899
899
  --components-calendar-header-text: var(--color-content-high-text);
900
900
  --components-calendar-border: var(--color-content-low-border);
901
901
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
902
902
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
903
+ --components-datagrid-body-subtext: var(--color-content-low-text);
904
+ --components-datagrid-body-text: var(--color-content-high-text);
905
+ --components-datagrid-body-border: var(--color-content-low-border);
906
+ --components-datagrid-header-text: var(--color-content-low-text);
907
+ --components-datagrid-header-border: var(--color-content-medium-border);
903
908
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
904
909
  --components-breadcrumb-text-active: var(--color-content-medium-text);
905
910
  --components-breadcrumb-text: var(--color-content-low-text);
@@ -933,11 +938,6 @@
933
938
  --components-avatar-background-3: var(--color-rainbow-3-background);
934
939
  --components-avatar-background-2: var(--color-rainbow-2-background);
935
940
  --components-avatar-background-1: var(--color-rainbow-1-background);
936
- --components-datagrid-body-subtext: var(--color-content-low-text);
937
- --components-datagrid-body-text: var(--color-content-high-text);
938
- --components-datagrid-body-border: var(--color-content-low-border);
939
- --components-datagrid-header-text: var(--color-content-low-text);
940
- --components-datagrid-header-border: var(--color-content-medium-border);
941
941
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
942
942
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
943
943
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
package/dist/css/ocean.css CHANGED
@@ -264,14 +264,14 @@
264
264
  --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
265
265
  --color-interaction-link-inverted-icon-visited: var(--color-petrol-400);
266
266
  --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
267
- --color-interaction-link-low-text-visited: var(--color-petrol-700);
268
- --color-interaction-link-low-text-hover: var(--color-petrol-500);
269
- --color-interaction-link-low-icon-visited: var(--color-petrol-700);
270
- --color-interaction-link-low-icon-hover: var(--color-petrol-500);
271
- --color-interaction-link-high-text-visited: var(--color-petrol-300);
267
+ --color-interaction-link-low-text-visited: var(--color-petrol-400);
268
+ --color-interaction-link-low-text-hover: var(--color-petrol-400);
269
+ --color-interaction-link-low-icon-visited: var(--color-petrol-400);
270
+ --color-interaction-link-low-icon-hover: var(--color-petrol-400);
271
+ --color-interaction-link-high-text-visited: var(--color-petrol-400);
272
272
  --color-interaction-link-high-text-hover: var(--color-petrol-400);
273
273
  --color-interaction-link-high-text: var(--color-petrol-500);
274
- --color-interaction-link-high-icon-visited: var(--color-petrol-300);
274
+ --color-interaction-link-high-icon-visited: var(--color-petrol-400);
275
275
  --color-interaction-link-high-icon-hover: var(--color-petrol-400);
276
276
  --color-interaction-link-high-icon: var(--color-petrol-500);
277
277
  --color-interaction-container-neutral-text-active: var(--color-petrol-400);
@@ -331,10 +331,6 @@
331
331
  --components-menu-contextual-border: var(--color-content-low-border);
332
332
  --components-menu-contextual-background: var(--color-level-00-background);
333
333
  --components-calendar-background: var(--color-level-00-background);
334
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
335
- --components-calendar-weeks-text: var(--color-content-high-text);
336
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
337
- --components-calendar-weeks-background: var(--color-level-10-background);
338
334
  --components-calendar-cell-text-today: var(--color-content-high-text);
339
335
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
340
336
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -345,11 +341,21 @@
345
341
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
346
342
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
347
343
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
344
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
345
+ --components-calendar-weeks-text: var(--color-content-high-text);
346
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
347
+ --components-calendar-weeks-background: var(--color-level-10-background);
348
348
  --components-calendar-header-text: var(--color-content-high-text);
349
349
  --components-calendar-border: var(--color-content-low-border);
350
350
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
351
351
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
352
352
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
353
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
354
+ --components-datagrid-body-subtext: var(--color-content-low-text);
355
+ --components-datagrid-body-text: var(--color-content-high-text);
356
+ --components-datagrid-body-border: var(--color-content-low-border);
357
+ --components-datagrid-header-text: var(--color-content-low-text);
358
+ --components-datagrid-header-border: var(--color-content-medium-border);
353
359
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
354
360
  --components-breadcrumb-text-active: var(--color-content-medium-text);
355
361
  --components-breadcrumb-text: var(--color-content-low-text);
@@ -383,12 +389,6 @@
383
389
  --components-avatar-background-3: var(--color-rainbow-3-background);
384
390
  --components-avatar-background-2: var(--color-rainbow-2-background);
385
391
  --components-avatar-background-1: var(--color-rainbow-1-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-high-text);
389
- --components-datagrid-body-border: var(--color-content-low-border);
390
- --components-datagrid-header-text: var(--color-content-low-text);
391
- --components-datagrid-header-border: var(--color-content-medium-border);
392
392
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
393
393
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
394
394
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -831,14 +831,14 @@
831
831
  --color-interaction-link-inverted-text-hover: var(--color-petrol-500);
832
832
  --color-interaction-link-inverted-icon-visited: var(--color-petrol-700);
833
833
  --color-interaction-link-inverted-icon-hover: var(--color-petrol-500);
834
- --color-interaction-link-low-text-visited: var(--color-petrol-400);
835
- --color-interaction-link-low-text-hover: var(--color-petrol-600);
836
- --color-interaction-link-low-icon-visited: var(--color-petrol-400);
837
- --color-interaction-link-low-icon-hover: var(--color-petrol-600);
838
- --color-interaction-link-high-text-visited: var(--color-petrol-800);
834
+ --color-interaction-link-low-text-visited: var(--color-petrol-700);
835
+ --color-interaction-link-low-text-hover: var(--color-petrol-700);
836
+ --color-interaction-link-low-icon-visited: var(--color-petrol-700);
837
+ --color-interaction-link-low-icon-hover: var(--color-petrol-700);
838
+ --color-interaction-link-high-text-visited: var(--color-petrol-700);
839
839
  --color-interaction-link-high-text-hover: var(--color-petrol-700);
840
840
  --color-interaction-link-high-text: var(--color-petrol-600);
841
- --color-interaction-link-high-icon-visited: var(--color-petrol-800);
841
+ --color-interaction-link-high-icon-visited: var(--color-petrol-700);
842
842
  --color-interaction-link-high-icon-hover: var(--color-petrol-700);
843
843
  --color-interaction-link-high-icon: var(--color-petrol-600);
844
844
  --color-interaction-container-neutral-text-active: var(--color-petrol-700);
@@ -898,10 +898,6 @@
898
898
  --components-menu-contextual-border: var(--color-content-low-border);
899
899
  --components-menu-contextual-background: var(--color-level-00-background);
900
900
  --components-calendar-background: var(--color-level-00-background);
901
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
902
- --components-calendar-weeks-text: var(--color-content-high-text);
903
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
904
- --components-calendar-weeks-background: var(--color-level-10-background);
905
901
  --components-calendar-cell-text-today: var(--color-content-high-text);
906
902
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
907
903
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -912,11 +908,21 @@
912
908
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
913
909
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
914
910
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
911
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
912
+ --components-calendar-weeks-text: var(--color-content-high-text);
913
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
914
+ --components-calendar-weeks-background: var(--color-level-10-background);
915
915
  --components-calendar-header-text: var(--color-content-high-text);
916
916
  --components-calendar-border: var(--color-content-low-border);
917
917
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
918
918
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
919
919
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
920
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
921
+ --components-datagrid-body-subtext: var(--color-content-low-text);
922
+ --components-datagrid-body-text: var(--color-content-high-text);
923
+ --components-datagrid-body-border: var(--color-content-low-border);
924
+ --components-datagrid-header-text: var(--color-content-low-text);
925
+ --components-datagrid-header-border: var(--color-content-medium-border);
920
926
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
921
927
  --components-breadcrumb-text-active: var(--color-content-medium-text);
922
928
  --components-breadcrumb-text: var(--color-content-low-text);
@@ -950,12 +956,6 @@
950
956
  --components-avatar-background-3: var(--color-rainbow-3-background);
951
957
  --components-avatar-background-2: var(--color-rainbow-2-background);
952
958
  --components-avatar-background-1: var(--color-rainbow-1-background);
953
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
954
- --components-datagrid-body-subtext: var(--color-content-low-text);
955
- --components-datagrid-body-text: var(--color-content-high-text);
956
- --components-datagrid-body-border: var(--color-content-low-border);
957
- --components-datagrid-header-text: var(--color-content-low-text);
958
- --components-datagrid-header-border: var(--color-content-medium-border);
959
959
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
960
960
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
961
961
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
package/dist/css/spark.css CHANGED
@@ -264,14 +264,14 @@
264
264
  --color-interaction-link-inverted-text-hover: var(--color-orange-600);
265
265
  --color-interaction-link-inverted-icon-visited: var(--color-orange-400);
266
266
  --color-interaction-link-inverted-icon-hover: var(--color-orange-600);
267
- --color-interaction-link-low-text-visited: var(--color-orange-700);
268
- --color-interaction-link-low-text-hover: var(--color-orange-500);
269
- --color-interaction-link-low-icon-visited: var(--color-orange-700);
270
- --color-interaction-link-low-icon-hover: var(--color-orange-500);
271
- --color-interaction-link-high-text-visited: var(--color-orange-700);
267
+ --color-interaction-link-low-text-visited: var(--color-orange-400);
268
+ --color-interaction-link-low-text-hover: var(--color-orange-400);
269
+ --color-interaction-link-low-icon-visited: var(--color-orange-400);
270
+ --color-interaction-link-low-icon-hover: var(--color-orange-400);
271
+ --color-interaction-link-high-text-visited: var(--color-orange-400);
272
272
  --color-interaction-link-high-text-hover: var(--color-orange-400);
273
273
  --color-interaction-link-high-text: var(--color-orange-500);
274
- --color-interaction-link-high-icon-visited: var(--color-orange-700);
274
+ --color-interaction-link-high-icon-visited: var(--color-orange-400);
275
275
  --color-interaction-link-high-icon-hover: var(--color-orange-400);
276
276
  --color-interaction-link-high-icon: var(--color-orange-500);
277
277
  --color-interaction-container-neutral-text-active: var(--color-orange-400);
@@ -331,10 +331,6 @@
331
331
  --components-menu-contextual-border: var(--color-content-low-border);
332
332
  --components-menu-contextual-background: var(--color-level-00-background);
333
333
  --components-calendar-background: var(--color-level-00-background);
334
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
335
- --components-calendar-weeks-text: var(--color-content-high-text);
336
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
337
- --components-calendar-weeks-background: var(--color-level-10-background);
338
334
  --components-calendar-cell-text-today: var(--color-content-high-text);
339
335
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
340
336
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -345,11 +341,21 @@
345
341
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
346
342
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
347
343
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
344
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
345
+ --components-calendar-weeks-text: var(--color-content-high-text);
346
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
347
+ --components-calendar-weeks-background: var(--color-level-10-background);
348
348
  --components-calendar-header-text: var(--color-content-high-text);
349
349
  --components-calendar-border: var(--color-content-low-border);
350
350
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
351
351
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
352
352
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
353
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
354
+ --components-datagrid-body-subtext: var(--color-content-low-text);
355
+ --components-datagrid-body-text: var(--color-content-high-text);
356
+ --components-datagrid-body-border: var(--color-content-low-border);
357
+ --components-datagrid-header-text: var(--color-content-low-text);
358
+ --components-datagrid-header-border: var(--color-content-medium-border);
353
359
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
354
360
  --components-breadcrumb-text-active: var(--color-content-medium-text);
355
361
  --components-breadcrumb-text: var(--color-content-low-text);
@@ -383,12 +389,6 @@
383
389
  --components-avatar-background-3: var(--color-rainbow-3-background);
384
390
  --components-avatar-background-2: var(--color-rainbow-2-background);
385
391
  --components-avatar-background-1: var(--color-rainbow-1-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-high-text);
389
- --components-datagrid-body-border: var(--color-content-low-border);
390
- --components-datagrid-header-text: var(--color-content-low-text);
391
- --components-datagrid-header-border: var(--color-content-medium-border);
392
392
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
393
393
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
394
394
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -829,14 +829,14 @@
829
829
  --color-interaction-link-inverted-text-hover: var(--color-orange-500);
830
830
  --color-interaction-link-inverted-icon-visited: var(--color-orange-700);
831
831
  --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
832
- --color-interaction-link-low-text-visited: var(--color-orange-400);
833
- --color-interaction-link-low-text-hover: var(--color-orange-600);
834
- --color-interaction-link-low-icon-visited: var(--color-orange-400);
835
- --color-interaction-link-low-icon-hover: var(--color-orange-600);
836
- --color-interaction-link-high-text-visited: var(--color-orange-400);
832
+ --color-interaction-link-low-text-visited: var(--color-orange-700);
833
+ --color-interaction-link-low-text-hover: var(--color-orange-700);
834
+ --color-interaction-link-low-icon-visited: var(--color-orange-700);
835
+ --color-interaction-link-low-icon-hover: var(--color-orange-700);
836
+ --color-interaction-link-high-text-visited: var(--color-orange-700);
837
837
  --color-interaction-link-high-text-hover: var(--color-orange-700);
838
838
  --color-interaction-link-high-text: var(--color-orange-600);
839
- --color-interaction-link-high-icon-visited: var(--color-orange-400);
839
+ --color-interaction-link-high-icon-visited: var(--color-orange-700);
840
840
  --color-interaction-link-high-icon-hover: var(--color-orange-700);
841
841
  --color-interaction-link-high-icon: var(--color-orange-600);
842
842
  --color-interaction-container-neutral-text-active: var(--color-orange-600);
@@ -896,10 +896,6 @@
896
896
  --components-menu-contextual-border: var(--color-content-low-border);
897
897
  --components-menu-contextual-background: var(--color-level-00-background);
898
898
  --components-calendar-background: var(--color-level-00-background);
899
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
900
- --components-calendar-weeks-text: var(--color-content-high-text);
901
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
902
- --components-calendar-weeks-background: var(--color-level-10-background);
903
899
  --components-calendar-cell-text-today: var(--color-content-high-text);
904
900
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
905
901
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -909,11 +905,21 @@
909
905
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
910
906
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
911
907
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
908
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
909
+ --components-calendar-weeks-text: var(--color-content-high-text);
910
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
911
+ --components-calendar-weeks-background: var(--color-level-10-background);
912
912
  --components-calendar-header-text: var(--color-content-high-text);
913
913
  --components-calendar-border: var(--color-content-low-border);
914
914
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
915
915
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
916
916
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
917
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
918
+ --components-datagrid-body-subtext: var(--color-content-low-text);
919
+ --components-datagrid-body-text: var(--color-content-high-text);
920
+ --components-datagrid-body-border: var(--color-content-low-border);
921
+ --components-datagrid-header-text: var(--color-content-low-text);
922
+ --components-datagrid-header-border: var(--color-content-medium-border);
917
923
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
918
924
  --components-breadcrumb-text-active: var(--color-content-medium-text);
919
925
  --components-breadcrumb-text: var(--color-content-low-text);
@@ -947,12 +953,6 @@
947
953
  --components-avatar-background-3: var(--color-rainbow-3-background);
948
954
  --components-avatar-background-2: var(--color-rainbow-2-background);
949
955
  --components-avatar-background-1: var(--color-rainbow-1-background);
950
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
951
- --components-datagrid-body-subtext: var(--color-content-low-text);
952
- --components-datagrid-body-text: var(--color-content-high-text);
953
- --components-datagrid-body-border: var(--color-content-low-border);
954
- --components-datagrid-header-text: var(--color-content-low-text);
955
- --components-datagrid-header-border: var(--color-content-medium-border);
956
956
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
957
957
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
958
958
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -1069,7 +1069,7 @@
1069
1069
  --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
1070
1070
  --color-interaction-link-low-text-inactive: var(--color-content-low-text);
1071
1071
  --color-interaction-link-low-text: var(--color-content-high-text);
1072
- --color-interaction-link-low-icon-inactive: var(--color-content-low-icon);
1072
+ --color-interaction-link-low-icon-inactive: var(--color-content-low-text);
1073
1073
  --color-interaction-link-low-icon: var(--color-content-high-text);
1074
1074
  --color-interaction-link-high-text-inactive: var(--color-content-low-text);
1075
1075
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
package/dist/js/mccs_dark.d.ts CHANGED
@@ -417,15 +417,6 @@ export const ComponentsAlertSuccessIcon : string;
417
417
  export const ComponentsAlertNeutralBackground : string;
418
418
  export const ComponentsAlertNeutralBorder : string;
419
419
  export const ComponentsAlertNeutralIcon : string;
420
- export const ComponentsDatagridHeaderBorder : string;
421
- export const ComponentsDatagridHeaderText : string;
422
- export const ComponentsDatagridHeaderBackground : string;
423
- export const ComponentsDatagridBodyBorder : string;
424
- export const ComponentsDatagridBodyText : string;
425
- export const ComponentsDatagridBodySubtext : string;
426
- export const ComponentsDatagridBodyBackgroundDefault : string;
427
- export const ComponentsDatagridBodyBackgroundActive : string;
428
- export const ComponentsDatagridBodyBackgroundHover : string;
429
420
  export const ComponentsAvatarBackground1 : string;
430
421
  export const ComponentsAvatarBackground2 : string;
431
422
  export const ComponentsAvatarBackground3 : string;
@@ -459,6 +450,15 @@ export const ComponentsAvatarContent10 : string;
459
450
  export const ComponentsBreadcrumbText : string;
460
451
  export const ComponentsBreadcrumbTextActive : string;
461
452
  export const ComponentsBreadcrumbTextHover : string;
453
+ export const ComponentsDatagridHeaderBorder : string;
454
+ export const ComponentsDatagridHeaderText : string;
455
+ export const ComponentsDatagridHeaderBackground : string;
456
+ export const ComponentsDatagridBodyBorder : string;
457
+ export const ComponentsDatagridBodyText : string;
458
+ export const ComponentsDatagridBodySubtext : string;
459
+ export const ComponentsDatagridBodyBackgroundDefault : string;
460
+ export const ComponentsDatagridBodyBackgroundActive : string;
461
+ export const ComponentsDatagridBodyBackgroundHover : string;
462
462
  export const ComponentsFieldTimeBackgroundDefault : string;
463
463
  export const ComponentsFieldTimeBackgroundHover : string;
464
464
  export const ComponentsFieldTimeBackgroundActive : string;
@@ -468,6 +468,10 @@ export const ComponentsFieldTimeTextActive : string;
468
468
  export const ComponentsFieldTimeBorderActive : string;
469
469
  export const ComponentsCalendarBorder : string;
470
470
  export const ComponentsCalendarHeaderText : string;
471
+ export const ComponentsCalendarWeeksBackground : string;
472
+ export const ComponentsCalendarWeeksBackgroundHover : string;
473
+ export const ComponentsCalendarWeeksText : string;
474
+ export const ComponentsCalendarWeeksTextHover : string;
471
475
  export const ComponentsCalendarCellBackground : string;
472
476
  export const ComponentsCalendarCellBackgroundSelected : string;
473
477
  export const ComponentsCalendarCellBackgroundInRange : string;
@@ -482,10 +486,6 @@ export const ComponentsCalendarCellTextInRange : string;
482
486
  export const ComponentsCalendarCellTextHover : string;
483
487
  export const ComponentsCalendarCellTextOutsideMonth : string;
484
488
  export const ComponentsCalendarCellTextToday : string;
485
- export const ComponentsCalendarWeeksBackground : string;
486
- export const ComponentsCalendarWeeksBackgroundHover : string;
487
- export const ComponentsCalendarWeeksText : string;
488
- export const ComponentsCalendarWeeksTextHover : string;
489
489
  export const ComponentsCalendarBackground : string;
490
490
  export const ComponentsMenuContextualBackground : string;
491
491
  export const ComponentsMenuContextualBorder : string;
package/dist/js/mccs_dark.js CHANGED
@@ -38,22 +38,22 @@ export const ColorInteractionContainerNeutralIconHover = "#bac1c4";
38
38
  export const ColorInteractionContainerNeutralText = "#889499";
39
39
  export const ColorInteractionContainerNeutralTextActive = "#71b2bc";
40
40
  export const ColorInteractionContainerNeutralTextHover = "#bac1c4";
41
- export const ColorInteractionLinkHighIcon = "#4b9eaa";
42
- export const ColorInteractionLinkHighIconHover = "#71b2bc";
41
+ export const ColorInteractionLinkHighIcon = "#258998";
42
+ export const ColorInteractionLinkHighIconHover = "#4b9eaa";
43
43
  export const ColorInteractionLinkHighIconInactive = "#889499";
44
- export const ColorInteractionLinkHighIconVisited = "#1f717d";
45
- export const ColorInteractionLinkHighText = "#4b9eaa";
46
- export const ColorInteractionLinkHighTextHover = "#71b2bc";
44
+ export const ColorInteractionLinkHighIconVisited = "#4b9eaa";
45
+ export const ColorInteractionLinkHighText = "#258998";
46
+ export const ColorInteractionLinkHighTextHover = "#4b9eaa";
47
47
  export const ColorInteractionLinkHighTextInactive = "#889499";
48
- export const ColorInteractionLinkHighTextVisited = "#1f717d";
48
+ export const ColorInteractionLinkHighTextVisited = "#4b9eaa";
49
49
  export const ColorInteractionLinkLowIcon = "#f5f6f7";
50
50
  export const ColorInteractionLinkLowIconHover = "#4b9eaa";
51
51
  export const ColorInteractionLinkLowIconInactive = "#889499";
52
- export const ColorInteractionLinkLowIconVisited = "#1f717d";
52
+ export const ColorInteractionLinkLowIconVisited = "#4b9eaa";
53
53
  export const ColorInteractionLinkLowText = "#f5f6f7";
54
54
  export const ColorInteractionLinkLowTextHover = "#4b9eaa";
55
55
  export const ColorInteractionLinkLowTextInactive = "#889499";
56
- export const ColorInteractionLinkLowTextVisited = "#1f717d";
56
+ export const ColorInteractionLinkLowTextVisited = "#4b9eaa";
57
57
  export const ColorInteractionLinkInvertedIcon = "#27353b";
58
58
  export const ColorInteractionLinkInvertedIconHover = "#4b9eaa";
59
59
  export const ColorInteractionLinkInvertedIconInactive = "#3f555e";
@@ -417,15 +417,6 @@ export const ComponentsAlertSuccessIcon = "#6bde71";
417
417
  export const ComponentsAlertNeutralBackground = "#27353b";
418
418
  export const ComponentsAlertNeutralBorder = "#889499";
419
419
  export const ComponentsAlertNeutralIcon = "#889499";
420
- export const ComponentsDatagridHeaderBorder = "#394d55";
421
- export const ComponentsDatagridHeaderText = "#889499";
422
- export const ComponentsDatagridHeaderBackground = "#ffffff";
423
- export const ComponentsDatagridBodyBorder = "#394d55";
424
- export const ComponentsDatagridBodyText = "#f5f6f7";
425
- export const ComponentsDatagridBodySubtext = "#889499";
426
- export const ComponentsDatagridBodyBackgroundDefault = "#ffffff";
427
- export const ComponentsDatagridBodyBackgroundActive = "#ffffff";
428
- export const ComponentsDatagridBodyBackgroundHover = "#ffffff";
429
420
  export const ComponentsAvatarBackground1 = "#432306";
430
421
  export const ComponentsAvatarBackground2 = "#45190a";
431
422
  export const ComponentsAvatarBackground3 = "#4d3a00";
@@ -459,6 +450,15 @@ export const ComponentsAvatarContent10 = "#9fadb2";
459
450
  export const ComponentsBreadcrumbText = "#889499";
460
451
  export const ComponentsBreadcrumbTextActive = "#bac1c4";
461
452
  export const ComponentsBreadcrumbTextHover = "#4b9eaa";
453
+ export const ComponentsDatagridHeaderBorder = "#394d55";
454
+ export const ComponentsDatagridHeaderText = "#889499";
455
+ export const ComponentsDatagridHeaderBackground = "#ffffff";
456
+ export const ComponentsDatagridBodyBorder = "#394d55";
457
+ export const ComponentsDatagridBodyText = "#f5f6f7";
458
+ export const ComponentsDatagridBodySubtext = "#889499";
459
+ export const ComponentsDatagridBodyBackgroundDefault = "#ffffff";
460
+ export const ComponentsDatagridBodyBackgroundActive = "#ffffff";
461
+ export const ComponentsDatagridBodyBackgroundHover = "#ffffff";
462
462
  export const ComponentsFieldTimeBackgroundDefault = "#ffffff";
463
463
  export const ComponentsFieldTimeBackgroundHover = "#ffffff";
464
464
  export const ComponentsFieldTimeBackgroundActive = "#ffffff";
@@ -468,6 +468,10 @@ export const ComponentsFieldTimeTextActive = "#71b2bc";
468
468
  export const ComponentsFieldTimeBorderActive = "#71b2bc";
469
469
  export const ComponentsCalendarBorder = "#394d55";
470
470
  export const ComponentsCalendarHeaderText = "#f5f6f7";
471
+ export const ComponentsCalendarWeeksBackground = "#171f22";
472
+ export const ComponentsCalendarWeeksBackgroundHover = "#1e272b";
473
+ export const ComponentsCalendarWeeksText = "#eaeef0";
474
+ export const ComponentsCalendarWeeksTextHover = "#f5f6f7";
471
475
  export const ComponentsCalendarCellBackground = "#ffffff";
472
476
  export const ComponentsCalendarCellBackgroundSelected = "#258998";
473
477
  export const ComponentsCalendarCellBackgroundInRange = "#ffffff";
@@ -482,10 +486,6 @@ export const ComponentsCalendarCellTextInRange = "#71b2bc";
482
486
  export const ComponentsCalendarCellTextHover = "#bac1c4";
483
487
  export const ComponentsCalendarCellTextOutsideMonth = "#617177";
484
488
  export const ComponentsCalendarCellTextToday = "#f5f6f7";
485
- export const ComponentsCalendarWeeksBackground = "#171f22";
486
- export const ComponentsCalendarWeeksBackgroundHover = "#1e272b";
487
- export const ComponentsCalendarWeeksText = "#eaeef0";
488
- export const ComponentsCalendarWeeksTextHover = "#f5f6f7";
489
489
  export const ComponentsCalendarBackground = "#0b0f11";
490
490
  export const ComponentsMenuContextualBackground = "#0b0f11";
491
491
  export const ComponentsMenuContextualBorder = "#394d55";
package/dist/js/mccs_light.d.ts CHANGED
@@ -417,15 +417,6 @@ export const ComponentsAlertSuccessIcon : string;
417
417
  export const ComponentsAlertNeutralBackground : string;
418
418
  export const ComponentsAlertNeutralBorder : string;
419
419
  export const ComponentsAlertNeutralIcon : string;
420
- export const ComponentsDatagridHeaderBorder : string;
421
- export const ComponentsDatagridHeaderText : string;
422
- export const ComponentsDatagridHeaderBackground : string;
423
- export const ComponentsDatagridBodyBorder : string;
424
- export const ComponentsDatagridBodyText : string;
425
- export const ComponentsDatagridBodySubtext : string;
426
- export const ComponentsDatagridBodyBackgroundDefault : string;
427
- export const ComponentsDatagridBodyBackgroundActive : string;
428
- export const ComponentsDatagridBodyBackgroundHover : string;
429
420
  export const ComponentsAvatarBackground1 : string;
430
421
  export const ComponentsAvatarBackground2 : string;
431
422
  export const ComponentsAvatarBackground3 : string;
@@ -459,6 +450,15 @@ export const ComponentsAvatarContent10 : string;
459
450
  export const ComponentsBreadcrumbText : string;
460
451
  export const ComponentsBreadcrumbTextActive : string;
461
452
  export const ComponentsBreadcrumbTextHover : string;
453
+ export const ComponentsDatagridHeaderBorder : string;
454
+ export const ComponentsDatagridHeaderText : string;
455
+ export const ComponentsDatagridHeaderBackground : string;
456
+ export const ComponentsDatagridBodyBorder : string;
457
+ export const ComponentsDatagridBodyText : string;
458
+ export const ComponentsDatagridBodySubtext : string;
459
+ export const ComponentsDatagridBodyBackgroundDefault : string;
460
+ export const ComponentsDatagridBodyBackgroundActive : string;
461
+ export const ComponentsDatagridBodyBackgroundHover : string;
462
462
  export const ComponentsFieldTimeBackgroundDefault : string;
463
463
  export const ComponentsFieldTimeBackgroundHover : string;
464
464
  export const ComponentsFieldTimeBackgroundActive : string;
@@ -468,6 +468,10 @@ export const ComponentsFieldTimeTextActive : string;
468
468
  export const ComponentsFieldTimeBorderActive : string;
469
469
  export const ComponentsCalendarBorder : string;
470
470
  export const ComponentsCalendarHeaderText : string;
471
+ export const ComponentsCalendarWeeksBackground : string;
472
+ export const ComponentsCalendarWeeksBackgroundHover : string;
473
+ export const ComponentsCalendarWeeksText : string;
474
+ export const ComponentsCalendarWeeksTextHover : string;
471
475
  export const ComponentsCalendarCellBackground : string;
472
476
  export const ComponentsCalendarCellBackgroundSelected : string;
473
477
  export const ComponentsCalendarCellBackgroundInRange : string;
@@ -482,10 +486,6 @@ export const ComponentsCalendarCellTextInRange : string;
482
486
  export const ComponentsCalendarCellTextHover : string;
483
487
  export const ComponentsCalendarCellTextOutsideMonth : string;
484
488
  export const ComponentsCalendarCellTextToday : string;
485
- export const ComponentsCalendarWeeksBackground : string;
486
- export const ComponentsCalendarWeeksBackgroundHover : string;
487
- export const ComponentsCalendarWeeksText : string;
488
- export const ComponentsCalendarWeeksTextHover : string;
489
489
  export const ComponentsCalendarBackground : string;
490
490
  export const ComponentsMenuContextualBackground : string;
491
491
  export const ComponentsMenuContextualBorder : string;