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

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 (12) hide show
  1. package/CHANGELOG.md +33 -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/typographyTokensScreenExtraLarge.scss +93 -44
  10. package/foundations/variables/typographyTokensScreenLarge.scss +93 -44
  11. package/foundations/variables/typographyTokensScreenSmall.scss +41 -17
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,39 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [11.4.0-beta.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.3.3...@bonniernews/dn-design-system-web@11.4.0-beta.3) (2024-02-19)
8
+
9
+
10
+ ### Features
11
+
12
+ * **core:** handle new token types ([b784d87](https://github.com/BonnierNews/dn-design-system/commit/b784d87892a7da7bb5d6cf6696110a349ffe14d8))
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * **app:** calculate lineHeigth for all components ([#1197](https://github.com/BonnierNews/dn-design-system/issues/1197)) ([0d3f059](https://github.com/BonnierNews/dn-design-system/commit/0d3f05989033e7c0a66426e5f19a1e82b6abdd07))
18
+
19
+
20
+ ### Maintenance
21
+
22
+ * **web:** released version v11.4.0-beta.0 ([975ab0f](https://github.com/BonnierNews/dn-design-system/commit/975ab0f6544666161b265389ad56d0b488c47b09))
23
+ * **web:** released version v11.4.0-beta.1 ([c3af807](https://github.com/BonnierNews/dn-design-system/commit/c3af8070223f5abf6fe995daeb3466936f59507c))
24
+ * **web:** released version v11.4.0-beta.2 ([e5c1885](https://github.com/BonnierNews/dn-design-system/commit/e5c1885e0213a2fd5d4667f373b9137250ff0bc9))
25
+
26
+ ## [11.3.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.3.2...@bonniernews/dn-design-system-web@11.3.3) (2024-02-15)
27
+
28
+
29
+ ### Bug Fixes
30
+
31
+ * **web:** text button as link ([#1196](https://github.com/BonnierNews/dn-design-system/issues/1196)) ([49b252a](https://github.com/BonnierNews/dn-design-system/commit/49b252ab56a565700ada715e399ab11a4a2e90fe))
32
+
33
+ ## [11.3.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.3.1...@bonniernews/dn-design-system-web@11.3.2) (2024-02-15)
34
+
35
+
36
+ ### Bug Fixes
37
+
38
+ * **web:** smaller standard teaser image maxwidth for podd variant ([#1195](https://github.com/BonnierNews/dn-design-system/issues/1195)) ([4a855b2](https://github.com/BonnierNews/dn-design-system/commit/4a855b23b5964223d8414b617b8289c3efc73291))
39
+
7
40
  ## [11.4.0-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.4.0-beta.1...@bonniernews/dn-design-system-web@11.4.0-beta.2) (2024-02-14)
8
41
 
9
42
  ## [11.4.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.4.0-beta.0...@bonniernews/dn-design-system-web@11.4.0-beta.1) (2024-02-13)
package/components/badge/badge.scss CHANGED
@@ -7,7 +7,7 @@ $ds-badge__min-size: 8px;
7
7
  box-sizing: content-box;
8
8
 
9
9
  .ds-badge__inner {
10
- @include ds-typography($component: $ds-typography-functional-meta02semibold, $lineHeight: 0);
10
+ @include ds-typography($ds-typography-functional-meta02semibold, $lineHeight: 0);
11
11
  color: $ds-color-static-white;
12
12
  background-color: $ds-color-component-brand;
13
13
  border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
@@ -19,7 +19,7 @@ $ds-badge__min-size: 8px;
19
19
  min-width: ds-px-to-rem($ds-badge__min-size);
20
20
  padding: ds-spacing($ds-s-025, rem);
21
21
  @at-root .ds-force-px#{&} {
22
- @include ds-typography($component: $ds-typography-functional-meta02semibold, $forcePx: true, $lineHeight: 0);
22
+ @include ds-typography($ds-typography-functional-meta02semibold, $forcePx: true, $lineHeight: 0);
23
23
  min-height: $ds-badge__min-size;
24
24
  min-width: $ds-badge__min-size;
25
25
  padding: ds-spacing($ds-s-025);
package/components/teaser-image/teaser-image.scss CHANGED
@@ -9,10 +9,10 @@
9
9
  position: absolute;
10
10
  bottom: 0;
11
11
  right: 0;
12
- padding: ds-spacing($ds-s-025 $ds-s-050);
12
+ padding: ds-spacing(0 $ds-s-025);
13
13
  margin-left: ds-spacing($ds-s-050);
14
14
 
15
- @include ds-typography($ds-typography-functional-meta01regular);
15
+ @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l);
16
16
  color: $ds-color-static-white;
17
17
 
18
18
  background-color: $ds-color-static-transparent-black;
package/components/teaser-split/teaser-split.scss CHANGED
@@ -71,7 +71,7 @@
71
71
 
72
72
  .ds-teaser__media {
73
73
  .ds-teaser-image__byline {
74
- @include ds-typography($ds-typography-functional-meta01regular, true);
74
+ @include ds-typography($ds-typography-functionalmeta01, $forcePx: true, $lineHeight: $ds-lineheight-l);
75
75
  }
76
76
 
77
77
  @include ds-mq-largest-breakpoint(mobile) {
package/components/teaser-standard/teaser-standard.scss CHANGED
@@ -45,7 +45,7 @@
45
45
  float: right;
46
46
 
47
47
  .ds-teaser-image__byline {
48
- @include ds-typography($ds-typography-functional-meta01regular, true);
48
+ @include ds-typography($ds-typography-functionalmeta01, $forcePx: true, $lineHeight: $ds-lineheight-l);
49
49
  }
50
50
 
51
51
  @include ds-mq-only-breakpoint(mobile) {
@@ -71,4 +71,18 @@
71
71
  max-width: 100%;
72
72
  }
73
73
  }
74
+
75
+ &.ds-teaser--podcast {
76
+ .ds-teaser__media {
77
+ @include ds-mq-only-breakpoint(mobile) {
78
+ min-width: 80px;
79
+ max-width: 80px;
80
+ }
81
+
82
+ @include ds-mq-smallest-breakpoint(tablet) {
83
+ min-width: 122px;
84
+ max-width: 122px;
85
+ }
86
+ }
87
+ }
74
88
  }
package/components/text-button/text-button.scss CHANGED
@@ -44,6 +44,7 @@ $ds-text-btn__underline-offset: 2px;
44
44
  border-radius: ds-border-radius(x1);
45
45
  padding: 0;
46
46
  position: relative;
47
+ text-decoration: none;
47
48
 
48
49
  &::before {
49
50
  content: "";
package/foundations/helpers/typography.scss CHANGED
@@ -47,16 +47,16 @@ $dsSerifWeights: (
47
47
 
48
48
  // Serif variation changes, text 18px, headline 26px, display 34px. As fallback we will always use headline
49
49
 
50
- @mixin ds-typography($component, $forcePx: false, $fontWeight: null, $letterSpacing: null, $lineHeight: null) {
50
+ @mixin ds-typography($token, $forcePx: false, $fontWeight: null, $letterSpacing: null, $lineHeight: null) {
51
51
  // making sure override values have matching keys in typography object
52
52
  $addons: (
53
53
  "letterSpacing": $letterSpacing,
54
54
  "fontWeight": null,
55
55
  "lineHeight": null,
56
56
  );
57
- $tmpMap: map.merge($addons, map.get($typographyTokensScreenSmall, $component));
58
- $tmpMapScreenLarge: map.merge($addons, map.get($typographyTokensScreenLarge, $component));
59
- $tmpMapScreenExtraLarge: map.merge($addons, map.get($typographyTokensScreenExtraLarge, $component));
57
+ $tmpMap: map.merge($addons, map.get($typographyTokensScreenSmall, $token));
58
+ $tmpMapScreenLarge: map.merge($addons, map.get($typographyTokensScreenLarge, $token));
59
+ $tmpMapScreenExtraLarge: map.merge($addons, map.get($typographyTokensScreenExtraLarge, $token));
60
60
 
61
61
  @if $tmpMap {
62
62
  @include ds-mq-largest-breakpoint(mobile) {
@@ -90,7 +90,7 @@ $dsSerifWeights: (
90
90
  }
91
91
 
92
92
  @mixin ds-typography-without-mq(
93
- $component,
93
+ $token,
94
94
  $screen: mobile,
95
95
  $forcePx: false,
96
96
  $fontWeight: null,
@@ -107,12 +107,12 @@ $dsSerifWeights: (
107
107
  );
108
108
 
109
109
  @if $screen == mobile {
110
- $tmpMap: map.merge($addons, map.get($typographyTokensScreenSmall, $component));
110
+ $tmpMap: map.merge($addons, map.get($typographyTokensScreenSmall, $token));
111
111
  } @else if $screen == tablet {
112
- $tmpMap: map.merge($addons, map.get($typographyTokensScreenLarge, $component));
112
+ $tmpMap: map.merge($addons, map.get($typographyTokensScreenLarge, $token));
113
113
  $scaling: "large";
114
114
  } @else if $screen == desktop {
115
- $tmpMap: map.merge($addons, map.get($typographyTokensScreenExtraLarge, $component));
115
+ $tmpMap: map.merge($addons, map.get($typographyTokensScreenExtraLarge, $token));
116
116
  $scaling: "extraLarge";
117
117
  }
118
118
 
package/foundations/typography/README.md CHANGED
@@ -26,7 +26,7 @@ These are copy paste friendly examples to quickliy get started using a component
26
26
  **With overriding addons**
27
27
  ```scss
28
28
  @include ds-typography(
29
- $component: $ds-typography-expressiveheading03,
29
+ $ds-typography-expressiveheading03,
30
30
  $fontWeight: $ds-fontweight-medium,
31
31
  $lineHeight: $ds-lineheight-tight,
32
32
  $letterSpacing: $ds-letterspacing-none
@@ -37,7 +37,7 @@ These are copy paste friendly examples to quickliy get started using a component
37
37
  All devices get the same sizes based on $screen parameter (defaults to mobile)
38
38
  ```scss
39
39
  @include ds-typography-without-mq(
40
- $component: $ds-typography-expressiveheading03,
40
+ $ds-typography-expressiveheading03,
41
41
  $screen: desktop,
42
42
  $fontWeight: $ds-fontweight-medium,
43
43
  $lineHeight: $ds-lineheight-tight,
package/foundations/variables/typographyTokensScreenExtraLarge.scss CHANGED
@@ -199,88 +199,102 @@ $typographyTokensScreenExtraLarge: (
199
199
  fontFamily: "DN Serif Display",
200
200
  fontWeight: Bold,
201
201
  lineHeight: 1.1,
202
- fontSize: 48
202
+ fontSize: 48,
203
+ letterSpacing: 0
203
204
  ),
204
205
  detailarticle-opinion: (
205
206
  fontFamily: "DN Serif Display",
206
207
  fontWeight: Regular,
207
208
  lineHeight: 1.1,
208
209
  fontSize: 48,
210
+ letterSpacing: 0,
209
211
  fontStyle: italic
210
212
  ),
211
213
  detailarticle-longread: (
212
214
  fontFamily: "DN Serif Display",
213
215
  fontWeight: Regular,
214
216
  lineHeight: 1.1,
215
- fontSize: 56
217
+ fontSize: 56,
218
+ letterSpacing: 0
216
219
  ),
217
220
  detailarticle-longread-premium: (
218
221
  fontFamily: "DN Serif Display",
219
222
  fontWeight: Bold,
220
223
  lineHeight: 1.1,
221
- fontSize: 56
224
+ fontSize: 56,
225
+ letterSpacing: 0
222
226
  ),
223
227
  detailarticle-direkt: (
224
228
  fontFamily: "DN Serif Display",
225
229
  fontWeight: Bold,
226
230
  lineHeight: 1.1,
227
- fontSize: 32
231
+ fontSize: 32,
232
+ letterSpacing: 0
228
233
  ),
229
234
  detailarticle-direkt-opinion: (
230
235
  fontFamily: "DN Serif Display",
231
236
  fontWeight: Regular,
232
237
  lineHeight: 1.1,
233
238
  fontSize: 32,
239
+ letterSpacing: 0,
234
240
  fontStyle: italic
235
241
  ),
236
242
  detaildirekt-header: (
237
243
  fontFamily: "DN Serif Display",
238
244
  fontWeight: Regular,
239
245
  lineHeight: 1.1,
240
- fontSize: 48
246
+ fontSize: 48,
247
+ letterSpacing: 0
241
248
  ),
242
249
  detaildropcap: (
243
250
  fontFamily: "DN Serif Display",
244
251
  fontWeight: Bold,
245
252
  lineHeight: 1,
246
- fontSize: 92
253
+ fontSize: 92,
254
+ letterSpacing: 0
247
255
  ),
248
256
  detailarticle-quote: (
249
257
  fontFamily: "DN Serif Display",
250
258
  fontWeight: Bold,
251
- lineHeight: 1.1,
252
- fontSize: 28
259
+ lineHeight: 1.25,
260
+ fontSize: 28,
261
+ letterSpacing: 0
253
262
  ),
254
263
  detailmellanrubrik: (
255
264
  fontFamily: "DN Serif Display",
256
265
  fontWeight: Bold,
257
266
  lineHeight: 1.1,
258
- fontSize: 32
267
+ fontSize: 32,
268
+ letterSpacing: 0
259
269
  ),
260
270
  detailteaser-standard-compact: (
261
271
  fontFamily: "DN Serif Headline",
262
272
  fontWeight: Bold,
263
273
  lineHeight: 1.1,
264
- fontSize: 24
274
+ fontSize: 24,
275
+ letterSpacing: 0
265
276
  ),
266
277
  detailteaser-standard-compact-opinion: (
267
278
  fontFamily: "DN Serif Headline",
268
279
  fontWeight: Regular,
269
280
  lineHeight: 1.25,
270
281
  fontSize: 24,
282
+ letterSpacing: 0,
271
283
  fontStyle: italic
272
284
  ),
273
285
  detailteaser-large: (
274
286
  fontFamily: "DN Serif Display",
275
287
  fontWeight: Bold,
276
288
  lineHeight: 1.1,
277
- fontSize: 56
289
+ fontSize: 56,
290
+ letterSpacing: 0
278
291
  ),
279
292
  detailteaser-large-opinion: (
280
293
  fontFamily: "DN Serif Display",
281
294
  fontWeight: Regular,
282
295
  lineHeight: 1.1,
283
296
  fontSize: 36,
297
+ letterSpacing: 0,
284
298
  fontStyle: italic
285
299
  ),
286
300
  detailteaser-large-storRubrik: (
@@ -288,45 +302,52 @@ $typographyTokensScreenExtraLarge: (
288
302
  fontWeight: Regular,
289
303
  lineHeight: 1.1,
290
304
  fontSize: 56,
305
+ letterSpacing: 0,
291
306
  fontStyle: italic
292
307
  ),
293
308
  detailteaser-standard: (
294
309
  fontFamily: "DN Serif Headline",
295
310
  fontWeight: Bold,
296
311
  lineHeight: 1.1,
297
- fontSize: 36
312
+ fontSize: 36,
313
+ letterSpacing: 0
298
314
  ),
299
315
  detailteaser-standard-opinion: (
300
316
  fontFamily: "DN Serif Display",
301
317
  fontWeight: Regular,
302
318
  lineHeight: 1.1,
303
319
  fontSize: 36,
320
+ letterSpacing: 0,
304
321
  fontStyle: italic
305
322
  ),
306
323
  detailteaser-twin: (
307
324
  fontFamily: "DN Serif Headline",
308
325
  fontWeight: Bold,
309
326
  lineHeight: 1.25,
310
- fontSize: 22
327
+ fontSize: 22,
328
+ letterSpacing: 0
311
329
  ),
312
330
  detailteaser-large-compact: (
313
331
  fontFamily: "DN Serif Display",
314
332
  fontWeight: Bold,
315
333
  fontSize: 40,
316
- lineHeight: 1.1
334
+ lineHeight: 1.1,
335
+ letterSpacing: 0
317
336
  ),
318
337
  detailteaser-large-compact-opinion: (
319
338
  fontFamily: "DN Serif Headline",
320
339
  fontWeight: Regular,
321
340
  fontSize: 24,
322
341
  lineHeight: 1.25,
342
+ letterSpacing: 0,
323
343
  fontStyle: italic
324
344
  ),
325
345
  detailstandard-button: (
326
346
  fontFamily: "DN Sans",
327
347
  fontWeight: SemiBold,
328
348
  lineHeight: 1.5,
329
- fontSize: 16
349
+ fontSize: 16,
350
+ letterSpacing: 0
330
351
  ),
331
352
  detailbottom-nav: (
332
353
  fontFamily: "DN Sans",
@@ -339,7 +360,8 @@ $typographyTokensScreenExtraLarge: (
339
360
  fontFamily: "DN Sans",
340
361
  fontWeight: SemiBold,
341
362
  lineHeight: 1.5,
342
- fontSize: 14
363
+ fontSize: 14,
364
+ letterSpacing: 0
343
365
  ),
344
366
  detailarticle-label: (
345
367
  fontFamily: "DN Sans",
@@ -353,7 +375,8 @@ $typographyTokensScreenExtraLarge: (
353
375
  fontFamily: "DN Serif Text",
354
376
  fontWeight: Regular,
355
377
  fontSize: 16,
356
- lineHeight: 1.38
378
+ lineHeight: 1.38,
379
+ letterSpacing: 0
357
380
  ),
358
381
  detailbaota-xl-label: (
359
382
  fontFamily: "DN Sans",
@@ -361,7 +384,7 @@ $typographyTokensScreenExtraLarge: (
361
384
  lineHeight: 1.5,
362
385
  fontSize: 16,
363
386
  textCase: upperCase,
364
- letterSpacing: 0.7
387
+ letterSpacing: 0.5
365
388
  ),
366
389
  functional-heading03regular: (
367
390
  fontFamily: "DN Sans",
@@ -574,157 +597,183 @@ $typographyTokensScreenExtraLarge: (
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",
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -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.25,
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
487
  lineHeight: 1.25,
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
533
  lineHeight: 1.25,
517
- fontSize: 22
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
548
  lineHeight: 1.25,
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",
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -505,7 +505,8 @@ $typographyTokensScreenSmall: (
505
505
  fontFamily: "DN Sans",
506
506
  fontWeight: SemiBold,
507
507
  lineHeight: 1.5,
508
- fontSize: 16
508
+ fontSize: 16,
509
+ letterSpacing: 0
509
510
  ),
510
511
  detailbottom-nav: (
511
512
  fontFamily: "DN Sans",
@@ -518,13 +519,15 @@ $typographyTokensScreenSmall: (
518
519
  fontFamily: "DN Serif Display",
519
520
  lineHeight: 1,
520
521
  fontSize: 52,
521
- fontWeight: Bold
522
+ fontWeight: Bold,
523
+ letterSpacing: 0
522
524
  ),
523
525
  detailstandard-button-small: (
524
526
  fontFamily: "DN Sans",
525
527
  fontWeight: SemiBold,
526
528
  lineHeight: 1.5,
527
- fontSize: 14
529
+ fontSize: 14,
530
+ letterSpacing: 0
528
531
  ),
529
532
  detailarticle-label: (
530
533
  fontFamily: "DN Sans",
@@ -538,7 +541,8 @@ $typographyTokensScreenSmall: (
538
541
  fontFamily: "DN Serif Text",
539
542
  fontWeight: Regular,
540
543
  fontSize: 16,
541
- lineHeight: 1.38
544
+ lineHeight: 1.38,
545
+ letterSpacing: 0
542
546
  ),
543
547
  detailbaota-xl-label: (
544
548
  fontFamily: "DN Sans",
@@ -546,88 +550,101 @@ $typographyTokensScreenSmall: (
546
550
  lineHeight: 1.5,
547
551
  fontSize: 16,
548
552
  textCase: upperCase,
549
- letterSpacing: 0.7
553
+ letterSpacing: 0.5
550
554
  ),
551
555
  detailarticle-standard: (
552
556
  fontFamily: "DN Serif Headline",
553
557
  fontWeight: Bold,
554
558
  lineHeight: 1.1,
555
- fontSize: 26
559
+ fontSize: 26,
560
+ letterSpacing: 0
556
561
  ),
557
562
  detailarticle-opinion: (
558
563
  fontFamily: "DN Serif Headline",
559
564
  fontWeight: Regular,
560
565
  lineHeight: 1.1,
561
566
  fontSize: 26,
567
+ letterSpacing: 0,
562
568
  fontStyle: italic
563
569
  ),
564
570
  detailarticle-longread: (
565
571
  fontFamily: "DN Serif Display",
566
572
  fontWeight: Regular,
567
573
  lineHeight: 1.1,
568
- fontSize: 32
574
+ fontSize: 32,
575
+ letterSpacing: 0
569
576
  ),
570
577
  detailarticle-longread-premium: (
571
578
  fontFamily: "DN Serif Display",
572
579
  fontWeight: Bold,
573
580
  lineHeight: 1.1,
574
- fontSize: 32
581
+ fontSize: 32,
582
+ letterSpacing: 0
575
583
  ),
576
584
  detailarticle-quote: (
577
585
  fontFamily: "DN Serif Headline",
578
586
  fontWeight: Bold,
579
587
  lineHeight: 1.25,
580
- fontSize: 20
588
+ fontSize: 20,
589
+ letterSpacing: 0
581
590
  ),
582
591
  detailmellanrubrik: (
583
592
  fontFamily: "DN Serif Headline",
584
593
  fontWeight: Bold,
585
594
  fontSize: 20,
586
- lineHeight: 1.25
595
+ lineHeight: 1.25,
596
+ letterSpacing: 0
587
597
  ),
588
598
  detailarticle-direkt: (
589
599
  fontFamily: "DN Serif Headline",
590
600
  fontWeight: Bold,
591
601
  lineHeight: 1.25,
592
- fontSize: 20
602
+ fontSize: 20,
603
+ letterSpacing: 0
593
604
  ),
594
605
  detailarticle-direkt-opinion: (
595
606
  fontFamily: "DN Serif Headline",
596
607
  fontWeight: Regular,
597
608
  lineHeight: 1.25,
598
609
  fontSize: 20,
610
+ letterSpacing: 0,
599
611
  fontStyle: italic
600
612
  ),
601
613
  detaildirekt-header: (
602
614
  fontFamily: "DN Serif Display",
603
615
  fontWeight: Regular,
604
616
  fontSize: 32,
605
- lineHeight: 1.1
617
+ lineHeight: 1.1,
618
+ letterSpacing: 0
606
619
  ),
607
620
  detailteaser-standard-compact: (
608
621
  fontFamily: "DN Serif Headline",
609
622
  fontWeight: Bold,
610
623
  lineHeight: 1.25,
611
- fontSize: 18
624
+ fontSize: 18,
625
+ letterSpacing: 0
612
626
  ),
613
627
  detailteaser-standard-compact-opinion: (
614
628
  fontFamily: "DN Serif Headline",
615
629
  fontWeight: Medium,
616
630
  lineHeight: 1.25,
617
631
  fontSize: 18,
632
+ letterSpacing: 0,
618
633
  fontStyle: italic
619
634
  ),
620
635
  detailteaser-large: (
621
636
  fontFamily: "DN Serif Headline",
622
637
  fontWeight: Bold,
623
638
  lineHeight: 1.1,
624
- fontSize: 26
639
+ fontSize: 26,
640
+ letterSpacing: 0
625
641
  ),
626
642
  detailteaser-large-opinion: (
627
643
  fontFamily: "DN Serif Headline",
628
644
  fontWeight: Regular,
629
645
  lineHeight: 1.25,
630
646
  fontSize: 22,
647
+ letterSpacing: 0,
631
648
  fontStyle: italic
632
649
  ),
633
650
  detailteaser-large-storRubrik: (
@@ -635,37 +652,44 @@ $typographyTokensScreenSmall: (
635
652
  fontWeight: Regular,
636
653
  lineHeight: 1.1,
637
654
  fontSize: 26,
655
+ letterSpacing: 0,
638
656
  fontStyle: italic
639
657
  ),
640
658
  detailteaser-standard: (
641
659
  fontFamily: "DN Serif Headline",
642
660
  fontSize: 20,
643
- lineHeight: 1.25
661
+ lineHeight: 1.25,
662
+ letterSpacing: 0,
663
+ fontWeight: Bold
644
664
  ),
645
665
  detailteaser-standard-opinion: (
646
666
  fontFamily: "DN Serif Headline",
647
667
  fontWeight: Regular,
648
668
  lineHeight: 1.25,
649
669
  fontSize: 22,
670
+ letterSpacing: 0,
650
671
  fontStyle: italic
651
672
  ),
652
673
  detailteaser-twin: (
653
674
  fontFamily: "DN Serif Text",
654
675
  fontWeight: Bold,
655
676
  lineHeight: 1.25,
656
- fontSize: 17
677
+ fontSize: 17,
678
+ letterSpacing: 0
657
679
  ),
658
680
  detailteaser-large-compact: (
659
681
  fontFamily: "DN Serif Headline",
660
682
  fontWeight: Bold,
661
683
  fontSize: 26,
662
- lineHeight: 1.1
684
+ lineHeight: 1.1,
685
+ letterSpacing: 0
663
686
  ),
664
687
  detailteaser-large-compact-opinion: (
665
688
  fontFamily: "DN Serif Headline",
666
689
  fontWeight: Medium,
667
690
  fontSize: 18,
668
691
  lineHeight: 1.25,
692
+ letterSpacing: 0,
669
693
  fontStyle: italic
670
694
  ),
671
695
  expressiveheading01: (
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "11.4.0-beta.2",
3
+ "version": "11.4.0-beta.3",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",