nve-designsystem 3.9.3 → 3.9.4

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 (7) hide show
  1. package/css/nve.css +9 -3
  2. package/css/nve_dark.css +3 -2
  3. package/css/rme.css +9 -3
  4. package/css/rme_dark.css +3 -2
  5. package/css/varsom.css +8 -2
  6. package/css/varsom_dark.css +2 -1
  7. package/package.json +1 -1
package/css/nve.css CHANGED
@@ -38,7 +38,7 @@
38
38
  --color-shades-grey-500: #858b93;
39
39
  --color-shades-grey-600: #60656c;
40
40
  --color-shades-grey-700: #484c51;
41
- --color-shades-grey-800: #3c3f44;
41
+ --color-shades-grey-800: #303236;
42
42
  --color-shades-grey-850: #292b2e;
43
43
  --color-shades-grey-900: #222325;
44
44
  --color-shades-grey-950: #171a1c;
@@ -267,12 +267,13 @@
267
267
  --color-brand-border-primary: var(--color-shades-brand-500);
268
268
  --color-brand-border-secondary: var(--color-shades-brand-600);
269
269
  --color-brand-border-tertiary: var(--color-shades-brand-700);
270
+ --color-brand-border-emphasized: var(--color-shades-accent-400);
270
271
  --color-neutrals-background-canvas: var(--color-shades-grey-050);
271
272
  --color-neutrals-background-primary: var(--color-shades-grey-000);
272
273
  --color-neutrals-background-primary-contrast: var(--color-shades-grey-100);
273
274
  --color-neutrals-background-secondary: var(--color-shades-grey-150);
274
275
  --color-neutrals-background-secondary-dim: var(--color-shades-grey-850);
275
- --color-neutrals-background-tertiary-dim: var(--color-shades-grey-700);
276
+ --color-neutrals-background-tertiary-dim: var(--color-shades-grey-800);
276
277
  --color-neutrals-foreground-primary: var(--color-shades-grey-999);
277
278
  --color-neutrals-foreground-secondary: var(--color-shades-functional-neutralgrey-800);
278
279
  --color-neutrals-foreground-subtle: var(--color-shades-functional-neutralgrey-600);
@@ -595,6 +596,7 @@
595
596
  --sizing-2x-large: var(--dimension-24x);
596
597
  --sizing-device-page-min-width: var(--sizing-1024x);
597
598
  --sizing-device-page-max-width: var(--sizing-1599x);
599
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
598
600
  --sizing-device-content-max-width-large: var(--sizing-1800x);
599
601
  --sizing-device-content-max-width-medium: var(--sizing-1000x);
600
602
  --sizing-device-content-max-width-small: var(--sizing-572x);
@@ -800,13 +802,14 @@
800
802
  --sizing-2x-large: var(--dimension-24x);
801
803
  --sizing-device-page-min-width: var(--sizing-1600x);
802
804
  --sizing-device-page-max-width: var(--sizing-9999x);
805
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
803
806
  --sizing-device-content-max-width-large: var(--sizing-1800x);
804
807
  --sizing-device-content-max-width-medium: var(--sizing-1200x);
805
808
  --sizing-device-content-max-width-small: var(--sizing-588x);
806
809
  --sizing-device-content-max-width-x-small: var(--sizing-282x);
807
810
  --sizing-brand-logo-medium: var(--sizing-88x);
808
811
  --sizing-brand-illustration-medium: var(--sizing-40x);
809
- --sizing-image-large: var(--sizing-1200x);
812
+ --sizing-image-large: var(--sizing-1024x);
810
813
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
811
814
  --font-size-x-small: var(--dimension-4x); /** 14 px */
812
815
  --font-size-small: var(--dimension-4-5x); /** 16 px */
@@ -959,6 +962,7 @@
959
962
  --sizing-2x-large: var(--dimension-23x);
960
963
  --sizing-device-page-min-width: var(--sizing-764x);
961
964
  --sizing-device-page-max-width: var(--sizing-1023x);
965
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
962
966
  --sizing-device-content-max-width-large: var(--sizing-1800x);
963
967
  --sizing-device-content-max-width-medium: var(--sizing-800x);
964
968
  --sizing-device-content-max-width-small: var(--sizing-544x);
@@ -1118,6 +1122,7 @@
1118
1122
  --sizing-2x-large: var(--dimension-22x);
1119
1123
  --sizing-device-page-min-width: var(--sizing-390x);
1120
1124
  --sizing-device-page-max-width: var(--sizing-763x);
1125
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
1121
1126
  --sizing-device-content-max-width-large: var(--sizing-1800x);
1122
1127
  --sizing-device-content-max-width-medium: var(--sizing-600x);
1123
1128
  --sizing-device-content-max-width-small: var(--sizing-496x);
@@ -1277,6 +1282,7 @@
1277
1282
  --sizing-2x-large: var(--dimension-22x);
1278
1283
  --sizing-device-page-min-width: var(--sizing-320x);
1279
1284
  --sizing-device-page-max-width: var(--sizing-389x);
1285
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
1280
1286
  --sizing-device-content-max-width-large: var(--sizing-1800x);
1281
1287
  --sizing-device-content-max-width-medium: var(--sizing-366x);
1282
1288
  --sizing-device-content-max-width-small: var(--sizing-496x);
package/css/nve_dark.css CHANGED
@@ -38,7 +38,7 @@
38
38
  --color-shades-grey-500: #858b93;
39
39
  --color-shades-grey-600: #60656c;
40
40
  --color-shades-grey-700: #484c51;
41
- --color-shades-grey-800: #3c3f44;
41
+ --color-shades-grey-800: #303236;
42
42
  --color-shades-grey-850: #292b2e;
43
43
  --color-shades-grey-900: #222325;
44
44
  --color-shades-grey-950: #171a1c;
@@ -267,12 +267,13 @@
267
267
  --color-brand-border-primary: var(--color-shades-brand-100);
268
268
  --color-brand-border-secondary: var(--color-shades-brand-200);
269
269
  --color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */
270
+ --color-brand-border-emphasized: var(--color-shades-accent-400);
270
271
  --color-neutrals-background-canvas: var(--color-shades-grey-950);
271
272
  --color-neutrals-background-primary: var(--color-shades-grey-850);
272
273
  --color-neutrals-background-primary-contrast: var(--color-shades-grey-800);
273
274
  --color-neutrals-background-secondary: var(--color-shades-grey-700);
274
275
  --color-neutrals-background-secondary-dim: var(--color-shades-grey-850);
275
- --color-neutrals-background-tertiary-dim: var(--color-shades-grey-700);
276
+ --color-neutrals-background-tertiary-dim: var(--color-shades-grey-800);
276
277
  --color-neutrals-foreground-primary: var(--color-shades-grey-000);
277
278
  --color-neutrals-foreground-secondary: var(--color-shades-functional-neutralgrey-200);
278
279
  --color-neutrals-foreground-subtle: var(--color-shades-functional-neutralgrey-400);
package/css/rme.css CHANGED
@@ -38,7 +38,7 @@
38
38
  --color-shades-grey-500: #758ba3;
39
39
  --color-shades-grey-600: #516579;
40
40
  --color-shades-grey-700: #405163;
41
- --color-shades-grey-800: #303d4c;
41
+ --color-shades-grey-800: #2b3445;
42
42
  --color-shades-grey-850: #1d2834;
43
43
  --color-shades-grey-900: #141e29;
44
44
  --color-shades-grey-950: #0f1926;
@@ -267,12 +267,13 @@
267
267
  --color-brand-border-primary: var(--color-shades-brand-500);
268
268
  --color-brand-border-secondary: var(--color-shades-brand-600);
269
269
  --color-brand-border-tertiary: var(--color-shades-brand-700);
270
+ --color-brand-border-emphasized: var(--color-shades-accent-400);
270
271
  --color-neutrals-background-canvas: var(--color-shades-grey-050);
271
272
  --color-neutrals-background-primary: var(--color-shades-grey-000);
272
273
  --color-neutrals-background-primary-contrast: var(--color-shades-grey-100);
273
274
  --color-neutrals-background-secondary: var(--color-shades-grey-150);
274
275
  --color-neutrals-background-secondary-dim: var(--color-shades-grey-850);
275
- --color-neutrals-background-tertiary-dim: var(--color-shades-grey-700);
276
+ --color-neutrals-background-tertiary-dim: var(--color-shades-grey-800);
276
277
  --color-neutrals-foreground-primary: var(--color-shades-grey-999);
277
278
  --color-neutrals-foreground-secondary: var(--color-shades-functional-neutralgrey-800);
278
279
  --color-neutrals-foreground-subtle: var(--color-shades-functional-neutralgrey-600);
@@ -595,6 +596,7 @@
595
596
  --sizing-2x-large: var(--dimension-24x);
596
597
  --sizing-device-page-min-width: var(--sizing-1024x);
597
598
  --sizing-device-page-max-width: var(--sizing-1599x);
599
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
598
600
  --sizing-device-content-max-width-large: var(--sizing-1800x);
599
601
  --sizing-device-content-max-width-medium: var(--sizing-1000x);
600
602
  --sizing-device-content-max-width-small: var(--sizing-572x);
@@ -800,13 +802,14 @@
800
802
  --sizing-2x-large: var(--dimension-24x);
801
803
  --sizing-device-page-min-width: var(--sizing-1600x);
802
804
  --sizing-device-page-max-width: var(--sizing-9999x);
805
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
803
806
  --sizing-device-content-max-width-large: var(--sizing-1800x);
804
807
  --sizing-device-content-max-width-medium: var(--sizing-1200x);
805
808
  --sizing-device-content-max-width-small: var(--sizing-588x);
806
809
  --sizing-device-content-max-width-x-small: var(--sizing-282x);
807
810
  --sizing-brand-logo-medium: var(--sizing-88x);
808
811
  --sizing-brand-illustration-medium: var(--sizing-40x);
809
- --sizing-image-large: var(--sizing-1200x);
812
+ --sizing-image-large: var(--sizing-1024x);
810
813
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
811
814
  --font-size-x-small: var(--dimension-4x); /** 14 px */
812
815
  --font-size-small: var(--dimension-4-5x); /** 16 px */
@@ -959,6 +962,7 @@
959
962
  --sizing-2x-large: var(--dimension-23x);
960
963
  --sizing-device-page-min-width: var(--sizing-764x);
961
964
  --sizing-device-page-max-width: var(--sizing-1023x);
965
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
962
966
  --sizing-device-content-max-width-large: var(--sizing-1800x);
963
967
  --sizing-device-content-max-width-medium: var(--sizing-800x);
964
968
  --sizing-device-content-max-width-small: var(--sizing-544x);
@@ -1118,6 +1122,7 @@
1118
1122
  --sizing-2x-large: var(--dimension-22x);
1119
1123
  --sizing-device-page-min-width: var(--sizing-390x);
1120
1124
  --sizing-device-page-max-width: var(--sizing-763x);
1125
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
1121
1126
  --sizing-device-content-max-width-large: var(--sizing-1800x);
1122
1127
  --sizing-device-content-max-width-medium: var(--sizing-600x);
1123
1128
  --sizing-device-content-max-width-small: var(--sizing-496x);
@@ -1277,6 +1282,7 @@
1277
1282
  --sizing-2x-large: var(--dimension-22x);
1278
1283
  --sizing-device-page-min-width: var(--sizing-320x);
1279
1284
  --sizing-device-page-max-width: var(--sizing-389x);
1285
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
1280
1286
  --sizing-device-content-max-width-large: var(--sizing-1800x);
1281
1287
  --sizing-device-content-max-width-medium: var(--sizing-366x);
1282
1288
  --sizing-device-content-max-width-small: var(--sizing-496x);
package/css/rme_dark.css CHANGED
@@ -38,7 +38,7 @@
38
38
  --color-shades-grey-500: #758ba3;
39
39
  --color-shades-grey-600: #516579;
40
40
  --color-shades-grey-700: #405163;
41
- --color-shades-grey-800: #303d4c;
41
+ --color-shades-grey-800: #2b3445;
42
42
  --color-shades-grey-850: #1d2834;
43
43
  --color-shades-grey-900: #141e29;
44
44
  --color-shades-grey-950: #0f1926;
@@ -267,12 +267,13 @@
267
267
  --color-brand-border-primary: var(--color-shades-brand-100);
268
268
  --color-brand-border-secondary: var(--color-shades-brand-200);
269
269
  --color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */
270
+ --color-brand-border-emphasized: var(--color-shades-accent-400);
270
271
  --color-neutrals-background-canvas: var(--color-shades-grey-950);
271
272
  --color-neutrals-background-primary: var(--color-shades-grey-850);
272
273
  --color-neutrals-background-primary-contrast: var(--color-shades-grey-800);
273
274
  --color-neutrals-background-secondary: var(--color-shades-grey-700);
274
275
  --color-neutrals-background-secondary-dim: var(--color-shades-grey-850);
275
- --color-neutrals-background-tertiary-dim: var(--color-shades-grey-700);
276
+ --color-neutrals-background-tertiary-dim: var(--color-shades-grey-800);
276
277
  --color-neutrals-foreground-primary: var(--color-shades-grey-000);
277
278
  --color-neutrals-foreground-secondary: var(--color-shades-functional-neutralgrey-200);
278
279
  --color-neutrals-foreground-subtle: var(--color-shades-functional-neutralgrey-400);
package/css/varsom.css CHANGED
@@ -267,12 +267,13 @@
267
267
  --color-brand-border-primary: var(--color-shades-brand-500);
268
268
  --color-brand-border-secondary: var(--color-shades-brand-600);
269
269
  --color-brand-border-tertiary: var(--color-shades-brand-700);
270
+ --color-brand-border-emphasized: var(--color-shades-accent-400);
270
271
  --color-neutrals-background-canvas: var(--color-shades-grey-050);
271
272
  --color-neutrals-background-primary: var(--color-shades-grey-000);
272
273
  --color-neutrals-background-primary-contrast: var(--color-shades-grey-100);
273
274
  --color-neutrals-background-secondary: var(--color-shades-grey-150);
274
275
  --color-neutrals-background-secondary-dim: var(--color-shades-grey-850);
275
- --color-neutrals-background-tertiary-dim: var(--color-shades-grey-700);
276
+ --color-neutrals-background-tertiary-dim: var(--color-shades-grey-800);
276
277
  --color-neutrals-foreground-primary: var(--color-shades-grey-999);
277
278
  --color-neutrals-foreground-secondary: var(--color-shades-functional-neutralgrey-800);
278
279
  --color-neutrals-foreground-subtle: var(--color-shades-functional-neutralgrey-600);
@@ -595,6 +596,7 @@
595
596
  --sizing-2x-large: var(--dimension-24x);
596
597
  --sizing-device-page-min-width: var(--sizing-1024x);
597
598
  --sizing-device-page-max-width: var(--sizing-1599x);
599
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
598
600
  --sizing-device-content-max-width-large: var(--sizing-1800x);
599
601
  --sizing-device-content-max-width-medium: var(--sizing-1000x);
600
602
  --sizing-device-content-max-width-small: var(--sizing-572x);
@@ -800,13 +802,14 @@
800
802
  --sizing-2x-large: var(--dimension-24x);
801
803
  --sizing-device-page-min-width: var(--sizing-1600x);
802
804
  --sizing-device-page-max-width: var(--sizing-9999x);
805
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
803
806
  --sizing-device-content-max-width-large: var(--sizing-1800x);
804
807
  --sizing-device-content-max-width-medium: var(--sizing-1200x);
805
808
  --sizing-device-content-max-width-small: var(--sizing-588x);
806
809
  --sizing-device-content-max-width-x-small: var(--sizing-282x);
807
810
  --sizing-brand-logo-medium: var(--sizing-88x);
808
811
  --sizing-brand-illustration-medium: var(--sizing-40x);
809
- --sizing-image-large: var(--sizing-1200x);
812
+ --sizing-image-large: var(--sizing-1024x);
810
813
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
811
814
  --font-size-x-small: var(--dimension-4x); /** 14 px */
812
815
  --font-size-small: var(--dimension-4-5x); /** 16 px */
@@ -959,6 +962,7 @@
959
962
  --sizing-2x-large: var(--dimension-23x);
960
963
  --sizing-device-page-min-width: var(--sizing-764x);
961
964
  --sizing-device-page-max-width: var(--sizing-1023x);
965
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
962
966
  --sizing-device-content-max-width-large: var(--sizing-1800x);
963
967
  --sizing-device-content-max-width-medium: var(--sizing-800x);
964
968
  --sizing-device-content-max-width-small: var(--sizing-544x);
@@ -1118,6 +1122,7 @@
1118
1122
  --sizing-2x-large: var(--dimension-22x);
1119
1123
  --sizing-device-page-min-width: var(--sizing-390x);
1120
1124
  --sizing-device-page-max-width: var(--sizing-763x);
1125
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
1121
1126
  --sizing-device-content-max-width-large: var(--sizing-1800x);
1122
1127
  --sizing-device-content-max-width-medium: var(--sizing-600x);
1123
1128
  --sizing-device-content-max-width-small: var(--sizing-496x);
@@ -1277,6 +1282,7 @@
1277
1282
  --sizing-2x-large: var(--dimension-22x);
1278
1283
  --sizing-device-page-min-width: var(--sizing-320x);
1279
1284
  --sizing-device-page-max-width: var(--sizing-389x);
1285
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
1280
1286
  --sizing-device-content-max-width-large: var(--sizing-1800x);
1281
1287
  --sizing-device-content-max-width-medium: var(--sizing-366x);
1282
1288
  --sizing-device-content-max-width-small: var(--sizing-496x);
package/css/varsom_dark.css CHANGED
@@ -267,12 +267,13 @@
267
267
  --color-brand-border-primary: var(--color-shades-brand-100);
268
268
  --color-brand-border-secondary: var(--color-shades-brand-200);
269
269
  --color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */
270
+ --color-brand-border-emphasized: var(--color-shades-accent-400);
270
271
  --color-neutrals-background-canvas: var(--color-shades-grey-950);
271
272
  --color-neutrals-background-primary: var(--color-shades-grey-850);
272
273
  --color-neutrals-background-primary-contrast: var(--color-shades-grey-800);
273
274
  --color-neutrals-background-secondary: var(--color-shades-grey-700);
274
275
  --color-neutrals-background-secondary-dim: var(--color-shades-grey-850);
275
- --color-neutrals-background-tertiary-dim: var(--color-shades-grey-700);
276
+ --color-neutrals-background-tertiary-dim: var(--color-shades-grey-800);
276
277
  --color-neutrals-foreground-primary: var(--color-shades-grey-000);
277
278
  --color-neutrals-foreground-secondary: var(--color-shades-functional-neutralgrey-200);
278
279
  --color-neutrals-foreground-subtle: var(--color-shades-functional-neutralgrey-400);
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  },
12
12
  "license": "MIT",
13
13
  "homepage": "https://github.com/NVE/Designsystem/",
14
- "version": "3.9.3",
14
+ "version": "3.9.4",
15
15
  "customElements": "custom-elements.json",
16
16
  "exports": {
17
17
  ".": {