@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/typographyScreenLarge.scss ADDED
@@ -0,0 +1,381 @@
1
+ $typographyScreenLarge: (
2
+ expressive-heading-xxs: (
3
+ fontFamily: "DN Serif Headline",
4
+ fontSize: 16,
5
+ fontWeight: Bold,
6
+ letterSpacing: 0,
7
+ lineHeight: 1.2
8
+ ),
9
+ expressive-heading-xs: (
10
+ fontFamily: "DN Serif Headline",
11
+ fontSize: 24,
12
+ fontWeight: Bold,
13
+ letterSpacing: 0,
14
+ lineHeight: 1.1
15
+ ),
16
+ expressive-heading-sm: (
17
+ fontFamily: "DN Serif Display",
18
+ fontSize: 32,
19
+ fontWeight: Bold,
20
+ letterSpacing: 0,
21
+ lineHeight: 1.1
22
+ ),
23
+ expressive-heading-md: (
24
+ fontFamily: "DN Serif Display",
25
+ fontSize: 48,
26
+ fontWeight: Bold,
27
+ letterSpacing: 0,
28
+ lineHeight: 1.1
29
+ ),
30
+ expressive-heading-lg: (
31
+ fontFamily: "DN Serif Display",
32
+ fontSize: 56,
33
+ fontWeight: Bold,
34
+ letterSpacing: 0,
35
+ lineHeight: 1.1
36
+ ),
37
+ expressive-heading-xl: (
38
+ fontFamily: "DN Serif Display",
39
+ fontSize: 64,
40
+ fontWeight: Bold,
41
+ letterSpacing: 0,
42
+ lineHeight: 1.1
43
+ ),
44
+ expressive-body-sm: (
45
+ fontFamily: "DN Serif Text",
46
+ fontSize: 14,
47
+ fontWeight: Regular,
48
+ letterSpacing: 0,
49
+ lineHeight: 1.5
50
+ ),
51
+ expressive-body-md: (
52
+ fontFamily: "DN Serif Text",
53
+ fontSize: 16,
54
+ fontWeight: Regular,
55
+ letterSpacing: 0,
56
+ lineHeight: 1.5
57
+ ),
58
+ expressive-body-lg: (
59
+ fontFamily: "DN Serif Text",
60
+ fontSize: 18,
61
+ fontWeight: Regular,
62
+ letterSpacing: 0,
63
+ lineHeight: 1.5
64
+ ),
65
+ expressive-ingress-sm: (
66
+ fontFamily: "DN Serif Text",
67
+ fontSize: 20,
68
+ fontWeight: SemiBold,
69
+ letterSpacing: 0,
70
+ lineHeight: 1.5
71
+ ),
72
+ expressive-ingress-md: (
73
+ fontFamily: "DN Serif Headline",
74
+ fontSize: 24,
75
+ fontWeight: SemiBold,
76
+ letterSpacing: 0,
77
+ lineHeight: 1.5
78
+ ),
79
+ functional-heading-xxs: (
80
+ fontFamily: "DN Sans",
81
+ fontSize: 16,
82
+ fontWeight: Bold,
83
+ letterSpacing: 0,
84
+ lineHeight: 1.1
85
+ ),
86
+ functional-heading-xs: (
87
+ fontFamily: "DN Sans",
88
+ fontSize: 20,
89
+ fontWeight: Bold,
90
+ letterSpacing: 0,
91
+ lineHeight: 1.1
92
+ ),
93
+ functional-heading-sm: (
94
+ fontFamily: "DN Sans",
95
+ fontSize: 24,
96
+ fontWeight: Bold,
97
+ letterSpacing: 0,
98
+ lineHeight: 1.2
99
+ ),
100
+ functional-heading-md: (
101
+ fontFamily: "DN Sans",
102
+ fontSize: 28,
103
+ fontWeight: Bold,
104
+ letterSpacing: 0,
105
+ lineHeight: 1.1
106
+ ),
107
+ functional-heading-lg: (
108
+ fontFamily: "DN Sans",
109
+ fontSize: 36,
110
+ fontWeight: Bold,
111
+ letterSpacing: 0,
112
+ lineHeight: 1.1
113
+ ),
114
+ functional-heading-xl: (
115
+ fontFamily: "DN Sans",
116
+ fontSize: 40,
117
+ fontWeight: Bold,
118
+ letterSpacing: 0,
119
+ lineHeight: 1.1
120
+ ),
121
+ functional-label-sm: (
122
+ fontFamily: "DN Sans",
123
+ fontSize: 12,
124
+ fontWeight: Bold,
125
+ letterSpacing: 0.5,
126
+ lineHeight: 1.1,
127
+ textTransform: uppercase
128
+ ),
129
+ functional-label-md: (
130
+ fontFamily: "DN Sans",
131
+ fontSize: 16,
132
+ fontWeight: Bold,
133
+ letterSpacing: 0,
134
+ lineHeight: 1.1
135
+ ),
136
+ functional-body-sm: (
137
+ fontFamily: "DN Sans",
138
+ fontSize: 14,
139
+ fontWeight: Regular,
140
+ letterSpacing: 0,
141
+ lineHeight: 1.5
142
+ ),
143
+ functional-body-md: (
144
+ fontFamily: "DN Sans",
145
+ fontSize: 16,
146
+ fontWeight: Regular,
147
+ letterSpacing: 0,
148
+ lineHeight: 1.5
149
+ ),
150
+ functional-body-lg: (
151
+ fontFamily: "DN Sans",
152
+ fontSize: 18,
153
+ fontWeight: Regular,
154
+ letterSpacing: 0,
155
+ lineHeight: 1.5
156
+ ),
157
+ functional-meta-sm: (
158
+ fontFamily: "DN Sans",
159
+ fontSize: 10,
160
+ fontWeight: Regular,
161
+ letterSpacing: 0.2,
162
+ lineHeight: 1.2
163
+ ),
164
+ functional-meta-md: (
165
+ fontFamily: "DN Sans",
166
+ fontSize: 12,
167
+ fontWeight: Regular,
168
+ letterSpacing: 0,
169
+ lineHeight: 1.2
170
+ ),
171
+ functional-ingress-sm: (
172
+ fontFamily: "DN Sans",
173
+ fontSize: 20,
174
+ fontWeight: Regular,
175
+ letterSpacing: 0,
176
+ lineHeight: 1.5
177
+ ),
178
+ functional-ingress-md: (
179
+ fontFamily: "DN Sans",
180
+ fontSize: 24,
181
+ fontWeight: Regular,
182
+ letterSpacing: 0,
183
+ lineHeight: 1.5
184
+ ),
185
+ detail-dropcap: (
186
+ fontFamily: "DN Serif Display",
187
+ fontSize: 92,
188
+ fontWeight: Bold,
189
+ letterSpacing: 0,
190
+ lineHeight: 1
191
+ ),
192
+ detail-gameheader: (
193
+ fontFamily: "DN Serif Display",
194
+ fontSize: 36,
195
+ fontWeight: Regular,
196
+ letterSpacing: 0,
197
+ lineHeight: 1.1
198
+ ),
199
+ detail-medryckare: (
200
+ fontFamily: "DN Serif Text",
201
+ fontSize: 16,
202
+ fontWeight: Regular,
203
+ letterSpacing: 0,
204
+ lineHeight: 1.4
205
+ ),
206
+ detail-mellanrubrik: (
207
+ fontFamily: "DN Serif Display",
208
+ fontSize: 28,
209
+ fontWeight: Bold,
210
+ letterSpacing: 0,
211
+ lineHeight: 1.1
212
+ ),
213
+ detail-direkt-header: (
214
+ fontFamily: "DN Serif Display",
215
+ fontSize: 48,
216
+ fontWeight: Regular,
217
+ letterSpacing: 0,
218
+ lineHeight: 1.1
219
+ ),
220
+ detail-teaser-standard: (
221
+ fontFamily: "DN Serif Display",
222
+ fontSize: 28,
223
+ fontWeight: Bold,
224
+ letterSpacing: 0,
225
+ lineHeight: 1.1
226
+ ),
227
+ detail-teaser-standard-opinion: (
228
+ fontFamily: "DN Serif Display",
229
+ fontSize: 26,
230
+ fontWeight: Regular,
231
+ letterSpacing: 0,
232
+ lineHeight: 1.1,
233
+ fontStyle: italic
234
+ ),
235
+ detail-teaser-standard-compact: (
236
+ fontFamily: "DN Serif Display",
237
+ fontSize: 24,
238
+ fontWeight: Bold,
239
+ letterSpacing: 0,
240
+ lineHeight: 1.2
241
+ ),
242
+ detail-teaser-standard-compact-opinion: (
243
+ fontFamily: "DN Serif Display",
244
+ fontSize: 24,
245
+ fontWeight: Regular,
246
+ letterSpacing: 0,
247
+ lineHeight: 1.2,
248
+ fontStyle: italic
249
+ ),
250
+ detail-teaser-large: (
251
+ fontFamily: "DN Serif Display",
252
+ fontSize: 40,
253
+ fontWeight: Bold,
254
+ letterSpacing: 0,
255
+ lineHeight: 1.1
256
+ ),
257
+ detail-teaser-large-compact: (
258
+ fontFamily: "DN Serif Display",
259
+ fontSize: 32,
260
+ fontWeight: Bold,
261
+ letterSpacing: 0,
262
+ lineHeight: 1.1
263
+ ),
264
+ detail-teaser-storrubrik-opinion: (
265
+ fontFamily: "DN Serif Display",
266
+ fontSize: 40,
267
+ fontWeight: Regular,
268
+ letterSpacing: 0,
269
+ lineHeight: 1.1,
270
+ fontStyle: italic
271
+ ),
272
+ detail-teaser-storrubrik: (
273
+ fontFamily: "DN Serif Display",
274
+ fontSize: 40,
275
+ fontWeight: Bold,
276
+ letterSpacing: 0,
277
+ lineHeight: 1.1
278
+ ),
279
+ detail-teaser-twin: (
280
+ fontFamily: "DN Serif Display",
281
+ fontSize: 22,
282
+ fontWeight: Bold,
283
+ letterSpacing: 0,
284
+ lineHeight: 1.2
285
+ ),
286
+ detail-teaser-tipsa: (
287
+ fontFamily: "DN Serif Display",
288
+ fontSize: 22,
289
+ fontWeight: Bold,
290
+ letterSpacing: 0,
291
+ lineHeight: 1.1
292
+ ),
293
+ detail-teaser-baotaxl: (
294
+ fontFamily: "DN Serif Display",
295
+ fontSize: 56,
296
+ fontWeight: Bold,
297
+ letterSpacing: 0,
298
+ lineHeight: 1.1
299
+ ),
300
+ detail-teaser-longlife: (
301
+ fontFamily: "DN Sans",
302
+ fontSize: 20,
303
+ fontWeight: Bold,
304
+ letterSpacing: 0,
305
+ lineHeight: 1.1
306
+ ),
307
+ detail-teaser-breaking: (
308
+ fontFamily: "DN Serif Display",
309
+ fontSize: 64,
310
+ fontWeight: ExtraBold,
311
+ letterSpacing: 0,
312
+ lineHeight: 1.1
313
+ ),
314
+ detail-teaser-large-opinion: (
315
+ fontFamily: "DN Serif Display",
316
+ fontSize: 26,
317
+ fontWeight: Regular,
318
+ letterSpacing: 0,
319
+ lineHeight: 1.1,
320
+ fontStyle: italic
321
+ ),
322
+ detail-teaser-story: (
323
+ fontFamily: "DN Serif Display",
324
+ fontSize: 32,
325
+ fontWeight: Regular,
326
+ letterSpacing: 0,
327
+ lineHeight: 1.1
328
+ ),
329
+ detail-article-standard: (
330
+ fontFamily: "DN Serif Display",
331
+ fontSize: 40,
332
+ fontWeight: Regular,
333
+ letterSpacing: 0,
334
+ lineHeight: 1.1,
335
+ fontStyle: italic
336
+ ),
337
+ detail-article-opinion: (
338
+ fontFamily: "DN Serif Display",
339
+ fontSize: 40,
340
+ fontWeight: Regular,
341
+ letterSpacing: 0,
342
+ lineHeight: 1.1,
343
+ fontStyle: italic
344
+ ),
345
+ detail-article-longread: (
346
+ fontFamily: "DN Serif Display",
347
+ fontSize: 48,
348
+ fontWeight: Regular,
349
+ letterSpacing: 0,
350
+ lineHeight: 1.1
351
+ ),
352
+ detail-article-longread-premium: (
353
+ fontFamily: "DN Serif Display",
354
+ fontSize: 48,
355
+ fontWeight: Bold,
356
+ letterSpacing: 0,
357
+ lineHeight: 1.1
358
+ ),
359
+ detail-article-direkt: (
360
+ fontFamily: "DN Serif Display",
361
+ fontSize: 26,
362
+ fontWeight: Bold,
363
+ letterSpacing: 0,
364
+ lineHeight: 1.1
365
+ ),
366
+ detail-article-direct-opinion: (
367
+ fontFamily: "DN Serif Display",
368
+ fontSize: 26,
369
+ fontWeight: Regular,
370
+ letterSpacing: 0,
371
+ lineHeight: 1.1,
372
+ fontStyle: italic
373
+ ),
374
+ detail-article-quote: (
375
+ fontFamily: "DN Serif Display",
376
+ fontSize: 28,
377
+ fontWeight: Bold,
378
+ letterSpacing: 0,
379
+ lineHeight: 1.2
380
+ )
381
+ );