@bonniernews/dn-design-system-web 12.0.1 → 13.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 (33) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/components/buddy-menu/buddy-menu.scss +1 -1
  3. package/components/floating-button/floating-button.scss +1 -1
  4. package/components/icon-button/icon-button.scss +1 -1
  5. package/foundations/helpers/typography.scss +33 -8
  6. package/foundations/icons/icon.njk +5 -0
  7. package/foundations/icons/sprite.njk +1 -1
  8. package/foundations/icons/sprite.svg +1 -1
  9. package/foundations/icons/svg/x.svg +3 -0
  10. package/foundations/typography/README.md +5 -2
  11. package/foundations/variables/deprecated/typographyTokensList.scss +78 -0
  12. package/foundations/variables/deprecated/typographyTokensScreenExtraLarge.scss +499 -0
  13. package/foundations/variables/deprecated/typographyTokensScreenLarge.scss +499 -0
  14. package/foundations/variables/deprecated/typographyTokensScreenSmall.scss +504 -0
  15. package/foundations/variables/opacity.scss +1 -1
  16. package/foundations/variables/shadowsDnDarkTokens.scss +14 -22
  17. package/foundations/variables/shadowsDnLightTokens.scss +14 -22
  18. package/foundations/variables/shadowsTokensList.scss +4 -5
  19. package/foundations/variables/typographyFontWeight.scss +4 -0
  20. package/foundations/variables/typographyLetterSpacing.scss +3 -0
  21. package/foundations/variables/typographyLineHeight.scss +4 -0
  22. package/foundations/variables/typographyTokensList.scss +0 -78
  23. package/foundations/variables/typographyTokensScreenExtraLarge.scss +3 -500
  24. package/foundations/variables/typographyTokensScreenLarge.scss +3 -500
  25. package/foundations/variables/typographyTokensScreenSmall.scss +3 -505
  26. package/package.json +1 -1
  27. package/tokens/deprecated-typography-list.json +80 -0
  28. package/tokens/icon-list.json +2 -1
  29. package/tokens/shadows-css-variables.json +4 -5
  30. package/tokens/typography-list.json +0 -78
  31. package/foundations/variables/typographyAddons.scss +0 -11
  32. package/tokens/spacing-component-list.json +0 -12
  33. 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,
@@ -566,7 +163,7 @@ $typographyTokensScreenLarge: (
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
  ),
@@ -681,14 +278,14 @@ $typographyTokensScreenLarge: (
681
278
  fontFamily: "DN Sans",
682
279
  fontWeight: Regular,
683
280
  fontSize: 10,
684
- lineHeight: 1.1,
281
+ lineHeight: 1.2,
685
282
  letterSpacing: 0.2
686
283
  ),
687
284
  functionalmeta02: (
688
285
  fontFamily: "DN Sans",
689
286
  fontWeight: Regular,
690
287
  fontSize: 12,
691
- lineHeight: 1.1,
288
+ lineHeight: 1.2,
692
289
  letterSpacing: 0.2
693
290
  ),
694
291
  functionallabel01: (
@@ -774,99 +371,5 @@ $typographyTokensScreenLarge: (
774
371
  fontSize: 40,
775
372
  lineHeight: 1.1,
776
373
  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
374
  )
872
375
  );