@rescui/typography 0.18.1 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/create-text-cn.d.ts +27 -3
  2. package/lib/index-moduled.css +184 -138
  3. package/lib/index-moduled.p.module.css.js +120 -120
  4. package/lib/index.css +69 -23
  5. package/lib/mixins.p.css +69 -23
  6. package/lib/mixins.pcss +69 -23
  7. package/lib/public-api.p.css +165 -47
  8. package/lib/public-api.pcss +165 -47
  9. package/package.json +2 -2
package/lib/public-api.p.css CHANGED
@@ -1132,6 +1132,33 @@
1132
1132
  line-height:inherit;
1133
1133
  }
1134
1134
  }
1135
+ @define-mixin rs-typography-link-state-hover{
1136
+ --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
1137
+
1138
+ --_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));
1139
+ --_rs-typography-link-border-bottom-color-from-state-hover:var(
1140
+ --_rs-typography-link-hover-underline-color-wf
1141
+ );
1142
+ --_rs-typography-link-border-image-from-state-hover:var(
1143
+ --_rs-typography-link-hover-border-image-wf
1144
+ );
1145
+
1146
+ --_rs-typography-link-color-from-state-hover:var(
1147
+ --_rs-typography-link-hover-color-wf
1148
+ );
1149
+ --_rs-typography-link-background-size-from-state-hover:auto calc(100% + 4px);
1150
+ --_rs-typography-link-after-margin-right-from-state-hover:var(
1151
+ --_rs-typography-link-hover-after-offset-right-wf
1152
+ );
1153
+ --_rs-typography-link-after-margin-left-from-state-hover:var(
1154
+ --_rs-typography-link-hover-after-offset-left-wf
1155
+ );
1156
+ }
1157
+ @define-mixin rs-typography-link-state-focus-visible{
1158
+ --_rs-typography-link-box-shadow-from-state-focus-visible:var(
1159
+ --_rs-color-primary
1160
+ ) 0 0 0 4px;
1161
+ }
1135
1162
  @define-mixin rs-typography-link-styles{
1136
1163
  --_rs-typography-link-border-bottom-width-wf:var(
1137
1164
  --_rs-typography-link-border-bottom-width-from-text,
@@ -1201,24 +1228,64 @@
1201
1228
  --_rs-typography-link-transition,
1202
1229
  none
1203
1230
  );
1231
+ --_rs-typography-link-padding-bottom-final:var(
1232
+ --_rs-typography-link-padding-bottom-from-state-hover,
1233
+ 1px
1234
+ );
1235
+ --_rs-typography-link-border-bottom-width-final:var(
1236
+ --_rs-typography-link-border-bottom-width-from-state-hover,
1237
+ var(--_rs-typography-link-border-bottom-width-wf)
1238
+ );
1239
+ --_rs-typography-link-border-bottom-color-final:var(
1240
+ --_rs-typography-link-border-bottom-color-from-state-hover,
1241
+ var(--_rs-typography-link-underline-color-wf)
1242
+ );
1243
+ --_rs-typography-link-border-image-final:var(
1244
+ --_rs-typography-link-border-image-from-state-hover,
1245
+ initial
1246
+ );
1247
+ --_rs-typography-link-color-final:var(
1248
+ --_rs-typography-link-color-from-state-hover,
1249
+ var(--_rs-typography-link-color-wf)
1250
+ );
1251
+ --_rs-typography-link-background-size-final:var(
1252
+ --_rs-typography-link-background-size-from-state-hover,
1253
+ auto 0
1254
+ );
1255
+ --_rs-typography-link-after-margin-right-final:var(
1256
+ --_rs-typography-link-after-margin-right-from-state-hover,
1257
+ var(--_rs-typography-link-after-offset-right-wf)
1258
+ );
1259
+ --_rs-typography-link-after-margin-left-final:var(
1260
+ --_rs-typography-link-after-margin-left-from-state-hover,
1261
+ var(--_rs-typography-link-after-offset-left-wf)
1262
+ );
1263
+ --_rs-typography-link-box-shadow-final:var(
1264
+ --_rs-typography-link-box-shadow-from-state-focus-visible,
1265
+ initial
1266
+ );
1204
1267
 
1205
- padding-bottom:1px;
1268
+ padding-bottom:var(--_rs-typography-link-padding-bottom-final);
1206
1269
 
1207
- border-bottom-width:var(--_rs-typography-link-border-bottom-width-wf);
1270
+ border-bottom-width:var(--_rs-typography-link-border-bottom-width-final);
1208
1271
  border-bottom-style:solid;
1209
- border-bottom-color:var(--_rs-typography-link-underline-color-wf);
1272
+ border-bottom-color:var(--_rs-typography-link-border-bottom-color-final);
1273
+ -o-border-image:var(--_rs-typography-link-border-image-final);
1274
+ border-image:var(--_rs-typography-link-border-image-final);
1210
1275
 
1211
1276
  outline:none;
1212
1277
 
1213
1278
  cursor:pointer;
1214
1279
  text-decoration:none;
1215
1280
 
1216
- color:var(--_rs-typography-link-color-wf);
1281
+ color:var(--_rs-typography-link-color-final);
1217
1282
 
1218
1283
  background-image:var(--_rs-typography-link-background-image-wf);
1219
1284
  background-repeat:repeat-x;
1220
1285
  background-position:left calc(100% + 4px);
1221
- background-size:auto 0;
1286
+ background-size:var(--_rs-typography-link-background-size-final);
1287
+ -webkit-box-shadow:var(--_rs-typography-link-box-shadow-final);
1288
+ box-shadow:var(--_rs-typography-link-box-shadow-final);
1222
1289
 
1223
1290
  font-size:inherit;
1224
1291
  line-height:inherit;
@@ -1227,21 +1294,30 @@
1227
1294
 
1228
1295
  &:active,
1229
1296
  &:focus{
1230
- color:var(--_rs-typography-link-color-wf);
1297
+ color:var(--_rs-typography-link-color-final);
1231
1298
  }
1232
1299
 
1233
1300
  &:hover{
1234
- padding-bottom:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
1235
-
1236
- border-bottom-width:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
1237
- border-bottom-color:var(--_rs-typography-link-hover-underline-color-wf);
1238
- -o-border-image:var(--_rs-typography-link-hover-border-image-wf);
1239
- border-image:var(--_rs-typography-link-hover-border-image-wf);
1301
+ --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
1302
+ --_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));
1303
+ --_rs-typography-link-border-bottom-color-from-state-hover:var(
1304
+ --_rs-typography-link-hover-underline-color-wf
1305
+ );
1306
+ --_rs-typography-link-border-image-from-state-hover:var(
1307
+ --_rs-typography-link-hover-border-image-wf
1308
+ );
1309
+ --_rs-typography-link-color-from-state-hover:var(
1310
+ --_rs-typography-link-hover-color-wf
1311
+ );
1312
+ --_rs-typography-link-background-size-from-state-hover:auto calc(100% + 4px);
1313
+ --_rs-typography-link-after-margin-right-from-state-hover:var(
1314
+ --_rs-typography-link-hover-after-offset-right-wf
1315
+ );
1316
+ --_rs-typography-link-after-margin-left-from-state-hover:var(
1317
+ --_rs-typography-link-hover-after-offset-left-wf
1318
+ );
1240
1319
 
1241
1320
  text-decoration:none;
1242
-
1243
- color:var(--_rs-typography-link-hover-color-wf);
1244
- background-size:auto calc(100% + 4px);
1245
1321
  }
1246
1322
 
1247
1323
  &:after{
@@ -1250,8 +1326,8 @@
1250
1326
  var(--_rs-typography-link-after-display-wf)
1251
1327
  );
1252
1328
 
1253
- margin-right:var(--_rs-typography-link-after-offset-right-wf);
1254
- margin-left:var(--_rs-typography-link-after-offset-left-wf);
1329
+ margin-right:var(--_rs-typography-link-after-margin-right-final);
1330
+ margin-left:var(--_rs-typography-link-after-margin-left-final);
1255
1331
 
1256
1332
  content:var(--_rs-typography-link-after-content-or-initial, '\2192');
1257
1333
 
@@ -1260,14 +1336,10 @@
1260
1336
  transition:margin-right 300ms, margin-left 300ms;
1261
1337
  }
1262
1338
 
1263
- &:hover:after{
1264
- margin-right:var(--_rs-typography-link-hover-after-offset-right-wf);
1265
- margin-left:var(--_rs-typography-link-hover-after-offset-left-wf);
1266
- }
1267
-
1268
1339
  &:focus[data-focus-method='key']{
1269
- -webkit-box-shadow:var(--_rs-color-primary) 0 0 0 4px;
1270
- box-shadow:var(--_rs-color-primary) 0 0 0 4px;
1340
+ --_rs-typography-link-box-shadow-from-state-focus-visible:var(
1341
+ --_rs-color-primary
1342
+ ) 0 0 0 4px;
1271
1343
  }
1272
1344
  }
1273
1345
  @define-mixin rs-typography-reset-letter-spacing{
@@ -2554,38 +2626,87 @@
2554
2626
  --_rs-typography-link-transition,
2555
2627
  none
2556
2628
  );
2557
- padding-bottom:1px;
2558
- border-bottom-width:var(--_rs-typography-link-border-bottom-width-wf);
2629
+ --_rs-typography-link-padding-bottom-final:var(
2630
+ --_rs-typography-link-padding-bottom-from-state-hover,
2631
+ 1px
2632
+ );
2633
+ --_rs-typography-link-border-bottom-width-final:var(
2634
+ --_rs-typography-link-border-bottom-width-from-state-hover,
2635
+ var(--_rs-typography-link-border-bottom-width-wf)
2636
+ );
2637
+ --_rs-typography-link-border-bottom-color-final:var(
2638
+ --_rs-typography-link-border-bottom-color-from-state-hover,
2639
+ var(--_rs-typography-link-underline-color-wf)
2640
+ );
2641
+ --_rs-typography-link-border-image-final:var(
2642
+ --_rs-typography-link-border-image-from-state-hover,
2643
+ initial
2644
+ );
2645
+ --_rs-typography-link-color-final:var(
2646
+ --_rs-typography-link-color-from-state-hover,
2647
+ var(--_rs-typography-link-color-wf)
2648
+ );
2649
+ --_rs-typography-link-background-size-final:var(
2650
+ --_rs-typography-link-background-size-from-state-hover,
2651
+ auto 0
2652
+ );
2653
+ --_rs-typography-link-after-margin-right-final:var(
2654
+ --_rs-typography-link-after-margin-right-from-state-hover,
2655
+ var(--_rs-typography-link-after-offset-right-wf)
2656
+ );
2657
+ --_rs-typography-link-after-margin-left-final:var(
2658
+ --_rs-typography-link-after-margin-left-from-state-hover,
2659
+ var(--_rs-typography-link-after-offset-left-wf)
2660
+ );
2661
+ --_rs-typography-link-box-shadow-final:var(
2662
+ --_rs-typography-link-box-shadow-from-state-focus-visible,
2663
+ initial
2664
+ );
2665
+ padding-bottom:var(--_rs-typography-link-padding-bottom-final);
2666
+ border-bottom-width:var(--_rs-typography-link-border-bottom-width-final);
2559
2667
  border-bottom-style:solid;
2560
- border-bottom-color:var(--_rs-typography-link-underline-color-wf);
2668
+ border-bottom-color:var(--_rs-typography-link-border-bottom-color-final);
2669
+ -o-border-image:var(--_rs-typography-link-border-image-final);
2670
+ border-image:var(--_rs-typography-link-border-image-final);
2561
2671
  outline:none;
2562
2672
  cursor:pointer;
2563
2673
  text-decoration:none;
2564
- color:var(--_rs-typography-link-color-wf);
2674
+ color:var(--_rs-typography-link-color-final);
2565
2675
  background-image:var(--_rs-typography-link-background-image-wf);
2566
2676
  background-repeat:repeat-x;
2567
2677
  background-position:left calc(100% + 4px);
2568
- background-size:auto 0;
2678
+ background-size:var(--_rs-typography-link-background-size-final);
2679
+ -webkit-box-shadow:var(--_rs-typography-link-box-shadow-final);
2680
+ box-shadow:var(--_rs-typography-link-box-shadow-final);
2569
2681
  font-size:inherit;
2570
2682
  line-height:inherit;
2571
2683
  -webkit-transition:var(--_rs-typography-link-transition-wf);
2572
2684
  transition:var(--_rs-typography-link-transition-wf);
2573
2685
  &:active,
2574
2686
  &:focus{
2575
- color:var(--_rs-typography-link-color-wf);
2687
+ color:var(--_rs-typography-link-color-final);
2576
2688
  }
2577
2689
  &:hover{
2578
- padding-bottom:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
2579
-
2580
- border-bottom-width:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
2581
- border-bottom-color:var(--_rs-typography-link-hover-underline-color-wf);
2582
- -o-border-image:var(--_rs-typography-link-hover-border-image-wf);
2583
- border-image:var(--_rs-typography-link-hover-border-image-wf);
2690
+ --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
2691
+ --_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));
2692
+ --_rs-typography-link-border-bottom-color-from-state-hover:var(
2693
+ --_rs-typography-link-hover-underline-color-wf
2694
+ );
2695
+ --_rs-typography-link-border-image-from-state-hover:var(
2696
+ --_rs-typography-link-hover-border-image-wf
2697
+ );
2698
+ --_rs-typography-link-color-from-state-hover:var(
2699
+ --_rs-typography-link-hover-color-wf
2700
+ );
2701
+ --_rs-typography-link-background-size-from-state-hover:auto calc(100% + 4px);
2702
+ --_rs-typography-link-after-margin-right-from-state-hover:var(
2703
+ --_rs-typography-link-hover-after-offset-right-wf
2704
+ );
2705
+ --_rs-typography-link-after-margin-left-from-state-hover:var(
2706
+ --_rs-typography-link-hover-after-offset-left-wf
2707
+ );
2584
2708
 
2585
2709
  text-decoration:none;
2586
-
2587
- color:var(--_rs-typography-link-hover-color-wf);
2588
- background-size:auto calc(100% + 4px);
2589
2710
  }
2590
2711
  &:after{
2591
2712
  display:var(
@@ -2593,8 +2714,8 @@
2593
2714
  var(--_rs-typography-link-after-display-wf)
2594
2715
  );
2595
2716
 
2596
- margin-right:var(--_rs-typography-link-after-offset-right-wf);
2597
- margin-left:var(--_rs-typography-link-after-offset-left-wf);
2717
+ margin-right:var(--_rs-typography-link-after-margin-right-final);
2718
+ margin-left:var(--_rs-typography-link-after-margin-left-final);
2598
2719
 
2599
2720
  content:var(--_rs-typography-link-after-content-or-initial, '\2192');
2600
2721
 
@@ -2602,13 +2723,10 @@
2602
2723
 
2603
2724
  transition:margin-right 300ms, margin-left 300ms;
2604
2725
  }
2605
- &:hover:after{
2606
- margin-right:var(--_rs-typography-link-hover-after-offset-right-wf);
2607
- margin-left:var(--_rs-typography-link-hover-after-offset-left-wf);
2608
- }
2609
2726
  &:focus[data-focus-method='key']{
2610
- -webkit-box-shadow:var(--_rs-color-primary) 0 0 0 4px;
2611
- box-shadow:var(--_rs-color-primary) 0 0 0 4px;
2727
+ --_rs-typography-link-box-shadow-from-state-focus-visible:var(
2728
+ --_rs-color-primary
2729
+ ) 0 0 0 4px;
2612
2730
  }
2613
2731
  }
2614
2732
  @define-mixin rs-text-cn-digits-1{
package/lib/public-api.pcss CHANGED
@@ -1132,6 +1132,33 @@
1132
1132
  line-height:inherit;
1133
1133
  }
1134
1134
  }
1135
+ @define-mixin rs-typography-link-state-hover{
1136
+ --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
1137
+
1138
+ --_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));
1139
+ --_rs-typography-link-border-bottom-color-from-state-hover:var(
1140
+ --_rs-typography-link-hover-underline-color-wf
1141
+ );
1142
+ --_rs-typography-link-border-image-from-state-hover:var(
1143
+ --_rs-typography-link-hover-border-image-wf
1144
+ );
1145
+
1146
+ --_rs-typography-link-color-from-state-hover:var(
1147
+ --_rs-typography-link-hover-color-wf
1148
+ );
1149
+ --_rs-typography-link-background-size-from-state-hover:auto calc(100% + 4px);
1150
+ --_rs-typography-link-after-margin-right-from-state-hover:var(
1151
+ --_rs-typography-link-hover-after-offset-right-wf
1152
+ );
1153
+ --_rs-typography-link-after-margin-left-from-state-hover:var(
1154
+ --_rs-typography-link-hover-after-offset-left-wf
1155
+ );
1156
+ }
1157
+ @define-mixin rs-typography-link-state-focus-visible{
1158
+ --_rs-typography-link-box-shadow-from-state-focus-visible:var(
1159
+ --_rs-color-primary
1160
+ ) 0 0 0 4px;
1161
+ }
1135
1162
  @define-mixin rs-typography-link-styles{
1136
1163
  --_rs-typography-link-border-bottom-width-wf:var(
1137
1164
  --_rs-typography-link-border-bottom-width-from-text,
@@ -1201,24 +1228,64 @@
1201
1228
  --_rs-typography-link-transition,
1202
1229
  none
1203
1230
  );
1231
+ --_rs-typography-link-padding-bottom-final:var(
1232
+ --_rs-typography-link-padding-bottom-from-state-hover,
1233
+ 1px
1234
+ );
1235
+ --_rs-typography-link-border-bottom-width-final:var(
1236
+ --_rs-typography-link-border-bottom-width-from-state-hover,
1237
+ var(--_rs-typography-link-border-bottom-width-wf)
1238
+ );
1239
+ --_rs-typography-link-border-bottom-color-final:var(
1240
+ --_rs-typography-link-border-bottom-color-from-state-hover,
1241
+ var(--_rs-typography-link-underline-color-wf)
1242
+ );
1243
+ --_rs-typography-link-border-image-final:var(
1244
+ --_rs-typography-link-border-image-from-state-hover,
1245
+ initial
1246
+ );
1247
+ --_rs-typography-link-color-final:var(
1248
+ --_rs-typography-link-color-from-state-hover,
1249
+ var(--_rs-typography-link-color-wf)
1250
+ );
1251
+ --_rs-typography-link-background-size-final:var(
1252
+ --_rs-typography-link-background-size-from-state-hover,
1253
+ auto 0
1254
+ );
1255
+ --_rs-typography-link-after-margin-right-final:var(
1256
+ --_rs-typography-link-after-margin-right-from-state-hover,
1257
+ var(--_rs-typography-link-after-offset-right-wf)
1258
+ );
1259
+ --_rs-typography-link-after-margin-left-final:var(
1260
+ --_rs-typography-link-after-margin-left-from-state-hover,
1261
+ var(--_rs-typography-link-after-offset-left-wf)
1262
+ );
1263
+ --_rs-typography-link-box-shadow-final:var(
1264
+ --_rs-typography-link-box-shadow-from-state-focus-visible,
1265
+ initial
1266
+ );
1204
1267
 
1205
- padding-bottom:1px;
1268
+ padding-bottom:var(--_rs-typography-link-padding-bottom-final);
1206
1269
 
1207
- border-bottom-width:var(--_rs-typography-link-border-bottom-width-wf);
1270
+ border-bottom-width:var(--_rs-typography-link-border-bottom-width-final);
1208
1271
  border-bottom-style:solid;
1209
- border-bottom-color:var(--_rs-typography-link-underline-color-wf);
1272
+ border-bottom-color:var(--_rs-typography-link-border-bottom-color-final);
1273
+ -o-border-image:var(--_rs-typography-link-border-image-final);
1274
+ border-image:var(--_rs-typography-link-border-image-final);
1210
1275
 
1211
1276
  outline:none;
1212
1277
 
1213
1278
  cursor:pointer;
1214
1279
  text-decoration:none;
1215
1280
 
1216
- color:var(--_rs-typography-link-color-wf);
1281
+ color:var(--_rs-typography-link-color-final);
1217
1282
 
1218
1283
  background-image:var(--_rs-typography-link-background-image-wf);
1219
1284
  background-repeat:repeat-x;
1220
1285
  background-position:left calc(100% + 4px);
1221
- background-size:auto 0;
1286
+ background-size:var(--_rs-typography-link-background-size-final);
1287
+ -webkit-box-shadow:var(--_rs-typography-link-box-shadow-final);
1288
+ box-shadow:var(--_rs-typography-link-box-shadow-final);
1222
1289
 
1223
1290
  font-size:inherit;
1224
1291
  line-height:inherit;
@@ -1227,21 +1294,30 @@
1227
1294
 
1228
1295
  &:active,
1229
1296
  &:focus{
1230
- color:var(--_rs-typography-link-color-wf);
1297
+ color:var(--_rs-typography-link-color-final);
1231
1298
  }
1232
1299
 
1233
1300
  &:hover{
1234
- padding-bottom:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
1235
-
1236
- border-bottom-width:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
1237
- border-bottom-color:var(--_rs-typography-link-hover-underline-color-wf);
1238
- -o-border-image:var(--_rs-typography-link-hover-border-image-wf);
1239
- border-image:var(--_rs-typography-link-hover-border-image-wf);
1301
+ --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
1302
+ --_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));
1303
+ --_rs-typography-link-border-bottom-color-from-state-hover:var(
1304
+ --_rs-typography-link-hover-underline-color-wf
1305
+ );
1306
+ --_rs-typography-link-border-image-from-state-hover:var(
1307
+ --_rs-typography-link-hover-border-image-wf
1308
+ );
1309
+ --_rs-typography-link-color-from-state-hover:var(
1310
+ --_rs-typography-link-hover-color-wf
1311
+ );
1312
+ --_rs-typography-link-background-size-from-state-hover:auto calc(100% + 4px);
1313
+ --_rs-typography-link-after-margin-right-from-state-hover:var(
1314
+ --_rs-typography-link-hover-after-offset-right-wf
1315
+ );
1316
+ --_rs-typography-link-after-margin-left-from-state-hover:var(
1317
+ --_rs-typography-link-hover-after-offset-left-wf
1318
+ );
1240
1319
 
1241
1320
  text-decoration:none;
1242
-
1243
- color:var(--_rs-typography-link-hover-color-wf);
1244
- background-size:auto calc(100% + 4px);
1245
1321
  }
1246
1322
 
1247
1323
  &:after{
@@ -1250,8 +1326,8 @@
1250
1326
  var(--_rs-typography-link-after-display-wf)
1251
1327
  );
1252
1328
 
1253
- margin-right:var(--_rs-typography-link-after-offset-right-wf);
1254
- margin-left:var(--_rs-typography-link-after-offset-left-wf);
1329
+ margin-right:var(--_rs-typography-link-after-margin-right-final);
1330
+ margin-left:var(--_rs-typography-link-after-margin-left-final);
1255
1331
 
1256
1332
  content:var(--_rs-typography-link-after-content-or-initial, '\2192');
1257
1333
 
@@ -1260,14 +1336,10 @@
1260
1336
  transition:margin-right 300ms, margin-left 300ms;
1261
1337
  }
1262
1338
 
1263
- &:hover:after{
1264
- margin-right:var(--_rs-typography-link-hover-after-offset-right-wf);
1265
- margin-left:var(--_rs-typography-link-hover-after-offset-left-wf);
1266
- }
1267
-
1268
1339
  &:focus[data-focus-method='key']{
1269
- -webkit-box-shadow:var(--_rs-color-primary) 0 0 0 4px;
1270
- box-shadow:var(--_rs-color-primary) 0 0 0 4px;
1340
+ --_rs-typography-link-box-shadow-from-state-focus-visible:var(
1341
+ --_rs-color-primary
1342
+ ) 0 0 0 4px;
1271
1343
  }
1272
1344
  }
1273
1345
  @define-mixin rs-typography-reset-letter-spacing{
@@ -2554,38 +2626,87 @@
2554
2626
  --_rs-typography-link-transition,
2555
2627
  none
2556
2628
  );
2557
- padding-bottom:1px;
2558
- border-bottom-width:var(--_rs-typography-link-border-bottom-width-wf);
2629
+ --_rs-typography-link-padding-bottom-final:var(
2630
+ --_rs-typography-link-padding-bottom-from-state-hover,
2631
+ 1px
2632
+ );
2633
+ --_rs-typography-link-border-bottom-width-final:var(
2634
+ --_rs-typography-link-border-bottom-width-from-state-hover,
2635
+ var(--_rs-typography-link-border-bottom-width-wf)
2636
+ );
2637
+ --_rs-typography-link-border-bottom-color-final:var(
2638
+ --_rs-typography-link-border-bottom-color-from-state-hover,
2639
+ var(--_rs-typography-link-underline-color-wf)
2640
+ );
2641
+ --_rs-typography-link-border-image-final:var(
2642
+ --_rs-typography-link-border-image-from-state-hover,
2643
+ initial
2644
+ );
2645
+ --_rs-typography-link-color-final:var(
2646
+ --_rs-typography-link-color-from-state-hover,
2647
+ var(--_rs-typography-link-color-wf)
2648
+ );
2649
+ --_rs-typography-link-background-size-final:var(
2650
+ --_rs-typography-link-background-size-from-state-hover,
2651
+ auto 0
2652
+ );
2653
+ --_rs-typography-link-after-margin-right-final:var(
2654
+ --_rs-typography-link-after-margin-right-from-state-hover,
2655
+ var(--_rs-typography-link-after-offset-right-wf)
2656
+ );
2657
+ --_rs-typography-link-after-margin-left-final:var(
2658
+ --_rs-typography-link-after-margin-left-from-state-hover,
2659
+ var(--_rs-typography-link-after-offset-left-wf)
2660
+ );
2661
+ --_rs-typography-link-box-shadow-final:var(
2662
+ --_rs-typography-link-box-shadow-from-state-focus-visible,
2663
+ initial
2664
+ );
2665
+ padding-bottom:var(--_rs-typography-link-padding-bottom-final);
2666
+ border-bottom-width:var(--_rs-typography-link-border-bottom-width-final);
2559
2667
  border-bottom-style:solid;
2560
- border-bottom-color:var(--_rs-typography-link-underline-color-wf);
2668
+ border-bottom-color:var(--_rs-typography-link-border-bottom-color-final);
2669
+ -o-border-image:var(--_rs-typography-link-border-image-final);
2670
+ border-image:var(--_rs-typography-link-border-image-final);
2561
2671
  outline:none;
2562
2672
  cursor:pointer;
2563
2673
  text-decoration:none;
2564
- color:var(--_rs-typography-link-color-wf);
2674
+ color:var(--_rs-typography-link-color-final);
2565
2675
  background-image:var(--_rs-typography-link-background-image-wf);
2566
2676
  background-repeat:repeat-x;
2567
2677
  background-position:left calc(100% + 4px);
2568
- background-size:auto 0;
2678
+ background-size:var(--_rs-typography-link-background-size-final);
2679
+ -webkit-box-shadow:var(--_rs-typography-link-box-shadow-final);
2680
+ box-shadow:var(--_rs-typography-link-box-shadow-final);
2569
2681
  font-size:inherit;
2570
2682
  line-height:inherit;
2571
2683
  -webkit-transition:var(--_rs-typography-link-transition-wf);
2572
2684
  transition:var(--_rs-typography-link-transition-wf);
2573
2685
  &:active,
2574
2686
  &:focus{
2575
- color:var(--_rs-typography-link-color-wf);
2687
+ color:var(--_rs-typography-link-color-final);
2576
2688
  }
2577
2689
  &:hover{
2578
- padding-bottom:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
2579
-
2580
- border-bottom-width:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
2581
- border-bottom-color:var(--_rs-typography-link-hover-underline-color-wf);
2582
- -o-border-image:var(--_rs-typography-link-hover-border-image-wf);
2583
- border-image:var(--_rs-typography-link-hover-border-image-wf);
2690
+ --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
2691
+ --_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));
2692
+ --_rs-typography-link-border-bottom-color-from-state-hover:var(
2693
+ --_rs-typography-link-hover-underline-color-wf
2694
+ );
2695
+ --_rs-typography-link-border-image-from-state-hover:var(
2696
+ --_rs-typography-link-hover-border-image-wf
2697
+ );
2698
+ --_rs-typography-link-color-from-state-hover:var(
2699
+ --_rs-typography-link-hover-color-wf
2700
+ );
2701
+ --_rs-typography-link-background-size-from-state-hover:auto calc(100% + 4px);
2702
+ --_rs-typography-link-after-margin-right-from-state-hover:var(
2703
+ --_rs-typography-link-hover-after-offset-right-wf
2704
+ );
2705
+ --_rs-typography-link-after-margin-left-from-state-hover:var(
2706
+ --_rs-typography-link-hover-after-offset-left-wf
2707
+ );
2584
2708
 
2585
2709
  text-decoration:none;
2586
-
2587
- color:var(--_rs-typography-link-hover-color-wf);
2588
- background-size:auto calc(100% + 4px);
2589
2710
  }
2590
2711
  &:after{
2591
2712
  display:var(
@@ -2593,8 +2714,8 @@
2593
2714
  var(--_rs-typography-link-after-display-wf)
2594
2715
  );
2595
2716
 
2596
- margin-right:var(--_rs-typography-link-after-offset-right-wf);
2597
- margin-left:var(--_rs-typography-link-after-offset-left-wf);
2717
+ margin-right:var(--_rs-typography-link-after-margin-right-final);
2718
+ margin-left:var(--_rs-typography-link-after-margin-left-final);
2598
2719
 
2599
2720
  content:var(--_rs-typography-link-after-content-or-initial, '\2192');
2600
2721
 
@@ -2602,13 +2723,10 @@
2602
2723
 
2603
2724
  transition:margin-right 300ms, margin-left 300ms;
2604
2725
  }
2605
- &:hover:after{
2606
- margin-right:var(--_rs-typography-link-hover-after-offset-right-wf);
2607
- margin-left:var(--_rs-typography-link-hover-after-offset-left-wf);
2608
- }
2609
2726
  &:focus[data-focus-method='key']{
2610
- -webkit-box-shadow:var(--_rs-color-primary) 0 0 0 4px;
2611
- box-shadow:var(--_rs-color-primary) 0 0 0 4px;
2727
+ --_rs-typography-link-box-shadow-from-state-focus-visible:var(
2728
+ --_rs-color-primary
2729
+ ) 0 0 0 4px;
2612
2730
  }
2613
2731
  }
2614
2732
  @define-mixin rs-text-cn-digits-1{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/typography",
3
- "version": "0.18.1",
3
+ "version": "0.19.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -43,5 +43,5 @@
43
43
  "build-mixins": "rescui-scripts build-pcss-api --file mixins.p.css"
44
44
  },
45
45
  "nx": {},
46
- "gitHead": "3de71c679695fe3ca490baeaa24ab2331eb2e3a8"
46
+ "gitHead": "69a84812628809943698f0b27643c83dc449f119"
47
47
  }