@rescui/typography 0.5.1 → 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 +10 -2
  3. package/lib/hooks.d.ts +2 -0
  4. package/lib/index.css +45 -27
  5. package/lib/mixins.pcss +102 -117
  6. package/package.json +2 -2
package/lib/create-text-cn.d.ts CHANGED
@@ -3,17 +3,34 @@ import { Theme } from '@rescui/ui-contexts';
3
3
  import './styles';
4
4
  export declare type Texts = 'rs-text-1' | 'rs-text-2' | 'rs-text-3';
5
5
  export declare type Link = 'rs-link';
6
+ export declare type OrderedList = 'rs-ol';
7
+ export declare type UnorderedList = 'rs-ul';
6
8
  export declare type Others = 'rs-super-hero' | 'rs-digits' | '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';
7
- export interface TextsParams {
9
+ export declare type Type = Texts | Link | OrderedList | Others | UnorderedList;
10
+ export declare type Hardness = 'average' | 'hard' | 'pale';
11
+ export declare type TextsParams = {
8
12
  paragraphOffsetAuto?: boolean;
9
- hardness?: 'average' | 'hard' | 'pale';
10
- }
11
- export interface LinkParams extends Omit<TextsParams, 'paragraphOffsetAuto'> {
13
+ hardness?: Hardness;
14
+ };
15
+ export declare type Mode = 'classic' | 'rock' | 'clear' | 'standalone';
16
+ export declare type LinkParams = {
12
17
  external?: boolean;
13
- mode?: 'classic' | 'rock' | 'clear' | 'standalone';
14
- }
18
+ hardness?: Hardness;
19
+ mode?: Mode;
20
+ };
21
+ export declare type Alpha = 'lower' | 'upper';
22
+ export declare type OffsetItems = 8 | 12 | 16 | 24;
23
+ export declare type OrderedListParams = {
24
+ alpha?: Alpha;
25
+ offsetItems?: OffsetItems;
26
+ };
27
+ export declare type UnorderedListParams = {
28
+ offsetItems?: OffsetItems;
29
+ };
15
30
  export declare function createTextCn(theme: Theme): {
16
31
  (type: Texts, params?: TextsParams): string;
17
32
  (type: Link, params?: LinkParams): string;
33
+ (type: OrderedList, params?: OrderedListParams): string;
34
+ (type: UnorderedList, params?: UnorderedListParams): string;
18
35
  (type: Others): string;
19
36
  };
package/lib/create-text-cn.js CHANGED
@@ -1,4 +1,6 @@
1
+ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
1
2
  import bemCnFast from 'bem-cn-fast';
3
+ var THEMED_TYPES = ['rs-super-hero', 'rs-digits', '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'];
2
4
 
3
5
  function createTextCn(theme) {
4
6
  if (!theme) {
@@ -16,14 +18,20 @@ function createTextCn(theme) {
16
18
  _ref$external = _ref.external,
17
19
  external = _ref$external === void 0 ? false : _ref$external,
18
20
  _ref$mode = _ref.mode,
19
- mode = _ref$mode === void 0 ? 'classic' : _ref$mode;
21
+ mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
22
+ _ref$alpha = _ref.alpha,
23
+ alpha = _ref$alpha === void 0 ? undefined : _ref$alpha,
24
+ _ref$offsetItems = _ref.offsetItems,
25
+ offsetItems = _ref$offsetItems === void 0 ? undefined : _ref$offsetItems;
20
26
 
21
27
  return bemCnFast(type)({
22
28
  'paragraph-offset-auto': paragraphOffsetAuto,
23
29
  hardness: hardness,
24
30
  external: external,
25
31
  mode: type === 'rs-link' && mode,
26
- theme: theme
32
+ theme: _includesInstanceProperty(THEMED_TYPES).call(THEMED_TYPES, type) && theme,
33
+ alpha: alpha,
34
+ 'offset-items': offsetItems
27
35
  });
28
36
  }
29
37
 
package/lib/hooks.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  export declare const useTextStyles: () => {
2
2
  (type: import("./create-text-cn").Texts, params?: import("./create-text-cn").TextsParams): string;
3
3
  (type: "rs-link", params?: import("./create-text-cn").LinkParams): string;
4
+ (type: "rs-ol", params?: import("./create-text-cn").OrderedListParams): string;
5
+ (type: "rs-ul", params?: import("./create-text-cn").UnorderedListParams): string;
4
6
  (type: import("./create-text-cn").Others): string;
5
7
  };
package/lib/index.css CHANGED
@@ -5,8 +5,6 @@
5
5
  }
6
6
  .rs-super-hero{
7
7
  letter-spacing:-0.02em;
8
- color:#19191C;
9
- color:var(--rs-typography-color-hard, #19191C);
10
8
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
11
9
  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));
12
10
  font-size:142px;
@@ -33,6 +31,10 @@
33
31
  .rs-reset-letter-spacing .rs-super-hero{
34
32
  letter-spacing:normal;
35
33
  }
34
+ .rs-super-hero {
35
+ color:#19191C;
36
+ color:var(--rs-typography-color-hard, #19191C);
37
+ }
36
38
  .rs-super-hero_theme_dark{
37
39
  color:#FFFFFF;
38
40
  color:var(--rs-typography-color-hard, #FFFFFF);
@@ -44,8 +46,6 @@
44
46
  .rs-digits{
45
47
  letter-spacing:-0.005em;
46
48
  font-variant-numeric:tabular-nums;
47
- color:#19191C;
48
- color:var(--rs-typography-color-hard, #19191C);
49
49
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
50
50
  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));
51
51
  font-size:69px;
@@ -65,6 +65,10 @@
65
65
  .rs-reset-letter-spacing .rs-digits{
66
66
  letter-spacing:normal;
67
67
  }
68
+ .rs-digits {
69
+ color:#19191C;
70
+ color:var(--rs-typography-color-hard, #19191C);
71
+ }
68
72
  .rs-digits_theme_dark{
69
73
  color:#FFFFFF;
70
74
  color:var(--rs-typography-color-hard, #FFFFFF);
@@ -75,8 +79,6 @@
75
79
  }
76
80
  .rs-hero{
77
81
  letter-spacing:-0.005em;
78
- color:#19191C;
79
- color:var(--rs-typography-color-hard, #19191C);
80
82
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
81
83
  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));
82
84
  font-size:72px;
@@ -96,6 +98,10 @@
96
98
  .rs-reset-letter-spacing .rs-hero{
97
99
  letter-spacing:normal;
98
100
  }
101
+ .rs-hero {
102
+ color:#19191C;
103
+ color:var(--rs-typography-color-hard, #19191C);
104
+ }
99
105
  .rs-hero_theme_dark{
100
106
  color:#FFFFFF;
101
107
  color:var(--rs-typography-color-hard, #FFFFFF);
@@ -105,8 +111,6 @@
105
111
  color:var(--rs-typography-color-hard, #FFFFFF);
106
112
  }
107
113
  .rs-subtitle-1{
108
- color:#19191C;
109
- color:var(--rs-typography-color-hard, #19191C);
110
114
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
111
115
  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));
112
116
  font-size:39px;
@@ -122,6 +126,10 @@
122
126
  --rs-subtitle-1-line-height:var(--rs-subtitle-2-line-height-mobile, 30px);
123
127
  }
124
128
  }
129
+ .rs-subtitle-1 {
130
+ color:#19191C;
131
+ color:var(--rs-typography-color-hard, #19191C);
132
+ }
125
133
  .rs-subtitle-1_theme_dark{
126
134
  color:#FFFFFF;
127
135
  color:var(--rs-typography-color-hard, #FFFFFF);
@@ -132,8 +140,6 @@
132
140
  }
133
141
  .rs-h1{
134
142
  letter-spacing:-0.001em;
135
- color:#19191C;
136
- color:var(--rs-typography-color-hard, #19191C);
137
143
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
138
144
  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));
139
145
  font-size:43px;
@@ -150,6 +156,10 @@
150
156
  letter-spacing:normal;
151
157
  }
152
158
  }
159
+ .rs-h1 {
160
+ color:#19191C;
161
+ color:var(--rs-typography-color-hard, #19191C);
162
+ }
153
163
  .rs-h1_theme_dark{
154
164
  color:#FFFFFF;
155
165
  color:var(--rs-typography-color-hard, #FFFFFF);
@@ -159,8 +169,6 @@
159
169
  color:var(--rs-typography-color-hard, #FFFFFF);
160
170
  }
161
171
  .rs-subtitle-2{
162
- color:#19191C;
163
- color:var(--rs-typography-color-hard, #19191C);
164
172
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
165
173
  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));
166
174
  font-size:29px;
@@ -176,6 +184,10 @@
176
184
  --rs-subtitle-2-line-height:var(--rs-subtitle-2-line-height-mobile, 30px);
177
185
  }
178
186
  }
187
+ .rs-subtitle-2 {
188
+ color:#19191C;
189
+ color:var(--rs-typography-color-hard, #19191C);
190
+ }
179
191
  .rs-subtitle-2_theme_dark{
180
192
  color:#FFFFFF;
181
193
  color:var(--rs-typography-color-hard, #FFFFFF);
@@ -185,8 +197,6 @@
185
197
  color:var(--rs-typography-color-hard, #FFFFFF);
186
198
  }
187
199
  .rs-h2{
188
- color:#19191C;
189
- color:var(--rs-typography-color-hard, #19191C);
190
200
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
191
201
  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));
192
202
  font-size:35px;
@@ -202,6 +212,10 @@
202
212
  --rs-h2-line-height:var(--rs-h2-line-height-mobile, 32px);
203
213
  }
204
214
  }
215
+ .rs-h2 {
216
+ color:#19191C;
217
+ color:var(--rs-typography-color-hard, #19191C);
218
+ }
205
219
  .rs-h2_theme_dark{
206
220
  color:#FFFFFF;
207
221
  color:var(--rs-typography-color-hard, #FFFFFF);
@@ -212,8 +226,6 @@
212
226
  }
213
227
  .rs-h3{
214
228
  letter-spacing:normal;
215
- color:#19191C;
216
- color:var(--rs-typography-color-hard, #19191C);
217
229
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
218
230
  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));
219
231
  font-size:20px;
@@ -222,6 +234,8 @@
222
234
  font-weight:var(--rs-font-weight-semi-bold, 530);
223
235
  line-height:28px;
224
236
  line-height:var(--rs-h3-line-height, 28px);
237
+ color:#19191C;
238
+ color:var(--rs-typography-color-hard, #19191C);
225
239
  }
226
240
  .rs-h3_theme_dark{
227
241
  color:#FFFFFF;
@@ -232,8 +246,6 @@
232
246
  color:var(--rs-typography-color-hard, #FFFFFF);
233
247
  }
234
248
  .rs-text-1{
235
- color:rgba(25,25,28,0.7);
236
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
237
249
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
238
250
  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));
239
251
  font-size:19px;
@@ -241,6 +253,8 @@
241
253
  font-weight:normal;
242
254
  line-height:28px;
243
255
  line-height:var(--rs-text-1-line-height, 28px);
256
+ color:rgba(25,25,28,0.7);
257
+ color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
244
258
  }
245
259
  .rs-text-1_paragraph-offset-auto > p:not(:first-of-type){
246
260
  margin-top:32px;
@@ -282,8 +296,6 @@
282
296
  color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
283
297
  }
284
298
  .rs-h4{
285
- color:#19191C;
286
- color:var(--rs-typography-color-hard, #19191C);
287
299
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
288
300
  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));
289
301
  font-size:17px;
@@ -292,6 +304,8 @@
292
304
  font-weight:var(--rs-font-weight-semi-bold, 530);
293
305
  line-height:24px;
294
306
  line-height:var(--rs-h4-line-height, 24px);
307
+ color:#19191C;
308
+ color:var(--rs-typography-color-hard, #19191C);
295
309
  }
296
310
  .rs-h4_theme_dark{
297
311
  color:#FFFFFF;
@@ -303,8 +317,6 @@
303
317
  }
304
318
  .rs-text-2{
305
319
  letter-spacing:0.0015em;
306
- color:rgba(25,25,28,0.7);
307
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
308
320
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
309
321
  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));
310
322
  font-size:16px;
@@ -316,6 +328,10 @@
316
328
  .rs-reset-letter-spacing .rs-text-2{
317
329
  letter-spacing:normal;
318
330
  }
331
+ .rs-text-2 {
332
+ color:rgba(25,25,28,0.7);
333
+ color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
334
+ }
319
335
  .rs-text-2_paragraph-offset-auto > p:not(:first-of-type){
320
336
  margin-top:16px;
321
337
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
@@ -356,8 +372,6 @@
356
372
  color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
357
373
  }
358
374
  .rs-h5{
359
- color:#19191C;
360
- color:var(--rs-typography-color-hard, #19191C);
361
375
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
362
376
  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));
363
377
  font-size:14px;
@@ -366,6 +380,8 @@
366
380
  font-weight:var(--rs-font-weight-semi-bold, 530);
367
381
  line-height:20px;
368
382
  line-height:var(--rs-h5-line-height, 20px);
383
+ color:#19191C;
384
+ color:var(--rs-typography-color-hard, #19191C);
369
385
  }
370
386
  .rs-h5_theme_dark{
371
387
  color:#FFFFFF;
@@ -399,8 +415,6 @@
399
415
  }
400
416
  .rs-text-3{
401
417
  letter-spacing:0.0045em;
402
- color:rgba(25,25,28,0.7);
403
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
404
418
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
405
419
  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));
406
420
  font-size:13px;
@@ -411,6 +425,10 @@
411
425
  .rs-reset-letter-spacing .rs-text-3{
412
426
  letter-spacing:normal;
413
427
  }
428
+ .rs-text-3 {
429
+ color:rgba(25,25,28,0.7);
430
+ color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
431
+ }
414
432
  .rs-text-3_paragraph-offset-auto > p:not(:first-of-type){
415
433
  margin-top:8px;
416
434
  margin-top:var(--rs-flow-unit, 8px);
@@ -643,7 +661,7 @@
643
661
  margin-top:8px
644
662
  }
645
663
  }
646
- .rs-ol{
664
+ .rs-ol {
647
665
  counter-reset:ol-counter;
648
666
  }
649
667
  .rs-ol.rs-text-2 > li, .rs-text-2 .rs-ol > li{
package/lib/mixins.pcss CHANGED
@@ -16,18 +16,38 @@
16
16
  --rs-typography-classic-link-underline-color:rgba(255,255,255,0.4);
17
17
  --rs-typography-rock-link-hover-color:#19191C;
18
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));
42
+ }
19
43
  @define-mixin rs-font-smoothing{
20
44
  text-rendering:optimizeLegibility;
21
45
  -webkit-font-smoothing:antialiased;
22
46
  -moz-osx-font-smoothing:grayscale;
23
47
  }
24
- @define-mixin rs-super-hero{
48
+ @define-mixin rs-super-hero-base{
25
49
  letter-spacing:-0.02em;
26
50
 
27
- color:#19191C;
28
-
29
- color:var(--rs-typography-color-hard, #19191C);
30
-
31
51
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
32
52
 
33
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));
@@ -58,23 +78,22 @@
58
78
  letter-spacing:normal;
59
79
  }
60
80
  }
81
+ @define-mixin rs-super-hero{
82
+ @mixin rs-super-hero-base;
83
+ @mixin rs-text-hardness-hard;
84
+ }
61
85
  @define-mixin rs-super-hero-theme-dark{
62
- color:#FFFFFF;
63
- color:var(--rs-typography-color-hard, #FFFFFF);
86
+ @mixin rs-text-hardness-hard-theme-dark;
64
87
  }
65
88
  @define-mixin rs-super-hero-offset-top{
66
89
  margin-top:96px;
67
90
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
68
91
  }
69
- @define-mixin rs-digits{
92
+ @define-mixin rs-digits-base{
70
93
  letter-spacing:-0.005em;
71
94
 
72
95
  font-variant-numeric:tabular-nums;
73
96
 
74
- color:#19191C;
75
-
76
- color:var(--rs-typography-color-hard, #19191C);
77
-
78
97
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
79
98
 
80
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));
@@ -97,21 +116,20 @@
97
116
  letter-spacing:normal;
98
117
  }
99
118
  }
119
+ @define-mixin rs-digits{
120
+ @mixin rs-digits-base;
121
+ @mixin rs-text-hardness-hard;
122
+ }
100
123
  @define-mixin rs-digits-theme-dark{
101
- color:#FFFFFF;
102
- color:var(--rs-typography-color-hard, #FFFFFF);
124
+ @mixin rs-text-hardness-hard-theme-dark;
103
125
  }
104
126
  @define-mixin rs-digits-offset-top{
105
127
  margin-top:32px;
106
128
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
107
129
  }
108
- @define-mixin rs-hero{
130
+ @define-mixin rs-hero-base{
109
131
  letter-spacing:-0.005em;
110
132
 
111
- color:#19191C;
112
-
113
- color:var(--rs-typography-color-hard, #19191C);
114
-
115
133
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
116
134
 
117
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));
@@ -136,22 +154,19 @@
136
154
  letter-spacing:normal;
137
155
  }
138
156
  }
157
+ @define-mixin rs-hero{
158
+ @mixin rs-hero-base;
159
+ @mixin rs-text-hardness-hard;
160
+ }
139
161
  @define-mixin rs-hero-theme-dark{
140
- color:#FFFFFF;
141
- color:var(--rs-typography-color-hard, #FFFFFF);
162
+ @mixin rs-text-hardness-hard-theme-dark;
142
163
  }
143
164
  @define-mixin rs-hero-offset-top{
144
165
  margin-top:96px;
145
166
  margin-top:calc(var(--rs-flow-unit, 8px)*12);
146
167
  }
147
- @define-mixin rs-subtitle-1{
148
-
149
- color:#19191C;
150
-
151
- color:var(--rs-typography-color-hard, #19191C);
152
-
168
+ @define-mixin rs-subtitle-1-base{
153
169
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
154
-
155
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));
156
171
 
157
172
  font-size:39px;
@@ -167,18 +182,19 @@
167
182
  --rs-subtitle-1-line-height:var(--rs-subtitle-2-line-height-mobile, 30px);
168
183
  }
169
184
  }
185
+ @define-mixin rs-subtitle-1{
186
+ @mixin rs-subtitle-1-base;
187
+ @mixin rs-text-hardness-hard;
188
+ }
170
189
  @define-mixin rs-subtitle-1-theme-dark{
171
- color:#FFFFFF;
172
- color:var(--rs-typography-color-hard, #FFFFFF);
190
+ @mixin rs-text-hardness-hard-theme-dark;
173
191
  }
174
192
  @define-mixin rs-subtitle-1-offset-top{
175
193
  margin-top:32px;
176
194
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
177
195
  }
178
- @define-mixin rs-h1{
196
+ @define-mixin rs-h1-base{
179
197
  letter-spacing:-0.001em;
180
- color:#19191C;
181
- color:var(--rs-typography-color-hard, #19191C);
182
198
 
183
199
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
184
200
 
@@ -200,20 +216,19 @@
200
216
  letter-spacing:normal;
201
217
  }
202
218
  }
219
+ @define-mixin rs-h1{
220
+ @mixin rs-h1-base;
221
+ @mixin rs-text-hardness-hard;
222
+ }
203
223
  @define-mixin rs-h1-theme-dark{
204
- color:#FFFFFF;
205
- color:var(--rs-typography-color-hard, #FFFFFF);
224
+ @mixin rs-text-hardness-hard-theme-dark;
206
225
  }
207
226
  @define-mixin rs-h1-offset-top{
208
227
  margin-top:64px;
209
228
  margin-top:calc(var(--rs-flow-unit, 8px)*8);
210
229
  }
211
- @define-mixin rs-subtitle-2{
212
- color:#19191C;
213
- color:var(--rs-typography-color-hard, #19191C);
214
-
230
+ @define-mixin rs-subtitle-2-base{
215
231
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
216
-
217
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));
218
233
 
219
234
  font-size:29px;
@@ -229,20 +244,19 @@
229
244
  --rs-subtitle-2-line-height:var(--rs-subtitle-2-line-height-mobile, 30px);
230
245
  }
231
246
  }
247
+ @define-mixin rs-subtitle-2{
248
+ @mixin rs-subtitle-2-base;
249
+ @mixin rs-text-hardness-hard;
250
+ }
232
251
  @define-mixin rs-subtitle-2-theme-dark{
233
- color:#FFFFFF;
234
- color:var(--rs-typography-color-hard, #FFFFFF);
252
+ @mixin rs-text-hardness-hard-theme-dark;
235
253
  }
236
254
  @define-mixin rs-subtitle-2-offset-top{
237
255
  margin-top:32px;
238
256
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
239
257
  }
240
- @define-mixin rs-h2{
241
- color:#19191C;
242
- color:var(--rs-typography-color-hard, #19191C);
243
-
258
+ @define-mixin rs-h2-base{
244
259
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
245
-
246
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));
247
261
 
248
262
  font-size:35px;
@@ -260,21 +274,20 @@
260
274
  --rs-h2-line-height:var(--rs-h2-line-height-mobile, 32px);
261
275
  }
262
276
  }
277
+ @define-mixin rs-h2{
278
+ @mixin rs-h2-base;
279
+ @mixin rs-text-hardness-hard;
280
+ }
263
281
  @define-mixin rs-h2-theme-dark{
264
- color:#FFFFFF;
265
- color:var(--rs-typography-color-hard, #FFFFFF);
282
+ @mixin rs-text-hardness-hard-theme-dark;
266
283
  }
267
284
  @define-mixin rs-h2-offset-top{
268
285
  margin-top:48px;
269
286
  margin-top:calc(var(--rs-flow-unit, 8px)*6);
270
287
  }
271
- @define-mixin rs-h3{
288
+ @define-mixin rs-h3-base{
272
289
  letter-spacing:normal;
273
290
 
274
- color:#19191C;
275
-
276
- color:var(--rs-typography-color-hard, #19191C);
277
-
278
291
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
279
292
 
280
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));
@@ -287,44 +300,19 @@
287
300
  line-height:28px;
288
301
  line-height:var(--rs-h3-line-height, 28px);
289
302
  }
303
+ @define-mixin rs-h3{
304
+ @mixin rs-h3-base;
305
+ @mixin rs-text-hardness-hard;
306
+ }
290
307
  @define-mixin rs-h3-theme-dark{
291
- color:#FFFFFF;
292
- color:var(--rs-typography-color-hard, #FFFFFF);
308
+ @mixin rs-text-hardness-hard-theme-dark;
293
309
  }
294
310
  @define-mixin rs-h3-offset-top{
295
311
  margin-top:32px;
296
312
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
297
313
  }
298
- @define-mixin rs-text-hardness-hard{
299
- color:#19191C;
300
- color:var(--rs-typography-color-hard, #19191C);
301
- }
302
- @define-mixin rs-text-hardness-average{
303
- color:rgba(25,25,28,0.7);
304
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
305
- }
306
- @define-mixin rs-text-hardness-pale{
307
- color:rgba(25,25,28,0.5);
308
- color:var(--rs-typography-color-pale, rgba(25,25,28,0.5));
309
- }
310
- @define-mixin rs-text-hardness-hard-theme-dark{
311
- color:#FFFFFF;
312
- color:var(--rs-typography-color-hard, #FFFFFF);
313
- }
314
- @define-mixin rs-text-hardness-average-theme-dark{
315
- color:rgba(255,255,255,0.7);
316
- color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
317
- }
318
- @define-mixin rs-text-hardness-pale-theme-dark{
319
- color:rgba(255,255,255,0.5);
320
- color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
321
- }
322
- @define-mixin rs-text-1{
323
- color:rgba(25,25,28,0.7);
324
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
325
-
314
+ @define-mixin rs-text-1-base{
326
315
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
327
-
328
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));
329
317
 
330
318
  font-size:19px;
@@ -334,20 +322,19 @@
334
322
  line-height:28px;
335
323
  line-height:var(--rs-text-1-line-height, 28px);
336
324
  }
325
+ @define-mixin rs-text-1{
326
+ @mixin rs-text-1-base;
327
+ @mixin rs-text-hardness-average;
328
+ }
337
329
  @define-mixin rs-text-1-theme-dark{
338
- color:rgba(255,255,255,0.7);
339
- color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
330
+ @mixin rs-text-hardness-average-theme-dark;
340
331
  }
341
332
  @define-mixin rs-text-1-offset-top{
342
333
  margin-top:32px;
343
334
  margin-top:calc(var(--rs-flow-unit, 8px)*4);
344
335
  }
345
- @define-mixin rs-h4{
346
- color:#19191C;
347
- color:var(--rs-typography-color-hard, #19191C);
348
-
336
+ @define-mixin rs-h4-base{
349
337
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
350
-
351
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));
352
339
 
353
340
  font-size:17px;
@@ -360,21 +347,20 @@
360
347
 
361
348
  line-height:var(--rs-h4-line-height, 24px);
362
349
  }
350
+ @define-mixin rs-h4{
351
+ @mixin rs-h4-base;
352
+ @mixin rs-text-hardness-hard;
353
+ }
363
354
  @define-mixin rs-h4-theme-dark{
364
- color:#FFFFFF;
365
- color:var(--rs-typography-color-hard, #FFFFFF);
355
+ @mixin rs-text-hardness-hard-theme-dark;
366
356
  }
367
357
  @define-mixin rs-h4-offset-top{
368
358
  margin-top:16px;
369
359
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
370
360
  }
371
- @define-mixin rs-text-2{
361
+ @define-mixin rs-text-2-base{
372
362
  letter-spacing:0.0015em;
373
363
 
374
- color:rgba(25,25,28,0.7);
375
-
376
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
377
-
378
364
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
379
365
 
380
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));
@@ -390,22 +376,19 @@
390
376
  letter-spacing:normal;
391
377
  }
392
378
  }
379
+ @define-mixin rs-text-2{
380
+ @mixin rs-text-2-base;
381
+ @mixin rs-text-hardness-average;
382
+ }
393
383
  @define-mixin rs-text-2-theme-dark{
394
- color:rgba(255,255,255,0.7);
395
- color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
384
+ @mixin rs-text-hardness-average-theme-dark;
396
385
  }
397
386
  @define-mixin rs-text-2-offset-top{
398
387
  margin-top:16px;
399
388
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
400
389
  }
401
- @define-mixin rs-h5{
402
-
403
- color:#19191C;
404
-
405
- color:var(--rs-typography-color-hard, #19191C);
406
-
390
+ @define-mixin rs-h5-base{
407
391
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
408
-
409
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));
410
393
 
411
394
  font-size:14px;
@@ -418,9 +401,12 @@
418
401
 
419
402
  line-height:var(--rs-h5-line-height, 20px);
420
403
  }
404
+ @define-mixin rs-h5{
405
+ @mixin rs-h5-base;
406
+ @mixin rs-text-hardness-hard;
407
+ }
421
408
  @define-mixin rs-h5-theme-dark{
422
- color:#FFFFFF;
423
- color:var(--rs-typography-color-hard, #FFFFFF);
409
+ @mixin rs-text-hardness-hard-theme-dark;
424
410
  }
425
411
  @define-mixin rs-h5-offset-top{
426
412
  margin-top:16px;
@@ -457,13 +443,9 @@
457
443
  margin-top:16px;
458
444
  margin-top:calc(var(--rs-flow-unit, 8px)*2);
459
445
  }
460
- @define-mixin rs-text-3{
446
+ @define-mixin rs-text-3-base{
461
447
  letter-spacing:0.0045em;
462
448
 
463
- color:rgba(25,25,28,0.7);
464
-
465
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
466
-
467
449
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
468
450
 
469
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));
@@ -478,9 +460,12 @@
478
460
  letter-spacing:normal;
479
461
  }
480
462
  }
463
+ @define-mixin rs-text-3{
464
+ @mixin rs-text-3-base;
465
+ @mixin rs-text-hardness-average;
466
+ }
481
467
  @define-mixin rs-text-3-theme-dark{
482
- color:rgba(255,255,255,0.7);
483
- color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
468
+ @mixin rs-text-hardness-average-theme-dark;
484
469
  }
485
470
  @define-mixin rs-text-3-offset-top{
486
471
  margin-top:8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/typography",
3
- "version": "0.5.1",
3
+ "version": "0.6.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -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.pcss --config ./.postcssrc-mixins.js --no-clean-out && shx mv lib/mixins.css lib/mixins.pcss && shx rm lib/mixins.css.map"
42
42
  },
43
- "gitHead": "24a3fbe87179468f1dc804374864b21042fa2dbe"
43
+ "gitHead": "91cb43cee6ffc54aae5360a73437d97c3f4ed36d"
44
44
  }