@rescui/typography 0.16.4 → 0.18.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.
@@ -19,6 +19,48 @@
19
19
  @define-mixin rs-typography-hardness-auto{
20
20
  --_rs-typography-hardness-color:initial;
21
21
  }
22
+ @define-mixin rs-typography-heading-hardness-hard{
23
+ --_rs-typography-heading-hardness-color:var(
24
+ --rs-color-hard,
25
+ rgb(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))
26
+ );
27
+ }
28
+ @define-mixin rs-typography-heading-hardness-average{
29
+ --_rs-typography-heading-hardness-color:var(
30
+ --rs-color-average,
31
+ rgba(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), 0.7)
32
+ );
33
+ }
34
+ @define-mixin rs-typography-heading-hardness-pale{
35
+ --_rs-typography-heading-hardness-color:var(
36
+ --rs-color-pale,
37
+ rgba(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), 0.5)
38
+ );
39
+ }
40
+ @define-mixin rs-typography-heading-hardness-auto{
41
+ --_rs-typography-heading-hardness-color:initial;
42
+ }
43
+ @define-mixin rs-typography-color-hard{
44
+ color:var(
45
+ --rs-color-hard,
46
+ rgb(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))
47
+ );
48
+ }
49
+ @define-mixin rs-typography-color-average{
50
+ color:var(
51
+ --rs-color-average,
52
+ rgba(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), 0.7)
53
+ );
54
+ }
55
+ @define-mixin rs-typography-color-pale{
56
+ color:var(
57
+ --rs-color-pale,
58
+ rgba(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), 0.5)
59
+ );
60
+ }
61
+ @define-mixin rs-typography-color-base{
62
+ color:var(--_rs-typography-base-color);
63
+ }
22
64
  @define-mixin rs-typography-digits-1{
23
65
  --_rs-typography-letter-spacing:-0.005em;
24
66
  --_rs-typography-text-transform:initial;
@@ -42,9 +84,12 @@
42
84
  71px
43
85
  );
44
86
  --_rs-typography-base-color:var(
87
+ --_rs-typography-hardness-color,
88
+ var(
45
89
  --rs-color-hard,
46
90
  rgb(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))
47
- );
91
+ )
92
+ );
48
93
  --_rs-typography-text-auto-offset:0;
49
94
 
50
95
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -84,9 +129,12 @@
84
129
  44px
85
130
  );
86
131
  --_rs-typography-base-color:var(
132
+ --_rs-typography-hardness-color,
133
+ var(
87
134
  --rs-color-hard,
88
135
  rgb(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))
89
- );
136
+ )
137
+ );
90
138
  --_rs-typography-text-auto-offset:0;
91
139
 
92
140
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -120,9 +168,12 @@
120
168
  142px
121
169
  );
122
170
  --_rs-typography-base-color:var(
171
+ --_rs-typography-heading-hardness-color,
172
+ var(
123
173
  --rs-color-hard,
124
174
  rgb(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))
125
- );
175
+ )
176
+ );
126
177
  --_rs-typography-text-auto-offset:0;
127
178
 
128
179
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -182,9 +233,12 @@
182
233
  92px
183
234
  );
184
235
  --_rs-typography-base-color:var(
236
+ --_rs-typography-heading-hardness-color,
237
+ var(
185
238
  --rs-color-hard,
186
239
  rgb(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))
187
- );
240
+ )
241
+ );
188
242
  --_rs-typography-text-auto-offset:0;
189
243
 
190
244
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -228,9 +282,12 @@
228
282
  72px
229
283
  );
230
284
  --_rs-typography-base-color:var(
285
+ --_rs-typography-heading-hardness-color,
286
+ var(
231
287
  --rs-color-hard,
232
288
  rgb(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))
233
- );
289
+ )
290
+ );
234
291
  --_rs-typography-text-auto-offset:0;
235
292
 
236
293
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -277,9 +334,12 @@
277
334
  49px
278
335
  );
279
336
  --_rs-typography-base-color:var(
337
+ --_rs-typography-hardness-color,
338
+ var(
280
339
  --rs-color-hard,
281
340
  rgb(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))
282
- );
341
+ )
342
+ );
283
343
  --_rs-typography-text-auto-offset:0;
284
344
 
285
345
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -323,9 +383,12 @@
323
383
  39px
324
384
  );
325
385
  --_rs-typography-base-color:var(
386
+ --_rs-typography-hardness-color,
387
+ var(
326
388
  --rs-color-hard,
327
389
  rgb(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))
328
- );
390
+ )
391
+ );
329
392
  --_rs-typography-text-auto-offset:0;
330
393
 
331
394
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -363,9 +426,12 @@
363
426
  );
364
427
  --_rs-typography-line-height:var(--rs-h1-line-height, 49px);
365
428
  --_rs-typography-base-color:var(
429
+ --_rs-typography-heading-hardness-color,
430
+ var(
366
431
  --rs-color-hard,
367
432
  rgb(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))
368
- );
433
+ )
434
+ );
369
435
  --_rs-typography-text-auto-offset:0;
370
436
 
371
437
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -404,9 +470,12 @@
404
470
  );
405
471
  --_rs-typography-line-height:var(--rs-h2-line-height, 42px);
406
472
  --_rs-typography-base-color:var(
473
+ --_rs-typography-heading-hardness-color,
474
+ var(
407
475
  --rs-color-hard,
408
476
  rgb(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))
409
- );
477
+ )
478
+ );
410
479
  --_rs-typography-text-auto-offset:0;
411
480
 
412
481
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -444,9 +513,12 @@
444
513
  );
445
514
  --_rs-typography-line-height:var(--rs-h3-line-height, 28px);
446
515
  --_rs-typography-base-color:var(
516
+ --_rs-typography-heading-hardness-color,
517
+ var(
447
518
  --rs-color-hard,
448
519
  rgb(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))
449
- );
520
+ )
521
+ );
450
522
  --_rs-typography-text-auto-offset:0;
451
523
 
452
524
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -474,9 +546,12 @@
474
546
  );
475
547
  --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
476
548
  --_rs-typography-base-color:var(
549
+ --_rs-typography-heading-hardness-color,
550
+ var(
477
551
  --rs-color-hard,
478
552
  rgb(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))
479
- );
553
+ )
554
+ );
480
555
  --_rs-typography-text-auto-offset:0;
481
556
 
482
557
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -504,9 +579,12 @@
504
579
  );
505
580
  --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
506
581
  --_rs-typography-base-color:var(
582
+ --_rs-typography-heading-hardness-color,
583
+ var(
507
584
  --rs-color-hard,
508
585
  rgb(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))
509
- );
586
+ )
587
+ );
510
588
  --_rs-typography-text-auto-offset:0;
511
589
 
512
590
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -654,9 +732,12 @@
654
732
  18px
655
733
  );
656
734
  --_rs-typography-base-color:var(
735
+ --_rs-typography-heading-hardness-color,
736
+ var(
657
737
  --rs-color-hard,
658
738
  rgb(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))
659
- );
739
+ )
740
+ );
660
741
  --_rs-typography-text-auto-offset:0px;
661
742
 
662
743
  --_rs-typography-ul-list-li-padding-left:initial;
@@ -667,15 +748,6 @@
667
748
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.15em;
668
749
  --_rs-typography-link-border-bottom-width-from-text:2px;
669
750
  }
670
- @define-mixin rs-typography-auto-offset-true{
671
- --_rs-typography-auto-offset-or-initial:var(
672
- --_rs-typography-text-auto-offset,
673
- 0
674
- );
675
- }
676
- @define-mixin rs-typography-auto-offset-false{
677
- --_rs-typography-auto-offset-or-initial:initial;
678
- }
679
751
  @define-mixin rs-typography-ul{
680
752
  --_rs-typography-list-li-content-base:'\2022';
681
753
  --_rs-typography-list-counter:initial;
@@ -906,10 +978,11 @@
906
978
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
907
979
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
908
980
  font-feature-settings:'kern', 'liga', 'calt';
909
-
981
+ }
982
+ @define-mixin rs-typography-paragraph-auto-offset-styles{
910
983
  & > p:not(:nth-child(1)),
911
984
  & > pre:not(:nth-child(1)){
912
- padding-top:var(--_rs-typography-auto-offset-or-initial);
985
+ margin-top:var(--_rs-typography-text-auto-offset, 0);
913
986
  }
914
987
  }
915
988
  @define-mixin rs-typography-list-styles{
@@ -1033,14 +1106,14 @@
1033
1106
  font-size:16px;
1034
1107
  line-height:24px;
1035
1108
  > code,
1036
- > .rs-code{
1109
+ > [class*='rs-code']{
1037
1110
  border:0;
1038
1111
 
1039
1112
  white-space:pre;
1040
1113
  word-break:normal;
1041
1114
  }
1042
1115
  code,
1043
- .rs-code{
1116
+ [class*='rs-code']{
1044
1117
  display:inline;
1045
1118
  overflow:visible;
1046
1119
 
@@ -1234,9 +1307,12 @@
1234
1307
  71px
1235
1308
  );
1236
1309
  --_rs-typography-base-color:var(
1310
+ --_rs-typography-hardness-color,
1311
+ var(
1237
1312
  --rs-color-hard,
1238
1313
  rgb(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))
1239
- );
1314
+ )
1315
+ );
1240
1316
  --_rs-typography-text-auto-offset:0;
1241
1317
  --_rs-typography-ul-list-li-padding-left:initial;
1242
1318
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1269,11 +1345,6 @@
1269
1345
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1270
1346
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1271
1347
  font-feature-settings:'kern', 'liga', 'calt';
1272
- & > p:not(:nth-child(1)),
1273
- & > pre:not(:nth-child(1)){
1274
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1275
- }
1276
-
1277
1348
  color:var(--_rs-typography-base-color);
1278
1349
  }
1279
1350
  @define-mixin rs-typography-digits-2-full{
@@ -1299,9 +1370,12 @@
1299
1370
  44px
1300
1371
  );
1301
1372
  --_rs-typography-base-color:var(
1373
+ --_rs-typography-hardness-color,
1374
+ var(
1302
1375
  --rs-color-hard,
1303
1376
  rgb(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))
1304
- );
1377
+ )
1378
+ );
1305
1379
  --_rs-typography-text-auto-offset:0;
1306
1380
  --_rs-typography-ul-list-li-padding-left:initial;
1307
1381
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1328,11 +1402,6 @@
1328
1402
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1329
1403
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1330
1404
  font-feature-settings:'kern', 'liga', 'calt';
1331
- & > p:not(:nth-child(1)),
1332
- & > pre:not(:nth-child(1)){
1333
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1334
- }
1335
-
1336
1405
  color:var(--_rs-typography-base-color);
1337
1406
  }
1338
1407
  @define-mixin rs-typography-super-hero-full{
@@ -1358,9 +1427,12 @@
1358
1427
  142px
1359
1428
  );
1360
1429
  --_rs-typography-base-color:var(
1430
+ --_rs-typography-heading-hardness-color,
1431
+ var(
1361
1432
  --rs-color-hard,
1362
1433
  rgb(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))
1363
- );
1434
+ )
1435
+ );
1364
1436
  --_rs-typography-text-auto-offset:0;
1365
1437
  --_rs-typography-ul-list-li-padding-left:initial;
1366
1438
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1413,11 +1485,6 @@
1413
1485
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1414
1486
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1415
1487
  font-feature-settings:'kern', 'liga', 'calt';
1416
- & > p:not(:nth-child(1)),
1417
- & > pre:not(:nth-child(1)){
1418
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1419
- }
1420
-
1421
1488
  color:var(--_rs-typography-base-color);
1422
1489
  }
1423
1490
  @define-mixin rs-typography-middle-hero-full{
@@ -1443,9 +1510,12 @@
1443
1510
  92px
1444
1511
  );
1445
1512
  --_rs-typography-base-color:var(
1513
+ --_rs-typography-heading-hardness-color,
1514
+ var(
1446
1515
  --rs-color-hard,
1447
1516
  rgb(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))
1448
- );
1517
+ )
1518
+ );
1449
1519
  --_rs-typography-text-auto-offset:0;
1450
1520
  --_rs-typography-ul-list-li-padding-left:initial;
1451
1521
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1485,11 +1555,6 @@
1485
1555
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1486
1556
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1487
1557
  font-feature-settings:'kern', 'liga', 'calt';
1488
- & > p:not(:nth-child(1)),
1489
- & > pre:not(:nth-child(1)){
1490
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1491
- }
1492
-
1493
1558
  color:var(--_rs-typography-base-color);
1494
1559
  }
1495
1560
  @define-mixin rs-typography-hero-full{
@@ -1512,9 +1577,12 @@
1512
1577
  72px
1513
1578
  );
1514
1579
  --_rs-typography-base-color:var(
1580
+ --_rs-typography-heading-hardness-color,
1581
+ var(
1515
1582
  --rs-color-hard,
1516
1583
  rgb(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))
1517
- );
1584
+ )
1585
+ );
1518
1586
  --_rs-typography-text-auto-offset:0;
1519
1587
  --_rs-typography-ul-list-li-padding-left:initial;
1520
1588
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1554,11 +1622,6 @@
1554
1622
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1555
1623
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1556
1624
  font-feature-settings:'kern', 'liga', 'calt';
1557
- & > p:not(:nth-child(1)),
1558
- & > pre:not(:nth-child(1)){
1559
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1560
- }
1561
-
1562
1625
  color:var(--_rs-typography-base-color);
1563
1626
  }
1564
1627
  @define-mixin rs-typography-h1-full{
@@ -1578,9 +1641,12 @@
1578
1641
  );
1579
1642
  --_rs-typography-line-height:var(--rs-h1-line-height, 49px);
1580
1643
  --_rs-typography-base-color:var(
1644
+ --_rs-typography-heading-hardness-color,
1645
+ var(
1581
1646
  --rs-color-hard,
1582
1647
  rgb(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))
1583
- );
1648
+ )
1649
+ );
1584
1650
  --_rs-typography-text-auto-offset:0;
1585
1651
  --_rs-typography-ul-list-li-padding-left:initial;
1586
1652
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1618,11 +1684,6 @@
1618
1684
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1619
1685
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1620
1686
  font-feature-settings:'kern', 'liga', 'calt';
1621
- & > p:not(:nth-child(1)),
1622
- & > pre:not(:nth-child(1)){
1623
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1624
- }
1625
-
1626
1687
  color:var(--_rs-typography-base-color);
1627
1688
  }
1628
1689
  @define-mixin rs-typography-h2-full{
@@ -1642,9 +1703,12 @@
1642
1703
  );
1643
1704
  --_rs-typography-line-height:var(--rs-h2-line-height, 42px);
1644
1705
  --_rs-typography-base-color:var(
1706
+ --_rs-typography-heading-hardness-color,
1707
+ var(
1645
1708
  --rs-color-hard,
1646
1709
  rgb(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))
1647
- );
1710
+ )
1711
+ );
1648
1712
  --_rs-typography-text-auto-offset:0;
1649
1713
  --_rs-typography-ul-list-li-padding-left:initial;
1650
1714
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1681,11 +1745,6 @@
1681
1745
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1682
1746
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1683
1747
  font-feature-settings:'kern', 'liga', 'calt';
1684
- & > p:not(:nth-child(1)),
1685
- & > pre:not(:nth-child(1)){
1686
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1687
- }
1688
-
1689
1748
  color:var(--_rs-typography-base-color);
1690
1749
  }
1691
1750
  @define-mixin rs-typography-h3-full{
@@ -1705,9 +1764,12 @@
1705
1764
  );
1706
1765
  --_rs-typography-line-height:var(--rs-h3-line-height, 28px);
1707
1766
  --_rs-typography-base-color:var(
1767
+ --_rs-typography-heading-hardness-color,
1768
+ var(
1708
1769
  --rs-color-hard,
1709
1770
  rgb(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))
1710
- );
1771
+ )
1772
+ );
1711
1773
  --_rs-typography-text-auto-offset:0;
1712
1774
  --_rs-typography-ul-list-li-padding-left:initial;
1713
1775
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1734,11 +1796,6 @@
1734
1796
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1735
1797
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1736
1798
  font-feature-settings:'kern', 'liga', 'calt';
1737
- & > p:not(:nth-child(1)),
1738
- & > pre:not(:nth-child(1)){
1739
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1740
- }
1741
-
1742
1799
  color:var(--_rs-typography-base-color);
1743
1800
  }
1744
1801
  @define-mixin rs-typography-h4-full{
@@ -1758,9 +1815,12 @@
1758
1815
  );
1759
1816
  --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
1760
1817
  --_rs-typography-base-color:var(
1818
+ --_rs-typography-heading-hardness-color,
1819
+ var(
1761
1820
  --rs-color-hard,
1762
1821
  rgb(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))
1763
- );
1822
+ )
1823
+ );
1764
1824
  --_rs-typography-text-auto-offset:0;
1765
1825
  --_rs-typography-ul-list-li-padding-left:initial;
1766
1826
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1787,11 +1847,6 @@
1787
1847
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1788
1848
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1789
1849
  font-feature-settings:'kern', 'liga', 'calt';
1790
- & > p:not(:nth-child(1)),
1791
- & > pre:not(:nth-child(1)){
1792
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1793
- }
1794
-
1795
1850
  color:var(--_rs-typography-base-color);
1796
1851
  }
1797
1852
  @define-mixin rs-typography-h5-full{
@@ -1811,9 +1866,12 @@
1811
1866
  );
1812
1867
  --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
1813
1868
  --_rs-typography-base-color:var(
1869
+ --_rs-typography-heading-hardness-color,
1870
+ var(
1814
1871
  --rs-color-hard,
1815
1872
  rgb(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))
1816
- );
1873
+ )
1874
+ );
1817
1875
  --_rs-typography-text-auto-offset:0;
1818
1876
  --_rs-typography-ul-list-li-padding-left:initial;
1819
1877
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1840,11 +1898,6 @@
1840
1898
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1841
1899
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1842
1900
  font-feature-settings:'kern', 'liga', 'calt';
1843
- & > p:not(:nth-child(1)),
1844
- & > pre:not(:nth-child(1)){
1845
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1846
- }
1847
-
1848
1901
  color:var(--_rs-typography-base-color);
1849
1902
  }
1850
1903
  @define-mixin rs-typography-subtitle-1-full{
@@ -1870,9 +1923,12 @@
1870
1923
  49px
1871
1924
  );
1872
1925
  --_rs-typography-base-color:var(
1926
+ --_rs-typography-hardness-color,
1927
+ var(
1873
1928
  --rs-color-hard,
1874
1929
  rgb(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))
1875
- );
1930
+ )
1931
+ );
1876
1932
  --_rs-typography-text-auto-offset:0;
1877
1933
  --_rs-typography-ul-list-li-padding-left:initial;
1878
1934
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1909,11 +1965,6 @@
1909
1965
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1910
1966
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1911
1967
  font-feature-settings:'kern', 'liga', 'calt';
1912
- & > p:not(:nth-child(1)),
1913
- & > pre:not(:nth-child(1)){
1914
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1915
- }
1916
-
1917
1968
  color:var(--_rs-typography-base-color);
1918
1969
  }
1919
1970
  @define-mixin rs-typography-subtitle-2-full{
@@ -1939,9 +1990,12 @@
1939
1990
  39px
1940
1991
  );
1941
1992
  --_rs-typography-base-color:var(
1993
+ --_rs-typography-hardness-color,
1994
+ var(
1942
1995
  --rs-color-hard,
1943
1996
  rgb(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))
1944
- );
1997
+ )
1998
+ );
1945
1999
  --_rs-typography-text-auto-offset:0;
1946
2000
  --_rs-typography-ul-list-li-padding-left:initial;
1947
2001
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -1978,11 +2032,6 @@
1978
2032
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
1979
2033
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
1980
2034
  font-feature-settings:'kern', 'liga', 'calt';
1981
- & > p:not(:nth-child(1)),
1982
- & > pre:not(:nth-child(1)){
1983
- padding-top:var(--_rs-typography-auto-offset-or-initial);
1984
- }
1985
-
1986
2035
  color:var(--_rs-typography-base-color);
1987
2036
  }
1988
2037
  @define-mixin rs-typography-overline-full{
@@ -2008,9 +2057,12 @@
2008
2057
  18px
2009
2058
  );
2010
2059
  --_rs-typography-base-color:var(
2060
+ --_rs-typography-heading-hardness-color,
2061
+ var(
2011
2062
  --rs-color-hard,
2012
2063
  rgb(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))
2013
- );
2064
+ )
2065
+ );
2014
2066
  --_rs-typography-text-auto-offset:0px;
2015
2067
  --_rs-typography-ul-list-li-padding-left:initial;
2016
2068
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -2037,11 +2089,6 @@
2037
2089
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
2038
2090
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
2039
2091
  font-feature-settings:'kern', 'liga', 'calt';
2040
- & > p:not(:nth-child(1)),
2041
- & > pre:not(:nth-child(1)){
2042
- padding-top:var(--_rs-typography-auto-offset-or-initial);
2043
- }
2044
-
2045
2092
  color:var(--_rs-typography-base-color);
2046
2093
  }
2047
2094
  @define-mixin rs-typography-text-1-full{
@@ -2099,11 +2146,6 @@
2099
2146
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
2100
2147
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
2101
2148
  font-feature-settings:'kern', 'liga', 'calt';
2102
- & > p:not(:nth-child(1)),
2103
- & > pre:not(:nth-child(1)){
2104
- padding-top:var(--_rs-typography-auto-offset-or-initial);
2105
- }
2106
-
2107
2149
  color:var(--_rs-typography-base-color);
2108
2150
  }
2109
2151
  @define-mixin rs-typography-text-2-full{
@@ -2161,11 +2203,6 @@
2161
2203
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
2162
2204
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
2163
2205
  font-feature-settings:'kern', 'liga', 'calt';
2164
- & > p:not(:nth-child(1)),
2165
- & > pre:not(:nth-child(1)){
2166
- padding-top:var(--_rs-typography-auto-offset-or-initial);
2167
- }
2168
-
2169
2206
  color:var(--_rs-typography-base-color);
2170
2207
  }
2171
2208
  @define-mixin rs-typography-text-3-full{
@@ -2220,11 +2257,6 @@
2220
2257
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
2221
2258
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
2222
2259
  font-feature-settings:'kern', 'liga', 'calt';
2223
- & > p:not(:nth-child(1)),
2224
- & > pre:not(:nth-child(1)){
2225
- padding-top:var(--_rs-typography-auto-offset-or-initial);
2226
- }
2227
-
2228
2260
  color:var(--_rs-typography-base-color);
2229
2261
  }
2230
2262
  @define-mixin rs-typography-ul-full{
@@ -2406,14 +2438,14 @@
2406
2438
  font-size:16px;
2407
2439
  line-height:24px;
2408
2440
  > code,
2409
- > .rs-code{
2441
+ > [class*='rs-code']{
2410
2442
  border:0;
2411
2443
 
2412
2444
  white-space:pre;
2413
2445
  word-break:normal;
2414
2446
  }
2415
2447
  code,
2416
- .rs-code{
2448
+ [class*='rs-code']{
2417
2449
  display:inline;
2418
2450
  overflow:visible;
2419
2451
 
@@ -2603,9 +2635,12 @@
2603
2635
  71px
2604
2636
  );
2605
2637
  --_rs-typography-base-color:var(
2638
+ --_rs-typography-hardness-color,
2639
+ var(
2606
2640
  --rs-color-hard,
2607
2641
  rgb(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))
2608
- );
2642
+ )
2643
+ );
2609
2644
  --_rs-typography-text-auto-offset:0;
2610
2645
  --_rs-typography-ul-list-li-padding-left:initial;
2611
2646
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -2647,9 +2682,12 @@
2647
2682
  44px
2648
2683
  );
2649
2684
  --_rs-typography-base-color:var(
2685
+ --_rs-typography-hardness-color,
2686
+ var(
2650
2687
  --rs-color-hard,
2651
2688
  rgb(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))
2652
- );
2689
+ )
2690
+ );
2653
2691
  --_rs-typography-text-auto-offset:0;
2654
2692
  --_rs-typography-ul-list-li-padding-left:initial;
2655
2693
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -2683,9 +2721,12 @@
2683
2721
  142px
2684
2722
  );
2685
2723
  --_rs-typography-base-color:var(
2724
+ --_rs-typography-heading-hardness-color,
2725
+ var(
2686
2726
  --rs-color-hard,
2687
2727
  rgb(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))
2688
- );
2728
+ )
2729
+ );
2689
2730
  --_rs-typography-text-auto-offset:0;
2690
2731
  --_rs-typography-ul-list-li-padding-left:initial;
2691
2732
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -2749,9 +2790,12 @@
2749
2790
  92px
2750
2791
  );
2751
2792
  --_rs-typography-base-color:var(
2793
+ --_rs-typography-heading-hardness-color,
2794
+ var(
2752
2795
  --rs-color-hard,
2753
2796
  rgb(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))
2754
- );
2797
+ )
2798
+ );
2755
2799
  --_rs-typography-text-auto-offset:0;
2756
2800
  --_rs-typography-ul-list-li-padding-left:initial;
2757
2801
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -2797,9 +2841,12 @@
2797
2841
  72px
2798
2842
  );
2799
2843
  --_rs-typography-base-color:var(
2844
+ --_rs-typography-heading-hardness-color,
2845
+ var(
2800
2846
  --rs-color-hard,
2801
2847
  rgb(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))
2802
- );
2848
+ )
2849
+ );
2803
2850
  --_rs-typography-text-auto-offset:0;
2804
2851
  --_rs-typography-ul-list-li-padding-left:initial;
2805
2852
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -2848,9 +2895,12 @@
2848
2895
  49px
2849
2896
  );
2850
2897
  --_rs-typography-base-color:var(
2898
+ --_rs-typography-hardness-color,
2899
+ var(
2851
2900
  --rs-color-hard,
2852
2901
  rgb(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))
2853
- );
2902
+ )
2903
+ );
2854
2904
  --_rs-typography-text-auto-offset:0;
2855
2905
  --_rs-typography-ul-list-li-padding-left:initial;
2856
2906
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -2896,9 +2946,12 @@
2896
2946
  39px
2897
2947
  );
2898
2948
  --_rs-typography-base-color:var(
2949
+ --_rs-typography-hardness-color,
2950
+ var(
2899
2951
  --rs-color-hard,
2900
2952
  rgb(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))
2901
- );
2953
+ )
2954
+ );
2902
2955
  --_rs-typography-text-auto-offset:0;
2903
2956
  --_rs-typography-ul-list-li-padding-left:initial;
2904
2957
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -2938,9 +2991,12 @@
2938
2991
  );
2939
2992
  --_rs-typography-line-height:var(--rs-h1-line-height, 49px);
2940
2993
  --_rs-typography-base-color:var(
2994
+ --_rs-typography-heading-hardness-color,
2995
+ var(
2941
2996
  --rs-color-hard,
2942
2997
  rgb(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))
2943
- );
2998
+ )
2999
+ );
2944
3000
  --_rs-typography-text-auto-offset:0;
2945
3001
  --_rs-typography-ul-list-li-padding-left:initial;
2946
3002
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -2981,9 +3037,12 @@
2981
3037
  );
2982
3038
  --_rs-typography-line-height:var(--rs-h2-line-height, 42px);
2983
3039
  --_rs-typography-base-color:var(
3040
+ --_rs-typography-heading-hardness-color,
3041
+ var(
2984
3042
  --rs-color-hard,
2985
3043
  rgb(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))
2986
- );
3044
+ )
3045
+ );
2987
3046
  --_rs-typography-text-auto-offset:0;
2988
3047
  --_rs-typography-ul-list-li-padding-left:initial;
2989
3048
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -3023,9 +3082,12 @@
3023
3082
  );
3024
3083
  --_rs-typography-line-height:var(--rs-h3-line-height, 28px);
3025
3084
  --_rs-typography-base-color:var(
3085
+ --_rs-typography-heading-hardness-color,
3086
+ var(
3026
3087
  --rs-color-hard,
3027
3088
  rgb(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))
3028
- );
3089
+ )
3090
+ );
3029
3091
  --_rs-typography-text-auto-offset:0;
3030
3092
  --_rs-typography-ul-list-li-padding-left:initial;
3031
3093
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -3053,9 +3115,12 @@
3053
3115
  );
3054
3116
  --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
3055
3117
  --_rs-typography-base-color:var(
3118
+ --_rs-typography-heading-hardness-color,
3119
+ var(
3056
3120
  --rs-color-hard,
3057
3121
  rgb(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))
3058
- );
3122
+ )
3123
+ );
3059
3124
  --_rs-typography-text-auto-offset:0;
3060
3125
  --_rs-typography-ul-list-li-padding-left:initial;
3061
3126
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -3083,9 +3148,12 @@
3083
3148
  );
3084
3149
  --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
3085
3150
  --_rs-typography-base-color:var(
3151
+ --_rs-typography-heading-hardness-color,
3152
+ var(
3086
3153
  --rs-color-hard,
3087
3154
  rgb(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))
3088
- );
3155
+ )
3156
+ );
3089
3157
  --_rs-typography-text-auto-offset:0;
3090
3158
  --_rs-typography-ul-list-li-padding-left:initial;
3091
3159
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -3119,9 +3187,12 @@
3119
3187
  18px
3120
3188
  );
3121
3189
  --_rs-typography-base-color:var(
3190
+ --_rs-typography-heading-hardness-color,
3191
+ var(
3122
3192
  --rs-color-hard,
3123
3193
  rgb(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))
3124
- );
3194
+ )
3195
+ );
3125
3196
  --_rs-typography-text-auto-offset:0px;
3126
3197
  --_rs-typography-ul-list-li-padding-left:initial;
3127
3198
  --_rs-typography-ol-list-li-padding-left:initial;
@@ -3278,17 +3349,33 @@
3278
3349
  --_rs-typography-hardness-color:initial;
3279
3350
  }
3280
3351
  }
3281
- @define-mixin rs-text-cn-auto-offset-true{
3352
+ @define-mixin rs-text-cn-heading-hardness-hard{
3282
3353
  &:not(html){
3283
- --_rs-typography-auto-offset-or-initial:var(
3284
- --_rs-typography-text-auto-offset,
3285
- 0
3286
- );
3354
+ --_rs-typography-heading-hardness-color:var(
3355
+ --rs-color-hard,
3356
+ rgb(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))
3357
+ );
3358
+ }
3359
+ }
3360
+ @define-mixin rs-text-cn-heading-hardness-average{
3361
+ &:not(html){
3362
+ --_rs-typography-heading-hardness-color:var(
3363
+ --rs-color-average,
3364
+ rgba(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), 0.7)
3365
+ );
3366
+ }
3367
+ }
3368
+ @define-mixin rs-text-cn-heading-hardness-pale{
3369
+ &:not(html){
3370
+ --_rs-typography-heading-hardness-color:var(
3371
+ --rs-color-pale,
3372
+ rgba(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), 0.5)
3373
+ );
3287
3374
  }
3288
3375
  }
3289
- @define-mixin rs-text-cn-auto-offset-false{
3376
+ @define-mixin rs-text-cn-heading-hardness-auto{
3290
3377
  &:not(html){
3291
- --_rs-typography-auto-offset-or-initial:initial;
3378
+ --_rs-typography-heading-hardness-color:initial;
3292
3379
  }
3293
3380
  }
3294
3381
  @define-mixin rs-text-cn-list-offset-items-8{