@bonniernews/dn-design-system-web 11.4.0-beta.2 → 11.4.0-beta.4

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 (13) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/components/badge/badge.scss +2 -2
  3. package/components/teaser-image/teaser-image.scss +2 -2
  4. package/components/teaser-split/teaser-split.scss +1 -1
  5. package/components/teaser-standard/teaser-standard.scss +15 -1
  6. package/components/text-button/text-button.scss +1 -0
  7. package/foundations/helpers/typography.scss +8 -8
  8. package/foundations/typography/README.md +2 -2
  9. package/foundations/variables/typographyAddons.scss +1 -1
  10. package/foundations/variables/typographyTokensScreenExtraLarge.scss +114 -65
  11. package/foundations/variables/typographyTokensScreenLarge.scss +114 -65
  12. package/foundations/variables/typographyTokensScreenSmall.scss +74 -50
  13. package/package.json +1 -1
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -3,36 +3,36 @@ $typographyTokensScreenLarge: (
3
3
  fontFamily: "DN Serif Text",
4
4
  fontWeight: Regular,
5
5
  fontSize: 16,
6
- lineHeight: 1.25
6
+ lineHeight: 1.2
7
7
  ),
8
8
  expressive-heading01semibold: (
9
9
  fontFamily: "DN Serif Text",
10
10
  fontWeight: SemiBold,
11
11
  fontSize: 16,
12
- lineHeight: 1.25
12
+ lineHeight: 1.2
13
13
  ),
14
14
  expressive-heading01bold: (
15
15
  fontFamily: "DN Serif Text",
16
16
  fontWeight: Bold,
17
17
  fontSize: 16,
18
- lineHeight: 1.25
18
+ lineHeight: 1.2
19
19
  ),
20
20
  expressive-heading01italicregular: (
21
- lineHeight: 1.25,
21
+ lineHeight: 1.2,
22
22
  fontSize: 16,
23
23
  fontFamily: "DN Serif Text",
24
24
  fontWeight: Medium,
25
25
  fontStyle: italic
26
26
  ),
27
27
  expressive-heading01italicsemibold: (
28
- lineHeight: 1.25,
28
+ lineHeight: 1.2,
29
29
  fontSize: 16,
30
30
  fontFamily: "DN Serif Text",
31
31
  fontWeight: SemiBold,
32
32
  fontStyle: italic
33
33
  ),
34
34
  expressive-heading01italicbold: (
35
- lineHeight: 1.25,
35
+ lineHeight: 1.2,
36
36
  fontSize: 16,
37
37
  fontFamily: "DN Serif Text",
38
38
  fontWeight: Bold,
@@ -42,38 +42,38 @@ $typographyTokensScreenLarge: (
42
42
  fontFamily: "DN Serif Headline",
43
43
  fontWeight: Regular,
44
44
  fontSize: 22,
45
- lineHeight: 1.25,
45
+ lineHeight: 1.2,
46
46
  paragraphSpacing: 16
47
47
  ),
48
48
  expressive-heading02semibold: (
49
49
  fontFamily: "DN Serif Headline",
50
50
  fontWeight: SemiBold,
51
51
  fontSize: 22,
52
- lineHeight: 1.25
52
+ lineHeight: 1.2
53
53
  ),
54
54
  expressive-heading02bold: (
55
55
  fontFamily: "DN Serif Headline",
56
56
  fontWeight: Bold,
57
57
  fontSize: 22,
58
- lineHeight: 1.25
58
+ lineHeight: 1.2
59
59
  ),
60
60
  expressive-heading02italicregular: (
61
61
  fontSize: 22,
62
- lineHeight: 1.25,
62
+ lineHeight: 1.2,
63
63
  fontWeight: Regular,
64
64
  fontFamily: "DN Serif Headline",
65
65
  fontStyle: italic
66
66
  ),
67
67
  expressive-heading02italicsemibold: (
68
68
  fontSize: 22,
69
- lineHeight: 1.25,
69
+ lineHeight: 1.2,
70
70
  fontWeight: SemiBold,
71
71
  fontFamily: "DN Serif Headline",
72
72
  fontStyle: italic
73
73
  ),
74
74
  expressive-heading02italicbold: (
75
75
  fontSize: 22,
76
- lineHeight: 1.25,
76
+ lineHeight: 1.2,
77
77
  fontWeight: Bold,
78
78
  fontFamily: "DN Serif Headline",
79
79
  fontStyle: italic
@@ -198,38 +198,38 @@ $typographyTokensScreenLarge: (
198
198
  functional-heading03regular: (
199
199
  fontFamily: "DN Sans",
200
200
  fontWeight: Regular,
201
- lineHeight: 1.25,
201
+ lineHeight: 1.2,
202
202
  fontSize: 24
203
203
  ),
204
204
  functional-heading03semibold: (
205
205
  fontFamily: "DN Sans",
206
206
  fontWeight: SemiBold,
207
- lineHeight: 1.25,
207
+ lineHeight: 1.2,
208
208
  fontSize: 24
209
209
  ),
210
210
  functional-heading03bold: (
211
211
  fontFamily: "DN Sans",
212
212
  fontWeight: Bold,
213
- lineHeight: 1.25,
213
+ lineHeight: 1.2,
214
214
  fontSize: 24
215
215
  ),
216
216
  functional-heading01regular: (
217
217
  fontFamily: "DN Sans",
218
218
  fontWeight: Regular,
219
219
  fontSize: 16,
220
- lineHeight: 1.25
220
+ lineHeight: 1.2
221
221
  ),
222
222
  functional-heading01semibold: (
223
223
  fontFamily: "DN Sans",
224
224
  fontWeight: SemiBold,
225
225
  fontSize: 16,
226
- lineHeight: 1.25
226
+ lineHeight: 1.2
227
227
  ),
228
228
  functional-heading01bold: (
229
229
  fontFamily: "DN Sans",
230
230
  fontWeight: Bold,
231
231
  fontSize: 16,
232
- lineHeight: 1.25
232
+ lineHeight: 1.2
233
233
  ),
234
234
  functional-heading02regular: (
235
235
  fontFamily: "DN Sans",
@@ -406,88 +406,102 @@ $typographyTokensScreenLarge: (
406
406
  fontFamily: "DN Serif Display",
407
407
  fontWeight: Bold,
408
408
  lineHeight: 1,
409
- fontSize: 92
409
+ fontSize: 92,
410
+ letterSpacing: 0
410
411
  ),
411
412
  detailarticle-standard: (
412
413
  fontFamily: "DN Serif Display",
413
414
  fontWeight: Bold,
414
415
  lineHeight: 1.1,
415
- fontSize: 40
416
+ fontSize: 40,
417
+ letterSpacing: 0
416
418
  ),
417
419
  detailarticle-opinion: (
418
420
  fontFamily: "DN Serif Display",
419
421
  fontWeight: Regular,
420
422
  lineHeight: 1.1,
421
423
  fontSize: 40,
424
+ letterSpacing: 0,
422
425
  fontStyle: italic
423
426
  ),
424
427
  detailarticle-longread: (
425
428
  fontFamily: "DN Serif Display",
426
429
  fontWeight: Regular,
427
430
  lineHeight: 1.1,
428
- fontSize: 48
431
+ fontSize: 48,
432
+ letterSpacing: 0
429
433
  ),
430
434
  detailarticle-longread-premium: (
431
435
  fontFamily: "DN Serif Display",
432
436
  fontWeight: Bold,
433
437
  lineHeight: 1.1,
434
- fontSize: 48
438
+ fontSize: 48,
439
+ letterSpacing: 0
435
440
  ),
436
441
  detailarticle-quote: (
437
442
  fontFamily: "DN Serif Display",
438
443
  fontWeight: Bold,
439
- lineHeight: 1.1,
440
- fontSize: 28
444
+ lineHeight: 1.2,
445
+ fontSize: 28,
446
+ letterSpacing: 0
441
447
  ),
442
448
  detailmellanrubrik: (
443
449
  fontFamily: "DN Serif Display",
444
450
  fontWeight: Bold,
445
451
  lineHeight: 1.1,
446
- fontSize: 32
452
+ fontSize: 32,
453
+ letterSpacing: 0
447
454
  ),
448
455
  detailarticle-direkt: (
449
456
  fontFamily: "DN Serif Headline",
450
457
  fontWeight: Bold,
451
458
  lineHeight: 1.1,
452
- fontSize: 26
459
+ fontSize: 26,
460
+ letterSpacing: 0
453
461
  ),
454
462
  detailarticle-direkt-opinion: (
455
463
  fontFamily: "DN Serif Headline",
456
464
  fontWeight: Regular,
457
465
  lineHeight: 1.1,
458
466
  fontSize: 26,
467
+ letterSpacing: 0,
459
468
  fontStyle: italic
460
469
  ),
461
470
  detaildirekt-header: (
462
471
  fontFamily: "DN Serif Display",
463
472
  fontWeight: Regular,
464
473
  lineHeight: 1.1,
465
- fontSize: 48
474
+ fontSize: 48,
475
+ letterSpacing: 0
466
476
  ),
467
477
  detailteaser-standard-compact: (
468
478
  fontFamily: "DN Serif Headline",
469
479
  fontWeight: Bold,
470
480
  lineHeight: 1.1,
471
- fontSize: 24
481
+ fontSize: 24,
482
+ letterSpacing: 0
472
483
  ),
473
484
  detailteaser-standard-compact-opinion: (
474
485
  fontFamily: "DN Serif Headline",
475
486
  fontWeight: Regular,
476
- lineHeight: 1.25,
487
+ lineHeight: 1.2,
477
488
  fontSize: 24,
489
+ letterSpacing: 0,
478
490
  fontStyle: italic
479
491
  ),
480
492
  detailteaser-large: (
481
493
  fontFamily: "DN Serif Display",
482
494
  fontWeight: Bold,
483
495
  lineHeight: 1.1,
484
- fontSize: 56
496
+ fontSize: 56,
497
+ letterSpacing: 0
485
498
  ),
486
499
  detailteaser-large-opinion: (
487
500
  fontFamily: "DN Serif Display",
488
501
  fontWeight: Regular,
489
502
  lineHeight: 1.1,
490
503
  fontSize: 36,
504
+ letterSpacing: 0,
491
505
  fontStyle: italic
492
506
  ),
493
507
  detailteaser-large-storRubrik: (
@@ -495,45 +509,52 @@ $typographyTokensScreenLarge: (
495
509
  fontWeight: Regular,
496
510
  lineHeight: 1.1,
497
511
  fontSize: 56,
512
+ letterSpacing: 0,
498
513
  fontStyle: italic
499
514
  ),
500
515
  detailteaser-standard: (
501
516
  fontFamily: "DN Serif Headline",
502
517
  fontWeight: Bold,
503
518
  lineHeight: 1.1,
504
- fontSize: 36
519
+ fontSize: 36,
520
+ letterSpacing: 0
505
521
  ),
506
522
  detailteaser-standard-opinion: (
507
523
  fontFamily: "DN Serif Display",
508
524
  fontWeight: Regular,
509
525
  lineHeight: 1.1,
510
526
  fontSize: 36,
527
+ letterSpacing: 0,
511
528
  fontStyle: italic
512
529
  ),
513
530
  detailteaser-twin: (
514
531
  fontFamily: "DN Serif Headline",
515
532
  fontWeight: Bold,
516
- lineHeight: 1.25,
517
- fontSize: 22
533
+ lineHeight: 1.2,
534
+ fontSize: 22,
535
+ letterSpacing: 0
518
536
  ),
519
537
  detailteaser-large-compact: (
520
538
  fontFamily: "DN Serif Display",
521
539
  fontWeight: Bold,
522
540
  fontSize: 40,
523
- lineHeight: 1.1
541
+ lineHeight: 1.1,
542
+ letterSpacing: 0
524
543
  ),
525
544
  detailteaser-large-compact-opinion: (
526
545
  fontFamily: "DN Serif Headline",
527
546
  fontWeight: Regular,
528
547
  fontSize: 24,
529
- lineHeight: 1.25,
548
+ lineHeight: 1.2,
549
+ letterSpacing: 0,
530
550
  fontStyle: italic
531
551
  ),
532
552
  detailstandard-button: (
533
553
  fontFamily: "DN Sans",
534
554
  fontWeight: SemiBold,
535
555
  lineHeight: 1.5,
536
- fontSize: 16
556
+ fontSize: 16,
557
+ letterSpacing: 0
537
558
  ),
538
559
  detailbottom-nav: (
539
560
  fontFamily: "DN Sans",
@@ -546,7 +567,8 @@ $typographyTokensScreenLarge: (
546
567
  fontFamily: "DN Sans",
547
568
  fontWeight: SemiBold,
548
569
  lineHeight: 1.5,
549
- fontSize: 14
570
+ fontSize: 14,
571
+ letterSpacing: 0
550
572
  ),
551
573
  detailarticle-label: (
552
574
  fontFamily: "DN Sans",
@@ -560,7 +582,8 @@ $typographyTokensScreenLarge: (
560
582
  fontFamily: "DN Serif Text",
561
583
  fontWeight: Regular,
562
584
  fontSize: 16,
563
- lineHeight: 1.38
585
+ lineHeight: 1.38,
586
+ letterSpacing: 0
564
587
  ),
565
588
  detailbaota-xl-label: (
566
589
  fontFamily: "DN Sans",
@@ -568,163 +591,189 @@ $typographyTokensScreenLarge: (
568
591
  lineHeight: 1.5,
569
592
  fontSize: 16,
570
593
  textCase: upperCase,
571
- letterSpacing: 0.7
594
+ letterSpacing: 0.5
572
595
  ),
573
596
  expressiveheading01: (
574
597
  fontFamily: "DN Serif Text",
575
598
  fontWeight: Bold,
576
599
  fontSize: 16,
577
- lineHeight: 1.1
600
+ lineHeight: 1.1,
601
+ letterSpacing: 0
578
602
  ),
579
603
  expressiveheading02: (
580
604
  fontFamily: "DN Serif Headline",
581
605
  fontWeight: Bold,
582
606
  fontSize: 24,
583
- lineHeight: 1.1
607
+ lineHeight: 1.1,
608
+ letterSpacing: 0
584
609
  ),
585
610
  expressiveheading03: (
586
611
  fontSize: 32,
587
612
  lineHeight: 1.1,
588
613
  fontFamily: "DN Serif Display",
589
- fontWeight: Bold
614
+ fontWeight: Bold,
615
+ letterSpacing: 0
590
616
  ),
591
617
  expressiveheading04: (
592
618
  fontFamily: "DN Serif Display",
593
619
  fontWeight: Bold,
594
620
  fontSize: 48,
595
- lineHeight: 1.1
621
+ lineHeight: 1.1,
622
+ letterSpacing: 0
596
623
  ),
597
624
  expressiveheading05: (
598
625
  fontFamily: "DN Serif Display",
599
626
  fontWeight: Bold,
600
627
  fontSize: 56,
601
- lineHeight: 1.1
628
+ lineHeight: 1.1,
629
+ letterSpacing: 0
602
630
  ),
603
631
  expressiveheading06: (
604
632
  fontFamily: "DN Serif Display",
605
633
  fontWeight: Bold,
606
634
  fontSize: 64,
607
- lineHeight: 1.1
635
+ lineHeight: 1.1,
636
+ letterSpacing: 0
608
637
  ),
609
638
  expressiveheading07: (
610
639
  fontFamily: "DN Serif Display",
611
640
  fontWeight: Bold,
612
641
  fontSize: 72,
613
- lineHeight: 1.1
642
+ lineHeight: 1.1,
643
+ letterSpacing: 0
614
644
  ),
615
645
  expressivebody01: (
616
646
  fontFamily: "DN Serif Text",
617
647
  fontWeight: Regular,
618
648
  fontSize: 14,
619
- lineHeight: 1.5
649
+ lineHeight: 1.5,
650
+ letterSpacing: 0
620
651
  ),
621
652
  expressivebody02: (
622
653
  fontFamily: "DN Serif Text",
623
654
  fontWeight: Regular,
624
655
  lineHeight: 1.5,
625
- fontSize: 16
656
+ fontSize: 16,
657
+ letterSpacing: 0
626
658
  ),
627
659
  expressivebody03: (
628
660
  fontFamily: "DN Serif Text",
629
661
  fontWeight: Regular,
630
662
  fontSize: 18,
631
- lineHeight: 1.5
663
+ lineHeight: 1.5,
664
+ letterSpacing: 0
632
665
  ),
633
666
  expressiveingress01: (
634
667
  fontFamily: "DN Serif Headline",
635
668
  fontWeight: Bold,
636
669
  fontSize: 20,
637
- lineHeight: 1.5
670
+ lineHeight: 1.5,
671
+ letterSpacing: 0
638
672
  ),
639
673
  expressiveingress02: (
640
674
  fontFamily: "DN Serif Headline",
641
675
  fontWeight: Bold,
642
676
  fontSize: 24,
643
- lineHeight: 1.5
677
+ lineHeight: 1.5,
678
+ letterSpacing: 0
644
679
  ),
645
680
  functionalmeta01: (
646
681
  fontFamily: "DN Sans",
647
682
  fontWeight: Regular,
648
683
  fontSize: 10,
649
- lineHeight: 1.1
684
+ lineHeight: 1.1,
685
+ letterSpacing: 0.2
650
686
  ),
651
687
  functionalmeta02: (
652
688
  fontFamily: "DN Sans",
653
689
  fontWeight: Regular,
654
690
  fontSize: 12,
655
- lineHeight: 1.1
691
+ lineHeight: 1.1,
692
+ letterSpacing: 0.2
656
693
  ),
657
694
  functionallabel01: (
658
695
  fontFamily: "DN Sans",
659
696
  fontWeight: Bold,
660
697
  fontSize: 12,
661
- lineHeight: 1.1
698
+ lineHeight: 1.1,
699
+ letterSpacing: 0.5
662
700
  ),
663
701
  functionallabel02: (
664
702
  fontFamily: "DN Sans",
665
703
  fontWeight: Bold,
666
704
  fontSize: 16,
667
- lineHeight: 1.1
705
+ lineHeight: 1.1,
706
+ letterSpacing: 0
668
707
  ),
669
708
  functionalbody01: (
670
709
  fontFamily: "DN Sans",
671
710
  fontWeight: Regular,
672
711
  fontSize: 14,
673
- lineHeight: 1.5
712
+ lineHeight: 1.5,
713
+ letterSpacing: 0
674
714
  ),
675
715
  functionalbody02: (
676
716
  fontFamily: "DN Sans",
677
717
  fontWeight: Regular,
678
718
  fontSize: 16,
679
- lineHeight: 1.5
719
+ lineHeight: 1.5,
720
+ letterSpacing: 0
680
721
  ),
681
722
  functionalingress01: (
682
723
  fontFamily: "DN Sans",
683
724
  fontWeight: Bold,
684
725
  fontSize: 20,
685
- lineHeight: 1.5
726
+ lineHeight: 1.5,
727
+ letterSpacing: 0
686
728
  ),
687
729
  functionalingress02: (
688
730
  fontFamily: "DN Sans",
689
731
  fontWeight: Bold,
690
732
  fontSize: 24,
691
- lineHeight: 1.5
733
+ lineHeight: 1.5,
734
+ letterSpacing: 0
692
735
  ),
693
736
  functionalheading01: (
694
737
  fontFamily: "DN Sans",
695
738
  fontWeight: Bold,
696
739
  fontSize: 16,
697
- lineHeight: 1.1
740
+ lineHeight: 1.1,
741
+ letterSpacing: 0
698
742
  ),
699
743
  functionalheading02: (
700
744
  fontFamily: "DN Sans",
701
745
  fontWeight: Bold,
702
746
  fontSize: 20,
703
- lineHeight: 1.1
747
+ lineHeight: 1.1,
748
+ letterSpacing: 0
704
749
  ),
705
750
  functionalheading03: (
706
751
  fontFamily: "DN Sans",
707
752
  fontWeight: Bold,
708
753
  fontSize: 24,
709
- lineHeight: 1.1
754
+ lineHeight: 1.1,
755
+ letterSpacing: 0
710
756
  ),
711
757
  functionalheading04: (
712
758
  fontFamily: "DN Sans",
713
759
  fontWeight: Bold,
714
760
  fontSize: 28,
715
- lineHeight: 1.1
761
+ lineHeight: 1.1,
762
+ letterSpacing: 0
716
763
  ),
717
764
  functionalheading05: (
718
765
  fontFamily: "DN Sans",
719
766
  fontWeight: Bold,
720
767
  fontSize: 36,
721
- lineHeight: 1.1
768
+ lineHeight: 1.1,
769
+ letterSpacing: 0
722
770
  ),
723
771
  functionalheading06: (
724
772
  fontFamily: "DN Sans",
725
773
  fontWeight: Bold,
726
774
  fontSize: 40,
727
- lineHeight: 1.1
775
+ lineHeight: 1.1,
776
+ letterSpacing: 0
728
777
  ),
729
778
  functional-body01regular: (
730
779
  fontFamily: "DN Sans",