@transferwise/neptune-css 0.0.0-experimental-ae1eca8 → 0.0.0-experimental-8b1de7a

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 (18) hide show
  1. package/dist/css/accordion.css +4 -0
  2. package/dist/css/button-groups.css +4 -0
  3. package/dist/css/decision.css +4 -0
  4. package/dist/css/dropdowns.css +8 -0
  5. package/dist/css/flex.css +4 -4
  6. package/dist/css/footer.css +8 -0
  7. package/dist/css/input-groups.css +8 -0
  8. package/dist/css/navbar.css +8 -0
  9. package/dist/css/neptune-addons.css +4 -4
  10. package/dist/css/neptune-core.css +70 -12
  11. package/dist/css/neptune.css +129 -24
  12. package/dist/css/popovers.css +8 -0
  13. package/dist/css/ring.css +0 -4
  14. package/dist/css/tooltip.css +4 -0
  15. package/dist/css/utilities.css +4 -4
  16. package/package.json +1 -1
  17. package/src/less/core/_typography.less +65 -9
  18. package/src/less/utilities/display.less +4 -4
package/dist/css/accordion.css CHANGED
@@ -74,6 +74,10 @@
74
74
  margin-top: var(--size-8);
75
75
  }
76
76
  .decision__content {
77
+ line-height: 1.5;
78
+ line-height: var(--line-height-body);
79
+ font-size: 1rem;
80
+ font-size: var(--font-size-16);
77
81
  font-size: 0.875rem;
78
82
  font-size: var(--font-size-14);
79
83
  line-height: 155%;
package/dist/css/button-groups.css CHANGED
@@ -397,6 +397,10 @@ html:not([dir="rtl"]) .btn-group > .btn-group:first-child:not(:last-child) > .dr
397
397
  max-height: 592px;
398
398
  }
399
399
  }.btn-group .secondary {
400
+ line-height: 1.5;
401
+ line-height: var(--line-height-body);
402
+ font-size: 1rem;
403
+ font-size: var(--font-size-16);
400
404
  font-size: 0.875rem;
401
405
  font-size: var(--font-size-14);
402
406
  line-height: 155%;
package/dist/css/decision.css CHANGED
@@ -33,6 +33,10 @@
33
33
  margin-top: 8px;
34
34
  margin-top: var(--size-8);
35
35
  }.decision__content {
36
+ line-height: 1.5;
37
+ line-height: var(--line-height-body);
38
+ font-size: 1rem;
39
+ font-size: var(--font-size-16);
36
40
  font-size: 0.875rem;
37
41
  font-size: var(--font-size-14);
38
42
  line-height: 155%;
package/dist/css/dropdowns.css CHANGED
@@ -12,6 +12,10 @@
12
12
  padding: 8px ;
13
13
  margin: 0;
14
14
  list-style: none;
15
+ line-height: 1.5;
16
+ line-height: var(--line-height-body);
17
+ font-size: 1rem;
18
+ font-size: var(--font-size-16);
15
19
  font-size: 0.875rem;
16
20
  font-size: var(--font-size-14);
17
21
  line-height: 155%;
@@ -71,6 +75,10 @@
71
75
  padding: var(--dropdown-link-padding);
72
76
  clear: both;
73
77
  border-radius: 3px;
78
+ line-height: 1.5;
79
+ line-height: var(--line-height-body);
80
+ font-size: 1rem;
81
+ font-size: var(--font-size-16);
74
82
  font-size: 0.875rem;
75
83
  font-size: var(--font-size-14);
76
84
  line-height: 155%;
package/dist/css/flex.css CHANGED
@@ -205,7 +205,7 @@
205
205
  .visible-xl-inline {
206
206
  display: none !important;
207
207
  }
208
- @media not all and (min-width: 576px) {
208
+ @media (max-width: 575px) {
209
209
  .hidden-xs {
210
210
  display: none !important;
211
211
  }
@@ -228,7 +228,7 @@
228
228
  display: inline-flex;
229
229
  }
230
230
  }
231
- @media (min-width: 576px) and not all and (min-width: 768px) {
231
+ @media (min-width: 576px) and (max-width: 767px) {
232
232
  .hidden-sm {
233
233
  display: none !important;
234
234
  }
@@ -251,7 +251,7 @@
251
251
  display: inline-flex;
252
252
  }
253
253
  }
254
- @media (min-width: 768px) and not all and (min-width: 992px) {
254
+ @media (min-width: 768px) and (max-width: 991px) {
255
255
  .hidden-md {
256
256
  display: none !important;
257
257
  }
@@ -274,7 +274,7 @@
274
274
  display: inline-flex;
275
275
  }
276
276
  }
277
- @media (min-width: 992px) and not all and (min-width: 1200px) {
277
+ @media (min-width: 992px) and (max-width: 1199px) {
278
278
  .hidden-lg {
279
279
  display: none !important;
280
280
  }
package/dist/css/footer.css CHANGED
@@ -3,6 +3,10 @@
3
3
  }.footer {
4
4
  background-color: rgba(134,167,189,0.10196);
5
5
  background-color: var(--color-background-neutral);
6
+ line-height: 1.5;
7
+ line-height: var(--line-height-body);
8
+ font-size: 1rem;
9
+ font-size: var(--font-size-16);
6
10
  font-size: 0.875rem;
7
11
  font-size: var(--font-size-14);
8
12
  line-height: 155%;
@@ -31,6 +35,10 @@
31
35
  .footer .link-icon {
32
36
  color: #5d7079;
33
37
  color: var(--color-content-secondary);
38
+ line-height: 1.5;
39
+ line-height: var(--line-height-body);
40
+ font-size: 1rem;
41
+ font-size: var(--font-size-16);
34
42
  font-size: 0.875rem;
35
43
  font-size: var(--font-size-14);
36
44
  line-height: 155%;
package/dist/css/input-groups.css CHANGED
@@ -316,6 +316,10 @@ fieldset[disabled] .checkbox label {
316
316
  border-radius: 3px;
317
317
  font-size: 14px;
318
318
  line-height: 24px;
319
+ line-height: 1.5;
320
+ line-height: var(--line-height-body);
321
+ font-size: 1rem;
322
+ font-size: var(--font-size-16);
319
323
  font-size: 0.875rem;
320
324
  font-size: var(--font-size-14);
321
325
  line-height: 155%;
@@ -2392,6 +2396,10 @@ select[multiple].input-group-lg > .input-group-btn .btn {
2392
2396
  border-radius: 3px;
2393
2397
  font-size: 14px;
2394
2398
  line-height: 24px;
2399
+ line-height: 1.5;
2400
+ line-height: var(--line-height-body);
2401
+ font-size: 1rem;
2402
+ font-size: var(--font-size-16);
2395
2403
  font-size: 0.875rem;
2396
2404
  font-size: var(--font-size-14);
2397
2405
  line-height: 155%;
package/dist/css/navbar.css CHANGED
@@ -82,6 +82,10 @@
82
82
  padding: 8px ;
83
83
  margin: 0;
84
84
  list-style: none;
85
+ line-height: 1.5;
86
+ line-height: var(--line-height-body);
87
+ font-size: 1rem;
88
+ font-size: var(--font-size-16);
85
89
  font-size: 0.875rem;
86
90
  font-size: var(--font-size-14);
87
91
  line-height: 155%;
@@ -151,6 +155,10 @@
151
155
  padding: var(--dropdown-link-padding);
152
156
  clear: both;
153
157
  border-radius: 3px;
158
+ line-height: 1.5;
159
+ line-height: var(--line-height-body);
160
+ font-size: 1rem;
161
+ font-size: var(--font-size-16);
154
162
  font-size: 0.875rem;
155
163
  font-size: var(--font-size-14);
156
164
  line-height: 155%;
package/dist/css/neptune-addons.css CHANGED
@@ -1242,7 +1242,7 @@ html:not([dir="rtl"]) .p-x-panel {
1242
1242
  .visible-xl-inline {
1243
1243
  display: none !important;
1244
1244
  }
1245
- @media not all and (min-width: 576px) {
1245
+ @media (max-width: 575px) {
1246
1246
  .hidden-xs {
1247
1247
  display: none !important;
1248
1248
  }
@@ -1265,7 +1265,7 @@ html:not([dir="rtl"]) .p-x-panel {
1265
1265
  display: inline-flex;
1266
1266
  }
1267
1267
  }
1268
- @media (min-width: 576px) and not all and (min-width: 768px) {
1268
+ @media (min-width: 576px) and (max-width: 767px) {
1269
1269
  .hidden-sm {
1270
1270
  display: none !important;
1271
1271
  }
@@ -1288,7 +1288,7 @@ html:not([dir="rtl"]) .p-x-panel {
1288
1288
  display: inline-flex;
1289
1289
  }
1290
1290
  }
1291
- @media (min-width: 768px) and not all and (min-width: 992px) {
1291
+ @media (min-width: 768px) and (max-width: 991px) {
1292
1292
  .hidden-md {
1293
1293
  display: none !important;
1294
1294
  }
@@ -1311,7 +1311,7 @@ html:not([dir="rtl"]) .p-x-panel {
1311
1311
  display: inline-flex;
1312
1312
  }
1313
1313
  }
1314
- @media (min-width: 992px) and not all and (min-width: 1200px) {
1314
+ @media (min-width: 992px) and (max-width: 1199px) {
1315
1315
  .hidden-lg {
1316
1316
  display: none !important;
1317
1317
  }
package/dist/css/neptune-core.css CHANGED
@@ -356,7 +356,6 @@ summary {
356
356
  .np-theme-navy {
357
357
  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
358
358
  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
359
- font-family: 'Inter', Helvetica, Arial, sans-serif;
360
359
  font-family: var(--font-family-regular);
361
360
  line-height: 1.5;
362
361
  line-height: var(--line-height-body);
@@ -364,7 +363,6 @@ summary {
364
363
  .np-theme-personal {
365
364
  --font-family-regular: "Inter", sans-serif, helvetica, arial, sans-serif !important;
366
365
  font-family: "Inter", sans-serif, helvetica, arial, sans-serif;
367
- font-family: 'Inter', Helvetica, Arial, sans-serif;
368
366
  font-family: var(--font-family-regular);
369
367
  font-feature-settings: "calt";
370
368
  --input-group-addon-padding: 12px 16px;
@@ -396,7 +394,6 @@ summary {
396
394
  html {
397
395
  font-size: 16px;
398
396
  font-size: var(--base-font-size);
399
- font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
400
397
  font-family: 'Inter', Helvetica, Arial, sans-serif;
401
398
  font-family: var(--font-family-regular);
402
399
  color: #5d7079;
@@ -919,7 +916,60 @@ h6,
919
916
  letter-spacing: -0.006em;
920
917
  line-height: 140%;
921
918
  }
922
- /* DEPRECATED: use .np-text-title-body instead */
919
+ .body-1,
920
+ .body-2,
921
+ .body-3,
922
+ .label,
923
+ .value,
924
+ .np-text-body-default {
925
+ font-weight: 400;
926
+ font-weight: var(--font-weight-regular);
927
+ line-height: 1.5;
928
+ line-height: var(--line-height-body);
929
+ }
930
+ .body-1,
931
+ .np-text-body-default,
932
+ .np-text-body-default-bold {
933
+ font-size: 1rem;
934
+ font-size: var(--font-size-16);
935
+ }
936
+ .np-text-body-default-bold {
937
+ font-weight: 800;
938
+ font-weight: var(--font-weight-bold);
939
+ }
940
+ .body-2 {
941
+ font-size: 0.875rem;
942
+ font-size: var(--font-size-14);
943
+ }
944
+ .body-3 {
945
+ font-size: 0.75rem;
946
+ font-size: var(--font-size-12);
947
+ }
948
+ .control-1,
949
+ .control-2 {
950
+ color: #0097c7;
951
+ color: var(--color-content-accent);
952
+ font-weight: 600;
953
+ font-weight: var(--font-weight-semi-bold);
954
+ line-height: 1.2;
955
+ line-height: var(--line-height-title);
956
+ }
957
+ .control-1 {
958
+ font-size: 1rem;
959
+ font-size: var(--font-size-16);
960
+ }
961
+ .control-2 {
962
+ font-size: 0.875rem;
963
+ font-size: var(--font-size-14);
964
+ }
965
+ .label {
966
+ font-size: 0.875rem;
967
+ font-size: var(--font-size-14);
968
+ }
969
+ .value {
970
+ font-size: 1rem;
971
+ font-size: var(--font-size-16);
972
+ }
923
973
  .lead {
924
974
  margin-bottom: 24px;
925
975
  margin-bottom: var(--size-24);
@@ -928,9 +978,21 @@ h6,
928
978
  line-height: 1.2;
929
979
  line-height: var(--line-height-title);
930
980
  }
981
+ small,
982
+ .small,
983
+ .body-2 {
984
+ font-size: 0.875rem;
985
+ font-size: var(--font-size-14);
986
+ line-height: 1.5;
987
+ line-height: var(--line-height-body);
988
+ }
931
989
  .tiny {
932
990
  color: #5d7079;
933
991
  color: var(--color-content-secondary);
992
+ font-size: 0.75rem;
993
+ font-size: var(--font-size-12);
994
+ line-height: 1.5;
995
+ line-height: var(--line-height-body);
934
996
  }
935
997
  /* DEPRECATED: use .np-text-body-default instead */
936
998
  /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -941,7 +1003,6 @@ h6,
941
1003
  .small,
942
1004
  .tiny,
943
1005
  body,
944
- small,
945
1006
  .np-text-body-default {
946
1007
  font-size: 0.875rem;
947
1008
  font-size: var(--font-size-14);
@@ -954,13 +1015,15 @@ small,
954
1015
  /* stylelint-disable-next-line selector-list-comma-newline-after */
955
1016
  .control-2,
956
1017
  .np-text-body-default-bold {
957
- font-size: 0.875rem;
958
- font-size: var(--font-size-14);
959
1018
  line-height: 155%;
960
1019
  letter-spacing: -0.006em;
961
1020
  font-weight: 600;
962
1021
  font-weight: var(--font-weight-semi-bold);
963
1022
  }
1023
+ .np-text-body-default-bold {
1024
+ font-size: 0.875rem;
1025
+ font-size: var(--font-size-14);
1026
+ }
964
1027
  /* DEPRECATED: use .np-text-body-large instead */
965
1028
  /* stylelint-disable-next-line selector-list-comma-newline-after */
966
1029
  .body-1,
@@ -1463,7 +1526,6 @@ a,
1463
1526
  font-weight: 600;
1464
1527
  font-weight: var(--font-weight-semi-bold);
1465
1528
  }
1466
- /* DEPRECATED: use `.np-text-display-*` instead */
1467
1529
  .display-1 {
1468
1530
  margin-bottom: 24px;
1469
1531
  margin-bottom: var(--size-24);
@@ -1477,7 +1539,6 @@ a,
1477
1539
  font-size: 6.5rem;
1478
1540
  }
1479
1541
  }
1480
- /* DEPRECATED: use `.np-text-display-*` instead */
1481
1542
  .display-2 {
1482
1543
  margin-bottom: 24px;
1483
1544
  margin-bottom: var(--size-24);
@@ -1491,7 +1552,6 @@ a,
1491
1552
  font-size: 5.5rem;
1492
1553
  }
1493
1554
  }
1494
- /* DEPRECATED: use `.np-text-display-*` instead */
1495
1555
  .display-3 {
1496
1556
  margin-bottom: 8px;
1497
1557
  margin-bottom: var(--size-8);
@@ -1504,7 +1564,6 @@ a,
1504
1564
  font-size: 4.5rem;
1505
1565
  }
1506
1566
  }
1507
- /* DEPRECATED: use `.np-text-display-*` instead */
1508
1567
  .display-4 {
1509
1568
  margin-bottom: 4px;
1510
1569
  margin-bottom: var(--size-4);
@@ -1518,7 +1577,6 @@ a,
1518
1577
  font-size: 3.5rem;
1519
1578
  }
1520
1579
  }
1521
- /* DEPRECATED: use `.np-text-display-*` instead */
1522
1580
  .display-5 {
1523
1581
  margin-bottom: 4px;
1524
1582
  margin-bottom: var(--size-4);
package/dist/css/neptune.css CHANGED
@@ -1501,7 +1501,6 @@ summary {
1501
1501
  .np-theme-navy {
1502
1502
  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
1503
1503
  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
1504
- font-family: 'Inter', Helvetica, Arial, sans-serif;
1505
1504
  font-family: var(--font-family-regular);
1506
1505
  line-height: 1.5;
1507
1506
  line-height: var(--line-height-body);
@@ -1510,7 +1509,6 @@ summary {
1510
1509
  .np-theme-personal {
1511
1510
  --font-family-regular: "Inter", sans-serif, helvetica, arial, sans-serif !important;
1512
1511
  font-family: "Inter", sans-serif, helvetica, arial, sans-serif;
1513
- font-family: 'Inter', Helvetica, Arial, sans-serif;
1514
1512
  font-family: var(--font-family-regular);
1515
1513
  font-feature-settings: "calt";
1516
1514
  --input-group-addon-padding: 12px 16px;
@@ -1543,7 +1541,6 @@ summary {
1543
1541
  html {
1544
1542
  font-size: 16px;
1545
1543
  font-size: var(--base-font-size);
1546
- font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
1547
1544
  font-family: 'Inter', Helvetica, Arial, sans-serif;
1548
1545
  font-family: var(--font-family-regular);
1549
1546
  color: #5d7079;
@@ -2147,7 +2144,69 @@ h6,
2147
2144
  line-height: 140%;
2148
2145
  }
2149
2146
 
2150
- /* DEPRECATED: use .np-text-title-body instead */
2147
+ .body-1,
2148
+ .body-2,
2149
+ .body-3,
2150
+ .label,
2151
+ .value,
2152
+ .np-text-body-default {
2153
+ font-weight: 400;
2154
+ font-weight: var(--font-weight-regular);
2155
+ line-height: 1.5;
2156
+ line-height: var(--line-height-body);
2157
+ }
2158
+
2159
+ .body-1,
2160
+ .np-text-body-default,
2161
+ .np-text-body-default-bold {
2162
+ font-size: 1rem;
2163
+ font-size: var(--font-size-16);
2164
+ }
2165
+
2166
+ .np-text-body-default-bold {
2167
+ font-weight: 800;
2168
+ font-weight: var(--font-weight-bold);
2169
+ }
2170
+
2171
+ .body-2 {
2172
+ font-size: 0.875rem;
2173
+ font-size: var(--font-size-14);
2174
+ }
2175
+
2176
+ .body-3 {
2177
+ font-size: 0.75rem;
2178
+ font-size: var(--font-size-12);
2179
+ }
2180
+
2181
+ .control-1,
2182
+ .control-2 {
2183
+ color: #0097c7;
2184
+ color: var(--color-content-accent);
2185
+ font-weight: 600;
2186
+ font-weight: var(--font-weight-semi-bold);
2187
+ line-height: 1.2;
2188
+ line-height: var(--line-height-title);
2189
+ }
2190
+
2191
+ .control-1 {
2192
+ font-size: 1rem;
2193
+ font-size: var(--font-size-16);
2194
+ }
2195
+
2196
+ .control-2 {
2197
+ font-size: 0.875rem;
2198
+ font-size: var(--font-size-14);
2199
+ }
2200
+
2201
+ .label {
2202
+ font-size: 0.875rem;
2203
+ font-size: var(--font-size-14);
2204
+ }
2205
+
2206
+ .value {
2207
+ font-size: 1rem;
2208
+ font-size: var(--font-size-16);
2209
+ }
2151
2210
 
2152
2211
  .lead {
2153
2212
  margin-bottom: 24px;
@@ -2158,9 +2217,22 @@ h6,
2158
2217
  line-height: var(--line-height-title);
2159
2218
  }
2160
2219
 
2220
+ small,
2221
+ .small,
2222
+ .body-2 {
2223
+ font-size: 0.875rem;
2224
+ font-size: var(--font-size-14);
2225
+ line-height: 1.5;
2226
+ line-height: var(--line-height-body);
2227
+ }
2228
+
2161
2229
  .tiny {
2162
2230
  color: #5d7079;
2163
2231
  color: var(--color-content-secondary);
2232
+ font-size: 0.75rem;
2233
+ font-size: var(--font-size-12);
2234
+ line-height: 1.5;
2235
+ line-height: var(--line-height-body);
2164
2236
  }
2165
2237
 
2166
2238
  /* DEPRECATED: use .np-text-body-default instead */
@@ -2174,7 +2246,6 @@ h6,
2174
2246
  .small,
2175
2247
  .tiny,
2176
2248
  body,
2177
- small,
2178
2249
  .np-text-body-default {
2179
2250
  font-size: 0.875rem;
2180
2251
  font-size: var(--font-size-14);
@@ -2190,14 +2261,17 @@ small,
2190
2261
 
2191
2262
  .control-2,
2192
2263
  .np-text-body-default-bold {
2193
- font-size: 0.875rem;
2194
- font-size: var(--font-size-14);
2195
2264
  line-height: 155%;
2196
2265
  letter-spacing: -0.006em;
2197
2266
  font-weight: 600;
2198
2267
  font-weight: var(--font-weight-semi-bold);
2199
2268
  }
2200
2269
 
2270
+ .np-text-body-default-bold {
2271
+ font-size: 0.875rem;
2272
+ font-size: var(--font-size-14);
2273
+ }
2274
+
2201
2275
  /* DEPRECATED: use .np-text-body-large instead */
2202
2276
 
2203
2277
  /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -2727,8 +2801,6 @@ a,
2727
2801
  font-weight: var(--font-weight-semi-bold);
2728
2802
  }
2729
2803
 
2730
- /* DEPRECATED: use `.np-text-display-*` instead */
2731
-
2732
2804
  .display-1 {
2733
2805
  margin-bottom: 24px;
2734
2806
  margin-bottom: var(--size-24);
@@ -2744,8 +2816,6 @@ a,
2744
2816
  }
2745
2817
  }
2746
2818
 
2747
- /* DEPRECATED: use `.np-text-display-*` instead */
2748
-
2749
2819
  .display-2 {
2750
2820
  margin-bottom: 24px;
2751
2821
  margin-bottom: var(--size-24);
@@ -2761,8 +2831,6 @@ a,
2761
2831
  }
2762
2832
  }
2763
2833
 
2764
- /* DEPRECATED: use `.np-text-display-*` instead */
2765
-
2766
2834
  .display-3 {
2767
2835
  margin-bottom: 8px;
2768
2836
  margin-bottom: var(--size-8);
@@ -2777,8 +2845,6 @@ a,
2777
2845
  }
2778
2846
  }
2779
2847
 
2780
- /* DEPRECATED: use `.np-text-display-*` instead */
2781
-
2782
2848
  .display-4 {
2783
2849
  margin-bottom: 4px;
2784
2850
  margin-bottom: var(--size-4);
@@ -2794,8 +2860,6 @@ a,
2794
2860
  }
2795
2861
  }
2796
2862
 
2797
- /* DEPRECATED: use `.np-text-display-*` instead */
2798
-
2799
2863
  .display-5 {
2800
2864
  margin-bottom: 4px;
2801
2865
  margin-bottom: var(--size-4);
@@ -4061,7 +4125,7 @@ html:not([dir="rtl"]) .p-x-panel {
4061
4125
  display: none !important;
4062
4126
  }
4063
4127
 
4064
- @media not all and (min-width: 576px) {
4128
+ @media (max-width: 575px) {
4065
4129
  .hidden-xs {
4066
4130
  display: none !important;
4067
4131
  }
@@ -4086,7 +4150,7 @@ html:not([dir="rtl"]) .p-x-panel {
4086
4150
  }
4087
4151
  }
4088
4152
 
4089
- @media (min-width: 576px) and not all and (min-width: 768px) {
4153
+ @media (min-width: 576px) and (max-width: 767px) {
4090
4154
  .hidden-sm {
4091
4155
  display: none !important;
4092
4156
  }
@@ -4111,7 +4175,7 @@ html:not([dir="rtl"]) .p-x-panel {
4111
4175
  }
4112
4176
  }
4113
4177
 
4114
- @media (min-width: 768px) and not all and (min-width: 992px) {
4178
+ @media (min-width: 768px) and (max-width: 991px) {
4115
4179
  .hidden-md {
4116
4180
  display: none !important;
4117
4181
  }
@@ -4136,7 +4200,7 @@ html:not([dir="rtl"]) .p-x-panel {
4136
4200
  }
4137
4201
  }
4138
4202
 
4139
- @media (min-width: 992px) and not all and (min-width: 1200px) {
4203
+ @media (min-width: 992px) and (max-width: 1199px) {
4140
4204
  .hidden-lg {
4141
4205
  display: none !important;
4142
4206
  }
@@ -7534,6 +7598,10 @@ html:not([dir="rtl"]) .btn-group .btn + .btn-primary {
7534
7598
  }
7535
7599
 
7536
7600
  .btn-group .secondary {
7601
+ line-height: 1.5;
7602
+ line-height: var(--line-height-body);
7603
+ font-size: 1rem;
7604
+ font-size: var(--font-size-16);
7537
7605
  font-size: 0.875rem;
7538
7606
  font-size: var(--font-size-14);
7539
7607
  line-height: 155%;
@@ -7909,6 +7977,10 @@ fieldset[disabled] .checkbox label {
7909
7977
  border-radius: 3px;
7910
7978
  font-size: 14px;
7911
7979
  line-height: 24px;
7980
+ line-height: 1.5;
7981
+ line-height: var(--line-height-body);
7982
+ font-size: 1rem;
7983
+ font-size: var(--font-size-16);
7912
7984
  font-size: 0.875rem;
7913
7985
  font-size: var(--font-size-14);
7914
7986
  line-height: 155%;
@@ -10268,6 +10340,10 @@ select[multiple].input-group-lg > .input-group-btn .btn {
10268
10340
  border-radius: 3px;
10269
10341
  font-size: 14px;
10270
10342
  line-height: 24px;
10343
+ line-height: 1.5;
10344
+ line-height: var(--line-height-body);
10345
+ font-size: 1rem;
10346
+ font-size: var(--font-size-16);
10271
10347
  font-size: 0.875rem;
10272
10348
  font-size: var(--font-size-14);
10273
10349
  line-height: 155%;
@@ -11246,7 +11322,6 @@ li > a > .currency-flag:first-child {
11246
11322
  outline: #37517e solid 2px;
11247
11323
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
11248
11324
  outline-offset: 0;
11249
- outline-offset: 2px;
11250
11325
  outline-offset: var(--ring-outline-offset);
11251
11326
  --ring-outline-offset: 0;
11252
11327
  }
@@ -11274,6 +11349,10 @@ li > a > .currency-flag:first-child {
11274
11349
  }
11275
11350
 
11276
11351
  .decision__content {
11352
+ line-height: 1.5;
11353
+ line-height: var(--line-height-body);
11354
+ font-size: 1rem;
11355
+ font-size: var(--font-size-16);
11277
11356
  font-size: 0.875rem;
11278
11357
  font-size: var(--font-size-14);
11279
11358
  line-height: 155%;
@@ -11375,6 +11454,10 @@ li > a > .currency-flag:first-child {
11375
11454
  padding: 8px ;
11376
11455
  margin: 0;
11377
11456
  list-style: none;
11457
+ line-height: 1.5;
11458
+ line-height: var(--line-height-body);
11459
+ font-size: 1rem;
11460
+ font-size: var(--font-size-16);
11378
11461
  font-size: 0.875rem;
11379
11462
  font-size: var(--font-size-14);
11380
11463
  line-height: 155%;
@@ -11455,6 +11538,10 @@ li > a > .currency-flag:first-child {
11455
11538
  padding: var(--dropdown-link-padding);
11456
11539
  clear: both;
11457
11540
  border-radius: 3px;
11541
+ line-height: 1.5;
11542
+ line-height: var(--line-height-body);
11543
+ font-size: 1rem;
11544
+ font-size: var(--font-size-16);
11458
11545
  font-size: 0.875rem;
11459
11546
  font-size: var(--font-size-14);
11460
11547
  line-height: 155%;
@@ -12878,6 +12965,10 @@ li > a > .currency-flag:first-child {
12878
12965
  .footer {
12879
12966
  background-color: rgba(134,167,189,0.10196);
12880
12967
  background-color: var(--color-background-neutral);
12968
+ line-height: 1.5;
12969
+ line-height: var(--line-height-body);
12970
+ font-size: 1rem;
12971
+ font-size: var(--font-size-16);
12881
12972
  font-size: 0.875rem;
12882
12973
  font-size: var(--font-size-14);
12883
12974
  line-height: 155%;
@@ -12912,6 +13003,10 @@ li > a > .currency-flag:first-child {
12912
13003
  .footer .link-icon {
12913
13004
  color: #5d7079;
12914
13005
  color: var(--color-content-secondary);
13006
+ line-height: 1.5;
13007
+ line-height: var(--line-height-body);
13008
+ font-size: 1rem;
13009
+ font-size: var(--font-size-16);
12915
13010
  font-size: 0.875rem;
12916
13011
  font-size: var(--font-size-14);
12917
13012
  line-height: 155%;
@@ -19397,7 +19492,6 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
19397
19492
  z-index: 1060;
19398
19493
  width: 276px;
19399
19494
  padding: 18px 24px;
19400
- font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
19401
19495
  font-family: 'Inter', Helvetica, Arial, sans-serif;
19402
19496
  font-family: var(--font-family-regular);
19403
19497
  font-style: normal;
@@ -19415,6 +19509,10 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
19415
19509
  word-break: normal;
19416
19510
  word-spacing: normal;
19417
19511
  word-wrap: normal;
19512
+ line-height: 1.5;
19513
+ line-height: var(--line-height-body);
19514
+ font-size: 1rem;
19515
+ font-size: var(--font-size-16);
19418
19516
  font-size: 0.875rem;
19419
19517
  font-size: var(--font-size-14);
19420
19518
  line-height: 155%;
@@ -19838,6 +19936,10 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
19838
19936
 
19839
19937
  .popover-content {
19840
19938
  padding: 0;
19939
+ line-height: 1.5;
19940
+ line-height: var(--line-height-body);
19941
+ font-size: 1rem;
19942
+ font-size: var(--font-size-16);
19841
19943
  font-size: 0.875rem;
19842
19944
  font-size: var(--font-size-14);
19843
19945
  line-height: 155%;
@@ -22325,7 +22427,6 @@ table col[class*="col-"] {
22325
22427
  position: absolute;
22326
22428
  z-index: 1070;
22327
22429
  display: block;
22328
- font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
22329
22430
  font-family: 'Inter', Helvetica, Arial, sans-serif;
22330
22431
  font-family: var(--font-family-regular);
22331
22432
  font-style: normal;
@@ -22387,6 +22488,10 @@ table col[class*="col-"] {
22387
22488
  }
22388
22489
 
22389
22490
  .tooltip-inner {
22491
+ line-height: 1.5;
22492
+ line-height: var(--line-height-body);
22493
+ font-size: 1rem;
22494
+ font-size: var(--font-size-16);
22390
22495
  font-size: 0.875rem;
22391
22496
  font-size: var(--font-size-14);
22392
22497
  line-height: 155%;
package/dist/css/popovers.css CHANGED
@@ -60,6 +60,10 @@
60
60
  word-break: normal;
61
61
  word-spacing: normal;
62
62
  word-wrap: normal;
63
+ line-height: 1.5;
64
+ line-height: var(--line-height-body);
65
+ font-size: 1rem;
66
+ font-size: var(--font-size-16);
63
67
  font-size: 0.875rem;
64
68
  font-size: var(--font-size-14);
65
69
  line-height: 155%;
@@ -351,6 +355,10 @@
351
355
  margin-top: var(--size-8);
352
356
  }.popover-content {
353
357
  padding: 0;
358
+ line-height: 1.5;
359
+ line-height: var(--line-height-body);
360
+ font-size: 1rem;
361
+ font-size: var(--font-size-16);
354
362
  font-size: 0.875rem;
355
363
  font-size: var(--font-size-14);
356
364
  line-height: 155%;
package/dist/css/ring.css CHANGED
@@ -11,8 +11,6 @@
11
11
  outline: none;
12
12
  }
13
13
  .focus-ring:focus-visible {
14
- outline: #37517e solid 2px;
15
- outline: var(--color-content-primary) solid 2px;
16
14
  outline: #37517e solid 2px;
17
15
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
18
16
  outline-offset: 2px;
@@ -40,8 +38,6 @@ dialog:focus-visible,
40
38
  input:focus-visible,
41
39
  select:focus-visible,
42
40
  textarea:focus-visible {
43
- outline: #37517e solid 2px;
44
- outline: var(--color-content-primary) solid 2px;
45
41
  outline: #37517e solid 2px;
46
42
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
47
43
  outline-offset: 2px;
package/dist/css/tooltip.css CHANGED
@@ -47,6 +47,10 @@
47
47
  margin-left: 0;
48
48
  margin-left: initial;
49
49
  }.tooltip-inner {
50
+ line-height: 1.5;
51
+ line-height: var(--line-height-body);
52
+ font-size: 1rem;
53
+ font-size: var(--font-size-16);
50
54
  font-size: 0.875rem;
51
55
  font-size: var(--font-size-14);
52
56
  line-height: 155%;
package/dist/css/utilities.css CHANGED
@@ -286,7 +286,7 @@ a.text-inverse:focus {
286
286
  .visible-xl-inline {
287
287
  display: none !important;
288
288
  }
289
- @media not all and (min-width: 576px) {
289
+ @media (max-width: 575px) {
290
290
  .hidden-xs {
291
291
  display: none !important;
292
292
  }
@@ -309,7 +309,7 @@ a.text-inverse:focus {
309
309
  display: inline-flex;
310
310
  }
311
311
  }
312
- @media (min-width: 576px) and not all and (min-width: 768px) {
312
+ @media (min-width: 576px) and (max-width: 767px) {
313
313
  .hidden-sm {
314
314
  display: none !important;
315
315
  }
@@ -332,7 +332,7 @@ a.text-inverse:focus {
332
332
  display: inline-flex;
333
333
  }
334
334
  }
335
- @media (min-width: 768px) and not all and (min-width: 992px) {
335
+ @media (min-width: 768px) and (max-width: 991px) {
336
336
  .hidden-md {
337
337
  display: none !important;
338
338
  }
@@ -355,7 +355,7 @@ a.text-inverse:focus {
355
355
  display: inline-flex;
356
356
  }
357
357
  }
358
- @media (min-width: 992px) and not all and (min-width: 1200px) {
358
+ @media (min-width: 992px) and (max-width: 1199px) {
359
359
  .hidden-lg {
360
360
  display: none !important;
361
361
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-css",
3
3
  "description": "Neptune CSS library",
4
- "version": "0.0.0-experimental-ae1eca8",
4
+ "version": "0.0.0-experimental-8b1de7a",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
package/src/less/core/_typography.less CHANGED
@@ -97,16 +97,74 @@ h6,
97
97
  line-height: 140%;
98
98
  }
99
99
 
100
- /* DEPRECATED: use .np-text-title-body instead */
100
+ .body-1,
101
+ .body-2,
102
+ .body-3,
103
+ .label,
104
+ .value,
105
+ .np-text-body-default {
106
+ font-weight: var(--font-weight-regular);
107
+ line-height: var(--line-height-body);
108
+ }
109
+
110
+ .body-1,
111
+ .np-text-body-default,
112
+ .np-text-body-default-bold {
113
+ font-size: var(--font-size-16);
114
+ }
115
+
116
+ .np-text-body-default-bold {
117
+ font-weight: var(--font-weight-bold);
118
+ }
119
+
120
+ .body-2 {
121
+ font-size: var(--font-size-14);
122
+ }
123
+
124
+ .body-3 {
125
+ font-size: var(--font-size-12);
126
+ }
127
+
128
+ .control-1,
129
+ .control-2 {
130
+ color: var(--color-content-accent);
131
+ font-weight: var(--font-weight-semi-bold);
132
+ line-height: var(--line-height-title);
133
+ }
134
+
135
+ .control-1 {
136
+ font-size: var(--font-size-16);
137
+ }
138
+
139
+ .control-2 {
140
+ font-size: var(--font-size-14);
141
+ }
142
+
143
+ .label {
144
+ font-size: var(--font-size-14);
145
+ }
146
+
147
+ .value {
148
+ font-size: var(--font-size-16);
149
+ }
150
+
101
151
  .lead {
102
152
  margin-bottom: var(--size-24);
103
153
  font-size: var(--font-size-20);
104
154
  line-height: var(--line-height-title);
105
155
  }
106
156
 
107
- // DEPRECATED: use .np-text-body-default instead
157
+ small,
158
+ .small,
159
+ .body-2 {
160
+ font-size: var(--font-size-14);
161
+ line-height: var(--line-height-body);
162
+ }
163
+
108
164
  .tiny {
109
165
  color: var(--color-content-secondary);
166
+ font-size: var(--font-size-12);
167
+ line-height: var(--line-height-body);
110
168
  }
111
169
 
112
170
  // BODY
@@ -114,7 +172,7 @@ h6,
114
172
  /* DEPRECATED: use .np-text-body-default instead */
115
173
  /* stylelint-disable-next-line selector-list-comma-newline-after */
116
174
  .body-2, .body-3, .label, .control-label, .small, .tiny,
117
- body, small,
175
+ body,
118
176
  .np-text-body-default {
119
177
  font-size: var(--font-size-14);
120
178
  line-height: 155%;
@@ -126,12 +184,15 @@ body, small,
126
184
  /* stylelint-disable-next-line selector-list-comma-newline-after */
127
185
  .control-2,
128
186
  .np-text-body-default-bold {
129
- font-size: var(--font-size-14);
130
187
  line-height: 155%;
131
188
  letter-spacing: -0.006em;
132
189
  font-weight: var(--font-weight-semi-bold);
133
190
  }
134
191
 
192
+ .np-text-body-default-bold {
193
+ font-size: var(--font-size-14);
194
+ }
195
+
135
196
  /* DEPRECATED: use .np-text-body-large instead */
136
197
  /* stylelint-disable-next-line selector-list-comma-newline-after */
137
198
  .body-1, .value,
@@ -374,7 +435,6 @@ a,
374
435
  }
375
436
  }
376
437
 
377
- /* DEPRECATED: use `.np-text-display-*` instead */
378
438
  .display-1 {
379
439
  margin-bottom: var(--size-24);
380
440
  /* stylelint-disable-next-line number-max-precision */
@@ -386,7 +446,6 @@ a,
386
446
  }
387
447
  }
388
448
 
389
- /* DEPRECATED: use `.np-text-display-*` instead */
390
449
  .display-2 {
391
450
  margin-bottom: var(--size-24);
392
451
  /* stylelint-disable-next-line number-max-precision */
@@ -398,7 +457,6 @@ a,
398
457
  }
399
458
  }
400
459
 
401
- /* DEPRECATED: use `.np-text-display-*` instead */
402
460
  .display-3 {
403
461
  margin-bottom: var(--size-8);
404
462
  font-size: 2.8rem;
@@ -409,7 +467,6 @@ a,
409
467
  }
410
468
  }
411
469
 
412
- /* DEPRECATED: use `.np-text-display-*` instead */
413
470
  .display-4 {
414
471
  margin-bottom: var(--size-4);
415
472
  /* stylelint-disable-next-line number-max-precision */
@@ -421,7 +478,6 @@ a,
421
478
  }
422
479
  }
423
480
 
424
- /* DEPRECATED: use `.np-text-display-*` instead */
425
481
  .display-5 {
426
482
  margin-bottom: var(--size-4);
427
483
  /* stylelint-disable-next-line number-max-precision */
package/src/less/utilities/display.less CHANGED
@@ -44,7 +44,7 @@
44
44
  display: none !important;
45
45
  }
46
46
 
47
- @media not all and (--screen-sm) {
47
+ @media (--screen-xs-max) {
48
48
  .hidden-xs {
49
49
  display: none !important;
50
50
  }
@@ -72,7 +72,7 @@
72
72
  display: inline-flex;
73
73
  }
74
74
 
75
- @media not all and (--screen-md) {
75
+ @media (--screen-sm-max) {
76
76
  .hidden-sm {
77
77
  display: none !important;
78
78
  }
@@ -101,7 +101,7 @@
101
101
  display: inline-flex;
102
102
  }
103
103
 
104
- @media not all and (--screen-lg) {
104
+ @media (--screen-md-max) {
105
105
  .hidden-md {
106
106
  display: none !important;
107
107
  }
@@ -130,7 +130,7 @@
130
130
  display: inline-flex;
131
131
  }
132
132
 
133
- @media not all and (--screen-xl) {
133
+ @media (--screen-lg-max) {
134
134
  .hidden-lg {
135
135
  display: none !important;
136
136
  }