nve-designsystem 4.0.3 → 4.2.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.
package/css/varsom.css CHANGED
@@ -294,34 +294,42 @@
294
294
  --color-interactive-background-primary-enabled: var(--color-shades-grey-950);
295
295
  --color-interactive-background-primary-hover: var(--color-shades-grey-600);
296
296
  --color-interactive-background-primary-pressed: var(--color-shades-grey-500);
297
- --color-interactive-background-primary-disabled: var(--color-shades-grey-950);
297
+ --color-interactive-background-primary-disabled: var(--color-shades-grey-300);
298
298
  --color-interactive-background-secondary-enabled: var(--color-shades-grey-150);
299
299
  --color-interactive-background-secondary-hover: var(--color-shades-grey-200);
300
300
  --color-interactive-background-secondary-pressed: var(--color-shades-grey-300);
301
- --color-interactive-background-secondary-disabled: var(--color-shades-grey-150);
302
- --color-interactive-background-tertiary-hover: var(--color-shades-grey-100);
303
- --color-interactive-background-tertiary-pressed: var(--color-shades-grey-150);
301
+ --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
302
+ --color-interactive-background-tertiary-enabled: var(--color-shades-grey-100);
303
+ --color-interactive-background-tertiary-hover: var(--color-shades-grey-150);
304
+ --color-interactive-background-tertiary-pressed: var(--color-shades-grey-200);
305
+ --color-interactive-background-tertiary-disabled: var(--color-shades-grey-100);
304
306
  --color-interactive-background-danger-enabled: var(--color-shades-functional-red-700);
305
307
  --color-interactive-background-danger-hover: var(--color-shades-functional-red-800);
306
308
  --color-interactive-background-danger-pressed: var(--color-shades-functional-red-850);
307
- --color-interactive-background-danger-disabled: var(--color-shades-functional-red-700);
309
+ --color-interactive-background-danger-disabled: var(--color-shades-functional-red-150);
308
310
  --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000);
309
311
  --color-interactive-foreground-primary-hover: var(--color-shades-grey-000);
310
- --color-interactive-foreground-primary-disabled: var(--color-shades-grey-000);
312
+ --color-interactive-foreground-primary-disabled: var(--color-shades-grey-100);
311
313
  --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950);
312
314
  --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950);
313
- --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-950);
315
+ --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-300);
316
+ --color-interactive-foreground-tertiary-enabled: var(--color-shades-grey-600);
317
+ --color-interactive-foreground-tertiary-hover: var(--color-shades-grey-950);
318
+ --color-interactive-foreground-tertiary-disabled: var(--color-shades-grey-300);
314
319
  --color-interactive-foreground-danger-enabled: var(--color-shades-grey-000);
315
- --color-interactive-foreground-danger-disabled: var(--color-shades-grey-000);
320
+ --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-000);
316
321
  --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700);
317
322
  --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950);
318
323
  --color-interactive-foreground-link-visited: var(--color-shades-grey-600);
319
324
  --color-interactive-border-primary-enabled: var(--color-shades-grey-999);
320
325
  --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050);
321
- --color-interactive-border-primary-disabled: var(--color-shades-grey-999);
326
+ --color-interactive-border-primary-disabled: var(--color-shades-grey-300);
322
327
  --color-interactive-border-secondary-enabled: var(--color-shades-grey-500);
323
328
  --color-interactive-border-secondary-hover: var(--color-shades-grey-950);
324
- --color-interactive-border-secondary-disabled: var(--color-shades-grey-500);
329
+ --color-interactive-border-secondary-disabled: var(--color-shades-grey-150);
330
+ --color-interactive-border-tertiary-enabled: var(--color-shades-grey-300);
331
+ --color-interactive-border-tertiary-hover: var(--color-shades-grey-600);
332
+ --color-interactive-border-tertiary-disabled: var(--color-shades-grey-150);
325
333
  --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500);
326
334
  --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */
327
335
  --color-feedback-background-default-info: var(--color-shades-functional-blue-100);
@@ -545,6 +553,7 @@
545
553
  --dimension-1x: 0.25rem; /** 4px */
546
554
  --dimension-1-5x: 0.375rem; /** 6px */
547
555
  --dimension-2x: 0.5rem; /** 8px */
556
+ --dimension-2-5x: 0.625rem; /** 10px */
548
557
  --dimension-3x: 0.75rem; /** 12px */
549
558
  --dimension-3-5x: 0.875rem; /** 14px */
550
559
  --dimension-4x: 1rem; /** 16px */
@@ -606,11 +615,13 @@
606
615
  --spacing-content-margin-top: var(--spacing-40x);
607
616
  --spacing-content-margin-bottom: var(--spacing-88x);
608
617
  --spacing-content-margin-left-right: var(--spacing-48x);
618
+ --spacing-fixed-spacing-3x-small: var(--dimension-05x);
609
619
  --spacing-fixed-spacing-2x-small: var(--dimension-1-5x);
610
620
  --spacing-fixed-spacing-x-small: var(--dimension-2x);
611
- --spacing-fixed-spacing-small: var(--dimension-4x);
612
- --spacing-fixed-spacing-medium: var(--dimension-6x);
613
- --spacing-fixed-spacing-large: var(--dimension-10x);
621
+ --spacing-fixed-spacing-small: var(--dimension-2-5x);
622
+ --spacing-fixed-spacing-medium: var(--dimension-4x);
623
+ --spacing-fixed-spacing-large: var(--dimension-6x);
624
+ --spacing-fixed-spacing-x-large: var(--dimension-10x);
614
625
  --sizing-4x-small: var(--dimension-2x);
615
626
  --sizing-3x-small: var(--dimension-4x);
616
627
  --sizing-2x-small: var(--dimension-6x);
@@ -789,6 +800,7 @@
789
800
  --dimension-1x: 0.25rem; /** 4px */
790
801
  --dimension-1-5x: 0.375rem; /** 6px */
791
802
  --dimension-2x: 0.5rem; /** 8px */
803
+ --dimension-2-5x: 0.625rem; /** 10px */
792
804
  --dimension-3x: 0.75rem; /** 12px */
793
805
  --dimension-3-5x: 0.875rem; /** 14px */
794
806
  --dimension-4x: 1rem; /** 16px */
@@ -982,6 +994,7 @@
982
994
  --dimension-1x: 0.25rem; /** 4px */
983
995
  --dimension-1-5x: 0.375rem; /** 6px */
984
996
  --dimension-2x: 0.5rem; /** 8px */
997
+ --dimension-2-5x: 0.625rem; /** 10px */
985
998
  --dimension-3x: 0.75rem; /** 12px */
986
999
  --dimension-3-5x: 0.875rem; /** 14px */
987
1000
  --dimension-4x: 1rem; /** 16px */
@@ -1175,6 +1188,7 @@
1175
1188
  --dimension-1x: 0.25rem; /** 4px */
1176
1189
  --dimension-1-5x: 0.375rem; /** 6px */
1177
1190
  --dimension-2x: 0.5rem; /** 8px */
1191
+ --dimension-2-5x: 0.625rem; /** 10px */
1178
1192
  --dimension-3x: 0.75rem; /** 12px */
1179
1193
  --dimension-3-5x: 0.875rem; /** 14px */
1180
1194
  --dimension-4x: 1rem; /** 16px */
@@ -1368,6 +1382,7 @@
1368
1382
  --dimension-1x: 0.25rem; /** 4px */
1369
1383
  --dimension-1-5x: 0.375rem; /** 6px */
1370
1384
  --dimension-2x: 0.5rem; /** 8px */
1385
+ --dimension-2-5x: 0.625rem; /** 10px */
1371
1386
  --dimension-3x: 0.75rem; /** 12px */
1372
1387
  --dimension-3-5x: 0.875rem; /** 14px */
1373
1388
  --dimension-4x: 1rem; /** 16px */
@@ -294,34 +294,42 @@
294
294
  --color-interactive-background-primary-enabled: var(--color-shades-grey-000);
295
295
  --color-interactive-background-primary-hover: var(--color-shades-grey-150);
296
296
  --color-interactive-background-primary-pressed: var(--color-shades-grey-200);
297
- --color-interactive-background-primary-disabled: var(--color-shades-grey-000);
297
+ --color-interactive-background-primary-disabled: var(--color-shades-grey-700);
298
298
  --color-interactive-background-secondary-enabled: var(--color-shades-grey-700);
299
299
  --color-interactive-background-secondary-hover: var(--color-shades-grey-600);
300
300
  --color-interactive-background-secondary-pressed: var(--color-shades-grey-500);
301
- --color-interactive-background-secondary-disabled: var(--color-shades-grey-700);
302
- --color-interactive-background-tertiary-hover: var(--color-shades-grey-700);
303
- --color-interactive-background-tertiary-pressed: var(--color-shades-grey-600);
301
+ --color-interactive-background-secondary-disabled: var(--color-shades-grey-800);
302
+ --color-interactive-background-tertiary-enabled: var(--color-shades-grey-700);
303
+ --color-interactive-background-tertiary-hover: var(--color-shades-grey-600);
304
+ --color-interactive-background-tertiary-pressed: var(--color-shades-grey-500);
305
+ --color-interactive-background-tertiary-disabled: var(--color-shades-grey-800);
304
306
  --color-interactive-background-danger-enabled: var(--color-shades-functional-red-500);
305
307
  --color-interactive-background-danger-hover: var(--color-shades-functional-red-400);
306
308
  --color-interactive-background-danger-pressed: var(--color-shades-functional-red-300);
307
- --color-interactive-background-danger-disabled: var(--color-shades-functional-red-500);
309
+ --color-interactive-background-danger-disabled: var(--color-shades-functional-red-900);
308
310
  --color-interactive-foreground-primary-enabled: var(--color-shades-grey-950);
309
311
  --color-interactive-foreground-primary-hover: var(--color-shades-grey-950);
310
- --color-interactive-foreground-primary-disabled: var(--color-shades-grey-950);
312
+ --color-interactive-foreground-primary-disabled: var(--color-shades-grey-600);
311
313
  --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000);
312
314
  --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000);
313
- --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-000);
315
+ --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-700);
316
+ --color-interactive-foreground-tertiary-enabled: var(--color-shades-grey-200);
317
+ --color-interactive-foreground-tertiary-hover: var(--color-shades-grey-050);
318
+ --color-interactive-foreground-tertiary-disabled: var(--color-shades-grey-700);
314
319
  --color-interactive-foreground-danger-enabled: var(--color-shades-grey-000);
315
- --color-interactive-foreground-danger-disabled: var(--color-shades-grey-000);
320
+ --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-800);
316
321
  --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400);
317
322
  --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-200);
318
323
  --color-interactive-foreground-link-visited: var(--color-shades-grey-200);
319
324
  --color-interactive-border-primary-enabled: var(--color-shades-grey-000);
320
325
  --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-100-050);
321
- --color-interactive-border-primary-disabled: var(--color-shades-grey-000);
326
+ --color-interactive-border-primary-disabled: var(--color-shades-grey-700);
322
327
  --color-interactive-border-secondary-enabled: var(--color-shades-grey-500);
323
328
  --color-interactive-border-secondary-hover: var(--color-shades-grey-000);
324
- --color-interactive-border-secondary-disabled: var(--color-shades-grey-600);
329
+ --color-interactive-border-secondary-disabled: var(--color-shades-grey-700);
330
+ --color-interactive-border-tertiary-enabled: var(--color-shades-grey-600);
331
+ --color-interactive-border-tertiary-hover: var(--color-shades-grey-400);
332
+ --color-interactive-border-tertiary-disabled: var(--color-shades-grey-700);
325
333
  --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500);
326
334
  --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800);
327
335
  --color-feedback-background-default-info: var(--color-shades-functional-blue-850);