@transferwise/neptune-css 14.20.1 → 14.21.1

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/dist/css/alerts.css +15 -26
  2. package/dist/css/neptune.css +41 -43
  3. package/dist/less/neptune-tokens.less +3 -2
  4. package/dist/props/neptune-tokens.css +2 -1
  5. package/package.json +2 -2
  6. package/src/less/alerts.less +12 -24
  7. package/src/less/core/viewport-themes.less +1 -0
package/dist/css/alerts.css CHANGED
@@ -23,19 +23,18 @@
23
23
  flex-direction: column;
24
24
  justify-content: center;
25
25
  }
26
+ .np-theme-personal .alert .alert__message .alert__action {
27
+ margin-top: 8px;
28
+ margin-top: var(--size-8);
29
+ }
26
30
  .alert .alert__icon {
27
- width: 48px;
28
- width: var(--size-48);
29
- height: 48px;
30
- height: var(--size-48);
31
+ width: 32px;
32
+ width: var(--size-32);
33
+ height: 32px;
34
+ height: var(--size-32);
31
35
  border-radius: 50%;
32
36
  flex: none;
33
37
  }
34
- .alert .alert__message {
35
- padding-left: 16px;
36
- padding-left: var(--padding-small);
37
- margin-top: 2px;
38
- }
39
38
  .alert .close {
40
39
  margin-top: 4px;
41
40
  margin-top: var(--size-4);
@@ -43,8 +42,8 @@
43
42
  .np-theme-personal .alert .close {
44
43
  margin-top: calc(8px * -1);
45
44
  margin-top: calc(var(--size-8) * -1);
46
- margin-right: calc(8px * -1);
47
- margin-right: calc(var(--size-8) * -1);
45
+ margin-inline-end: calc(8px * -1);
46
+ margin-inline-end: calc(var(--size-8) * -1);
48
47
  }
49
48
  .alert p,
50
49
  .alert ul {
@@ -521,24 +520,14 @@ input:focus ~ .alert-focus,
521
520
  display: none !important;
522
521
  }
523
522
  .np-theme-personal .alert {
524
- padding: 24px;
525
- padding: var(--size-24);
526
- }
527
- .np-theme-personal .alert .desktop {
523
+ padding: 16px;
524
+ padding: var(--size-16);
528
525
  flex-direction: row;
529
526
  }
530
- .np-theme-personal .alert .desktop .alert__message {
531
- padding-left: 16px;
532
- padding-left: var(--padding-small);
527
+ .np-theme-personal .alert .alert__message {
533
528
  padding-top: 0;
534
- }
535
- .np-theme-personal .alert .mobile {
536
- flex-direction: column;
537
- }
538
- .np-theme-personal .alert .mobile .alert__message {
539
- padding-left: 0;
540
- padding-top: 16px;
541
- padding-top: var(--padding-small);
529
+ padding-inline-start: 16px;
530
+ padding-inline-start: var(--padding-small);
542
531
  }
543
532
  .np-theme-personal .alert-success,
544
533
  .np-theme-personal .alert-positive,
package/dist/css/neptune.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 10 Oct 2024 08:03:26 GMT
3
+ * Generated on Wed, 22 Jan 2025 20:31:30 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -54,6 +54,7 @@
54
54
  --radius-medium: 16px;
55
55
  --radius-large: 24px;
56
56
  --size-4: 4px;
57
+ --size-5: 5px;
57
58
  --size-8: 8px;
58
59
  --size-10: 10px;
59
60
  --size-12: 12px;
@@ -142,7 +143,7 @@
142
143
 
143
144
  /**
144
145
  * Do not edit directly
145
- * Generated on Thu, 10 Oct 2024 08:03:25 GMT
146
+ * Generated on Wed, 22 Jan 2025 20:31:30 GMT
146
147
  */
147
148
 
148
149
  .np-theme-personal {
@@ -217,6 +218,7 @@
217
218
  --radius-medium: 16px;
218
219
  --radius-large: 24px;
219
220
  --size-4: 4px;
221
+ --size-5: 5px;
220
222
  --size-8: 8px;
221
223
  --size-10: 10px;
222
224
  --size-12: 12px;
@@ -313,6 +315,7 @@
313
315
  .np-theme-personal {
314
316
  --delta: 2;
315
317
  --size-4: calc(4px / var(--delta));
318
+ --size-5: calc(5px / var(--delta));
316
319
  --size-8: calc(8px / var(--delta));
317
320
  --size-10: calc(10px / var(--delta));
318
321
  --size-12: calc(12px / var(--delta));
@@ -370,7 +373,7 @@
370
373
 
371
374
  /**
372
375
  * Do not edit directly
373
- * Generated on Thu, 10 Oct 2024 08:03:26 GMT
376
+ * Generated on Wed, 22 Jan 2025 20:31:30 GMT
374
377
  */
375
378
 
376
379
  .np-theme-personal--forest-green {
@@ -407,9 +410,9 @@
407
410
  --color-interactive-contrast: #163300;
408
411
  --color-interactive-contrast-hover: #214d00;
409
412
  --color-interactive-contrast-active: #2c6600;
410
- --color-interactive-neutral: #9fe870;
411
- --color-interactive-neutral-hover: #cdffad;
412
- --color-interactive-neutral-active: #ecffe0;
413
+ --color-interactive-neutral: rgba(159,232,112,0.2);
414
+ --color-interactive-neutral-hover: rgba(205,255,173,0.2);
415
+ --color-interactive-neutral-active: rgba(236,255,224,0.2);
413
416
  --color-border-neutral: rgba(255,255,255,0.2);
414
417
  --color-border-overlay: rgba(255,255,255,0.2);
415
418
  --color-background-screen: #163300;
@@ -426,9 +429,9 @@
426
429
  --color-sentiment-negative-primary: #ffc4c2;
427
430
  --color-sentiment-negative-primary-hover: #ffdcdb;
428
431
  --color-sentiment-negative-primary-active: #ffebeb;
429
- --color-sentiment-negative-secondary: #ffc4c2;
430
- --color-sentiment-negative-secondary-hover: #ffdcdb;
431
- --color-sentiment-negative-secondary-active: #ffebeb;
432
+ --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
433
+ --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
434
+ --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
432
435
  --color-sentiment-positive: #a0e5ae;
433
436
  --color-sentiment-warning: #edd272;
434
437
  --color-contrast: #163300;
@@ -445,6 +448,7 @@
445
448
  --radius-medium: 16px;
446
449
  --radius-large: 24px;
447
450
  --size-4: 4px;
451
+ --size-5: 5px;
448
452
  --size-8: 8px;
449
453
  --size-10: 10px;
450
454
  --size-12: 12px;
@@ -541,6 +545,7 @@
541
545
  .np-theme-personal {
542
546
  --delta: 2;
543
547
  --size-4: calc(4px / var(--delta));
548
+ --size-5: calc(5px / var(--delta));
544
549
  --size-8: calc(8px / var(--delta));
545
550
  --size-10: calc(10px / var(--delta));
546
551
  --size-12: calc(12px / var(--delta));
@@ -598,7 +603,7 @@
598
603
 
599
604
  /**
600
605
  * Do not edit directly
601
- * Generated on Thu, 10 Oct 2024 08:03:26 GMT
606
+ * Generated on Wed, 22 Jan 2025 20:31:30 GMT
602
607
  */
603
608
 
604
609
  .np-theme-personal--bright-green {
@@ -673,6 +678,7 @@
673
678
  --radius-medium: 16px;
674
679
  --radius-large: 24px;
675
680
  --size-4: 4px;
681
+ --size-5: 5px;
676
682
  --size-8: 8px;
677
683
  --size-10: 10px;
678
684
  --size-12: 12px;
@@ -769,6 +775,7 @@
769
775
  .np-theme-personal {
770
776
  --delta: 2;
771
777
  --size-4: calc(4px / var(--delta));
778
+ --size-5: calc(5px / var(--delta));
772
779
  --size-8: calc(8px / var(--delta));
773
780
  --size-10: calc(10px / var(--delta));
774
781
  --size-12: calc(12px / var(--delta));
@@ -826,7 +833,7 @@
826
833
 
827
834
  /**
828
835
  * Do not edit directly
829
- * Generated on Thu, 10 Oct 2024 08:03:25 GMT
836
+ * Generated on Wed, 22 Jan 2025 20:31:30 GMT
830
837
  */
831
838
 
832
839
  .np-theme-personal--dark {
@@ -901,6 +908,7 @@
901
908
  --radius-medium: 16px;
902
909
  --radius-large: 24px;
903
910
  --size-4: 4px;
911
+ --size-5: 5px;
904
912
  --size-8: 8px;
905
913
  --size-10: 10px;
906
914
  --size-12: 12px;
@@ -997,6 +1005,7 @@
997
1005
  .np-theme-personal {
998
1006
  --delta: 2;
999
1007
  --size-4: calc(4px / var(--delta));
1008
+ --size-5: calc(5px / var(--delta));
1000
1009
  --size-8: calc(8px / var(--delta));
1001
1010
  --size-10: calc(10px / var(--delta));
1002
1011
  --size-12: calc(12px / var(--delta));
@@ -1054,7 +1063,7 @@
1054
1063
 
1055
1064
  /**
1056
1065
  * Do not edit directly
1057
- * Generated on Thu, 10 Oct 2024 08:03:25 GMT
1066
+ * Generated on Wed, 22 Jan 2025 20:31:30 GMT
1058
1067
  */
1059
1068
 
1060
1069
  .np-theme-platform {
@@ -1148,6 +1157,7 @@
1148
1157
  --radius-medium: 16px;
1149
1158
  --radius-large: 24px;
1150
1159
  --size-4: 4px;
1160
+ --size-5: 5px;
1151
1161
  --size-8: 8px;
1152
1162
  --size-10: 10px;
1153
1163
  --size-12: 12px;
@@ -1236,7 +1246,7 @@
1236
1246
 
1237
1247
  /**
1238
1248
  * Do not edit directly
1239
- * Generated on Thu, 10 Oct 2024 08:03:25 GMT
1249
+ * Generated on Wed, 22 Jan 2025 20:31:30 GMT
1240
1250
  */
1241
1251
 
1242
1252
  .np-theme-platform--forest-green {
@@ -1330,6 +1340,7 @@
1330
1340
  --radius-medium: 16px;
1331
1341
  --radius-large: 24px;
1332
1342
  --size-4: 4px;
1343
+ --size-5: 5px;
1333
1344
  --size-8: 8px;
1334
1345
  --size-10: 10px;
1335
1346
  --size-12: 12px;
@@ -3669,6 +3680,7 @@ a.text-inverse:focus {
3669
3680
  .np-theme-personal {
3670
3681
  --delta: 2;
3671
3682
  --size-4: calc(4px / var(--delta));
3683
+ --size-5: calc(5px / var(--delta));
3672
3684
  --size-8: calc(8px / var(--delta));
3673
3685
  --size-10: calc(10px / var(--delta));
3674
3686
  --size-12: calc(12px / var(--delta));
@@ -5997,21 +6009,20 @@ tbody.collapse.in {
5997
6009
  justify-content: center;
5998
6010
  }
5999
6011
 
6012
+ .np-theme-personal .alert .alert__message .alert__action {
6013
+ margin-top: 8px;
6014
+ margin-top: var(--size-8);
6015
+ }
6016
+
6000
6017
  .alert .alert__icon {
6001
- width: 48px;
6002
- width: var(--size-48);
6003
- height: 48px;
6004
- height: var(--size-48);
6018
+ width: 32px;
6019
+ width: var(--size-32);
6020
+ height: 32px;
6021
+ height: var(--size-32);
6005
6022
  border-radius: 50%;
6006
6023
  flex: none;
6007
6024
  }
6008
6025
 
6009
- .alert .alert__message {
6010
- padding-left: 16px;
6011
- padding-left: var(--padding-small);
6012
- margin-top: 2px;
6013
- }
6014
-
6015
6026
  .alert .close {
6016
6027
  margin-top: 4px;
6017
6028
  margin-top: var(--size-4);
@@ -6020,8 +6031,8 @@ tbody.collapse.in {
6020
6031
  .np-theme-personal .alert .close {
6021
6032
  margin-top: calc(8px * -1);
6022
6033
  margin-top: calc(var(--size-8) * -1);
6023
- margin-right: calc(8px * -1);
6024
- margin-right: calc(var(--size-8) * -1);
6034
+ margin-inline-end: calc(8px * -1);
6035
+ margin-inline-end: calc(var(--size-8) * -1);
6025
6036
  }
6026
6037
 
6027
6038
  .alert p,
@@ -6561,28 +6572,15 @@ input:focus ~ .alert-focus,
6561
6572
  }
6562
6573
 
6563
6574
  .np-theme-personal .alert {
6564
- padding: 24px;
6565
- padding: var(--size-24);
6566
- }
6567
-
6568
- .np-theme-personal .alert .desktop {
6575
+ padding: 16px;
6576
+ padding: var(--size-16);
6569
6577
  flex-direction: row;
6570
6578
  }
6571
6579
 
6572
- .np-theme-personal .alert .desktop .alert__message {
6573
- padding-left: 16px;
6574
- padding-left: var(--padding-small);
6580
+ .np-theme-personal .alert .alert__message {
6575
6581
  padding-top: 0;
6576
- }
6577
-
6578
- .np-theme-personal .alert .mobile {
6579
- flex-direction: column;
6580
- }
6581
-
6582
- .np-theme-personal .alert .mobile .alert__message {
6583
- padding-left: 0;
6584
- padding-top: 16px;
6585
- padding-top: var(--padding-small);
6582
+ padding-inline-start: 16px;
6583
+ padding-inline-start: var(--padding-small);
6586
6584
  }
6587
6585
 
6588
6586
  .np-theme-personal .alert-success,
package/dist/less/neptune-tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 10 Oct 2024 08:03:26 GMT
3
+ // Generated on Wed, 22 Jan 2025 20:31:30 GMT
4
4
 
5
5
  @color-dark-content-primary: #e2e6e8;
6
6
  @color-dark-content-secondary: #c9cbce;
@@ -134,6 +134,7 @@
134
134
  @radius-medium: 16px;
135
135
  @radius-large: 24px;
136
136
  @size-4: 4px;
137
+ @size-5: 5px;
137
138
  @size-8: 8px;
138
139
  @size-10: 10px;
139
140
  @size-12: 12px;
@@ -220,7 +221,7 @@
220
221
  @font-family-display: 'Wise Sans', 'Inter', sans-serif;
221
222
 
222
223
  // Do not edit directly
223
- // Generated on Thu, 10 Oct 2024 08:03:25 GMT
224
+ // Generated on Wed, 22 Jan 2025 20:31:30 GMT
224
225
 
225
226
  @color-base-blue-light: #00b9ff;
226
227
  @color-base-blue-mid: #00a2dd;
package/dist/props/neptune-tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 10 Oct 2024 08:03:26 GMT
3
+ * Generated on Wed, 22 Jan 2025 20:31:30 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -54,6 +54,7 @@
54
54
  --radius-medium: 16px;
55
55
  --radius-large: 24px;
56
56
  --size-4: 4px;
57
+ --size-5: 5px;
57
58
  --size-8: 8px;
58
59
  --size-10: 10px;
59
60
  --size-12: 12px;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-css",
3
3
  "description": "Neptune CSS library",
4
- "version": "14.20.1",
4
+ "version": "14.21.1",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -23,7 +23,7 @@
23
23
  "scripts"
24
24
  ],
25
25
  "dependencies": {
26
- "@transferwise/neptune-tokens": "^8.12.0"
26
+ "@transferwise/neptune-tokens": "^8.15.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "modern-normalize": "^2.0.0",
package/src/less/alerts.less CHANGED
@@ -20,27 +20,26 @@
20
20
  align-items: flex-start;
21
21
  flex-direction: column;
22
22
  justify-content: center;
23
+
24
+ .alert__action {
25
+ margin-top: var(--size-8);
26
+ }
23
27
  }
24
28
  }
25
29
 
26
30
  .alert__icon {
27
- width: var(--size-48);
28
- height: var(--size-48);
31
+ width: var(--size-32);
32
+ height: var(--size-32);
29
33
  border-radius: 50%;
30
34
  flex: none;
31
35
  }
32
36
 
33
- .alert__message {
34
- padding-left: var(--padding-small);
35
- margin-top: 2px;
36
- }
37
-
38
37
  .close {
39
38
  margin-top: var(--size-4);
40
39
 
41
40
  .np-theme-personal & {
42
41
  margin-top: calc(var(--size-8) * -1);
43
- margin-right: calc(var(--size-8) * -1);
42
+ margin-inline-end: calc(var(--size-8) * -1);
44
43
  }
45
44
  }
46
45
 
@@ -210,24 +209,13 @@ input:focus ~ .alert-focus,
210
209
 
211
210
  .np-theme-personal {
212
211
  .alert {
213
- padding: var(--size-24);
214
-
215
- .desktop {
216
- flex-direction: row;
217
-
218
- .alert__message {
219
- padding-left: var(--padding-small);
220
- padding-top: 0;
221
- }
222
- }
212
+ padding: var(--size-16);
223
213
 
224
- .mobile {
225
- flex-direction: column;
214
+ flex-direction: row;
226
215
 
227
- .alert__message {
228
- padding-left: 0;
229
- padding-top: var(--padding-small);
230
- }
216
+ .alert__message {
217
+ padding-top: 0;
218
+ padding-inline-start: var(--padding-small);
231
219
  }
232
220
  }
233
221
 
package/src/less/core/viewport-themes.less CHANGED
@@ -5,6 +5,7 @@
5
5
  --delta: 2;
6
6
 
7
7
  --size-4: calc(@size-4 / var(--delta));
8
+ --size-5: calc(@size-5 / var(--delta));
8
9
  --size-8: calc(@size-8 / var(--delta));
9
10
  --size-10: calc(@size-10 / var(--delta));
10
11
  --size-12: calc(@size-12 / var(--delta));