@bonniernews/dn-design-system-web 12.0.1 → 14.0.0

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 (36) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/assets/teaser/teaser.scss +3 -2
  3. package/components/buddy-menu/buddy-menu.scss +1 -1
  4. package/components/floating-button/floating-button.scss +1 -1
  5. package/components/icon-button/icon-button.scss +1 -1
  6. package/components/teaser-list-vertical/teaser-list-vertical.scss +1 -1
  7. package/components/teaser-onsite/teaser-onsite.scss +1 -1
  8. package/foundations/helpers/typography.scss +33 -8
  9. package/foundations/icons/icon.njk +5 -0
  10. package/foundations/icons/sprite.njk +1 -1
  11. package/foundations/icons/sprite.svg +1 -1
  12. package/foundations/icons/svg/x.svg +3 -0
  13. package/foundations/typography/README.md +5 -2
  14. package/foundations/variables/deprecated/typographyTokensList.scss +78 -0
  15. package/foundations/variables/deprecated/typographyTokensScreenExtraLarge.scss +499 -0
  16. package/foundations/variables/deprecated/typographyTokensScreenLarge.scss +499 -0
  17. package/foundations/variables/deprecated/typographyTokensScreenSmall.scss +504 -0
  18. package/foundations/variables/opacity.scss +1 -1
  19. package/foundations/variables/shadowsDnDarkTokens.scss +14 -22
  20. package/foundations/variables/shadowsDnLightTokens.scss +14 -22
  21. package/foundations/variables/shadowsTokensList.scss +4 -5
  22. package/foundations/variables/typographyFontWeight.scss +4 -0
  23. package/foundations/variables/typographyLetterSpacing.scss +3 -0
  24. package/foundations/variables/typographyLineHeight.scss +4 -0
  25. package/foundations/variables/typographyTokensList.scss +1 -80
  26. package/foundations/variables/typographyTokensScreenExtraLarge.scss +18 -522
  27. package/foundations/variables/typographyTokensScreenLarge.scss +18 -522
  28. package/foundations/variables/typographyTokensScreenSmall.scss +19 -528
  29. package/package.json +1 -1
  30. package/tokens/deprecated-typography-list.json +80 -0
  31. package/tokens/icon-list.json +2 -1
  32. package/tokens/shadows-css-variables.json +4 -5
  33. package/tokens/typography-list.json +1 -80
  34. package/foundations/variables/typographyAddons.scss +0 -11
  35. package/tokens/spacing-component-list.json +0 -12
  36. package/tokens/spacing-layout-list.json +0 -17
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -1,407 +1,4 @@
1
1
  $typographyTokensScreenLarge: (
2
- expressive-heading01regular: (
3
- fontFamily: "DN Serif Text",
4
- fontWeight: Regular,
5
- fontSize: 16,
6
- lineHeight: 1.2
7
- ),
8
- expressive-heading01semibold: (
9
- fontFamily: "DN Serif Text",
10
- fontWeight: SemiBold,
11
- fontSize: 16,
12
- lineHeight: 1.2
13
- ),
14
- expressive-heading01bold: (
15
- fontFamily: "DN Serif Text",
16
- fontWeight: Bold,
17
- fontSize: 16,
18
- lineHeight: 1.2
19
- ),
20
- expressive-heading01italicregular: (
21
- lineHeight: 1.2,
22
- fontSize: 16,
23
- fontFamily: "DN Serif Text",
24
- fontWeight: Medium,
25
- fontStyle: italic
26
- ),
27
- expressive-heading01italicsemibold: (
28
- lineHeight: 1.2,
29
- fontSize: 16,
30
- fontFamily: "DN Serif Text",
31
- fontWeight: SemiBold,
32
- fontStyle: italic
33
- ),
34
- expressive-heading01italicbold: (
35
- lineHeight: 1.2,
36
- fontSize: 16,
37
- fontFamily: "DN Serif Text",
38
- fontWeight: Bold,
39
- fontStyle: italic
40
- ),
41
- expressive-heading02regular: (
42
- fontFamily: "DN Serif Headline",
43
- fontWeight: Regular,
44
- fontSize: 22,
45
- lineHeight: 1.2,
46
- paragraphSpacing: 16
47
- ),
48
- expressive-heading02semibold: (
49
- fontFamily: "DN Serif Headline",
50
- fontWeight: SemiBold,
51
- fontSize: 22,
52
- lineHeight: 1.2
53
- ),
54
- expressive-heading02bold: (
55
- fontFamily: "DN Serif Headline",
56
- fontWeight: Bold,
57
- fontSize: 22,
58
- lineHeight: 1.2
59
- ),
60
- expressive-heading02italicregular: (
61
- fontSize: 22,
62
- lineHeight: 1.2,
63
- fontWeight: Regular,
64
- fontFamily: "DN Serif Headline",
65
- fontStyle: italic
66
- ),
67
- expressive-heading02italicsemibold: (
68
- fontSize: 22,
69
- lineHeight: 1.2,
70
- fontWeight: SemiBold,
71
- fontFamily: "DN Serif Headline",
72
- fontStyle: italic
73
- ),
74
- expressive-heading02italicbold: (
75
- fontSize: 22,
76
- lineHeight: 1.2,
77
- fontWeight: Bold,
78
- fontFamily: "DN Serif Headline",
79
- fontStyle: italic
80
- ),
81
- expressive-heading03regular: (
82
- fontFamily: "DN Serif Headline",
83
- fontWeight: Regular,
84
- fontSize: 26,
85
- lineHeight: 1.1
86
- ),
87
- expressive-heading03semibold: (
88
- fontFamily: "DN Serif Headline",
89
- fontWeight: SemiBold,
90
- fontSize: 26,
91
- lineHeight: 1.1
92
- ),
93
- expressive-heading03bold: (
94
- fontFamily: "DN Serif Headline",
95
- fontWeight: Bold,
96
- fontSize: 26,
97
- lineHeight: 1.1
98
- ),
99
- expressive-heading03italicregular: (
100
- fontSize: 26,
101
- lineHeight: 1.1,
102
- fontWeight: Regular,
103
- fontFamily: "DN Serif Headline",
104
- fontStyle: italic
105
- ),
106
- expressive-heading03italicsemibold: (
107
- fontSize: 26,
108
- lineHeight: 1.1,
109
- fontWeight: SemiBold,
110
- fontFamily: "DN Serif Headline",
111
- fontStyle: italic
112
- ),
113
- expressive-heading03italicbold: (
114
- fontSize: 26,
115
- lineHeight: 1.1,
116
- fontWeight: Bold,
117
- fontFamily: "DN Serif Headline",
118
- fontStyle: italic
119
- ),
120
- expressive-heading04regular: (
121
- fontFamily: "DN Serif Display",
122
- fontWeight: Regular,
123
- fontSize: 40,
124
- lineHeight: 1.1
125
- ),
126
- expressive-heading04semibold: (
127
- fontFamily: "DN Serif Display",
128
- fontWeight: SemiBold,
129
- fontSize: 40,
130
- lineHeight: 1.1
131
- ),
132
- expressive-heading04bold: (
133
- fontFamily: "DN Serif Display",
134
- fontWeight: Bold,
135
- fontSize: 40,
136
- lineHeight: 1.1
137
- ),
138
- expressive-heading04italicregular: (
139
- fontSize: 40,
140
- fontWeight: Regular,
141
- fontFamily: "DN Serif Display",
142
- lineHeight: 1.1,
143
- fontStyle: italic
144
- ),
145
- expressive-heading04italicsemibold: (
146
- fontSize: 40,
147
- lineHeight: 1.1,
148
- fontWeight: SemiBold,
149
- fontFamily: "DN Serif Display",
150
- fontStyle: italic
151
- ),
152
- expressive-heading04italicbold: (
153
- fontSize: 40,
154
- lineHeight: 1.1,
155
- fontWeight: Bold,
156
- fontFamily: "DN Serif Display",
157
- fontStyle: italic
158
- ),
159
- expressive-heading05regular: (
160
- fontFamily: "DN Serif Display",
161
- fontWeight: Regular,
162
- lineHeight: 1.1,
163
- fontSize: 56
164
- ),
165
- expressive-heading05semibold: (
166
- fontFamily: "DN Serif Display",
167
- fontWeight: SemiBold,
168
- lineHeight: 1.1,
169
- fontSize: 56
170
- ),
171
- expressive-heading05bold: (
172
- fontFamily: "DN Serif Display",
173
- fontWeight: Bold,
174
- lineHeight: 1.1,
175
- fontSize: 56
176
- ),
177
- expressive-heading05italicregular: (
178
- fontFamily: "DN Serif Display",
179
- fontWeight: Regular,
180
- fontSize: 56,
181
- lineHeight: 1.1,
182
- fontStyle: italic
183
- ),
184
- expressive-heading05italicsemibold: (
185
- fontFamily: "DN Serif Display",
186
- fontWeight: SemiBold,
187
- fontSize: 56,
188
- lineHeight: 1.1,
189
- fontStyle: italic
190
- ),
191
- expressive-heading05italicbold: (
192
- fontFamily: "DN Serif Display",
193
- fontWeight: Bold,
194
- fontSize: 56,
195
- lineHeight: 1.1,
196
- fontStyle: italic
197
- ),
198
- functional-heading03regular: (
199
- fontFamily: "DN Sans",
200
- fontWeight: Regular,
201
- lineHeight: 1.2,
202
- fontSize: 24
203
- ),
204
- functional-heading03semibold: (
205
- fontFamily: "DN Sans",
206
- fontWeight: SemiBold,
207
- lineHeight: 1.2,
208
- fontSize: 24
209
- ),
210
- functional-heading03bold: (
211
- fontFamily: "DN Sans",
212
- fontWeight: Bold,
213
- lineHeight: 1.2,
214
- fontSize: 24
215
- ),
216
- functional-heading01regular: (
217
- fontFamily: "DN Sans",
218
- fontWeight: Regular,
219
- fontSize: 16,
220
- lineHeight: 1.2
221
- ),
222
- functional-heading01semibold: (
223
- fontFamily: "DN Sans",
224
- fontWeight: SemiBold,
225
- fontSize: 16,
226
- lineHeight: 1.2
227
- ),
228
- functional-heading01bold: (
229
- fontFamily: "DN Sans",
230
- fontWeight: Bold,
231
- fontSize: 16,
232
- lineHeight: 1.2
233
- ),
234
- functional-heading02regular: (
235
- fontFamily: "DN Sans",
236
- fontSize: 20,
237
- fontWeight: Regular,
238
- lineHeight: 1.1
239
- ),
240
- functional-heading02semibold: (
241
- fontFamily: "DN Sans",
242
- fontSize: 20,
243
- fontWeight: SemiBold,
244
- lineHeight: 1.1
245
- ),
246
- functional-heading02bold: (
247
- fontFamily: "DN Sans",
248
- fontSize: 20,
249
- fontWeight: Bold,
250
- lineHeight: 1.1
251
- ),
252
- functional-heading04regular: (
253
- fontFamily: "DN Sans",
254
- fontWeight: Regular,
255
- fontSize: 31,
256
- lineHeight: 1.1
257
- ),
258
- functional-heading04semibold: (
259
- fontFamily: "DN Sans",
260
- fontWeight: SemiBold,
261
- fontSize: 31,
262
- lineHeight: 1.1
263
- ),
264
- functional-heading04bold: (
265
- fontFamily: "DN Sans",
266
- fontWeight: Bold,
267
- fontSize: 31,
268
- lineHeight: 1.1
269
- ),
270
- functional-heading05regular: (
271
- fontFamily: "DN Sans",
272
- fontWeight: Regular,
273
- fontSize: 39,
274
- lineHeight: 1.1
275
- ),
276
- functional-heading05semibold: (
277
- fontFamily: "DN Sans",
278
- fontWeight: SemiBold,
279
- fontSize: 39,
280
- lineHeight: 1.1
281
- ),
282
- functional-heading05bold: (
283
- fontFamily: "DN Sans",
284
- fontWeight: Bold,
285
- fontSize: 39,
286
- lineHeight: 1.1
287
- ),
288
- expressive-preamble01regular: (
289
- fontFamily: "DN Serif Text",
290
- fontWeight: Regular,
291
- fontSize: 20,
292
- lineHeight: 1.5
293
- ),
294
- expressive-preamble01semibold: (
295
- fontFamily: "DN Serif Text",
296
- fontWeight: SemiBold,
297
- fontSize: 20,
298
- lineHeight: 1.5
299
- ),
300
- expressive-preamble01bold: (
301
- fontFamily: "DN Serif Text",
302
- fontWeight: Bold,
303
- fontSize: 20,
304
- lineHeight: 1.5
305
- ),
306
- expressive-preamble01italicregular: (
307
- fontFamily: "DN Serif Text",
308
- fontWeight: Regular,
309
- lineHeight: 1.5,
310
- fontSize: 20,
311
- fontStyle: italic
312
- ),
313
- expressive-preamble01italicsemibold: (
314
- fontFamily: "DN Serif Text",
315
- fontWeight: SemiBold,
316
- lineHeight: 1.5,
317
- fontSize: 20,
318
- fontStyle: italic
319
- ),
320
- expressive-preamble01italicbold: (
321
- fontFamily: "DN Serif Text",
322
- fontWeight: Bold,
323
- lineHeight: 1.5,
324
- fontSize: 20,
325
- fontStyle: italic
326
- ),
327
- expressive-body01regular: (
328
- fontFamily: "DN Serif Text",
329
- fontWeight: Regular,
330
- fontSize: 16,
331
- lineHeight: 1.5
332
- ),
333
- expressive-body01semibold: (
334
- fontFamily: "DN Serif Text",
335
- fontWeight: SemiBold,
336
- fontSize: 16,
337
- lineHeight: 1.5
338
- ),
339
- expressive-body01bold: (
340
- fontFamily: "DN Serif Text",
341
- fontWeight: Bold,
342
- fontSize: 16,
343
- lineHeight: 1.5
344
- ),
345
- expressive-body01italicregular: (
346
- fontFamily: "DN Serif Text",
347
- fontWeight: Regular,
348
- lineHeight: 1.5,
349
- fontSize: 16,
350
- fontStyle: italic
351
- ),
352
- expressive-body01italicsemibold: (
353
- fontFamily: "DN Serif Text",
354
- fontWeight: SemiBold,
355
- lineHeight: 1.5,
356
- fontSize: 16,
357
- fontStyle: italic
358
- ),
359
- expressive-body01italicbold: (
360
- fontFamily: "DN Serif Text",
361
- fontWeight: Bold,
362
- lineHeight: 1.5,
363
- fontSize: 16,
364
- fontStyle: italic
365
- ),
366
- expressive-body02regular: (
367
- fontFamily: "DN Serif Text",
368
- fontWeight: Regular,
369
- lineHeight: 1.5,
370
- fontSize: 18
371
- ),
372
- expressive-body02semibold: (
373
- fontFamily: "DN Serif Text",
374
- fontWeight: SemiBold,
375
- lineHeight: 1.5,
376
- fontSize: 18
377
- ),
378
- expressive-body02bold: (
379
- fontFamily: "DN Serif Text",
380
- fontWeight: Bold,
381
- lineHeight: 1.5,
382
- fontSize: 18
383
- ),
384
- expressive-body02italicregular: (
385
- fontFamily: "DN Serif Text",
386
- fontWeight: Regular,
387
- lineHeight: 1.5,
388
- fontSize: 18,
389
- fontStyle: italic
390
- ),
391
- expressive-body02italicsemibold: (
392
- fontFamily: "DN Serif Text",
393
- fontWeight: SemiBold,
394
- lineHeight: 1.5,
395
- fontSize: 18,
396
- fontStyle: italic
397
- ),
398
- expressive-body02italicbold: (
399
- fontFamily: "DN Serif Text",
400
- fontWeight: Bold,
401
- lineHeight: 1.5,
402
- fontSize: 18,
403
- fontStyle: italic
404
- ),
405
2
  detaildropcap: (
406
3
  fontFamily: "DN Serif Display",
407
4
  fontWeight: Bold,
@@ -506,11 +103,10 @@ $typographyTokensScreenLarge: (
506
103
  ),
507
104
  detailteaser-large-storRubrik: (
508
105
  fontFamily: "DN Serif Display",
509
- fontWeight: Regular,
106
+ fontWeight: Bold,
510
107
  lineHeight: 1.1,
511
108
  fontSize: 56,
512
- letterSpacing: 0,
513
- fontStyle: italic
109
+ letterSpacing: 0
514
110
  ),
515
111
  detailteaser-standard: (
516
112
  fontFamily: "DN Serif Headline",
@@ -549,6 +145,14 @@ $typographyTokensScreenLarge: (
549
145
  letterSpacing: 0,
550
146
  fontStyle: italic
551
147
  ),
148
+ detailteaser-large-storRubrik-opinion: (
149
+ fontFamily: "DN Serif Display",
150
+ fontWeight: Regular,
151
+ fontSize: 56,
152
+ lineHeight: 1.1,
153
+ letterSpacing: 0,
154
+ fontStyle: italic
155
+ ),
552
156
  detailstandard-button: (
553
157
  fontFamily: "DN Sans",
554
158
  fontWeight: SemiBold,
@@ -556,28 +160,13 @@ $typographyTokensScreenLarge: (
556
160
  fontSize: 16,
557
161
  letterSpacing: 0
558
162
  ),
559
- detailbottom-nav: (
560
- fontFamily: "DN Sans",
561
- fontWeight: SemiBold,
562
- lineHeight: 1.1,
563
- fontSize: 12,
564
- letterSpacing: 0.2
565
- ),
566
163
  detailstandard-button-small: (
567
164
  fontFamily: "DN Sans",
568
165
  fontWeight: SemiBold,
569
- lineHeight: 1.5,
166
+ lineHeight: 1.4,
570
167
  fontSize: 14,
571
168
  letterSpacing: 0
572
169
  ),
573
- detailarticle-label: (
574
- fontFamily: "DN Sans",
575
- fontWeight: Bold,
576
- lineHeight: 1.1,
577
- fontSize: 12,
578
- textCase: uppercase,
579
- letterSpacing: 0.5
580
- ),
581
170
  detailmedryckare: (
582
171
  fontFamily: "DN Serif Text",
583
172
  fontWeight: Regular,
@@ -590,7 +179,7 @@ $typographyTokensScreenLarge: (
590
179
  fontWeight: Bold,
591
180
  lineHeight: 1.5,
592
181
  fontSize: 16,
593
- textCase: upperCase,
182
+ textCase: uppercase,
594
183
  letterSpacing: 0.5
595
184
  ),
596
185
  expressiveheading01: (
@@ -665,14 +254,14 @@ $typographyTokensScreenLarge: (
665
254
  ),
666
255
  expressiveingress01: (
667
256
  fontFamily: "DN Serif Headline",
668
- fontWeight: Bold,
257
+ fontWeight: SemiBold,
669
258
  fontSize: 20,
670
259
  lineHeight: 1.5,
671
260
  letterSpacing: 0
672
261
  ),
673
262
  expressiveingress02: (
674
263
  fontFamily: "DN Serif Headline",
675
- fontWeight: Bold,
264
+ fontWeight: SemiBold,
676
265
  fontSize: 24,
677
266
  lineHeight: 1.5,
678
267
  letterSpacing: 0
@@ -681,14 +270,14 @@ $typographyTokensScreenLarge: (
681
270
  fontFamily: "DN Sans",
682
271
  fontWeight: Regular,
683
272
  fontSize: 10,
684
- lineHeight: 1.1,
273
+ lineHeight: 1.2,
685
274
  letterSpacing: 0.2
686
275
  ),
687
276
  functionalmeta02: (
688
277
  fontFamily: "DN Sans",
689
278
  fontWeight: Regular,
690
279
  fontSize: 12,
691
- lineHeight: 1.1,
280
+ lineHeight: 1.2,
692
281
  letterSpacing: 0.2
693
282
  ),
694
283
  functionallabel01: (
@@ -696,7 +285,8 @@ $typographyTokensScreenLarge: (
696
285
  fontWeight: Bold,
697
286
  fontSize: 12,
698
287
  lineHeight: 1.1,
699
- letterSpacing: 0.5
288
+ letterSpacing: 0.5,
289
+ textCase: uppercase
700
290
  ),
701
291
  functionallabel02: (
702
292
  fontFamily: "DN Sans",
@@ -774,99 +364,5 @@ $typographyTokensScreenLarge: (
774
364
  fontSize: 40,
775
365
  lineHeight: 1.1,
776
366
  letterSpacing: 0
777
- ),
778
- functional-body01regular: (
779
- fontFamily: "DN Sans",
780
- fontWeight: Regular,
781
- fontSize: 14,
782
- letterSpacing: "",
783
- lineHeight: 1.5,
784
- paragraphSpacing: ""
785
- ),
786
- functional-body01semibold: (
787
- fontFamily: "DN Sans",
788
- fontWeight: SemiBold,
789
- fontSize: 14,
790
- letterSpacing: "",
791
- lineHeight: 1.5
792
- ),
793
- functional-body01bold: (
794
- fontFamily: "DN Sans",
795
- fontWeight: Bold,
796
- fontSize: 14,
797
- letterSpacing: "",
798
- lineHeight: 1.5
799
- ),
800
- functional-body02regular: (
801
- fontFamily: "DN Sans",
802
- fontWeight: Regular,
803
- lineHeight: 1.5,
804
- fontSize: 16
805
- ),
806
- functional-body02semibold: (
807
- fontFamily: "DN Sans",
808
- fontWeight: SemiBold,
809
- lineHeight: 1.5,
810
- fontSize: 16
811
- ),
812
- functional-body02bold: (
813
- fontFamily: "DN Sans",
814
- fontWeight: Bold,
815
- lineHeight: 1.5,
816
- fontSize: 16
817
- ),
818
- functional-body03regular: (
819
- fontFamily: "DN Sans",
820
- fontWeight: Regular,
821
- lineHeight: 1.5,
822
- fontSize: 20
823
- ),
824
- functional-body03semibold: (
825
- fontFamily: "DN Sans",
826
- fontWeight: SemiBold,
827
- lineHeight: 1.5,
828
- fontSize: 20
829
- ),
830
- functional-body03bold: (
831
- fontFamily: "DN Sans",
832
- fontWeight: Bold,
833
- lineHeight: 1.5,
834
- fontSize: 20
835
- ),
836
- functional-meta01regular: (
837
- fontFamily: "DN Sans",
838
- fontWeight: Regular,
839
- fontSize: 10,
840
- lineHeight: 1.5
841
- ),
842
- functional-meta01semibold: (
843
- fontFamily: "DN Sans",
844
- fontWeight: SemiBold,
845
- fontSize: 10,
846
- lineHeight: 1.5
847
- ),
848
- functional-meta01bold: (
849
- fontFamily: "DN Sans",
850
- fontWeight: Bold,
851
- fontSize: 10,
852
- lineHeight: 1.5
853
- ),
854
- functional-meta02regular: (
855
- fontFamily: "DN Sans",
856
- fontWeight: Regular,
857
- lineHeight: 1.5,
858
- fontSize: 12
859
- ),
860
- functional-meta02semibold: (
861
- fontFamily: "DN Sans",
862
- fontWeight: SemiBold,
863
- lineHeight: 1.5,
864
- fontSize: 12
865
- ),
866
- functional-meta02bold: (
867
- fontFamily: "DN Sans",
868
- fontWeight: Bold,
869
- lineHeight: 1.5,
870
- fontSize: 12
871
367
  )
872
368
  );