@bonniernews/dn-design-system-web 25.0.4 → 25.0.6-beta.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 (109) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/assets/form-field/form-field.scss +6 -6
  3. package/assets/teaser/teaser.scss +5 -5
  4. package/components/article-top-image/article-top-image.scss +1 -1
  5. package/components/badge/badge.scss +5 -5
  6. package/components/blocked-content/blocked-content.scss +9 -9
  7. package/components/buddy-menu/buddy-menu.scss +15 -15
  8. package/components/button/button.scss +49 -33
  9. package/components/checkbox/checkbox.scss +9 -9
  10. package/components/disclaimer/disclaimer.scss +10 -10
  11. package/components/divider/divider.scss +3 -3
  12. package/components/empty-state/empty-state.scss +3 -3
  13. package/components/factbox/factbox.scss +13 -13
  14. package/components/footer/footer.scss +16 -16
  15. package/components/game-header/game-header.scss +6 -6
  16. package/components/group-header/group-header.scss +6 -6
  17. package/components/image-caption/image-caption.scss +3 -3
  18. package/components/link-box/link-box-item.scss +4 -4
  19. package/components/link-box/link-box.scss +1 -1
  20. package/components/list-item/list-item.scss +24 -24
  21. package/components/modal/modal.scss +4 -4
  22. package/components/pagination/pagination.scss +4 -4
  23. package/components/pictogram/pictogram.scss +3 -3
  24. package/components/profile-header/profile-header.scss +7 -7
  25. package/components/quote/quote.scss +2 -2
  26. package/components/radio-button/radio-button.scss +9 -9
  27. package/components/spinner/spinner.scss +14 -14
  28. package/components/switch/switch.scss +13 -13
  29. package/components/tag-header/tag-header.scss +8 -8
  30. package/components/teaser-centered/teaser-centered.scss +1 -1
  31. package/components/teaser-footer/teaser-footer.scss +5 -5
  32. package/components/teaser-image/teaser-image.scss +4 -4
  33. package/components/teaser-large/teaser-large.scss +7 -6
  34. package/components/teaser-list-vertical/teaser-list-vertical.scss +8 -8
  35. package/components/teaser-longlife/teaser-longlife.scss +7 -7
  36. package/components/teaser-native/teaser-native.scss +19 -19
  37. package/components/teaser-onsite/teaser-onsite.scss +2 -2
  38. package/components/teaser-package/teaser-package.scss +2 -2
  39. package/components/teaser-right-now/teaser-right-now.scss +1 -1
  40. package/components/teaser-slideshow/teaser-slideshow.njk +0 -1
  41. package/components/teaser-slideshow/teaser-slideshow.scss +3 -3
  42. package/components/teaser-split/teaser-split.scss +5 -5
  43. package/components/teaser-standard/teaser-standard.scss +5 -5
  44. package/components/teaser-swipe-card/teaser-swipe-card.scss +10 -10
  45. package/components/teaser-tipsa/teaser-tipsa.scss +2 -2
  46. package/components/text-button/text-button.scss +7 -7
  47. package/components/text-button-toggle/text-button-toggle.scss +7 -7
  48. package/components/text-input/text-input.scss +22 -23
  49. package/components/tooltip/tooltip.scss +5 -5
  50. package/components/video-caption/video-caption.scss +4 -4
  51. package/components/vip-badge/vip-badge.scss +10 -10
  52. package/foundations/colors.scss +6 -18
  53. package/foundations/cssVariables.scss +1 -0
  54. package/foundations/gradients.scss +25 -0
  55. package/foundations/helpers/colors.scss +10 -18
  56. package/foundations/helpers/forward.helpers.scss +1 -0
  57. package/foundations/helpers/gradients.scss +33 -0
  58. package/foundations/helpers/hover.scss +2 -2
  59. package/foundations/helpers/links.scss +4 -3
  60. package/foundations/helpers/metrics.scss +4 -6
  61. package/foundations/helpers/shadows.scss +5 -5
  62. package/foundations/helpers/typography.scss +11 -12
  63. package/foundations/shadows.scss +4 -4
  64. package/foundations/variables/border-width.scss +5 -0
  65. package/foundations/variables/colorsCssVariables.scss +84 -82
  66. package/foundations/variables/colorsDnDark.scss +89 -0
  67. package/foundations/variables/colorsDnLight.scss +89 -0
  68. package/foundations/variables/gradientsDnDark.scss +46 -0
  69. package/foundations/variables/gradientsDnLight.scss +46 -0
  70. package/foundations/variables/gradientsList.scss +4 -0
  71. package/foundations/variables/radius.scss +6 -0
  72. package/foundations/variables/shadowsDnDark.scss +30 -0
  73. package/foundations/variables/shadowsDnLight.scss +30 -0
  74. package/foundations/variables/shadowsList.scss +4 -0
  75. package/foundations/variables/spacingBase.scss +1 -0
  76. package/foundations/variables/spacingBaseList.scss +1 -0
  77. package/foundations/variables/spacingDetail.scss +3 -16
  78. package/foundations/variables/spacingDetailList.scss +3 -16
  79. package/foundations/variables/spacingDetailScreenLarge.scss +3 -16
  80. package/foundations/variables/typographyLetterSpacing.scss +1 -1
  81. package/foundations/variables/typographyLineHeight.scss +3 -3
  82. package/foundations/variables/typographyList.scss +53 -0
  83. package/foundations/variables/typographyScreenExtraLarge.scss +381 -0
  84. package/foundations/variables/typographyScreenLarge.scss +381 -0
  85. package/foundations/variables/{typographyTokensScreenSmall.scss → typographyScreenSmall.scss} +267 -309
  86. package/package.json +2 -2
  87. package/preact/components/icon-with-wrapper/icon-with-wrapper.js +86 -84
  88. package/preact/components/icon-with-wrapper/icon-with-wrapper.js.map +3 -3
  89. package/types-lib/ds-color.d.ts +97 -93
  90. package/variables/colors-dark-mode.json +109 -0
  91. package/variables/colors-light-mode.json +109 -0
  92. package/variables/gradients-dark-mode.json +58 -0
  93. package/variables/gradients-light-mode.json +58 -0
  94. package/variables/typography-list.json +55 -0
  95. package/foundations/variables/colorsDnDarkTokens.scss +0 -88
  96. package/foundations/variables/colorsDnLightTokens.scss +0 -87
  97. package/foundations/variables/decorations.scss +0 -1
  98. package/foundations/variables/metrics.scss +0 -12
  99. package/foundations/variables/shadowsDnDarkTokens.scss +0 -34
  100. package/foundations/variables/shadowsDnLightTokens.scss +0 -34
  101. package/foundations/variables/shadowsTokensList.scss +0 -4
  102. package/foundations/variables/typographyTokensList.scss +0 -59
  103. package/foundations/variables/typographyTokensScreenExtraLarge.scss +0 -422
  104. package/foundations/variables/typographyTokensScreenLarge.scss +0 -422
  105. package/tokens/colors-dark-mode.json +0 -106
  106. package/tokens/colors-light-mode.json +0 -105
  107. package/tokens/typography-list.json +0 -61
  108. package/variables/shadows-css-variables.json +0 -6
  109. /package/{tokens → variables}/icon-list.json +0 -0
package/foundations/variables/typographyTokensScreenExtraLarge.scss DELETED
@@ -1,422 +0,0 @@
1
- $typographyTokensScreenExtraLarge: (
2
- detailarticle-standard: (
3
- fontFamily: "DN Serif Display",
4
- fontWeight: Bold,
5
- lineHeight: 1.1,
6
- fontSize: 48,
7
- letterSpacing: 0
8
- ),
9
- detailarticle-opinion: (
10
- fontFamily: "DN Serif Display",
11
- fontWeight: Regular,
12
- lineHeight: 1.1,
13
- fontSize: 48,
14
- letterSpacing: 0,
15
- fontStyle: italic
16
- ),
17
- detailarticle-longread: (
18
- fontFamily: "DN Serif Display",
19
- fontWeight: Regular,
20
- lineHeight: 1.1,
21
- fontSize: 56,
22
- letterSpacing: 0
23
- ),
24
- detailarticle-longread-premium: (
25
- fontFamily: "DN Serif Display",
26
- fontWeight: Bold,
27
- lineHeight: 1.1,
28
- fontSize: 56,
29
- letterSpacing: 0
30
- ),
31
- detailarticle-direkt: (
32
- fontFamily: "DN Serif Display",
33
- fontWeight: Bold,
34
- lineHeight: 1.1,
35
- fontSize: 32,
36
- letterSpacing: 0
37
- ),
38
- detailarticle-direkt-opinion: (
39
- fontFamily: "DN Serif Display",
40
- fontWeight: Regular,
41
- lineHeight: 1.1,
42
- fontSize: 32,
43
- letterSpacing: 0,
44
- fontStyle: italic
45
- ),
46
- detaildirekt-header: (
47
- fontFamily: "DN Serif Display",
48
- fontWeight: Regular,
49
- fontSize: 48,
50
- lineHeight: 1.1,
51
- letterSpacing: 0
52
- ),
53
- detailteaser-large: (
54
- fontFamily: "DN Serif Display",
55
- fontWeight: Bold,
56
- lineHeight: 1.1,
57
- fontSize: 48,
58
- letterSpacing: 0
59
- ),
60
- detailteaser-breaking: (
61
- fontFamily: "DN Serif Display",
62
- fontWeight: ExtraBold,
63
- lineHeight: 1.1,
64
- fontSize: 64,
65
- letterSpacing: 0
66
- ),
67
- detailteaser-standard: (
68
- fontFamily: "DN Serif Headline",
69
- lineHeight: 1.1,
70
- letterSpacing: 0,
71
- fontWeight: Bold,
72
- fontSize: 36
73
- ),
74
- detailteaser-standard-compact: (
75
- fontFamily: "DN Serif Headline",
76
- fontWeight: Bold,
77
- lineHeight: 1.2,
78
- fontSize: 24,
79
- letterSpacing: 0
80
- ),
81
- detailteaser-large-compact: (
82
- fontFamily: "DN Serif Display",
83
- fontWeight: Bold,
84
- fontSize: 36,
85
- lineHeight: 1.1,
86
- letterSpacing: 0
87
- ),
88
- detailteaser-standard-opinion: (
89
- fontFamily: "DN Serif Display",
90
- fontWeight: Regular,
91
- lineHeight: 1.1,
92
- fontSize: 36,
93
- letterSpacing: 0,
94
- fontStyle: italic
95
- ),
96
- detailteaser-standard-compact-opinion: (
97
- fontFamily: "DN Serif Headline",
98
- fontWeight: Regular,
99
- lineHeight: 1.2,
100
- fontSize: 24,
101
- letterSpacing: 0,
102
- fontStyle: italic
103
- ),
104
- detailteaser-large-opinion: (
105
- fontFamily: "DN Serif Display",
106
- fontWeight: Regular,
107
- lineHeight: 1.1,
108
- fontSize: 36,
109
- letterSpacing: 0,
110
- fontStyle: italic
111
- ),
112
- detailteaser-large-storRubrik: (
113
- fontFamily: "DN Serif Display",
114
- fontWeight: Bold,
115
- lineHeight: 1.1,
116
- fontSize: 56,
117
- letterSpacing: 0
118
- ),
119
- detailteaser-large-storRubrik-opinion: (
120
- fontFamily: "DN Serif Display",
121
- fontWeight: Regular,
122
- fontSize: 56,
123
- lineHeight: 1.1,
124
- letterSpacing: 0,
125
- fontStyle: italic
126
- ),
127
- detailteaser-large-compact-opinion: (
128
- fontFamily: "DN Serif Headline",
129
- fontWeight: Regular,
130
- fontSize: 24,
131
- lineHeight: 1.2,
132
- letterSpacing: 0,
133
- fontStyle: italic
134
- ),
135
- detailteaser-twin: (
136
- fontFamily: "DN Serif Headline",
137
- fontWeight: Bold,
138
- lineHeight: 1.2,
139
- fontSize: 22,
140
- letterSpacing: 0
141
- ),
142
- detailteaser-baotaxl: (
143
- fontFamily: "DN Serif Display",
144
- fontWeight: Bold,
145
- fontSize: 80,
146
- lineHeight: 1.1,
147
- letterSpacing: 0
148
- ),
149
- detailteaser-tipsa: (
150
- fontFamily: "DN Serif Headline",
151
- fontWeight: Bold,
152
- fontSize: 22,
153
- lineHeight: 1.1,
154
- letterSpacing: 0
155
- ),
156
- detaillonglife: (
157
- fontFamily: "DN Sans",
158
- fontWeight: Bold,
159
- fontSize: 20,
160
- lineHeight: 1.1
161
- ),
162
- detaildropcap: (
163
- fontFamily: "DN Serif Display",
164
- lineHeight: 1,
165
- fontSize: 92,
166
- fontWeight: Bold,
167
- letterSpacing: 0
168
- ),
169
- detailarticle-quote: (
170
- fontFamily: "DN Serif Display",
171
- fontWeight: Bold,
172
- lineHeight: 1.2,
173
- fontSize: 28,
174
- letterSpacing: 0
175
- ),
176
- detailmellanrubrik: (
177
- fontFamily: "DN Serif Display",
178
- fontWeight: Bold,
179
- fontSize: 28,
180
- lineHeight: 1.1,
181
- letterSpacing: 0
182
- ),
183
- detailgameheader: (
184
- fontFamily: "DN Sans",
185
- fontWeight: Bold,
186
- fontSize: 36,
187
- lineHeight: 1.1,
188
- letterSpacing: 0
189
- ),
190
- detailstandard-button: (
191
- fontFamily: "DN Sans",
192
- fontWeight: SemiBold,
193
- lineHeight: 1.5,
194
- fontSize: 16,
195
- letterSpacing: 0
196
- ),
197
- detailstandard-button-small: (
198
- fontFamily: "DN Sans",
199
- fontWeight: SemiBold,
200
- lineHeight: 1.4,
201
- fontSize: 14,
202
- letterSpacing: 0
203
- ),
204
- detailmedryckare: (
205
- fontFamily: "DN Serif Text",
206
- fontWeight: Regular,
207
- fontSize: 16,
208
- lineHeight: 1.38,
209
- letterSpacing: 0
210
- ),
211
- detailbaota-xl-label: (
212
- fontFamily: "DN Sans",
213
- fontWeight: Bold,
214
- lineHeight: 1.5,
215
- fontSize: 16,
216
- textCase: uppercase,
217
- letterSpacing: 0.5
218
- ),
219
- detailstandard-button-xlarge: (
220
- fontFamily: "DN Sans",
221
- fontWeight: SemiBold,
222
- fontSize: 18,
223
- lineHeight: 1.75,
224
- letterSpacing: 0
225
- ),
226
- detailteaser-large-rightcol: (
227
- fontFamily: "DN Serif Headline",
228
- fontWeight: Bold,
229
- fontSize: 22,
230
- lineHeight: 1.2
231
- ),
232
- expressiveheading01: (
233
- fontFamily: "DN Serif Text",
234
- fontWeight: Bold,
235
- fontSize: 16,
236
- lineHeight: 1.2,
237
- letterSpacing: 0
238
- ),
239
- expressiveheading02: (
240
- fontFamily: "DN Serif Headline",
241
- fontWeight: Bold,
242
- fontSize: 24,
243
- lineHeight: 1.1,
244
- letterSpacing: 0
245
- ),
246
- expressiveheading03: (
247
- fontSize: 32,
248
- lineHeight: 1.1,
249
- fontFamily: "DN Serif Display",
250
- fontWeight: Bold,
251
- letterSpacing: 0
252
- ),
253
- expressiveheading04: (
254
- fontFamily: "DN Serif Display",
255
- fontWeight: Bold,
256
- fontSize: 48,
257
- lineHeight: 1.1,
258
- letterSpacing: 0
259
- ),
260
- expressiveheading05: (
261
- fontFamily: "DN Serif Display",
262
- fontWeight: Bold,
263
- fontSize: 56,
264
- lineHeight: 1.1,
265
- letterSpacing: 0
266
- ),
267
- expressiveheading06: (
268
- fontFamily: "DN Serif Display",
269
- fontWeight: Bold,
270
- fontSize: 64,
271
- lineHeight: 1.1,
272
- letterSpacing: 0
273
- ),
274
- expressiveheading07: (
275
- fontFamily: "DN Serif Display",
276
- fontWeight: Bold,
277
- fontSize: 72,
278
- lineHeight: 1.1,
279
- letterSpacing: 0
280
- ),
281
- expressivebody01: (
282
- fontFamily: "DN Serif Text",
283
- fontWeight: Regular,
284
- fontSize: 14,
285
- lineHeight: 1.5,
286
- letterSpacing: 0
287
- ),
288
- expressivebody02: (
289
- fontFamily: "DN Serif Text",
290
- fontWeight: Regular,
291
- lineHeight: 1.5,
292
- fontSize: 16,
293
- letterSpacing: 0
294
- ),
295
- expressivebody03: (
296
- fontFamily: "DN Serif Text",
297
- fontWeight: Regular,
298
- fontSize: 18,
299
- lineHeight: 1.5,
300
- letterSpacing: 0
301
- ),
302
- expressiveingress01: (
303
- fontFamily: "DN Serif Headline",
304
- fontWeight: SemiBold,
305
- fontSize: 20,
306
- lineHeight: 1.5,
307
- letterSpacing: 0
308
- ),
309
- expressiveingress02: (
310
- fontFamily: "DN Serif Headline",
311
- fontWeight: SemiBold,
312
- fontSize: 24,
313
- lineHeight: 1.5,
314
- letterSpacing: 0
315
- ),
316
- functionalmeta01: (
317
- fontFamily: "DN Sans",
318
- fontWeight: Regular,
319
- fontSize: 10,
320
- lineHeight: 1.2,
321
- letterSpacing: 0.2
322
- ),
323
- functionalmeta02: (
324
- fontFamily: "DN Sans",
325
- fontWeight: Regular,
326
- fontSize: 12,
327
- lineHeight: 1.2,
328
- letterSpacing: 0
329
- ),
330
- functionallabel01: (
331
- fontFamily: "DN Sans",
332
- fontWeight: Bold,
333
- fontSize: 12,
334
- lineHeight: 1.1,
335
- letterSpacing: 0.5,
336
- textCase: uppercase
337
- ),
338
- functionallabel02: (
339
- fontFamily: "DN Sans",
340
- fontWeight: Bold,
341
- fontSize: 16,
342
- lineHeight: 1.1,
343
- letterSpacing: 0
344
- ),
345
- functionalbody01: (
346
- fontFamily: "DN Sans",
347
- fontWeight: Regular,
348
- fontSize: 14,
349
- lineHeight: 1.5,
350
- letterSpacing: 0
351
- ),
352
- functionalbody02: (
353
- fontFamily: "DN Sans",
354
- fontWeight: Regular,
355
- fontSize: 16,
356
- lineHeight: 1.5,
357
- letterSpacing: 0
358
- ),
359
- functionalingress01: (
360
- fontFamily: "DN Sans",
361
- fontWeight: Bold,
362
- fontSize: 20,
363
- lineHeight: 1.5,
364
- letterSpacing: 0
365
- ),
366
- functionalingress02: (
367
- fontFamily: "DN Sans",
368
- fontWeight: Bold,
369
- fontSize: 24,
370
- lineHeight: 1.5,
371
- letterSpacing: 0
372
- ),
373
- functionalheading01: (
374
- fontFamily: "DN Sans",
375
- fontWeight: Bold,
376
- fontSize: 16,
377
- lineHeight: 1.1,
378
- letterSpacing: 0
379
- ),
380
- functionalheading02: (
381
- fontFamily: "DN Sans",
382
- fontWeight: Bold,
383
- fontSize: 20,
384
- lineHeight: 1.1,
385
- letterSpacing: 0
386
- ),
387
- functionalheading03: (
388
- fontFamily: "DN Sans",
389
- fontWeight: Bold,
390
- fontSize: 24,
391
- lineHeight: 1.2,
392
- letterSpacing: 0
393
- ),
394
- functionalheading04: (
395
- fontFamily: "DN Sans",
396
- fontWeight: Bold,
397
- fontSize: 28,
398
- lineHeight: 1.1,
399
- letterSpacing: 0
400
- ),
401
- functionalheading05: (
402
- fontFamily: "DN Sans",
403
- fontWeight: Bold,
404
- fontSize: 36,
405
- lineHeight: 1.1,
406
- letterSpacing: 0
407
- ),
408
- functionalheading06: (
409
- fontFamily: "DN Sans",
410
- fontWeight: Bold,
411
- fontSize: 40,
412
- lineHeight: 1.1,
413
- letterSpacing: 0
414
- ),
415
- functionalbody03: (
416
- fontFamily: "DN Sans",
417
- fontWeight: Regular,
418
- fontSize: 18,
419
- lineHeight: 1.5,
420
- letterSpacing: 0
421
- )
422
- );