@nova-design-system/nova-base 3.6.0 → 3.8.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 (27) hide show
  1. package/README.md +6 -0
  2. package/assets/icons/icon-sprite.svg +1 -1
  3. package/dist/cjs/generated/nova-tailwind-components.js +30 -2
  4. package/dist/cjs/generated/nova-tailwind-tokens.js +12 -12
  5. package/dist/cjs/plugin/nova-plugin.js +1 -1
  6. package/dist/css/mccs.css +40 -40
  7. package/dist/css/nova-utils.css +54 -48
  8. package/dist/css/ocean.css +40 -40
  9. package/dist/css/spark.css +40 -40
  10. package/dist/generated/nova-tailwind-components.d.ts +30 -2
  11. package/dist/generated/nova-tailwind-components.js +30 -2
  12. package/dist/generated/nova-tailwind-tokens.d.ts +8 -8
  13. package/dist/generated/nova-tailwind-tokens.js +12 -12
  14. package/dist/js/mccs_dark.d.ts +17 -17
  15. package/dist/js/mccs_dark.js +25 -25
  16. package/dist/js/mccs_light.d.ts +17 -17
  17. package/dist/js/mccs_light.js +24 -24
  18. package/dist/js/ocean_dark.d.ts +17 -17
  19. package/dist/js/ocean_dark.js +24 -24
  20. package/dist/js/ocean_light.d.ts +17 -17
  21. package/dist/js/ocean_light.js +24 -24
  22. package/dist/js/spark_dark.d.ts +17 -17
  23. package/dist/js/spark_dark.js +24 -24
  24. package/dist/js/spark_light.d.ts +17 -17
  25. package/dist/js/spark_light.js +24 -24
  26. package/dist/plugin/nova-plugin.js +1 -1
  27. package/package.json +1 -1
package/dist/cjs/generated/nova-tailwind-components.js CHANGED
@@ -325,14 +325,42 @@ exports.NOVA_TAILWIND_COMPONENTS = {
325
325
  '.nv-button.fluid': {
326
326
  'width': '100%'
327
327
  },
328
- '.nv-link': {
328
+ '.nv-link, .nv-link-low, .nv-link-high': {
329
329
  'color': 'var(--color-interaction-link-high-text)',
330
330
  'fontWeight': '500',
331
331
  'textDecoration': 'none'
332
332
  },
333
- '.nv-link:hover': {
333
+ '.nv-link:hover, .nv-link-low:hover, .nv-link-high:hover': {
334
334
  'color': 'var(--color-interaction-link-high-text-hover)'
335
335
  },
336
+ '.nv-link-low': {
337
+ 'color': 'var(--color-interaction-link-low-text)',
338
+ 'textDecoration': 'underline'
339
+ },
340
+ '.nv-link-low:hover': {
341
+ 'color': 'var(--color-interaction-link-low-text-hover)'
342
+ },
343
+ '.nv-link-low:visited': {
344
+ 'color': 'var(--color-interaction-link-low-text-visited)'
345
+ },
346
+ '.nv-link-low.disabled': {
347
+ 'color': 'var(--color-interaction-link-high-text-disabled)',
348
+ 'textDecoration': 'none'
349
+ },
350
+ '.nv-link-high': {
351
+ 'color': 'var(--color-interaction-link-high-text)',
352
+ 'textDecoration': 'underline'
353
+ },
354
+ '.nv-link-high:hover': {
355
+ 'color': 'var(--color-interaction-link-high-text-hover)'
356
+ },
357
+ '.nv-link-high:visited': {
358
+ 'color': 'var(--color-interaction-link-high-text-visited)'
359
+ },
360
+ '.nv-link-high.disabled': {
361
+ 'color': 'var(--color-interaction-link-high-text-disabled)',
362
+ 'textDecoration': 'none'
363
+ },
336
364
  '.nv-sidenav .nv-link, .nv-navbar .nv-link, .nv-tabs .nv-link, .nv-buttongroup .nv-link': {
337
365
  'display': 'flex',
338
366
  'alignItems': 'center',
package/dist/cjs/generated/nova-tailwind-tokens.js CHANGED
@@ -310,24 +310,24 @@ exports.NOVA_TAILWIND_TOKENS = {
310
310
  '.text-interaction-link-high': {
311
311
  'color': 'var(--color-interaction-link-high-text)'
312
312
  },
313
+ '.text-interaction-link-high-disabled': {
314
+ 'color': 'var(--color-interaction-link-high-text-disabled)'
315
+ },
313
316
  '.text-interaction-link-high-hover': {
314
317
  'color': 'var(--color-interaction-link-high-text-hover)'
315
318
  },
316
- '.text-interaction-link-high-inactive': {
317
- 'color': 'var(--color-interaction-link-high-text-inactive)'
318
- },
319
319
  '.text-interaction-link-high-visited': {
320
320
  'color': 'var(--color-interaction-link-high-text-visited)'
321
321
  },
322
322
  '.icon-interaction-link-inverted': {
323
323
  'color': 'var(--color-interaction-link-inverted-icon)'
324
324
  },
325
+ '.icon-interaction-link-inverted-disabled': {
326
+ 'color': 'var(--color-interaction-link-inverted-icon-disabled)'
327
+ },
325
328
  '.icon-interaction-link-inverted-hover': {
326
329
  'color': 'var(--color-interaction-link-inverted-icon-hover)'
327
330
  },
328
- '.icon-interaction-link-inverted-inactive': {
329
- 'color': 'var(--color-interaction-link-inverted-icon-inactive)'
330
- },
331
331
  '.icon-interaction-link-inverted-visited': {
332
332
  'color': 'var(--color-interaction-link-inverted-icon-visited)'
333
333
  },
@@ -346,24 +346,24 @@ exports.NOVA_TAILWIND_TOKENS = {
346
346
  '.icon-interaction-link-low': {
347
347
  'color': 'var(--color-interaction-link-low-icon)'
348
348
  },
349
+ '.icon-interaction-link-low-disabled': {
350
+ 'color': 'var(--color-interaction-link-low-icon-disabled)'
351
+ },
349
352
  '.icon-interaction-link-low-hover': {
350
353
  'color': 'var(--color-interaction-link-low-icon-hover)'
351
354
  },
352
- '.icon-interaction-link-low-inactive': {
353
- 'color': 'var(--color-interaction-link-low-icon-inactive)'
354
- },
355
355
  '.icon-interaction-link-low-visited': {
356
356
  'color': 'var(--color-interaction-link-low-icon-visited)'
357
357
  },
358
358
  '.text-interaction-link-low': {
359
359
  'color': 'var(--color-interaction-link-low-text)'
360
360
  },
361
+ '.text-interaction-link-low-disabled': {
362
+ 'color': 'var(--color-interaction-link-low-text-disabled)'
363
+ },
361
364
  '.text-interaction-link-low-hover': {
362
365
  'color': 'var(--color-interaction-link-low-text-hover)'
363
366
  },
364
- '.text-interaction-link-low-inactive': {
365
- 'color': 'var(--color-interaction-link-low-text-inactive)'
366
- },
367
367
  '.text-interaction-link-low-visited': {
368
368
  'color': 'var(--color-interaction-link-low-text-visited)'
369
369
  },
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);
@@ -503,13 +503,13 @@
503
503
  --color-focus-background: var(--color-level-00-background);
504
504
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
505
505
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
506
- --color-interaction-link-inverted-icon-inactive: var(--color-content-inverted-low-icon);
506
+ --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
507
507
  --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
508
- --color-interaction-link-low-text-inactive: var(--color-content-low-text);
508
+ --color-interaction-link-low-text-disabled: var(--color-content-low-text);
509
509
  --color-interaction-link-low-text: var(--color-content-high-text);
510
- --color-interaction-link-low-icon-inactive: var(--color-content-low-icon);
510
+ --color-interaction-link-low-icon-disabled: var(--color-content-low-icon);
511
511
  --color-interaction-link-low-icon: var(--color-content-high-text);
512
- --color-interaction-link-high-text-inactive: var(--color-content-low-text);
512
+ --color-interaction-link-high-text-disabled: var(--color-content-low-text);
513
513
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
514
514
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
515
515
  --color-interaction-container-neutral-text: var(--color-content-low-text);
@@ -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);
@@ -1048,13 +1048,13 @@
1048
1048
  --color-focus-background: var(--color-level-00-background);
1049
1049
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1050
1050
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1051
- --color-interaction-link-inverted-icon-inactive: var(--color-content-inverted-low-icon);
1051
+ --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
1052
1052
  --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
1053
- --color-interaction-link-low-text-inactive: var(--color-content-low-text);
1053
+ --color-interaction-link-low-text-disabled: var(--color-content-low-text);
1054
1054
  --color-interaction-link-low-text: var(--color-content-high-text);
1055
- --color-interaction-link-low-icon-inactive: var(--color-content-low-icon);
1055
+ --color-interaction-link-low-icon-disabled: var(--color-content-low-icon);
1056
1056
  --color-interaction-link-low-icon: var(--color-content-high-text);
1057
- --color-interaction-link-high-text-inactive: var(--color-content-low-text);
1057
+ --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1058
1058
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1059
1059
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1060
1060
  --color-interaction-container-neutral-text: var(--color-content-low-text);
package/dist/css/nova-utils.css CHANGED
@@ -7114,12 +7114,12 @@ h6 {
7114
7114
  color: var(--color-interaction-link-high-text);
7115
7115
  }
7116
7116
 
7117
- .text-interaction-link-high-hover {
7118
- color: var(--color-interaction-link-high-text-hover);
7117
+ .text-interaction-link-high-disabled {
7118
+ color: var(--color-interaction-link-high-text-disabled);
7119
7119
  }
7120
7120
 
7121
- .text-interaction-link-high-inactive {
7122
- color: var(--color-interaction-link-high-text-inactive);
7121
+ .text-interaction-link-high-hover {
7122
+ color: var(--color-interaction-link-high-text-hover);
7123
7123
  }
7124
7124
 
7125
7125
  .text-interaction-link-high-visited {
@@ -7130,12 +7130,12 @@ h6 {
7130
7130
  color: var(--color-interaction-link-inverted-icon);
7131
7131
  }
7132
7132
 
7133
- .icon-interaction-link-inverted-hover {
7134
- color: var(--color-interaction-link-inverted-icon-hover);
7133
+ .icon-interaction-link-inverted-disabled {
7134
+ color: var(--color-interaction-link-inverted-icon-disabled);
7135
7135
  }
7136
7136
 
7137
- .icon-interaction-link-inverted-inactive {
7138
- color: var(--color-interaction-link-inverted-icon-inactive);
7137
+ .icon-interaction-link-inverted-hover {
7138
+ color: var(--color-interaction-link-inverted-icon-hover);
7139
7139
  }
7140
7140
 
7141
7141
  .icon-interaction-link-inverted-visited {
@@ -7162,12 +7162,12 @@ h6 {
7162
7162
  color: var(--color-interaction-link-low-icon);
7163
7163
  }
7164
7164
 
7165
- .icon-interaction-link-low-hover {
7166
- color: var(--color-interaction-link-low-icon-hover);
7165
+ .icon-interaction-link-low-disabled {
7166
+ color: var(--color-interaction-link-low-icon-disabled);
7167
7167
  }
7168
7168
 
7169
- .icon-interaction-link-low-inactive {
7170
- color: var(--color-interaction-link-low-icon-inactive);
7169
+ .icon-interaction-link-low-hover {
7170
+ color: var(--color-interaction-link-low-icon-hover);
7171
7171
  }
7172
7172
 
7173
7173
  .icon-interaction-link-low-visited {
@@ -7178,12 +7178,12 @@ h6 {
7178
7178
  color: var(--color-interaction-link-low-text);
7179
7179
  }
7180
7180
 
7181
- .text-interaction-link-low-hover {
7182
- color: var(--color-interaction-link-low-text-hover);
7181
+ .text-interaction-link-low-disabled {
7182
+ color: var(--color-interaction-link-low-text-disabled);
7183
7183
  }
7184
7184
 
7185
- .text-interaction-link-low-inactive {
7186
- color: var(--color-interaction-link-low-text-inactive);
7185
+ .text-interaction-link-low-hover {
7186
+ color: var(--color-interaction-link-low-text-hover);
7187
7187
  }
7188
7188
 
7189
7189
  .text-interaction-link-low-visited {
@@ -7819,16 +7819,52 @@ h6 {
7819
7819
  width: 100%;
7820
7820
  }
7821
7821
 
7822
- .nv-link {
7822
+ .nv-link, .nv-link-low, .nv-link-high {
7823
7823
  color: var(--color-interaction-link-high-text);
7824
7824
  font-weight: 500;
7825
7825
  text-decoration: none;
7826
7826
  }
7827
7827
 
7828
- .nv-link:hover {
7828
+ .nv-link:hover, .nv-link-low:hover, .nv-link-high:hover {
7829
7829
  color: var(--color-interaction-link-high-text-hover);
7830
7830
  }
7831
7831
 
7832
+ .nv-link-low {
7833
+ color: var(--color-interaction-link-low-text);
7834
+ text-decoration: underline;
7835
+ }
7836
+
7837
+ .nv-link-low:hover {
7838
+ color: var(--color-interaction-link-low-text-hover);
7839
+ }
7840
+
7841
+ .nv-link-low:visited {
7842
+ color: var(--color-interaction-link-low-text-visited);
7843
+ }
7844
+
7845
+ .nv-link-low.disabled {
7846
+ color: var(--color-interaction-link-high-text-disabled);
7847
+ text-decoration: none;
7848
+ }
7849
+
7850
+ .nv-link-high {
7851
+ color: var(--color-interaction-link-high-text);
7852
+ text-decoration: underline;
7853
+ }
7854
+
7855
+ .nv-link-high:hover {
7856
+ color: var(--color-interaction-link-high-text-hover);
7857
+ }
7858
+
7859
+ .nv-link-high:visited {
7860
+ color: var(--color-interaction-link-high-text-visited);
7861
+ }
7862
+
7863
+ .nv-link-high.disabled {
7864
+ color: var(--color-interaction-link-high-text-disabled);
7865
+ text-decoration: none;
7866
+ }
7867
+
7832
7868
  .nv-sidenav .nv-link, .nv-navbar .nv-link, .nv-tabs .nv-link, .nv-buttongroup .nv-link {
7833
7869
  display: flex;
7834
7870
  align-items: center;
@@ -7885,15 +7921,6 @@ h6 {
7885
7921
  background-color: var(--color-interaction-container-neutral-background-active);
7886
7922
  }
7887
7923
 
7888
- .nv-sidenav .collapsible .nv-link {
7889
- justify-content: space-between;
7890
- }
7891
-
7892
- .nv-sidenav .collapsible .nv-link .nv-iconbutton {
7893
- width: 20px !important;
7894
- height: 20px !important;
7895
- }
7896
-
7897
7924
  .nv-buttongroup {
7898
7925
  display: inline-flex;
7899
7926
  border-radius: var(--radius-rounded-md);
@@ -7920,27 +7947,6 @@ h6 {
7920
7947
  border-right-width: 0;
7921
7948
  }
7922
7949
 
7923
- .nv-link .nv-badge {
7924
- border-radius: var(--radius-rounded-full);
7925
- width: var(--spacing-5);
7926
- display: flex;
7927
- align-items: center;
7928
- justify-content: center;
7929
- font-size: var(--font-size-xs);
7930
- color: var(--color-feedback-neutral-high-icon);
7931
- background-color: var(--color-feedback-neutral-high-background);
7932
- }
7933
-
7934
- .nv-link.disabled {
7935
- opacity: 0.5;
7936
- cursor: not-allowed;
7937
- }
7938
-
7939
- .nv-link.disabled:hover {
7940
- color: var(--color-interaction-container-neutral-text);
7941
- background-color: transparent;
7942
- }
7943
-
7944
7950
  .hover\:bg-interaction-container-branded-high-hover:hover {
7945
7951
  background-color: var(--color-interaction-container-branded-high-background-hover);
7946
7952
  }
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);
@@ -499,13 +499,13 @@
499
499
  --color-focus-background: var(--color-level-00-background);
500
500
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
501
501
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
502
- --color-interaction-link-inverted-icon-inactive: var(--color-content-inverted-low-icon);
502
+ --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
503
503
  --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
504
- --color-interaction-link-low-text-inactive: var(--color-content-low-text);
504
+ --color-interaction-link-low-text-disabled: var(--color-content-low-text);
505
505
  --color-interaction-link-low-text: var(--color-content-high-text);
506
- --color-interaction-link-low-icon-inactive: var(--color-content-low-icon);
506
+ --color-interaction-link-low-icon-disabled: var(--color-content-low-icon);
507
507
  --color-interaction-link-low-icon: var(--color-content-high-text);
508
- --color-interaction-link-high-text-inactive: var(--color-content-low-text);
508
+ --color-interaction-link-high-text-disabled: var(--color-content-low-text);
509
509
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
510
510
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
511
511
  --color-interaction-container-neutral-text: var(--color-content-low-text);
@@ -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);
@@ -1066,13 +1066,13 @@
1066
1066
  --color-focus-background: var(--color-level-00-background);
1067
1067
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1068
1068
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1069
- --color-interaction-link-inverted-icon-inactive: var(--color-content-inverted-low-icon);
1069
+ --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
1070
1070
  --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
1071
- --color-interaction-link-low-text-inactive: var(--color-content-low-text);
1071
+ --color-interaction-link-low-text-disabled: var(--color-content-low-text);
1072
1072
  --color-interaction-link-low-text: var(--color-content-high-text);
1073
- --color-interaction-link-low-icon-inactive: var(--color-content-low-icon);
1073
+ --color-interaction-link-low-icon-disabled: var(--color-content-low-icon);
1074
1074
  --color-interaction-link-low-icon: var(--color-content-high-text);
1075
- --color-interaction-link-high-text-inactive: var(--color-content-low-text);
1075
+ --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1076
1076
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1077
1077
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1078
1078
  --color-interaction-container-neutral-text: var(--color-content-low-text);