nve-designsystem 4.1.0 → 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.
Files changed (8) hide show
  1. package/chunks/decorate.js +1 -1
  2. package/css/nve.css +20 -5
  3. package/css/nve_dark.css +10 -2
  4. package/css/rme.css +20 -5
  5. package/css/rme_dark.css +10 -2
  6. package/css/varsom.css +20 -5
  7. package/css/varsom_dark.css +10 -2
  8. package/package.json +1 -1
package/chunks/decorate.js CHANGED
@@ -94,7 +94,7 @@ function u(e) {
94
94
  } });
95
95
  }
96
96
  //#endregion
97
- //#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
97
+ //#region \0@oxc-project+runtime@0.128.0/helpers/decorate.js
98
98
  function d(e, t, n, r) {
99
99
  var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
100
100
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
package/css/nve.css CHANGED
@@ -299,8 +299,10 @@
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
301
  --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
302
- --color-interactive-background-tertiary-hover: var(--color-shades-grey-100);
303
- --color-interactive-background-tertiary-pressed: var(--color-shades-grey-150);
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);
@@ -311,6 +313,9 @@
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
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
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);
@@ -322,6 +327,9 @@
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
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 */
package/css/nve_dark.css CHANGED
@@ -299,8 +299,10 @@
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
301
  --color-interactive-background-secondary-disabled: var(--color-shades-grey-800);
302
- --color-interactive-background-tertiary-hover: var(--color-shades-grey-700);
303
- --color-interactive-background-tertiary-pressed: var(--color-shades-grey-600);
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);
@@ -311,6 +313,9 @@
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
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
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);
@@ -322,6 +327,9 @@
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
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);
package/css/rme.css CHANGED
@@ -299,8 +299,10 @@
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
301
  --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
302
- --color-interactive-background-tertiary-hover: var(--color-shades-grey-100);
303
- --color-interactive-background-tertiary-pressed: var(--color-shades-grey-150);
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);
@@ -311,6 +313,9 @@
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
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
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);
@@ -322,6 +327,9 @@
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
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 */
package/css/rme_dark.css CHANGED
@@ -299,8 +299,10 @@
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
301
  --color-interactive-background-secondary-disabled: var(--color-shades-grey-800);
302
- --color-interactive-background-tertiary-hover: var(--color-shades-grey-700);
303
- --color-interactive-background-tertiary-pressed: var(--color-shades-grey-600);
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);
@@ -311,6 +313,9 @@
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
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
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);
@@ -322,6 +327,9 @@
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
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);
package/css/varsom.css CHANGED
@@ -299,8 +299,10 @@
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
301
  --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
302
- --color-interactive-background-tertiary-hover: var(--color-shades-grey-100);
303
- --color-interactive-background-tertiary-pressed: var(--color-shades-grey-150);
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);
@@ -311,6 +313,9 @@
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
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
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);
@@ -322,6 +327,9 @@
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
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 */
package/css/varsom_dark.css CHANGED
@@ -299,8 +299,10 @@
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
301
  --color-interactive-background-secondary-disabled: var(--color-shades-grey-800);
302
- --color-interactive-background-tertiary-hover: var(--color-shades-grey-700);
303
- --color-interactive-background-tertiary-pressed: var(--color-shades-grey-600);
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);
@@ -311,6 +313,9 @@
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
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
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);
@@ -322,6 +327,9 @@
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
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);
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  },
12
12
  "license": "MIT",
13
13
  "homepage": "https://github.com/NVE/Designsystem/",
14
- "version": "4.1.0",
14
+ "version": "4.2.0",
15
15
  "customElements": "dist/custom-elements.json",
16
16
  "exports": {
17
17
  ".": {