@transferwise/neptune-css 14.17.0 → 14.19.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/neptune.css +23 -100
  2. package/dist/css/progress-bars.css +6 -6
  3. package/dist/less/neptune-tokens.less +4 -2
  4. package/dist/props/neptune-tokens.css +2 -1
  5. package/package.json +2 -2
  6. package/src/less/progress-bars.less +2 -2
package/dist/css/neptune.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 07 May 2024 15:39:58 GMT
3
+ * Generated on Mon, 23 Sep 2024 21:07:47 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -78,6 +78,7 @@
78
78
  --size-128: 128px;
79
79
  --size-146: 146px;
80
80
  --size-154: 154px;
81
+ --size-160: 160px;
81
82
  --size-x-small: 24px;
82
83
  --size-small: 32px;
83
84
  --size-medium: 40px;
@@ -141,7 +142,7 @@
141
142
 
142
143
  /**
143
144
  * Do not edit directly
144
- * Generated on Tue, 07 May 2024 15:39:58 GMT
145
+ * Generated on Mon, 23 Sep 2024 21:07:47 GMT
145
146
  */
146
147
 
147
148
  .np-theme-personal {
@@ -231,6 +232,7 @@
231
232
  --size-128: 128px;
232
233
  --size-146: 146px;
233
234
  --size-154: 154px;
235
+ --size-160: 160px;
234
236
  --size-x-small: 24px;
235
237
  --size-small: 32px;
236
238
  --size-medium: 40px;
@@ -359,7 +361,7 @@
359
361
 
360
362
  /**
361
363
  * Do not edit directly
362
- * Generated on Tue, 07 May 2024 15:39:58 GMT
364
+ * Generated on Mon, 23 Sep 2024 21:07:47 GMT
363
365
  */
364
366
 
365
367
  .np-theme-personal--forest-green {
@@ -382,48 +384,20 @@
382
384
  --color-content-link-hover: #cdffad;
383
385
  --color-content-link-active: #ecffe0;
384
386
  --color-interactive-primary: #9fe870;
385
- --color-interactive-primary-hover: #8bd35d;
386
- --color-interactive-primary-active: #7cc44f;
387
387
  --color-interactive-primary-hover: #cdffad;
388
- --color-interactive-primary-hover-hover: #b9ea9a;
389
- --color-interactive-primary-hover-active: #aadb8b;
390
388
  --color-interactive-primary-active: #ecffe0;
391
- --color-interactive-primary-active-hover: #d8eacc;
392
- --color-interactive-primary-active-active: #c8dbbd;
393
389
  --color-interactive-secondary: #cbd9c3;
394
- --color-interactive-secondary-hover: #b7c5af;
395
- --color-interactive-secondary-active: #a9b6a1;
396
390
  --color-interactive-secondary-hover: #d9e3d3;
397
- --color-interactive-secondary-hover-hover: #c5cfbf;
398
- --color-interactive-secondary-hover-active: #b6c0b0;
399
391
  --color-interactive-secondary-active: #e7ede3;
400
- --color-interactive-secondary-active-hover: #d3d9cf;
401
- --color-interactive-secondary-active-active: #c4cac0;
402
392
  --color-interactive-accent: #9fe870;
403
- --color-interactive-accent-hover: #8bd35d;
404
- --color-interactive-accent-active: #7cc44f;
405
393
  --color-interactive-accent-hover: #cdffad;
406
- --color-interactive-accent-hover-hover: #b9ea9a;
407
- --color-interactive-accent-hover-active: #aadb8b;
408
394
  --color-interactive-accent-active: #ecffe0;
409
- --color-interactive-accent-active-hover: #d8eacc;
410
- --color-interactive-accent-active-active: #c8dbbd;
411
395
  --color-interactive-control: #163300;
412
- --color-interactive-control-hover: #0c2300;
413
- --color-interactive-control-active: #001a00;
414
396
  --color-interactive-control-hover: #214d00;
415
- --color-interactive-control-hover-hover: #103c00;
416
- --color-interactive-control-hover-active: #093000;
417
397
  --color-interactive-control-active: #2c6600;
418
- --color-interactive-control-active-hover: #175400;
419
- --color-interactive-control-active-active: #064700;
420
398
  --color-interactive-contrast: #163300;
421
399
  --color-interactive-contrast-hover: #214d00;
422
- --color-interactive-contrast-hover-hover: #103c00;
423
- --color-interactive-contrast-hover-active: #093000;
424
400
  --color-interactive-contrast-active: #2c6600;
425
- --color-interactive-contrast-active-hover: #175400;
426
- --color-interactive-contrast-active-active: #064700;
427
401
  --color-border-neutral: rgba(255,255,255,0.2);
428
402
  --color-border-overlay: rgba(255,255,255,0.2);
429
403
  --color-background-screen: #163300;
@@ -477,6 +451,7 @@
477
451
  --size-128: 128px;
478
452
  --size-146: 146px;
479
453
  --size-154: 154px;
454
+ --size-160: 160px;
480
455
  --size-x-small: 24px;
481
456
  --size-small: 32px;
482
457
  --size-medium: 40px;
@@ -605,7 +580,7 @@
605
580
 
606
581
  /**
607
582
  * Do not edit directly
608
- * Generated on Tue, 07 May 2024 15:39:58 GMT
583
+ * Generated on Mon, 23 Sep 2024 21:07:47 GMT
609
584
  */
610
585
 
611
586
  .np-theme-personal--bright-green {
@@ -628,49 +603,21 @@
628
603
  --color-content-link-hover: #0d1f00;
629
604
  --color-content-link-active: #0e0f0c;
630
605
  --color-interactive-primary: #163300;
631
- --color-interactive-primary-hover: #0c2300;
632
- --color-interactive-primary-active: #001a00;
633
606
  --color-interactive-primary-hover: #0d1f00;
634
- --color-interactive-primary-hover-hover: #001100;
635
- --color-interactive-primary-hover-active: #000000;
636
607
  --color-interactive-primary-active: #0e0f0c;
637
- --color-interactive-primary-active-hover: #000000;
638
- --color-interactive-primary-active-active: #000000;
639
608
  --color-interactive-secondary: rgba(255,255,255,0);
640
- --color-interactive-secondary-hover: rgba(234,234,234,0);
641
- --color-interactive-secondary-active: rgba(219,219,219,0);
642
- --color-interactive-secondary-hover: #ffffff00;
643
- --color-interactive-secondary-hover-hover: rgba(234,234,234,0);
644
- --color-interactive-secondary-hover-active: rgba(219,219,219,0);
645
- --color-interactive-secondary-active: #ffffff00;
646
- --color-interactive-secondary-active-hover: rgba(234,234,234,0);
647
- --color-interactive-secondary-active-active: rgba(219,219,219,0);
609
+ --color-interactive-secondary-hover: rgba(255,255,255,0);
610
+ --color-interactive-secondary-active: rgba(255,255,255,0);
648
611
  --color-interactive-accent: #163300;
649
- --color-interactive-accent-hover: #0c2300;
650
- --color-interactive-accent-active: #001a00;
651
612
  --color-interactive-accent-hover: #0d1f00;
652
- --color-interactive-accent-hover-hover: #001100;
653
- --color-interactive-accent-hover-active: #000000;
654
613
  --color-interactive-accent-active: #0e0f0c;
655
- --color-interactive-accent-active-hover: #000000;
656
- --color-interactive-accent-active-active: #000000;
657
614
  --color-interactive-control: #9fe870;
658
- --color-interactive-control-hover: #8bd35d;
659
- --color-interactive-control-active: #7cc44f;
660
615
  --color-interactive-control-hover: #bbef9a;
661
- --color-interactive-control-hover-hover: #a7da87;
662
- --color-interactive-control-hover-active: #98cb79;
663
616
  --color-interactive-control-active: #d9f6c6;
664
- --color-interactive-control-active-hover: #c5e1b2;
665
- --color-interactive-control-active-active: #b6d2a4;
666
617
  --color-interactive-contrast: #9fe870;
667
618
  --color-interactive-contrast-hover: #cdffad;
668
- --color-interactive-contrast-hover-hover: #b9ea9a;
669
- --color-interactive-contrast-hover-active: #aadb8b;
670
619
  --color-interactive-contrast-active: #ecffe0;
671
- --color-interactive-contrast-active-hover: #d8eacc;
672
- --color-interactive-contrast-active-active: #c8dbbd;
673
- --color-border-neutral: rgba(255,255,255,0);
620
+ --color-border-neutral: rgba(22,51,0,0.12157);
674
621
  --color-border-overlay: rgba(255,255,255,0);
675
622
  --color-background-screen: #9fe870;
676
623
  --color-background-screen-hover: rgba(255,255,255,0.4);
@@ -723,6 +670,7 @@
723
670
  --size-128: 128px;
724
671
  --size-146: 146px;
725
672
  --size-154: 154px;
673
+ --size-160: 160px;
726
674
  --size-x-small: 24px;
727
675
  --size-small: 32px;
728
676
  --size-medium: 40px;
@@ -851,7 +799,7 @@
851
799
 
852
800
  /**
853
801
  * Do not edit directly
854
- * Generated on Tue, 07 May 2024 15:39:58 GMT
802
+ * Generated on Mon, 23 Sep 2024 21:07:47 GMT
855
803
  */
856
804
 
857
805
  .np-theme-personal--dark {
@@ -874,48 +822,20 @@
874
822
  --color-content-link-hover: #cdffad;
875
823
  --color-content-link-active: #ecffe0;
876
824
  --color-interactive-primary: #9fe870;
877
- --color-interactive-primary-hover: #8bd35d;
878
- --color-interactive-primary-active: #7cc44f;
879
825
  --color-interactive-primary-hover: #cdffad;
880
- --color-interactive-primary-hover-hover: #b9ea9a;
881
- --color-interactive-primary-hover-active: #aadb8b;
882
826
  --color-interactive-primary-active: #ecffe0;
883
- --color-interactive-primary-active-hover: #d8eacc;
884
- --color-interactive-primary-active-active: #c8dbbd;
885
827
  --color-interactive-secondary: #b9bab7;
886
- --color-interactive-secondary-hover: #a6a7a4;
887
- --color-interactive-secondary-active: #979895;
888
828
  --color-interactive-secondary-hover: #ecede9;
889
- --color-interactive-secondary-hover-hover: #d8d9d5;
890
- --color-interactive-secondary-hover-active: #c9cac6;
891
829
  --color-interactive-secondary-active: #f9faf6;
892
- --color-interactive-secondary-active-hover: #e4e5e1;
893
- --color-interactive-secondary-active-active: #d5d6d2;
894
830
  --color-interactive-accent: #9fe870;
895
- --color-interactive-accent-hover: #8bd35d;
896
- --color-interactive-accent-active: #7cc44f;
897
831
  --color-interactive-accent-hover: #cdffad;
898
- --color-interactive-accent-hover-hover: #b9ea9a;
899
- --color-interactive-accent-hover-active: #aadb8b;
900
832
  --color-interactive-accent-active: #ecffe0;
901
- --color-interactive-accent-active-hover: #d8eacc;
902
- --color-interactive-accent-active-active: #c8dbbd;
903
833
  --color-interactive-control: #163300;
904
- --color-interactive-control-hover: #0c2300;
905
- --color-interactive-control-active: #001a00;
906
834
  --color-interactive-control-hover: #214d00;
907
- --color-interactive-control-hover-hover: #103c00;
908
- --color-interactive-control-hover-active: #093000;
909
835
  --color-interactive-control-active: #2c6600;
910
- --color-interactive-control-active-hover: #175400;
911
- --color-interactive-control-active-active: #064700;
912
836
  --color-interactive-contrast: #163300;
913
837
  --color-interactive-contrast-hover: #214d00;
914
- --color-interactive-contrast-hover-hover: #103c00;
915
- --color-interactive-contrast-hover-active: #093000;
916
838
  --color-interactive-contrast-active: #2c6600;
917
- --color-interactive-contrast-active-hover: #175400;
918
- --color-interactive-contrast-active-active: #064700;
919
839
  --color-border-neutral: rgba(255,255,255,0.2);
920
840
  --color-border-overlay: rgba(255,255,255,0.2);
921
841
  --color-background-screen: #121511;
@@ -969,6 +889,7 @@
969
889
  --size-128: 128px;
970
890
  --size-146: 146px;
971
891
  --size-154: 154px;
892
+ --size-160: 160px;
972
893
  --size-x-small: 24px;
973
894
  --size-small: 32px;
974
895
  --size-medium: 40px;
@@ -1097,7 +1018,7 @@
1097
1018
 
1098
1019
  /**
1099
1020
  * Do not edit directly
1100
- * Generated on Tue, 07 May 2024 15:39:58 GMT
1021
+ * Generated on Mon, 23 Sep 2024 21:07:47 GMT
1101
1022
  */
1102
1023
 
1103
1024
  .np-theme-platform {
@@ -1215,6 +1136,7 @@
1215
1136
  --size-128: 128px;
1216
1137
  --size-146: 146px;
1217
1138
  --size-154: 154px;
1139
+ --size-160: 160px;
1218
1140
  --size-x-small: 24px;
1219
1141
  --size-small: 32px;
1220
1142
  --size-medium: 40px;
@@ -1278,7 +1200,7 @@
1278
1200
 
1279
1201
  /**
1280
1202
  * Do not edit directly
1281
- * Generated on Tue, 07 May 2024 15:39:58 GMT
1203
+ * Generated on Mon, 23 Sep 2024 21:07:47 GMT
1282
1204
  */
1283
1205
 
1284
1206
  .np-theme-platform--forest-green {
@@ -1396,6 +1318,7 @@
1396
1318
  --size-128: 128px;
1397
1319
  --size-146: 146px;
1398
1320
  --size-154: 154px;
1321
+ --size-160: 160px;
1399
1322
  --size-x-small: 24px;
1400
1323
  --size-small: 32px;
1401
1324
  --size-medium: 40px;
@@ -22346,20 +22269,20 @@ button.popover-close {
22346
22269
  }
22347
22270
 
22348
22271
  .progress {
22349
- --progress-bar-height: 8px;
22272
+ --progress-bar-height: 4px;
22350
22273
  --progress-bar-border-width: 4px;
22351
22274
  --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
22352
- height: 8px;
22275
+ height: 4px;
22353
22276
  height: var(--progress-bar-height);
22354
22277
  overflow: hidden;
22355
- margin-top: calc((24px - 8px) / 2);
22278
+ margin-top: calc((24px - 4px) / 2);
22356
22279
  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
22357
- margin-bottom: calc((24px - 8px) / 2);
22280
+ margin-bottom: calc((24px - 4px) / 2);
22358
22281
  margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
22359
22282
  background-color: #c9cbce;
22360
22283
  background-color: var(--color-interactive-secondary);
22361
- border-radius: 8px;
22362
- border-radius: var(--progress-bar-height);
22284
+ border-radius: calc(4px + 4px);
22285
+ border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
22363
22286
  }
22364
22287
 
22365
22288
  .progress-bar {
package/dist/css/progress-bars.css CHANGED
@@ -1,18 +1,18 @@
1
1
  .progress {
2
- --progress-bar-height: 8px;
2
+ --progress-bar-height: 4px;
3
3
  --progress-bar-border-width: 4px;
4
4
  --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
5
- height: 8px;
5
+ height: 4px;
6
6
  height: var(--progress-bar-height);
7
7
  overflow: hidden;
8
- margin-top: calc((24px - 8px) / 2);
8
+ margin-top: calc((24px - 4px) / 2);
9
9
  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
10
- margin-bottom: calc((24px - 8px) / 2);
10
+ margin-bottom: calc((24px - 4px) / 2);
11
11
  margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
12
12
  background-color: #c9cbce;
13
13
  background-color: var(--color-interactive-secondary);
14
- border-radius: 8px;
15
- border-radius: var(--progress-bar-height);
14
+ border-radius: calc(4px + 4px);
15
+ border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
16
16
  }
17
17
  .progress-bar {
18
18
  float: left;
package/dist/less/neptune-tokens.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 07 May 2024 15:39:58 GMT
3
+ // Generated on Mon, 23 Sep 2024 21:07:47 GMT
4
4
 
5
5
  @color-dark-content-primary: #e2e6e8;
6
6
  @color-dark-content-secondary: #c9cbce;
@@ -158,6 +158,7 @@
158
158
  @size-128: 128px;
159
159
  @size-146: 146px;
160
160
  @size-154: 154px;
161
+ @size-160: 160px;
161
162
  @size-x-small: 24px;
162
163
  @size-small: 32px;
163
164
  @size-medium: 40px;
@@ -219,7 +220,7 @@
219
220
  @font-family-display: 'Wise Sans', 'Inter', sans-serif;
220
221
 
221
222
  // Do not edit directly
222
- // Generated on Tue, 07 May 2024 15:39:58 GMT
223
+ // Generated on Mon, 23 Sep 2024 21:07:47 GMT
223
224
 
224
225
  @color-base-blue-light: #00b9ff;
225
226
  @color-base-blue-mid: #00a2dd;
@@ -261,6 +262,7 @@
261
262
  @color-base-brand-amber: #ffb619;
262
263
  @color-base-brand-borderless: #44ee70;
263
264
 
265
+
264
266
  // DEPRECATED, use neptune-tokens instead: https://transferwise.github.io/neptune-web/styles/tokens/Colors
265
267
  @color-primary: #37517e;
266
268
  @color-secondary: #5d7079;
package/dist/props/neptune-tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 07 May 2024 15:39:58 GMT
3
+ * Generated on Mon, 23 Sep 2024 21:07:47 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -78,6 +78,7 @@
78
78
  --size-128: 128px;
79
79
  --size-146: 146px;
80
80
  --size-154: 154px;
81
+ --size-160: 160px;
81
82
  --size-x-small: 24px;
82
83
  --size-small: 32px;
83
84
  --size-medium: 40px;
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.17.0",
4
+ "version": "14.19.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.9.2"
26
+ "@transferwise/neptune-tokens": "^8.11.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "modern-normalize": "^2.0.0",
package/src/less/progress-bars.less CHANGED
@@ -2,7 +2,7 @@
2
2
  @import (reference) "./mixins/_logical-properties.less";
3
3
 
4
4
  .progress {
5
- --progress-bar-height: 8px;
5
+ --progress-bar-height: 4px;
6
6
  --progress-bar-border-width: 4px;
7
7
  // Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders which are used for progress vertical delimiter.
8
8
  --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
@@ -11,7 +11,7 @@
11
11
  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
12
12
  margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
13
13
  background-color: var(--color-interactive-secondary);
14
- border-radius: var(--progress-bar-height);
14
+ border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
15
15
  }
16
16
 
17
17
  .progress-bar {