@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/typographyTokensScreenExtraLarge.scss CHANGED
@@ -120,36 +120,36 @@ $typographyTokensScreenExtraLarge: (
120
120
  fontFamily: "DN Serif Text",
121
121
  fontWeight: Regular,
122
122
  fontSize: 16,
123
- lineHeight: 1.25
123
+ lineHeight: 1.2
124
124
  ),
125
125
  expressive-heading01semibold: (
126
126
  fontFamily: "DN Serif Text",
127
127
  fontWeight: SemiBold,
128
128
  fontSize: 16,
129
- lineHeight: 1.25
129
+ lineHeight: 1.2
130
130
  ),
131
131
  expressive-heading01bold: (
132
132
  fontFamily: "DN Serif Text",
133
133
  fontWeight: Bold,
134
134
  fontSize: 16,
135
- lineHeight: 1.25
135
+ lineHeight: 1.2
136
136
  ),
137
137
  expressive-heading01italicregular: (
138
- lineHeight: 1.25,
138
+ lineHeight: 1.2,
139
139
  fontSize: 16,
140
140
  fontFamily: "DN Serif Text",
141
141
  fontWeight: Medium,
142
142
  fontStyle: italic
143
143
  ),
144
144
  expressive-heading01italicsemibold: (
145
- lineHeight: 1.25,
145
+ lineHeight: 1.2,
146
146
  fontSize: 16,
147
147
  fontFamily: "DN Serif Text",
148
148
  fontWeight: SemiBold,
149
149
  fontStyle: italic
150
150
  ),
151
151
  expressive-heading01italicbold: (
152
- lineHeight: 1.25,
152
+ lineHeight: 1.2,
153
153
  fontSize: 16,
154
154
  fontFamily: "DN Serif Text",
155
155
  fontWeight: Bold,
@@ -159,38 +159,38 @@ $typographyTokensScreenExtraLarge: (
159
159
  fontFamily: "DN Serif Headline",
160
160
  fontWeight: Regular,
161
161
  fontSize: 22,
162
- lineHeight: 1.25,
162
+ lineHeight: 1.2,
163
163
  paragraphSpacing: 16
164
164
  ),
165
165
  expressive-heading02semibold: (
166
166
  fontFamily: "DN Serif Headline",
167
167
  fontWeight: SemiBold,
168
168
  fontSize: 22,
169
- lineHeight: 1.25
169
+ lineHeight: 1.2
170
170
  ),
171
171
  expressive-heading02bold: (
172
172
  fontFamily: "DN Serif Headline",
173
173
  fontWeight: Bold,
174
174
  fontSize: 22,
175
- lineHeight: 1.25
175
+ lineHeight: 1.2
176
176
  ),
177
177
  expressive-heading02italicregular: (
178
178
  fontSize: 22,
179
- lineHeight: 1.25,
179
+ lineHeight: 1.2,
180
180
  fontWeight: Regular,
181
181
  fontFamily: "DN Serif Headline",
182
182
  fontStyle: italic
183
183
  ),
184
184
  expressive-heading02italicsemibold: (
185
185
  fontSize: 22,
186
- lineHeight: 1.25,
186
+ lineHeight: 1.2,
187
187
  fontWeight: SemiBold,
188
188
  fontFamily: "DN Serif Headline",
189
189
  fontStyle: italic
190
190
  ),
191
191
  expressive-heading02italicbold: (
192
192
  fontSize: 22,
193
- lineHeight: 1.25,
193
+ lineHeight: 1.2,
194
194
  fontWeight: Bold,
195
195
  fontFamily: "DN Serif Headline",
196
196
  fontStyle: italic
@@ -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.2,
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
- lineHeight: 1.25,
280
+ lineHeight: 1.2,
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
- lineHeight: 1.25,
310
- fontSize: 22
326
+ lineHeight: 1.2,
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
- lineHeight: 1.25,
341
+ lineHeight: 1.2,
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,43 +384,43 @@ $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",
368
391
  fontWeight: Regular,
369
- lineHeight: 1.25,
392
+ lineHeight: 1.2,
370
393
  fontSize: 24
371
394
  ),
372
395
  functional-heading03semibold: (
373
396
  fontFamily: "DN Sans",
374
397
  fontWeight: SemiBold,
375
- lineHeight: 1.25,
398
+ lineHeight: 1.2,
376
399
  fontSize: 24
377
400
  ),
378
401
  functional-heading03bold: (
379
402
  fontFamily: "DN Sans",
380
403
  fontWeight: Bold,
381
- lineHeight: 1.25,
404
+ lineHeight: 1.2,
382
405
  fontSize: 24
383
406
  ),
384
407
  functional-heading01regular: (
385
408
  fontFamily: "DN Sans",
386
409
  fontWeight: Regular,
387
410
  fontSize: 16,
388
- lineHeight: 1.25
411
+ lineHeight: 1.2
389
412
  ),
390
413
  functional-heading01semibold: (
391
414
  fontFamily: "DN Sans",
392
415
  fontWeight: SemiBold,
393
416
  fontSize: 16,
394
- lineHeight: 1.25
417
+ lineHeight: 1.2
395
418
  ),
396
419
  functional-heading01bold: (
397
420
  fontFamily: "DN Sans",
398
421
  fontWeight: Bold,
399
422
  fontSize: 16,
400
- lineHeight: 1.25
423
+ lineHeight: 1.2
401
424
  ),
402
425
  functional-heading02regular: (
403
426
  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",