@transferwise/neptune-css 14.3.48 → 14.3.50

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.
@@ -25,10 +25,8 @@ h6,
25
25
  line-height: var(--line-height-title);
26
26
  letter-spacing: 0;
27
27
 
28
- .np-theme-personal & {
29
- + p {
30
- margin-top: var(--size-8);
31
- }
28
+ + p {
29
+ margin-top: var(--size-8);
32
30
  }
33
31
  }
34
32
 
@@ -38,17 +36,11 @@ h6,
38
36
  .title-1,
39
37
  h1,
40
38
  .np-text-title-screen {
41
- margin-bottom: var(--size-8);
42
- font-size: var(--font-size-32);
43
- font-weight: var(--font-weight-bold);
44
-
45
- .np-theme-personal & {
46
- margin-bottom: initial;
47
- font-size: var(--font-size-30);
48
- letter-spacing: var(--letter-spacing-negative-xl);
49
- font-weight: var(--font-weight-semi-bold);
50
- line-height: var(--line-height-34);
51
- }
39
+ margin-bottom: initial;
40
+ font-size: var(--font-size-30);
41
+ font-weight: var(--font-weight-semi-bold);
42
+ letter-spacing: var(--letter-spacing-negative-xl);
43
+ line-height: var(--line-height-34);
52
44
  }
53
45
 
54
46
  /* DEPRECATED: use .np-text-title-section instead */
@@ -57,16 +49,11 @@ h1,
57
49
  .title-2,
58
50
  h2,
59
51
  .np-text-title-section {
60
- margin-bottom: var(--size-4);
61
- font-weight: var(--font-weight-bold);
52
+ margin-bottom: initial;
53
+ font-weight: var(--font-weight-semi-bold);
62
54
  font-size: var(--font-size-26);
63
-
64
- .np-theme-personal & {
65
- margin-bottom: initial;
66
- font-weight: var(--font-weight-semi-bold);
67
- letter-spacing: var(--letter-spacing-negative-md);
68
- line-height: var(--line-height-32);
69
- }
55
+ letter-spacing: var(--letter-spacing-negative-md);
56
+ line-height: var(--line-height-32);
70
57
  }
71
58
 
72
59
  /* DEPRECATED: use .np-text-title-subsection instead */
@@ -75,16 +62,11 @@ h2,
75
62
  .title-3,
76
63
  h3,
77
64
  .np-text-title-subsection {
78
- margin-bottom: 2px;
79
- font-size: var(--font-size-20);
65
+ margin-bottom: initial;
66
+ font-size: var(--font-size-22);
80
67
  font-weight: var(--font-weight-semi-bold);
81
-
82
- .np-theme-personal & {
83
- margin-bottom: initial;
84
- font-size: var(--font-size-22);
85
- letter-spacing: var(--letter-spacing-negative-md);
86
- line-height: var(--line-height-28);
87
- }
68
+ letter-spacing: var(--letter-spacing-negative-md);
69
+ line-height: var(--line-height-28);
88
70
  }
89
71
 
90
72
  /* DEPRECATED: use .np-text-title-body instead */
@@ -93,14 +75,10 @@ h3,
93
75
  .title-4,
94
76
  h4,
95
77
  .np-text-title-body {
96
- font-size: var(--font-size-16);
78
+ font-size: var(--font-size-18);
97
79
  font-weight: var(--font-weight-semi-bold);
98
-
99
- .np-theme-personal & {
100
- font-size: var(--font-size-18);
101
- letter-spacing: var(--letter-spacing-negative-xs);
102
- line-height: var(--line-height-24);
103
- }
80
+ letter-spacing: var(--letter-spacing-negative-xs);
81
+ line-height: var(--line-height-24);
104
82
  }
105
83
 
106
84
  /* DEPRECATED: use .np-text-title-group instead */
@@ -111,15 +89,10 @@ h4,
111
89
  h5,
112
90
  h6,
113
91
  .np-text-title-group {
114
- font-weight: var(--font-weight-semi-bold);
92
+ font-weight: var(--font-weight-medium);
115
93
  font-size: var(--font-size-14);
116
-
117
- .np-theme-personal & {
118
- font-weight: var(--font-weight-medium);
119
- font-size: var(--font-size-14);
120
- letter-spacing: var(--letter-spacing-md);
121
- line-height: var(--line-height-20);
122
- }
94
+ letter-spacing: var(--letter-spacing-md);
95
+ line-height: var(--line-height-20);
123
96
  }
124
97
 
125
98
  .body-1,
@@ -199,12 +172,10 @@ small,
199
172
  .body-2, .body-3, .label, .control-label, .small, .tiny,
200
173
  body,
201
174
  .np-text-body-default {
202
- .np-theme-personal & {
203
- font-size: var(--font-size-14);
204
- line-height: var(--line-height-22);
205
- letter-spacing: var(--letter-spacing-xs);
206
- font-weight: var(--font-weight-regular);
207
- }
175
+ font-size: var(--font-size-14);
176
+ line-height: var(--line-height-22);
177
+ letter-spacing: var(--letter-spacing-xs);
178
+ font-weight: var(--font-weight-regular);
208
179
  }
209
180
 
210
181
  /* DEPRECATED: use .np-text-body-default-bold instead */
@@ -213,61 +184,51 @@ body,
213
184
  b,
214
185
  strong,
215
186
  .np-text-body-default-bold {
216
- .np-theme-personal & {
217
- line-height: var(--line-height-22);
218
- letter-spacing: var(--letter-spacing-sm);
219
- font-weight: var(--font-weight-semi-bold);
220
- }
187
+ line-height: var(--line-height-22);
188
+ letter-spacing: var(--letter-spacing-sm);
189
+ font-weight: var(--font-weight-semi-bold);
221
190
  }
222
191
 
223
192
  .np-text-body-default-bold {
224
- .np-theme-personal & {
225
- font-size: var(--font-size-14);
226
- }
193
+ font-size: var(--font-size-14);
227
194
  }
228
195
 
229
196
  /* DEPRECATED: use .np-text-title-group instead */
230
197
  /* stylelint-disable-next-line selector-list-comma-newline-after */
231
198
  .body-1, .value,
232
199
  .np-text-body-large {
233
- .np-theme-personal & {
234
- font-weight: var(--font-weight-regular);
235
- font-size: var(--font-size-16);
236
- letter-spacing: var(--letter-spacing-negative-xxs);
237
- line-height: var(--line-height-24);
238
- }
200
+ font-weight: var(--font-weight-regular);
201
+ font-size: var(--font-size-16);
202
+ letter-spacing: var(--letter-spacing-negative-xxs);
203
+ line-height: var(--line-height-24);
239
204
  }
240
205
 
241
206
  /* DEPRECATED: use np-text-body-large-bold instead */
242
207
  /* stylelint-disable-next-line selector-list-comma-newline-after */
243
208
  .control-1,
244
209
  .np-text-body-large-bold {
245
- .np-theme-personal & {
246
- font-weight: var(--font-weight-semi-bold);
247
- font-size: var(--font-size-16);
248
- letter-spacing: var(--letter-spacing-xxs);
249
- line-height: var(--line-height-24);
250
- }
210
+ font-weight: var(--font-weight-semi-bold);
211
+ font-size: var(--font-size-16);
212
+ letter-spacing: var(--letter-spacing-xxs);
213
+ line-height: var(--line-height-24);
251
214
  }
252
215
 
253
216
  // LINK
254
217
 
255
- .np-theme-personal {
256
- a,
257
- .np-text-link-default,
258
- .np-text-link-large {
259
- font-weight: var(--font-weight-semi-bold);
260
- .link-underline();
261
- }
218
+ a,
219
+ .np-text-link-default,
220
+ .np-text-link-large {
221
+ font-weight: var(--font-weight-semi-bold);
222
+ .link-underline();
223
+ }
262
224
 
263
- .np-text-link-large {
264
- font-size: var(--font-size-16);
265
- letter-spacing: var(--letter-spacing-xs);
266
- }
225
+ .np-text-link-large {
226
+ font-size: var(--font-size-16);
227
+ letter-spacing: var(--letter-spacing-xs);
228
+ }
267
229
 
268
- .np-text-link-default {
269
- font-size: var(--font-size-14);
270
- }
230
+ .np-text-link-default {
231
+ font-size: var(--font-size-14);
271
232
  }
272
233
 
273
234
  // DISPLAY
@@ -333,205 +294,199 @@ strong,
333
294
  .np-text-display-large,
334
295
  .np-text-display-medium,
335
296
  .np-text-display-small {
336
- font-family: Averta, sans-serif;
337
-
338
- .np-theme-personal & {
339
- font-family: "Wise Sans", Inter, sans-serif;
340
- font-synthesis: none;
341
- }
297
+ font-family: "Wise Sans", Inter, sans-serif;
298
+ font-synthesis: none;
342
299
  }
343
300
 
344
301
  /* stylelint-disable-next-line no-duplicate-selectors */
345
- .np-theme-personal {
346
- .np-text-display-extra-large,
347
- .np-text-display-large,
348
- .np-text-display-medium,
349
- .np-text-display-small {
350
- letter-spacing: normal;
302
+ .np-text-display-extra-large,
303
+ .np-text-display-large,
304
+ .np-text-display-medium,
305
+ .np-text-display-small {
306
+ letter-spacing: normal;
351
307
 
352
- @supports (hyphenate-limit-chars: 1) {
353
- hyphens: auto;
354
- hyphenate-limit-chars: 7 3;
308
+ @supports (hyphenate-limit-chars: 1) {
309
+ hyphens: auto;
310
+ hyphenate-limit-chars: 7 3;
355
311
 
356
- @media (--screen-md) {
357
- hyphenate-limit-chars: 8 3;
358
- }
312
+ @media (--screen-md) {
313
+ hyphenate-limit-chars: 8 3;
314
+ }
359
315
 
360
- @media (--screen-lg) {
361
- hyphenate-limit-chars: 10 4 3;
362
- }
316
+ @media (--screen-lg) {
317
+ hyphenate-limit-chars: 10 4 3;
363
318
  }
319
+ }
364
320
 
365
- @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
366
- hyphens: auto;
367
- -webkit-hyphenate-limit-before: 3;
368
- -webkit-hyphenate-limit-after: 3;
321
+ @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
322
+ hyphens: auto;
323
+ -webkit-hyphenate-limit-before: 3;
324
+ -webkit-hyphenate-limit-after: 3;
369
325
 
370
- @media (--screen-lg) {
371
- -webkit-hyphenate-limit-before: 4;
372
- }
326
+ @media (--screen-lg) {
327
+ -webkit-hyphenate-limit-before: 4;
373
328
  }
374
329
  }
330
+ }
331
+
332
+ .np-text-display-extra-large {
333
+ .display-formatting(var(--size-120), normal);
334
+ }
335
+
336
+ .np-text-display-large {
337
+ .display-formatting(var(--size-88), normal);
338
+ .display-size-large-fluid-sm();
339
+ }
375
340
 
341
+ .np-text-display-medium {
342
+ .display-formatting(var(--size-60), normal);
343
+ .display-size-medium-fluid-sm();
344
+ }
345
+
346
+ .np-text-display-small {
347
+ .display-formatting(var(--size-40), normal);
348
+ }
349
+
350
+ :lang(en) {
376
351
  .np-text-display-extra-large {
377
- .display-formatting(var(--size-120), normal);
352
+ .display-formatting(var(--size-126), 0.85);
378
353
  }
379
354
 
380
355
  .np-text-display-large {
381
- .display-formatting(var(--size-88), normal);
382
- .display-size-large-fluid-sm();
356
+ .display-formatting(var(--size-96), 0.85);
357
+ .display-size-large-fluid();
383
358
  }
384
359
 
385
360
  .np-text-display-medium {
386
- .display-formatting(var(--size-60), normal);
387
- .display-size-medium-fluid-sm();
361
+ .display-formatting(var(--size-64), 0.85);
362
+ .display-size-medium-fluid();
388
363
  }
389
364
 
390
365
  .np-text-display-small {
391
- .display-formatting(var(--size-40), normal);
366
+ .display-formatting(var(--size-40), 0.85);
367
+ }
368
+ }
369
+
370
+ :lang(af),
371
+ :lang(sq),
372
+ :lang(eu),
373
+ :lang(bs),
374
+ :lang(ca),
375
+ :lang(kw),
376
+ :lang(hr),
377
+ :lang(cs),
378
+ :lang(da),
379
+ :lang(nl),
380
+ :lang(eo),
381
+ :lang(et),
382
+ :lang(fo),
383
+ :lang(fi),
384
+ :lang(fr),
385
+ :lang(gl),
386
+ :lang(lg),
387
+ :lang(de),
388
+ :lang(hu),
389
+ :lang(is),
390
+ :lang(se),
391
+ :lang(id),
392
+ :lang(in),
393
+ :lang(ga),
394
+ :lang(it),
395
+ :lang(kl),
396
+ :lang(ki),
397
+ :lang(rw),
398
+ :lang(lv),
399
+ :lang(lt),
400
+ :lang(lb),
401
+ :lang(mg),
402
+ :lang(ms),
403
+ :lang(mt),
404
+ :lang(gv),
405
+ :lang(mi),
406
+ :lang(nd),
407
+ :lang(nb),
408
+ :lang(nn),
409
+ :lang(om),
410
+ :lang(pl),
411
+ :lang(pt),
412
+ :lang(ro),
413
+ :lang(rm),
414
+ :lang(rn),
415
+ :lang(sg),
416
+ :lang(gd),
417
+ :lang(sr),
418
+ :lang(sn),
419
+ :lang(sk),
420
+ :lang(sl),
421
+ :lang(so),
422
+ :lang(es),
423
+ :lang(sw),
424
+ :lang(sv),
425
+ :lang(tr),
426
+ :lang(cy),
427
+ :lang(fy),
428
+ :lang(wo),
429
+ :lang(zu),
430
+ :lang(hsb),
431
+ :lang(gsw),
432
+ :lang(dsb),
433
+ :lang(fil) {
434
+ .np-text-display-extra-large {
435
+ .display-formatting(var(--size-126), 1.05);
392
436
  }
393
437
 
394
- :lang(en) {
395
- .np-text-display-extra-large {
396
- .display-formatting(var(--size-126), 0.85);
397
- }
398
-
399
- .np-text-display-large {
400
- .display-formatting(var(--size-96), 0.85);
401
- .display-size-large-fluid();
402
- }
403
-
404
- .np-text-display-medium {
405
- .display-formatting(var(--size-64), 0.85);
406
- .display-size-medium-fluid();
407
- }
408
-
409
- .np-text-display-small {
410
- .display-formatting(var(--size-40), 0.85);
411
- }
438
+ .np-text-display-large {
439
+ .display-formatting(var(--size-96), 1.05);
440
+ .display-size-large-fluid();
412
441
  }
413
442
 
414
- :lang(af),
415
- :lang(sq),
416
- :lang(eu),
417
- :lang(bs),
418
- :lang(ca),
419
- :lang(kw),
420
- :lang(hr),
421
- :lang(cs),
422
- :lang(da),
423
- :lang(nl),
424
- :lang(eo),
425
- :lang(et),
426
- :lang(fo),
427
- :lang(fi),
428
- :lang(fr),
429
- :lang(gl),
430
- :lang(lg),
431
- :lang(de),
432
- :lang(hu),
433
- :lang(is),
434
- :lang(se),
435
- :lang(id),
436
- :lang(in),
437
- :lang(ga),
438
- :lang(it),
439
- :lang(kl),
440
- :lang(ki),
441
- :lang(rw),
442
- :lang(lv),
443
- :lang(lt),
444
- :lang(lb),
445
- :lang(mg),
446
- :lang(ms),
447
- :lang(mt),
448
- :lang(gv),
449
- :lang(mi),
450
- :lang(nd),
451
- :lang(nb),
452
- :lang(nn),
453
- :lang(om),
454
- :lang(pl),
455
- :lang(pt),
456
- :lang(ro),
457
- :lang(rm),
458
- :lang(rn),
459
- :lang(sg),
460
- :lang(gd),
461
- :lang(sr),
462
- :lang(sn),
463
- :lang(sk),
464
- :lang(sl),
465
- :lang(so),
466
- :lang(es),
467
- :lang(sw),
468
- :lang(sv),
469
- :lang(tr),
470
- :lang(cy),
471
- :lang(fy),
472
- :lang(wo),
473
- :lang(zu),
474
- :lang(hsb),
475
- :lang(gsw),
476
- :lang(dsb),
477
- :lang(fil) {
478
- .np-text-display-extra-large {
479
- .display-formatting(var(--size-126), 1.05);
480
- }
481
-
482
- .np-text-display-large {
483
- .display-formatting(var(--size-96), 1.05);
484
- .display-size-large-fluid();
485
- }
486
-
487
- .np-text-display-medium {
488
- .display-formatting(var(--size-64), 1.05);
489
- .display-size-medium-fluid();
490
- }
491
-
492
- .np-text-display-small {
493
- .display-formatting(var(--size-40), 1.05);
494
- }
443
+ .np-text-display-medium {
444
+ .display-formatting(var(--size-64), 1.05);
445
+ .display-size-medium-fluid();
495
446
  }
496
447
 
497
- :lang(el),
498
- :lang(az),
499
- :lang(be),
500
- :lang(bs),
501
- :lang(bg),
502
- :lang(ce),
503
- :lang(mk),
504
- :lang(os),
505
- :lang(ru),
506
- :lang(sr),
507
- :lang(uk),
508
- :lang(uz),
509
- :lang(sah) {
510
- .np-text-display-extra-large {
511
- .display-formatting(var(--size-120),
512
- 1.2,
513
- var(--font-weight-semi-bold));
514
- }
448
+ .np-text-display-small {
449
+ .display-formatting(var(--size-40), 1.05);
450
+ }
451
+ }
452
+
453
+ :lang(el),
454
+ :lang(az),
455
+ :lang(be),
456
+ :lang(bs),
457
+ :lang(bg),
458
+ :lang(ce),
459
+ :lang(mk),
460
+ :lang(os),
461
+ :lang(ru),
462
+ :lang(sr),
463
+ :lang(uk),
464
+ :lang(uz),
465
+ :lang(sah) {
466
+ .np-text-display-extra-large {
467
+ .display-formatting(var(--size-120),
468
+ 1.2,
469
+ var(--font-weight-semi-bold));
470
+ }
515
471
 
516
- .np-text-display-large {
517
- .display-formatting(var(--size-88),
518
- 1.2,
519
- var(--font-weight-semi-bold));
520
- .display-size-large-fluid-sm();
521
- }
472
+ .np-text-display-large {
473
+ .display-formatting(var(--size-88),
474
+ 1.2,
475
+ var(--font-weight-semi-bold));
476
+ .display-size-large-fluid-sm();
477
+ }
522
478
 
523
- .np-text-display-medium {
524
- .display-formatting(var(--size-60),
525
- 1.2,
526
- var(--font-weight-semi-bold));
527
- .display-size-medium-fluid-sm();
528
- }
479
+ .np-text-display-medium {
480
+ .display-formatting(var(--size-60),
481
+ 1.2,
482
+ var(--font-weight-semi-bold));
483
+ .display-size-medium-fluid-sm();
484
+ }
529
485
 
530
- .np-text-display-small {
531
- .display-formatting(var(--size-40),
532
- 1.2,
533
- var(--font-weight-semi-bold));
534
- }
486
+ .np-text-display-small {
487
+ .display-formatting(var(--size-40),
488
+ 1.2,
489
+ var(--font-weight-semi-bold));
535
490
  }
536
491
  }
537
492
 
@@ -590,12 +545,7 @@ strong,
590
545
  }
591
546
 
592
547
  p {
593
- margin: 0 0 24px;
594
- margin: 0 0 var(--size-24);
595
-
596
- .np-theme-personal & {
597
- margin-bottom: var(--size-16);
598
- }
548
+ margin: 0 0 var(--size-16);
599
549
 
600
550
  + h1,
601
551
  + h2,
@@ -619,12 +569,8 @@ p {
619
569
  + .np-text-title-subsection,
620
570
  + .np-text-title-body,
621
571
  + .np-text-title-group {
622
- margin-top: var(--size-32);
623
-
624
- .np-theme-personal & {
625
- margin-top: 0;
626
- margin-bottom: var(--size-8);
627
- }
572
+ margin-top: 0;
573
+ margin-bottom: var(--size-8);
628
574
  }
629
575
  }
630
576
 
@@ -638,10 +584,6 @@ b {
638
584
  font-weight: var(--font-weight-semi-bold);
639
585
  letter-spacing: 0;
640
586
  color: var(--color-content-primary);
641
-
642
- .np-theme-personal & {
643
- color: var(--color-content-primary);
644
- }
645
587
  }
646
588
 
647
589
  mark,