@transferwise/neptune-css 14.18.0 → 14.19.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/circles.css +3 -39
  2. package/dist/css/neptune.css +21 -138
  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/circles.less +11 -1
  7. package/src/less/mixins/_circle.less +0 -11
package/dist/css/circles.css CHANGED
@@ -1,3 +1,6 @@
1
+ /**
2
+ * DEPRECATED: use <Circle /> component instead
3
+ */
1
4
  .circle {
2
5
  display: flex;
3
6
  align-items: center;
@@ -58,41 +61,24 @@ a.circle[style]:hover {
58
61
  height: 48px;
59
62
  line-height: 48px;
60
63
  }
61
- .circle .icon,
62
- .circle-sm .icon {
63
- font-size: 24px;
64
- line-height: 46px;
65
- }
66
64
  .circle-xs {
67
65
  font-size: 10px;
68
66
  width: 24px;
69
67
  height: 24px;
70
68
  line-height: 24px;
71
69
  }
72
- .circle-xs .icon {
73
- font-size: 14px;
74
- line-height: 22px;
75
- }
76
70
  .circle-md {
77
71
  font-size: 24px;
78
72
  width: 72px;
79
73
  height: 72px;
80
74
  line-height: 72px;
81
75
  }
82
- .circle-md .icon {
83
- font-size: 32px;
84
- line-height: 70px;
85
- }
86
76
  .circle-lg {
87
77
  font-size: 32px;
88
78
  width: 96px;
89
79
  height: 96px;
90
80
  line-height: 96px;
91
81
  }
92
- .circle-lg .icon {
93
- font-size: 40px;
94
- line-height: 94px;
95
- }
96
82
  a.circle,
97
83
  a.circle .icon {
98
84
  -webkit-text-decoration: none;
@@ -159,10 +145,6 @@ a.circle.active:hover {
159
145
  background-color: rgba(134,167,189,0.10196);
160
146
  background-color: var(--color-background-neutral);
161
147
  }
162
- .circle-responsive.circle-lg .icon {
163
- font-size: 24px;
164
- line-height: 46px;
165
- }
166
148
  @media (min-width: 576px) {
167
149
  .circle-responsive {
168
150
  border-radius: 50%;
@@ -176,22 +158,12 @@ a.circle.active:hover {
176
158
  height: 48px;
177
159
  line-height: 48px;
178
160
  }
179
- .circle-responsive.circle .icon,
180
- .circle-responsive.circle-sm .icon,
181
- .circle-responsive.circle-md .icon {
182
- font-size: 24px;
183
- line-height: 46px;
184
- }
185
161
  .circle-responsive.circle-lg {
186
162
  font-size: 24px;
187
163
  width: 72px;
188
164
  height: 72px;
189
165
  line-height: 72px;
190
166
  }
191
- .circle-responsive.circle-lg .icon {
192
- font-size: 32px;
193
- line-height: 70px;
194
- }
195
167
  .circle-responsive.circle-inverse {
196
168
  background-color: rgba(134,167,189,0.10196);
197
169
  background-color: var(--color-background-neutral);
@@ -204,20 +176,12 @@ a.circle.active:hover {
204
176
  height: 72px;
205
177
  line-height: 72px;
206
178
  }
207
- .circle-responsive.circle-md .icon {
208
- font-size: 32px;
209
- line-height: 70px;
210
- }
211
179
  .circle-responsive.circle-lg {
212
180
  font-size: 32px;
213
181
  width: 96px;
214
182
  height: 96px;
215
183
  line-height: 96px;
216
184
  }
217
- .circle-responsive.circle-lg .icon {
218
- font-size: 40px;
219
- line-height: 94px;
220
- }
221
185
  }
222
186
  .dropdown-menu li > .circle:first-child,
223
187
  .dropdown-menu li > a > .circle:first-child {
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;
@@ -12388,6 +12311,10 @@ html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn-group {
12388
12311
  border: 0;
12389
12312
  }
12390
12313
 
12314
+ /**
12315
+ * DEPRECATED: use <Circle /> component instead
12316
+ */
12317
+
12391
12318
  .circle {
12392
12319
  display: flex;
12393
12320
  align-items: center;
@@ -12457,12 +12384,6 @@ a.circle[style]:hover {
12457
12384
  line-height: 48px;
12458
12385
  }
12459
12386
 
12460
- .circle .icon,
12461
- .circle-sm .icon {
12462
- font-size: 24px;
12463
- line-height: 46px;
12464
- }
12465
-
12466
12387
  .circle-xs {
12467
12388
  font-size: 10px;
12468
12389
  width: 24px;
@@ -12470,11 +12391,6 @@ a.circle[style]:hover {
12470
12391
  line-height: 24px;
12471
12392
  }
12472
12393
 
12473
- .circle-xs .icon {
12474
- font-size: 14px;
12475
- line-height: 22px;
12476
- }
12477
-
12478
12394
  .circle-md {
12479
12395
  font-size: 24px;
12480
12396
  width: 72px;
@@ -12482,11 +12398,6 @@ a.circle[style]:hover {
12482
12398
  line-height: 72px;
12483
12399
  }
12484
12400
 
12485
- .circle-md .icon {
12486
- font-size: 32px;
12487
- line-height: 70px;
12488
- }
12489
-
12490
12401
  .circle-lg {
12491
12402
  font-size: 32px;
12492
12403
  width: 96px;
@@ -12494,11 +12405,6 @@ a.circle[style]:hover {
12494
12405
  line-height: 96px;
12495
12406
  }
12496
12407
 
12497
- .circle-lg .icon {
12498
- font-size: 40px;
12499
- line-height: 94px;
12500
- }
12501
-
12502
12408
  a.circle,
12503
12409
  a.circle .icon {
12504
12410
  -webkit-text-decoration: none;
@@ -12576,11 +12482,6 @@ a.circle.active:hover {
12576
12482
  background-color: var(--color-background-neutral);
12577
12483
  }
12578
12484
 
12579
- .circle-responsive.circle-lg .icon {
12580
- font-size: 24px;
12581
- line-height: 46px;
12582
- }
12583
-
12584
12485
  @media (min-width: 576px) {
12585
12486
  .circle-responsive {
12586
12487
  border-radius: 50%;
@@ -12594,22 +12495,12 @@ a.circle.active:hover {
12594
12495
  height: 48px;
12595
12496
  line-height: 48px;
12596
12497
  }
12597
- .circle-responsive.circle .icon,
12598
- .circle-responsive.circle-sm .icon,
12599
- .circle-responsive.circle-md .icon {
12600
- font-size: 24px;
12601
- line-height: 46px;
12602
- }
12603
12498
  .circle-responsive.circle-lg {
12604
12499
  font-size: 24px;
12605
12500
  width: 72px;
12606
12501
  height: 72px;
12607
12502
  line-height: 72px;
12608
12503
  }
12609
- .circle-responsive.circle-lg .icon {
12610
- font-size: 32px;
12611
- line-height: 70px;
12612
- }
12613
12504
  .circle-responsive.circle-inverse {
12614
12505
  background-color: rgba(134,167,189,0.10196);
12615
12506
  background-color: var(--color-background-neutral);
@@ -12623,20 +12514,12 @@ a.circle.active:hover {
12623
12514
  height: 72px;
12624
12515
  line-height: 72px;
12625
12516
  }
12626
- .circle-responsive.circle-md .icon {
12627
- font-size: 32px;
12628
- line-height: 70px;
12629
- }
12630
12517
  .circle-responsive.circle-lg {
12631
12518
  font-size: 32px;
12632
12519
  width: 96px;
12633
12520
  height: 96px;
12634
12521
  line-height: 96px;
12635
12522
  }
12636
- .circle-responsive.circle-lg .icon {
12637
- font-size: 40px;
12638
- line-height: 94px;
12639
- }
12640
12523
  }
12641
12524
 
12642
12525
  .dropdown-menu li > .circle:first-child,
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.18.0",
4
+ "version": "14.19.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.9.2"
26
+ "@transferwise/neptune-tokens": "^8.11.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "modern-normalize": "^2.0.0",
package/src/less/circles.less CHANGED
@@ -1,7 +1,10 @@
1
1
  @import (reference) "../variables/legacy-variables.less";
2
- @import (reference) "./mixins/_circle.less";
3
2
  @import (reference) "./mixins/_logical-properties.less";
4
3
 
4
+ /**
5
+ * DEPRECATED: use <Circle /> component instead
6
+ */
7
+
5
8
  @circle-xs-diameter: 24px;
6
9
  @circle-sm-diameter: 48px;
7
10
  @circle-md-diameter: 72px;
@@ -19,6 +22,13 @@
19
22
 
20
23
  @circle-inverse-bg: var(--color-background-neutral);
21
24
 
25
+ .circle-variant(@diameter; @font-size; @icon-size) {
26
+ font-size: @font-size;
27
+ width: @diameter;
28
+ height: @diameter;
29
+ line-height: @diameter;
30
+ }
31
+
22
32
  .circle {
23
33
  display: flex;
24
34
  align-items: center;
package/src/less/mixins/_circle.less DELETED
@@ -1,11 +0,0 @@
1
- .circle-variant(@diameter; @font-size; @icon-size) {
2
- font-size: @font-size;
3
- width: @diameter;
4
- height: @diameter;
5
- line-height: @diameter;
6
-
7
- .icon {
8
- font-size: @icon-size;
9
- line-height: (@diameter - 2px);
10
- }
11
- }