@transferwise/neptune-css 14.21.0 → 14.22.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 (6) hide show
  1. package/dist/css/alerts.css +15 -26
  2. package/dist/css/neptune.css +28 -42
  3. package/dist/less/neptune-tokens.less +2 -2
  4. package/dist/props/neptune-tokens.css +1 -1
  5. package/package.json +2 -2
  6. package/src/less/alerts.less +12 -24
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 Wed, 22 Jan 2025 20:31:30 GMT
3
+ * Generated on Fri, 14 Feb 2025 09:19:52 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -143,7 +143,7 @@
143
143
 
144
144
  /**
145
145
  * Do not edit directly
146
- * Generated on Wed, 22 Jan 2025 20:31:30 GMT
146
+ * Generated on Fri, 14 Feb 2025 09:19:52 GMT
147
147
  */
148
148
 
149
149
  .np-theme-personal {
@@ -373,7 +373,7 @@
373
373
 
374
374
  /**
375
375
  * Do not edit directly
376
- * Generated on Wed, 22 Jan 2025 20:31:30 GMT
376
+ * Generated on Fri, 14 Feb 2025 09:19:52 GMT
377
377
  */
378
378
 
379
379
  .np-theme-personal--forest-green {
@@ -603,7 +603,7 @@
603
603
 
604
604
  /**
605
605
  * Do not edit directly
606
- * Generated on Wed, 22 Jan 2025 20:31:30 GMT
606
+ * Generated on Fri, 14 Feb 2025 09:19:52 GMT
607
607
  */
608
608
 
609
609
  .np-theme-personal--bright-green {
@@ -640,9 +640,9 @@
640
640
  --color-interactive-contrast: #9fe870;
641
641
  --color-interactive-contrast-hover: #cdffad;
642
642
  --color-interactive-contrast-active: #ecffe0;
643
- --color-interactive-neutral: #163300;
644
- --color-interactive-neutral-hover: #0d1f00;
645
- --color-interactive-neutral-active: #0e0f0c;
643
+ --color-interactive-neutral: rgba(22,51,0,0.2);
644
+ --color-interactive-neutral-hover: rgba(13,31,0,0.2);
645
+ --color-interactive-neutral-active: rgba(14,15,12,0.2);
646
646
  --color-border-neutral: rgba(22,51,0,0.12157);
647
647
  --color-border-overlay: rgba(255,255,255,0);
648
648
  --color-background-screen: #9fe870;
@@ -650,8 +650,8 @@
650
650
  --color-background-screen-active: rgba(255,255,255,0.4);
651
651
  --color-background-elevated: rgba(255,255,255,0);
652
652
  --color-background-neutral: rgba(255,255,255,0.30196);
653
- --color-background-neutral-hover: rgba(255,255,255,0);
654
- --color-background-neutral-active: rgba(255,255,255,0);
653
+ --color-background-neutral-hover: rgba(255,255,255,0.4);
654
+ --color-background-neutral-active: rgba(255,255,255,0.50196);
655
655
  --color-background-overlay: rgba(255,255,255,0);
656
656
  --color-sentiment-negative: rgba(255,255,255,0);
657
657
  --color-sentiment-negative-hover: rgba(255,255,255,0);
@@ -833,7 +833,7 @@
833
833
 
834
834
  /**
835
835
  * Do not edit directly
836
- * Generated on Wed, 22 Jan 2025 20:31:30 GMT
836
+ * Generated on Fri, 14 Feb 2025 09:19:52 GMT
837
837
  */
838
838
 
839
839
  .np-theme-personal--dark {
@@ -1063,7 +1063,7 @@
1063
1063
 
1064
1064
  /**
1065
1065
  * Do not edit directly
1066
- * Generated on Wed, 22 Jan 2025 20:31:30 GMT
1066
+ * Generated on Fri, 14 Feb 2025 09:19:52 GMT
1067
1067
  */
1068
1068
 
1069
1069
  .np-theme-platform {
@@ -1246,7 +1246,7 @@
1246
1246
 
1247
1247
  /**
1248
1248
  * Do not edit directly
1249
- * Generated on Wed, 22 Jan 2025 20:31:30 GMT
1249
+ * Generated on Fri, 14 Feb 2025 09:19:52 GMT
1250
1250
  */
1251
1251
 
1252
1252
  .np-theme-platform--forest-green {
@@ -6009,21 +6009,20 @@ tbody.collapse.in {
6009
6009
  justify-content: center;
6010
6010
  }
6011
6011
 
6012
+ .np-theme-personal .alert .alert__message .alert__action {
6013
+ margin-top: 8px;
6014
+ margin-top: var(--size-8);
6015
+ }
6016
+
6012
6017
  .alert .alert__icon {
6013
- width: 48px;
6014
- width: var(--size-48);
6015
- height: 48px;
6016
- height: var(--size-48);
6018
+ width: 32px;
6019
+ width: var(--size-32);
6020
+ height: 32px;
6021
+ height: var(--size-32);
6017
6022
  border-radius: 50%;
6018
6023
  flex: none;
6019
6024
  }
6020
6025
 
6021
- .alert .alert__message {
6022
- padding-left: 16px;
6023
- padding-left: var(--padding-small);
6024
- margin-top: 2px;
6025
- }
6026
-
6027
6026
  .alert .close {
6028
6027
  margin-top: 4px;
6029
6028
  margin-top: var(--size-4);
@@ -6032,8 +6031,8 @@ tbody.collapse.in {
6032
6031
  .np-theme-personal .alert .close {
6033
6032
  margin-top: calc(8px * -1);
6034
6033
  margin-top: calc(var(--size-8) * -1);
6035
- margin-right: calc(8px * -1);
6036
- margin-right: calc(var(--size-8) * -1);
6034
+ margin-inline-end: calc(8px * -1);
6035
+ margin-inline-end: calc(var(--size-8) * -1);
6037
6036
  }
6038
6037
 
6039
6038
  .alert p,
@@ -6573,28 +6572,15 @@ input:focus ~ .alert-focus,
6573
6572
  }
6574
6573
 
6575
6574
  .np-theme-personal .alert {
6576
- padding: 24px;
6577
- padding: var(--size-24);
6578
- }
6579
-
6580
- .np-theme-personal .alert .desktop {
6575
+ padding: 16px;
6576
+ padding: var(--size-16);
6581
6577
  flex-direction: row;
6582
6578
  }
6583
6579
 
6584
- .np-theme-personal .alert .desktop .alert__message {
6585
- padding-left: 16px;
6586
- padding-left: var(--padding-small);
6580
+ .np-theme-personal .alert .alert__message {
6587
6581
  padding-top: 0;
6588
- }
6589
-
6590
- .np-theme-personal .alert .mobile {
6591
- flex-direction: column;
6592
- }
6593
-
6594
- .np-theme-personal .alert .mobile .alert__message {
6595
- padding-left: 0;
6596
- padding-top: 16px;
6597
- padding-top: var(--padding-small);
6582
+ padding-inline-start: 16px;
6583
+ padding-inline-start: var(--padding-small);
6598
6584
  }
6599
6585
 
6600
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 Wed, 22 Jan 2025 20:31:30 GMT
3
+ // Generated on Fri, 14 Feb 2025 09:19:52 GMT
4
4
 
5
5
  @color-dark-content-primary: #e2e6e8;
6
6
  @color-dark-content-secondary: #c9cbce;
@@ -221,7 +221,7 @@
221
221
  @font-family-display: 'Wise Sans', 'Inter', sans-serif;
222
222
 
223
223
  // Do not edit directly
224
- // Generated on Wed, 22 Jan 2025 20:31:30 GMT
224
+ // Generated on Fri, 14 Feb 2025 09:19:52 GMT
225
225
 
226
226
  @color-base-blue-light: #00b9ff;
227
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 Wed, 22 Jan 2025 20:31:30 GMT
3
+ * Generated on Fri, 14 Feb 2025 09:19:52 GMT
4
4
  */
5
5
 
6
6
  :root {
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.21.0",
4
+ "version": "14.22.0",
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.15.0"
26
+ "@transferwise/neptune-tokens": "^8.16.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