@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/typographyTokensScreenExtraLarge.scss CHANGED
@@ -1,18 +1,18 @@
1
1
  $typographyTokensScreenExtraLarge: (
2
2
  expressive-heading03regular: (
3
- fontFamily: "DN Serif",
3
+ fontFamily: "DN Serif Display",
4
4
  fontWeight: Regular,
5
5
  fontSize: 36,
6
6
  lineHeight: 40
7
7
  ),
8
8
  expressive-heading03semibold: (
9
- fontFamily: "DN Serif",
9
+ fontFamily: "DN Serif Display",
10
10
  fontWeight: SemiBold,
11
11
  fontSize: 36,
12
12
  lineHeight: 40
13
13
  ),
14
14
  expressive-heading03bold: (
15
- fontFamily: "DN Serif",
15
+ fontFamily: "DN Serif Display",
16
16
  fontWeight: Bold,
17
17
  fontSize: 36,
18
18
  lineHeight: 40
@@ -21,37 +21,37 @@ $typographyTokensScreenExtraLarge: (
21
21
  fontSize: 36,
22
22
  lineHeight: 40,
23
23
  fontWeight: Regular,
24
- fontFamily: "DN Serif Italic",
24
+ fontFamily: "DN Serif Display",
25
25
  fontStyle: italic
26
26
  ),
27
27
  expressive-heading03italicsemibold: (
28
28
  fontSize: 36,
29
29
  lineHeight: 40,
30
30
  fontWeight: SemiBold,
31
- fontFamily: "DN Serif Italic",
31
+ fontFamily: "DN Serif Display",
32
32
  fontStyle: italic
33
33
  ),
34
34
  expressive-heading03italicbold: (
35
35
  fontSize: 36,
36
36
  lineHeight: 40,
37
37
  fontWeight: Bold,
38
- fontFamily: "DN Serif Italic",
38
+ fontFamily: "DN Serif Display",
39
39
  fontStyle: italic
40
40
  ),
41
41
  expressive-heading04regular: (
42
- fontFamily: "DN Serif",
42
+ fontFamily: "DN Serif Display",
43
43
  fontWeight: Regular,
44
44
  fontSize: 56,
45
45
  lineHeight: 60
46
46
  ),
47
47
  expressive-heading04semibold: (
48
- fontFamily: "DN Serif",
48
+ fontFamily: "DN Serif Display",
49
49
  fontWeight: SemiBold,
50
50
  fontSize: 56,
51
51
  lineHeight: 60
52
52
  ),
53
53
  expressive-heading04bold: (
54
- fontFamily: "DN Serif",
54
+ fontFamily: "DN Serif Display",
55
55
  fontWeight: Bold,
56
56
  fontSize: 56,
57
57
  lineHeight: 60
@@ -60,76 +60,76 @@ $typographyTokensScreenExtraLarge: (
60
60
  fontSize: 56,
61
61
  lineHeight: 60,
62
62
  fontWeight: Regular,
63
- fontFamily: "DN Serif Italic",
63
+ fontFamily: "DN Serif Display",
64
64
  fontStyle: italic
65
65
  ),
66
66
  expressive-heading04italicsemibold: (
67
67
  fontSize: 56,
68
68
  lineHeight: 60,
69
69
  fontWeight: SemiBold,
70
- fontFamily: "DN Serif Italic",
70
+ fontFamily: "DN Serif Display",
71
71
  fontStyle: italic
72
72
  ),
73
73
  expressive-heading04italicbold: (
74
74
  fontSize: 56,
75
75
  lineHeight: 60,
76
76
  fontWeight: Bold,
77
- fontFamily: "DN Serif Italic",
77
+ fontFamily: "DN Serif Display",
78
78
  fontStyle: italic
79
79
  ),
80
80
  expressive-heading05regular: (
81
- fontFamily: "DN Serif",
81
+ fontFamily: "DN Serif Display",
82
82
  fontWeight: Regular,
83
83
  lineHeight: 88,
84
84
  fontSize: 80
85
85
  ),
86
86
  expressive-heading05semibold: (
87
- fontFamily: "DN Serif",
87
+ fontFamily: "DN Serif Display",
88
88
  fontWeight: SemiBold,
89
89
  lineHeight: 88,
90
90
  fontSize: 80
91
91
  ),
92
92
  expressive-heading05bold: (
93
- fontFamily: "DN Serif",
93
+ fontFamily: "DN Serif Display",
94
94
  fontWeight: Bold,
95
95
  lineHeight: 88,
96
96
  fontSize: 80
97
97
  ),
98
98
  expressive-heading05italicregular: (
99
- fontFamily: "DN Serif Italic",
99
+ fontFamily: "DN Serif Display",
100
100
  fontWeight: Regular,
101
101
  fontSize: 80,
102
102
  lineHeight: 88,
103
103
  fontStyle: italic
104
104
  ),
105
105
  expressive-heading05italicsemibold: (
106
- fontFamily: "DN Serif Italic",
106
+ fontFamily: "DN Serif Display",
107
107
  fontWeight: SemiBold,
108
108
  fontSize: 80,
109
109
  lineHeight: 88,
110
110
  fontStyle: italic
111
111
  ),
112
112
  expressive-heading05italicbold: (
113
- fontFamily: "DN Serif Italic",
113
+ fontFamily: "DN Serif Display",
114
114
  fontWeight: Bold,
115
115
  fontSize: 80,
116
116
  lineHeight: 88,
117
117
  fontStyle: italic
118
118
  ),
119
119
  expressive-heading01regular: (
120
- fontFamily: "DN Serif",
120
+ fontFamily: "DN Serif Text",
121
121
  fontWeight: Regular,
122
122
  fontSize: 16,
123
123
  lineHeight: 20
124
124
  ),
125
125
  expressive-heading01semibold: (
126
- fontFamily: "DN Serif",
126
+ fontFamily: "DN Serif Text",
127
127
  fontWeight: SemiBold,
128
128
  fontSize: 16,
129
129
  lineHeight: 20
130
130
  ),
131
131
  expressive-heading01bold: (
132
- fontFamily: "DN Serif",
132
+ fontFamily: "DN Serif Text",
133
133
  fontWeight: Bold,
134
134
  fontSize: 16,
135
135
  lineHeight: 20
@@ -137,39 +137,39 @@ $typographyTokensScreenExtraLarge: (
137
137
  expressive-heading01italicregular: (
138
138
  lineHeight: 20,
139
139
  fontSize: 16,
140
- fontFamily: "DN Serif Italic",
140
+ fontFamily: "DN Serif Text",
141
141
  fontWeight: Regular,
142
142
  fontStyle: italic
143
143
  ),
144
144
  expressive-heading01italicsemibold: (
145
145
  lineHeight: 20,
146
146
  fontSize: 16,
147
- fontFamily: "DN Serif Italic",
147
+ fontFamily: "DN Serif Text",
148
148
  fontWeight: SemiBold,
149
149
  fontStyle: italic
150
150
  ),
151
151
  expressive-heading01italicbold: (
152
152
  lineHeight: 20,
153
153
  fontSize: 16,
154
- fontFamily: "DN Serif Italic",
154
+ fontFamily: "DN Serif Text",
155
155
  fontWeight: Bold,
156
156
  fontStyle: italic
157
157
  ),
158
158
  expressive-heading02regular: (
159
- fontFamily: "DN Serif",
159
+ fontFamily: "DN Serif Headline",
160
160
  fontWeight: Regular,
161
161
  fontSize: 22,
162
162
  lineHeight: 26,
163
163
  paragraphSpacing: 16
164
164
  ),
165
165
  expressive-heading02semibold: (
166
- fontFamily: "DN Serif",
166
+ fontFamily: "DN Serif Headline",
167
167
  fontWeight: SemiBold,
168
168
  fontSize: 22,
169
169
  lineHeight: 26
170
170
  ),
171
171
  expressive-heading02bold: (
172
- fontFamily: "DN Serif",
172
+ fontFamily: "DN Serif Headline",
173
173
  fontWeight: Bold,
174
174
  fontSize: 22,
175
175
  lineHeight: 26
@@ -178,23 +178,125 @@ $typographyTokensScreenExtraLarge: (
178
178
  fontSize: 22,
179
179
  lineHeight: 26,
180
180
  fontWeight: Regular,
181
- fontFamily: "DN Serif Italic",
181
+ fontFamily: "DN Serif Headline",
182
182
  fontStyle: italic
183
183
  ),
184
184
  expressive-heading02italicsemibold: (
185
185
  fontSize: 22,
186
186
  lineHeight: 26,
187
187
  fontWeight: SemiBold,
188
- fontFamily: "DN Serif Italic",
188
+ fontFamily: "DN Serif Headline",
189
189
  fontStyle: italic
190
190
  ),
191
191
  expressive-heading02italicbold: (
192
192
  fontSize: 22,
193
193
  lineHeight: 26,
194
194
  fontWeight: Bold,
195
- fontFamily: "DN Serif Italic",
195
+ fontFamily: "DN Serif Headline",
196
196
  fontStyle: italic
197
197
  ),
198
+ detailarticle-standard: (
199
+ fontFamily: "DN Serif Display",
200
+ fontWeight: Bold,
201
+ lineHeight: 52,
202
+ fontSize: 48
203
+ ),
204
+ detailarticle-opinion: (
205
+ fontFamily: "DN Serif Display",
206
+ fontWeight: Regular,
207
+ lineHeight: 52,
208
+ fontSize: 48,
209
+ fontStyle: italic
210
+ ),
211
+ detailarticle-longread: (
212
+ fontFamily: "DN Serif Display",
213
+ fontWeight: Regular,
214
+ lineHeight: 64,
215
+ fontSize: 56
216
+ ),
217
+ detailarticle-longread-premium: (
218
+ fontFamily: "DN Serif Display",
219
+ fontWeight: Bold,
220
+ lineHeight: 64,
221
+ fontSize: 56
222
+ ),
223
+ detaildropcap: (
224
+ fontFamily: "DN Serif Display",
225
+ fontWeight: Bold,
226
+ lineHeight: 78,
227
+ fontSize: 92
228
+ ),
229
+ detailarticle-quote: (
230
+ fontFamily: "DN Serif Display",
231
+ fontWeight: Bold,
232
+ lineHeight: 34,
233
+ fontSize: 28
234
+ ),
235
+ detailmellanrubrik: (
236
+ fontFamily: "DN Serif Display",
237
+ fontWeight: Bold,
238
+ lineHeight: 36,
239
+ fontSize: 32
240
+ ),
241
+ detailstandard-button: (
242
+ fontFamily: "DN Sans",
243
+ fontWeight: SemiBold,
244
+ lineHeight: 24,
245
+ fontSize: 16
246
+ ),
247
+ detailbottom-nav: (
248
+ fontFamily: "DN Sans",
249
+ fontWeight: SemiBold,
250
+ lineHeight: 16,
251
+ fontSize: 12,
252
+ letterSpacing: 0.2
253
+ ),
254
+ detailstandard-button-small: (
255
+ fontFamily: "DN Sans",
256
+ fontWeight: SemiBold,
257
+ lineHeight: 20,
258
+ fontSize: 14
259
+ ),
260
+ detailarticle-label: (
261
+ fontFamily: "DN Sans",
262
+ fontWeight: Bold,
263
+ lineHeight: 16,
264
+ fontSize: 12,
265
+ textCase: uppercase,
266
+ letterSpacing: 0.5
267
+ ),
268
+ detailmedryckare: (
269
+ fontFamily: "DN Serif Text",
270
+ fontWeight: Regular,
271
+ fontSize: 16,
272
+ lineHeight: 22
273
+ ),
274
+ detailbaota-xl-label: (
275
+ fontFamily: "DN Sans",
276
+ fontWeight: Bold,
277
+ lineHeight: 24,
278
+ fontSize: 16,
279
+ textCase: upperCase,
280
+ letterSpacing: 0.7
281
+ ),
282
+ functional-heading03regular: (
283
+ fontFamily: "DN Sans",
284
+ fontWeight: Regular,
285
+ lineHeight: 32,
286
+ fontSize: 24
287
+ ),
288
+ functional-heading03semibold: (
289
+ fontFamily: "DN Sans",
290
+ fontWeight: SemiBold,
291
+ lineHeight: 32,
292
+ fontSize: 24
293
+ ),
294
+ functional-heading03bold: (
295
+ fontFamily: "DN Sans",
296
+ fontWeight: Bold,
297
+ lineHeight: 32,
298
+ fontSize: 24
299
+ ),
198
300
  functional-heading01regular: (
199
301
  fontFamily: "DN Sans",
200
302
  fontWeight: Regular,
@@ -231,24 +333,6 @@ $typographyTokensScreenExtraLarge: (
231
333
  fontWeight: Bold,
232
334
  lineHeight: 24
233
335
  ),
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
336
  functional-heading04regular: (
253
337
  fontFamily: "DN Sans",
254
338
  fontWeight: Regular,
@@ -286,117 +370,117 @@ $typographyTokensScreenExtraLarge: (
286
370
  lineHeight: 48
287
371
  ),
288
372
  expressive-preamble01regular: (
289
- fontFamily: "DN Serif",
373
+ fontFamily: "DN Serif Text",
290
374
  fontWeight: Regular,
291
375
  fontSize: 20,
292
376
  lineHeight: 30
293
377
  ),
294
378
  expressive-preamble01semibold: (
295
- fontFamily: "DN Serif",
379
+ fontFamily: "DN Serif Text",
296
380
  fontWeight: SemiBold,
297
381
  fontSize: 20,
298
382
  lineHeight: 30
299
383
  ),
300
384
  expressive-preamble01bold: (
301
- fontFamily: "DN Serif",
385
+ fontFamily: "DN Serif Text",
302
386
  fontWeight: Bold,
303
387
  fontSize: 20,
304
388
  lineHeight: 30
305
389
  ),
306
390
  expressive-preamble01italicregular: (
307
- fontFamily: "DN Serif Italic",
391
+ fontFamily: "DN Serif Text",
308
392
  fontWeight: Regular,
309
393
  lineHeight: 30,
310
394
  fontSize: 20,
311
395
  fontStyle: italic
312
396
  ),
313
397
  expressive-preamble01italicsemibold: (
314
- fontFamily: "DN Serif Italic",
398
+ fontFamily: "DN Serif Text",
315
399
  fontWeight: SemiBold,
316
400
  lineHeight: 30,
317
401
  fontSize: 20,
318
402
  fontStyle: italic
319
403
  ),
320
404
  expressive-preamble01italicbold: (
321
- fontFamily: "DN Serif Italic",
405
+ fontFamily: "DN Serif Text",
322
406
  fontWeight: Bold,
323
407
  lineHeight: 30,
324
408
  fontSize: 20,
325
409
  fontStyle: italic
326
410
  ),
327
411
  expressive-body01regular: (
328
- fontFamily: "DN Serif",
412
+ fontFamily: "DN Serif Text",
329
413
  fontWeight: Regular,
330
414
  fontSize: 16,
331
415
  lineHeight: 24
332
416
  ),
333
417
  expressive-body01semibold: (
334
- fontFamily: "DN Serif",
418
+ fontFamily: "DN Serif Text",
335
419
  fontWeight: SemiBold,
336
420
  fontSize: 16,
337
421
  lineHeight: 24
338
422
  ),
339
423
  expressive-body01bold: (
340
- fontFamily: "DN Serif",
424
+ fontFamily: "DN Serif Text",
341
425
  fontWeight: Bold,
342
426
  fontSize: 16,
343
427
  lineHeight: 24
344
428
  ),
345
429
  expressive-body01italicregular: (
346
- fontFamily: "DN Serif Italic",
430
+ fontFamily: "DN Serif Text",
347
431
  fontWeight: Regular,
348
432
  lineHeight: 24,
349
433
  fontSize: 16,
350
434
  fontStyle: italic
351
435
  ),
352
436
  expressive-body01italicsemibold: (
353
- fontFamily: "DN Serif Italic",
437
+ fontFamily: "DN Serif Text",
354
438
  fontWeight: SemiBold,
355
439
  lineHeight: 24,
356
440
  fontSize: 16,
357
441
  fontStyle: italic
358
442
  ),
359
443
  expressive-body01italicbold: (
360
- fontFamily: "DN Serif Italic",
444
+ fontFamily: "DN Serif Text",
361
445
  fontWeight: Bold,
362
446
  lineHeight: 24,
363
447
  fontSize: 16,
364
448
  fontStyle: italic
365
449
  ),
366
450
  expressive-body02regular: (
367
- fontFamily: "DN Serif",
451
+ fontFamily: "DN Serif Text",
368
452
  fontWeight: Regular,
369
453
  lineHeight: 28,
370
454
  fontSize: 18
371
455
  ),
372
456
  expressive-body02semibold: (
373
- fontFamily: "DN Serif",
457
+ fontFamily: "DN Serif Text",
374
458
  fontWeight: SemiBold,
375
459
  lineHeight: 28,
376
460
  fontSize: 18
377
461
  ),
378
462
  expressive-body02bold: (
379
- fontFamily: "DN Serif",
463
+ fontFamily: "DN Serif Text",
380
464
  fontWeight: Bold,
381
465
  lineHeight: 28,
382
466
  fontSize: 18
383
467
  ),
384
468
  expressive-body02italicregular: (
385
- fontFamily: "DN Serif Italic",
469
+ fontFamily: "DN Serif Text",
386
470
  fontWeight: Regular,
387
471
  lineHeight: 28,
388
472
  fontSize: 18,
389
473
  fontStyle: italic
390
474
  ),
391
475
  expressive-body02italicsemibold: (
392
- fontFamily: "DN Serif Italic",
476
+ fontFamily: "DN Serif Text",
393
477
  fontWeight: SemiBold,
394
478
  lineHeight: 28,
395
479
  fontSize: 18,
396
480
  fontStyle: italic
397
481
  ),
398
482
  expressive-body02italicbold: (
399
- fontFamily: "DN Serif Italic",
483
+ fontFamily: "DN Serif Text",
400
484
  fontWeight: Bold,
401
485
  lineHeight: 28,
402
486
  fontSize: 18,
@@ -495,83 +579,5 @@ $typographyTokensScreenExtraLarge: (
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
  );