@bonniernews/dn-design-system-web 3.0.0-alpha.99 → 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 +138 -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 +79 -74
  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,21 +178,21 @@ $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
198
  detailarticle-standard: (
@@ -202,37 +202,42 @@ $typographyTokensScreenExtraLarge: (
202
202
  fontSize: 48
203
203
  ),
204
204
  detailarticle-opinion: (
205
- fontFamily: "DN Serif Italic",
205
+ fontFamily: "DN Serif Display",
206
206
  fontWeight: Regular,
207
207
  lineHeight: 52,
208
208
  fontSize: 48,
209
209
  fontStyle: italic
210
210
  ),
211
211
  detailarticle-longread: (
212
- fontFamily: "DN Serif",
212
+ fontFamily: "DN Serif Display",
213
213
  fontWeight: Regular,
214
214
  lineHeight: 64,
215
- fontSize: 56,
216
- fontStyle: italic
215
+ fontSize: 56
217
216
  ),
218
217
  detailarticle-longread-premium: (
219
- fontFamily: "DN Serif",
218
+ fontFamily: "DN Serif Display",
220
219
  fontWeight: Bold,
221
220
  lineHeight: 64,
222
221
  fontSize: 56
223
222
  ),
224
223
  detaildropcap: (
225
- fontFamily: "DN Serif",
224
+ fontFamily: "DN Serif Display",
226
225
  fontWeight: Bold,
227
226
  lineHeight: 78,
228
227
  fontSize: 92
229
228
  ),
230
229
  detailarticle-quote: (
231
- fontFamily: "DN Serif",
230
+ fontFamily: "DN Serif Display",
232
231
  fontWeight: Bold,
233
232
  lineHeight: 34,
234
233
  fontSize: 28
235
234
  ),
235
+ detailmellanrubrik: (
236
+ fontFamily: "DN Serif Display",
237
+ fontWeight: Bold,
238
+ lineHeight: 36,
239
+ fontSize: 32
240
+ ),
236
241
  detailstandard-button: (
237
242
  fontFamily: "DN Sans",
238
243
  fontWeight: SemiBold,
@@ -261,7 +266,7 @@ $typographyTokensScreenExtraLarge: (
261
266
  letterSpacing: 0.5
262
267
  ),
263
268
  detailmedryckare: (
264
- fontFamily: "DN Serif",
269
+ fontFamily: "DN Serif Text",
265
270
  fontWeight: Regular,
266
271
  fontSize: 16,
267
272
  lineHeight: 22
@@ -274,6 +279,24 @@ $typographyTokensScreenExtraLarge: (
274
279
  textCase: upperCase,
275
280
  letterSpacing: 0.7
276
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
+ ),
277
300
  functional-heading01regular: (
278
301
  fontFamily: "DN Sans",
279
302
  fontWeight: Regular,
@@ -310,24 +333,6 @@ $typographyTokensScreenExtraLarge: (
310
333
  fontWeight: Bold,
311
334
  lineHeight: 24
312
335
  ),
313
- functional-heading03regular: (
314
- fontFamily: "DN Sans",
315
- fontWeight: Regular,
316
- lineHeight: 32,
317
- fontSize: 24
318
- ),
319
- functional-heading03semibold: (
320
- fontFamily: "DN Sans",
321
- fontWeight: SemiBold,
322
- lineHeight: 32,
323
- fontSize: 24
324
- ),
325
- functional-heading03bold: (
326
- fontFamily: "DN Sans",
327
- fontWeight: Bold,
328
- lineHeight: 32,
329
- fontSize: 24
330
- ),
331
336
  functional-heading04regular: (
332
337
  fontFamily: "DN Sans",
333
338
  fontWeight: Regular,
@@ -365,117 +370,117 @@ $typographyTokensScreenExtraLarge: (
365
370
  lineHeight: 48
366
371
  ),
367
372
  expressive-preamble01regular: (
368
- fontFamily: "DN Serif",
373
+ fontFamily: "DN Serif Text",
369
374
  fontWeight: Regular,
370
375
  fontSize: 20,
371
376
  lineHeight: 30
372
377
  ),
373
378
  expressive-preamble01semibold: (
374
- fontFamily: "DN Serif",
379
+ fontFamily: "DN Serif Text",
375
380
  fontWeight: SemiBold,
376
381
  fontSize: 20,
377
382
  lineHeight: 30
378
383
  ),
379
384
  expressive-preamble01bold: (
380
- fontFamily: "DN Serif",
385
+ fontFamily: "DN Serif Text",
381
386
  fontWeight: Bold,
382
387
  fontSize: 20,
383
388
  lineHeight: 30
384
389
  ),
385
390
  expressive-preamble01italicregular: (
386
- fontFamily: "DN Serif Italic",
391
+ fontFamily: "DN Serif Text",
387
392
  fontWeight: Regular,
388
393
  lineHeight: 30,
389
394
  fontSize: 20,
390
395
  fontStyle: italic
391
396
  ),
392
397
  expressive-preamble01italicsemibold: (
393
- fontFamily: "DN Serif Italic",
398
+ fontFamily: "DN Serif Text",
394
399
  fontWeight: SemiBold,
395
400
  lineHeight: 30,
396
401
  fontSize: 20,
397
402
  fontStyle: italic
398
403
  ),
399
404
  expressive-preamble01italicbold: (
400
- fontFamily: "DN Serif Italic",
405
+ fontFamily: "DN Serif Text",
401
406
  fontWeight: Bold,
402
407
  lineHeight: 30,
403
408
  fontSize: 20,
404
409
  fontStyle: italic
405
410
  ),
406
411
  expressive-body01regular: (
407
- fontFamily: "DN Serif",
412
+ fontFamily: "DN Serif Text",
408
413
  fontWeight: Regular,
409
414
  fontSize: 16,
410
415
  lineHeight: 24
411
416
  ),
412
417
  expressive-body01semibold: (
413
- fontFamily: "DN Serif",
418
+ fontFamily: "DN Serif Text",
414
419
  fontWeight: SemiBold,
415
420
  fontSize: 16,
416
421
  lineHeight: 24
417
422
  ),
418
423
  expressive-body01bold: (
419
- fontFamily: "DN Serif",
424
+ fontFamily: "DN Serif Text",
420
425
  fontWeight: Bold,
421
426
  fontSize: 16,
422
427
  lineHeight: 24
423
428
  ),
424
429
  expressive-body01italicregular: (
425
- fontFamily: "DN Serif Italic",
430
+ fontFamily: "DN Serif Text",
426
431
  fontWeight: Regular,
427
432
  lineHeight: 24,
428
433
  fontSize: 16,
429
434
  fontStyle: italic
430
435
  ),
431
436
  expressive-body01italicsemibold: (
432
- fontFamily: "DN Serif Italic",
437
+ fontFamily: "DN Serif Text",
433
438
  fontWeight: SemiBold,
434
439
  lineHeight: 24,
435
440
  fontSize: 16,
436
441
  fontStyle: italic
437
442
  ),
438
443
  expressive-body01italicbold: (
439
- fontFamily: "DN Serif Italic",
444
+ fontFamily: "DN Serif Text",
440
445
  fontWeight: Bold,
441
446
  lineHeight: 24,
442
447
  fontSize: 16,
443
448
  fontStyle: italic
444
449
  ),
445
450
  expressive-body02regular: (
446
- fontFamily: "DN Serif",
451
+ fontFamily: "DN Serif Text",
447
452
  fontWeight: Regular,
448
453
  lineHeight: 28,
449
454
  fontSize: 18
450
455
  ),
451
456
  expressive-body02semibold: (
452
- fontFamily: "DN Serif",
457
+ fontFamily: "DN Serif Text",
453
458
  fontWeight: SemiBold,
454
459
  lineHeight: 28,
455
460
  fontSize: 18
456
461
  ),
457
462
  expressive-body02bold: (
458
- fontFamily: "DN Serif",
463
+ fontFamily: "DN Serif Text",
459
464
  fontWeight: Bold,
460
465
  lineHeight: 28,
461
466
  fontSize: 18
462
467
  ),
463
468
  expressive-body02italicregular: (
464
- fontFamily: "DN Serif Italic",
469
+ fontFamily: "DN Serif Text",
465
470
  fontWeight: Regular,
466
471
  lineHeight: 28,
467
472
  fontSize: 18,
468
473
  fontStyle: italic
469
474
  ),
470
475
  expressive-body02italicsemibold: (
471
- fontFamily: "DN Serif Italic",
476
+ fontFamily: "DN Serif Text",
472
477
  fontWeight: SemiBold,
473
478
  lineHeight: 28,
474
479
  fontSize: 18,
475
480
  fontStyle: italic
476
481
  ),
477
482
  expressive-body02italicbold: (
478
- fontFamily: "DN Serif Italic",
483
+ fontFamily: "DN Serif Text",
479
484
  fontWeight: Bold,
480
485
  lineHeight: 28,
481
486
  fontSize: 18,