@rescui/typography 0.12.0 → 0.14.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.
@@ -5,7 +5,7 @@ export declare type Texts = 'rs-text-1' | 'rs-text-2' | 'rs-text-3';
5
5
  export declare type Link = 'rs-link';
6
6
  export declare type OrderedList = 'rs-ol';
7
7
  export declare type UnorderedList = 'rs-ul';
8
- export declare type Others = 'rs-super-hero' | 'rs-digits-1' | 'rs-digits-2' | 'rs-hero' | 'rs-subtitle-1' | 'rs-h1' | 'rs-subtitle-2' | 'rs-h2' | 'rs-h3' | 'rs-h4' | 'rs-h5' | 'rs-overline' | 'rs-pre' | 'rs-code' | 'rs-link' | 'rs-article';
8
+ export declare type Others = 'rs-super-hero' | 'rs-middle-hero' | 'rs-digits-1' | 'rs-digits-2' | 'rs-hero' | 'rs-subtitle-1' | 'rs-h1' | 'rs-subtitle-2' | 'rs-h2' | 'rs-h3' | 'rs-h4' | 'rs-h5' | 'rs-overline' | 'rs-pre' | 'rs-code' | 'rs-link' | 'rs-article';
9
9
  export declare type Type = Texts | Link | OrderedList | Others | UnorderedList;
10
10
  export declare type Hardness = 'average' | 'hard' | 'pale';
11
11
  export declare type TextsParams = {
@@ -1,7 +1,7 @@
1
1
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
2
2
  import { useTheme } from '@rescui/ui-contexts';
3
3
  import bemCnFast from 'bem-cn-fast';
4
- var THEMED_TYPES = ['rs-super-hero', 'rs-digits-1', 'rs-digits-2', 'rs-hero', 'rs-subtitle-1', 'rs-h1', 'rs-subtitle-2', 'rs-h2', 'rs-h3', 'rs-h4', 'rs-h5', 'rs-overline', 'rs-pre', 'rs-code', 'rs-link', 'rs-article', 'rs-text-1', 'rs-text-2', 'rs-text-3', 'rs-link'];
4
+ var THEMED_TYPES = ['rs-super-hero', 'rs-middle-hero', 'rs-digits-1', 'rs-digits-2', 'rs-hero', 'rs-subtitle-1', 'rs-h1', 'rs-subtitle-2', 'rs-h2', 'rs-h3', 'rs-h4', 'rs-h5', 'rs-overline', 'rs-pre', 'rs-code', 'rs-link', 'rs-article', 'rs-text-1', 'rs-text-2', 'rs-text-3', 'rs-link'];
5
5
 
6
6
  function createTextCn(theme) {
7
7
  if (!theme) {
@@ -0,0 +1,37 @@
1
+ /* Light weight */
2
+ @font-face {
3
+ font-family: 'JetBrains Sans';
4
+ src: url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Light.woff2') format('woff2'),
5
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Light.woff') format('woff');
6
+ font-weight: 300;
7
+ font-style: normal;
8
+ }
9
+ /* Regular weight */
10
+ @font-face {
11
+ font-family: 'JetBrains Sans';
12
+ src: url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Regular.woff2') format('woff2'),
13
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Regular.woff') format('woff');
14
+ font-weight: 400;
15
+ font-style: normal;
16
+ }
17
+ /* SemiBold weight */
18
+ @font-face {
19
+ font-family: 'JetBrains Sans';
20
+ src: url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-SemiBold.woff2') format('woff2'),
21
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-SemiBold.woff') format('woff');
22
+ font-weight: 600;
23
+ font-style: normal;
24
+ }
25
+
26
+ @supports (font-variation-settings: normal) {
27
+ @font-face {
28
+ font-family: 'JetBrains Sans';
29
+ src: url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.woff2') format('woff2 supports variations'),
30
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.woff2') format('woff2-variations'),
31
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.ttf') format("truetype-variations");
32
+
33
+ font-weight: 100 900;
34
+ font-style: normal;
35
+ }
36
+
37
+ }
@@ -1,21 +1,24 @@
1
1
  /* Light weight */
2
2
  @font-face {
3
3
  font-family: 'JetBrains Sans';
4
- src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Light.woff2') format('woff2'), url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Light.woff') format('woff');
4
+ src: url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Light.woff2') format('woff2'),
5
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Light.woff') format('woff');
5
6
  font-weight: 300;
6
7
  font-style: normal;
7
8
  }
8
9
  /* Regular weight */
9
10
  @font-face {
10
11
  font-family: 'JetBrains Sans';
11
- src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Regular.woff2') format('woff2'), url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Regular.woff') format('woff');
12
+ src: url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Regular.woff2') format('woff2'),
13
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Regular.woff') format('woff');
12
14
  font-weight: 400;
13
15
  font-style: normal;
14
16
  }
15
17
  /* SemiBold weight */
16
18
  @font-face {
17
19
  font-family: 'JetBrains Sans';
18
- src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-SemiBold.woff2') format('woff2'), url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-SemiBold.woff') format('woff');
20
+ src: url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-SemiBold.woff2') format('woff2'),
21
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-SemiBold.woff') format('woff');
19
22
  font-weight: 600;
20
23
  font-style: normal;
21
24
  }
@@ -23,10 +26,12 @@
23
26
  @supports (font-variation-settings: normal) {
24
27
  @font-face {
25
28
  font-family: 'JetBrains Sans';
26
- src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans.woff2') format('woff2 supports variations'),
27
- url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans.woff2') format('woff2-variations'),
28
- url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans.woff') format('woff-variations');
29
+ src: url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.woff2') format('woff2 supports variations'),
30
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.woff2') format('woff2-variations'),
31
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.ttf') format("truetype-variations");
32
+
29
33
  font-weight: 100 900;
30
34
  font-style: normal;
31
35
  }
36
+
32
37
  }
@@ -0,0 +1,27 @@
1
+ /* Light weight */
2
+ @font-face {
3
+ font-family: 'JetBrains Sans';
4
+ src: url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Light.woff2') format('woff2'),
5
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Light.woff') format('woff');
6
+
7
+ font-weight: 300;
8
+ font-style: normal;
9
+ }
10
+ /* Regular weight */
11
+ @font-face {
12
+ font-family: 'JetBrains Sans';
13
+ src: url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Regular.woff2') format('woff2'),
14
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Regular.woff') format('woff');
15
+
16
+ font-weight: 400;
17
+ font-style: normal;
18
+ }
19
+ /* SemiBold weight */
20
+ @font-face {
21
+ font-family: 'JetBrains Sans';
22
+ src: url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-SemiBold.woff2') format('woff2'),
23
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-SemiBold.woff') format('woff');
24
+
25
+ font-weight: 600;
26
+ font-style: normal;
27
+ }
@@ -0,0 +1,9 @@
1
+ @font-face {
2
+ font-family: 'JetBrains Sans';
3
+ src: url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.woff2') format('woff2 supports variations'),
4
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.woff2') format('woff2-variations'),
5
+ url('https://resources.jetbrains.com.cn/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.ttf') format("truetype-variations");
6
+
7
+ font-weight: 100 900;
8
+ font-style: normal;
9
+ }
@@ -1,8 +1,9 @@
1
1
  @font-face {
2
2
  font-family: 'JetBrains Sans';
3
- src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans.woff2') format('woff2 supports variations'),
4
- url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans.woff2') format('woff2-variations'),
5
- url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans.woff') format('woff-variations');
3
+ src: url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.woff2') format('woff2 supports variations'),
4
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.woff2') format('woff2-variations'),
5
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/variable/JetBrainsSans%5Bwght%5D.ttf') format("truetype-variations");
6
+
6
7
  font-weight: 100 900;
7
8
  font-style: normal;
8
9
  }
@@ -1,21 +1,27 @@
1
1
  /* Light weight */
2
2
  @font-face {
3
3
  font-family: 'JetBrains Sans';
4
- src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Light.woff2') format('woff2'), url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Light.woff') format('woff');
4
+ src: url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Light.woff2') format('woff2'),
5
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Light.woff') format('woff');
6
+
5
7
  font-weight: 300;
6
8
  font-style: normal;
7
9
  }
8
10
  /* Regular weight */
9
11
  @font-face {
10
12
  font-family: 'JetBrains Sans';
11
- src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Regular.woff2') format('woff2'), url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Regular.woff') format('woff');
13
+ src: url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Regular.woff2') format('woff2'),
14
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-Regular.woff') format('woff');
15
+
12
16
  font-weight: 400;
13
17
  font-style: normal;
14
18
  }
15
19
  /* SemiBold weight */
16
20
  @font-face {
17
21
  font-family: 'JetBrains Sans';
18
- src: url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-SemiBold.woff2') format('woff2'), url('https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-SemiBold.woff') format('woff');
22
+ src: url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-SemiBold.woff2') format('woff2'),
23
+ url('https://resources.jetbrains.com/storage/jetbrains-sans/google-fonts/v1.308/webfonts/JetBrainsSans-SemiBold.woff') format('woff');
24
+
19
25
  font-weight: 600;
20
26
  font-style: normal;
21
27
  }
package/lib/index.css CHANGED
@@ -11,8 +11,8 @@
11
11
  font-feature-settings:"kern", "liga", "calt";
12
12
  font-size:142px;
13
13
  font-size:var(--rs-super-hero-font-size, 142px);
14
- font-weight:530;
15
- font-weight:var(--rs-font-weight-semi-bold, 530);
14
+ font-weight:600;
15
+ font-weight:var(--rs-font-weight-semi-bold, 600);
16
16
  line-height:142px;
17
17
  line-height:var(--rs-super-hero-line-height, 142px);
18
18
  }
@@ -45,6 +45,48 @@
45
45
  color:#FFFFFF;
46
46
  color:var(--rs-typography-color-hard, #FFFFFF);
47
47
  }
48
+ .rs-middle-hero{
49
+ letter-spacing:-0.008em;
50
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
51
+ 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));
52
+ -webkit-font-feature-settings:"kern", "liga", "calt";
53
+ font-feature-settings:"kern", "liga", "calt";
54
+ font-size:92px;
55
+ font-size:var(--rs-middle-hero-font-size, 92px);
56
+ font-weight:600;
57
+ font-weight:var(--rs-font-weight-semi-bold, 600);
58
+ line-height:92px;
59
+ line-height:var(--rs-middle-hero-line-height, 92px);
60
+ }
61
+ @media screen and (max-width: 1000px){
62
+ .rs-middle-hero{
63
+ --rs-middle-hero-font-size:var(--rs-hero-font-size, 72px);
64
+ --rs-middle-hero-line-height:var(--rs-hero-line-height, 72px);
65
+ letter-spacing:-0.005em;
66
+ }
67
+ }
68
+ @media screen and (max-width: 640px){
69
+ .rs-middle-hero{
70
+ --rs-middle-hero-font-size:var(--rs-hero-font-size-mobile, 42px);
71
+ --rs-middle-hero-line-height:var(--rs-hero-line-height-mobile, 50px);
72
+ letter-spacing:-0.001em;
73
+ }
74
+ }
75
+ .rs-reset-letter-spacing .rs-middle-hero{
76
+ letter-spacing:normal;
77
+ }
78
+ .rs-middle-hero {
79
+ color:#19191C;
80
+ color:var(--rs-typography-color-hard, #19191C);
81
+ }
82
+ .rs-middle-hero_theme_dark{
83
+ color:#FFFFFF;
84
+ color:var(--rs-typography-color-hard, #FFFFFF);
85
+ }
86
+ [class*='_theme_dark'] .rs-middle-hero_theme_auto{
87
+ color:#FFFFFF;
88
+ color:var(--rs-typography-color-hard, #FFFFFF);
89
+ }
48
90
  .rs-digits-1{
49
91
  letter-spacing:-0.005em;
50
92
  font-variant-numeric:tabular-nums;
@@ -54,8 +96,8 @@
54
96
  font-feature-settings:"kern", "liga", "calt";
55
97
  font-size:69px;
56
98
  font-size:var(--rs-digits-1-font-size, 69px);
57
- font-weight:320;
58
- font-weight:var(--rs-font-weight-light, 320);
99
+ font-weight:300;
100
+ font-weight:var(--rs-font-weight-light, 300);
59
101
  line-height:71px;
60
102
  line-height:var(--rs-digits-1-line-height, 71px);
61
103
  }
@@ -89,8 +131,8 @@
89
131
  font-feature-settings:"kern", "liga", "calt";
90
132
  font-size:40px;
91
133
  font-size:var(--rs-digits-2-font-size, 40px);
92
- font-weight:320;
93
- font-weight:var(--rs-font-weight-light, 320);
134
+ font-weight:300;
135
+ font-weight:var(--rs-font-weight-light, 300);
94
136
  line-height:44px;
95
137
  line-height:var(--rs-digits-2-line-height, 44px);
96
138
  }
@@ -117,8 +159,8 @@
117
159
  font-feature-settings:"kern", "liga", "calt";
118
160
  font-size:72px;
119
161
  font-size:var(--rs-hero-font-size, 72px);
120
- font-weight:530;
121
- font-weight:var(--rs-font-weight-semi-bold, 530);
162
+ font-weight:600;
163
+ font-weight:var(--rs-font-weight-semi-bold, 600);
122
164
  line-height:72px;
123
165
  line-height:var(--rs-hero-line-height, 72px);
124
166
  }
@@ -152,8 +194,8 @@
152
194
  font-feature-settings:"kern", "liga", "calt";
153
195
  font-size:39px;
154
196
  font-size:var(--rs-subtitle-1-font-size, 39px);
155
- font-weight:320;
156
- font-weight:var(--rs-font-weight-light, 320);
197
+ font-weight:300;
198
+ font-weight:var(--rs-font-weight-light, 300);
157
199
  line-height:49px;
158
200
  line-height:var(--rs-subtitle-1-line-height, 49px);
159
201
  }
@@ -183,8 +225,8 @@
183
225
  font-feature-settings:"kern", "liga", "calt";
184
226
  font-size:43px;
185
227
  font-size:var(--rs-h1-font-size, 43px);
186
- font-weight:530;
187
- font-weight:var(--rs-font-weight-semi-bold, 530);
228
+ font-weight:600;
229
+ font-weight:var(--rs-font-weight-semi-bold, 600);
188
230
  line-height:49px;
189
231
  line-height:var(--rs-h1-line-height, 49px);
190
232
  }
@@ -215,8 +257,8 @@
215
257
  font-feature-settings:"kern", "liga", "calt";
216
258
  font-size:29px;
217
259
  font-size:var(--rs-subtitle-2-font-size, 29px);
218
- font-weight:320;
219
- font-weight:var(--rs-font-weight-light, 320);
260
+ font-weight:300;
261
+ font-weight:var(--rs-font-weight-light, 300);
220
262
  line-height:39px;
221
263
  line-height:var(--rs-subtitle-2-line-height, 39px);
222
264
  }
@@ -246,8 +288,8 @@
246
288
  font-feature-settings:"kern", "liga", "calt";
247
289
  font-size:35px;
248
290
  font-size:var(--rs-h2-font-size, 35px);
249
- font-weight:530;
250
- font-weight:var(--rs-font-weight-semi-bold, 530);
291
+ font-weight:600;
292
+ font-weight:var(--rs-font-weight-semi-bold, 600);
251
293
  line-height:42px;
252
294
  line-height:var(--rs-h2-line-height, 42px);
253
295
  }
@@ -277,8 +319,8 @@
277
319
  font-feature-settings:"kern", "liga", "calt";
278
320
  font-size:20px;
279
321
  font-size:var(--rs-h3-font-size, 20px);
280
- font-weight:530;
281
- font-weight:var(--rs-font-weight-semi-bold, 530);
322
+ font-weight:600;
323
+ font-weight:var(--rs-font-weight-semi-bold, 600);
282
324
  line-height:28px;
283
325
  line-height:var(--rs-h3-line-height, 28px);
284
326
  color:#19191C;
@@ -353,8 +395,8 @@
353
395
  font-feature-settings:"kern", "liga", "calt";
354
396
  font-size:16px;
355
397
  font-size:var(--rs-h4-font-size, 16px);
356
- font-weight:530;
357
- font-weight:var(--rs-font-weight-semi-bold, 530);
398
+ font-weight:600;
399
+ font-weight:var(--rs-font-weight-semi-bold, 600);
358
400
  line-height:24px;
359
401
  line-height:var(--rs-h4-line-height, 24px);
360
402
  color:#19191C;
@@ -434,8 +476,8 @@
434
476
  font-feature-settings:"kern", "liga", "calt";
435
477
  font-size:13px;
436
478
  font-size:var(--rs-h5-font-size, 13px);
437
- font-weight:530;
438
- font-weight:var(--rs-font-weight-semi-bold, 530);
479
+ font-weight:600;
480
+ font-weight:var(--rs-font-weight-semi-bold, 600);
439
481
  line-height:20px;
440
482
  line-height:var(--rs-h5-line-height, 20px);
441
483
  color:#19191C;
@@ -460,8 +502,8 @@
460
502
  font-feature-settings:"kern", "liga", "calt";
461
503
  font-size:13px;
462
504
  font-size:var(--rs-overline-font-size, 13px);
463
- font-weight:530;
464
- font-weight:var(--rs-font-weight-semi-bold, 530);
505
+ font-weight:600;
506
+ font-weight:var(--rs-font-weight-semi-bold, 600);
465
507
  line-height:18px;
466
508
  line-height:var(--rs-overline-line-height, 18px);
467
509
  }
@@ -886,6 +928,14 @@
886
928
  border-bottom-width:2px
887
929
  }
888
930
  }
931
+ [class*="rs-middle-hero"] .rs-link{
932
+ border-bottom-width:3px;
933
+ }
934
+ @media screen and (max-width: 640px){
935
+ [class*="rs-middle-hero"] .rs-link{
936
+ border-bottom-width:2px
937
+ }
938
+ }
889
939
  [class*="rs-hero"] .rs-link{
890
940
  border-bottom-width:3px;
891
941
  }
@@ -938,6 +988,14 @@
938
988
  border-bottom-width:3px
939
989
  }
940
990
  }
991
+ [class*="rs-middle-hero"] .rs-link_mode_classic:hover{
992
+ border-bottom-width:4px;
993
+ }
994
+ @media screen and (max-width: 640px){
995
+ [class*="rs-middle-hero"] .rs-link_mode_classic:hover{
996
+ border-bottom-width:3px
997
+ }
998
+ }
941
999
  [class*="rs-hero"] .rs-link_mode_classic:hover{
942
1000
  border-bottom-width:4px;
943
1001
  }
@@ -1008,6 +1066,7 @@
1008
1066
  margin-left:0.3em;
1009
1067
  }
1010
1068
  [class*="rs-super-hero"] .rs-link_mode_standalone,
1069
+ [class*="rs-middle-hero"] .rs-link_mode_standalone,
1011
1070
  [class*="rs-hero"] .rs-link_mode_standalone,
1012
1071
  [class*="rs-h1"] .rs-link_mode_standalone,
1013
1072
  [class*="rs-h2"] .rs-link_mode_standalone{
@@ -1023,6 +1082,7 @@
1023
1082
  content:'\2197';
1024
1083
  }
1025
1084
  [class*="rs-super-hero"] .rs-link_mode_standalone.rs-link_external,
1085
+ [class*="rs-middle-hero"] .rs-link_mode_standalone.rs-link_external,
1026
1086
  [class*="rs-hero"] .rs-link_mode_standalone.rs-link_external,
1027
1087
  [class*="rs-h1"] .rs-link_mode_standalone.rs-link_external,
1028
1088
  [class*="rs-h2"] .rs-link_mode_standalone.rs-link_external{
package/lib/mixins.p.css CHANGED
@@ -57,8 +57,8 @@
57
57
  font-size:142px;
58
58
 
59
59
  font-size:var(--rs-super-hero-font-size, 142px);
60
- font-weight:530;
61
- font-weight:var(--rs-font-weight-semi-bold, 530);
60
+ font-weight:600;
61
+ font-weight:var(--rs-font-weight-semi-bold, 600);
62
62
 
63
63
  line-height:142px;
64
64
 
@@ -91,6 +91,52 @@
91
91
  margin-top:96px;
92
92
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
93
93
  }
94
+ @define-mixin rs-middle-hero-base{
95
+ letter-spacing:-0.008em;
96
+
97
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
98
+
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));
100
+ -webkit-font-feature-settings:"kern", "liga", "calt";
101
+ font-feature-settings:"kern", "liga", "calt";
102
+
103
+ font-size:92px;
104
+
105
+ font-size:var(--rs-middle-hero-font-size, 92px);
106
+ font-weight:600;
107
+ font-weight:var(--rs-font-weight-semi-bold, 600);
108
+
109
+ line-height:92px;
110
+
111
+ line-height:var(--rs-middle-hero-line-height, 92px);
112
+
113
+ @media screen and (max-width: 1000px){
114
+ --rs-middle-hero-font-size:var(--rs-hero-font-size, 72px);
115
+ --rs-middle-hero-line-height:var(--rs-hero-line-height, 72px);
116
+ letter-spacing:-0.005em;
117
+ }
118
+
119
+ @media screen and (max-width: 640px){
120
+ --rs-middle-hero-font-size:var(--rs-hero-font-size-mobile, 42px);
121
+ --rs-middle-hero-line-height:var(--rs-hero-line-height-mobile, 50px);
122
+ letter-spacing:-0.001em;
123
+ }
124
+
125
+ .rs-reset-letter-spacing &{
126
+ letter-spacing:normal;
127
+ }
128
+ }
129
+ @define-mixin rs-middle-hero{
130
+ @mixin rs-middle-hero-base;
131
+ @mixin rs-text-hardness-hard;
132
+ }
133
+ @define-mixin rs-middle-hero-theme-dark{
134
+ @mixin rs-text-hardness-hard-theme-dark;
135
+ }
136
+ @define-mixin rs-middle-hero-offset-top{
137
+ margin-top:96px;
138
+ margin-top:calc(var(--rs-flow-unit, 8px)*12);
139
+ }
94
140
  @define-mixin rs-digits-1-base{
95
141
  letter-spacing:-0.005em;
96
142
 
@@ -105,8 +151,8 @@
105
151
  font-size:69px;
106
152
 
107
153
  font-size:var(--rs-digits-1-font-size, 69px);
108
- font-weight:320;
109
- font-weight:var(--rs-font-weight-light, 320);
154
+ font-weight:300;
155
+ font-weight:var(--rs-font-weight-light, 300);
110
156
  line-height:71px;
111
157
  line-height:var(--rs-digits-1-line-height, 71px);
112
158
 
@@ -144,8 +190,8 @@
144
190
  font-size:40px;
145
191
 
146
192
  font-size:var(--rs-digits-2-font-size, 40px);
147
- font-weight:320;
148
- font-weight:var(--rs-font-weight-light, 320);
193
+ font-weight:300;
194
+ font-weight:var(--rs-font-weight-light, 300);
149
195
  line-height:44px;
150
196
  line-height:var(--rs-digits-2-line-height, 44px);
151
197
 
@@ -176,8 +222,8 @@
176
222
  font-size:72px;
177
223
 
178
224
  font-size:var(--rs-hero-font-size, 72px);
179
- font-weight:530;
180
- font-weight:var(--rs-font-weight-semi-bold, 530);
225
+ font-weight:600;
226
+ font-weight:var(--rs-font-weight-semi-bold, 600);
181
227
 
182
228
  line-height:72px;
183
229
 
@@ -216,8 +262,8 @@
216
262
  font-size:39px;
217
263
 
218
264
  font-size:var(--rs-subtitle-1-font-size, 39px);
219
- font-weight:320;
220
- font-weight:var(--rs-font-weight-light, 320);
265
+ font-weight:300;
266
+ font-weight:var(--rs-font-weight-light, 300);
221
267
  line-height:49px;
222
268
  line-height:var(--rs-subtitle-1-line-height, 49px);
223
269
 
@@ -249,8 +295,8 @@
249
295
  font-size:43px;
250
296
 
251
297
  font-size:var(--rs-h1-font-size, 43px);
252
- font-weight:530;
253
- font-weight:var(--rs-font-weight-semi-bold, 530);
298
+ font-weight:600;
299
+ font-weight:var(--rs-font-weight-semi-bold, 600);
254
300
 
255
301
  line-height:49px;
256
302
 
@@ -285,8 +331,8 @@
285
331
  font-size:29px;
286
332
 
287
333
  font-size:var(--rs-subtitle-2-font-size, 29px);
288
- font-weight:320;
289
- font-weight:var(--rs-font-weight-light, 320);
334
+ font-weight:300;
335
+ font-weight:var(--rs-font-weight-light, 300);
290
336
  line-height:39px;
291
337
  line-height:var(--rs-subtitle-2-line-height, 39px);
292
338
 
@@ -318,8 +364,8 @@
318
364
  font-size:35px;
319
365
 
320
366
  font-size:var(--rs-h2-font-size, 35px);
321
- font-weight:530;
322
- font-weight:var(--rs-font-weight-semi-bold, 530);
367
+ font-weight:600;
368
+ font-weight:var(--rs-font-weight-semi-bold, 600);
323
369
 
324
370
  line-height:42px;
325
371
 
@@ -353,8 +399,8 @@
353
399
  font-size:20px;
354
400
 
355
401
  font-size:var(--rs-h3-font-size, 20px);
356
- font-weight:530;
357
- font-weight:var(--rs-font-weight-semi-bold, 530);
402
+ font-weight:600;
403
+ font-weight:var(--rs-font-weight-semi-bold, 600);
358
404
  line-height:28px;
359
405
  line-height:var(--rs-h3-line-height, 28px);
360
406
  }
@@ -408,8 +454,8 @@
408
454
  font-size:16px;
409
455
 
410
456
  font-size:var(--rs-h4-font-size, 16px);
411
- font-weight:530;
412
- font-weight:var(--rs-font-weight-semi-bold, 530);
457
+ font-weight:600;
458
+ font-weight:var(--rs-font-weight-semi-bold, 600);
413
459
 
414
460
  line-height:24px;
415
461
 
@@ -469,8 +515,8 @@
469
515
  font-size:13px;
470
516
 
471
517
  font-size:var(--rs-h5-font-size, 13px);
472
- font-weight:530;
473
- font-weight:var(--rs-font-weight-semi-bold, 530);
518
+ font-weight:600;
519
+ font-weight:var(--rs-font-weight-semi-bold, 600);
474
520
 
475
521
  line-height:20px;
476
522
 
@@ -505,8 +551,8 @@
505
551
  font-size:13px;
506
552
 
507
553
  font-size:var(--rs-overline-font-size, 13px);
508
- font-weight:530;
509
- font-weight:var(--rs-font-weight-semi-bold, 530);
554
+ font-weight:600;
555
+ font-weight:var(--rs-font-weight-semi-bold, 600);
510
556
 
511
557
  line-height:18px;
512
558
 
@@ -892,6 +938,17 @@
892
938
  }
893
939
  }
894
940
 
941
+ [class*="rs-middle-hero"] &{
942
+ border-bottom-width:3px;
943
+ }
944
+
945
+ @media screen and (max-width: 640px){
946
+
947
+ [class*="rs-middle-hero"] &{
948
+ border-bottom-width:2px
949
+ }
950
+ }
951
+
895
952
  [class*="rs-hero"] &{
896
953
  border-bottom-width:3px;
897
954
  }
@@ -953,6 +1010,15 @@
953
1010
  border-bottom-width:3px
954
1011
  }
955
1012
  }
1013
+ [class*="rs-middle-hero"] &:hover{
1014
+ border-bottom-width:4px;
1015
+ }
1016
+
1017
+ @media screen and (max-width: 640px){
1018
+ [class*="rs-middle-hero"] &:hover{
1019
+ border-bottom-width:3px
1020
+ }
1021
+ }
956
1022
  [class*="rs-hero"] &:hover{
957
1023
  border-bottom-width:4px;
958
1024
  }
package/lib/mixins.pcss CHANGED
@@ -57,8 +57,8 @@
57
57
  font-size:142px;
58
58
 
59
59
  font-size:var(--rs-super-hero-font-size, 142px);
60
- font-weight:530;
61
- font-weight:var(--rs-font-weight-semi-bold, 530);
60
+ font-weight:600;
61
+ font-weight:var(--rs-font-weight-semi-bold, 600);
62
62
 
63
63
  line-height:142px;
64
64
 
@@ -91,6 +91,52 @@
91
91
  margin-top:96px;
92
92
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
93
93
  }
94
+ @define-mixin rs-middle-hero-base{
95
+ letter-spacing:-0.008em;
96
+
97
+ font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
98
+
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));
100
+ -webkit-font-feature-settings:"kern", "liga", "calt";
101
+ font-feature-settings:"kern", "liga", "calt";
102
+
103
+ font-size:92px;
104
+
105
+ font-size:var(--rs-middle-hero-font-size, 92px);
106
+ font-weight:600;
107
+ font-weight:var(--rs-font-weight-semi-bold, 600);
108
+
109
+ line-height:92px;
110
+
111
+ line-height:var(--rs-middle-hero-line-height, 92px);
112
+
113
+ @media screen and (max-width: 1000px){
114
+ --rs-middle-hero-font-size:var(--rs-hero-font-size, 72px);
115
+ --rs-middle-hero-line-height:var(--rs-hero-line-height, 72px);
116
+ letter-spacing:-0.005em;
117
+ }
118
+
119
+ @media screen and (max-width: 640px){
120
+ --rs-middle-hero-font-size:var(--rs-hero-font-size-mobile, 42px);
121
+ --rs-middle-hero-line-height:var(--rs-hero-line-height-mobile, 50px);
122
+ letter-spacing:-0.001em;
123
+ }
124
+
125
+ .rs-reset-letter-spacing &{
126
+ letter-spacing:normal;
127
+ }
128
+ }
129
+ @define-mixin rs-middle-hero{
130
+ @mixin rs-middle-hero-base;
131
+ @mixin rs-text-hardness-hard;
132
+ }
133
+ @define-mixin rs-middle-hero-theme-dark{
134
+ @mixin rs-text-hardness-hard-theme-dark;
135
+ }
136
+ @define-mixin rs-middle-hero-offset-top{
137
+ margin-top:96px;
138
+ margin-top:calc(var(--rs-flow-unit, 8px)*12);
139
+ }
94
140
  @define-mixin rs-digits-1-base{
95
141
  letter-spacing:-0.005em;
96
142
 
@@ -105,8 +151,8 @@
105
151
  font-size:69px;
106
152
 
107
153
  font-size:var(--rs-digits-1-font-size, 69px);
108
- font-weight:320;
109
- font-weight:var(--rs-font-weight-light, 320);
154
+ font-weight:300;
155
+ font-weight:var(--rs-font-weight-light, 300);
110
156
  line-height:71px;
111
157
  line-height:var(--rs-digits-1-line-height, 71px);
112
158
 
@@ -144,8 +190,8 @@
144
190
  font-size:40px;
145
191
 
146
192
  font-size:var(--rs-digits-2-font-size, 40px);
147
- font-weight:320;
148
- font-weight:var(--rs-font-weight-light, 320);
193
+ font-weight:300;
194
+ font-weight:var(--rs-font-weight-light, 300);
149
195
  line-height:44px;
150
196
  line-height:var(--rs-digits-2-line-height, 44px);
151
197
 
@@ -176,8 +222,8 @@
176
222
  font-size:72px;
177
223
 
178
224
  font-size:var(--rs-hero-font-size, 72px);
179
- font-weight:530;
180
- font-weight:var(--rs-font-weight-semi-bold, 530);
225
+ font-weight:600;
226
+ font-weight:var(--rs-font-weight-semi-bold, 600);
181
227
 
182
228
  line-height:72px;
183
229
 
@@ -216,8 +262,8 @@
216
262
  font-size:39px;
217
263
 
218
264
  font-size:var(--rs-subtitle-1-font-size, 39px);
219
- font-weight:320;
220
- font-weight:var(--rs-font-weight-light, 320);
265
+ font-weight:300;
266
+ font-weight:var(--rs-font-weight-light, 300);
221
267
  line-height:49px;
222
268
  line-height:var(--rs-subtitle-1-line-height, 49px);
223
269
 
@@ -249,8 +295,8 @@
249
295
  font-size:43px;
250
296
 
251
297
  font-size:var(--rs-h1-font-size, 43px);
252
- font-weight:530;
253
- font-weight:var(--rs-font-weight-semi-bold, 530);
298
+ font-weight:600;
299
+ font-weight:var(--rs-font-weight-semi-bold, 600);
254
300
 
255
301
  line-height:49px;
256
302
 
@@ -285,8 +331,8 @@
285
331
  font-size:29px;
286
332
 
287
333
  font-size:var(--rs-subtitle-2-font-size, 29px);
288
- font-weight:320;
289
- font-weight:var(--rs-font-weight-light, 320);
334
+ font-weight:300;
335
+ font-weight:var(--rs-font-weight-light, 300);
290
336
  line-height:39px;
291
337
  line-height:var(--rs-subtitle-2-line-height, 39px);
292
338
 
@@ -318,8 +364,8 @@
318
364
  font-size:35px;
319
365
 
320
366
  font-size:var(--rs-h2-font-size, 35px);
321
- font-weight:530;
322
- font-weight:var(--rs-font-weight-semi-bold, 530);
367
+ font-weight:600;
368
+ font-weight:var(--rs-font-weight-semi-bold, 600);
323
369
 
324
370
  line-height:42px;
325
371
 
@@ -353,8 +399,8 @@
353
399
  font-size:20px;
354
400
 
355
401
  font-size:var(--rs-h3-font-size, 20px);
356
- font-weight:530;
357
- font-weight:var(--rs-font-weight-semi-bold, 530);
402
+ font-weight:600;
403
+ font-weight:var(--rs-font-weight-semi-bold, 600);
358
404
  line-height:28px;
359
405
  line-height:var(--rs-h3-line-height, 28px);
360
406
  }
@@ -408,8 +454,8 @@
408
454
  font-size:16px;
409
455
 
410
456
  font-size:var(--rs-h4-font-size, 16px);
411
- font-weight:530;
412
- font-weight:var(--rs-font-weight-semi-bold, 530);
457
+ font-weight:600;
458
+ font-weight:var(--rs-font-weight-semi-bold, 600);
413
459
 
414
460
  line-height:24px;
415
461
 
@@ -469,8 +515,8 @@
469
515
  font-size:13px;
470
516
 
471
517
  font-size:var(--rs-h5-font-size, 13px);
472
- font-weight:530;
473
- font-weight:var(--rs-font-weight-semi-bold, 530);
518
+ font-weight:600;
519
+ font-weight:var(--rs-font-weight-semi-bold, 600);
474
520
 
475
521
  line-height:20px;
476
522
 
@@ -505,8 +551,8 @@
505
551
  font-size:13px;
506
552
 
507
553
  font-size:var(--rs-overline-font-size, 13px);
508
- font-weight:530;
509
- font-weight:var(--rs-font-weight-semi-bold, 530);
554
+ font-weight:600;
555
+ font-weight:var(--rs-font-weight-semi-bold, 600);
510
556
 
511
557
  line-height:18px;
512
558
 
@@ -892,6 +938,17 @@
892
938
  }
893
939
  }
894
940
 
941
+ [class*="rs-middle-hero"] &{
942
+ border-bottom-width:3px;
943
+ }
944
+
945
+ @media screen and (max-width: 640px){
946
+
947
+ [class*="rs-middle-hero"] &{
948
+ border-bottom-width:2px
949
+ }
950
+ }
951
+
895
952
  [class*="rs-hero"] &{
896
953
  border-bottom-width:3px;
897
954
  }
@@ -953,6 +1010,15 @@
953
1010
  border-bottom-width:3px
954
1011
  }
955
1012
  }
1013
+ [class*="rs-middle-hero"] &:hover{
1014
+ border-bottom-width:4px;
1015
+ }
1016
+
1017
+ @media screen and (max-width: 640px){
1018
+ [class*="rs-middle-hero"] &:hover{
1019
+ border-bottom-width:3px
1020
+ }
1021
+ }
956
1022
  [class*="rs-hero"] &:hover{
957
1023
  border-bottom-width:4px;
958
1024
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/typography",
3
- "version": "0.12.0",
3
+ "version": "0.14.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -19,7 +19,7 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@babel/runtime-corejs3": "^7.14.0",
22
- "@rescui/colors": "^0.1.9",
22
+ "@rescui/colors": "^0.1.10",
23
23
  "bem-cn-fast": "^1.0.2",
24
24
  "inter-ui": "^3.15.1"
25
25
  },
@@ -30,7 +30,7 @@
30
30
  "devDependencies": {
31
31
  "@rescui/postcss-preset-library": "^0.1.1",
32
32
  "@rescui/scripts": "^0.2.2",
33
- "@rescui/visual-regression": "^0.1.0",
33
+ "@rescui/visual-regression": "^0.1.1",
34
34
  "case": "^1.6.3",
35
35
  "fs-extra": "^7.0.1",
36
36
  "postcss": "^8.2.13",
@@ -40,5 +40,5 @@
40
40
  "build": "rescui-scripts build --no-css-modules && yarn run build-mixins && shx cp src/font-*.css lib",
41
41
  "build-mixins": "rescui-scripts postcss --glob mixins.p.css --config ./.postcssrc-mixins.js --no-clean-out && shx mv lib/mixins.css lib/mixins.p.css && shx cp lib/mixins.p.css lib/mixins.pcss && shx rm lib/mixins.css.map"
42
42
  },
43
- "gitHead": "5b8028f2a39036c58de3bfcba424df687b540f55"
43
+ "gitHead": "3be2e2a867635e8ebcb7fbbdfb8ad65a0700a61f"
44
44
  }