@rescui/typography 0.18.2 → 0.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 (9) hide show
  1. package/lib/create-text-cn.js +18 -31
  2. package/lib/index-moduled.css +183 -145
  3. package/lib/index-moduled.p.module.css.js +120 -120
  4. package/lib/index.css +68 -30
  5. package/lib/mixins.p.css +68 -61
  6. package/lib/mixins.pcss +68 -61
  7. package/lib/public-api.p.css +167 -83
  8. package/lib/public-api.pcss +167 -83
  9. package/package.json +5 -5
package/lib/mixins.pcss CHANGED
@@ -79,7 +79,6 @@
79
79
  font-weight:var(--_rs-typography-font-weight);
80
80
  line-height:var(--_rs-typography-line-height);
81
81
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
82
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
83
82
  font-feature-settings:'kern', 'liga', 'calt';
84
83
  }
85
84
  @define-mixin rs-super-hero{
@@ -154,7 +153,6 @@
154
153
  font-weight:var(--_rs-typography-font-weight);
155
154
  line-height:var(--_rs-typography-line-height);
156
155
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
157
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
158
156
  font-feature-settings:'kern', 'liga', 'calt';
159
157
  --rs-theme-dark:0;
160
158
  --_rs-theme-dark:var(
@@ -245,7 +243,6 @@
245
243
  font-weight:var(--_rs-typography-font-weight);
246
244
  line-height:var(--_rs-typography-line-height);
247
245
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
248
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
249
246
  font-feature-settings:'kern', 'liga', 'calt';
250
247
  }
251
248
  @define-mixin rs-middle-hero{
@@ -307,7 +304,6 @@
307
304
  font-weight:var(--_rs-typography-font-weight);
308
305
  line-height:var(--_rs-typography-line-height);
309
306
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
310
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
311
307
  font-feature-settings:'kern', 'liga', 'calt';
312
308
  --rs-theme-dark:0;
313
309
  --_rs-theme-dark:var(
@@ -475,7 +471,6 @@
475
471
  font-weight:var(--_rs-typography-font-weight);
476
472
  line-height:var(--_rs-typography-line-height);
477
473
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
478
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
479
474
  font-feature-settings:'kern', 'liga', 'calt';
480
475
  }
481
476
  @define-mixin rs-digits-1{
@@ -530,7 +525,6 @@
530
525
  font-weight:var(--_rs-typography-font-weight);
531
526
  line-height:var(--_rs-typography-line-height);
532
527
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
533
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
534
528
  font-feature-settings:'kern', 'liga', 'calt';
535
529
  --rs-theme-dark:0;
536
530
  --_rs-theme-dark:var(
@@ -608,7 +602,6 @@
608
602
  font-weight:var(--_rs-typography-font-weight);
609
603
  line-height:var(--_rs-typography-line-height);
610
604
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
611
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
612
605
  font-feature-settings:'kern', 'liga', 'calt';
613
606
  }
614
607
  @define-mixin rs-digits-2{
@@ -657,7 +650,6 @@
657
650
  font-weight:var(--_rs-typography-font-weight);
658
651
  line-height:var(--_rs-typography-line-height);
659
652
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
660
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
661
653
  font-feature-settings:'kern', 'liga', 'calt';
662
654
  --rs-theme-dark:0;
663
655
  --_rs-theme-dark:var(
@@ -745,7 +737,6 @@
745
737
  font-weight:var(--_rs-typography-font-weight);
746
738
  line-height:var(--_rs-typography-line-height);
747
739
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
748
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
749
740
  font-feature-settings:'kern', 'liga', 'calt';
750
741
  }
751
742
  @define-mixin rs-hero{
@@ -804,7 +795,6 @@
804
795
  font-weight:var(--_rs-typography-font-weight);
805
796
  line-height:var(--_rs-typography-line-height);
806
797
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
807
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
808
798
  font-feature-settings:'kern', 'liga', 'calt';
809
799
  --rs-theme-dark:0;
810
800
  --_rs-theme-dark:var(
@@ -892,7 +882,6 @@
892
882
  font-weight:var(--_rs-typography-font-weight);
893
883
  line-height:var(--_rs-typography-line-height);
894
884
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
895
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
896
885
  font-feature-settings:'kern', 'liga', 'calt';
897
886
  }
898
887
  @define-mixin rs-subtitle-1{
@@ -951,7 +940,6 @@
951
940
  font-weight:var(--_rs-typography-font-weight);
952
941
  line-height:var(--_rs-typography-line-height);
953
942
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
954
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
955
943
  font-feature-settings:'kern', 'liga', 'calt';
956
944
  --rs-theme-dark:0;
957
945
  --_rs-theme-dark:var(
@@ -1034,7 +1022,6 @@
1034
1022
  font-weight:var(--_rs-typography-font-weight);
1035
1023
  line-height:var(--_rs-typography-line-height);
1036
1024
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1037
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1038
1025
  font-feature-settings:'kern', 'liga', 'calt';
1039
1026
  }
1040
1027
  @define-mixin rs-h1{
@@ -1088,7 +1075,6 @@
1088
1075
  font-weight:var(--_rs-typography-font-weight);
1089
1076
  line-height:var(--_rs-typography-line-height);
1090
1077
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1091
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1092
1078
  font-feature-settings:'kern', 'liga', 'calt';
1093
1079
  --rs-theme-dark:0;
1094
1080
  --_rs-theme-dark:var(
@@ -1176,7 +1162,6 @@
1176
1162
  font-weight:var(--_rs-typography-font-weight);
1177
1163
  line-height:var(--_rs-typography-line-height);
1178
1164
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1179
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1180
1165
  font-feature-settings:'kern', 'liga', 'calt';
1181
1166
  }
1182
1167
  @define-mixin rs-subtitle-2{
@@ -1235,7 +1220,6 @@
1235
1220
  font-weight:var(--_rs-typography-font-weight);
1236
1221
  line-height:var(--_rs-typography-line-height);
1237
1222
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1238
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1239
1223
  font-feature-settings:'kern', 'liga', 'calt';
1240
1224
  --rs-theme-dark:0;
1241
1225
  --_rs-theme-dark:var(
@@ -1317,7 +1301,6 @@
1317
1301
  font-weight:var(--_rs-typography-font-weight);
1318
1302
  line-height:var(--_rs-typography-line-height);
1319
1303
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1320
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1321
1304
  font-feature-settings:'kern', 'liga', 'calt';
1322
1305
  }
1323
1306
  @define-mixin rs-h2{
@@ -1370,7 +1353,6 @@
1370
1353
  font-weight:var(--_rs-typography-font-weight);
1371
1354
  line-height:var(--_rs-typography-line-height);
1372
1355
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1373
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1374
1356
  font-feature-settings:'kern', 'liga', 'calt';
1375
1357
  --rs-theme-dark:0;
1376
1358
  --_rs-theme-dark:var(
@@ -1442,7 +1424,6 @@
1442
1424
  font-weight:var(--_rs-typography-font-weight);
1443
1425
  line-height:var(--_rs-typography-line-height);
1444
1426
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1445
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1446
1427
  font-feature-settings:'kern', 'liga', 'calt';
1447
1428
  }
1448
1429
  @define-mixin rs-h3{
@@ -1485,7 +1466,6 @@
1485
1466
  font-weight:var(--_rs-typography-font-weight);
1486
1467
  line-height:var(--_rs-typography-line-height);
1487
1468
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1488
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1489
1469
  font-feature-settings:'kern', 'liga', 'calt';
1490
1470
  --rs-theme-dark:0;
1491
1471
  --_rs-theme-dark:var(
@@ -1563,7 +1543,6 @@
1563
1543
  font-weight:var(--_rs-typography-font-weight);
1564
1544
  line-height:var(--_rs-typography-line-height);
1565
1545
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1566
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1567
1546
  font-feature-settings:'kern', 'liga', 'calt';
1568
1547
  }
1569
1548
  @define-mixin rs-text-1{
@@ -1612,7 +1591,6 @@
1612
1591
  font-weight:var(--_rs-typography-font-weight);
1613
1592
  line-height:var(--_rs-typography-line-height);
1614
1593
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1615
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1616
1594
  font-feature-settings:'kern', 'liga', 'calt';
1617
1595
  --rs-theme-dark:0;
1618
1596
  --_rs-theme-dark:var(
@@ -1684,7 +1662,6 @@
1684
1662
  font-weight:var(--_rs-typography-font-weight);
1685
1663
  line-height:var(--_rs-typography-line-height);
1686
1664
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1687
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1688
1665
  font-feature-settings:'kern', 'liga', 'calt';
1689
1666
  }
1690
1667
  @define-mixin rs-h4{
@@ -1727,7 +1704,6 @@
1727
1704
  font-weight:var(--_rs-typography-font-weight);
1728
1705
  line-height:var(--_rs-typography-line-height);
1729
1706
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1730
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1731
1707
  font-feature-settings:'kern', 'liga', 'calt';
1732
1708
  --rs-theme-dark:0;
1733
1709
  --_rs-theme-dark:var(
@@ -1805,7 +1781,6 @@
1805
1781
  font-weight:var(--_rs-typography-font-weight);
1806
1782
  line-height:var(--_rs-typography-line-height);
1807
1783
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1808
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1809
1784
  font-feature-settings:'kern', 'liga', 'calt';
1810
1785
  }
1811
1786
  @define-mixin rs-text-2{
@@ -1854,7 +1829,6 @@
1854
1829
  font-weight:var(--_rs-typography-font-weight);
1855
1830
  line-height:var(--_rs-typography-line-height);
1856
1831
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1857
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1858
1832
  font-feature-settings:'kern', 'liga', 'calt';
1859
1833
  --rs-theme-dark:0;
1860
1834
  --_rs-theme-dark:var(
@@ -1926,7 +1900,6 @@
1926
1900
  font-weight:var(--_rs-typography-font-weight);
1927
1901
  line-height:var(--_rs-typography-line-height);
1928
1902
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1929
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1930
1903
  font-feature-settings:'kern', 'liga', 'calt';
1931
1904
  }
1932
1905
  @define-mixin rs-h5{
@@ -1969,7 +1942,6 @@
1969
1942
  font-weight:var(--_rs-typography-font-weight);
1970
1943
  line-height:var(--_rs-typography-line-height);
1971
1944
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1972
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
1973
1945
  font-feature-settings:'kern', 'liga', 'calt';
1974
1946
  --rs-theme-dark:0;
1975
1947
  --_rs-theme-dark:var(
@@ -2047,7 +2019,6 @@
2047
2019
  font-weight:var(--_rs-typography-font-weight);
2048
2020
  line-height:var(--_rs-typography-line-height);
2049
2021
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
2050
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
2051
2022
  font-feature-settings:'kern', 'liga', 'calt';
2052
2023
  color:var(--_rs-typography-base-color);
2053
2024
  --rs-theme-dark:0;
@@ -2123,7 +2094,6 @@
2123
2094
  font-weight:var(--_rs-typography-font-weight);
2124
2095
  line-height:var(--_rs-typography-line-height);
2125
2096
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
2126
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
2127
2097
  font-feature-settings:'kern', 'liga', 'calt';
2128
2098
  }
2129
2099
  @define-mixin rs-text-3{
@@ -2169,7 +2139,6 @@
2169
2139
  font-weight:var(--_rs-typography-font-weight);
2170
2140
  line-height:var(--_rs-typography-line-height);
2171
2141
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
2172
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
2173
2142
  font-feature-settings:'kern', 'liga', 'calt';
2174
2143
  --rs-theme-dark:0;
2175
2144
  --_rs-theme-dark:var(
@@ -2249,7 +2218,6 @@
2249
2218
  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
2250
2219
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
2251
2220
  );
2252
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
2253
2221
  font-feature-settings:'kern', 'liga', 'calt';
2254
2222
  > li{
2255
2223
  position:relative;
@@ -2337,7 +2305,6 @@
2337
2305
  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
2338
2306
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
2339
2307
  );
2340
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
2341
2308
  font-feature-settings:'kern', 'liga', 'calt';
2342
2309
  > li{
2343
2310
  position:relative;
@@ -2440,7 +2407,6 @@
2440
2407
  );
2441
2408
  display:block;
2442
2409
  overflow:auto;
2443
- -webkit-box-sizing:border-box;
2444
2410
  box-sizing:border-box;
2445
2411
  width:100%;
2446
2412
  max-width:100%;
@@ -2507,7 +2473,6 @@
2507
2473
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
2508
2474
  0.1
2509
2475
  );
2510
- -webkit-box-sizing:border-box;
2511
2476
  box-sizing:border-box;
2512
2477
  padding:0.11111em 0.44444em;
2513
2478
  border-radius:4px;
@@ -2612,38 +2577,85 @@
2612
2577
  --_rs-typography-link-transition,
2613
2578
  none
2614
2579
  );
2615
- padding-bottom:1px;
2616
- border-bottom-width:var(--_rs-typography-link-border-bottom-width-wf);
2580
+ --_rs-typography-link-padding-bottom-final:var(
2581
+ --_rs-typography-link-padding-bottom-from-state-hover,
2582
+ 1px
2583
+ );
2584
+ --_rs-typography-link-border-bottom-width-final:var(
2585
+ --_rs-typography-link-border-bottom-width-from-state-hover,
2586
+ var(--_rs-typography-link-border-bottom-width-wf)
2587
+ );
2588
+ --_rs-typography-link-border-bottom-color-final:var(
2589
+ --_rs-typography-link-border-bottom-color-from-state-hover,
2590
+ var(--_rs-typography-link-underline-color-wf)
2591
+ );
2592
+ --_rs-typography-link-border-image-final:var(
2593
+ --_rs-typography-link-border-image-from-state-hover,
2594
+ initial
2595
+ );
2596
+ --_rs-typography-link-color-final:var(
2597
+ --_rs-typography-link-color-from-state-hover,
2598
+ var(--_rs-typography-link-color-wf)
2599
+ );
2600
+ --_rs-typography-link-background-size-final:var(
2601
+ --_rs-typography-link-background-size-from-state-hover,
2602
+ auto 0
2603
+ );
2604
+ --_rs-typography-link-after-margin-right-final:var(
2605
+ --_rs-typography-link-after-margin-right-from-state-hover,
2606
+ var(--_rs-typography-link-after-offset-right-wf)
2607
+ );
2608
+ --_rs-typography-link-after-margin-left-final:var(
2609
+ --_rs-typography-link-after-margin-left-from-state-hover,
2610
+ var(--_rs-typography-link-after-offset-left-wf)
2611
+ );
2612
+ --_rs-typography-link-box-shadow-final:var(
2613
+ --_rs-typography-link-box-shadow-from-state-focus-visible,
2614
+ initial
2615
+ );
2616
+ padding-bottom:var(--_rs-typography-link-padding-bottom-final);
2617
+ border-bottom-width:var(--_rs-typography-link-border-bottom-width-final);
2617
2618
  border-bottom-style:solid;
2618
- border-bottom-color:var(--_rs-typography-link-underline-color-wf);
2619
+ border-bottom-color:var(--_rs-typography-link-border-bottom-color-final);
2620
+ -o-border-image:var(--_rs-typography-link-border-image-final);
2621
+ border-image:var(--_rs-typography-link-border-image-final);
2619
2622
  outline:none;
2620
2623
  cursor:pointer;
2621
2624
  text-decoration:none;
2622
- color:var(--_rs-typography-link-color-wf);
2625
+ color:var(--_rs-typography-link-color-final);
2623
2626
  background-image:var(--_rs-typography-link-background-image-wf);
2624
2627
  background-repeat:repeat-x;
2625
2628
  background-position:left calc(100% + 4px);
2626
- background-size:auto 0;
2629
+ background-size:var(--_rs-typography-link-background-size-final);
2630
+ box-shadow:var(--_rs-typography-link-box-shadow-final);
2627
2631
  font-size:inherit;
2628
2632
  line-height:inherit;
2629
- -webkit-transition:var(--_rs-typography-link-transition-wf);
2630
2633
  transition:var(--_rs-typography-link-transition-wf);
2631
2634
  &:active,
2632
2635
  &:focus{
2633
- color:var(--_rs-typography-link-color-wf);
2636
+ color:var(--_rs-typography-link-color-final);
2634
2637
  }
2635
2638
  &:hover{
2636
- padding-bottom:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
2637
-
2638
- border-bottom-width:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
2639
- border-bottom-color:var(--_rs-typography-link-hover-underline-color-wf);
2640
- -o-border-image:var(--_rs-typography-link-hover-border-image-wf);
2641
- border-image:var(--_rs-typography-link-hover-border-image-wf);
2639
+ --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
2640
+ --_rs-typography-link-border-bottom-width-from-state-hover:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
2641
+ --_rs-typography-link-border-bottom-color-from-state-hover:var(
2642
+ --_rs-typography-link-hover-underline-color-wf
2643
+ );
2644
+ --_rs-typography-link-border-image-from-state-hover:var(
2645
+ --_rs-typography-link-hover-border-image-wf
2646
+ );
2647
+ --_rs-typography-link-color-from-state-hover:var(
2648
+ --_rs-typography-link-hover-color-wf
2649
+ );
2650
+ --_rs-typography-link-background-size-from-state-hover:auto calc(100% + 4px);
2651
+ --_rs-typography-link-after-margin-right-from-state-hover:var(
2652
+ --_rs-typography-link-hover-after-offset-right-wf
2653
+ );
2654
+ --_rs-typography-link-after-margin-left-from-state-hover:var(
2655
+ --_rs-typography-link-hover-after-offset-left-wf
2656
+ );
2642
2657
 
2643
2658
  text-decoration:none;
2644
-
2645
- color:var(--_rs-typography-link-hover-color-wf);
2646
- background-size:auto calc(100% + 4px);
2647
2659
  }
2648
2660
  &:after{
2649
2661
  display:var(
@@ -2651,22 +2663,17 @@
2651
2663
  var(--_rs-typography-link-after-display-wf)
2652
2664
  );
2653
2665
 
2654
- margin-right:var(--_rs-typography-link-after-offset-right-wf);
2655
- margin-left:var(--_rs-typography-link-after-offset-left-wf);
2666
+ margin-right:var(--_rs-typography-link-after-margin-right-final);
2667
+ margin-left:var(--_rs-typography-link-after-margin-left-final);
2656
2668
 
2657
2669
  content:var(--_rs-typography-link-after-content-or-initial, '\2192');
2658
2670
 
2659
- -webkit-transition:margin-right 300ms, margin-left 300ms;
2660
-
2661
2671
  transition:margin-right 300ms, margin-left 300ms;
2662
2672
  }
2663
- &:hover:after{
2664
- margin-right:var(--_rs-typography-link-hover-after-offset-right-wf);
2665
- margin-left:var(--_rs-typography-link-hover-after-offset-left-wf);
2666
- }
2667
2673
  &:focus[data-focus-method='key']{
2668
- -webkit-box-shadow:var(--_rs-color-primary) 0 0 0 4px;
2669
- box-shadow:var(--_rs-color-primary) 0 0 0 4px;
2674
+ --_rs-typography-link-box-shadow-from-state-focus-visible:var(
2675
+ --_rs-color-primary
2676
+ ) 0 0 0 4px;
2670
2677
  }
2671
2678
  }
2672
2679
  @define-mixin rs-link-hardness-hard{