nve-designsystem 4.6.0 → 4.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/css/nve.css +18 -3
  2. package/css/rme.css +18 -3
  3. package/css/varsom.css +18 -3
  4. package/package.json +2 -2
package/css/nve.css CHANGED
@@ -500,6 +500,8 @@
500
500
  --sizing-62x: 62px;
501
501
  --sizing-64x: 64px;
502
502
  --sizing-70x: 70px;
503
+ --sizing-72x: 72px;
504
+ --sizing-80x: 80px;
503
505
  --sizing-84x: 84px;
504
506
  --sizing-88x: 88px;
505
507
  --sizing-92x: 92px;
@@ -660,6 +662,7 @@
660
662
  --sizing-icon-medium: var(--sizing-32x);
661
663
  --sizing-icon-small: var(--sizing-24x);
662
664
  --sizing-icon-x-small: var(--sizing-20x);
665
+ --sizing-icon-2x-small: var(--sizing-18x);
663
666
  --sizing-fixed-sizing-2x-small: var(--dimension-4x);
664
667
  --sizing-fixed-sizing-x-small: var(--dimension-5x);
665
668
  --sizing-fixed-sizing-small: var(--dimension-6x);
@@ -680,7 +683,6 @@
680
683
  --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
681
684
  --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
682
685
  --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
683
- --font-size-small: var(--dimension-4-5x); /** 16 px */
684
686
  --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
685
687
  --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
686
688
  --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
@@ -712,6 +714,7 @@
712
714
  --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
713
715
  --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
714
716
  --font-size-x-small: var(--dimension-4x); /** 14 px */
717
+ --font-size-small: var(--dimension-4-5x); /** 16 px */
715
718
  --font-size-medium: var(--dimension-5x); /** 18 px */
716
719
  --font-size-large: var(--dimension-6x); /** 20 px */
717
720
  --font-size-x-large: var(--dimension-8x); /** 24 px */
@@ -747,6 +750,8 @@
747
750
  --sizing-62x: 62px;
748
751
  --sizing-64x: 64px;
749
752
  --sizing-70x: 70px;
753
+ --sizing-72x: 72px;
754
+ --sizing-80x: 80px;
750
755
  --sizing-84x: 84px;
751
756
  --sizing-88x: 88px;
752
757
  --sizing-92x: 92px;
@@ -900,6 +905,7 @@
900
905
  --sizing-icon-medium: var(--sizing-32x);
901
906
  --sizing-icon-small: var(--sizing-24x);
902
907
  --sizing-icon-x-small: var(--sizing-20x);
908
+ --sizing-icon-2x-small: var(--sizing-18x);
903
909
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
904
910
  --font-size-x-small: var(--dimension-4x); /** 14 px */
905
911
  --font-size-small: var(--dimension-4-5x); /** 16 px */
@@ -941,6 +947,8 @@
941
947
  --sizing-62x: 62px;
942
948
  --sizing-64x: 64px;
943
949
  --sizing-70x: 70px;
950
+ --sizing-72x: 72px;
951
+ --sizing-80x: 80px;
944
952
  --sizing-84x: 84px;
945
953
  --sizing-88x: 88px;
946
954
  --sizing-92x: 92px;
@@ -1081,7 +1089,7 @@
1081
1089
  --sizing-device-content-max-width-medium: var(--sizing-800x);
1082
1090
  --sizing-device-content-max-width-small: var(--sizing-544x);
1083
1091
  --sizing-device-content-max-width-x-small: var(--sizing-216x);
1084
- --sizing-brand-logo-medium: var(--sizing-64x);
1092
+ --sizing-brand-logo-medium: var(--sizing-80x);
1085
1093
  --sizing-brand-illustration-medium: var(--sizing-40x);
1086
1094
  --sizing-image-x-small: var(--sizing-48x);
1087
1095
  --sizing-image-large: var(--sizing-544x);
@@ -1094,6 +1102,7 @@
1094
1102
  --sizing-icon-medium: var(--sizing-32x);
1095
1103
  --sizing-icon-small: var(--sizing-24x);
1096
1104
  --sizing-icon-x-small: var(--sizing-20x);
1105
+ --sizing-icon-2x-small: var(--sizing-18x);
1097
1106
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
1098
1107
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1099
1108
  --font-size-small: var(--dimension-4x); /** 16 px */
@@ -1135,6 +1144,8 @@
1135
1144
  --sizing-62x: 62px;
1136
1145
  --sizing-64x: 64px;
1137
1146
  --sizing-70x: 70px;
1147
+ --sizing-72x: 72px;
1148
+ --sizing-80x: 80px;
1138
1149
  --sizing-84x: 84px;
1139
1150
  --sizing-88x: 88px;
1140
1151
  --sizing-92x: 92px;
@@ -1275,7 +1286,7 @@
1275
1286
  --sizing-device-content-max-width-medium: var(--sizing-600x);
1276
1287
  --sizing-device-content-max-width-small: var(--sizing-496x);
1277
1288
  --sizing-device-content-max-width-x-small: var(--sizing-496x);
1278
- --sizing-brand-logo-medium: var(--sizing-64x);
1289
+ --sizing-brand-logo-medium: var(--sizing-72x);
1279
1290
  --sizing-brand-illustration-medium: var(--sizing-40x);
1280
1291
  --sizing-image-x-small: var(--sizing-48x);
1281
1292
  --sizing-image-large: var(--sizing-390x);
@@ -1288,6 +1299,7 @@
1288
1299
  --sizing-icon-medium: var(--sizing-28x);
1289
1300
  --sizing-icon-small: var(--sizing-24x);
1290
1301
  --sizing-icon-x-small: var(--sizing-20x);
1302
+ --sizing-icon-2x-small: var(--sizing-18x);
1291
1303
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
1292
1304
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1293
1305
  --font-size-small: var(--dimension-4x); /** 16 px */
@@ -1329,6 +1341,8 @@
1329
1341
  --sizing-62x: 62px;
1330
1342
  --sizing-64x: 64px;
1331
1343
  --sizing-70x: 70px;
1344
+ --sizing-72x: 72px;
1345
+ --sizing-80x: 80px;
1332
1346
  --sizing-84x: 84px;
1333
1347
  --sizing-88x: 88px;
1334
1348
  --sizing-92x: 92px;
@@ -1482,6 +1496,7 @@
1482
1496
  --sizing-icon-medium: var(--sizing-28x);
1483
1497
  --sizing-icon-small: var(--sizing-24x);
1484
1498
  --sizing-icon-x-small: var(--sizing-20x);
1499
+ --sizing-icon-2x-small: var(--sizing-18x);
1485
1500
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
1486
1501
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1487
1502
  --font-size-small: var(--dimension-4x); /** 16 px */
package/css/rme.css CHANGED
@@ -500,6 +500,8 @@
500
500
  --sizing-62x: 62px;
501
501
  --sizing-64x: 64px;
502
502
  --sizing-70x: 70px;
503
+ --sizing-72x: 72px;
504
+ --sizing-80x: 80px;
503
505
  --sizing-84x: 84px;
504
506
  --sizing-88x: 88px;
505
507
  --sizing-92x: 92px;
@@ -660,6 +662,7 @@
660
662
  --sizing-icon-medium: var(--sizing-32x);
661
663
  --sizing-icon-small: var(--sizing-24x);
662
664
  --sizing-icon-x-small: var(--sizing-20x);
665
+ --sizing-icon-2x-small: var(--sizing-18x);
663
666
  --sizing-fixed-sizing-2x-small: var(--dimension-4x);
664
667
  --sizing-fixed-sizing-x-small: var(--dimension-5x);
665
668
  --sizing-fixed-sizing-small: var(--dimension-6x);
@@ -680,7 +683,6 @@
680
683
  --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
681
684
  --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
682
685
  --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
683
- --font-size-small: var(--dimension-4-5x); /** 16 px */
684
686
  --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
685
687
  --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
686
688
  --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
@@ -712,6 +714,7 @@
712
714
  --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
713
715
  --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
714
716
  --font-size-x-small: var(--dimension-4x); /** 14 px */
717
+ --font-size-small: var(--dimension-4-5x); /** 16 px */
715
718
  --font-size-medium: var(--dimension-5x); /** 18 px */
716
719
  --font-size-large: var(--dimension-6x); /** 20 px */
717
720
  --font-size-x-large: var(--dimension-8x); /** 24 px */
@@ -747,6 +750,8 @@
747
750
  --sizing-62x: 62px;
748
751
  --sizing-64x: 64px;
749
752
  --sizing-70x: 70px;
753
+ --sizing-72x: 72px;
754
+ --sizing-80x: 80px;
750
755
  --sizing-84x: 84px;
751
756
  --sizing-88x: 88px;
752
757
  --sizing-92x: 92px;
@@ -900,6 +905,7 @@
900
905
  --sizing-icon-medium: var(--sizing-32x);
901
906
  --sizing-icon-small: var(--sizing-24x);
902
907
  --sizing-icon-x-small: var(--sizing-20x);
908
+ --sizing-icon-2x-small: var(--sizing-18x);
903
909
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
904
910
  --font-size-x-small: var(--dimension-4x); /** 14 px */
905
911
  --font-size-small: var(--dimension-4-5x); /** 16 px */
@@ -941,6 +947,8 @@
941
947
  --sizing-62x: 62px;
942
948
  --sizing-64x: 64px;
943
949
  --sizing-70x: 70px;
950
+ --sizing-72x: 72px;
951
+ --sizing-80x: 80px;
944
952
  --sizing-84x: 84px;
945
953
  --sizing-88x: 88px;
946
954
  --sizing-92x: 92px;
@@ -1081,7 +1089,7 @@
1081
1089
  --sizing-device-content-max-width-medium: var(--sizing-800x);
1082
1090
  --sizing-device-content-max-width-small: var(--sizing-544x);
1083
1091
  --sizing-device-content-max-width-x-small: var(--sizing-216x);
1084
- --sizing-brand-logo-medium: var(--sizing-64x);
1092
+ --sizing-brand-logo-medium: var(--sizing-80x);
1085
1093
  --sizing-brand-illustration-medium: var(--sizing-40x);
1086
1094
  --sizing-image-x-small: var(--sizing-48x);
1087
1095
  --sizing-image-large: var(--sizing-544x);
@@ -1094,6 +1102,7 @@
1094
1102
  --sizing-icon-medium: var(--sizing-32x);
1095
1103
  --sizing-icon-small: var(--sizing-24x);
1096
1104
  --sizing-icon-x-small: var(--sizing-20x);
1105
+ --sizing-icon-2x-small: var(--sizing-18x);
1097
1106
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
1098
1107
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1099
1108
  --font-size-small: var(--dimension-4x); /** 16 px */
@@ -1135,6 +1144,8 @@
1135
1144
  --sizing-62x: 62px;
1136
1145
  --sizing-64x: 64px;
1137
1146
  --sizing-70x: 70px;
1147
+ --sizing-72x: 72px;
1148
+ --sizing-80x: 80px;
1138
1149
  --sizing-84x: 84px;
1139
1150
  --sizing-88x: 88px;
1140
1151
  --sizing-92x: 92px;
@@ -1275,7 +1286,7 @@
1275
1286
  --sizing-device-content-max-width-medium: var(--sizing-600x);
1276
1287
  --sizing-device-content-max-width-small: var(--sizing-496x);
1277
1288
  --sizing-device-content-max-width-x-small: var(--sizing-496x);
1278
- --sizing-brand-logo-medium: var(--sizing-64x);
1289
+ --sizing-brand-logo-medium: var(--sizing-72x);
1279
1290
  --sizing-brand-illustration-medium: var(--sizing-40x);
1280
1291
  --sizing-image-x-small: var(--sizing-48x);
1281
1292
  --sizing-image-large: var(--sizing-390x);
@@ -1288,6 +1299,7 @@
1288
1299
  --sizing-icon-medium: var(--sizing-28x);
1289
1300
  --sizing-icon-small: var(--sizing-24x);
1290
1301
  --sizing-icon-x-small: var(--sizing-20x);
1302
+ --sizing-icon-2x-small: var(--sizing-18x);
1291
1303
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
1292
1304
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1293
1305
  --font-size-small: var(--dimension-4x); /** 16 px */
@@ -1329,6 +1341,8 @@
1329
1341
  --sizing-62x: 62px;
1330
1342
  --sizing-64x: 64px;
1331
1343
  --sizing-70x: 70px;
1344
+ --sizing-72x: 72px;
1345
+ --sizing-80x: 80px;
1332
1346
  --sizing-84x: 84px;
1333
1347
  --sizing-88x: 88px;
1334
1348
  --sizing-92x: 92px;
@@ -1482,6 +1496,7 @@
1482
1496
  --sizing-icon-medium: var(--sizing-28x);
1483
1497
  --sizing-icon-small: var(--sizing-24x);
1484
1498
  --sizing-icon-x-small: var(--sizing-20x);
1499
+ --sizing-icon-2x-small: var(--sizing-18x);
1485
1500
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
1486
1501
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1487
1502
  --font-size-small: var(--dimension-4x); /** 16 px */
package/css/varsom.css CHANGED
@@ -500,6 +500,8 @@
500
500
  --sizing-62x: 62px;
501
501
  --sizing-64x: 64px;
502
502
  --sizing-70x: 70px;
503
+ --sizing-72x: 72px;
504
+ --sizing-80x: 80px;
503
505
  --sizing-84x: 84px;
504
506
  --sizing-88x: 88px;
505
507
  --sizing-92x: 92px;
@@ -660,6 +662,7 @@
660
662
  --sizing-icon-medium: var(--sizing-32x);
661
663
  --sizing-icon-small: var(--sizing-24x);
662
664
  --sizing-icon-x-small: var(--sizing-20x);
665
+ --sizing-icon-2x-small: var(--sizing-18x);
663
666
  --sizing-fixed-sizing-2x-small: var(--dimension-4x);
664
667
  --sizing-fixed-sizing-x-small: var(--dimension-5x);
665
668
  --sizing-fixed-sizing-small: var(--dimension-6x);
@@ -680,7 +683,6 @@
680
683
  --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/1.4 var(--font-family-primary-family);
681
684
  --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
682
685
  --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/1.5 var(--font-family-primary-family);
683
- --font-size-small: var(--dimension-4-5x); /** 16 px */
684
686
  --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/1.5 var(--font-family-primary-family);
685
687
  --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/1.5 var(--font-family-primary-family);
686
688
  --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/1.5 var(--font-family-primary-family);
@@ -712,6 +714,7 @@
712
714
  --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
713
715
  --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/1.1 var(--font-family-primary-family);
714
716
  --font-size-x-small: var(--dimension-4x); /** 14 px */
717
+ --font-size-small: var(--dimension-4-5x); /** 16 px */
715
718
  --font-size-medium: var(--dimension-5x); /** 18 px */
716
719
  --font-size-large: var(--dimension-6x); /** 20 px */
717
720
  --font-size-x-large: var(--dimension-8x); /** 24 px */
@@ -747,6 +750,8 @@
747
750
  --sizing-62x: 62px;
748
751
  --sizing-64x: 64px;
749
752
  --sizing-70x: 70px;
753
+ --sizing-72x: 72px;
754
+ --sizing-80x: 80px;
750
755
  --sizing-84x: 84px;
751
756
  --sizing-88x: 88px;
752
757
  --sizing-92x: 92px;
@@ -900,6 +905,7 @@
900
905
  --sizing-icon-medium: var(--sizing-32x);
901
906
  --sizing-icon-small: var(--sizing-24x);
902
907
  --sizing-icon-x-small: var(--sizing-20x);
908
+ --sizing-icon-2x-small: var(--sizing-18x);
903
909
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
904
910
  --font-size-x-small: var(--dimension-4x); /** 14 px */
905
911
  --font-size-small: var(--dimension-4-5x); /** 16 px */
@@ -941,6 +947,8 @@
941
947
  --sizing-62x: 62px;
942
948
  --sizing-64x: 64px;
943
949
  --sizing-70x: 70px;
950
+ --sizing-72x: 72px;
951
+ --sizing-80x: 80px;
944
952
  --sizing-84x: 84px;
945
953
  --sizing-88x: 88px;
946
954
  --sizing-92x: 92px;
@@ -1081,7 +1089,7 @@
1081
1089
  --sizing-device-content-max-width-medium: var(--sizing-800x);
1082
1090
  --sizing-device-content-max-width-small: var(--sizing-544x);
1083
1091
  --sizing-device-content-max-width-x-small: var(--sizing-216x);
1084
- --sizing-brand-logo-medium: var(--sizing-64x);
1092
+ --sizing-brand-logo-medium: var(--sizing-80x);
1085
1093
  --sizing-brand-illustration-medium: var(--sizing-40x);
1086
1094
  --sizing-image-x-small: var(--sizing-48x);
1087
1095
  --sizing-image-large: var(--sizing-544x);
@@ -1094,6 +1102,7 @@
1094
1102
  --sizing-icon-medium: var(--sizing-32x);
1095
1103
  --sizing-icon-small: var(--sizing-24x);
1096
1104
  --sizing-icon-x-small: var(--sizing-20x);
1105
+ --sizing-icon-2x-small: var(--sizing-18x);
1097
1106
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
1098
1107
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1099
1108
  --font-size-small: var(--dimension-4x); /** 16 px */
@@ -1135,6 +1144,8 @@
1135
1144
  --sizing-62x: 62px;
1136
1145
  --sizing-64x: 64px;
1137
1146
  --sizing-70x: 70px;
1147
+ --sizing-72x: 72px;
1148
+ --sizing-80x: 80px;
1138
1149
  --sizing-84x: 84px;
1139
1150
  --sizing-88x: 88px;
1140
1151
  --sizing-92x: 92px;
@@ -1275,7 +1286,7 @@
1275
1286
  --sizing-device-content-max-width-medium: var(--sizing-600x);
1276
1287
  --sizing-device-content-max-width-small: var(--sizing-496x);
1277
1288
  --sizing-device-content-max-width-x-small: var(--sizing-496x);
1278
- --sizing-brand-logo-medium: var(--sizing-64x);
1289
+ --sizing-brand-logo-medium: var(--sizing-72x);
1279
1290
  --sizing-brand-illustration-medium: var(--sizing-40x);
1280
1291
  --sizing-image-x-small: var(--sizing-48x);
1281
1292
  --sizing-image-large: var(--sizing-390x);
@@ -1288,6 +1299,7 @@
1288
1299
  --sizing-icon-medium: var(--sizing-28x);
1289
1300
  --sizing-icon-small: var(--sizing-24x);
1290
1301
  --sizing-icon-x-small: var(--sizing-20x);
1302
+ --sizing-icon-2x-small: var(--sizing-18x);
1291
1303
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
1292
1304
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1293
1305
  --font-size-small: var(--dimension-4x); /** 16 px */
@@ -1329,6 +1341,8 @@
1329
1341
  --sizing-62x: 62px;
1330
1342
  --sizing-64x: 64px;
1331
1343
  --sizing-70x: 70px;
1344
+ --sizing-72x: 72px;
1345
+ --sizing-80x: 80px;
1332
1346
  --sizing-84x: 84px;
1333
1347
  --sizing-88x: 88px;
1334
1348
  --sizing-92x: 92px;
@@ -1482,6 +1496,7 @@
1482
1496
  --sizing-icon-medium: var(--sizing-28x);
1483
1497
  --sizing-icon-small: var(--sizing-24x);
1484
1498
  --sizing-icon-x-small: var(--sizing-20x);
1499
+ --sizing-icon-2x-small: var(--sizing-18x);
1485
1500
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
1486
1501
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1487
1502
  --font-size-small: var(--dimension-4x); /** 16 px */
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.6.0",
14
+ "version": "4.7.0",
15
15
  "customElements": "dist/custom-elements.json",
16
16
  "exports": {
17
17
  ".": {
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "devDependencies": {},
37
37
  "optionalDependencies": {
38
- "@rollup/rollup-linux-x64-gnu": "^4.61.1"
38
+ "@rollup/rollup-linux-x64-gnu": "^4.62.2"
39
39
  },
40
40
  "config": {
41
41
  "commitizen": {