@rescui/typography 0.21.1-RUI-230-Update-icons-0bd4e5fc.9 → 0.22.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.
package/lib/index.css CHANGED
@@ -60,16 +60,16 @@
60
60
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
61
61
  );
62
62
  --_rs-typography-font-size:var(
63
- --rs-digits-1-font-size,
64
- 69px
63
+ --_rs-typography-digits-1-sm-font-size,
64
+ var(--rs-digits-1-font-size, 69px)
65
65
  );
66
66
  --_rs-typography-font-weight:var(
67
67
  --rs-font-weight-light,
68
68
  300
69
69
  );
70
70
  --_rs-typography-line-height:var(
71
- --rs-digits-1-line-height,
72
- 71px
71
+ --_rs-typography-digits-1-sm-line-height,
72
+ var(--rs-digits-1-line-height, 71px)
73
73
  );
74
74
  --_rs-typography-base-color:var(
75
75
  --_rs-typography-hardness-color,
@@ -84,14 +84,19 @@
84
84
  --_rs-typography-list-li-margin-top-from-text:initial;
85
85
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
86
86
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
87
- --_rs-typography-link-border-bottom-width-from-text:3px;
87
+ --_rs-typography-link-border-bottom-width-from-text:var(
88
+ --_rs-typography-digits-1-sm-link-border-bottom-width-from-text,
89
+ 3px
90
+ );
88
91
  }
89
92
  @media screen and (max-width: 640px){
90
93
  .rs-digits-1{
91
- --_rs-typography-font-size:var(--rs-digits-2-font-size, 40px);
92
- --_rs-typography-line-height:var(--rs-digits-2-line-height, 44px);
93
-
94
- --_rs-typography-link-border-bottom-width-from-text:2px;
94
+ --_rs-typography-digits-1-sm-font-size:var(--rs-digits-2-font-size, 40px);
95
+ --_rs-typography-digits-1-sm-line-height:var(
96
+ --rs-digits-2-line-height,
97
+ 44px
98
+ );
99
+ --_rs-typography-digits-1-sm-link-border-bottom-width-from-text:2px;
95
100
  }
96
101
  }
97
102
  .rs-digits-2{
@@ -132,7 +137,13 @@
132
137
  --_rs-typography-link-border-bottom-width-from-text:2px;
133
138
  }
134
139
  .rs-super-hero{
135
- --_rs-typography-letter-spacing:var(--rs-super-hero-letter-spacing, -0.02em);
140
+ --_rs-typography-letter-spacing:var(
141
+ --_rs-typography-super-hero-sm-letter-spacing,
142
+ var(
143
+ --_rs-typography-super-hero-md-letter-spacing,
144
+ var(--rs-super-hero-letter-spacing, -0.02em)
145
+ )
146
+ );
136
147
  --_rs-typography-text-transform:initial;
137
148
  --_rs-typography-font-variant-numeric:initial;
138
149
  --_rs-typography-font-family:var(
@@ -142,16 +153,22 @@
142
153
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
143
154
  );
144
155
  --_rs-typography-font-size:var(
145
- --rs-super-hero-font-size,
146
- 142px
156
+ --_rs-typography-super-hero-sm-font-size,
157
+ var(
158
+ --_rs-typography-super-hero-md-font-size,
159
+ var(--rs-super-hero-font-size, 142px)
160
+ )
147
161
  );
148
162
  --_rs-typography-font-weight:var(
149
163
  --rs-font-weight-semi-bold,
150
164
  600
151
165
  );
152
166
  --_rs-typography-line-height:var(
153
- --rs-super-hero-line-height,
154
- 142px
167
+ --_rs-typography-super-hero-sm-line-height,
168
+ var(
169
+ --_rs-typography-super-hero-md-line-height,
170
+ var(--rs-super-hero-line-height, 142px)
171
+ )
155
172
  );
156
173
  --_rs-typography-base-color:var(
157
174
  --_rs-typography-heading-hardness-color,
@@ -166,48 +183,49 @@
166
183
  --_rs-typography-list-li-margin-top-from-text:initial;
167
184
  --_rs-typography-link-standalone-border-offset-from-text-base:1.12em;
168
185
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1em;
169
- --_rs-typography-link-border-bottom-width-from-text:4px;
186
+ --_rs-typography-link-border-bottom-width-from-text:var(
187
+ --_rs-typography-super-hero-sm-link-border-bottom-width-from-text,
188
+ var(--_rs-typography-super-hero-md-link-border-bottom-width-from-text, 4px)
189
+ );
170
190
  }
171
191
  @media screen and (max-width: 1000px){
172
192
  .rs-super-hero{
173
- --_rs-typography-font-size:var(
174
- --rs-middle-hero-font-size,
175
- 92px
176
- );
177
- --_rs-typography-line-height:var(
178
- --rs-middle-hero-line-height,
179
- 92px
180
- );
181
- --_rs-typography-letter-spacing:var(
182
- --rs-middle-hero-letter-spacing,
183
- -0.008em
184
- );
185
-
186
- --_rs-typography-link-border-bottom-width-from-text:3px;
193
+ --_rs-typography-super-hero-md-font-size:var(
194
+ --rs-middle-hero-font-size,
195
+ 92px
196
+ );
197
+ --_rs-typography-super-hero-md-line-height:var(
198
+ --rs-middle-hero-line-height,
199
+ 92px
200
+ );
201
+ --_rs-typography-super-hero-md-letter-spacing:var(
202
+ --rs-middle-hero-letter-spacing,
203
+ -0.008em
204
+ );
205
+ --_rs-typography-super-hero-md-link-border-bottom-width-from-text:3px;
187
206
  }
188
207
  }
189
208
  @media screen and (max-width: 640px){
190
209
  .rs-super-hero{
191
- --_rs-typography-font-size:var(
192
- --rs-middle-hero-font-size-mobile,
193
- 58px
194
- );
195
- --_rs-typography-line-height:var(
196
- --rs-middle-hero-line-height-mobile,
197
- 62px
198
- );
199
- --_rs-typography-letter-spacing:var(
200
- --rs-middle-hero-letter-spacing-mobile,
201
- -0.0007em
202
- );
203
-
204
- --_rs-typography-link-border-bottom-width-from-text:2px;
210
+ --_rs-typography-super-hero-sm-font-size:var(
211
+ --rs-middle-hero-font-size-mobile,
212
+ 58px
213
+ );
214
+ --_rs-typography-super-hero-sm-line-height:var(
215
+ --rs-middle-hero-line-height-mobile,
216
+ 62px
217
+ );
218
+ --_rs-typography-super-hero-sm-letter-spacing:var(
219
+ --rs-middle-hero-letter-spacing-mobile,
220
+ -0.0007em
221
+ );
222
+ --_rs-typography-super-hero-sm-link-border-bottom-width-from-text:2px;
205
223
  }
206
224
  }
207
225
  .rs-middle-hero{
208
226
  --_rs-typography-letter-spacing:var(
209
- --rs-middle-hero-letter-spacing,
210
- -0.008em
227
+ --_rs-typography-middle-hero-sm-letter-spacing,
228
+ var(--rs-middle-hero-letter-spacing, -0.008em)
211
229
  );
212
230
  --_rs-typography-text-transform:initial;
213
231
  --_rs-typography-font-variant-numeric:initial;
@@ -218,16 +236,16 @@
218
236
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
219
237
  );
220
238
  --_rs-typography-font-size:var(
221
- --rs-middle-hero-font-size,
222
- 92px
239
+ --_rs-typography-middle-hero-sm-font-size,
240
+ var(--rs-middle-hero-font-size, 92px)
223
241
  );
224
242
  --_rs-typography-font-weight:var(
225
243
  --rs-font-weight-semi-bold,
226
244
  600
227
245
  );
228
246
  --_rs-typography-line-height:var(
229
- --rs-middle-hero-line-height,
230
- 92px
247
+ --_rs-typography-middle-hero-sm-line-height,
248
+ var(--rs-middle-hero-line-height, 92px)
231
249
  );
232
250
  --_rs-typography-base-color:var(
233
251
  --_rs-typography-heading-hardness-color,
@@ -242,28 +260,33 @@
242
260
  --_rs-typography-list-li-margin-top-from-text:initial;
243
261
  --_rs-typography-link-standalone-border-offset-from-text-base:1.12em;
244
262
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1em;
245
- --_rs-typography-link-border-bottom-width-from-text:3px;
263
+ --_rs-typography-link-border-bottom-width-from-text:var(
264
+ --_rs-typography-middle-hero-sm-link-border-bottom-width-from-text,
265
+ 3px
266
+ );
246
267
  }
247
268
  @media screen and (max-width: 640px){
248
269
  .rs-middle-hero{
249
- --_rs-typography-font-size:var(
250
- --rs-middle-hero-font-size-mobile,
251
- 58px
252
- );
253
- --_rs-typography-line-height:var(
254
- --rs-middle-hero-line-height-mobile,
255
- 62px
256
- );
257
- --_rs-typography-letter-spacing:var(
258
- --rs-middle-hero-letter-spacing-mobile,
259
- -0.0007em
260
- );
261
-
262
- --_rs-typography-link-border-bottom-width-from-text:2px;
270
+ --_rs-typography-middle-hero-sm-font-size:var(
271
+ --rs-middle-hero-font-size-mobile,
272
+ 58px
273
+ );
274
+ --_rs-typography-middle-hero-sm-line-height:var(
275
+ --rs-middle-hero-line-height-mobile,
276
+ 62px
277
+ );
278
+ --_rs-typography-middle-hero-sm-letter-spacing:var(
279
+ --rs-middle-hero-letter-spacing-mobile,
280
+ -0.0007em
281
+ );
282
+ --_rs-typography-middle-hero-sm-link-border-bottom-width-from-text:2px;
263
283
  }
264
284
  }
265
285
  .rs-hero{
266
- --_rs-typography-letter-spacing:var(--rs-hero-letter-spacing, -0.005em);
286
+ --_rs-typography-letter-spacing:var(
287
+ --_rs-typography-hero-sm-letter-spacing,
288
+ var(--rs-hero-letter-spacing, -0.005em)
289
+ );
267
290
  --_rs-typography-text-transform:initial;
268
291
  --_rs-typography-font-variant-numeric:initial;
269
292
  --_rs-typography-font-family:var(
@@ -272,14 +295,17 @@
272
295
  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
273
296
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
274
297
  );
275
- --_rs-typography-font-size:var(--rs-hero-font-size, 72px);
298
+ --_rs-typography-font-size:var(
299
+ --_rs-typography-hero-sm-font-size,
300
+ var(--rs-hero-font-size, 72px)
301
+ );
276
302
  --_rs-typography-font-weight:var(
277
303
  --rs-font-weight-semi-bold,
278
304
  600
279
305
  );
280
306
  --_rs-typography-line-height:var(
281
- --rs-hero-line-height,
282
- 72px
307
+ --_rs-typography-hero-sm-line-height,
308
+ var(--rs-hero-line-height, 72px)
283
309
  );
284
310
  --_rs-typography-base-color:var(
285
311
  --_rs-typography-heading-hardness-color,
@@ -294,28 +320,33 @@
294
320
  --_rs-typography-list-li-margin-top-from-text:initial;
295
321
  --_rs-typography-link-standalone-border-offset-from-text-base:1.12em;
296
322
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1em;
297
- --_rs-typography-link-border-bottom-width-from-text:3px;
323
+ --_rs-typography-link-border-bottom-width-from-text:var(
324
+ --_rs-typography-hero-sm-link-border-bottom-width-from-text,
325
+ 3px
326
+ );
298
327
  }
299
328
  @media screen and (max-width: 640px){
300
329
  .rs-hero{
301
- --_rs-typography-font-size:var(
302
- --rs-hero-font-size-mobile,
303
- 42px
304
- );
305
- --_rs-typography-line-height:var(
306
- --rs-hero-line-height-mobile,
307
- 50px
308
- );
309
- --_rs-typography-letter-spacing:var(
310
- --rs-hero-letter-spacing-mobile,
311
- -0.001em
312
- );
313
-
314
- --_rs-typography-link-border-bottom-width-from-text:2px;
330
+ --_rs-typography-hero-sm-font-size:var(
331
+ --rs-hero-font-size-mobile,
332
+ 42px
333
+ );
334
+ --_rs-typography-hero-sm-line-height:var(
335
+ --rs-hero-line-height-mobile,
336
+ 50px
337
+ );
338
+ --_rs-typography-hero-sm-letter-spacing:var(
339
+ --rs-hero-letter-spacing-mobile,
340
+ -0.001em
341
+ );
342
+ --_rs-typography-hero-sm-link-border-bottom-width-from-text:2px;
315
343
  }
316
344
  }
317
345
  .rs-h1{
318
- --_rs-typography-letter-spacing:var(--rs-h1-letter-spacing, -0.001em);
346
+ --_rs-typography-letter-spacing:var(
347
+ --_rs-typography-h1-sm-letter-spacing,
348
+ var(--rs-h1-letter-spacing, -0.001em)
349
+ );
319
350
  --_rs-typography-text-transform:initial;
320
351
  --_rs-typography-font-variant-numeric:initial;
321
352
  --_rs-typography-font-family:var(
@@ -324,12 +355,18 @@
324
355
  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
325
356
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
326
357
  );
327
- --_rs-typography-font-size:var(--rs-h1-font-size, 43px);
358
+ --_rs-typography-font-size:var(
359
+ --_rs-typography-h1-sm-font-size,
360
+ var(--rs-h1-font-size, 43px)
361
+ );
328
362
  --_rs-typography-font-weight:var(
329
363
  --rs-font-weight-semi-bold,
330
364
  600
331
365
  );
332
- --_rs-typography-line-height:var(--rs-h1-line-height, 49px);
366
+ --_rs-typography-line-height:var(
367
+ --_rs-typography-h1-sm-line-height,
368
+ var(--rs-h1-line-height, 49px)
369
+ );
333
370
  --_rs-typography-base-color:var(
334
371
  --_rs-typography-heading-hardness-color,
335
372
  var(
@@ -347,15 +384,18 @@
347
384
  }
348
385
  @media screen and (max-width: 640px){
349
386
  .rs-h1{
350
- --_rs-typography-font-size:var(
351
- --rs-h1-font-size-mobile,
352
- 35px
353
- );
354
- --_rs-typography-line-height:var(
355
- --rs-h1-line-height-mobile,
356
- 39px
357
- );
358
- --_rs-typography-letter-spacing:var(--rs-h1-letter-spacing-mobile, normal);
387
+ --_rs-typography-h1-sm-font-size:var(
388
+ --rs-h1-font-size-mobile,
389
+ 35px
390
+ );
391
+ --_rs-typography-h1-sm-line-height:var(
392
+ --rs-h1-line-height-mobile,
393
+ 39px
394
+ );
395
+ --_rs-typography-h1-sm-letter-spacing:var(
396
+ --rs-h1-letter-spacing-mobile,
397
+ normal
398
+ );
359
399
  }
360
400
  }
361
401
  .rs-h2{
@@ -368,12 +408,18 @@
368
408
  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
369
409
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
370
410
  );
371
- --_rs-typography-font-size:var(--rs-h2-font-size, 35px);
411
+ --_rs-typography-font-size:var(
412
+ --_rs-typography-h2-sm-font-size,
413
+ var(--rs-h2-font-size, 35px)
414
+ );
372
415
  --_rs-typography-font-weight:var(
373
416
  --rs-font-weight-semi-bold,
374
417
  600
375
418
  );
376
- --_rs-typography-line-height:var(--rs-h2-line-height, 42px);
419
+ --_rs-typography-line-height:var(
420
+ --_rs-typography-h2-sm-line-height,
421
+ var(--rs-h2-line-height, 42px)
422
+ );
377
423
  --_rs-typography-base-color:var(
378
424
  --_rs-typography-heading-hardness-color,
379
425
  var(
@@ -391,14 +437,14 @@
391
437
  }
392
438
  @media screen and (max-width: 640px){
393
439
  .rs-h2{
394
- --_rs-typography-font-size:var(
395
- --rs-h2-font-size-mobile,
396
- 28px
397
- );
398
- --_rs-typography-line-height:var(
399
- --rs-h2-line-height-mobile,
400
- 32px
401
- );
440
+ --_rs-typography-h2-sm-font-size:var(
441
+ --rs-h2-font-size-mobile,
442
+ 28px
443
+ );
444
+ --_rs-typography-h2-sm-line-height:var(
445
+ --rs-h2-line-height-mobile,
446
+ 32px
447
+ );
402
448
  }
403
449
  }
404
450
  .rs-h3{
@@ -505,16 +551,16 @@
505
551
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
506
552
  );
507
553
  --_rs-typography-font-size:var(
508
- --rs-subtitle-1-font-size,
509
- 39px
554
+ --_rs-typography-subtitle-1-sm-font-size,
555
+ var(--rs-subtitle-1-font-size, 39px)
510
556
  );
511
557
  --_rs-typography-font-weight:var(
512
558
  --rs-font-weight-light,
513
559
  300
514
560
  );
515
561
  --_rs-typography-line-height:var(
516
- --rs-subtitle-1-line-height,
517
- 49px
562
+ --_rs-typography-subtitle-1-sm-line-height,
563
+ var(--rs-subtitle-1-line-height, 49px)
518
564
  );
519
565
  --_rs-typography-base-color:var(
520
566
  --_rs-typography-hardness-color,
@@ -533,14 +579,14 @@
533
579
  }
534
580
  @media screen and (max-width: 640px){
535
581
  .rs-subtitle-1{
536
- --_rs-typography-font-size:var(
537
- --rs-subtitle-2-font-size-mobile,
538
- 23px
539
- );
540
- --_rs-typography-line-height:var(
541
- --rs-subtitle-2-line-height-mobile,
542
- 30px
543
- );
582
+ --_rs-typography-subtitle-1-sm-font-size:var(
583
+ --rs-subtitle-2-font-size-mobile,
584
+ 23px
585
+ );
586
+ --_rs-typography-subtitle-1-sm-line-height:var(
587
+ --rs-subtitle-2-line-height-mobile,
588
+ 30px
589
+ );
544
590
  }
545
591
  }
546
592
  .rs-subtitle-2{
@@ -554,16 +600,16 @@
554
600
  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
555
601
  );
556
602
  --_rs-typography-font-size:var(
557
- --rs-subtitle-2-font-size,
558
- 29px
603
+ --_rs-typography-subtitle-2-sm-font-size,
604
+ var(--rs-subtitle-2-font-size, 29px)
559
605
  );
560
606
  --_rs-typography-font-weight:var(
561
607
  --rs-font-weight-light,
562
608
  300
563
609
  );
564
610
  --_rs-typography-line-height:var(
565
- --rs-subtitle-2-line-height,
566
- 39px
611
+ --_rs-typography-subtitle-2-sm-line-height,
612
+ var(--rs-subtitle-2-line-height, 39px)
567
613
  );
568
614
  --_rs-typography-base-color:var(
569
615
  --_rs-typography-hardness-color,
@@ -582,14 +628,14 @@
582
628
  }
583
629
  @media screen and (max-width: 640px){
584
630
  .rs-subtitle-2{
585
- --_rs-typography-font-size:var(
586
- --rs-subtitle-2-font-size-mobile,
587
- 23px
588
- );
589
- --_rs-typography-line-height:var(
590
- --rs-subtitle-2-line-height-mobile,
591
- 30px
592
- );
631
+ --_rs-typography-subtitle-2-sm-font-size:var(
632
+ --rs-subtitle-2-font-size-mobile,
633
+ 23px
634
+ );
635
+ --_rs-typography-subtitle-2-sm-line-height:var(
636
+ --rs-subtitle-2-line-height-mobile,
637
+ 30px
638
+ );
593
639
  }
594
640
  }
595
641
  .rs-overline{
@@ -658,14 +704,17 @@
658
704
  --_rs-typography-text-auto-offset:32px;
659
705
  --_rs-typography-ul-list-li-padding-left:26px;
660
706
  --_rs-typography-ol-list-li-padding-left:32px;
661
- --_rs-typography-list-li-margin-top-from-text:24px;
707
+ --_rs-typography-list-li-margin-top-from-text:var(
708
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
709
+ 24px
710
+ );
662
711
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
663
712
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
664
713
  --_rs-typography-link-border-bottom-width-from-text:1px;
665
714
  }
666
715
  @media screen and (max-width: 640px){
667
716
  .rs-text-1{
668
- --_rs-typography-list-li-margin-top-from-text:16px;
717
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
669
718
  }
670
719
  }
671
720
  .rs-text-2{
@@ -697,14 +746,17 @@
697
746
  --_rs-typography-text-auto-offset:16px;
698
747
  --_rs-typography-ul-list-li-padding-left:22px;
699
748
  --_rs-typography-ol-list-li-padding-left:26px;
700
- --_rs-typography-list-li-margin-top-from-text:16px;
749
+ --_rs-typography-list-li-margin-top-from-text:var(
750
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
751
+ 16px
752
+ );
701
753
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
702
754
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
703
755
  --_rs-typography-link-border-bottom-width-from-text:1px;
704
756
  }
705
757
  @media screen and (max-width: 640px){
706
758
  .rs-text-2{
707
- --_rs-typography-list-li-margin-top-from-text:12px;
759
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
708
760
  }
709
761
  }
710
762
  .rs-text-3{
@@ -910,19 +962,25 @@
910
962
  --_rs-typography-list-li-margin-top:12px;
911
963
  }
912
964
  .rs-ul_offset-items_16, .rs-ol_offset-items_16{
913
- --_rs-typography-list-li-margin-top:16px;
965
+ --_rs-typography-list-li-margin-top:var(
966
+ --_rs-typography-offset-items-16-sm-list-li-margin-top,
967
+ 16px
968
+ );
914
969
  }
915
970
  @media screen and (max-width: 640px){
916
971
  .rs-ul_offset-items_16, .rs-ol_offset-items_16{
917
- --_rs-typography-list-li-margin-top:12px;
972
+ --_rs-typography-offset-items-16-sm-list-li-margin-top:12px;
918
973
  }
919
974
  }
920
975
  .rs-ul_offset-items_24, .rs-ol_offset-items_24{
921
- --_rs-typography-list-li-margin-top:24px;
976
+ --_rs-typography-list-li-margin-top:var(
977
+ --_rs-typography-offset-items-24-sm-list-li-margin-top,
978
+ 24px
979
+ );
922
980
  }
923
981
  @media screen and (max-width: 640px){
924
982
  .rs-ul_offset-items_24, .rs-ol_offset-items_24{
925
- --_rs-typography-list-li-margin-top:16px;
983
+ --_rs-typography-offset-items-24-sm-list-li-margin-top:16px;
926
984
  }
927
985
  }
928
986
  .rs-ol_alpha_lower{