@bonniernews/dn-design-system-web 3.0.0-alpha.98 → 4.0.0-alpha.1

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 (52) hide show
  1. package/CHANGELOG.md +146 -0
  2. package/assets/article-image/article-image.njk +1 -1
  3. package/assets/article-image/article-image.scss +1 -1
  4. package/assets/teaser/teaser.scss +11 -1
  5. package/components/byline/README.md +3 -3
  6. package/components/byline/byline.njk +1 -1
  7. package/components/byline/byline.scss +18 -1
  8. package/components/image-caption/image-caption.njk +5 -1
  9. package/components/pictogram/pictogram.scss +4 -1
  10. package/components/teaser-large/teaser-large.njk +5 -3
  11. package/components/teaser-list-timeline/README.md +44 -0
  12. package/components/teaser-list-timeline/teaser-list-timeline.njk +62 -0
  13. package/components/teaser-list-timeline/teaser-list-timeline.scss +80 -0
  14. package/components/teaser-native/README.md +41 -0
  15. package/components/teaser-native/teaser-native.njk +59 -0
  16. package/components/teaser-native/teaser-native.scss +109 -0
  17. package/components/teaser-package/teaser-package.scss +3 -1
  18. package/components/teaser-split/teaser-split.njk +5 -3
  19. package/components/teaser-standard/teaser-standard.njk +17 -15
  20. package/components/teaser-standard/teaser-standard.scss +6 -8
  21. package/foundations/base.scss +3 -3
  22. package/foundations/colors.scss +22 -5
  23. package/foundations/helpers/colors.scss +1 -1
  24. package/foundations/helpers/forward.helpers.scss +0 -1
  25. package/foundations/helpers/opacity.scss +1 -1
  26. package/foundations/helpers/shadows.scss +6 -6
  27. package/foundations/helpers/spacing.scss +2 -2
  28. package/foundations/helpers/typography.scss +12 -10
  29. package/foundations/helpers/utilities.scss +1 -1
  30. package/foundations/icons/icon.njk +25 -0
  31. package/foundations/icons/sprite.njk +1 -1
  32. package/foundations/icons/sprite.svg +1 -1
  33. package/foundations/icons/svg/arrow_upward.svg +3 -0
  34. package/foundations/icons/svg/forward_30.svg +3 -0
  35. package/foundations/icons/svg/link.svg +3 -0
  36. package/foundations/icons/svg/refresh.svg +3 -0
  37. package/foundations/icons/svg/replay_30.svg +3 -0
  38. package/foundations/shadows.scss +5 -5
  39. package/foundations/typography/fontDefinitions.scss +56 -56
  40. package/foundations/variables/typographyTokensList.scss +1 -0
  41. package/foundations/variables/typographyTokensScreenExtraLarge.scss +150 -144
  42. package/foundations/variables/typographyTokensScreenLarge.scss +150 -144
  43. package/foundations/variables/typographyTokensScreenSmall.scss +61 -55
  44. package/package.json +11 -9
  45. package/tokens/colors-dark-mode.json +93 -0
  46. package/tokens/colors-light-mode.json +92 -0
  47. package/tokens/icon-list.json +79 -0
  48. package/tokens/typography-list.json +92 -0
  49. package/.stylelintignore +0 -1
  50. package/.stylelintrc.json +0 -17
  51. package/assets/teaser/dot-or-grade.njk +0 -7
  52. package/foundations/helpers/fontDefinitionsHelper.scss +0 -32
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -1,18 +1,18 @@
1
1
  $typographyTokensScreenLarge: (
2
2
  expressive-heading01regular: (
3
- fontFamily: "DN Serif",
3
+ fontFamily: "DN Serif Text",
4
4
  fontWeight: Regular,
5
5
  fontSize: 16,
6
6
  lineHeight: 20
7
7
  ),
8
8
  expressive-heading01semibold: (
9
- fontFamily: "DN Serif",
9
+ fontFamily: "DN Serif Text",
10
10
  fontWeight: SemiBold,
11
11
  fontSize: 16,
12
12
  lineHeight: 20
13
13
  ),
14
14
  expressive-heading01bold: (
15
- fontFamily: "DN Serif",
15
+ fontFamily: "DN Serif Text",
16
16
  fontWeight: Bold,
17
17
  fontSize: 16,
18
18
  lineHeight: 20
@@ -20,39 +20,39 @@ $typographyTokensScreenLarge: (
20
20
  expressive-heading01italicregular: (
21
21
  lineHeight: 20,
22
22
  fontSize: 16,
23
- fontFamily: "DN Serif Italic",
23
+ fontFamily: "DN Serif Text",
24
24
  fontWeight: Regular,
25
25
  fontStyle: italic
26
26
  ),
27
27
  expressive-heading01italicsemibold: (
28
28
  lineHeight: 20,
29
29
  fontSize: 16,
30
- fontFamily: "DN Serif Italic",
30
+ fontFamily: "DN Serif Text",
31
31
  fontWeight: SemiBold,
32
32
  fontStyle: italic
33
33
  ),
34
34
  expressive-heading01italicbold: (
35
35
  lineHeight: 20,
36
36
  fontSize: 16,
37
- fontFamily: "DN Serif Italic",
37
+ fontFamily: "DN Serif Text",
38
38
  fontWeight: Bold,
39
39
  fontStyle: italic
40
40
  ),
41
41
  expressive-heading02regular: (
42
- fontFamily: "DN Serif",
42
+ fontFamily: "DN Serif Headline",
43
43
  fontWeight: Regular,
44
44
  fontSize: 22,
45
45
  lineHeight: 26,
46
46
  paragraphSpacing: 16
47
47
  ),
48
48
  expressive-heading02semibold: (
49
- fontFamily: "DN Serif",
49
+ fontFamily: "DN Serif Headline",
50
50
  fontWeight: SemiBold,
51
51
  fontSize: 22,
52
52
  lineHeight: 26
53
53
  ),
54
54
  expressive-heading02bold: (
55
- fontFamily: "DN Serif",
55
+ fontFamily: "DN Serif Headline",
56
56
  fontWeight: Bold,
57
57
  fontSize: 22,
58
58
  lineHeight: 26
@@ -61,37 +61,37 @@ $typographyTokensScreenLarge: (
61
61
  fontSize: 22,
62
62
  lineHeight: 26,
63
63
  fontWeight: Regular,
64
- fontFamily: "DN Serif Italic",
64
+ fontFamily: "DN Serif Headline",
65
65
  fontStyle: italic
66
66
  ),
67
67
  expressive-heading02italicsemibold: (
68
68
  fontSize: 22,
69
69
  lineHeight: 26,
70
70
  fontWeight: SemiBold,
71
- fontFamily: "DN Serif Italic",
71
+ fontFamily: "DN Serif Headline",
72
72
  fontStyle: italic
73
73
  ),
74
74
  expressive-heading02italicbold: (
75
75
  fontSize: 22,
76
76
  lineHeight: 26,
77
77
  fontWeight: Bold,
78
- fontFamily: "DN Serif Italic",
78
+ fontFamily: "DN Serif Headline",
79
79
  fontStyle: italic
80
80
  ),
81
81
  expressive-heading03regular: (
82
- fontFamily: "DN Serif",
82
+ fontFamily: "DN Serif Headline",
83
83
  fontWeight: Regular,
84
84
  fontSize: 26,
85
85
  lineHeight: 30
86
86
  ),
87
87
  expressive-heading03semibold: (
88
- fontFamily: "DN Serif",
88
+ fontFamily: "DN Serif Headline",
89
89
  fontWeight: SemiBold,
90
90
  fontSize: 26,
91
91
  lineHeight: 30
92
92
  ),
93
93
  expressive-heading03bold: (
94
- fontFamily: "DN Serif",
94
+ fontFamily: "DN Serif Headline",
95
95
  fontWeight: Bold,
96
96
  fontSize: 26,
97
97
  lineHeight: 30
@@ -100,37 +100,37 @@ $typographyTokensScreenLarge: (
100
100
  fontSize: 26,
101
101
  lineHeight: 30,
102
102
  fontWeight: Regular,
103
- fontFamily: "DN Serif Italic",
103
+ fontFamily: "DN Serif Headline",
104
104
  fontStyle: italic
105
105
  ),
106
106
  expressive-heading03italicsemibold: (
107
107
  fontSize: 26,
108
108
  lineHeight: 30,
109
109
  fontWeight: SemiBold,
110
- fontFamily: "DN Serif Italic",
110
+ fontFamily: "DN Serif Headline",
111
111
  fontStyle: italic
112
112
  ),
113
113
  expressive-heading03italicbold: (
114
114
  fontSize: 26,
115
115
  lineHeight: 30,
116
116
  fontWeight: Bold,
117
- fontFamily: "DN Serif Italic",
117
+ fontFamily: "DN Serif Headline",
118
118
  fontStyle: italic
119
119
  ),
120
120
  expressive-heading04regular: (
121
- fontFamily: "DN Serif",
121
+ fontFamily: "DN Serif Display",
122
122
  fontWeight: Regular,
123
123
  fontSize: 40,
124
124
  lineHeight: 44
125
125
  ),
126
126
  expressive-heading04semibold: (
127
- fontFamily: "DN Serif",
127
+ fontFamily: "DN Serif Display",
128
128
  fontWeight: SemiBold,
129
129
  fontSize: 40,
130
130
  lineHeight: 44
131
131
  ),
132
132
  expressive-heading04bold: (
133
- fontFamily: "DN Serif",
133
+ fontFamily: "DN Serif Display",
134
134
  fontWeight: Bold,
135
135
  fontSize: 40,
136
136
  lineHeight: 44
@@ -138,7 +138,7 @@ $typographyTokensScreenLarge: (
138
138
  expressive-heading04italicregular: (
139
139
  fontSize: 40,
140
140
  fontWeight: Regular,
141
- fontFamily: "DN Serif Italic",
141
+ fontFamily: "DN Serif Display",
142
142
  lineHeight: 44,
143
143
  fontStyle: italic
144
144
  ),
@@ -146,55 +146,73 @@ $typographyTokensScreenLarge: (
146
146
  fontSize: 40,
147
147
  lineHeight: 44,
148
148
  fontWeight: SemiBold,
149
- fontFamily: "DN Serif Italic",
149
+ fontFamily: "DN Serif Display",
150
150
  fontStyle: italic
151
151
  ),
152
152
  expressive-heading04italicbold: (
153
153
  fontSize: 40,
154
154
  lineHeight: 44,
155
155
  fontWeight: Bold,
156
- fontFamily: "DN Serif Italic",
156
+ fontFamily: "DN Serif Display",
157
157
  fontStyle: italic
158
158
  ),
159
159
  expressive-heading05regular: (
160
- fontFamily: "DN Serif",
160
+ fontFamily: "DN Serif Display",
161
161
  fontWeight: Regular,
162
162
  lineHeight: 64,
163
163
  fontSize: 56
164
164
  ),
165
165
  expressive-heading05semibold: (
166
- fontFamily: "DN Serif",
166
+ fontFamily: "DN Serif Display",
167
167
  fontWeight: SemiBold,
168
168
  lineHeight: 64,
169
169
  fontSize: 56
170
170
  ),
171
171
  expressive-heading05bold: (
172
- fontFamily: "DN Serif",
172
+ fontFamily: "DN Serif Display",
173
173
  fontWeight: Bold,
174
174
  lineHeight: 64,
175
175
  fontSize: 56
176
176
  ),
177
177
  expressive-heading05italicregular: (
178
- fontFamily: "DN Serif Italic",
178
+ fontFamily: "DN Serif Display",
179
179
  fontWeight: Regular,
180
180
  fontSize: 56,
181
181
  lineHeight: 64,
182
182
  fontStyle: italic
183
183
  ),
184
184
  expressive-heading05italicsemibold: (
185
- fontFamily: "DN Serif Italic",
185
+ fontFamily: "DN Serif Display",
186
186
  fontWeight: SemiBold,
187
187
  fontSize: 56,
188
188
  lineHeight: 64,
189
189
  fontStyle: italic
190
190
  ),
191
191
  expressive-heading05italicbold: (
192
- fontFamily: "DN Serif Italic",
192
+ fontFamily: "DN Serif Display",
193
193
  fontWeight: Bold,
194
194
  fontSize: 56,
195
195
  lineHeight: 64,
196
196
  fontStyle: italic
197
197
  ),
198
+ functional-heading03regular: (
199
+ fontFamily: "DN Sans",
200
+ fontWeight: Regular,
201
+ lineHeight: 32,
202
+ fontSize: 24
203
+ ),
204
+ functional-heading03semibold: (
205
+ fontFamily: "DN Sans",
206
+ fontWeight: SemiBold,
207
+ lineHeight: 32,
208
+ fontSize: 24
209
+ ),
210
+ functional-heading03bold: (
211
+ fontFamily: "DN Sans",
212
+ fontWeight: Bold,
213
+ lineHeight: 32,
214
+ fontSize: 24
215
+ ),
198
216
  functional-heading01regular: (
199
217
  fontFamily: "DN Sans",
200
218
  fontWeight: Regular,
@@ -231,24 +249,6 @@ $typographyTokensScreenLarge: (
231
249
  fontWeight: Bold,
232
250
  lineHeight: 24
233
251
  ),
234
- functional-heading03regular: (
235
- fontFamily: "DN Sans",
236
- fontWeight: Regular,
237
- lineHeight: 32,
238
- fontSize: 24
239
- ),
240
- functional-heading03semibold: (
241
- fontFamily: "DN Sans",
242
- fontWeight: SemiBold,
243
- lineHeight: 32,
244
- fontSize: 24
245
- ),
246
- functional-heading03bold: (
247
- fontFamily: "DN Sans",
248
- fontWeight: Bold,
249
- lineHeight: 32,
250
- fontSize: 24
251
- ),
252
252
  functional-heading04regular: (
253
253
  fontFamily: "DN Sans",
254
254
  fontWeight: Regular,
@@ -286,122 +286,206 @@ $typographyTokensScreenLarge: (
286
286
  lineHeight: 48
287
287
  ),
288
288
  expressive-preamble01regular: (
289
- fontFamily: "DN Serif",
289
+ fontFamily: "DN Serif Text",
290
290
  fontWeight: Regular,
291
291
  fontSize: 20,
292
292
  lineHeight: 30
293
293
  ),
294
294
  expressive-preamble01semibold: (
295
- fontFamily: "DN Serif",
295
+ fontFamily: "DN Serif Text",
296
296
  fontWeight: SemiBold,
297
297
  fontSize: 20,
298
298
  lineHeight: 30
299
299
  ),
300
300
  expressive-preamble01bold: (
301
- fontFamily: "DN Serif",
301
+ fontFamily: "DN Serif Text",
302
302
  fontWeight: Bold,
303
303
  fontSize: 20,
304
304
  lineHeight: 30
305
305
  ),
306
306
  expressive-preamble01italicregular: (
307
- fontFamily: "DN Serif Italic",
307
+ fontFamily: "DN Serif Text",
308
308
  fontWeight: Regular,
309
309
  lineHeight: 30,
310
310
  fontSize: 20,
311
311
  fontStyle: italic
312
312
  ),
313
313
  expressive-preamble01italicsemibold: (
314
- fontFamily: "DN Serif Italic",
314
+ fontFamily: "DN Serif Text",
315
315
  fontWeight: SemiBold,
316
316
  lineHeight: 30,
317
317
  fontSize: 20,
318
318
  fontStyle: italic
319
319
  ),
320
320
  expressive-preamble01italicbold: (
321
- fontFamily: "DN Serif Italic",
321
+ fontFamily: "DN Serif Text",
322
322
  fontWeight: Bold,
323
323
  lineHeight: 30,
324
324
  fontSize: 20,
325
325
  fontStyle: italic
326
326
  ),
327
327
  expressive-body01regular: (
328
- fontFamily: "DN Serif",
328
+ fontFamily: "DN Serif Text",
329
329
  fontWeight: Regular,
330
330
  fontSize: 16,
331
331
  lineHeight: 24
332
332
  ),
333
333
  expressive-body01semibold: (
334
- fontFamily: "DN Serif",
334
+ fontFamily: "DN Serif Text",
335
335
  fontWeight: SemiBold,
336
336
  fontSize: 16,
337
337
  lineHeight: 24
338
338
  ),
339
339
  expressive-body01bold: (
340
- fontFamily: "DN Serif",
340
+ fontFamily: "DN Serif Text",
341
341
  fontWeight: Bold,
342
342
  fontSize: 16,
343
343
  lineHeight: 24
344
344
  ),
345
345
  expressive-body01italicregular: (
346
- fontFamily: "DN Serif Italic",
346
+ fontFamily: "DN Serif Text",
347
347
  fontWeight: Regular,
348
348
  lineHeight: 24,
349
349
  fontSize: 16,
350
350
  fontStyle: italic
351
351
  ),
352
352
  expressive-body01italicsemibold: (
353
- fontFamily: "DN Serif Italic",
353
+ fontFamily: "DN Serif Text",
354
354
  fontWeight: SemiBold,
355
355
  lineHeight: 24,
356
356
  fontSize: 16,
357
357
  fontStyle: italic
358
358
  ),
359
359
  expressive-body01italicbold: (
360
- fontFamily: "DN Serif Italic",
360
+ fontFamily: "DN Serif Text",
361
361
  fontWeight: Bold,
362
362
  lineHeight: 24,
363
363
  fontSize: 16,
364
364
  fontStyle: italic
365
365
  ),
366
366
  expressive-body02regular: (
367
- fontFamily: "DN Serif",
367
+ fontFamily: "DN Serif Text",
368
368
  fontWeight: Regular,
369
369
  lineHeight: 28,
370
370
  fontSize: 18
371
371
  ),
372
372
  expressive-body02semibold: (
373
- fontFamily: "DN Serif",
373
+ fontFamily: "DN Serif Text",
374
374
  fontWeight: SemiBold,
375
375
  lineHeight: 28,
376
376
  fontSize: 18
377
377
  ),
378
378
  expressive-body02bold: (
379
- fontFamily: "DN Serif",
379
+ fontFamily: "DN Serif Text",
380
380
  fontWeight: Bold,
381
381
  lineHeight: 28,
382
382
  fontSize: 18
383
383
  ),
384
384
  expressive-body02italicregular: (
385
- fontFamily: "DN Serif Italic",
385
+ fontFamily: "DN Serif Text",
386
386
  fontWeight: Regular,
387
387
  lineHeight: 28,
388
388
  fontSize: 18,
389
389
  fontStyle: italic
390
390
  ),
391
391
  expressive-body02italicsemibold: (
392
- fontFamily: "DN Serif Italic",
392
+ fontFamily: "DN Serif Text",
393
393
  fontWeight: SemiBold,
394
394
  lineHeight: 28,
395
395
  fontSize: 18,
396
396
  fontStyle: italic
397
397
  ),
398
398
  expressive-body02italicbold: (
399
- fontFamily: "DN Serif Italic",
399
+ fontFamily: "DN Serif Text",
400
400
  fontWeight: Bold,
401
401
  lineHeight: 28,
402
402
  fontSize: 18,
403
403
  fontStyle: italic
404
404
  ),
405
+ detaildropcap: (
406
+ fontFamily: "DN Serif Display",
407
+ fontWeight: Bold,
408
+ lineHeight: 78,
409
+ fontSize: 92
410
+ ),
411
+ detailarticle-standard: (
412
+ fontFamily: "DN Serif Display",
413
+ fontWeight: Bold,
414
+ lineHeight: 44,
415
+ fontSize: 40
416
+ ),
417
+ detailarticle-opinion: (
418
+ fontFamily: "DN Serif Display",
419
+ fontWeight: Regular,
420
+ lineHeight: 44,
421
+ fontSize: 40,
422
+ fontStyle: italic
423
+ ),
424
+ detailarticle-longread: (
425
+ fontFamily: "DN Serif Display",
426
+ fontWeight: Regular,
427
+ lineHeight: 52,
428
+ fontSize: 48
429
+ ),
430
+ detailarticle-longread-premium: (
431
+ fontFamily: "DN Serif Display",
432
+ fontWeight: Bold,
433
+ lineHeight: 52,
434
+ fontSize: 48
435
+ ),
436
+ detailarticle-quote: (
437
+ fontFamily: "DN Serif Display",
438
+ fontWeight: Bold,
439
+ lineHeight: 34,
440
+ fontSize: 28
441
+ ),
442
+ detailmellanrubrik: (
443
+ fontFamily: "DN Serif Display",
444
+ fontWeight: Bold,
445
+ lineHeight: 36,
446
+ fontSize: 32
447
+ ),
448
+ detailstandard-button: (
449
+ fontFamily: "DN Sans",
450
+ fontWeight: SemiBold,
451
+ lineHeight: 24,
452
+ fontSize: 16
453
+ ),
454
+ detailbottom-nav: (
455
+ fontFamily: "DN Sans",
456
+ fontWeight: SemiBold,
457
+ lineHeight: 16,
458
+ fontSize: 12,
459
+ letterSpacing: 0.2
460
+ ),
461
+ detailstandard-button-small: (
462
+ fontFamily: "DN Sans",
463
+ fontWeight: SemiBold,
464
+ lineHeight: 20,
465
+ fontSize: 14
466
+ ),
467
+ detailarticle-label: (
468
+ fontFamily: "DN Sans",
469
+ fontWeight: Bold,
470
+ lineHeight: 16,
471
+ fontSize: 12,
472
+ textCase: uppercase,
473
+ letterSpacing: 0.5
474
+ ),
475
+ detailmedryckare: (
476
+ fontFamily: "DN Serif Text",
477
+ fontWeight: Regular,
478
+ fontSize: 16,
479
+ lineHeight: 22
480
+ ),
481
+ detailbaota-xl-label: (
482
+ fontFamily: "DN Sans",
483
+ fontWeight: Bold,
484
+ lineHeight: 24,
485
+ fontSize: 16,
486
+ textCase: upperCase,
487
+ letterSpacing: 0.7
488
+ ),
405
489
  functional-body01regular: (
406
490
  fontFamily: "DN Sans",
407
491
  fontWeight: Regular,
@@ -495,83 +579,5 @@ $typographyTokensScreenLarge: (
495
579
  fontWeight: Bold,
496
580
  lineHeight: 16,
497
581
  fontSize: 12
498
- ),
499
- detaildropcap: (
500
- fontFamily: "DN Serif",
501
- fontWeight: Bold,
502
- lineHeight: 78,
503
- fontSize: 92
504
- ),
505
- detailarticle-standard: (
506
- fontFamily: "DN Serif",
507
- fontWeight: Bold,
508
- lineHeight: 44,
509
- fontSize: 40
510
- ),
511
- detailarticle-opinion: (
512
- fontFamily: "DN Serif",
513
- fontWeight: Regular,
514
- lineHeight: 44,
515
- fontSize: 40,
516
- fontStyle: italic
517
- ),
518
- detailarticle-longread: (
519
- fontFamily: "DN Serif",
520
- fontWeight: Regular,
521
- lineHeight: 52,
522
- fontSize: 48
523
- ),
524
- detailarticle-longread-premium: (
525
- fontFamily: "DN Serif",
526
- fontWeight: Bold,
527
- lineHeight: 52,
528
- fontSize: 48
529
- ),
530
- detailarticle-quote: (
531
- fontFamily: "DN Serif",
532
- fontWeight: Bold,
533
- lineHeight: 34,
534
- fontSize: 28
535
- ),
536
- detailstandard-button: (
537
- fontFamily: "DN Sans",
538
- fontWeight: SemiBold,
539
- lineHeight: 24,
540
- fontSize: 16
541
- ),
542
- detailbottom-nav: (
543
- fontFamily: "DN Sans",
544
- fontWeight: SemiBold,
545
- lineHeight: 16,
546
- fontSize: 12,
547
- letterSpacing: 0.2
548
- ),
549
- detailstandard-button-small: (
550
- fontFamily: "DN Sans",
551
- fontWeight: SemiBold,
552
- lineHeight: 20,
553
- fontSize: 14
554
- ),
555
- detailarticle-label: (
556
- fontFamily: "DN Sans",
557
- fontWeight: Bold,
558
- lineHeight: 16,
559
- fontSize: 12,
560
- textCase: uppercase,
561
- letterSpacing: 0.5
562
- ),
563
- detailmedryckare: (
564
- fontFamily: "DN Serif",
565
- fontWeight: Regular,
566
- fontSize: 16,
567
- lineHeight: 22
568
- ),
569
- detailbaota-xl-label: (
570
- fontFamily: "DN Sans",
571
- fontWeight: Bold,
572
- lineHeight: 24,
573
- fontSize: 16,
574
- textCase: upperCase,
575
- letterSpacing: 0.7
576
582
  )
577
583
  );