@rescui/typography 0.20.0 → 0.21.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 (8) hide show
  1. package/lib/index-moduled.css +168 -141
  2. package/lib/index-moduled.p.module.css.js +120 -120
  3. package/lib/index.css +53 -26
  4. package/lib/mixins.p.css +89 -47
  5. package/lib/mixins.pcss +89 -47
  6. package/lib/public-api.p.css +139 -73
  7. package/lib/public-api.pcss +139 -73
  8. package/package.json +2 -2
package/lib/mixins.p.css CHANGED
@@ -8,7 +8,7 @@
8
8
  @define-mixin rs-typography-dark{
9
9
  }
10
10
  @define-mixin rs-super-hero-base{
11
- --_rs-typography-letter-spacing:-0.02em;
11
+ --_rs-typography-letter-spacing:var(--rs-super-hero-letter-spacing, -0.02em);
12
12
  --_rs-typography-text-transform:initial;
13
13
  --_rs-typography-font-variant-numeric:initial;
14
14
  --_rs-typography-font-family:var(
@@ -52,7 +52,10 @@
52
52
  --rs-middle-hero-line-height,
53
53
  92px
54
54
  );
55
- --_rs-typography-letter-spacing:-0.008em;
55
+ --_rs-typography-letter-spacing:var(
56
+ --rs-middle-hero-letter-spacing,
57
+ -0.008em
58
+ );
56
59
 
57
60
  --_rs-typography-link-border-bottom-width-from-text:3px;
58
61
  }
@@ -65,7 +68,10 @@
65
68
  --rs-middle-hero-line-height-mobile,
66
69
  62px
67
70
  );
68
- --_rs-typography-letter-spacing:-0.0007em;
71
+ --_rs-typography-letter-spacing:var(
72
+ --rs-middle-hero-letter-spacing-mobile,
73
+ -0.0007em
74
+ );
69
75
 
70
76
  --_rs-typography-link-border-bottom-width-from-text:2px;
71
77
  }
@@ -82,7 +88,7 @@
82
88
  font-feature-settings:'kern', 'liga', 'calt';
83
89
  }
84
90
  @define-mixin rs-super-hero{
85
- --_rs-typography-letter-spacing:-0.02em;
91
+ --_rs-typography-letter-spacing:var(--rs-super-hero-letter-spacing, -0.02em);
86
92
  --_rs-typography-text-transform:initial;
87
93
  --_rs-typography-font-variant-numeric:initial;
88
94
  --_rs-typography-font-family:var(
@@ -126,7 +132,10 @@
126
132
  --rs-middle-hero-line-height,
127
133
  92px
128
134
  );
129
- --_rs-typography-letter-spacing:-0.008em;
135
+ --_rs-typography-letter-spacing:var(
136
+ --rs-middle-hero-letter-spacing,
137
+ -0.008em
138
+ );
130
139
 
131
140
  --_rs-typography-link-border-bottom-width-from-text:3px;
132
141
  }
@@ -139,7 +148,10 @@
139
148
  --rs-middle-hero-line-height-mobile,
140
149
  62px
141
150
  );
142
- --_rs-typography-letter-spacing:-0.0007em;
151
+ --_rs-typography-letter-spacing:var(
152
+ --rs-middle-hero-letter-spacing-mobile,
153
+ -0.0007em
154
+ );
143
155
 
144
156
  --_rs-typography-link-border-bottom-width-from-text:2px;
145
157
  }
@@ -185,7 +197,10 @@
185
197
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
186
198
  }
187
199
  @define-mixin rs-middle-hero-base{
188
- --_rs-typography-letter-spacing:-0.008em;
200
+ --_rs-typography-letter-spacing:var(
201
+ --rs-middle-hero-letter-spacing,
202
+ -0.008em
203
+ );
189
204
  --_rs-typography-text-transform:initial;
190
205
  --_rs-typography-font-variant-numeric:initial;
191
206
  --_rs-typography-font-family:var(
@@ -229,7 +244,10 @@
229
244
  --rs-middle-hero-line-height-mobile,
230
245
  62px
231
246
  );
232
- --_rs-typography-letter-spacing:-0.0007em;
247
+ --_rs-typography-letter-spacing:var(
248
+ --rs-middle-hero-letter-spacing-mobile,
249
+ -0.0007em
250
+ );
233
251
 
234
252
  --_rs-typography-link-border-bottom-width-from-text:2px;
235
253
  }
@@ -246,7 +264,10 @@
246
264
  font-feature-settings:'kern', 'liga', 'calt';
247
265
  }
248
266
  @define-mixin rs-middle-hero{
249
- --_rs-typography-letter-spacing:-0.008em;
267
+ --_rs-typography-letter-spacing:var(
268
+ --rs-middle-hero-letter-spacing,
269
+ -0.008em
270
+ );
250
271
  --_rs-typography-text-transform:initial;
251
272
  --_rs-typography-font-variant-numeric:initial;
252
273
  --_rs-typography-font-family:var(
@@ -290,7 +311,10 @@
290
311
  --rs-middle-hero-line-height-mobile,
291
312
  62px
292
313
  );
293
- --_rs-typography-letter-spacing:-0.0007em;
314
+ --_rs-typography-letter-spacing:var(
315
+ --rs-middle-hero-letter-spacing-mobile,
316
+ -0.0007em
317
+ );
294
318
 
295
319
  --_rs-typography-link-border-bottom-width-from-text:2px;
296
320
  }
@@ -420,7 +444,7 @@
420
444
  );
421
445
  }
422
446
  @define-mixin rs-digits-1-base{
423
- --_rs-typography-letter-spacing:-0.005em;
447
+ --_rs-typography-letter-spacing:var(--rs-digits-1-letter-spacing, -0.005em);
424
448
  --_rs-typography-text-transform:initial;
425
449
  --_rs-typography-font-variant-numeric:tabular-nums;
426
450
  --_rs-typography-font-family:var(
@@ -474,7 +498,7 @@
474
498
  font-feature-settings:'kern', 'liga', 'calt';
475
499
  }
476
500
  @define-mixin rs-digits-1{
477
- --_rs-typography-letter-spacing:-0.005em;
501
+ --_rs-typography-letter-spacing:var(--rs-digits-1-letter-spacing, -0.005em);
478
502
  --_rs-typography-text-transform:initial;
479
503
  --_rs-typography-font-variant-numeric:tabular-nums;
480
504
  --_rs-typography-font-family:var(
@@ -557,7 +581,7 @@
557
581
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
558
582
  }
559
583
  @define-mixin rs-digits-2-base{
560
- --_rs-typography-letter-spacing:-0.005em;
584
+ --_rs-typography-letter-spacing:var(--rs-digits-2-letter-spacing, -0.005em);
561
585
  --_rs-typography-text-transform:initial;
562
586
  --_rs-typography-font-variant-numeric:tabular-nums;
563
587
  --_rs-typography-font-family:var(
@@ -605,7 +629,7 @@
605
629
  font-feature-settings:'kern', 'liga', 'calt';
606
630
  }
607
631
  @define-mixin rs-digits-2{
608
- --_rs-typography-letter-spacing:-0.005em;
632
+ --_rs-typography-letter-spacing:var(--rs-digits-2-letter-spacing, -0.005em);
609
633
  --_rs-typography-text-transform:initial;
610
634
  --_rs-typography-font-variant-numeric:tabular-nums;
611
635
  --_rs-typography-font-family:var(
@@ -682,7 +706,7 @@
682
706
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
683
707
  }
684
708
  @define-mixin rs-hero-base{
685
- --_rs-typography-letter-spacing:-0.005em;
709
+ --_rs-typography-letter-spacing:var(--rs-hero-letter-spacing, -0.005em);
686
710
  --_rs-typography-text-transform:initial;
687
711
  --_rs-typography-font-variant-numeric:initial;
688
712
  --_rs-typography-font-family:var(
@@ -723,7 +747,10 @@
723
747
  --rs-hero-line-height-mobile,
724
748
  50px
725
749
  );
726
- --_rs-typography-letter-spacing:-0.001em;
750
+ --_rs-typography-letter-spacing:var(
751
+ --rs-hero-letter-spacing-mobile,
752
+ -0.001em
753
+ );
727
754
 
728
755
  --_rs-typography-link-border-bottom-width-from-text:2px;
729
756
  }
@@ -740,7 +767,7 @@
740
767
  font-feature-settings:'kern', 'liga', 'calt';
741
768
  }
742
769
  @define-mixin rs-hero{
743
- --_rs-typography-letter-spacing:-0.005em;
770
+ --_rs-typography-letter-spacing:var(--rs-hero-letter-spacing, -0.005em);
744
771
  --_rs-typography-text-transform:initial;
745
772
  --_rs-typography-font-variant-numeric:initial;
746
773
  --_rs-typography-font-family:var(
@@ -781,7 +808,10 @@
781
808
  --rs-hero-line-height-mobile,
782
809
  50px
783
810
  );
784
- --_rs-typography-letter-spacing:-0.001em;
811
+ --_rs-typography-letter-spacing:var(
812
+ --rs-hero-letter-spacing-mobile,
813
+ -0.001em
814
+ );
785
815
 
786
816
  --_rs-typography-link-border-bottom-width-from-text:2px;
787
817
  }
@@ -827,7 +857,7 @@
827
857
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
828
858
  }
829
859
  @define-mixin rs-subtitle-1-base{
830
- --_rs-typography-letter-spacing:normal;
860
+ --_rs-typography-letter-spacing:var(--rs-subtitle-1-letter-spacing, normal);
831
861
  --_rs-typography-text-transform:initial;
832
862
  --_rs-typography-font-variant-numeric:initial;
833
863
  --_rs-typography-font-family:var(
@@ -885,7 +915,7 @@
885
915
  font-feature-settings:'kern', 'liga', 'calt';
886
916
  }
887
917
  @define-mixin rs-subtitle-1{
888
- --_rs-typography-letter-spacing:normal;
918
+ --_rs-typography-letter-spacing:var(--rs-subtitle-1-letter-spacing, normal);
889
919
  --_rs-typography-text-transform:initial;
890
920
  --_rs-typography-font-variant-numeric:initial;
891
921
  --_rs-typography-font-family:var(
@@ -972,7 +1002,7 @@
972
1002
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
973
1003
  }
974
1004
  @define-mixin rs-h1-base{
975
- --_rs-typography-letter-spacing:-0.001em;
1005
+ --_rs-typography-letter-spacing:var(--rs-h1-letter-spacing, -0.001em);
976
1006
  --_rs-typography-text-transform:initial;
977
1007
  --_rs-typography-font-variant-numeric:initial;
978
1008
  --_rs-typography-font-family:var(
@@ -1010,7 +1040,7 @@
1010
1040
  --rs-h1-line-height-mobile,
1011
1041
  39px
1012
1042
  );
1013
- --_rs-typography-letter-spacing:normal;
1043
+ --_rs-typography-letter-spacing:var(--rs-h1-letter-spacing-mobile, normal);
1014
1044
  }
1015
1045
  letter-spacing:var(
1016
1046
  --rs-text-base-letter-spacing,
@@ -1025,7 +1055,7 @@
1025
1055
  font-feature-settings:'kern', 'liga', 'calt';
1026
1056
  }
1027
1057
  @define-mixin rs-h1{
1028
- --_rs-typography-letter-spacing:-0.001em;
1058
+ --_rs-typography-letter-spacing:var(--rs-h1-letter-spacing, -0.001em);
1029
1059
  --_rs-typography-text-transform:initial;
1030
1060
  --_rs-typography-font-variant-numeric:initial;
1031
1061
  --_rs-typography-font-family:var(
@@ -1063,7 +1093,7 @@
1063
1093
  --rs-h1-line-height-mobile,
1064
1094
  39px
1065
1095
  );
1066
- --_rs-typography-letter-spacing:normal;
1096
+ --_rs-typography-letter-spacing:var(--rs-h1-letter-spacing-mobile, normal);
1067
1097
  }
1068
1098
  letter-spacing:var(
1069
1099
  --rs-text-base-letter-spacing,
@@ -1107,7 +1137,7 @@
1107
1137
  margin-top:calc(var(--rs-flow-unit, 8px)*8);
1108
1138
  }
1109
1139
  @define-mixin rs-subtitle-2-base{
1110
- --_rs-typography-letter-spacing:normal;
1140
+ --_rs-typography-letter-spacing:var(--rs-subtitle-2-letter-spacing, normal);
1111
1141
  --_rs-typography-text-transform:initial;
1112
1142
  --_rs-typography-font-variant-numeric:initial;
1113
1143
  --_rs-typography-font-family:var(
@@ -1165,7 +1195,7 @@
1165
1195
  font-feature-settings:'kern', 'liga', 'calt';
1166
1196
  }
1167
1197
  @define-mixin rs-subtitle-2{
1168
- --_rs-typography-letter-spacing:normal;
1198
+ --_rs-typography-letter-spacing:var(--rs-subtitle-2-letter-spacing, normal);
1169
1199
  --_rs-typography-text-transform:initial;
1170
1200
  --_rs-typography-font-variant-numeric:initial;
1171
1201
  --_rs-typography-font-family:var(
@@ -1252,7 +1282,7 @@
1252
1282
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
1253
1283
  }
1254
1284
  @define-mixin rs-h2-base{
1255
- --_rs-typography-letter-spacing:normal;
1285
+ --_rs-typography-letter-spacing:var(--rs-h2-letter-spacing, normal);
1256
1286
  --_rs-typography-text-transform:initial;
1257
1287
  --_rs-typography-font-variant-numeric:initial;
1258
1288
  --_rs-typography-font-family:var(
@@ -1304,7 +1334,7 @@
1304
1334
  font-feature-settings:'kern', 'liga', 'calt';
1305
1335
  }
1306
1336
  @define-mixin rs-h2{
1307
- --_rs-typography-letter-spacing:normal;
1337
+ --_rs-typography-letter-spacing:var(--rs-h2-letter-spacing, normal);
1308
1338
  --_rs-typography-text-transform:initial;
1309
1339
  --_rs-typography-font-variant-numeric:initial;
1310
1340
  --_rs-typography-font-family:var(
@@ -1385,7 +1415,7 @@
1385
1415
  margin-top:calc(var(--rs-flow-unit, 8px)*6);
1386
1416
  }
1387
1417
  @define-mixin rs-h3-base{
1388
- --_rs-typography-letter-spacing:normal;
1418
+ --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
1389
1419
  --_rs-typography-text-transform:initial;
1390
1420
  --_rs-typography-font-variant-numeric:initial;
1391
1421
  --_rs-typography-font-family:var(
@@ -1427,7 +1457,7 @@
1427
1457
  font-feature-settings:'kern', 'liga', 'calt';
1428
1458
  }
1429
1459
  @define-mixin rs-h3{
1430
- --_rs-typography-letter-spacing:normal;
1460
+ --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
1431
1461
  --_rs-typography-text-transform:initial;
1432
1462
  --_rs-typography-font-variant-numeric:initial;
1433
1463
  --_rs-typography-font-family:var(
@@ -1498,7 +1528,7 @@
1498
1528
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
1499
1529
  }
1500
1530
  @define-mixin rs-text-1-base{
1501
- --_rs-typography-letter-spacing:normal;
1531
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
1502
1532
  --_rs-typography-text-transform:initial;
1503
1533
  --_rs-typography-font-variant-numeric:initial;
1504
1534
  --_rs-typography-font-family:var(
@@ -1546,7 +1576,7 @@
1546
1576
  font-feature-settings:'kern', 'liga', 'calt';
1547
1577
  }
1548
1578
  @define-mixin rs-text-1{
1549
- --_rs-typography-letter-spacing:normal;
1579
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
1550
1580
  --_rs-typography-text-transform:initial;
1551
1581
  --_rs-typography-font-variant-numeric:initial;
1552
1582
  --_rs-typography-font-family:var(
@@ -1623,7 +1653,7 @@
1623
1653
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
1624
1654
  }
1625
1655
  @define-mixin rs-h4-base{
1626
- --_rs-typography-letter-spacing:normal;
1656
+ --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
1627
1657
  --_rs-typography-text-transform:initial;
1628
1658
  --_rs-typography-font-variant-numeric:initial;
1629
1659
  --_rs-typography-font-family:var(
@@ -1665,7 +1695,7 @@
1665
1695
  font-feature-settings:'kern', 'liga', 'calt';
1666
1696
  }
1667
1697
  @define-mixin rs-h4{
1668
- --_rs-typography-letter-spacing:normal;
1698
+ --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
1669
1699
  --_rs-typography-text-transform:initial;
1670
1700
  --_rs-typography-font-variant-numeric:initial;
1671
1701
  --_rs-typography-font-family:var(
@@ -1736,7 +1766,7 @@
1736
1766
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
1737
1767
  }
1738
1768
  @define-mixin rs-text-2-base{
1739
- --_rs-typography-letter-spacing:0.0015em;
1769
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
1740
1770
  --_rs-typography-text-transform:initial;
1741
1771
  --_rs-typography-font-variant-numeric:initial;
1742
1772
  --_rs-typography-font-family:var(
@@ -1784,7 +1814,7 @@
1784
1814
  font-feature-settings:'kern', 'liga', 'calt';
1785
1815
  }
1786
1816
  @define-mixin rs-text-2{
1787
- --_rs-typography-letter-spacing:0.0015em;
1817
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
1788
1818
  --_rs-typography-text-transform:initial;
1789
1819
  --_rs-typography-font-variant-numeric:initial;
1790
1820
  --_rs-typography-font-family:var(
@@ -1861,7 +1891,7 @@
1861
1891
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
1862
1892
  }
1863
1893
  @define-mixin rs-h5-base{
1864
- --_rs-typography-letter-spacing:normal;
1894
+ --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
1865
1895
  --_rs-typography-text-transform:initial;
1866
1896
  --_rs-typography-font-variant-numeric:initial;
1867
1897
  --_rs-typography-font-family:var(
@@ -1903,7 +1933,7 @@
1903
1933
  font-feature-settings:'kern', 'liga', 'calt';
1904
1934
  }
1905
1935
  @define-mixin rs-h5{
1906
- --_rs-typography-letter-spacing:normal;
1936
+ --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
1907
1937
  --_rs-typography-text-transform:initial;
1908
1938
  --_rs-typography-font-variant-numeric:initial;
1909
1939
  --_rs-typography-font-family:var(
@@ -1974,7 +2004,7 @@
1974
2004
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
1975
2005
  }
1976
2006
  @define-mixin rs-overline{
1977
- --_rs-typography-letter-spacing:0.1em;
2007
+ --_rs-typography-letter-spacing:var(--rs-overline-letter-spacing, 0.1em);
1978
2008
  --_rs-typography-text-transform:uppercase;
1979
2009
  --_rs-typography-font-variant-numeric:initial;
1980
2010
  --_rs-typography-font-family:var(
@@ -2052,7 +2082,7 @@
2052
2082
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
2053
2083
  }
2054
2084
  @define-mixin rs-text-3-base{
2055
- --_rs-typography-letter-spacing:0.0045em;
2085
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
2056
2086
  --_rs-typography-text-transform:initial;
2057
2087
  --_rs-typography-font-variant-numeric:initial;
2058
2088
  --_rs-typography-font-family:var(
@@ -2097,7 +2127,7 @@
2097
2127
  font-feature-settings:'kern', 'liga', 'calt';
2098
2128
  }
2099
2129
  @define-mixin rs-text-3{
2100
- --_rs-typography-letter-spacing:0.0045em;
2130
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
2101
2131
  --_rs-typography-text-transform:initial;
2102
2132
  --_rs-typography-font-variant-numeric:initial;
2103
2133
  --_rs-typography-font-family:var(
@@ -2223,10 +2253,16 @@
2223
2253
  position:relative;
2224
2254
 
2225
2255
  margin-top:var(
2226
- --_rs-typography-list-li-margin-top,
2227
- var(--_rs-typography-list-li-margin-top-fallback)
2256
+ --rs-typography-list-li-margin-top,
2257
+ var(
2258
+ --_rs-typography-list-li-margin-top,
2259
+ var(--_rs-typography-list-li-margin-top-fallback)
2260
+ )
2261
+ );
2262
+ padding-left:var(
2263
+ --rs-typography-list-li-padding-left,
2264
+ var(--_rs-typography-list-li-padding-left)
2228
2265
  );
2229
- padding-left:var(--_rs-typography-list-li-padding-left);
2230
2266
 
2231
2267
  list-style-type:none;
2232
2268
  }
@@ -2310,10 +2346,16 @@
2310
2346
  position:relative;
2311
2347
 
2312
2348
  margin-top:var(
2313
- --_rs-typography-list-li-margin-top,
2314
- var(--_rs-typography-list-li-margin-top-fallback)
2349
+ --rs-typography-list-li-margin-top,
2350
+ var(
2351
+ --_rs-typography-list-li-margin-top,
2352
+ var(--_rs-typography-list-li-margin-top-fallback)
2353
+ )
2354
+ );
2355
+ padding-left:var(
2356
+ --rs-typography-list-li-padding-left,
2357
+ var(--_rs-typography-list-li-padding-left)
2315
2358
  );
2316
- padding-left:var(--_rs-typography-list-li-padding-left);
2317
2359
 
2318
2360
  list-style-type:none;
2319
2361
  }