@rescui/typography 0.4.0 → 0.6.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 (6) hide show
  1. package/lib/create-text-cn.d.ts +23 -6
  2. package/lib/create-text-cn.js +24 -11
  3. package/lib/hooks.d.ts +2 -0
  4. package/lib/index.css +194 -129
  5. package/lib/mixins.pcss +272 -222
  6. package/package.json +3 -3
package/lib/mixins.pcss CHANGED
@@ -4,7 +4,8 @@
4
4
  --rs-typography-color-pale:rgba(25,25,28,0.5);
5
5
  --rs-typography-pre-color:#19191C;
6
6
  --rs-typography-pre-bg-color:rgba(25,25,28,0.1);
7
- --rs-typography-text-link-hover-color:#FFFFFF;
7
+ --rs-typography-classic-link-underline-color:rgba(25,25,28,0.4);
8
+ --rs-typography-rock-link-hover-color:#FFFFFF;
8
9
  }
9
10
  @define-mixin rs-typography-dark{
10
11
  --rs-typography-color-hard:#FFFFFF;
@@ -12,20 +13,41 @@
12
13
  --rs-typography-color-pale:rgba(255,255,255,0.5);
13
14
  --rs-typography-pre-color:rgba(255,255,255,0.7);
14
15
  --rs-typography-pre-bg-color:rgba(255,255,255,0.1);
15
- --rs-typography-text-link-hover-color:#19191C;
16
+ --rs-typography-classic-link-underline-color:rgba(255,255,255,0.4);
17
+ --rs-typography-rock-link-hover-color:#19191C;
18
+ }
19
+ @define-mixin rs-text-hardness-hard{
20
+ color:#19191C;
21
+ color:var(--rs-typography-color-hard, #19191C);
22
+ }
23
+ @define-mixin rs-text-hardness-average{
24
+ color:rgba(25,25,28,0.7);
25
+ color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
26
+ }
27
+ @define-mixin rs-text-hardness-pale{
28
+ color:rgba(25,25,28,0.5);
29
+ color:var(--rs-typography-color-pale, rgba(25,25,28,0.5));
30
+ }
31
+ @define-mixin rs-text-hardness-hard-theme-dark{
32
+ color:#FFFFFF;
33
+ color:var(--rs-typography-color-hard, #FFFFFF);
34
+ }
35
+ @define-mixin rs-text-hardness-average-theme-dark{
36
+ color:rgba(255,255,255,0.7);
37
+ color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
38
+ }
39
+ @define-mixin rs-text-hardness-pale-theme-dark{
40
+ color:rgba(255,255,255,0.5);
41
+ color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
16
42
  }
17
43
  @define-mixin rs-font-smoothing{
18
44
  text-rendering:optimizeLegibility;
19
45
  -webkit-font-smoothing:antialiased;
20
46
  -moz-osx-font-smoothing:grayscale;
21
47
  }
22
- @define-mixin rs-super-hero{
48
+ @define-mixin rs-super-hero-base{
23
49
  letter-spacing:-0.02em;
24
50
 
25
- color:#19191C;
26
-
27
- color:var(--rs-typography-color-hard, #19191C);
28
-
29
51
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
30
52
 
31
53
  font-family:var(--rs-font-family-headers, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -56,23 +78,22 @@
56
78
  letter-spacing:normal;
57
79
  }
58
80
  }
81
+ @define-mixin rs-super-hero{
82
+ @mixin rs-super-hero-base;
83
+ @mixin rs-text-hardness-hard;
84
+ }
59
85
  @define-mixin rs-super-hero-theme-dark{
60
- color:#FFFFFF;
61
- color:var(--rs-typography-color-hard, #FFFFFF);
86
+ @mixin rs-text-hardness-hard-theme-dark;
62
87
  }
63
88
  @define-mixin rs-super-hero-offset-top{
64
89
  margin-top:96px;
65
90
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
66
91
  }
67
- @define-mixin rs-digits{
92
+ @define-mixin rs-digits-base{
68
93
  letter-spacing:-0.005em;
69
94
 
70
95
  font-variant-numeric:tabular-nums;
71
96
 
72
- color:#19191C;
73
-
74
- color:var(--rs-typography-color-hard, #19191C);
75
-
76
97
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
77
98
 
78
99
  font-family:var(--rs-font-family-headers, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -95,21 +116,20 @@
95
116
  letter-spacing:normal;
96
117
  }
97
118
  }
119
+ @define-mixin rs-digits{
120
+ @mixin rs-digits-base;
121
+ @mixin rs-text-hardness-hard;
122
+ }
98
123
  @define-mixin rs-digits-theme-dark{
99
- color:#FFFFFF;
100
- color:var(--rs-typography-color-hard, #FFFFFF);
124
+ @mixin rs-text-hardness-hard-theme-dark;
101
125
  }
102
126
  @define-mixin rs-digits-offset-top{
103
127
  margin-top:32px;
104
128
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
105
129
  }
106
- @define-mixin rs-hero{
130
+ @define-mixin rs-hero-base{
107
131
  letter-spacing:-0.005em;
108
132
 
109
- color:#19191C;
110
-
111
- color:var(--rs-typography-color-hard, #19191C);
112
-
113
133
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
114
134
 
115
135
  font-family:var(--rs-font-family-headers, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -134,22 +154,19 @@
134
154
  letter-spacing:normal;
135
155
  }
136
156
  }
157
+ @define-mixin rs-hero{
158
+ @mixin rs-hero-base;
159
+ @mixin rs-text-hardness-hard;
160
+ }
137
161
  @define-mixin rs-hero-theme-dark{
138
- color:#FFFFFF;
139
- color:var(--rs-typography-color-hard, #FFFFFF);
162
+ @mixin rs-text-hardness-hard-theme-dark;
140
163
  }
141
164
  @define-mixin rs-hero-offset-top{
142
165
  margin-top:96px;
143
166
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
144
167
  }
145
- @define-mixin rs-subtitle-1{
146
-
147
- color:#19191C;
148
-
149
- color:var(--rs-typography-color-hard, #19191C);
150
-
168
+ @define-mixin rs-subtitle-1-base{
151
169
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
152
-
153
170
  font-family:var(--rs-font-family-headers, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
154
171
 
155
172
  font-size:39px;
@@ -165,18 +182,19 @@
165
182
  --rs-subtitle-1-line-height:var(--rs-subtitle-2-line-height-mobile, 30px);
166
183
  }
167
184
  }
185
+ @define-mixin rs-subtitle-1{
186
+ @mixin rs-subtitle-1-base;
187
+ @mixin rs-text-hardness-hard;
188
+ }
168
189
  @define-mixin rs-subtitle-1-theme-dark{
169
- color:#FFFFFF;
170
- color:var(--rs-typography-color-hard, #FFFFFF);
190
+ @mixin rs-text-hardness-hard-theme-dark;
171
191
  }
172
192
  @define-mixin rs-subtitle-1-offset-top{
173
193
  margin-top:32px;
174
194
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
175
195
  }
176
- @define-mixin rs-h1{
196
+ @define-mixin rs-h1-base{
177
197
  letter-spacing:-0.001em;
178
- color:#19191C;
179
- color:var(--rs-typography-color-hard, #19191C);
180
198
 
181
199
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
182
200
 
@@ -198,20 +216,19 @@
198
216
  letter-spacing:normal;
199
217
  }
200
218
  }
219
+ @define-mixin rs-h1{
220
+ @mixin rs-h1-base;
221
+ @mixin rs-text-hardness-hard;
222
+ }
201
223
  @define-mixin rs-h1-theme-dark{
202
- color:#FFFFFF;
203
- color:var(--rs-typography-color-hard, #FFFFFF);
224
+ @mixin rs-text-hardness-hard-theme-dark;
204
225
  }
205
226
  @define-mixin rs-h1-offset-top{
206
227
  margin-top:64px;
207
228
  margin-top:calc(var(--rs-flow-unit, 8px)*8);
208
229
  }
209
- @define-mixin rs-subtitle-2{
210
- color:#19191C;
211
- color:var(--rs-typography-color-hard, #19191C);
212
-
230
+ @define-mixin rs-subtitle-2-base{
213
231
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
214
-
215
232
  font-family:var(--rs-font-family-headers, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
216
233
 
217
234
  font-size:29px;
@@ -227,20 +244,19 @@
227
244
  --rs-subtitle-2-line-height:var(--rs-subtitle-2-line-height-mobile, 30px);
228
245
  }
229
246
  }
247
+ @define-mixin rs-subtitle-2{
248
+ @mixin rs-subtitle-2-base;
249
+ @mixin rs-text-hardness-hard;
250
+ }
230
251
  @define-mixin rs-subtitle-2-theme-dark{
231
- color:#FFFFFF;
232
- color:var(--rs-typography-color-hard, #FFFFFF);
252
+ @mixin rs-text-hardness-hard-theme-dark;
233
253
  }
234
254
  @define-mixin rs-subtitle-2-offset-top{
235
255
  margin-top:32px;
236
256
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
237
257
  }
238
- @define-mixin rs-h2{
239
- color:#19191C;
240
- color:var(--rs-typography-color-hard, #19191C);
241
-
258
+ @define-mixin rs-h2-base{
242
259
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
243
-
244
260
  font-family:var(--rs-font-family-headers, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
245
261
 
246
262
  font-size:35px;
@@ -258,21 +274,20 @@
258
274
  --rs-h2-line-height:var(--rs-h2-line-height-mobile, 32px);
259
275
  }
260
276
  }
277
+ @define-mixin rs-h2{
278
+ @mixin rs-h2-base;
279
+ @mixin rs-text-hardness-hard;
280
+ }
261
281
  @define-mixin rs-h2-theme-dark{
262
- color:#FFFFFF;
263
- color:var(--rs-typography-color-hard, #FFFFFF);
282
+ @mixin rs-text-hardness-hard-theme-dark;
264
283
  }
265
284
  @define-mixin rs-h2-offset-top{
266
285
  margin-top:48px;
267
286
  margin-top:calc(var(--rs-flow-unit, 8px)*6);
268
287
  }
269
- @define-mixin rs-h3{
288
+ @define-mixin rs-h3-base{
270
289
  letter-spacing:normal;
271
290
 
272
- color:#19191C;
273
-
274
- color:var(--rs-typography-color-hard, #19191C);
275
-
276
291
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
277
292
 
278
293
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -285,44 +300,19 @@
285
300
  line-height:28px;
286
301
  line-height:var(--rs-h3-line-height, 28px);
287
302
  }
303
+ @define-mixin rs-h3{
304
+ @mixin rs-h3-base;
305
+ @mixin rs-text-hardness-hard;
306
+ }
288
307
  @define-mixin rs-h3-theme-dark{
289
- color:#FFFFFF;
290
- color:var(--rs-typography-color-hard, #FFFFFF);
308
+ @mixin rs-text-hardness-hard-theme-dark;
291
309
  }
292
310
  @define-mixin rs-h3-offset-top{
293
311
  margin-top:32px;
294
312
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
295
313
  }
296
- @define-mixin rs-text-hardness-hard{
297
- color:#19191C;
298
- color:var(--rs-typography-color-hard, #19191C);
299
- }
300
- @define-mixin rs-text-hardness-average{
301
- color:rgba(25,25,28,0.7);
302
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
303
- }
304
- @define-mixin rs-text-hardness-pale{
305
- color:rgba(25,25,28,0.5);
306
- color:var(--rs-typography-color-pale, rgba(25,25,28,0.5));
307
- }
308
- @define-mixin rs-text-hardness-hard-theme-dark{
309
- color:#FFFFFF;
310
- color:var(--rs-typography-color-hard, #FFFFFF);
311
- }
312
- @define-mixin rs-text-hardness-average-theme-dark{
313
- color:rgba(255,255,255,0.7);
314
- color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
315
- }
316
- @define-mixin rs-text-hardness-pale-theme-dark{
317
- color:rgba(255,255,255,0.5);
318
- color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
319
- }
320
- @define-mixin rs-text-1{
321
- color:rgba(25,25,28,0.7);
322
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
323
-
314
+ @define-mixin rs-text-1-base{
324
315
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
325
-
326
316
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
327
317
 
328
318
  font-size:19px;
@@ -332,20 +322,19 @@
332
322
  line-height:28px;
333
323
  line-height:var(--rs-text-1-line-height, 28px);
334
324
  }
325
+ @define-mixin rs-text-1{
326
+ @mixin rs-text-1-base;
327
+ @mixin rs-text-hardness-average;
328
+ }
335
329
  @define-mixin rs-text-1-theme-dark{
336
- color:rgba(255,255,255,0.7);
337
- color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
330
+ @mixin rs-text-hardness-average-theme-dark;
338
331
  }
339
332
  @define-mixin rs-text-1-offset-top{
340
333
  margin-top:32px;
341
334
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
342
335
  }
343
- @define-mixin rs-h4{
344
- color:#19191C;
345
- color:var(--rs-typography-color-hard, #19191C);
346
-
336
+ @define-mixin rs-h4-base{
347
337
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
348
-
349
338
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
350
339
 
351
340
  font-size:17px;
@@ -358,21 +347,20 @@
358
347
 
359
348
  line-height:var(--rs-h4-line-height, 24px);
360
349
  }
350
+ @define-mixin rs-h4{
351
+ @mixin rs-h4-base;
352
+ @mixin rs-text-hardness-hard;
353
+ }
361
354
  @define-mixin rs-h4-theme-dark{
362
- color:#FFFFFF;
363
- color:var(--rs-typography-color-hard, #FFFFFF);
355
+ @mixin rs-text-hardness-hard-theme-dark;
364
356
  }
365
357
  @define-mixin rs-h4-offset-top{
366
358
  margin-top:16px;
367
359
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
368
360
  }
369
- @define-mixin rs-text-2{
361
+ @define-mixin rs-text-2-base{
370
362
  letter-spacing:0.0015em;
371
363
 
372
- color:rgba(25,25,28,0.7);
373
-
374
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
375
-
376
364
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
377
365
 
378
366
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -388,22 +376,19 @@
388
376
  letter-spacing:normal;
389
377
  }
390
378
  }
379
+ @define-mixin rs-text-2{
380
+ @mixin rs-text-2-base;
381
+ @mixin rs-text-hardness-average;
382
+ }
391
383
  @define-mixin rs-text-2-theme-dark{
392
- color:rgba(255,255,255,0.7);
393
- color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
384
+ @mixin rs-text-hardness-average-theme-dark;
394
385
  }
395
386
  @define-mixin rs-text-2-offset-top{
396
387
  margin-top:16px;
397
388
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
398
389
  }
399
- @define-mixin rs-h5{
400
-
401
- color:#19191C;
402
-
403
- color:var(--rs-typography-color-hard, #19191C);
404
-
390
+ @define-mixin rs-h5-base{
405
391
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
406
-
407
392
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
408
393
 
409
394
  font-size:14px;
@@ -416,9 +401,12 @@
416
401
 
417
402
  line-height:var(--rs-h5-line-height, 20px);
418
403
  }
404
+ @define-mixin rs-h5{
405
+ @mixin rs-h5-base;
406
+ @mixin rs-text-hardness-hard;
407
+ }
419
408
  @define-mixin rs-h5-theme-dark{
420
- color:#FFFFFF;
421
- color:var(--rs-typography-color-hard, #FFFFFF);
409
+ @mixin rs-text-hardness-hard-theme-dark;
422
410
  }
423
411
  @define-mixin rs-h5-offset-top{
424
412
  margin-top:16px;
@@ -455,13 +443,9 @@
455
443
  margin-top:16px;
456
444
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
457
445
  }
458
- @define-mixin rs-text-3{
446
+ @define-mixin rs-text-3-base{
459
447
  letter-spacing:0.0045em;
460
448
 
461
- color:rgba(25,25,28,0.7);
462
-
463
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
464
-
465
449
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
466
450
 
467
451
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -476,9 +460,12 @@
476
460
  letter-spacing:normal;
477
461
  }
478
462
  }
463
+ @define-mixin rs-text-3{
464
+ @mixin rs-text-3-base;
465
+ @mixin rs-text-hardness-average;
466
+ }
479
467
  @define-mixin rs-text-3-theme-dark{
480
- color:rgba(255,255,255,0.7);
481
- color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
468
+ @mixin rs-text-hardness-average-theme-dark;
482
469
  }
483
470
  @define-mixin rs-text-3-offset-top{
484
471
  margin-top:8px;
@@ -684,9 +671,9 @@
684
671
  background:transparent !important;
685
672
  color:inherit !important;
686
673
 
687
- font-family:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
674
+ font-family:'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
688
675
 
689
- font-family:var(--rs-font-family-mono, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
676
+ font-family:var(--rs-font-family-mono, 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
690
677
  line-height:inherit;
691
678
  }
692
679
  @define-mixin rs-pre{
@@ -703,9 +690,9 @@
703
690
 
704
691
  word-wrap:normal;
705
692
 
706
- font-family:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
693
+ font-family:'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
707
694
 
708
- font-family:var(--rs-font-family-mono, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
695
+ font-family:var(--rs-font-family-mono, 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
709
696
 
710
697
  font-size:16px;
711
698
  line-height:24px;
@@ -747,9 +734,9 @@
747
734
  background-color:rgba(25,25,28,0.1);
748
735
  background-color:var(--rs-typography-pre-bg-color, rgba(25,25,28,0.1));
749
736
 
750
- font-family:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
737
+ font-family:'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
751
738
 
752
- font-family:var(--rs-font-family-mono, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
739
+ font-family:var(--rs-font-family-mono, 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
753
740
 
754
741
  font-size:90%;
755
742
  line-height:inherit;
@@ -773,8 +760,9 @@
773
760
  }
774
761
  @define-mixin rs-link{
775
762
  --rs-link-color:var(--rs-typography-color-hard, #19191C);
776
- --rs-link-color-hover:var(--rs-typography-text-link-hover-color, #FFFFFF);
777
- --rs-underline-color:var(--rs-typography-color-hard, #19191C);
763
+
764
+ color:#19191C;
765
+ color:var(--rs-link-color);
778
766
 
779
767
  padding-bottom:1px;
780
768
 
@@ -782,28 +770,11 @@
782
770
 
783
771
  cursor:pointer;
784
772
  text-decoration:none;
785
- color:#19191C;
786
- color:var(--rs-link-color);
787
773
 
788
774
  font-size:inherit;
789
775
  line-height:inherit;
790
- border-bottom:1px solid #19191C;
791
- border-bottom:1px solid var(--rs-underline-color);
792
-
793
- background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, #19191C), color-stop(0, transparent));
794
-
795
- background-image:linear-gradient(to bottom, #19191C 100%, transparent 0);
796
- background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--rs-underline-color)), color-stop(0, transparent));
797
- background-image:linear-gradient(to bottom, var(--rs-underline-color) 100%, transparent 0);
798
- background-size:auto 0;
799
- background-repeat:repeat-x;
800
- background-position:left calc(100% + 4px);
801
- -webkit-transition:background-size 300ms, color 300ms;
802
- transition:background-size 300ms, color 300ms;
803
- @media all and (-ms-high-contrast: none){
804
- -webkit-transition:none;
805
- transition:none;
806
- }
776
+ border-bottom-style:solid;
777
+ border-bottom-width:1px;
807
778
 
808
779
  &:active,
809
780
  &:focus{
@@ -813,25 +784,43 @@
813
784
 
814
785
  &:hover{
815
786
  text-decoration:none;
816
- color:#FFFFFF;
817
- color:var(--rs-link-color-hover);
818
- background-size:auto calc(100% + 4px);
819
787
  }
820
788
 
821
789
  &:focus[data-focus-method='key']{
822
- -webkit-box-shadow:#4597ff 0 0 0 4px;
823
- -webkit-box-shadow:var(--rs-color-primary-dim-light-theme, #4597ff) 0 0 0 4px;
824
- box-shadow:#4597ff 0 0 0 4px;
825
- box-shadow:var(--rs-color-primary-dim-light-theme, #4597ff) 0 0 0 4px;
790
+ -webkit-box-shadow:#8979ff 0 0 0 4px;
791
+ -webkit-box-shadow:var(--rs-color-primary-dim-light-theme, #8979ff) 0 0 0 4px;
792
+ box-shadow:#8979ff 0 0 0 4px;
793
+ box-shadow:var(--rs-color-primary-dim-light-theme, #8979ff) 0 0 0 4px;
794
+ }
795
+
796
+ [class*="rs-super-hero"] &{
797
+ border-bottom-width:4px;
798
+ }
799
+
800
+ @media screen and (max-width: 1000px){
801
+
802
+ [class*="rs-super-hero"] &{
803
+ border-bottom-width:3px
826
804
  }
805
+ }
806
+
807
+ @media screen and (max-width: 640px){
827
808
 
828
809
  [class*="rs-super-hero"] &{
829
- @mixin rs-link-border-5;
810
+ border-bottom-width:2px
830
811
  }
812
+ }
813
+
814
+ [class*="rs-hero"] &{
815
+ border-bottom-width:3px;
816
+ }
817
+
818
+ @media screen and (max-width: 640px){
831
819
 
832
820
  [class*="rs-hero"] &{
833
- @mixin rs-link-border-4;
821
+ border-bottom-width:2px
834
822
  }
823
+ }
835
824
 
836
825
  [class*="rs-h1"] &,
837
826
  [class*="rs-h2"] &,
@@ -841,7 +830,7 @@
841
830
  [class*="rs-overline"] &,
842
831
  [class*="rs-subtitle-1"] &,
843
832
  [class*="rs-subtitle-2"] &{
844
- @mixin rs-link-border-2;
833
+ border-bottom-width:2px;
845
834
  }
846
835
  }
847
836
  @define-mixin rs-link-external{
@@ -852,16 +841,84 @@
852
841
  margin-left:0;
853
842
  }
854
843
  }
855
- @define-mixin rs-link-mode-standalone{
844
+ @define-mixin rs-link-mode-classic{
856
845
  --rs-link-color-hover:var(--rs-typography-color-hard, #19191C);
846
+ --rs-underline-color:var(--rs-typography-classic-link-underline-color, rgba(25,25,28,0.4));
847
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #19191C);
848
+
849
+ border-bottom-color:rgba(25,25,28,0.4);
850
+ border-bottom-color:var(--rs-underline-color);
851
+
852
+ &:hover{
853
+ color:#19191C;
854
+ color:var(--rs-link-color-hover);
855
+ border-bottom-color:#19191C;
856
+ border-bottom-color:var(--rs-underline-color-hover);
857
+ border-bottom-width:2px;
858
+ padding-bottom:0;
859
+ }
860
+ [class*="rs-super-hero"] &:hover{
861
+ border-bottom-width:5px;
862
+ }
863
+
864
+ @media screen and (max-width: 1000px){
865
+ [class*="rs-super-hero"] &:hover{
866
+ border-bottom-width:4px
867
+ }
868
+ }
869
+
870
+ @media screen and (max-width: 640px){
871
+ [class*="rs-super-hero"] &:hover{
872
+ border-bottom-width:3px
873
+ }
874
+ }
875
+ [class*="rs-hero"] &:hover{
876
+ border-bottom-width:4px;
877
+ }
878
+
879
+ @media screen and (max-width: 640px){
880
+ [class*="rs-hero"] &:hover{
881
+ border-bottom-width:3px
882
+ }
883
+ }
884
+ [class*="rs-h1"] &:hover, [class*="rs-h2"] &:hover, [class*="rs-h3"] &:hover, [class*="rs-h4"] &:hover, [class*="rs-h5"] &:hover, [class*="rs-overline"] &:hover, [class*="rs-subtitle-1"] &:hover, [class*="rs-subtitle-2"] &:hover{
885
+ border-bottom-width:3px;
886
+ }
887
+ }
888
+ @define-mixin rs-link-mode-rock{
889
+ --rs-link-color-hover:var(--rs-typography-rock-link-hover-color, #FFFFFF);
890
+ --rs-underline-color:var(--rs-typography-color-pale, #19191C);
891
+
892
+ border-bottom-color:#19191C;
893
+ border-bottom-color:var(--rs-underline-color);
894
+ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, #19191C), color-stop(0, transparent));
895
+ background-image:linear-gradient(to bottom, #19191C 100%, transparent 0);
896
+ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--rs-underline-color)), color-stop(0, transparent));
897
+ background-image:linear-gradient(to bottom, var(--rs-underline-color) 100%, transparent 0);
898
+ background-size:auto 0;
899
+ background-repeat:repeat-x;
900
+ background-position:left calc(100% + 4px);
901
+ -webkit-transition:background-size 300ms, color 300ms;
902
+ transition:background-size 300ms, color 300ms;
903
+ @media all and (-ms-high-contrast: none){
904
+ -webkit-transition:none;
905
+ transition:none;
906
+ }
907
+
908
+ &:hover{
909
+ color:#FFFFFF;
910
+ color:var(--rs-link-color-hover);
911
+ background-size:auto calc(100% + 4px);
912
+ }
913
+ }
914
+ @define-mixin rs-link-mode-standalone{
857
915
  --rs-link-standalone-border-offset:1.15em;
916
+ --rs-link-color-hover:var(--rs-typography-color-hard, #19191C);
917
+ --rs-underline-color:transparent;
918
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #19191C);
919
+
858
920
  border-bottom-color:transparent;
859
- background-image:none;
860
- background-size:initial;
861
- background-repeat:initial;
862
- background-position:initial;
863
- -webkit-transition:none;
864
- transition:none;
921
+ border-bottom-color:var(--rs-underline-color);
865
922
 
866
923
  &:after{
867
924
  content:'\2192';
@@ -876,13 +933,13 @@
876
933
  color:#19191C;
877
934
  color:var(--rs-link-color-hover);
878
935
  border-bottom-color:#19191C;
879
- border-bottom-color:var(--rs-underline-color);
936
+ border-bottom-color:var(--rs-underline-color-hover);
880
937
  -o-border-image:linear-gradient(to right, #19191C calc(100% - 1.1em), transparent 1.1em) 1;
881
938
  border-image:-webkit-gradient(linear, left top, right top, from(#19191C), color-stop(1.1em, transparent)) 1;
882
939
  border-image:linear-gradient(to right, #19191C calc(100% - 1.1em), transparent 1.1em) 1;
883
- -o-border-image:linear-gradient(to right, var(--rs-underline-color) calc(100% - var(--rs-link-standalone-border-offset)), transparent var(--rs-link-standalone-border-offset)) 1;
884
- border-image:-webkit-gradient(linear, left top, right top, from(var(--rs-underline-color)), to(transparent)) 1;
885
- border-image:linear-gradient(to right, var(--rs-underline-color) calc(100% - var(--rs-link-standalone-border-offset)), transparent var(--rs-link-standalone-border-offset)) 1;
940
+ -o-border-image:linear-gradient(to right, var(--rs-underline-color-hover) calc(100% - var(--rs-link-standalone-border-offset)), transparent var(--rs-link-standalone-border-offset)) 1;
941
+ border-image:-webkit-gradient(linear, left top, right top, from(var(--rs-underline-color-hover)), to(transparent)) 1;
942
+ border-image:linear-gradient(to right, var(--rs-underline-color-hover) calc(100% - var(--rs-link-standalone-border-offset)), transparent var(--rs-link-standalone-border-offset)) 1;
886
943
  }
887
944
 
888
945
  &:hover:after{
@@ -911,48 +968,23 @@
911
968
  @define-mixin rs-link-mode-clear{
912
969
  --rs-link-color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
913
970
  --rs-link-color-hover:var(--rs-typography-color-hard, #19191C);
971
+ --rs-underline-color:transparent;
972
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #19191C);
914
973
 
915
974
  border-bottom-color:transparent;
916
- background-image:none;
917
- background-size:initial;
918
- background-repeat:initial;
919
- background-position:initial;
920
- -webkit-transition:none;
921
- transition:none;
975
+ border-bottom-color:var(--rs-underline-color);
922
976
 
923
977
  color:rgba(25,25,28,0.7);
924
978
  color:var(--rs-link-color);
925
979
 
926
980
  &:hover{
927
981
  border-bottom-color:#19191C;
928
- border-bottom-color:var(--rs-underline-color);
982
+ border-bottom-color:var(--rs-underline-color-hover);
983
+
929
984
  color:#19191C;
930
985
  color:var(--rs-link-color-hover);
931
986
  }
932
987
  }
933
- @define-mixin rs-link-border-5{
934
- padding-bottom:0;
935
-
936
- border-bottom-width:5px;
937
-
938
- @media screen and (max-width: 640px){
939
- border-bottom-width:2px;
940
- }
941
- }
942
- @define-mixin rs-link-border-4{
943
- padding-bottom:0;
944
-
945
- border-bottom-width:4px;
946
-
947
- @media screen and (max-width: 640px){
948
- border-bottom-width:2px;
949
- }
950
- }
951
- @define-mixin rs-link-border-2{
952
- padding-bottom:0;
953
-
954
- border-bottom-width:2px;
955
- }
956
988
  @define-mixin rs-link-hardness-hard-theme-dark{
957
989
  --rs-link-color:var(--rs-typography-color-hard, #FFFFFF);
958
990
  }
@@ -964,70 +996,88 @@
964
996
  }
965
997
  @define-mixin rs-link-theme-dark{
966
998
  --rs-link-color:var(--rs-typography-color-hard, #FFFFFF);
967
- --rs-link-color-hover:var(--rs-typography-text-link-hover-color, #19191C);
968
- --rs-underline-color:var(--rs-typography-color-hard, #FFFFFF);
969
-
970
999
  color:#FFFFFF;
971
1000
  color:var(--rs-link-color);
972
1001
 
973
- background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, #FFFFFF), color-stop(0, transparent));
974
-
975
- background-image:linear-gradient(to bottom, #FFFFFF 100%, transparent 0);
976
- background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--rs-underline-color)), color-stop(0, transparent));
977
- background-image:linear-gradient(to bottom, var(--rs-underline-color) 100%, transparent 0);
978
- border-bottom-color:#FFFFFF;
979
- border-bottom-color:var(--rs-underline-color);
980
-
981
1002
  &:active,
982
1003
  &:focus{
983
1004
  color:#FFFFFF;
984
1005
  color:var(--rs-link-color);
985
1006
  }
986
1007
 
1008
+ &:focus[data-focus-method='key']{
1009
+ -webkit-box-shadow:#6f61d2 0 0 0 4px;
1010
+ -webkit-box-shadow:var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 0 0 4px;
1011
+ box-shadow:#6f61d2 0 0 0 4px;
1012
+ box-shadow:var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 0 0 4px;
1013
+ }
1014
+ }
1015
+ @define-mixin rs-link-mode-classic-theme-dark{
1016
+ --rs-link-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1017
+ --rs-underline-color:var(--rs-typography-classic-link-underline-color, rgba(255,255,255,0.4));
1018
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1019
+
1020
+ border-bottom-color:rgba(255,255,255,0.4);
1021
+ border-bottom-color:var(--rs-underline-color);
1022
+
987
1023
  &:hover{
988
- color:#19191C;
1024
+ color:#FFFFFF;
989
1025
  color:var(--rs-link-color-hover);
1026
+ border-bottom-color:#FFFFFF;
1027
+ border-bottom-color:var(--rs-underline-color-hover);
990
1028
  }
1029
+ }
1030
+ @define-mixin rs-link-mode-rock-theme-dark{
1031
+ --rs-link-color-hover:var(--rs-typography-rock-link-hover-color, #19191C);
1032
+ --rs-underline-color:var(--rs-typography-color-hard, #FFFFFF);
991
1033
 
992
- &:focus[data-focus-method='key']{
993
- -webkit-box-shadow:#428ad2 0 0 0 4px;
994
- -webkit-box-shadow:var(--rs-color-primary-dim-dark-theme, #428ad2) 0 0 0 4px;
995
- box-shadow:#428ad2 0 0 0 4px;
996
- box-shadow:var(--rs-color-primary-dim-dark-theme, #428ad2) 0 0 0 4px;
1034
+ border-bottom-color:#FFFFFF;
1035
+ border-bottom-color:var(--rs-underline-color);
1036
+
1037
+ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, #FFFFFF), color-stop(0, transparent));
1038
+
1039
+ background-image:linear-gradient(to bottom, #FFFFFF 100%, transparent 0);
1040
+ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--rs-underline-color)), color-stop(0, transparent));
1041
+ background-image:linear-gradient(to bottom, var(--rs-underline-color) 100%, transparent 0);
1042
+
1043
+ &:hover{
1044
+ color:#19191C;
1045
+ color:var(--rs-link-color-hover);
997
1046
  }
998
1047
  }
999
1048
  @define-mixin rs-link-mode-standalone-theme-dark{
1000
1049
  --rs-link-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1050
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1001
1051
 
1002
1052
  background-image:none;
1003
1053
  border-bottom-color:transparent;
1054
+
1004
1055
  &:hover{
1005
1056
  color:#FFFFFF;
1006
1057
  color:var(--rs-link-color-hover);
1007
1058
  border-bottom-color:#FFFFFF;
1008
- border-bottom-color:var(--rs-underline-color);
1059
+ border-bottom-color:var(--rs-underline-color-hover);
1009
1060
  -o-border-image:linear-gradient(to right, #FFFFFF calc(100% - 1.3em), transparent 1.3em) 1;
1010
1061
  border-image:-webkit-gradient(linear, left top, right top, from(#FFFFFF), color-stop(1.3em, transparent)) 1;
1011
1062
  border-image:linear-gradient(to right, #FFFFFF calc(100% - 1.3em), transparent 1.3em) 1;
1012
- -o-border-image:linear-gradient(to right, var(--rs-underline-color) calc(100% - var(--rs-link-standalone-border-offset)), transparent var(--rs-link-standalone-border-offset)) 1;
1013
- border-image:-webkit-gradient(linear, left top, right top, from(var(--rs-underline-color)), to(transparent)) 1;
1014
- border-image:linear-gradient(to right, var(--rs-underline-color) calc(100% - var(--rs-link-standalone-border-offset)), transparent var(--rs-link-standalone-border-offset)) 1;
1063
+ -o-border-image:linear-gradient(to right, var(--rs-underline-color-hover) calc(100% - var(--rs-link-standalone-border-offset)), transparent var(--rs-link-standalone-border-offset)) 1;
1064
+ border-image:-webkit-gradient(linear, left top, right top, from(var(--rs-underline-color-hover)), to(transparent)) 1;
1065
+ border-image:linear-gradient(to right, var(--rs-underline-color-hover) calc(100% - var(--rs-link-standalone-border-offset)), transparent var(--rs-link-standalone-border-offset)) 1;
1015
1066
  }
1016
1067
  }
1017
1068
  @define-mixin rs-link-mode-clear-theme-dark{
1018
1069
  --rs-link-color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
1019
1070
  --rs-link-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1071
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1020
1072
 
1021
- background-image:none;
1022
- border-bottom-color:transparent;
1023
1073
  color:rgba(255,255,255,0.7);
1024
1074
  color:var(--rs-link-color);
1025
1075
 
1026
1076
  &:hover{
1027
- border-bottom-color:#FFFFFF;
1028
- border-bottom-color:var(--rs-underline-color);
1029
1077
  color:#FFFFFF;
1030
1078
  color:var(--rs-link-color-hover);
1079
+ border-bottom-color:#FFFFFF;
1080
+ border-bottom-color:var(--rs-underline-color-hover);
1031
1081
  }
1032
1082
  }
1033
1083