@penskemediacorp/larva-tokens 0.3.10-develop.7 → 0.4.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/build/robbreport.custom-properties.css +3 -2
- package/build/robbreport.json +2 -1
- package/build/robbreport.map.scss +3 -2
- package/build/robbreport.raw.json +10 -3
- package/build/rollingstone.custom-properties.css +45 -25
- package/build/rollingstone.json +44 -24
- package/build/rollingstone.map.scss +45 -25
- package/build/rollingstone.raw.json +239 -59
- package/build/variety-vip.custom-properties.css +140 -31
- package/build/variety-vip.json +141 -32
- package/build/variety-vip.map.scss +140 -31
- package/build/variety-vip.raw.json +1090 -215
- package/build/variety.custom-properties.css +140 -31
- package/build/variety.json +141 -32
- package/build/variety.map.scss +140 -31
- package/build/variety.raw.json +1090 -215
- package/package.json +2 -2
- package/style-guides/robbreport.html +20 -3
- package/style-guides/rollingstone.html +427 -50
- package/style-guides/variety-vip.html +1437 -167
- package/style-guides/variety.html +1437 -167
|
@@ -319,16 +319,1054 @@
|
|
|
319
319
|
<td></td>
|
|
320
320
|
</tr>
|
|
321
321
|
|
|
322
|
+
<tr>
|
|
323
|
+
<th scope="row">
|
|
324
|
+
<code>primary-xs-font-weight-mobile</code>
|
|
325
|
+
</th>
|
|
326
|
+
<td>
|
|
327
|
+
<code>700</code>
|
|
328
|
+
</td>
|
|
329
|
+
|
|
330
|
+
<td>
|
|
331
|
+
<div style="font-weight: 700;">
|
|
332
|
+
The quick brown fox jumps over the lazy dog.
|
|
333
|
+
</div>
|
|
334
|
+
</td>
|
|
335
|
+
|
|
336
|
+
<td></td>
|
|
337
|
+
</tr>
|
|
338
|
+
|
|
339
|
+
<tr>
|
|
340
|
+
<th scope="row">
|
|
341
|
+
<code>primary-xxxs-font-weight-mobile</code>
|
|
342
|
+
</th>
|
|
343
|
+
<td>
|
|
344
|
+
<code>700</code>
|
|
345
|
+
</td>
|
|
346
|
+
|
|
347
|
+
<td>
|
|
348
|
+
<div style="font-weight: 700;">
|
|
349
|
+
The quick brown fox jumps over the lazy dog.
|
|
350
|
+
</div>
|
|
351
|
+
</td>
|
|
352
|
+
|
|
353
|
+
<td></td>
|
|
354
|
+
</tr>
|
|
355
|
+
|
|
356
|
+
<tr>
|
|
357
|
+
<th scope="row">
|
|
358
|
+
<code>accent-m-font-weight-mobile</code>
|
|
359
|
+
</th>
|
|
360
|
+
<td>
|
|
361
|
+
<code>300</code>
|
|
362
|
+
</td>
|
|
363
|
+
|
|
364
|
+
<td>
|
|
365
|
+
<div style="font-weight: 300;">
|
|
366
|
+
The quick brown fox jumps over the lazy dog.
|
|
367
|
+
</div>
|
|
368
|
+
</td>
|
|
369
|
+
|
|
370
|
+
<td></td>
|
|
371
|
+
</tr>
|
|
372
|
+
|
|
373
|
+
<tr>
|
|
374
|
+
<th scope="row">
|
|
375
|
+
<code>accent-regular-xxs-font-weight-desktop</code>
|
|
376
|
+
</th>
|
|
377
|
+
<td>
|
|
378
|
+
<code>initial</code>
|
|
379
|
+
</td>
|
|
380
|
+
|
|
381
|
+
<td>
|
|
382
|
+
<div style="font-weight: initial;">
|
|
383
|
+
The quick brown fox jumps over the lazy dog.
|
|
384
|
+
</div>
|
|
385
|
+
</td>
|
|
386
|
+
|
|
387
|
+
<td></td>
|
|
388
|
+
</tr>
|
|
389
|
+
|
|
390
|
+
<tr>
|
|
391
|
+
<th scope="row">
|
|
392
|
+
<code>accent-l-font-weight-mobile</code>
|
|
393
|
+
</th>
|
|
394
|
+
<td>
|
|
395
|
+
<code>300</code>
|
|
396
|
+
</td>
|
|
397
|
+
|
|
398
|
+
<td>
|
|
399
|
+
<div style="font-weight: 300;">
|
|
400
|
+
The quick brown fox jumps over the lazy dog.
|
|
401
|
+
</div>
|
|
402
|
+
</td>
|
|
403
|
+
|
|
404
|
+
<td></td>
|
|
405
|
+
</tr>
|
|
406
|
+
|
|
407
|
+
<tr>
|
|
408
|
+
<th scope="row">
|
|
409
|
+
<code>primary-xxs-font-weight-mobile</code>
|
|
410
|
+
</th>
|
|
411
|
+
<td>
|
|
412
|
+
<code>700</code>
|
|
413
|
+
</td>
|
|
414
|
+
|
|
415
|
+
<td>
|
|
416
|
+
<div style="font-weight: 700;">
|
|
417
|
+
The quick brown fox jumps over the lazy dog.
|
|
418
|
+
</div>
|
|
419
|
+
</td>
|
|
420
|
+
|
|
421
|
+
<td></td>
|
|
422
|
+
</tr>
|
|
423
|
+
|
|
322
424
|
<tr>
|
|
323
425
|
<th scope="row">
|
|
324
426
|
<code>primary-s-font-weight-mobile</code>
|
|
325
427
|
</th>
|
|
326
428
|
<td>
|
|
327
|
-
<code>normal</code>
|
|
429
|
+
<code>normal</code>
|
|
430
|
+
</td>
|
|
431
|
+
|
|
432
|
+
<td>
|
|
433
|
+
<div style="font-weight: normal;">
|
|
434
|
+
The quick brown fox jumps over the lazy dog.
|
|
435
|
+
</div>
|
|
436
|
+
</td>
|
|
437
|
+
|
|
438
|
+
<td></td>
|
|
439
|
+
</tr>
|
|
440
|
+
|
|
441
|
+
<tr>
|
|
442
|
+
<th scope="row">
|
|
443
|
+
<code>body-s-font-weight-mobile</code>
|
|
444
|
+
</th>
|
|
445
|
+
<td>
|
|
446
|
+
<code>initial</code>
|
|
447
|
+
</td>
|
|
448
|
+
|
|
449
|
+
<td>
|
|
450
|
+
<div style="font-weight: initial;">
|
|
451
|
+
The quick brown fox jumps over the lazy dog.
|
|
452
|
+
</div>
|
|
453
|
+
</td>
|
|
454
|
+
|
|
455
|
+
<td></td>
|
|
456
|
+
</tr>
|
|
457
|
+
|
|
458
|
+
<tr>
|
|
459
|
+
<th scope="row">
|
|
460
|
+
<code>accent-xxs-font-weight-desktop</code>
|
|
461
|
+
</th>
|
|
462
|
+
<td>
|
|
463
|
+
<code>initial</code>
|
|
464
|
+
</td>
|
|
465
|
+
|
|
466
|
+
<td>
|
|
467
|
+
<div style="font-weight: initial;">
|
|
468
|
+
The quick brown fox jumps over the lazy dog.
|
|
469
|
+
</div>
|
|
470
|
+
</td>
|
|
471
|
+
|
|
472
|
+
<td></td>
|
|
473
|
+
</tr>
|
|
474
|
+
|
|
475
|
+
<tr>
|
|
476
|
+
<th scope="row">
|
|
477
|
+
<code>accent-s-font-weight-desktop</code>
|
|
478
|
+
</th>
|
|
479
|
+
<td>
|
|
480
|
+
<code>initial</code>
|
|
481
|
+
</td>
|
|
482
|
+
|
|
483
|
+
<td>
|
|
484
|
+
<div style="font-weight: initial;">
|
|
485
|
+
The quick brown fox jumps over the lazy dog.
|
|
486
|
+
</div>
|
|
487
|
+
</td>
|
|
488
|
+
|
|
489
|
+
<td></td>
|
|
490
|
+
</tr>
|
|
491
|
+
|
|
492
|
+
<tr>
|
|
493
|
+
<th scope="row">
|
|
494
|
+
<code>secondary-regular-m-font-weight-desktop</code>
|
|
495
|
+
</th>
|
|
496
|
+
<td>
|
|
497
|
+
<code>initial</code>
|
|
498
|
+
</td>
|
|
499
|
+
|
|
500
|
+
<td>
|
|
501
|
+
<div style="font-weight: initial;">
|
|
502
|
+
The quick brown fox jumps over the lazy dog.
|
|
503
|
+
</div>
|
|
504
|
+
</td>
|
|
505
|
+
|
|
506
|
+
<td></td>
|
|
507
|
+
</tr>
|
|
508
|
+
|
|
509
|
+
<tr>
|
|
510
|
+
<th scope="row">
|
|
511
|
+
<code>primary-xl-font-weight-mobile</code>
|
|
512
|
+
</th>
|
|
513
|
+
<td>
|
|
514
|
+
<code>normal</code>
|
|
515
|
+
</td>
|
|
516
|
+
|
|
517
|
+
<td>
|
|
518
|
+
<div style="font-weight: normal;">
|
|
519
|
+
The quick brown fox jumps over the lazy dog.
|
|
520
|
+
</div>
|
|
521
|
+
</td>
|
|
522
|
+
|
|
523
|
+
<td></td>
|
|
524
|
+
</tr>
|
|
525
|
+
|
|
526
|
+
<tr>
|
|
527
|
+
<th scope="row">
|
|
528
|
+
<code>secondary-l-font-weight-desktop</code>
|
|
529
|
+
</th>
|
|
530
|
+
<td>
|
|
531
|
+
<code>initial</code>
|
|
532
|
+
</td>
|
|
533
|
+
|
|
534
|
+
<td>
|
|
535
|
+
<div style="font-weight: initial;">
|
|
536
|
+
The quick brown fox jumps over the lazy dog.
|
|
537
|
+
</div>
|
|
538
|
+
</td>
|
|
539
|
+
|
|
540
|
+
<td></td>
|
|
541
|
+
</tr>
|
|
542
|
+
|
|
543
|
+
<tr>
|
|
544
|
+
<th scope="row">
|
|
545
|
+
<code>body-m-font-weight-mobile</code>
|
|
546
|
+
</th>
|
|
547
|
+
<td>
|
|
548
|
+
<code>initial</code>
|
|
549
|
+
</td>
|
|
550
|
+
|
|
551
|
+
<td>
|
|
552
|
+
<div style="font-weight: initial;">
|
|
553
|
+
The quick brown fox jumps over the lazy dog.
|
|
554
|
+
</div>
|
|
555
|
+
</td>
|
|
556
|
+
|
|
557
|
+
<td></td>
|
|
558
|
+
</tr>
|
|
559
|
+
|
|
560
|
+
<tr>
|
|
561
|
+
<th scope="row">
|
|
562
|
+
<code>accent-xs-font-weight-mobile</code>
|
|
563
|
+
</th>
|
|
564
|
+
<td>
|
|
565
|
+
<code>300</code>
|
|
566
|
+
</td>
|
|
567
|
+
|
|
568
|
+
<td>
|
|
569
|
+
<div style="font-weight: 300;">
|
|
570
|
+
The quick brown fox jumps over the lazy dog.
|
|
571
|
+
</div>
|
|
572
|
+
</td>
|
|
573
|
+
|
|
574
|
+
<td></td>
|
|
575
|
+
</tr>
|
|
576
|
+
|
|
577
|
+
<tr>
|
|
578
|
+
<th scope="row">
|
|
579
|
+
<code>secondary-m-font-weight-desktop</code>
|
|
580
|
+
</th>
|
|
581
|
+
<td>
|
|
582
|
+
<code>initial</code>
|
|
583
|
+
</td>
|
|
584
|
+
|
|
585
|
+
<td>
|
|
586
|
+
<div style="font-weight: initial;">
|
|
587
|
+
The quick brown fox jumps over the lazy dog.
|
|
588
|
+
</div>
|
|
589
|
+
</td>
|
|
590
|
+
|
|
591
|
+
<td></td>
|
|
592
|
+
</tr>
|
|
593
|
+
|
|
594
|
+
<tr>
|
|
595
|
+
<th scope="row">
|
|
596
|
+
<code>primary-m-font-weight-mobile</code>
|
|
597
|
+
</th>
|
|
598
|
+
<td>
|
|
599
|
+
<code>normal</code>
|
|
600
|
+
</td>
|
|
601
|
+
|
|
602
|
+
<td>
|
|
603
|
+
<div style="font-weight: normal;">
|
|
604
|
+
The quick brown fox jumps over the lazy dog.
|
|
605
|
+
</div>
|
|
606
|
+
</td>
|
|
607
|
+
|
|
608
|
+
<td></td>
|
|
609
|
+
</tr>
|
|
610
|
+
|
|
611
|
+
<tr>
|
|
612
|
+
<th scope="row">
|
|
613
|
+
<code>primary-l-font-weight-mobile</code>
|
|
614
|
+
</th>
|
|
615
|
+
<td>
|
|
616
|
+
<code>normal</code>
|
|
617
|
+
</td>
|
|
618
|
+
|
|
619
|
+
<td>
|
|
620
|
+
<div style="font-weight: normal;">
|
|
621
|
+
The quick brown fox jumps over the lazy dog.
|
|
622
|
+
</div>
|
|
623
|
+
</td>
|
|
624
|
+
|
|
625
|
+
<td></td>
|
|
626
|
+
</tr>
|
|
627
|
+
|
|
628
|
+
<tr>
|
|
629
|
+
<th scope="row">
|
|
630
|
+
<code>secondary-s-font-weight-desktop</code>
|
|
631
|
+
</th>
|
|
632
|
+
<td>
|
|
633
|
+
<code>initial</code>
|
|
634
|
+
</td>
|
|
635
|
+
|
|
636
|
+
<td>
|
|
637
|
+
<div style="font-weight: initial;">
|
|
638
|
+
The quick brown fox jumps over the lazy dog.
|
|
639
|
+
</div>
|
|
640
|
+
</td>
|
|
641
|
+
|
|
642
|
+
<td></td>
|
|
643
|
+
</tr>
|
|
644
|
+
|
|
645
|
+
<tr>
|
|
646
|
+
<th scope="row">
|
|
647
|
+
<code>secondary-s-font-weight-mobile</code>
|
|
648
|
+
</th>
|
|
649
|
+
<td>
|
|
650
|
+
<code>bold</code>
|
|
651
|
+
</td>
|
|
652
|
+
|
|
653
|
+
<td>
|
|
654
|
+
<div style="font-weight: bold;">
|
|
655
|
+
The quick brown fox jumps over the lazy dog.
|
|
656
|
+
</div>
|
|
657
|
+
</td>
|
|
658
|
+
|
|
659
|
+
<td></td>
|
|
660
|
+
</tr>
|
|
661
|
+
|
|
662
|
+
<tr>
|
|
663
|
+
<th scope="row">
|
|
664
|
+
<code>primary-l-font-weight-desktop</code>
|
|
665
|
+
</th>
|
|
666
|
+
<td>
|
|
667
|
+
<code>normal</code>
|
|
668
|
+
</td>
|
|
669
|
+
|
|
670
|
+
<td>
|
|
671
|
+
<div style="font-weight: normal;">
|
|
672
|
+
The quick brown fox jumps over the lazy dog.
|
|
673
|
+
</div>
|
|
674
|
+
</td>
|
|
675
|
+
|
|
676
|
+
<td></td>
|
|
677
|
+
</tr>
|
|
678
|
+
|
|
679
|
+
<tr>
|
|
680
|
+
<th scope="row">
|
|
681
|
+
<code>body-m-font-weight-desktop</code>
|
|
682
|
+
</th>
|
|
683
|
+
<td>
|
|
684
|
+
<code>initial</code>
|
|
685
|
+
</td>
|
|
686
|
+
|
|
687
|
+
<td>
|
|
688
|
+
<div style="font-weight: initial;">
|
|
689
|
+
The quick brown fox jumps over the lazy dog.
|
|
690
|
+
</div>
|
|
691
|
+
</td>
|
|
692
|
+
|
|
693
|
+
<td></td>
|
|
694
|
+
</tr>
|
|
695
|
+
|
|
696
|
+
<tr>
|
|
697
|
+
<th scope="row">
|
|
698
|
+
<code>primary-m-font-weight-desktop</code>
|
|
699
|
+
</th>
|
|
700
|
+
<td>
|
|
701
|
+
<code>normal</code>
|
|
702
|
+
</td>
|
|
703
|
+
|
|
704
|
+
<td>
|
|
705
|
+
<div style="font-weight: normal;">
|
|
706
|
+
The quick brown fox jumps over the lazy dog.
|
|
707
|
+
</div>
|
|
708
|
+
</td>
|
|
709
|
+
|
|
710
|
+
<td></td>
|
|
711
|
+
</tr>
|
|
712
|
+
|
|
713
|
+
<tr>
|
|
714
|
+
<th scope="row">
|
|
715
|
+
<code>accent-xs-font-weight-desktop</code>
|
|
716
|
+
</th>
|
|
717
|
+
<td>
|
|
718
|
+
<code>initial</code>
|
|
719
|
+
</td>
|
|
720
|
+
|
|
721
|
+
<td>
|
|
722
|
+
<div style="font-weight: initial;">
|
|
723
|
+
The quick brown fox jumps over the lazy dog.
|
|
724
|
+
</div>
|
|
725
|
+
</td>
|
|
726
|
+
|
|
727
|
+
<td></td>
|
|
728
|
+
</tr>
|
|
729
|
+
|
|
730
|
+
<tr>
|
|
731
|
+
<th scope="row">
|
|
732
|
+
<code>secondary-m-font-weight-mobile</code>
|
|
733
|
+
</th>
|
|
734
|
+
<td>
|
|
735
|
+
<code>600</code>
|
|
736
|
+
</td>
|
|
737
|
+
|
|
738
|
+
<td>
|
|
739
|
+
<div style="font-weight: 600;">
|
|
740
|
+
The quick brown fox jumps over the lazy dog.
|
|
741
|
+
</div>
|
|
742
|
+
</td>
|
|
743
|
+
|
|
744
|
+
<td></td>
|
|
745
|
+
</tr>
|
|
746
|
+
|
|
747
|
+
<tr>
|
|
748
|
+
<th scope="row">
|
|
749
|
+
<code>primary-xl-font-weight-desktop</code>
|
|
750
|
+
</th>
|
|
751
|
+
<td>
|
|
752
|
+
<code>normal</code>
|
|
753
|
+
</td>
|
|
754
|
+
|
|
755
|
+
<td>
|
|
756
|
+
<div style="font-weight: normal;">
|
|
757
|
+
The quick brown fox jumps over the lazy dog.
|
|
758
|
+
</div>
|
|
759
|
+
</td>
|
|
760
|
+
|
|
761
|
+
<td></td>
|
|
762
|
+
</tr>
|
|
763
|
+
|
|
764
|
+
<tr>
|
|
765
|
+
<th scope="row">
|
|
766
|
+
<code>secondary-l-font-weight-mobile</code>
|
|
767
|
+
</th>
|
|
768
|
+
<td>
|
|
769
|
+
<code>bold</code>
|
|
770
|
+
</td>
|
|
771
|
+
|
|
772
|
+
<td>
|
|
773
|
+
<div style="font-weight: bold;">
|
|
774
|
+
The quick brown fox jumps over the lazy dog.
|
|
775
|
+
</div>
|
|
776
|
+
</td>
|
|
777
|
+
|
|
778
|
+
<td></td>
|
|
779
|
+
</tr>
|
|
780
|
+
|
|
781
|
+
<tr>
|
|
782
|
+
<th scope="row">
|
|
783
|
+
<code>secondary-regular-m-font-weight-mobile</code>
|
|
784
|
+
</th>
|
|
785
|
+
<td>
|
|
786
|
+
<code>initial</code>
|
|
787
|
+
</td>
|
|
788
|
+
|
|
789
|
+
<td>
|
|
790
|
+
<div style="font-weight: initial;">
|
|
791
|
+
The quick brown fox jumps over the lazy dog.
|
|
792
|
+
</div>
|
|
793
|
+
</td>
|
|
794
|
+
|
|
795
|
+
<td></td>
|
|
796
|
+
</tr>
|
|
797
|
+
|
|
798
|
+
<tr>
|
|
799
|
+
<th scope="row">
|
|
800
|
+
<code>accent-s-font-weight-mobile</code>
|
|
801
|
+
</th>
|
|
802
|
+
<td>
|
|
803
|
+
<code>300</code>
|
|
804
|
+
</td>
|
|
805
|
+
|
|
806
|
+
<td>
|
|
807
|
+
<div style="font-weight: 300;">
|
|
808
|
+
The quick brown fox jumps over the lazy dog.
|
|
809
|
+
</div>
|
|
810
|
+
</td>
|
|
811
|
+
|
|
812
|
+
<td></td>
|
|
813
|
+
</tr>
|
|
814
|
+
|
|
815
|
+
<tr>
|
|
816
|
+
<th scope="row">
|
|
817
|
+
<code>accent-xxs-font-weight-mobile</code>
|
|
818
|
+
</th>
|
|
819
|
+
<td>
|
|
820
|
+
<code>300</code>
|
|
821
|
+
</td>
|
|
822
|
+
|
|
823
|
+
<td>
|
|
824
|
+
<div style="font-weight: 300;">
|
|
825
|
+
The quick brown fox jumps over the lazy dog.
|
|
826
|
+
</div>
|
|
827
|
+
</td>
|
|
828
|
+
|
|
829
|
+
<td></td>
|
|
830
|
+
</tr>
|
|
831
|
+
|
|
832
|
+
<tr>
|
|
833
|
+
<th scope="row">
|
|
834
|
+
<code>body-s-font-weight-desktop</code>
|
|
835
|
+
</th>
|
|
836
|
+
<td>
|
|
837
|
+
<code>initial</code>
|
|
838
|
+
</td>
|
|
839
|
+
|
|
840
|
+
<td>
|
|
841
|
+
<div style="font-weight: initial;">
|
|
842
|
+
The quick brown fox jumps over the lazy dog.
|
|
843
|
+
</div>
|
|
844
|
+
</td>
|
|
845
|
+
|
|
846
|
+
<td></td>
|
|
847
|
+
</tr>
|
|
848
|
+
|
|
849
|
+
<tr>
|
|
850
|
+
<th scope="row">
|
|
851
|
+
<code>primary-s-font-weight-desktop</code>
|
|
852
|
+
</th>
|
|
853
|
+
<td>
|
|
854
|
+
<code>normal</code>
|
|
855
|
+
</td>
|
|
856
|
+
|
|
857
|
+
<td>
|
|
858
|
+
<div style="font-weight: normal;">
|
|
859
|
+
The quick brown fox jumps over the lazy dog.
|
|
860
|
+
</div>
|
|
861
|
+
</td>
|
|
862
|
+
|
|
863
|
+
<td></td>
|
|
864
|
+
</tr>
|
|
865
|
+
|
|
866
|
+
<tr>
|
|
867
|
+
<th scope="row">
|
|
868
|
+
<code>primary-xxs-font-weight-desktop</code>
|
|
869
|
+
</th>
|
|
870
|
+
<td>
|
|
871
|
+
<code>700</code>
|
|
872
|
+
</td>
|
|
873
|
+
|
|
874
|
+
<td>
|
|
875
|
+
<div style="font-weight: 700;">
|
|
876
|
+
The quick brown fox jumps over the lazy dog.
|
|
877
|
+
</div>
|
|
878
|
+
</td>
|
|
879
|
+
|
|
880
|
+
<td></td>
|
|
881
|
+
</tr>
|
|
882
|
+
|
|
883
|
+
<tr>
|
|
884
|
+
<th scope="row">
|
|
885
|
+
<code>accent-regular-xxs-font-weight-mobile</code>
|
|
886
|
+
</th>
|
|
887
|
+
<td>
|
|
888
|
+
<code>400</code>
|
|
889
|
+
</td>
|
|
890
|
+
|
|
891
|
+
<td>
|
|
892
|
+
<div style="font-weight: 400;">
|
|
893
|
+
The quick brown fox jumps over the lazy dog.
|
|
894
|
+
</div>
|
|
895
|
+
</td>
|
|
896
|
+
|
|
897
|
+
<td></td>
|
|
898
|
+
</tr>
|
|
899
|
+
|
|
900
|
+
<tr>
|
|
901
|
+
<th scope="row">
|
|
902
|
+
<code>accent-l-font-weight-desktop</code>
|
|
903
|
+
</th>
|
|
904
|
+
<td>
|
|
905
|
+
<code>initial</code>
|
|
906
|
+
</td>
|
|
907
|
+
|
|
908
|
+
<td>
|
|
909
|
+
<div style="font-weight: initial;">
|
|
910
|
+
The quick brown fox jumps over the lazy dog.
|
|
911
|
+
</div>
|
|
912
|
+
</td>
|
|
913
|
+
|
|
914
|
+
<td></td>
|
|
915
|
+
</tr>
|
|
916
|
+
|
|
917
|
+
<tr>
|
|
918
|
+
<th scope="row">
|
|
919
|
+
<code>accent-m-font-weight-desktop</code>
|
|
920
|
+
</th>
|
|
921
|
+
<td>
|
|
922
|
+
<code>initial</code>
|
|
923
|
+
</td>
|
|
924
|
+
|
|
925
|
+
<td>
|
|
926
|
+
<div style="font-weight: initial;">
|
|
927
|
+
The quick brown fox jumps over the lazy dog.
|
|
928
|
+
</div>
|
|
929
|
+
</td>
|
|
930
|
+
|
|
931
|
+
<td></td>
|
|
932
|
+
</tr>
|
|
933
|
+
|
|
934
|
+
<tr>
|
|
935
|
+
<th scope="row">
|
|
936
|
+
<code>primary-xxxs-font-weight-desktop</code>
|
|
937
|
+
</th>
|
|
938
|
+
<td>
|
|
939
|
+
<code>700</code>
|
|
940
|
+
</td>
|
|
941
|
+
|
|
942
|
+
<td>
|
|
943
|
+
<div style="font-weight: 700;">
|
|
944
|
+
The quick brown fox jumps over the lazy dog.
|
|
945
|
+
</div>
|
|
946
|
+
</td>
|
|
947
|
+
|
|
948
|
+
<td></td>
|
|
949
|
+
</tr>
|
|
950
|
+
|
|
951
|
+
<tr>
|
|
952
|
+
<th scope="row">
|
|
953
|
+
<code>primary-xs-font-weight-desktop</code>
|
|
954
|
+
</th>
|
|
955
|
+
<td>
|
|
956
|
+
<code>700</code>
|
|
957
|
+
</td>
|
|
958
|
+
|
|
959
|
+
<td>
|
|
960
|
+
<div style="font-weight: 700;">
|
|
961
|
+
The quick brown fox jumps over the lazy dog.
|
|
962
|
+
</div>
|
|
963
|
+
</td>
|
|
964
|
+
|
|
965
|
+
<td></td>
|
|
966
|
+
</tr>
|
|
967
|
+
</tbody>
|
|
968
|
+
</table>
|
|
969
|
+
<hr />
|
|
970
|
+
</section>
|
|
971
|
+
|
|
972
|
+
|
|
973
|
+
<section>
|
|
974
|
+
<table>
|
|
975
|
+
|
|
976
|
+
<thead>
|
|
977
|
+
<tr id=font-size>
|
|
978
|
+
<th scope="col">Font Sizes</th>
|
|
979
|
+
<th scope="col">Value</th>
|
|
980
|
+
<th scope="col">Examples</th>
|
|
981
|
+
<th scope="col">Usage</th>
|
|
982
|
+
</tr>
|
|
983
|
+
</thead>
|
|
984
|
+
|
|
985
|
+
<tbody>
|
|
986
|
+
<tr>
|
|
987
|
+
<th scope="row">
|
|
988
|
+
<code>primary-xl-font-size-desktop</code>
|
|
989
|
+
</th>
|
|
990
|
+
<td>
|
|
991
|
+
<code>initial</code>
|
|
992
|
+
</td>
|
|
993
|
+
|
|
994
|
+
<td>
|
|
995
|
+
<div style="font-size: initial;">
|
|
996
|
+
The quick brown fox jumps over the lazy dog.
|
|
997
|
+
</div>
|
|
998
|
+
</td>
|
|
999
|
+
|
|
1000
|
+
<td></td>
|
|
1001
|
+
</tr>
|
|
1002
|
+
|
|
1003
|
+
<tr>
|
|
1004
|
+
<th scope="row">
|
|
1005
|
+
<code>primary-l-font-size-mobile</code>
|
|
1006
|
+
</th>
|
|
1007
|
+
<td>
|
|
1008
|
+
<code>24px</code>
|
|
1009
|
+
</td>
|
|
1010
|
+
|
|
1011
|
+
<td>
|
|
1012
|
+
<div style="font-size: 24px;">
|
|
1013
|
+
The quick brown fox jumps over the lazy dog.
|
|
1014
|
+
</div>
|
|
1015
|
+
</td>
|
|
1016
|
+
|
|
1017
|
+
<td></td>
|
|
1018
|
+
</tr>
|
|
1019
|
+
|
|
1020
|
+
<tr>
|
|
1021
|
+
<th scope="row">
|
|
1022
|
+
<code>body-s-font-size-desktop</code>
|
|
1023
|
+
</th>
|
|
1024
|
+
<td>
|
|
1025
|
+
<code>initial</code>
|
|
1026
|
+
</td>
|
|
1027
|
+
|
|
1028
|
+
<td>
|
|
1029
|
+
<div style="font-size: initial;">
|
|
1030
|
+
The quick brown fox jumps over the lazy dog.
|
|
1031
|
+
</div>
|
|
1032
|
+
</td>
|
|
1033
|
+
|
|
1034
|
+
<td></td>
|
|
1035
|
+
</tr>
|
|
1036
|
+
|
|
1037
|
+
<tr>
|
|
1038
|
+
<th scope="row">
|
|
1039
|
+
<code>primary-s-font-size-desktop</code>
|
|
1040
|
+
</th>
|
|
1041
|
+
<td>
|
|
1042
|
+
<code>initial</code>
|
|
1043
|
+
</td>
|
|
1044
|
+
|
|
1045
|
+
<td>
|
|
1046
|
+
<div style="font-size: initial;">
|
|
1047
|
+
The quick brown fox jumps over the lazy dog.
|
|
1048
|
+
</div>
|
|
1049
|
+
</td>
|
|
1050
|
+
|
|
1051
|
+
<td></td>
|
|
1052
|
+
</tr>
|
|
1053
|
+
|
|
1054
|
+
<tr>
|
|
1055
|
+
<th scope="row">
|
|
1056
|
+
<code>primary-xxs-font-size-desktop</code>
|
|
1057
|
+
</th>
|
|
1058
|
+
<td>
|
|
1059
|
+
<code>24px</code>
|
|
1060
|
+
</td>
|
|
1061
|
+
|
|
1062
|
+
<td>
|
|
1063
|
+
<div style="font-size: 24px;">
|
|
1064
|
+
The quick brown fox jumps over the lazy dog.
|
|
1065
|
+
</div>
|
|
1066
|
+
</td>
|
|
1067
|
+
|
|
1068
|
+
<td></td>
|
|
1069
|
+
</tr>
|
|
1070
|
+
|
|
1071
|
+
<tr>
|
|
1072
|
+
<th scope="row">
|
|
1073
|
+
<code>accent-l-font-size-desktop</code>
|
|
1074
|
+
</th>
|
|
1075
|
+
<td>
|
|
1076
|
+
<code>58px</code>
|
|
1077
|
+
</td>
|
|
1078
|
+
|
|
1079
|
+
<td>
|
|
1080
|
+
<div style="font-size: 58px;">
|
|
1081
|
+
The quick brown fox jumps over the lazy dog.
|
|
1082
|
+
</div>
|
|
1083
|
+
</td>
|
|
1084
|
+
|
|
1085
|
+
<td></td>
|
|
1086
|
+
</tr>
|
|
1087
|
+
|
|
1088
|
+
<tr>
|
|
1089
|
+
<th scope="row">
|
|
1090
|
+
<code>accent-m-font-size-desktop</code>
|
|
1091
|
+
</th>
|
|
1092
|
+
<td>
|
|
1093
|
+
<code>initial</code>
|
|
1094
|
+
</td>
|
|
1095
|
+
|
|
1096
|
+
<td>
|
|
1097
|
+
<div style="font-size: initial;">
|
|
1098
|
+
The quick brown fox jumps over the lazy dog.
|
|
1099
|
+
</div>
|
|
1100
|
+
</td>
|
|
1101
|
+
|
|
1102
|
+
<td></td>
|
|
1103
|
+
</tr>
|
|
1104
|
+
|
|
1105
|
+
<tr>
|
|
1106
|
+
<th scope="row">
|
|
1107
|
+
<code>primary-xxxs-font-size-desktop</code>
|
|
1108
|
+
</th>
|
|
1109
|
+
<td>
|
|
1110
|
+
<code>20px</code>
|
|
1111
|
+
</td>
|
|
1112
|
+
|
|
1113
|
+
<td>
|
|
1114
|
+
<div style="font-size: 20px;">
|
|
1115
|
+
The quick brown fox jumps over the lazy dog.
|
|
1116
|
+
</div>
|
|
1117
|
+
</td>
|
|
1118
|
+
|
|
1119
|
+
<td></td>
|
|
1120
|
+
</tr>
|
|
1121
|
+
|
|
1122
|
+
<tr>
|
|
1123
|
+
<th scope="row">
|
|
1124
|
+
<code>primary-xs-font-size-desktop</code>
|
|
1125
|
+
</th>
|
|
1126
|
+
<td>
|
|
1127
|
+
<code>26px</code>
|
|
1128
|
+
</td>
|
|
1129
|
+
|
|
1130
|
+
<td>
|
|
1131
|
+
<div style="font-size: 26px;">
|
|
1132
|
+
The quick brown fox jumps over the lazy dog.
|
|
1133
|
+
</div>
|
|
1134
|
+
</td>
|
|
1135
|
+
|
|
1136
|
+
<td></td>
|
|
1137
|
+
</tr>
|
|
1138
|
+
|
|
1139
|
+
<tr>
|
|
1140
|
+
<th scope="row">
|
|
1141
|
+
<code>secondary-s-font-size-mobile</code>
|
|
1142
|
+
</th>
|
|
1143
|
+
<td>
|
|
1144
|
+
<code>14px</code>
|
|
1145
|
+
</td>
|
|
1146
|
+
|
|
1147
|
+
<td>
|
|
1148
|
+
<div style="font-size: 14px;">
|
|
1149
|
+
The quick brown fox jumps over the lazy dog.
|
|
1150
|
+
</div>
|
|
1151
|
+
</td>
|
|
1152
|
+
|
|
1153
|
+
<td></td>
|
|
1154
|
+
</tr>
|
|
1155
|
+
|
|
1156
|
+
<tr>
|
|
1157
|
+
<th scope="row">
|
|
1158
|
+
<code>accent-regular-xxs-font-size-desktop</code>
|
|
1159
|
+
</th>
|
|
1160
|
+
<td>
|
|
1161
|
+
<code>18px</code>
|
|
1162
|
+
</td>
|
|
1163
|
+
|
|
1164
|
+
<td>
|
|
1165
|
+
<div style="font-size: 18px;">
|
|
1166
|
+
The quick brown fox jumps over the lazy dog.
|
|
1167
|
+
</div>
|
|
1168
|
+
</td>
|
|
1169
|
+
|
|
1170
|
+
<td></td>
|
|
1171
|
+
</tr>
|
|
1172
|
+
|
|
1173
|
+
<tr>
|
|
1174
|
+
<th scope="row">
|
|
1175
|
+
<code>secondary-m-font-size-mobile</code>
|
|
1176
|
+
</th>
|
|
1177
|
+
<td>
|
|
1178
|
+
<code>18px</code>
|
|
1179
|
+
</td>
|
|
1180
|
+
|
|
1181
|
+
<td>
|
|
1182
|
+
<div style="font-size: 18px;">
|
|
1183
|
+
The quick brown fox jumps over the lazy dog.
|
|
1184
|
+
</div>
|
|
1185
|
+
</td>
|
|
1186
|
+
|
|
1187
|
+
<td></td>
|
|
1188
|
+
</tr>
|
|
1189
|
+
|
|
1190
|
+
<tr>
|
|
1191
|
+
<th scope="row">
|
|
1192
|
+
<code>accent-xxs-font-size-desktop</code>
|
|
1193
|
+
</th>
|
|
1194
|
+
<td>
|
|
1195
|
+
<code>18px</code>
|
|
1196
|
+
</td>
|
|
1197
|
+
|
|
1198
|
+
<td>
|
|
1199
|
+
<div style="font-size: 18px;">
|
|
1200
|
+
The quick brown fox jumps over the lazy dog.
|
|
1201
|
+
</div>
|
|
1202
|
+
</td>
|
|
1203
|
+
|
|
1204
|
+
<td></td>
|
|
1205
|
+
</tr>
|
|
1206
|
+
|
|
1207
|
+
<tr>
|
|
1208
|
+
<th scope="row">
|
|
1209
|
+
<code>accent-s-font-size-desktop</code>
|
|
1210
|
+
</th>
|
|
1211
|
+
<td>
|
|
1212
|
+
<code>initial</code>
|
|
1213
|
+
</td>
|
|
1214
|
+
|
|
1215
|
+
<td>
|
|
1216
|
+
<div style="font-size: initial;">
|
|
1217
|
+
The quick brown fox jumps over the lazy dog.
|
|
1218
|
+
</div>
|
|
1219
|
+
</td>
|
|
1220
|
+
|
|
1221
|
+
<td></td>
|
|
1222
|
+
</tr>
|
|
1223
|
+
|
|
1224
|
+
<tr>
|
|
1225
|
+
<th scope="row">
|
|
1226
|
+
<code>secondary-regular-m-font-size-desktop</code>
|
|
1227
|
+
</th>
|
|
1228
|
+
<td>
|
|
1229
|
+
<code>initial</code>
|
|
1230
|
+
</td>
|
|
1231
|
+
|
|
1232
|
+
<td>
|
|
1233
|
+
<div style="font-size: initial;">
|
|
1234
|
+
The quick brown fox jumps over the lazy dog.
|
|
1235
|
+
</div>
|
|
1236
|
+
</td>
|
|
1237
|
+
|
|
1238
|
+
<td></td>
|
|
1239
|
+
</tr>
|
|
1240
|
+
|
|
1241
|
+
<tr>
|
|
1242
|
+
<th scope="row">
|
|
1243
|
+
<code>secondary-l-font-size-mobile</code>
|
|
1244
|
+
</th>
|
|
1245
|
+
<td>
|
|
1246
|
+
<code>18px</code>
|
|
1247
|
+
</td>
|
|
1248
|
+
|
|
1249
|
+
<td>
|
|
1250
|
+
<div style="font-size: 18px;">
|
|
1251
|
+
The quick brown fox jumps over the lazy dog.
|
|
1252
|
+
</div>
|
|
1253
|
+
</td>
|
|
1254
|
+
|
|
1255
|
+
<td></td>
|
|
1256
|
+
</tr>
|
|
1257
|
+
|
|
1258
|
+
<tr>
|
|
1259
|
+
<th scope="row">
|
|
1260
|
+
<code>secondary-l-font-size-desktop</code>
|
|
1261
|
+
</th>
|
|
1262
|
+
<td>
|
|
1263
|
+
<code>initial</code>
|
|
1264
|
+
</td>
|
|
1265
|
+
|
|
1266
|
+
<td>
|
|
1267
|
+
<div style="font-size: initial;">
|
|
1268
|
+
The quick brown fox jumps over the lazy dog.
|
|
1269
|
+
</div>
|
|
1270
|
+
</td>
|
|
1271
|
+
|
|
1272
|
+
<td></td>
|
|
1273
|
+
</tr>
|
|
1274
|
+
|
|
1275
|
+
<tr>
|
|
1276
|
+
<th scope="row">
|
|
1277
|
+
<code>secondary-regular-m-font-size-mobile</code>
|
|
1278
|
+
</th>
|
|
1279
|
+
<td>
|
|
1280
|
+
<code>16px</code>
|
|
1281
|
+
</td>
|
|
1282
|
+
|
|
1283
|
+
<td>
|
|
1284
|
+
<div style="font-size: 16px;">
|
|
1285
|
+
The quick brown fox jumps over the lazy dog.
|
|
1286
|
+
</div>
|
|
1287
|
+
</td>
|
|
1288
|
+
|
|
1289
|
+
<td></td>
|
|
1290
|
+
</tr>
|
|
1291
|
+
|
|
1292
|
+
<tr>
|
|
1293
|
+
<th scope="row">
|
|
1294
|
+
<code>accent-xxs-font-size-mobile</code>
|
|
1295
|
+
</th>
|
|
1296
|
+
<td>
|
|
1297
|
+
<code>14px</code>
|
|
1298
|
+
</td>
|
|
1299
|
+
|
|
1300
|
+
<td>
|
|
1301
|
+
<div style="font-size: 14px;">
|
|
1302
|
+
The quick brown fox jumps over the lazy dog.
|
|
1303
|
+
</div>
|
|
1304
|
+
</td>
|
|
1305
|
+
|
|
1306
|
+
<td></td>
|
|
1307
|
+
</tr>
|
|
1308
|
+
|
|
1309
|
+
<tr>
|
|
1310
|
+
<th scope="row">
|
|
1311
|
+
<code>secondary-m-font-size-desktop</code>
|
|
1312
|
+
</th>
|
|
1313
|
+
<td>
|
|
1314
|
+
<code>initial</code>
|
|
1315
|
+
</td>
|
|
1316
|
+
|
|
1317
|
+
<td>
|
|
1318
|
+
<div style="font-size: initial;">
|
|
1319
|
+
The quick brown fox jumps over the lazy dog.
|
|
1320
|
+
</div>
|
|
1321
|
+
</td>
|
|
1322
|
+
|
|
1323
|
+
<td></td>
|
|
1324
|
+
</tr>
|
|
1325
|
+
|
|
1326
|
+
<tr>
|
|
1327
|
+
<th scope="row">
|
|
1328
|
+
<code>accent-s-font-size-mobile</code>
|
|
1329
|
+
</th>
|
|
1330
|
+
<td>
|
|
1331
|
+
<code>23px</code>
|
|
1332
|
+
</td>
|
|
1333
|
+
|
|
1334
|
+
<td>
|
|
1335
|
+
<div style="font-size: 23px;">
|
|
1336
|
+
The quick brown fox jumps over the lazy dog.
|
|
1337
|
+
</div>
|
|
1338
|
+
</td>
|
|
1339
|
+
|
|
1340
|
+
<td></td>
|
|
1341
|
+
</tr>
|
|
1342
|
+
|
|
1343
|
+
<tr>
|
|
1344
|
+
<th scope="row">
|
|
1345
|
+
<code>accent-regular-xxs-font-size-mobile</code>
|
|
1346
|
+
</th>
|
|
1347
|
+
<td>
|
|
1348
|
+
<code>14px</code>
|
|
1349
|
+
</td>
|
|
1350
|
+
|
|
1351
|
+
<td>
|
|
1352
|
+
<div style="font-size: 14px;">
|
|
1353
|
+
The quick brown fox jumps over the lazy dog.
|
|
1354
|
+
</div>
|
|
1355
|
+
</td>
|
|
1356
|
+
|
|
1357
|
+
<td></td>
|
|
1358
|
+
</tr>
|
|
1359
|
+
|
|
1360
|
+
<tr>
|
|
1361
|
+
<th scope="row">
|
|
1362
|
+
<code>primary-xs-font-size-mobile</code>
|
|
1363
|
+
</th>
|
|
1364
|
+
<td>
|
|
1365
|
+
<code>18px</code>
|
|
328
1366
|
</td>
|
|
329
1367
|
|
|
330
1368
|
<td>
|
|
331
|
-
<div style="font-
|
|
1369
|
+
<div style="font-size: 18px;">
|
|
332
1370
|
The quick brown fox jumps over the lazy dog.
|
|
333
1371
|
</div>
|
|
334
1372
|
</td>
|
|
@@ -338,14 +1376,14 @@
|
|
|
338
1376
|
|
|
339
1377
|
<tr>
|
|
340
1378
|
<th scope="row">
|
|
341
|
-
<code>primary-
|
|
1379
|
+
<code>primary-xxxs-font-size-mobile</code>
|
|
342
1380
|
</th>
|
|
343
1381
|
<td>
|
|
344
|
-
<code>
|
|
1382
|
+
<code>19px</code>
|
|
345
1383
|
</td>
|
|
346
1384
|
|
|
347
1385
|
<td>
|
|
348
|
-
<div style="font-
|
|
1386
|
+
<div style="font-size: 19px;">
|
|
349
1387
|
The quick brown fox jumps over the lazy dog.
|
|
350
1388
|
</div>
|
|
351
1389
|
</td>
|
|
@@ -355,14 +1393,14 @@
|
|
|
355
1393
|
|
|
356
1394
|
<tr>
|
|
357
1395
|
<th scope="row">
|
|
358
|
-
<code>
|
|
1396
|
+
<code>accent-m-font-size-mobile</code>
|
|
359
1397
|
</th>
|
|
360
1398
|
<td>
|
|
361
|
-
<code>
|
|
1399
|
+
<code>42px</code>
|
|
362
1400
|
</td>
|
|
363
1401
|
|
|
364
1402
|
<td>
|
|
365
|
-
<div style="font-
|
|
1403
|
+
<div style="font-size: 42px;">
|
|
366
1404
|
The quick brown fox jumps over the lazy dog.
|
|
367
1405
|
</div>
|
|
368
1406
|
</td>
|
|
@@ -372,14 +1410,14 @@
|
|
|
372
1410
|
|
|
373
1411
|
<tr>
|
|
374
1412
|
<th scope="row">
|
|
375
|
-
<code>
|
|
1413
|
+
<code>secondary-s-font-size-desktop</code>
|
|
376
1414
|
</th>
|
|
377
1415
|
<td>
|
|
378
|
-
<code>
|
|
1416
|
+
<code>initial</code>
|
|
379
1417
|
</td>
|
|
380
1418
|
|
|
381
1419
|
<td>
|
|
382
|
-
<div style="font-
|
|
1420
|
+
<div style="font-size: initial;">
|
|
383
1421
|
The quick brown fox jumps over the lazy dog.
|
|
384
1422
|
</div>
|
|
385
1423
|
</td>
|
|
@@ -389,14 +1427,14 @@
|
|
|
389
1427
|
|
|
390
1428
|
<tr>
|
|
391
1429
|
<th scope="row">
|
|
392
|
-
<code>
|
|
1430
|
+
<code>accent-l-font-size-mobile</code>
|
|
393
1431
|
</th>
|
|
394
1432
|
<td>
|
|
395
|
-
<code>
|
|
1433
|
+
<code>40px</code>
|
|
396
1434
|
</td>
|
|
397
1435
|
|
|
398
1436
|
<td>
|
|
399
|
-
<div style="font-
|
|
1437
|
+
<div style="font-size: 40px;">
|
|
400
1438
|
The quick brown fox jumps over the lazy dog.
|
|
401
1439
|
</div>
|
|
402
1440
|
</td>
|
|
@@ -406,14 +1444,14 @@
|
|
|
406
1444
|
|
|
407
1445
|
<tr>
|
|
408
1446
|
<th scope="row">
|
|
409
|
-
<code>primary-
|
|
1447
|
+
<code>primary-xxs-font-size-mobile</code>
|
|
410
1448
|
</th>
|
|
411
1449
|
<td>
|
|
412
|
-
<code>
|
|
1450
|
+
<code>22px</code>
|
|
413
1451
|
</td>
|
|
414
1452
|
|
|
415
1453
|
<td>
|
|
416
|
-
<div style="font-
|
|
1454
|
+
<div style="font-size: 22px;">
|
|
417
1455
|
The quick brown fox jumps over the lazy dog.
|
|
418
1456
|
</div>
|
|
419
1457
|
</td>
|
|
@@ -423,14 +1461,14 @@
|
|
|
423
1461
|
|
|
424
1462
|
<tr>
|
|
425
1463
|
<th scope="row">
|
|
426
|
-
<code>primary-
|
|
1464
|
+
<code>primary-s-font-size-mobile</code>
|
|
427
1465
|
</th>
|
|
428
1466
|
<td>
|
|
429
|
-
<code>
|
|
1467
|
+
<code>21px</code>
|
|
430
1468
|
</td>
|
|
431
1469
|
|
|
432
1470
|
<td>
|
|
433
|
-
<div style="font-
|
|
1471
|
+
<div style="font-size: 21px;">
|
|
434
1472
|
The quick brown fox jumps over the lazy dog.
|
|
435
1473
|
</div>
|
|
436
1474
|
</td>
|
|
@@ -440,14 +1478,14 @@
|
|
|
440
1478
|
|
|
441
1479
|
<tr>
|
|
442
1480
|
<th scope="row">
|
|
443
|
-
<code>
|
|
1481
|
+
<code>body-s-font-size-mobile</code>
|
|
444
1482
|
</th>
|
|
445
1483
|
<td>
|
|
446
|
-
<code>
|
|
1484
|
+
<code>16px</code>
|
|
447
1485
|
</td>
|
|
448
1486
|
|
|
449
1487
|
<td>
|
|
450
|
-
<div style="font-
|
|
1488
|
+
<div style="font-size: 16px;">
|
|
451
1489
|
The quick brown fox jumps over the lazy dog.
|
|
452
1490
|
</div>
|
|
453
1491
|
</td>
|
|
@@ -457,14 +1495,14 @@
|
|
|
457
1495
|
|
|
458
1496
|
<tr>
|
|
459
1497
|
<th scope="row">
|
|
460
|
-
<code>
|
|
1498
|
+
<code>primary-l-font-size-desktop</code>
|
|
461
1499
|
</th>
|
|
462
1500
|
<td>
|
|
463
|
-
<code>
|
|
1501
|
+
<code>initial</code>
|
|
464
1502
|
</td>
|
|
465
1503
|
|
|
466
1504
|
<td>
|
|
467
|
-
<div style="font-
|
|
1505
|
+
<div style="font-size: initial;">
|
|
468
1506
|
The quick brown fox jumps over the lazy dog.
|
|
469
1507
|
</div>
|
|
470
1508
|
</td>
|
|
@@ -474,14 +1512,116 @@
|
|
|
474
1512
|
|
|
475
1513
|
<tr>
|
|
476
1514
|
<th scope="row">
|
|
477
|
-
<code>primary-
|
|
1515
|
+
<code>primary-xl-font-size-mobile</code>
|
|
478
1516
|
</th>
|
|
479
1517
|
<td>
|
|
480
|
-
<code>
|
|
1518
|
+
<code>28px</code>
|
|
481
1519
|
</td>
|
|
482
1520
|
|
|
483
1521
|
<td>
|
|
484
|
-
<div style="font-
|
|
1522
|
+
<div style="font-size: 28px;">
|
|
1523
|
+
The quick brown fox jumps over the lazy dog.
|
|
1524
|
+
</div>
|
|
1525
|
+
</td>
|
|
1526
|
+
|
|
1527
|
+
<td></td>
|
|
1528
|
+
</tr>
|
|
1529
|
+
|
|
1530
|
+
<tr>
|
|
1531
|
+
<th scope="row">
|
|
1532
|
+
<code>accent-xs-font-size-mobile</code>
|
|
1533
|
+
</th>
|
|
1534
|
+
<td>
|
|
1535
|
+
<code>18px</code>
|
|
1536
|
+
</td>
|
|
1537
|
+
|
|
1538
|
+
<td>
|
|
1539
|
+
<div style="font-size: 18px;">
|
|
1540
|
+
The quick brown fox jumps over the lazy dog.
|
|
1541
|
+
</div>
|
|
1542
|
+
</td>
|
|
1543
|
+
|
|
1544
|
+
<td></td>
|
|
1545
|
+
</tr>
|
|
1546
|
+
|
|
1547
|
+
<tr>
|
|
1548
|
+
<th scope="row">
|
|
1549
|
+
<code>primary-m-font-size-mobile</code>
|
|
1550
|
+
</th>
|
|
1551
|
+
<td>
|
|
1552
|
+
<code>24px</code>
|
|
1553
|
+
</td>
|
|
1554
|
+
|
|
1555
|
+
<td>
|
|
1556
|
+
<div style="font-size: 24px;">
|
|
1557
|
+
The quick brown fox jumps over the lazy dog.
|
|
1558
|
+
</div>
|
|
1559
|
+
</td>
|
|
1560
|
+
|
|
1561
|
+
<td></td>
|
|
1562
|
+
</tr>
|
|
1563
|
+
|
|
1564
|
+
<tr>
|
|
1565
|
+
<th scope="row">
|
|
1566
|
+
<code>body-m-font-size-desktop</code>
|
|
1567
|
+
</th>
|
|
1568
|
+
<td>
|
|
1569
|
+
<code>initial</code>
|
|
1570
|
+
</td>
|
|
1571
|
+
|
|
1572
|
+
<td>
|
|
1573
|
+
<div style="font-size: initial;">
|
|
1574
|
+
The quick brown fox jumps over the lazy dog.
|
|
1575
|
+
</div>
|
|
1576
|
+
</td>
|
|
1577
|
+
|
|
1578
|
+
<td></td>
|
|
1579
|
+
</tr>
|
|
1580
|
+
|
|
1581
|
+
<tr>
|
|
1582
|
+
<th scope="row">
|
|
1583
|
+
<code>body-m-font-size-mobile</code>
|
|
1584
|
+
</th>
|
|
1585
|
+
<td>
|
|
1586
|
+
<code>16px</code>
|
|
1587
|
+
</td>
|
|
1588
|
+
|
|
1589
|
+
<td>
|
|
1590
|
+
<div style="font-size: 16px;">
|
|
1591
|
+
The quick brown fox jumps over the lazy dog.
|
|
1592
|
+
</div>
|
|
1593
|
+
</td>
|
|
1594
|
+
|
|
1595
|
+
<td></td>
|
|
1596
|
+
</tr>
|
|
1597
|
+
|
|
1598
|
+
<tr>
|
|
1599
|
+
<th scope="row">
|
|
1600
|
+
<code>primary-m-font-size-desktop</code>
|
|
1601
|
+
</th>
|
|
1602
|
+
<td>
|
|
1603
|
+
<code>initial</code>
|
|
1604
|
+
</td>
|
|
1605
|
+
|
|
1606
|
+
<td>
|
|
1607
|
+
<div style="font-size: initial;">
|
|
1608
|
+
The quick brown fox jumps over the lazy dog.
|
|
1609
|
+
</div>
|
|
1610
|
+
</td>
|
|
1611
|
+
|
|
1612
|
+
<td></td>
|
|
1613
|
+
</tr>
|
|
1614
|
+
|
|
1615
|
+
<tr>
|
|
1616
|
+
<th scope="row">
|
|
1617
|
+
<code>accent-xs-font-size-desktop</code>
|
|
1618
|
+
</th>
|
|
1619
|
+
<td>
|
|
1620
|
+
<code>23px</code>
|
|
1621
|
+
</td>
|
|
1622
|
+
|
|
1623
|
+
<td>
|
|
1624
|
+
<div style="font-size: 23px;">
|
|
485
1625
|
The quick brown fox jumps over the lazy dog.
|
|
486
1626
|
</div>
|
|
487
1627
|
</td>
|
|
@@ -498,8 +1638,8 @@
|
|
|
498
1638
|
<table>
|
|
499
1639
|
|
|
500
1640
|
<thead>
|
|
501
|
-
<tr id=
|
|
502
|
-
<th scope="col">
|
|
1641
|
+
<tr id=line-height>
|
|
1642
|
+
<th scope="col">Line Heights</th>
|
|
503
1643
|
<th scope="col">Value</th>
|
|
504
1644
|
<th scope="col">Examples</th>
|
|
505
1645
|
<th scope="col">Usage</th>
|
|
@@ -509,15 +1649,17 @@
|
|
|
509
1649
|
<tbody>
|
|
510
1650
|
<tr>
|
|
511
1651
|
<th scope="row">
|
|
512
|
-
<code>
|
|
1652
|
+
<code>line-height-small</code>
|
|
513
1653
|
</th>
|
|
514
1654
|
<td>
|
|
515
|
-
<code>
|
|
1655
|
+
<code>1.1</code>
|
|
516
1656
|
</td>
|
|
517
1657
|
|
|
518
1658
|
<td>
|
|
519
|
-
<div style="
|
|
520
|
-
|
|
1659
|
+
<div class="line-height-example" style="line-height: 1.1; background-size: 100% 1.1em;">
|
|
1660
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1661
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1662
|
+
id feugiat at, venenatis quis erat.
|
|
521
1663
|
</div>
|
|
522
1664
|
</td>
|
|
523
1665
|
|
|
@@ -526,15 +1668,74 @@
|
|
|
526
1668
|
|
|
527
1669
|
<tr>
|
|
528
1670
|
<th scope="row">
|
|
529
|
-
<code>
|
|
1671
|
+
<code>line-height-normal</code>
|
|
1672
|
+
</th>
|
|
1673
|
+
<td>
|
|
1674
|
+
<code>1.35</code>
|
|
1675
|
+
</td>
|
|
1676
|
+
|
|
1677
|
+
<td>
|
|
1678
|
+
<div class="line-height-example" style="line-height: 1.35; background-size: 100% 1.35em;">
|
|
1679
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1680
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1681
|
+
id feugiat at, venenatis quis erat.
|
|
1682
|
+
</div>
|
|
1683
|
+
</td>
|
|
1684
|
+
|
|
1685
|
+
<td></td>
|
|
1686
|
+
</tr>
|
|
1687
|
+
|
|
1688
|
+
<tr>
|
|
1689
|
+
<th scope="row">
|
|
1690
|
+
<code>line-height-copy</code>
|
|
1691
|
+
</th>
|
|
1692
|
+
<td>
|
|
1693
|
+
<code>1.5</code>
|
|
1694
|
+
</td>
|
|
1695
|
+
|
|
1696
|
+
<td>
|
|
1697
|
+
<div class="line-height-example" style="line-height: 1.5; background-size: 100% 1.5em;">
|
|
1698
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1699
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1700
|
+
id feugiat at, venenatis quis erat.
|
|
1701
|
+
</div>
|
|
1702
|
+
</td>
|
|
1703
|
+
|
|
1704
|
+
<td></td>
|
|
1705
|
+
</tr>
|
|
1706
|
+
|
|
1707
|
+
<tr>
|
|
1708
|
+
<th scope="row">
|
|
1709
|
+
<code>line-height-large</code>
|
|
1710
|
+
</th>
|
|
1711
|
+
<td>
|
|
1712
|
+
<code>1.85</code>
|
|
1713
|
+
</td>
|
|
1714
|
+
|
|
1715
|
+
<td>
|
|
1716
|
+
<div class="line-height-example" style="line-height: 1.85; background-size: 100% 1.85em;">
|
|
1717
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1718
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1719
|
+
id feugiat at, venenatis quis erat.
|
|
1720
|
+
</div>
|
|
1721
|
+
</td>
|
|
1722
|
+
|
|
1723
|
+
<td></td>
|
|
1724
|
+
</tr>
|
|
1725
|
+
|
|
1726
|
+
<tr>
|
|
1727
|
+
<th scope="row">
|
|
1728
|
+
<code>accent-xs-line-height-desktop</code>
|
|
530
1729
|
</th>
|
|
531
1730
|
<td>
|
|
532
1731
|
<code>24px</code>
|
|
533
1732
|
</td>
|
|
534
1733
|
|
|
535
1734
|
<td>
|
|
536
|
-
<div style="
|
|
537
|
-
|
|
1735
|
+
<div class="line-height-example" style="line-height: 24px; background-size: 100% 24px;">
|
|
1736
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1737
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1738
|
+
id feugiat at, venenatis quis erat.
|
|
538
1739
|
</div>
|
|
539
1740
|
</td>
|
|
540
1741
|
|
|
@@ -543,15 +1744,36 @@
|
|
|
543
1744
|
|
|
544
1745
|
<tr>
|
|
545
1746
|
<th scope="row">
|
|
546
|
-
<code>
|
|
1747
|
+
<code>body-m-line-height-desktop</code>
|
|
547
1748
|
</th>
|
|
548
1749
|
<td>
|
|
549
1750
|
<code>initial</code>
|
|
550
1751
|
</td>
|
|
551
1752
|
|
|
552
1753
|
<td>
|
|
553
|
-
<div style="
|
|
554
|
-
|
|
1754
|
+
<div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
|
|
1755
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1756
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1757
|
+
id feugiat at, venenatis quis erat.
|
|
1758
|
+
</div>
|
|
1759
|
+
</td>
|
|
1760
|
+
|
|
1761
|
+
<td></td>
|
|
1762
|
+
</tr>
|
|
1763
|
+
|
|
1764
|
+
<tr>
|
|
1765
|
+
<th scope="row">
|
|
1766
|
+
<code>primary-m-line-height-desktop</code>
|
|
1767
|
+
</th>
|
|
1768
|
+
<td>
|
|
1769
|
+
<code>initial</code>
|
|
1770
|
+
</td>
|
|
1771
|
+
|
|
1772
|
+
<td>
|
|
1773
|
+
<div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
|
|
1774
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1775
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1776
|
+
id feugiat at, venenatis quis erat.
|
|
555
1777
|
</div>
|
|
556
1778
|
</td>
|
|
557
1779
|
|
|
@@ -560,15 +1782,17 @@
|
|
|
560
1782
|
|
|
561
1783
|
<tr>
|
|
562
1784
|
<th scope="row">
|
|
563
|
-
<code>
|
|
1785
|
+
<code>primary-xl-line-height-desktop</code>
|
|
564
1786
|
</th>
|
|
565
1787
|
<td>
|
|
566
|
-
<code>
|
|
1788
|
+
<code>initial</code>
|
|
567
1789
|
</td>
|
|
568
1790
|
|
|
569
1791
|
<td>
|
|
570
|
-
<div style="
|
|
571
|
-
|
|
1792
|
+
<div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
|
|
1793
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1794
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1795
|
+
id feugiat at, venenatis quis erat.
|
|
572
1796
|
</div>
|
|
573
1797
|
</td>
|
|
574
1798
|
|
|
@@ -577,15 +1801,17 @@
|
|
|
577
1801
|
|
|
578
1802
|
<tr>
|
|
579
1803
|
<th scope="row">
|
|
580
|
-
<code>
|
|
1804
|
+
<code>primary-s-line-height-desktop</code>
|
|
581
1805
|
</th>
|
|
582
1806
|
<td>
|
|
583
|
-
<code>
|
|
1807
|
+
<code>initial</code>
|
|
584
1808
|
</td>
|
|
585
1809
|
|
|
586
1810
|
<td>
|
|
587
|
-
<div style="
|
|
588
|
-
|
|
1811
|
+
<div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
|
|
1812
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1813
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1814
|
+
id feugiat at, venenatis quis erat.
|
|
589
1815
|
</div>
|
|
590
1816
|
</td>
|
|
591
1817
|
|
|
@@ -594,15 +1820,17 @@
|
|
|
594
1820
|
|
|
595
1821
|
<tr>
|
|
596
1822
|
<th scope="row">
|
|
597
|
-
<code>
|
|
1823
|
+
<code>primary-xxs-line-height-desktop</code>
|
|
598
1824
|
</th>
|
|
599
1825
|
<td>
|
|
600
|
-
<code>
|
|
1826
|
+
<code>27px</code>
|
|
601
1827
|
</td>
|
|
602
1828
|
|
|
603
1829
|
<td>
|
|
604
|
-
<div style="
|
|
605
|
-
|
|
1830
|
+
<div class="line-height-example" style="line-height: 27px; background-size: 100% 27px;">
|
|
1831
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1832
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1833
|
+
id feugiat at, venenatis quis erat.
|
|
606
1834
|
</div>
|
|
607
1835
|
</td>
|
|
608
1836
|
|
|
@@ -611,15 +1839,17 @@
|
|
|
611
1839
|
|
|
612
1840
|
<tr>
|
|
613
1841
|
<th scope="row">
|
|
614
|
-
<code>secondary-
|
|
1842
|
+
<code>secondary-s-line-height-mobile</code>
|
|
615
1843
|
</th>
|
|
616
1844
|
<td>
|
|
617
|
-
<code>
|
|
1845
|
+
<code>21px</code>
|
|
618
1846
|
</td>
|
|
619
1847
|
|
|
620
1848
|
<td>
|
|
621
|
-
<div style="
|
|
622
|
-
|
|
1849
|
+
<div class="line-height-example" style="line-height: 21px; background-size: 100% 21px;">
|
|
1850
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1851
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1852
|
+
id feugiat at, venenatis quis erat.
|
|
623
1853
|
</div>
|
|
624
1854
|
</td>
|
|
625
1855
|
|
|
@@ -628,15 +1858,17 @@
|
|
|
628
1858
|
|
|
629
1859
|
<tr>
|
|
630
1860
|
<th scope="row">
|
|
631
|
-
<code>
|
|
1861
|
+
<code>body-s-line-height-desktop</code>
|
|
632
1862
|
</th>
|
|
633
1863
|
<td>
|
|
634
|
-
<code>
|
|
1864
|
+
<code>initial</code>
|
|
635
1865
|
</td>
|
|
636
1866
|
|
|
637
1867
|
<td>
|
|
638
|
-
<div style="
|
|
639
|
-
|
|
1868
|
+
<div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
|
|
1869
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1870
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1871
|
+
id feugiat at, venenatis quis erat.
|
|
640
1872
|
</div>
|
|
641
1873
|
</td>
|
|
642
1874
|
|
|
@@ -645,15 +1877,17 @@
|
|
|
645
1877
|
|
|
646
1878
|
<tr>
|
|
647
1879
|
<th scope="row">
|
|
648
|
-
<code>
|
|
1880
|
+
<code>accent-l-line-height-desktop</code>
|
|
649
1881
|
</th>
|
|
650
1882
|
<td>
|
|
651
|
-
<code>
|
|
1883
|
+
<code>50px</code>
|
|
652
1884
|
</td>
|
|
653
1885
|
|
|
654
1886
|
<td>
|
|
655
|
-
<div style="
|
|
656
|
-
|
|
1887
|
+
<div class="line-height-example" style="line-height: 50px; background-size: 100% 50px;">
|
|
1888
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1889
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1890
|
+
id feugiat at, venenatis quis erat.
|
|
657
1891
|
</div>
|
|
658
1892
|
</td>
|
|
659
1893
|
|
|
@@ -662,15 +1896,17 @@
|
|
|
662
1896
|
|
|
663
1897
|
<tr>
|
|
664
1898
|
<th scope="row">
|
|
665
|
-
<code>
|
|
1899
|
+
<code>primary-xxxs-line-height-desktop</code>
|
|
666
1900
|
</th>
|
|
667
1901
|
<td>
|
|
668
|
-
<code>
|
|
1902
|
+
<code>23px</code>
|
|
669
1903
|
</td>
|
|
670
1904
|
|
|
671
1905
|
<td>
|
|
672
|
-
<div style="
|
|
673
|
-
|
|
1906
|
+
<div class="line-height-example" style="line-height: 23px; background-size: 100% 23px;">
|
|
1907
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1908
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1909
|
+
id feugiat at, venenatis quis erat.
|
|
674
1910
|
</div>
|
|
675
1911
|
</td>
|
|
676
1912
|
|
|
@@ -679,15 +1915,17 @@
|
|
|
679
1915
|
|
|
680
1916
|
<tr>
|
|
681
1917
|
<th scope="row">
|
|
682
|
-
<code>
|
|
1918
|
+
<code>primary-xs-line-height-desktop</code>
|
|
683
1919
|
</th>
|
|
684
1920
|
<td>
|
|
685
|
-
<code>
|
|
1921
|
+
<code>29px</code>
|
|
686
1922
|
</td>
|
|
687
1923
|
|
|
688
1924
|
<td>
|
|
689
|
-
<div style="
|
|
690
|
-
|
|
1925
|
+
<div class="line-height-example" style="line-height: 29px; background-size: 100% 29px;">
|
|
1926
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1927
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1928
|
+
id feugiat at, venenatis quis erat.
|
|
691
1929
|
</div>
|
|
692
1930
|
</td>
|
|
693
1931
|
|
|
@@ -696,15 +1934,17 @@
|
|
|
696
1934
|
|
|
697
1935
|
<tr>
|
|
698
1936
|
<th scope="row">
|
|
699
|
-
<code>
|
|
1937
|
+
<code>accent-m-line-height-desktop</code>
|
|
700
1938
|
</th>
|
|
701
1939
|
<td>
|
|
702
|
-
<code>
|
|
1940
|
+
<code>initial</code>
|
|
703
1941
|
</td>
|
|
704
1942
|
|
|
705
1943
|
<td>
|
|
706
|
-
<div style="
|
|
707
|
-
|
|
1944
|
+
<div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
|
|
1945
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1946
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1947
|
+
id feugiat at, venenatis quis erat.
|
|
708
1948
|
</div>
|
|
709
1949
|
</td>
|
|
710
1950
|
|
|
@@ -713,15 +1953,17 @@
|
|
|
713
1953
|
|
|
714
1954
|
<tr>
|
|
715
1955
|
<th scope="row">
|
|
716
|
-
<code>
|
|
1956
|
+
<code>accent-regular-xxs-line-height-desktop</code>
|
|
717
1957
|
</th>
|
|
718
1958
|
<td>
|
|
719
|
-
<code>
|
|
1959
|
+
<code>26px</code>
|
|
720
1960
|
</td>
|
|
721
1961
|
|
|
722
1962
|
<td>
|
|
723
|
-
<div style="
|
|
724
|
-
|
|
1963
|
+
<div class="line-height-example" style="line-height: 26px; background-size: 100% 26px;">
|
|
1964
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1965
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1966
|
+
id feugiat at, venenatis quis erat.
|
|
725
1967
|
</div>
|
|
726
1968
|
</td>
|
|
727
1969
|
|
|
@@ -730,15 +1972,17 @@
|
|
|
730
1972
|
|
|
731
1973
|
<tr>
|
|
732
1974
|
<th scope="row">
|
|
733
|
-
<code>
|
|
1975
|
+
<code>secondary-m-line-height-mobile</code>
|
|
734
1976
|
</th>
|
|
735
1977
|
<td>
|
|
736
|
-
<code>
|
|
1978
|
+
<code>21px</code>
|
|
737
1979
|
</td>
|
|
738
1980
|
|
|
739
1981
|
<td>
|
|
740
|
-
<div style="
|
|
741
|
-
|
|
1982
|
+
<div class="line-height-example" style="line-height: 21px; background-size: 100% 21px;">
|
|
1983
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1984
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1985
|
+
id feugiat at, venenatis quis erat.
|
|
742
1986
|
</div>
|
|
743
1987
|
</td>
|
|
744
1988
|
|
|
@@ -747,15 +1991,17 @@
|
|
|
747
1991
|
|
|
748
1992
|
<tr>
|
|
749
1993
|
<th scope="row">
|
|
750
|
-
<code>
|
|
1994
|
+
<code>secondary-l-line-height-mobile</code>
|
|
751
1995
|
</th>
|
|
752
1996
|
<td>
|
|
753
|
-
<code>
|
|
1997
|
+
<code>21px</code>
|
|
754
1998
|
</td>
|
|
755
1999
|
|
|
756
2000
|
<td>
|
|
757
|
-
<div style="
|
|
758
|
-
|
|
2001
|
+
<div class="line-height-example" style="line-height: 21px; background-size: 100% 21px;">
|
|
2002
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
2003
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
2004
|
+
id feugiat at, venenatis quis erat.
|
|
759
2005
|
</div>
|
|
760
2006
|
</td>
|
|
761
2007
|
|
|
@@ -764,15 +2010,17 @@
|
|
|
764
2010
|
|
|
765
2011
|
<tr>
|
|
766
2012
|
<th scope="row">
|
|
767
|
-
<code>
|
|
2013
|
+
<code>accent-s-line-height-desktop</code>
|
|
768
2014
|
</th>
|
|
769
2015
|
<td>
|
|
770
|
-
<code>
|
|
2016
|
+
<code>initial</code>
|
|
771
2017
|
</td>
|
|
772
2018
|
|
|
773
2019
|
<td>
|
|
774
|
-
<div style="
|
|
775
|
-
|
|
2020
|
+
<div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
|
|
2021
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
2022
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
2023
|
+
id feugiat at, venenatis quis erat.
|
|
776
2024
|
</div>
|
|
777
2025
|
</td>
|
|
778
2026
|
|
|
@@ -781,49 +2029,33 @@
|
|
|
781
2029
|
|
|
782
2030
|
<tr>
|
|
783
2031
|
<th scope="row">
|
|
784
|
-
<code>
|
|
2032
|
+
<code>accent-xxs-line-height-desktop</code>
|
|
785
2033
|
</th>
|
|
786
2034
|
<td>
|
|
787
|
-
<code>
|
|
2035
|
+
<code>18px</code>
|
|
788
2036
|
</td>
|
|
789
2037
|
|
|
790
2038
|
<td>
|
|
791
|
-
<div style="
|
|
792
|
-
|
|
2039
|
+
<div class="line-height-example" style="line-height: 18px; background-size: 100% 18px;">
|
|
2040
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
2041
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
2042
|
+
id feugiat at, venenatis quis erat.
|
|
793
2043
|
</div>
|
|
794
2044
|
</td>
|
|
795
2045
|
|
|
796
2046
|
<td></td>
|
|
797
2047
|
</tr>
|
|
798
|
-
</tbody>
|
|
799
|
-
</table>
|
|
800
|
-
<hr />
|
|
801
|
-
</section>
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
<section>
|
|
805
|
-
<table>
|
|
806
|
-
|
|
807
|
-
<thead>
|
|
808
|
-
<tr id=line-height>
|
|
809
|
-
<th scope="col">Line Heights</th>
|
|
810
|
-
<th scope="col">Value</th>
|
|
811
|
-
<th scope="col">Examples</th>
|
|
812
|
-
<th scope="col">Usage</th>
|
|
813
|
-
</tr>
|
|
814
|
-
</thead>
|
|
815
2048
|
|
|
816
|
-
|
|
817
|
-
<tr>
|
|
2049
|
+
<tr>
|
|
818
2050
|
<th scope="row">
|
|
819
|
-
<code>line-height-
|
|
2051
|
+
<code>secondary-regular-m-line-height-mobile</code>
|
|
820
2052
|
</th>
|
|
821
2053
|
<td>
|
|
822
|
-
<code>
|
|
2054
|
+
<code>21px</code>
|
|
823
2055
|
</td>
|
|
824
2056
|
|
|
825
2057
|
<td>
|
|
826
|
-
<div class="line-height-example" style="line-height:
|
|
2058
|
+
<div class="line-height-example" style="line-height: 21px; background-size: 100% 21px;">
|
|
827
2059
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
828
2060
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
829
2061
|
id feugiat at, venenatis quis erat.
|
|
@@ -835,14 +2067,14 @@
|
|
|
835
2067
|
|
|
836
2068
|
<tr>
|
|
837
2069
|
<th scope="row">
|
|
838
|
-
<code>line-height-
|
|
2070
|
+
<code>secondary-regular-m-line-height-desktop</code>
|
|
839
2071
|
</th>
|
|
840
2072
|
<td>
|
|
841
|
-
<code>
|
|
2073
|
+
<code>initial</code>
|
|
842
2074
|
</td>
|
|
843
2075
|
|
|
844
2076
|
<td>
|
|
845
|
-
<div class="line-height-example" style="line-height:
|
|
2077
|
+
<div class="line-height-example" style="line-height: initial; background-size: 100% initial;">
|
|
846
2078
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
847
2079
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
848
2080
|
id feugiat at, venenatis quis erat.
|
|
@@ -854,14 +2086,14 @@
|
|
|
854
2086
|
|
|
855
2087
|
<tr>
|
|
856
2088
|
<th scope="row">
|
|
857
|
-
<code>line-height-
|
|
2089
|
+
<code>accent-s-line-height-mobile</code>
|
|
858
2090
|
</th>
|
|
859
2091
|
<td>
|
|
860
|
-
<code>
|
|
2092
|
+
<code>23px</code>
|
|
861
2093
|
</td>
|
|
862
2094
|
|
|
863
2095
|
<td>
|
|
864
|
-
<div class="line-height-example" style="line-height:
|
|
2096
|
+
<div class="line-height-example" style="line-height: 23px; background-size: 100% 23px;">
|
|
865
2097
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
866
2098
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
867
2099
|
id feugiat at, venenatis quis erat.
|
|
@@ -873,14 +2105,14 @@
|
|
|
873
2105
|
|
|
874
2106
|
<tr>
|
|
875
2107
|
<th scope="row">
|
|
876
|
-
<code>line-height-
|
|
2108
|
+
<code>accent-xxs-line-height-mobile</code>
|
|
877
2109
|
</th>
|
|
878
2110
|
<td>
|
|
879
|
-
<code>
|
|
2111
|
+
<code>0.4px</code>
|
|
880
2112
|
</td>
|
|
881
2113
|
|
|
882
2114
|
<td>
|
|
883
|
-
<div class="line-height-example" style="line-height:
|
|
2115
|
+
<div class="line-height-example" style="line-height: 0.4px; background-size: 100% 0.4px;">
|
|
884
2116
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
885
2117
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
886
2118
|
id feugiat at, venenatis quis erat.
|
|
@@ -892,7 +2124,7 @@
|
|
|
892
2124
|
|
|
893
2125
|
<tr>
|
|
894
2126
|
<th scope="row">
|
|
895
|
-
<code>
|
|
2127
|
+
<code>secondary-l-line-height-desktop</code>
|
|
896
2128
|
</th>
|
|
897
2129
|
<td>
|
|
898
2130
|
<code>initial</code>
|
|
@@ -911,7 +2143,7 @@
|
|
|
911
2143
|
|
|
912
2144
|
<tr>
|
|
913
2145
|
<th scope="row">
|
|
914
|
-
<code>
|
|
2146
|
+
<code>secondary-m-line-height-desktop</code>
|
|
915
2147
|
</th>
|
|
916
2148
|
<td>
|
|
917
2149
|
<code>initial</code>
|
|
@@ -930,14 +2162,14 @@
|
|
|
930
2162
|
|
|
931
2163
|
<tr>
|
|
932
2164
|
<th scope="row">
|
|
933
|
-
<code>
|
|
2165
|
+
<code>accent-regular-xxs-line-height-mobile</code>
|
|
934
2166
|
</th>
|
|
935
2167
|
<td>
|
|
936
|
-
<code>
|
|
2168
|
+
<code>14px</code>
|
|
937
2169
|
</td>
|
|
938
2170
|
|
|
939
2171
|
<td>
|
|
940
|
-
<div class="line-height-example" style="line-height:
|
|
2172
|
+
<div class="line-height-example" style="line-height: 14px; background-size: 100% 14px;">
|
|
941
2173
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
942
2174
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
943
2175
|
id feugiat at, venenatis quis erat.
|
|
@@ -949,7 +2181,7 @@
|
|
|
949
2181
|
|
|
950
2182
|
<tr>
|
|
951
2183
|
<th scope="row">
|
|
952
|
-
<code>
|
|
2184
|
+
<code>primary-xs-line-height-mobile</code>
|
|
953
2185
|
</th>
|
|
954
2186
|
<td>
|
|
955
2187
|
<code>21px</code>
|
|
@@ -968,7 +2200,7 @@
|
|
|
968
2200
|
|
|
969
2201
|
<tr>
|
|
970
2202
|
<th scope="row">
|
|
971
|
-
<code>
|
|
2203
|
+
<code>primary-xxxs-line-height-mobile</code>
|
|
972
2204
|
</th>
|
|
973
2205
|
<td>
|
|
974
2206
|
<code>21px</code>
|
|
@@ -987,14 +2219,14 @@
|
|
|
987
2219
|
|
|
988
2220
|
<tr>
|
|
989
2221
|
<th scope="row">
|
|
990
|
-
<code>
|
|
2222
|
+
<code>accent-m-line-height-mobile</code>
|
|
991
2223
|
</th>
|
|
992
2224
|
<td>
|
|
993
|
-
<code>
|
|
2225
|
+
<code>42px</code>
|
|
994
2226
|
</td>
|
|
995
2227
|
|
|
996
2228
|
<td>
|
|
997
|
-
<div class="line-height-example" style="line-height:
|
|
2229
|
+
<div class="line-height-example" style="line-height: 42px; background-size: 100% 42px;">
|
|
998
2230
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
999
2231
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1000
2232
|
id feugiat at, venenatis quis erat.
|
|
@@ -1006,14 +2238,14 @@
|
|
|
1006
2238
|
|
|
1007
2239
|
<tr>
|
|
1008
2240
|
<th scope="row">
|
|
1009
|
-
<code>
|
|
2241
|
+
<code>accent-l-line-height-mobile</code>
|
|
1010
2242
|
</th>
|
|
1011
2243
|
<td>
|
|
1012
|
-
<code>
|
|
2244
|
+
<code>36px</code>
|
|
1013
2245
|
</td>
|
|
1014
2246
|
|
|
1015
2247
|
<td>
|
|
1016
|
-
<div class="line-height-example" style="line-height:
|
|
2248
|
+
<div class="line-height-example" style="line-height: 36px; background-size: 100% 36px;">
|
|
1017
2249
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1018
2250
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1019
2251
|
id feugiat at, venenatis quis erat.
|
|
@@ -1025,7 +2257,7 @@
|
|
|
1025
2257
|
|
|
1026
2258
|
<tr>
|
|
1027
2259
|
<th scope="row">
|
|
1028
|
-
<code>secondary-
|
|
2260
|
+
<code>secondary-s-line-height-desktop</code>
|
|
1029
2261
|
</th>
|
|
1030
2262
|
<td>
|
|
1031
2263
|
<code>initial</code>
|
|
@@ -1044,14 +2276,14 @@
|
|
|
1044
2276
|
|
|
1045
2277
|
<tr>
|
|
1046
2278
|
<th scope="row">
|
|
1047
|
-
<code>
|
|
2279
|
+
<code>primary-xxs-line-height-mobile</code>
|
|
1048
2280
|
</th>
|
|
1049
2281
|
<td>
|
|
1050
|
-
<code>
|
|
2282
|
+
<code>23px</code>
|
|
1051
2283
|
</td>
|
|
1052
2284
|
|
|
1053
2285
|
<td>
|
|
1054
|
-
<div class="line-height-example" style="line-height:
|
|
2286
|
+
<div class="line-height-example" style="line-height: 23px; background-size: 100% 23px;">
|
|
1055
2287
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1056
2288
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1057
2289
|
id feugiat at, venenatis quis erat.
|
|
@@ -1063,14 +2295,14 @@
|
|
|
1063
2295
|
|
|
1064
2296
|
<tr>
|
|
1065
2297
|
<th scope="row">
|
|
1066
|
-
<code>
|
|
2298
|
+
<code>primary-s-line-height-mobile</code>
|
|
1067
2299
|
</th>
|
|
1068
2300
|
<td>
|
|
1069
|
-
<code>
|
|
2301
|
+
<code>24px</code>
|
|
1070
2302
|
</td>
|
|
1071
2303
|
|
|
1072
2304
|
<td>
|
|
1073
|
-
<div class="line-height-example" style="line-height:
|
|
2305
|
+
<div class="line-height-example" style="line-height: 24px; background-size: 100% 24px;">
|
|
1074
2306
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1075
2307
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1076
2308
|
id feugiat at, venenatis quis erat.
|
|
@@ -1082,14 +2314,14 @@
|
|
|
1082
2314
|
|
|
1083
2315
|
<tr>
|
|
1084
2316
|
<th scope="row">
|
|
1085
|
-
<code>
|
|
2317
|
+
<code>body-s-line-height-mobile</code>
|
|
1086
2318
|
</th>
|
|
1087
2319
|
<td>
|
|
1088
|
-
<code>
|
|
2320
|
+
<code>22px</code>
|
|
1089
2321
|
</td>
|
|
1090
2322
|
|
|
1091
2323
|
<td>
|
|
1092
|
-
<div class="line-height-example" style="line-height:
|
|
2324
|
+
<div class="line-height-example" style="line-height: 22px; background-size: 100% 22px;">
|
|
1093
2325
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
1094
2326
|
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
1095
2327
|
id feugiat at, venenatis quis erat.
|
|
@@ -1137,6 +2369,44 @@
|
|
|
1137
2369
|
<td></td>
|
|
1138
2370
|
</tr>
|
|
1139
2371
|
|
|
2372
|
+
<tr>
|
|
2373
|
+
<th scope="row">
|
|
2374
|
+
<code>body-m-line-height-mobile</code>
|
|
2375
|
+
</th>
|
|
2376
|
+
<td>
|
|
2377
|
+
<code>24px</code>
|
|
2378
|
+
</td>
|
|
2379
|
+
|
|
2380
|
+
<td>
|
|
2381
|
+
<div class="line-height-example" style="line-height: 24px; background-size: 100% 24px;">
|
|
2382
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
2383
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
2384
|
+
id feugiat at, venenatis quis erat.
|
|
2385
|
+
</div>
|
|
2386
|
+
</td>
|
|
2387
|
+
|
|
2388
|
+
<td></td>
|
|
2389
|
+
</tr>
|
|
2390
|
+
|
|
2391
|
+
<tr>
|
|
2392
|
+
<th scope="row">
|
|
2393
|
+
<code>accent-xs-line-height-mobile</code>
|
|
2394
|
+
</th>
|
|
2395
|
+
<td>
|
|
2396
|
+
<code>19px</code>
|
|
2397
|
+
</td>
|
|
2398
|
+
|
|
2399
|
+
<td>
|
|
2400
|
+
<div class="line-height-example" style="line-height: 19px; background-size: 100% 19px;">
|
|
2401
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
2402
|
+
elementum odio et lacus rutrum molestie. Nunc arcu enim, elementum
|
|
2403
|
+
id feugiat at, venenatis quis erat.
|
|
2404
|
+
</div>
|
|
2405
|
+
</td>
|
|
2406
|
+
|
|
2407
|
+
<td></td>
|
|
2408
|
+
</tr>
|
|
2409
|
+
|
|
1140
2410
|
<tr>
|
|
1141
2411
|
<th scope="row">
|
|
1142
2412
|
<code>primary-l-line-height-desktop</code>
|
|
@@ -1297,14 +2567,14 @@
|
|
|
1297
2567
|
|
|
1298
2568
|
<tr>
|
|
1299
2569
|
<th scope="row">
|
|
1300
|
-
<code>font-family-
|
|
2570
|
+
<code>font-family-accent</code>
|
|
1301
2571
|
</th>
|
|
1302
2572
|
<td>
|
|
1303
|
-
<code>
|
|
2573
|
+
<code>Helvetica, sans-serif</code>
|
|
1304
2574
|
</td>
|
|
1305
2575
|
|
|
1306
2576
|
<td>
|
|
1307
|
-
<div style="font-family:
|
|
2577
|
+
<div style="font-family: Helvetica, sans-serif;">
|
|
1308
2578
|
The quick brown fox jumps over the lazy dog.
|
|
1309
2579
|
</div>
|
|
1310
2580
|
</td>
|
|
@@ -1314,14 +2584,14 @@
|
|
|
1314
2584
|
|
|
1315
2585
|
<tr>
|
|
1316
2586
|
<th scope="row">
|
|
1317
|
-
<code>font-family-accent</code>
|
|
2587
|
+
<code>font-family-accent-fancy</code>
|
|
1318
2588
|
</th>
|
|
1319
2589
|
<td>
|
|
1320
|
-
<code>
|
|
2590
|
+
<code>'Graphik XX Cond', sans-serif</code>
|
|
1321
2591
|
</td>
|
|
1322
2592
|
|
|
1323
2593
|
<td>
|
|
1324
|
-
<div style="font-family:
|
|
2594
|
+
<div style="font-family: 'Graphik XX Cond', sans-serif;">
|
|
1325
2595
|
The quick brown fox jumps over the lazy dog.
|
|
1326
2596
|
</div>
|
|
1327
2597
|
</td>
|
|
@@ -1331,14 +2601,14 @@
|
|
|
1331
2601
|
|
|
1332
2602
|
<tr>
|
|
1333
2603
|
<th scope="row">
|
|
1334
|
-
<code>font-family-
|
|
2604
|
+
<code>font-family-basic-fancy</code>
|
|
1335
2605
|
</th>
|
|
1336
2606
|
<td>
|
|
1337
|
-
<code>'IBM Plex
|
|
2607
|
+
<code>'IBM Plex Mono', monospace</code>
|
|
1338
2608
|
</td>
|
|
1339
2609
|
|
|
1340
2610
|
<td>
|
|
1341
|
-
<div style="font-family: 'IBM Plex
|
|
2611
|
+
<div style="font-family: 'IBM Plex Mono', monospace;">
|
|
1342
2612
|
The quick brown fox jumps over the lazy dog.
|
|
1343
2613
|
</div>
|
|
1344
2614
|
</td>
|
|
@@ -1348,14 +2618,14 @@
|
|
|
1348
2618
|
|
|
1349
2619
|
<tr>
|
|
1350
2620
|
<th scope="row">
|
|
1351
|
-
<code>font-family-
|
|
2621
|
+
<code>font-family-body-fancy</code>
|
|
1352
2622
|
</th>
|
|
1353
2623
|
<td>
|
|
1354
|
-
<code>'
|
|
2624
|
+
<code>'IBM Plex Serif', serif</code>
|
|
1355
2625
|
</td>
|
|
1356
2626
|
|
|
1357
2627
|
<td>
|
|
1358
|
-
<div style="font-family: '
|
|
2628
|
+
<div style="font-family: 'IBM Plex Serif', serif;">
|
|
1359
2629
|
The quick brown fox jumps over the lazy dog.
|
|
1360
2630
|
</div>
|
|
1361
2631
|
</td>
|
|
@@ -1450,11 +2720,11 @@
|
|
|
1450
2720
|
<code>border-color-brand-secondary-dark</code>
|
|
1451
2721
|
</th>
|
|
1452
2722
|
<td>
|
|
1453
|
-
<code>rgb(
|
|
2723
|
+
<code>rgb(36, 56, 66)</code>
|
|
1454
2724
|
</td>
|
|
1455
2725
|
|
|
1456
2726
|
<td>
|
|
1457
|
-
<hr style="border-top-color: rgb(
|
|
2727
|
+
<hr style="border-top-color: rgb(36, 56, 66);" />
|
|
1458
2728
|
</td>
|
|
1459
2729
|
|
|
1460
2730
|
<td></td>
|
|
@@ -1495,11 +2765,11 @@
|
|
|
1495
2765
|
<code>border-color-brand-primary-light</code>
|
|
1496
2766
|
</th>
|
|
1497
2767
|
<td>
|
|
1498
|
-
<code>rgb(
|
|
2768
|
+
<code>rgb(243, 245, 203)</code>
|
|
1499
2769
|
</td>
|
|
1500
2770
|
|
|
1501
2771
|
<td>
|
|
1502
|
-
<hr style="border-top-color: rgb(
|
|
2772
|
+
<hr style="border-top-color: rgb(243, 245, 203);" />
|
|
1503
2773
|
</td>
|
|
1504
2774
|
|
|
1505
2775
|
<td></td>
|