@rescui/typography 0.2.1 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/create-text-cn.d.ts +9 -9
  2. package/lib/create-text-cn.js +15 -10
  3. package/lib/font-jb-sans-auto.css +32 -0
  4. package/lib/font-jb-sans-variable.css +8 -0
  5. package/lib/font-jb-sans.css +21 -0
  6. package/lib/hooks.d.ts +3 -3
  7. package/lib/index.css +324 -267
  8. package/lib/mixins.pcss +346 -276
  9. package/package.json +6 -6
package/lib/mixins.pcss CHANGED
@@ -3,16 +3,18 @@
3
3
  --rs-typography-color-average:rgba(25,25,28,0.7);
4
4
  --rs-typography-color-pale:rgba(25,25,28,0.5);
5
5
  --rs-typography-pre-color:#19191C;
6
- --rs-typography-pre-bg-color:#E8E8E8;
7
- --rs-typography-text-link-hover-color:#FFFFFF;
6
+ --rs-typography-pre-bg-color:rgba(25,25,28,0.1);
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;
11
12
  --rs-typography-color-average:rgba(255,255,255,0.7);
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
- --rs-typography-pre-bg-color:#303033;
15
- --rs-typography-text-link-hover-color:#19191C;
15
+ --rs-typography-pre-bg-color:rgba(255,255,255,0.1);
16
+ --rs-typography-classic-link-underline-color:rgba(255,255,255,0.4);
17
+ --rs-typography-rock-link-hover-color:#19191C;
16
18
  }
17
19
  @define-mixin rs-font-smoothing{
18
20
  text-rendering:optimizeLegibility;
@@ -20,30 +22,39 @@
20
22
  -moz-osx-font-smoothing:grayscale;
21
23
  }
22
24
  @define-mixin rs-super-hero{
23
- letter-spacing:-3px;
25
+ letter-spacing:-0.02em;
24
26
 
25
27
  color:#19191C;
26
28
 
27
29
  color:var(--rs-typography-color-hard, #19191C);
28
30
 
29
- font-family:'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
31
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
30
32
 
31
- font-family:var(--rs-font-family-gotham, 'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
33
+ 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));
32
34
 
33
- font-size:120px;
35
+ font-size:142px;
34
36
 
35
- font-size:var(--rs-super-hero-font-size, 120px);
36
- font-weight:500;
37
- line-height:128px;
38
- line-height:var(--rs-super-hero-line-height, 128px);
37
+ font-size:var(--rs-super-hero-font-size, 142px);
38
+ font-weight:530;
39
+ font-weight:var(--rs-font-weight-semi-bold, 530);
40
+
41
+ line-height:142px;
42
+
43
+ line-height:var(--rs-super-hero-line-height, 142px);
44
+
45
+ @media screen and (max-width: 1000px){
46
+ --rs-super-hero-font-size:var(--rs-hero-font-size, 72px);
47
+ --rs-super-hero-line-height:var(--rs-hero-line-height, 72px);
48
+ letter-spacing:-0.005em;
49
+ }
39
50
 
40
51
  @media screen and (max-width: 640px){
41
- --rs-super-hero-font-size:42px;
42
- --rs-super-hero-line-height:48px;
43
- letter-spacing:-1px;
52
+ --rs-super-hero-font-size:var(--rs-hero-font-size-mobile, 42px);
53
+ --rs-super-hero-line-height:var(--rs-hero-line-height-mobile, 50px);
54
+ letter-spacing:-0.001em;
44
55
  }
45
56
 
46
- .rs-reset-gotham-font-style &{
57
+ .rs-reset-letter-spacing &{
47
58
  letter-spacing:normal;
48
59
  }
49
60
  }
@@ -56,7 +67,7 @@
56
67
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
57
68
  }
58
69
  @define-mixin rs-digits{
59
- letter-spacing:-3px;
70
+ letter-spacing:-0.005em;
60
71
 
61
72
  font-variant-numeric:tabular-nums;
62
73
 
@@ -64,24 +75,25 @@
64
75
 
65
76
  color:var(--rs-typography-color-hard, #19191C);
66
77
 
67
- font-family:'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
78
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
68
79
 
69
- font-family:var(--rs-font-family-gotham, 'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
80
+ 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));
70
81
 
71
- font-size:43px;
82
+ font-size:69px;
72
83
 
73
- font-size:var(--rs-digits-font-size, 43px);
74
- font-weight:300;
75
- line-height:48px;
76
- line-height:var(--rs-digits-line-height, 48px);
84
+ font-size:var(--rs-digits-font-size, 69px);
85
+ font-weight:320;
86
+ font-weight:var(--rs-font-weight-light, 320);
87
+ line-height:71px;
88
+ line-height:var(--rs-digits-line-height, 71px);
77
89
 
78
90
  @media screen and (max-width: 640px){
79
- --rs-digits-font-size:42px;
80
- --rs-digits-line-height:48px;
81
- letter-spacing:-1px;
91
+ --rs-digits-font-size:var(--rs-digits-font-size-mobile, 40px);
92
+ --rs-digits-line-height:var(--rs-digits-line-height-mobile, 44px);
93
+ letter-spacing:normal;
82
94
  }
83
95
 
84
- .rs-reset-gotham-font-style &{
96
+ .rs-reset-letter-spacing &{
85
97
  letter-spacing:normal;
86
98
  }
87
99
  }
@@ -94,30 +106,33 @@
94
106
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
95
107
  }
96
108
  @define-mixin rs-hero{
97
- letter-spacing:-2px;
109
+ letter-spacing:-0.005em;
98
110
 
99
111
  color:#19191C;
100
112
 
101
113
  color:var(--rs-typography-color-hard, #19191C);
102
114
 
103
- font-family:'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
115
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
116
+
117
+ 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));
104
118
 
105
- font-family:var(--rs-font-family-gotham, 'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
119
+ font-size:72px;
106
120
 
107
- font-size:68px;
121
+ font-size:var(--rs-hero-font-size, 72px);
122
+ font-weight:530;
123
+ font-weight:var(--rs-font-weight-semi-bold, 530);
108
124
 
109
- font-size:var(--rs-hero-font-size, 68px);
110
- font-weight:500;
111
125
  line-height:72px;
126
+
112
127
  line-height:var(--rs-hero-line-height, 72px);
113
128
 
114
129
  @media screen and (max-width: 640px){
115
- --rs-hero-font-size:42px;
116
- --rs-hero-line-height:48px;
117
- letter-spacing:-1px;
130
+ --rs-hero-font-size:var(--rs-hero-font-size-mobile, 42px);
131
+ --rs-hero-line-height:var(--rs-hero-font-size-mobile, 50px);
132
+ letter-spacing:-0.001em;
118
133
  }
119
134
 
120
- .rs-reset-gotham-font-style &{
135
+ .rs-reset-letter-spacing &{
121
136
  letter-spacing:normal;
122
137
  }
123
138
  }
@@ -130,31 +145,26 @@
130
145
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
131
146
  }
132
147
  @define-mixin rs-subtitle-1{
133
- letter-spacing:-1px;
134
148
 
135
149
  color:#19191C;
136
150
 
137
151
  color:var(--rs-typography-color-hard, #19191C);
138
152
 
139
- font-family:'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
153
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
140
154
 
141
- font-family:var(--rs-font-family-gotham, 'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
155
+ 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));
142
156
 
143
- font-size:43px;
157
+ font-size:39px;
144
158
 
145
- font-size:var(--rs-subtitle-1-font-size, 43px);
146
- font-weight:300;
147
- line-height:48px;
148
- line-height:var(--rs-subtitle-1-line-height, 48px);
159
+ font-size:var(--rs-subtitle-1-font-size, 39px);
160
+ font-weight:320;
161
+ font-weight:var(--rs-font-weight-light, 320);
162
+ line-height:49px;
163
+ line-height:var(--rs-subtitle-1-line-height, 49px);
149
164
 
150
165
  @media screen and (max-width: 640px){
151
- --rs-subtitle-1-font-size:24px;
152
- --rs-subtitle-1-line-height:32px;
153
- letter-spacing:normal;
154
- }
155
-
156
- .rs-reset-gotham-font-style &{
157
- letter-spacing:normal;
166
+ --rs-subtitle-1-font-size:var(--rs-subtitle-2-font-size-mobile, 23px);
167
+ --rs-subtitle-1-line-height:var(--rs-subtitle-2-line-height-mobile, 30px);
158
168
  }
159
169
  }
160
170
  @define-mixin rs-subtitle-1-theme-dark{
@@ -166,30 +176,27 @@
166
176
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
167
177
  }
168
178
  @define-mixin rs-h1{
169
- letter-spacing:-1px;
170
-
179
+ letter-spacing:-0.001em;
171
180
  color:#19191C;
172
-
173
181
  color:var(--rs-typography-color-hard, #19191C);
174
182
 
175
- font-family:'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
183
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
176
184
 
177
- font-family:var(--rs-font-family-gotham, 'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
185
+ 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));
178
186
 
179
187
  font-size:43px;
180
188
 
181
189
  font-size:var(--rs-h1-font-size, 43px);
182
- font-weight:500;
183
- line-height:48px;
184
- line-height:var(--rs-h1-line-height, 48px);
190
+ font-weight:530;
191
+ font-weight:var(--rs-font-weight-semi-bold, 530);
185
192
 
186
- @media screen and (max-width: 640px){
187
- --rs-h1-font-size:36px;
188
- --rs-h1-line-height:44px;
189
- letter-spacing:-0.5px;
190
- }
193
+ line-height:49px;
194
+
195
+ line-height:var(--rs-h1-line-height, 49px);
191
196
 
192
- .rs-reset-gotham-font-style &{
197
+ @media screen and (max-width: 640px){
198
+ --rs-h1-font-size:var(--rs-h1-font-size-mobile, 35px);
199
+ --rs-h1-line-height:var(--rs-h1-line-height-mobile, 39px);
193
200
  letter-spacing:normal;
194
201
  }
195
202
  }
@@ -202,26 +209,24 @@
202
209
  margin-top:calc(var(--rs-flow-unit, 8px)*8);
203
210
  }
204
211
  @define-mixin rs-subtitle-2{
205
- letter-spacing:normal;
206
-
207
212
  color:#19191C;
208
-
209
213
  color:var(--rs-typography-color-hard, #19191C);
210
214
 
211
- font-family:'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
215
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
212
216
 
213
- font-family:var(--rs-font-family-gotham, 'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
217
+ 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));
214
218
 
215
- font-size:31px;
219
+ font-size:29px;
216
220
 
217
- font-size:var(--rs-subtitle-2-font-size, 31px);
218
- font-weight:300;
219
- line-height:40px;
220
- line-height:var(--rs-subtitle-2-line-height, 40px);
221
+ font-size:var(--rs-subtitle-2-font-size, 29px);
222
+ font-weight:320;
223
+ font-weight:var(--rs-font-weight-light, 320);
224
+ line-height:39px;
225
+ line-height:var(--rs-subtitle-2-line-height, 39px);
221
226
 
222
227
  @media screen and (max-width: 640px){
223
- --rs-subtitle-2-font-size:24px;
224
- --rs-subtitle-2-line-height:32px;
228
+ --rs-subtitle-2-font-size:var(--rs-subtitle-2-font-size-mobile, 23px);
229
+ --rs-subtitle-2-line-height:var(--rs-subtitle-2-line-height-mobile, 30px);
225
230
  }
226
231
  }
227
232
  @define-mixin rs-subtitle-2-theme-dark{
@@ -233,30 +238,26 @@
233
238
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
234
239
  }
235
240
  @define-mixin rs-h2{
236
- letter-spacing:-0.5px;
237
-
238
241
  color:#19191C;
239
-
240
242
  color:var(--rs-typography-color-hard, #19191C);
241
243
 
242
- font-family:'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
244
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
243
245
 
244
- font-family:var(--rs-font-family-gotham, 'Gotham SSm A', 'Gotham SSm B', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
246
+ 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
247
 
246
- font-size:31px;
248
+ font-size:35px;
247
249
 
248
- font-size:var(--rs-h2-font-size, 31px);
249
- font-weight:500;
250
- line-height:40px;
251
- line-height:var(--rs-h2-line-height, 40px);
250
+ font-size:var(--rs-h2-font-size, 35px);
251
+ font-weight:530;
252
+ font-weight:var(--rs-font-weight-semi-bold, 530);
252
253
 
253
- @media screen and (max-width: 640px){
254
- --rs-h2-font-size:24px;
255
- --rs-h2-line-height:32px;
256
- }
254
+ line-height:42px;
257
255
 
258
- .rs-reset-gotham-font-style &{
259
- letter-spacing:normal;
256
+ line-height:var(--rs-h2-line-height, 42px);
257
+
258
+ @media screen and (max-width: 640px){
259
+ --rs-h2-font-size:var(--rs-h2-font-size-mobile, 28px);
260
+ --rs-h2-line-height:var(--rs-h2-line-height-mobile, 32px);
260
261
  }
261
262
  }
262
263
  @define-mixin rs-h2-theme-dark{
@@ -274,14 +275,15 @@
274
275
 
275
276
  color:var(--rs-typography-color-hard, #19191C);
276
277
 
277
- font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
278
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
278
279
 
279
- font-family:var(--rs-font-family-inter, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
280
+ 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));
280
281
 
281
282
  font-size:20px;
282
283
 
283
284
  font-size:var(--rs-h3-font-size, 20px);
284
- font-weight:600;
285
+ font-weight:530;
286
+ font-weight:var(--rs-font-weight-semi-bold, 530);
285
287
  line-height:28px;
286
288
  line-height:var(--rs-h3-line-height, 28px);
287
289
  }
@@ -318,22 +320,19 @@
318
320
  color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
319
321
  }
320
322
  @define-mixin rs-text-1{
321
- letter-spacing:normal;
322
-
323
323
  color:rgba(25,25,28,0.7);
324
-
325
324
  color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
326
325
 
327
- font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
326
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
328
327
 
329
- font-family:var(--rs-font-family-inter, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
328
+ 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));
330
329
 
331
- font-size:20px;
330
+ font-size:19px;
332
331
 
333
- font-size:var(--rs-text-1-font-size, 20px);
334
- font-weight:400;
335
- line-height:32px;
336
- line-height:var(--rs-text-1-line-height, 32px);
332
+ font-size:var(--rs-text-1-font-size, 19px);
333
+ font-weight:normal;
334
+ line-height:28px;
335
+ line-height:var(--rs-text-1-line-height, 28px);
337
336
  }
338
337
  @define-mixin rs-text-1-theme-dark{
339
338
  color:rgba(255,255,255,0.7);
@@ -344,21 +343,21 @@
344
343
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
345
344
  }
346
345
  @define-mixin rs-h4{
347
- letter-spacing:normal;
348
-
349
346
  color:#19191C;
350
-
351
347
  color:var(--rs-typography-color-hard, #19191C);
352
348
 
353
- font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
349
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
354
350
 
355
- font-family:var(--rs-font-family-inter, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
351
+ 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));
356
352
 
357
- font-size:16px;
353
+ font-size:17px;
354
+
355
+ font-size:var(--rs-h4-font-size, 17px);
356
+ font-weight:530;
357
+ font-weight:var(--rs-font-weight-semi-bold, 530);
358
358
 
359
- font-size:var(--rs-h4-font-size, 16px);
360
- font-weight:600;
361
359
  line-height:24px;
360
+
362
361
  line-height:var(--rs-h4-line-height, 24px);
363
362
  }
364
363
  @define-mixin rs-h4-theme-dark{
@@ -370,15 +369,15 @@
370
369
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
371
370
  }
372
371
  @define-mixin rs-text-2{
373
- letter-spacing:normal;
372
+ letter-spacing:0.0015em;
374
373
 
375
374
  color:rgba(25,25,28,0.7);
376
375
 
377
376
  color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
378
377
 
379
- font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
378
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
380
379
 
381
- font-family:var(--rs-font-family-inter, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
380
+ 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));
382
381
 
383
382
  font-size:16px;
384
383
 
@@ -386,6 +385,10 @@
386
385
  font-weight:400;
387
386
  line-height:24px;
388
387
  line-height:var(--rs-text-2-line-height, 24px);
388
+
389
+ .rs-reset-letter-spacing &{
390
+ letter-spacing:normal;
391
+ }
389
392
  }
390
393
  @define-mixin rs-text-2-theme-dark{
391
394
  color:rgba(255,255,255,0.7);
@@ -396,21 +399,23 @@
396
399
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
397
400
  }
398
401
  @define-mixin rs-h5{
399
- letter-spacing:normal;
400
402
 
401
403
  color:#19191C;
402
404
 
403
405
  color:var(--rs-typography-color-hard, #19191C);
404
406
 
405
- font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
407
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
406
408
 
407
- font-family:var(--rs-font-family-inter, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
409
+ 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
410
 
409
- font-size:13px;
411
+ font-size:14px;
412
+
413
+ font-size:var(--rs-h5-font-size, 14px);
414
+ font-weight:530;
415
+ font-weight:var(--rs-font-weight-semi-bold, 530);
410
416
 
411
- font-size:var(--rs-h5-font-size, 13px);
412
- font-weight:600;
413
417
  line-height:20px;
418
+
414
419
  line-height:var(--rs-h5-line-height, 20px);
415
420
  }
416
421
  @define-mixin rs-h5-theme-dark{
@@ -422,7 +427,7 @@
422
427
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
423
428
  }
424
429
  @define-mixin rs-overline{
425
- letter-spacing:0.2px;
430
+ letter-spacing:0.1em;
426
431
 
427
432
  text-transform:uppercase;
428
433
 
@@ -430,16 +435,19 @@
430
435
 
431
436
  color:var(--rs-typography-color-hard, #19191C);
432
437
 
433
- font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
438
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
434
439
 
435
- font-family:var(--rs-font-family-inter, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
440
+ 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));
436
441
 
437
- font-size:12px;
442
+ font-size:13px;
443
+
444
+ font-size:var(--rs-overline-font-size, 13px);
445
+ font-weight:530;
446
+ font-weight:var(--rs-font-weight-semi-bold, 530);
447
+
448
+ line-height:18px;
438
449
 
439
- font-size:var(--rs-overline-font-size, 12px);
440
- font-weight:bold;
441
- line-height:16px;
442
- line-height:var(--rs-overline-line-height, 16px);
450
+ line-height:var(--rs-overline-line-height, 18px);
443
451
  }
444
452
  @define-mixin rs-overline-theme-dark{
445
453
  color:#FFFFFF;
@@ -450,22 +458,25 @@
450
458
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
451
459
  }
452
460
  @define-mixin rs-text-3{
453
- letter-spacing:normal;
461
+ letter-spacing:0.0045em;
454
462
 
455
463
  color:rgba(25,25,28,0.7);
456
464
 
457
465
  color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
458
466
 
459
- font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
467
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
460
468
 
461
- font-family:var(--rs-font-family-inter, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
469
+ 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));
462
470
 
463
471
  font-size:13px;
464
472
 
465
473
  font-size:var(--rs-text-3-font-size, 13px);
466
- font-weight:400;
467
474
  line-height:20px;
468
475
  line-height:var(--rs-text-3-line-height, 20px);
476
+
477
+ .rs-reset-letter-spacing &{
478
+ letter-spacing:normal;
479
+ }
469
480
  }
470
481
  @define-mixin rs-text-3-theme-dark{
471
482
  color:rgba(255,255,255,0.7);
@@ -535,8 +546,8 @@
535
546
  }
536
547
  }
537
548
  @define-mixin rs-core-list{
538
- font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
539
- font-family:var(--rs-font-family-inter, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif);
549
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
550
+ 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));
540
551
  list-style-type:none;
541
552
  padding-left:0;
542
553
  @mixin rs-core-list-offset-items-16;
@@ -642,18 +653,18 @@
642
653
  }
643
654
 
644
655
  > li::before{
645
- content:counter(ol-counter)'.';
656
+ content:counter(ol-counter) '.';
646
657
  counter-increment:ol-counter;
647
658
  }
648
659
  }
649
660
  @define-mixin rs-ol-alpha-lower{
650
661
  > li::before{
651
- content:counter(ol-counter,lower-alpha)'.';
662
+ content:counter(ol-counter, lower-alpha) '.';
652
663
  }
653
664
  }
654
665
  @define-mixin rs-ol-alpha-upper{
655
666
  > li::before{
656
- content:counter(ol-counter,upper-alpha)'.';
667
+ content:counter(ol-counter, upper-alpha) '.';
657
668
  }
658
669
  }
659
670
  @define-mixin rs-pre-child-code-direct{
@@ -675,9 +686,9 @@
675
686
  background:transparent !important;
676
687
  color:inherit !important;
677
688
 
678
- font-family:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
689
+ font-family:'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
679
690
 
680
- font-family:var(--rs-font-family-mono, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
691
+ font-family:var(--rs-font-family-mono, 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
681
692
  line-height:inherit;
682
693
  }
683
694
  @define-mixin rs-pre{
@@ -694,16 +705,16 @@
694
705
 
695
706
  word-wrap:normal;
696
707
 
697
- font-family:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
708
+ font-family:'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
698
709
 
699
- font-family:var(--rs-font-family-mono, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
710
+ font-family:var(--rs-font-family-mono, 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
700
711
 
701
- font-size:15px;
712
+ font-size:16px;
702
713
  line-height:24px;
703
714
  color:#19191C;
704
715
  color:var(--rs-typography-pre-color, #19191C);
705
- background-color:#E8E8E8;
706
- background-color:var(--rs-typography-pre-bg-color, #E8E8E8);
716
+ background-color:rgba(25,25,28,0.1);
717
+ background-color:var(--rs-typography-pre-bg-color, rgba(25,25,28,0.1));
707
718
  border-radius:8px;
708
719
 
709
720
  display:block;
@@ -721,51 +732,37 @@
721
732
  @define-mixin rs-pre-theme-dark{
722
733
  color:rgba(255,255,255,0.7);
723
734
  color:var(--rs-typography-pre-color, rgba(255,255,255,0.7));
724
- background-color:#303033;
725
- background-color:var(--rs-typography-pre-bg-color, #303033);
735
+ background-color:rgba(255,255,255,0.1);
736
+ background-color:var(--rs-typography-pre-bg-color, rgba(255,255,255,0.1));
726
737
  }
727
738
  @define-mixin rs-pre-offset-top{
728
739
  margin-top:16px;
729
740
  }
730
- @define-mixin rs-code-text-1{
731
- padding:0 8px;
732
- }
733
- @define-mixin rs-code-text-2{
734
- padding:0 6px;
735
- }
736
741
  @define-mixin rs-code{
737
742
  -webkit-box-sizing:border-box;
738
743
  box-sizing:border-box;
739
- @mixin rs-code-text-2;
744
+ padding:0.11111em 0.44444em;
740
745
 
741
746
  color:#19191C;
742
747
 
743
748
  color:var(--rs-typography-pre-color, #19191C);
744
- background-color:#E8E8E8;
745
- background-color:var(--rs-typography-pre-bg-color, #E8E8E8);
749
+ background-color:rgba(25,25,28,0.1);
750
+ background-color:var(--rs-typography-pre-bg-color, rgba(25,25,28,0.1));
746
751
 
747
- font-family:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
752
+ font-family:'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
748
753
 
749
- font-family:var(--rs-font-family-mono, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
754
+ font-family:var(--rs-font-family-mono, 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace);
750
755
 
751
756
  font-size:90%;
752
757
  line-height:inherit;
753
758
 
754
759
  border-radius:4px;
755
-
756
- .rs-text-2 &{
757
- @mixin rs-code-text-2;
758
- }
759
-
760
- .rs-text-1 &{
761
- @mixin rs-code-text-1;
762
- }
763
760
  }
764
761
  @define-mixin rs-code-theme-dark{
765
762
  color:rgba(255,255,255,0.7);
766
763
  color:var(--rs-typography-pre-color, rgba(255,255,255,0.7));
767
- background-color:#303033;
768
- background-color:var(--rs-typography-pre-bg-color, #303033);
764
+ background-color:rgba(255,255,255,0.1);
765
+ background-color:var(--rs-typography-pre-bg-color, rgba(255,255,255,0.1));
769
766
  }
770
767
  @define-mixin rs-link-hardness-hard{
771
768
  --rs-link-color:var(--rs-typography-color-hard, #19191C);
@@ -778,8 +775,9 @@
778
775
  }
779
776
  @define-mixin rs-link{
780
777
  --rs-link-color:var(--rs-typography-color-hard, #19191C);
781
- --rs-link-color-hover:var(--rs-typography-text-link-hover-color, #FFFFFF);
782
- --rs-underline-color:var(--rs-typography-color-hard, #19191C);
778
+
779
+ color:#19191C;
780
+ color:var(--rs-link-color);
783
781
 
784
782
  padding-bottom:1px;
785
783
 
@@ -787,28 +785,11 @@
787
785
 
788
786
  cursor:pointer;
789
787
  text-decoration:none;
790
- color:#19191C;
791
- color:var(--rs-link-color);
792
788
 
793
789
  font-size:inherit;
794
790
  line-height:inherit;
795
- border-bottom:1px solid #19191C;
796
- border-bottom:1px solid var(--rs-underline-color);
797
-
798
- background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, #19191C), color-stop(0, transparent));
799
-
800
- background-image:linear-gradient(to bottom, #19191C 100%, transparent 0);
801
- background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--rs-underline-color)), color-stop(0, transparent));
802
- background-image:linear-gradient(to bottom, var(--rs-underline-color) 100%, transparent 0);
803
- background-size:auto 0;
804
- background-repeat:repeat-x;
805
- background-position:left calc(100% + 4px);
806
- -webkit-transition:background-size 300ms, color 300ms;
807
- transition:background-size 300ms, color 300ms;
808
- @media all and (-ms-high-contrast:none){
809
- -webkit-transition:none;
810
- transition:none;
811
- }
791
+ border-bottom-style:solid;
792
+ border-bottom-width:1px;
812
793
 
813
794
  &:active,
814
795
  &:focus{
@@ -818,26 +799,44 @@
818
799
 
819
800
  &:hover{
820
801
  text-decoration:none;
821
- color:#FFFFFF;
822
- color:var(--rs-link-color-hover);
823
- background-size:auto calc(100% + 4px);
824
802
  }
825
803
 
826
804
  &:focus[data-focus-method='key']{
827
- -webkit-box-shadow:#4597ff 0 0 0 4px;
828
- -webkit-box-shadow:var(--rs-color-primary-dim-light-theme, #4597ff) 0 0 0 4px;
829
- box-shadow:#4597ff 0 0 0 4px;
830
- box-shadow:var(--rs-color-primary-dim-light-theme, #4597ff) 0 0 0 4px;
805
+ -webkit-box-shadow:#8979ff 0 0 0 4px;
806
+ -webkit-box-shadow:var(--rs-color-primary-dim-light-theme, #8979ff) 0 0 0 4px;
807
+ box-shadow:#8979ff 0 0 0 4px;
808
+ box-shadow:var(--rs-color-primary-dim-light-theme, #8979ff) 0 0 0 4px;
809
+ }
810
+
811
+ [class*="rs-super-hero"] &{
812
+ border-bottom-width:4px;
831
813
  }
832
814
 
815
+ @media screen and (max-width: 1000px){
816
+
833
817
  [class*="rs-super-hero"] &{
834
- @mixin rs-link-border-5;
818
+ border-bottom-width:3px
835
819
  }
820
+ }
821
+
822
+ @media screen and (max-width: 640px){
823
+
824
+ [class*="rs-super-hero"] &{
825
+ border-bottom-width:2px
826
+ }
827
+ }
836
828
 
837
829
  [class*="rs-hero"] &{
838
- @mixin rs-link-border-4;
830
+ border-bottom-width:3px;
839
831
  }
840
832
 
833
+ @media screen and (max-width: 640px){
834
+
835
+ [class*="rs-hero"] &{
836
+ border-bottom-width:2px
837
+ }
838
+ }
839
+
841
840
  [class*="rs-h1"] &,
842
841
  [class*="rs-h2"] &,
843
842
  [class*="rs-h3"] &,
@@ -846,27 +845,95 @@
846
845
  [class*="rs-overline"] &,
847
846
  [class*="rs-subtitle-1"] &,
848
847
  [class*="rs-subtitle-2"] &{
849
- @mixin rs-link-border-2;
848
+ border-bottom-width:2px;
850
849
  }
851
850
  }
852
851
  @define-mixin rs-link-external{
853
852
  &:after{
854
853
  content:'\2197';
855
854
  display:inline;
856
- margin-right:-0.1em;
855
+ margin-right:0;
857
856
  margin-left:0;
858
857
  }
859
858
  }
859
+ @define-mixin rs-link-mode-classic{
860
+ --rs-link-color-hover:var(--rs-typography-color-hard, #19191C);
861
+ --rs-underline-color:var(--rs-typography-classic-link-underline-color, rgba(25,25,28,0.4));
862
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #19191C);
863
+
864
+ border-bottom-color:rgba(25,25,28,0.4);
865
+ border-bottom-color:var(--rs-underline-color);
866
+
867
+ &:hover{
868
+ color:#19191C;
869
+ color:var(--rs-link-color-hover);
870
+ border-bottom-color:#19191C;
871
+ border-bottom-color:var(--rs-underline-color-hover);
872
+ border-bottom-width:2px;
873
+ padding-bottom:0;
874
+ }
875
+ [class*="rs-super-hero"] &:hover{
876
+ border-bottom-width:5px;
877
+ }
878
+
879
+ @media screen and (max-width: 1000px){
880
+ [class*="rs-super-hero"] &:hover{
881
+ border-bottom-width:4px
882
+ }
883
+ }
884
+
885
+ @media screen and (max-width: 640px){
886
+ [class*="rs-super-hero"] &:hover{
887
+ border-bottom-width:3px
888
+ }
889
+ }
890
+ [class*="rs-hero"] &:hover{
891
+ border-bottom-width:4px;
892
+ }
893
+
894
+ @media screen and (max-width: 640px){
895
+ [class*="rs-hero"] &:hover{
896
+ border-bottom-width:3px
897
+ }
898
+ }
899
+ [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{
900
+ border-bottom-width:3px;
901
+ }
902
+ }
903
+ @define-mixin rs-link-mode-rock{
904
+ --rs-link-color-hover:var(--rs-typography-rock-link-hover-color, #FFFFFF);
905
+ --rs-underline-color:var(--rs-typography-color-pale, #19191C);
906
+
907
+ border-bottom-color:#19191C;
908
+ border-bottom-color:var(--rs-underline-color);
909
+ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, #19191C), color-stop(0, transparent));
910
+ background-image:linear-gradient(to bottom, #19191C 100%, transparent 0);
911
+ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--rs-underline-color)), color-stop(0, transparent));
912
+ background-image:linear-gradient(to bottom, var(--rs-underline-color) 100%, transparent 0);
913
+ background-size:auto 0;
914
+ background-repeat:repeat-x;
915
+ background-position:left calc(100% + 4px);
916
+ -webkit-transition:background-size 300ms, color 300ms;
917
+ transition:background-size 300ms, color 300ms;
918
+ @media all and (-ms-high-contrast: none){
919
+ -webkit-transition:none;
920
+ transition:none;
921
+ }
922
+
923
+ &:hover{
924
+ color:#FFFFFF;
925
+ color:var(--rs-link-color-hover);
926
+ background-size:auto calc(100% + 4px);
927
+ }
928
+ }
860
929
  @define-mixin rs-link-mode-standalone{
930
+ --rs-link-standalone-border-offset:1.15em;
861
931
  --rs-link-color-hover:var(--rs-typography-color-hard, #19191C);
862
- --rs-link-standalone-border-offset:1.3em;
932
+ --rs-underline-color:transparent;
933
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #19191C);
934
+
863
935
  border-bottom-color:transparent;
864
- background-image:none;
865
- background-size:initial;
866
- background-repeat:initial;
867
- background-position:initial;
868
- -webkit-transition:none;
869
- transition:none;
936
+ border-bottom-color:var(--rs-underline-color);
870
937
 
871
938
  &:after{
872
939
  content:'\2192';
@@ -881,13 +948,13 @@
881
948
  color:#19191C;
882
949
  color:var(--rs-link-color-hover);
883
950
  border-bottom-color:#19191C;
884
- border-bottom-color:var(--rs-underline-color);
885
- -o-border-image:linear-gradient(to right, #19191C calc(100% - 1.3em), transparent 1.3em) 1;
886
- border-image:-webkit-gradient(linear, left top, right top, from(#19191C), color-stop(1.3em, transparent)) 1;
887
- border-image:linear-gradient(to right, #19191C calc(100% - 1.3em), transparent 1.3em) 1;
888
- -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;
889
- border-image:-webkit-gradient(linear, left top, right top, from(var(--rs-underline-color)), to(transparent)) 1;
890
- 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;
951
+ border-bottom-color:var(--rs-underline-color-hover);
952
+ -o-border-image:linear-gradient(to right, #19191C calc(100% - 1.1em), transparent 1.1em) 1;
953
+ border-image:-webkit-gradient(linear, left top, right top, from(#19191C), color-stop(1.1em, transparent)) 1;
954
+ border-image:linear-gradient(to right, #19191C calc(100% - 1.1em), transparent 1.1em) 1;
955
+ -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;
956
+ border-image:-webkit-gradient(linear, left top, right top, from(var(--rs-underline-color-hover)), to(transparent)) 1;
957
+ 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;
891
958
  }
892
959
 
893
960
  &:hover:after{
@@ -895,59 +962,44 @@
895
962
  margin-left:0.3em;
896
963
  }
897
964
  }
898
- @define-mixin rs-link-mode-standalone-big-heading{
899
- --rs-link-standalone-border-offset:1.15em;
900
- }
901
965
  @define-mixin rs-link-mode-standalone-external{
966
+ --rs-link-standalone-border-offset:1.02em;
902
967
  &:after{
903
968
  content:'\2197';
904
969
  }
905
970
  }
971
+ @define-mixin rs-link-mode-standalone-big-heading{
972
+ --rs-link-standalone-border-offset:1.12em;
973
+ }
974
+ @define-mixin rs-link-mode-standalone-external-big-heading{
975
+ --rs-link-standalone-border-offset:1em;
976
+ }
977
+ @define-mixin rs-link-mode-standalone-overline{
978
+ --rs-link-standalone-border-offset:1.3em;
979
+ }
980
+ @define-mixin rs-link-mode-standalone-external-overline{
981
+ --rs-link-standalone-border-offset:1.15em;
982
+ }
906
983
  @define-mixin rs-link-mode-clear{
907
984
  --rs-link-color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
908
985
  --rs-link-color-hover:var(--rs-typography-color-hard, #19191C);
986
+ --rs-underline-color:transparent;
987
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #19191C);
909
988
 
910
989
  border-bottom-color:transparent;
911
- background-image:none;
912
- background-size:initial;
913
- background-repeat:initial;
914
- background-position:initial;
915
- -webkit-transition:none;
916
- transition:none;
990
+ border-bottom-color:var(--rs-underline-color);
917
991
 
918
992
  color:rgba(25,25,28,0.7);
919
993
  color:var(--rs-link-color);
920
994
 
921
995
  &:hover{
922
996
  border-bottom-color:#19191C;
923
- border-bottom-color:var(--rs-underline-color);
997
+ border-bottom-color:var(--rs-underline-color-hover);
998
+
924
999
  color:#19191C;
925
1000
  color:var(--rs-link-color-hover);
926
1001
  }
927
1002
  }
928
- @define-mixin rs-link-border-5{
929
- padding-bottom:0;
930
-
931
- border-bottom-width:5px;
932
-
933
- @media screen and (max-width: 640px){
934
- border-bottom-width:2px;
935
- }
936
- }
937
- @define-mixin rs-link-border-4{
938
- padding-bottom:0;
939
-
940
- border-bottom-width:4px;
941
-
942
- @media screen and (max-width: 640px){
943
- border-bottom-width:2px;
944
- }
945
- }
946
- @define-mixin rs-link-border-2{
947
- padding-bottom:0;
948
-
949
- border-bottom-width:2px;
950
- }
951
1003
  @define-mixin rs-link-hardness-hard-theme-dark{
952
1004
  --rs-link-color:var(--rs-typography-color-hard, #FFFFFF);
953
1005
  }
@@ -959,70 +1011,88 @@
959
1011
  }
960
1012
  @define-mixin rs-link-theme-dark{
961
1013
  --rs-link-color:var(--rs-typography-color-hard, #FFFFFF);
962
- --rs-link-color-hover:var(--rs-typography-text-link-hover-color, #19191C);
963
- --rs-underline-color:var(--rs-typography-color-hard, #FFFFFF);
964
-
965
1014
  color:#FFFFFF;
966
1015
  color:var(--rs-link-color);
967
1016
 
968
- background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, #FFFFFF), color-stop(0, transparent));
969
-
970
- background-image:linear-gradient(to bottom, #FFFFFF 100%, transparent 0);
971
- background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--rs-underline-color)), color-stop(0, transparent));
972
- background-image:linear-gradient(to bottom, var(--rs-underline-color) 100%, transparent 0);
973
- border-bottom-color:#FFFFFF;
974
- border-bottom-color:var(--rs-underline-color);
975
-
976
1017
  &:active,
977
1018
  &:focus{
978
1019
  color:#FFFFFF;
979
1020
  color:var(--rs-link-color);
980
1021
  }
981
1022
 
1023
+ &:focus[data-focus-method='key']{
1024
+ -webkit-box-shadow:#6f61d2 0 0 0 4px;
1025
+ -webkit-box-shadow:var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 0 0 4px;
1026
+ box-shadow:#6f61d2 0 0 0 4px;
1027
+ box-shadow:var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 0 0 4px;
1028
+ }
1029
+ }
1030
+ @define-mixin rs-link-mode-classic-theme-dark{
1031
+ --rs-link-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1032
+ --rs-underline-color:var(--rs-typography-classic-link-underline-color, rgba(255,255,255,0.4));
1033
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1034
+
1035
+ border-bottom-color:rgba(255,255,255,0.4);
1036
+ border-bottom-color:var(--rs-underline-color);
1037
+
982
1038
  &:hover{
983
- color:#19191C;
1039
+ color:#FFFFFF;
984
1040
  color:var(--rs-link-color-hover);
1041
+ border-bottom-color:#FFFFFF;
1042
+ border-bottom-color:var(--rs-underline-color-hover);
985
1043
  }
1044
+ }
1045
+ @define-mixin rs-link-mode-rock-theme-dark{
1046
+ --rs-link-color-hover:var(--rs-typography-rock-link-hover-color, #19191C);
1047
+ --rs-underline-color:var(--rs-typography-color-hard, #FFFFFF);
986
1048
 
987
- &:focus[data-focus-method='key']{
988
- -webkit-box-shadow:#428ad2 0 0 0 4px;
989
- -webkit-box-shadow:var(--rs-color-primary-dim-dark-theme, #428ad2) 0 0 0 4px;
990
- box-shadow:#428ad2 0 0 0 4px;
991
- box-shadow:var(--rs-color-primary-dim-dark-theme, #428ad2) 0 0 0 4px;
1049
+ border-bottom-color:#FFFFFF;
1050
+ border-bottom-color:var(--rs-underline-color);
1051
+
1052
+ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, #FFFFFF), color-stop(0, transparent));
1053
+
1054
+ background-image:linear-gradient(to bottom, #FFFFFF 100%, transparent 0);
1055
+ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--rs-underline-color)), color-stop(0, transparent));
1056
+ background-image:linear-gradient(to bottom, var(--rs-underline-color) 100%, transparent 0);
1057
+
1058
+ &:hover{
1059
+ color:#19191C;
1060
+ color:var(--rs-link-color-hover);
992
1061
  }
993
1062
  }
994
1063
  @define-mixin rs-link-mode-standalone-theme-dark{
995
1064
  --rs-link-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1065
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #FFFFFF);
996
1066
 
997
1067
  background-image:none;
998
1068
  border-bottom-color:transparent;
1069
+
999
1070
  &:hover{
1000
1071
  color:#FFFFFF;
1001
1072
  color:var(--rs-link-color-hover);
1002
1073
  border-bottom-color:#FFFFFF;
1003
- border-bottom-color:var(--rs-underline-color);
1074
+ border-bottom-color:var(--rs-underline-color-hover);
1004
1075
  -o-border-image:linear-gradient(to right, #FFFFFF calc(100% - 1.3em), transparent 1.3em) 1;
1005
1076
  border-image:-webkit-gradient(linear, left top, right top, from(#FFFFFF), color-stop(1.3em, transparent)) 1;
1006
1077
  border-image:linear-gradient(to right, #FFFFFF calc(100% - 1.3em), transparent 1.3em) 1;
1007
- -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;
1008
- border-image:-webkit-gradient(linear, left top, right top, from(var(--rs-underline-color)), to(transparent)) 1;
1009
- 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;
1078
+ -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;
1079
+ border-image:-webkit-gradient(linear, left top, right top, from(var(--rs-underline-color-hover)), to(transparent)) 1;
1080
+ 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;
1010
1081
  }
1011
1082
  }
1012
1083
  @define-mixin rs-link-mode-clear-theme-dark{
1013
1084
  --rs-link-color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
1014
1085
  --rs-link-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1086
+ --rs-underline-color-hover:var(--rs-typography-color-hard, #FFFFFF);
1015
1087
 
1016
- background-image:none;
1017
- border-bottom-color:transparent;
1018
1088
  color:rgba(255,255,255,0.7);
1019
1089
  color:var(--rs-link-color);
1020
1090
 
1021
1091
  &:hover{
1022
- border-bottom-color:#FFFFFF;
1023
- border-bottom-color:var(--rs-underline-color);
1024
1092
  color:#FFFFFF;
1025
1093
  color:var(--rs-link-color-hover);
1094
+ border-bottom-color:#FFFFFF;
1095
+ border-bottom-color:var(--rs-underline-color-hover);
1026
1096
  }
1027
1097
  }
1028
1098