@bonniernews/dn-design-system-web 3.0.0-alpha.7 → 3.0.0-alpha.71

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 (121) hide show
  1. package/CHANGELOG.md +571 -0
  2. package/assets/article-image/article-image.njk +11 -10
  3. package/assets/article-image/article-image.scss +1 -15
  4. package/assets/form-field/form-field.njk +2 -2
  5. package/assets/form-field/form-field.scss +2 -6
  6. package/assets/teaser/teaser.scss +75 -0
  7. package/components/article-body-image/README.md +2 -2
  8. package/components/article-body-image/article-body-image.njk +1 -5
  9. package/components/article-top-image/README.md +2 -2
  10. package/components/article-top-image/article-top-image.njk +1 -5
  11. package/components/article-top-image/article-top-image.scss +1 -1
  12. package/components/badge/badge.scss +1 -5
  13. package/components/buddy-menu/buddy-menu.scss +1 -8
  14. package/components/button/button.njk +38 -43
  15. package/components/button/button.scss +6 -1
  16. package/components/button-toggle/button-toggle.js +2 -0
  17. package/components/button-toggle/button-toggle.njk +36 -36
  18. package/components/button-toggle/button-toggle.scss +6 -1
  19. package/components/byline/byline.njk +2 -2
  20. package/components/byline/byline.scss +1 -3
  21. package/components/checkbox/checkbox.njk +3 -3
  22. package/components/checkbox/checkbox.scss +8 -9
  23. package/components/disclaimer/disclaimer.njk +2 -2
  24. package/components/disclaimer/disclaimer.scss +25 -11
  25. package/components/factbox/README.md +2 -2
  26. package/components/factbox/factbox.njk +9 -11
  27. package/components/factbox/factbox.scss +6 -37
  28. package/components/footer/footer.scss +2 -8
  29. package/components/icon-button/README.md +2 -1
  30. package/components/icon-button/icon-button.njk +4 -4
  31. package/components/icon-button/icon-button.scss +5 -2
  32. package/components/icon-button-toggle/icon-button-toggle.js +2 -0
  33. package/components/icon-button-toggle/icon-button-toggle.njk +28 -36
  34. package/components/icon-button-toggle/icon-button-toggle.scss +5 -2
  35. package/components/icon-sprite/README.md +51 -0
  36. package/components/icon-sprite/icon-sprite.njk +12 -0
  37. package/components/icon-sprite/icon-sprite.scss +12 -0
  38. package/components/icon-with-wrapper/README.md +9 -2
  39. package/components/icon-with-wrapper/icon-with-wrapper.njk +2 -2
  40. package/components/icon-with-wrapper/icon-with-wrapper.scss +2 -1
  41. package/components/image-caption/README.md +38 -0
  42. package/components/image-caption/image-caption.njk +25 -0
  43. package/components/image-caption/image-caption.scss +15 -0
  44. package/components/list-item/list-item.njk +5 -5
  45. package/components/list-item/list-item.scss +1 -3
  46. package/components/pictogram/README.md +39 -0
  47. package/components/pictogram/pictogram.njk +30 -0
  48. package/components/pictogram/pictogram.scss +54 -0
  49. package/components/quote/README.md +1 -2
  50. package/components/quote/quote.njk +6 -8
  51. package/components/quote/quote.scss +1 -14
  52. package/components/radio-button/radio-button.njk +3 -3
  53. package/components/radio-button/radio-button.scss +8 -10
  54. package/components/spinner/spinner.njk +19 -23
  55. package/components/spinner/spinner.scss +4 -1
  56. package/components/teaser-dot/README.md +34 -0
  57. package/components/teaser-dot/teaser-dot.njk +24 -0
  58. package/components/teaser-dot/teaser-dot.scss +39 -0
  59. package/components/teaser-image/README.md +40 -0
  60. package/components/teaser-image/teaser-image.njk +21 -0
  61. package/components/teaser-image/teaser-image.scss +21 -0
  62. package/components/teaser-large/README.md +51 -0
  63. package/components/teaser-large/teaser-large.njk +93 -0
  64. package/components/teaser-large/teaser-large.scss +174 -0
  65. package/components/teaser-onsite/README.md +53 -0
  66. package/components/teaser-onsite/teaser-onsite.njk +45 -0
  67. package/components/teaser-onsite/teaser-onsite.scss +35 -0
  68. package/components/teaser-package/README.md +42 -0
  69. package/components/teaser-package/teaser-package.njk +36 -0
  70. package/components/teaser-package/teaser-package.scss +112 -0
  71. package/components/teaser-right-now/README.md +37 -0
  72. package/components/teaser-right-now/teaser-right-now.njk +28 -0
  73. package/components/teaser-right-now/teaser-right-now.scss +16 -0
  74. package/components/teaser-slideshow/README.md +42 -0
  75. package/components/teaser-slideshow/teaser-slideshow.njk +38 -0
  76. package/components/teaser-slideshow/teaser-slideshow.scss +35 -0
  77. package/components/teaser-split/README-container.md +40 -0
  78. package/components/teaser-split/README.md +48 -0
  79. package/components/teaser-split/teaser-split.njk +93 -0
  80. package/components/teaser-split/teaser-split.scss +77 -0
  81. package/components/teaser-standard/README.md +49 -0
  82. package/components/teaser-standard/teaser-standard.njk +81 -0
  83. package/components/teaser-standard/teaser-standard.scss +38 -0
  84. package/components/teaser-tipsa/README.md +41 -0
  85. package/components/teaser-tipsa/teaser-tipsa.njk +31 -0
  86. package/components/teaser-tipsa/teaser-tipsa.scss +23 -0
  87. package/components/text-button/text-button.njk +34 -37
  88. package/components/text-button/text-button.scss +12 -10
  89. package/components/text-button-toggle/text-button-toggle.js +2 -0
  90. package/components/text-button-toggle/text-button-toggle.njk +30 -33
  91. package/components/text-button-toggle/text-button-toggle.scss +10 -10
  92. package/components/text-input/text-input.scss +3 -8
  93. package/components/video-caption/README.md +1 -1
  94. package/components/video-caption/video-caption.njk +12 -6
  95. package/components/vip-badge/README.md +35 -0
  96. package/components/vip-badge/vip-badge.njk +23 -0
  97. package/components/vip-badge/vip-badge.scss +54 -0
  98. package/foundations/colors.scss +31 -0
  99. package/foundations/helpers/README-links.md +1 -1
  100. package/foundations/helpers/colors.scss +2 -0
  101. package/foundations/helpers/links.scss +14 -6
  102. package/foundations/icons/icon.njk +167 -143
  103. package/foundations/icons/sprite.njk +1 -0
  104. package/foundations/icons/sprite.svg +1 -0
  105. package/foundations/icons/svg/download.svg +3 -0
  106. package/foundations/icons/svg/filter_list.svg +3 -0
  107. package/foundations/icons/svg/pause.svg +3 -0
  108. package/foundations/icons/svg/vip.svg +3 -0
  109. package/foundations/typography/fontDefinitions.scss +82 -67
  110. package/foundations/variables/colorsCssVariables.scss +5 -0
  111. package/foundations/variables/colorsDnDarkTokens.scss +6 -1
  112. package/foundations/variables/colorsDnLightTokens.scss +7 -2
  113. package/foundations/variables/spacingLayout.scss +6 -1
  114. package/foundations/variables/spacingLayoutLargeScreen.scss +5 -0
  115. package/foundations/variables/spacingLayoutList.scss +5 -0
  116. package/foundations/variables/typographyTokensScreenLarge.scss +87 -87
  117. package/foundations/variables/typographyTokensScreenSmall.scss +114 -114
  118. package/package.json +2 -2
  119. package/tokens/colors-css-variables.json +5 -0
  120. package/tokens/spacing-layout-list.json +6 -1
  121. package/foundations/icons/icon-sprite.svg +0 -2
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -1,24 +1,24 @@
1
1
  $typographyTokensScreenSmall: (
2
2
  expressive-heading01regular: (
3
- fontFamily: "DN Serif 22",
3
+ fontFamily: "DN Serif",
4
4
  fontWeight: Regular,
5
5
  fontSize: 16,
6
6
  lineHeight: 20
7
7
  ),
8
8
  expressive-heading01semibold: (
9
- fontFamily: "DN Serif 22",
9
+ fontFamily: "DN Serif",
10
10
  fontWeight: SemiBold,
11
11
  fontSize: 16,
12
12
  lineHeight: 20
13
13
  ),
14
14
  expressive-heading01bold: (
15
- fontFamily: "DN Serif 22",
15
+ fontFamily: "DN Serif",
16
16
  fontWeight: Bold,
17
17
  fontSize: 16,
18
18
  lineHeight: 20
19
19
  ),
20
20
  expressive-heading01italicregular: (
21
- fontFamily: "DN Serif Italic 22",
21
+ fontFamily: "DN Serif Italic",
22
22
  fontWeight: Regular,
23
23
  fontSize: 16,
24
24
  letterSpacing: "",
@@ -26,7 +26,7 @@ $typographyTokensScreenSmall: (
26
26
  fontStyle: italic
27
27
  ),
28
28
  expressive-heading01italicsemibold: (
29
- fontFamily: "DN Serif Italic 22",
29
+ fontFamily: "DN Serif Italic",
30
30
  fontWeight: SemiBold,
31
31
  fontSize: 16,
32
32
  letterSpacing: "",
@@ -34,7 +34,7 @@ $typographyTokensScreenSmall: (
34
34
  fontStyle: italic
35
35
  ),
36
36
  expressive-heading01italicbold: (
37
- fontFamily: "DN Serif Italic 22",
37
+ fontFamily: "DN Serif Italic",
38
38
  fontWeight: Bold,
39
39
  fontSize: 16,
40
40
  letterSpacing: "",
@@ -42,373 +42,373 @@ $typographyTokensScreenSmall: (
42
42
  fontStyle: italic
43
43
  ),
44
44
  expressive-heading02regular: (
45
- fontFamily: "DN Serif 22",
45
+ fontFamily: "DN Serif",
46
46
  fontWeight: Regular,
47
47
  fontSize: 16,
48
48
  lineHeight: 20
49
49
  ),
50
50
  expressive-heading02semibold: (
51
- fontFamily: "DN Serif 22",
51
+ fontFamily: "DN Serif",
52
52
  fontWeight: SemiBold,
53
53
  fontSize: 16,
54
54
  lineHeight: 20
55
55
  ),
56
56
  expressive-heading02bold: (
57
- fontFamily: "DN Serif 22",
57
+ fontFamily: "DN Serif",
58
58
  fontWeight: Bold,
59
59
  fontSize: 16,
60
60
  lineHeight: 20
61
61
  ),
62
62
  expressive-heading02italicregular: (
63
- fontFamily: "DN Serif Italic 22",
63
+ fontFamily: "DN Serif Italic",
64
64
  fontWeight: Regular,
65
65
  fontSize: 16,
66
66
  lineHeight: 20,
67
67
  fontStyle: italic
68
68
  ),
69
69
  expressive-heading02italicsemibold: (
70
- fontFamily: "DN Serif Italic 22",
70
+ fontFamily: "DN Serif Italic",
71
71
  fontWeight: SemiBold,
72
72
  fontSize: 16,
73
73
  lineHeight: 20,
74
74
  fontStyle: italic
75
75
  ),
76
76
  expressive-heading02italicbold: (
77
- fontFamily: "DN Serif Italic 22",
77
+ fontFamily: "DN Serif Italic",
78
78
  fontWeight: Bold,
79
79
  fontSize: 16,
80
80
  lineHeight: 20,
81
81
  fontStyle: italic
82
82
  ),
83
83
  expressive-heading03regular: (
84
- fontFamily: "DN Serif 22",
84
+ fontFamily: "DN Serif",
85
85
  fontWeight: Regular,
86
- fontSize: 22,
87
- lineHeight: 26
86
+ fontSize: 20,
87
+ lineHeight: 24
88
88
  ),
89
89
  expressive-heading03semibold: (
90
- fontFamily: "DN Serif 22",
90
+ fontFamily: "DN Serif",
91
91
  fontWeight: SemiBold,
92
- fontSize: 22,
93
- lineHeight: 26
92
+ fontSize: 20,
93
+ lineHeight: 24
94
94
  ),
95
95
  expressive-heading03bold: (
96
- fontFamily: "DN Serif 22",
96
+ fontFamily: "DN Serif",
97
97
  fontWeight: Bold,
98
- fontSize: 22,
99
- lineHeight: 26
98
+ fontSize: 20,
99
+ lineHeight: 24
100
100
  ),
101
101
  expressive-heading03italicregular: (
102
- fontFamily: "DN Serif Italic 22",
103
- fontSize: 22,
104
- lineHeight: 26,
102
+ fontFamily: "DN Serif Italic",
103
+ fontSize: 20,
104
+ lineHeight: 24,
105
105
  fontWeight: Regular,
106
106
  fontStyle: italic
107
107
  ),
108
108
  expressive-heading03italicsemibold: (
109
- fontFamily: "DN Serif Italic 22",
110
- fontSize: 22,
111
- lineHeight: 26,
109
+ fontFamily: "DN Serif Italic",
110
+ fontSize: 20,
111
+ lineHeight: 24,
112
112
  fontWeight: SemiBold,
113
113
  fontStyle: italic
114
114
  ),
115
115
  expressive-heading03italicbold: (
116
- fontFamily: "DN Serif Italic 22",
117
- fontSize: 22,
118
- lineHeight: 26,
116
+ fontFamily: "DN Serif Italic",
117
+ fontSize: 20,
118
+ lineHeight: 24,
119
119
  fontWeight: Bold,
120
120
  fontStyle: italic
121
121
  ),
122
122
  expressive-heading04regular: (
123
- fontFamily: "DN Serif 22",
123
+ fontFamily: "DN Serif",
124
124
  fontWeight: Regular,
125
125
  fontSize: 26,
126
- lineHeight: 32
126
+ lineHeight: 30
127
127
  ),
128
128
  expressive-heading04semibold: (
129
- fontFamily: "DN Serif 22",
129
+ fontFamily: "DN Serif",
130
130
  fontWeight: SemiBold,
131
131
  fontSize: 26,
132
- lineHeight: 32
132
+ lineHeight: 30
133
133
  ),
134
134
  expressive-heading04bold: (
135
- fontFamily: "DN Serif 22",
135
+ fontFamily: "DN Serif",
136
136
  fontWeight: Bold,
137
137
  fontSize: 26,
138
- lineHeight: 32
138
+ lineHeight: 30
139
139
  ),
140
140
  expressive-heading04italicregular: (
141
- fontFamily: "DN Serif Italic 22",
141
+ fontFamily: "DN Serif Italic",
142
142
  fontWeight: Regular,
143
- lineHeight: 32,
143
+ lineHeight: 30,
144
144
  fontSize: 26,
145
145
  fontStyle: italic
146
146
  ),
147
147
  expressive-heading04italicsemibold: (
148
- fontFamily: "DN Serif Italic 22",
148
+ fontFamily: "DN Serif Italic",
149
149
  fontWeight: SemiBold,
150
- lineHeight: 32,
150
+ lineHeight: 30,
151
151
  fontSize: 26,
152
152
  fontStyle: italic
153
153
  ),
154
154
  expressive-heading04italicbold: (
155
- fontFamily: "DN Serif Italic 22",
155
+ fontFamily: "DN Serif Italic",
156
156
  fontWeight: Bold,
157
- lineHeight: 32,
157
+ lineHeight: 30,
158
158
  fontSize: 26,
159
159
  fontStyle: italic
160
160
  ),
161
161
  expressive-heading05regular: (
162
- fontFamily: "DN Serif 22",
162
+ fontFamily: "DN Serif",
163
163
  fontWeight: Regular,
164
164
  lineHeight: 36,
165
165
  fontSize: 32,
166
166
  letterSpacing: ""
167
167
  ),
168
168
  expressive-heading05semibold: (
169
- fontFamily: "DN Serif 22",
169
+ fontFamily: "DN Serif",
170
170
  fontWeight: SemiBold,
171
171
  lineHeight: 36,
172
172
  fontSize: 32
173
173
  ),
174
174
  expressive-heading05bold: (
175
- fontFamily: "DN Serif 22",
175
+ fontFamily: "DN Serif",
176
176
  fontWeight: Bold,
177
177
  lineHeight: 36,
178
178
  fontSize: 32,
179
179
  letterSpacing: ""
180
180
  ),
181
181
  expressive-heading05italicregular: (
182
- fontFamily: "DN Serif Italic 22",
182
+ fontFamily: "DN Serif Italic",
183
183
  fontWeight: Regular,
184
184
  lineHeight: 36,
185
185
  fontSize: 32,
186
186
  fontStyle: italic
187
187
  ),
188
188
  expressive-heading05italicsemibold: (
189
- fontFamily: "DN Serif Italic 22",
189
+ fontFamily: "DN Serif Italic",
190
190
  fontWeight: SemiBold,
191
191
  lineHeight: 36,
192
192
  fontSize: 32,
193
193
  fontStyle: italic
194
194
  ),
195
195
  expressive-heading05italicbold: (
196
- fontFamily: "DN Serif Italic 22",
196
+ fontFamily: "DN Serif Italic",
197
197
  fontWeight: Bold,
198
198
  lineHeight: 36,
199
199
  fontSize: 32,
200
200
  fontStyle: italic
201
201
  ),
202
202
  functional-heading01regular: (
203
- fontFamily: "DN Sans 11",
203
+ fontFamily: "DN Sans",
204
204
  fontWeight: Regular,
205
205
  fontSize: 16,
206
206
  lineHeight: 20
207
207
  ),
208
208
  functional-heading01semibold: (
209
- fontFamily: "DN Sans 11",
209
+ fontFamily: "DN Sans",
210
210
  fontWeight: SemiBold,
211
211
  fontSize: 16,
212
212
  lineHeight: 20
213
213
  ),
214
214
  functional-heading01bold: (
215
- fontFamily: "DN Sans 11",
215
+ fontFamily: "DN Sans",
216
216
  fontWeight: Bold,
217
217
  fontSize: 16,
218
218
  lineHeight: 20
219
219
  ),
220
220
  functional-heading02regular: (
221
- fontFamily: "DN Sans 11",
221
+ fontFamily: "DN Sans",
222
222
  fontSize: 20,
223
223
  fontWeight: Regular,
224
224
  lineHeight: 24
225
225
  ),
226
226
  functional-heading02semibold: (
227
- fontFamily: "DN Sans 11",
227
+ fontFamily: "DN Sans",
228
228
  fontSize: 20,
229
229
  fontWeight: SemiBold,
230
230
  lineHeight: 24
231
231
  ),
232
232
  functional-heading02bold: (
233
- fontFamily: "DN Sans 11",
233
+ fontFamily: "DN Sans",
234
234
  fontSize: 20,
235
235
  fontWeight: Bold,
236
236
  lineHeight: 24
237
237
  ),
238
238
  functional-heading03regular: (
239
- fontFamily: "DN Sans 11",
239
+ fontFamily: "DN Sans",
240
240
  fontWeight: Regular,
241
- lineHeight: 28,
242
- fontSize: 24
241
+ lineHeight: 24,
242
+ fontSize: 20
243
243
  ),
244
244
  functional-heading03semibold: (
245
- fontFamily: "DN Sans 11",
245
+ fontFamily: "DN Sans",
246
246
  fontWeight: SemiBold,
247
- lineHeight: 28,
248
- fontSize: 24
247
+ lineHeight: 24,
248
+ fontSize: 20
249
249
  ),
250
250
  functional-heading03bold: (
251
- fontFamily: "DN Sans 11",
251
+ fontFamily: "DN Sans",
252
252
  fontWeight: Bold,
253
- lineHeight: 28,
254
- fontSize: 24
253
+ lineHeight: 24,
254
+ fontSize: 20
255
255
  ),
256
256
  functional-heading04regular: (
257
- fontFamily: "DN Sans 11",
257
+ fontFamily: "DN Sans",
258
258
  fontWeight: Regular,
259
259
  fontSize: 31,
260
260
  lineHeight: 36
261
261
  ),
262
262
  functional-heading04semibold: (
263
- fontFamily: "DN Sans 11",
263
+ fontFamily: "DN Sans",
264
264
  fontWeight: SemiBold,
265
265
  fontSize: 31,
266
266
  lineHeight: 36
267
267
  ),
268
268
  functional-heading04bold: (
269
- fontFamily: "DN Sans 11",
269
+ fontFamily: "DN Sans",
270
270
  fontWeight: Bold,
271
271
  fontSize: 31,
272
272
  lineHeight: 36
273
273
  ),
274
274
  functional-heading05regular: (
275
- fontFamily: "DN Sans 11",
275
+ fontFamily: "DN Sans",
276
276
  fontWeight: Regular,
277
277
  fontSize: 39,
278
278
  lineHeight: 48
279
279
  ),
280
280
  functional-heading05semibold: (
281
- fontFamily: "DN Sans 11",
281
+ fontFamily: "DN Sans",
282
282
  fontWeight: SemiBold,
283
283
  fontSize: 39,
284
284
  lineHeight: 48
285
285
  ),
286
286
  functional-heading05bold: (
287
- fontFamily: "DN Sans 11",
287
+ fontFamily: "DN Sans",
288
288
  fontWeight: Bold,
289
289
  fontSize: 39,
290
290
  lineHeight: 48
291
291
  ),
292
292
  expressive-preamble01regular: (
293
- fontFamily: "DN Serif 22",
293
+ fontFamily: "DN Serif",
294
294
  fontWeight: Regular,
295
295
  fontSize: 18,
296
- lineHeight: 28
296
+ lineHeight: 26
297
297
  ),
298
298
  expressive-preamble01semibold: (
299
- fontFamily: "DN Serif 22",
299
+ fontFamily: "DN Serif",
300
300
  fontWeight: SemiBold,
301
301
  fontSize: 18,
302
- lineHeight: 28
302
+ lineHeight: 26
303
303
  ),
304
304
  expressive-preamble01bold: (
305
- fontFamily: "DN Serif 22",
305
+ fontFamily: "DN Serif",
306
306
  fontWeight: Bold,
307
307
  fontSize: 18,
308
- lineHeight: 28
308
+ lineHeight: 26
309
309
  ),
310
310
  expressive-preamble01italicregular: (
311
- fontFamily: "DN Serif Italic 22",
311
+ fontFamily: "DN Serif Italic",
312
312
  fontWeight: Regular,
313
313
  fontSize: 18,
314
- lineHeight: 28,
314
+ lineHeight: 26,
315
315
  fontStyle: italic
316
316
  ),
317
317
  expressive-preamble01italicsemibold: (
318
- fontFamily: "DN Serif Italic 22",
318
+ fontFamily: "DN Serif Italic",
319
319
  fontWeight: SemiBold,
320
320
  fontSize: 18,
321
- lineHeight: 28,
321
+ lineHeight: 26,
322
322
  fontStyle: italic
323
323
  ),
324
324
  expressive-preamble01italicbold: (
325
- fontFamily: "DN Serif Italic 22",
325
+ fontFamily: "DN Serif Italic",
326
326
  fontWeight: Bold,
327
327
  fontSize: 18,
328
- lineHeight: 28,
328
+ lineHeight: 26,
329
329
  fontStyle: italic
330
330
  ),
331
331
  expressive-body01regular: (
332
- fontFamily: "DN Serif 22",
332
+ fontFamily: "DN Serif",
333
333
  fontWeight: Regular,
334
334
  fontSize: 16,
335
335
  lineHeight: 24
336
336
  ),
337
337
  expressive-body01semibold: (
338
- fontFamily: "DN Serif 22",
338
+ fontFamily: "DN Serif",
339
339
  fontWeight: SemiBold,
340
340
  fontSize: 16,
341
341
  lineHeight: 24
342
342
  ),
343
343
  expressive-body01bold: (
344
- fontFamily: "DN Serif 22",
344
+ fontFamily: "DN Serif",
345
345
  fontWeight: Bold,
346
346
  fontSize: 16,
347
347
  lineHeight: 24
348
348
  ),
349
349
  expressive-body01italicregular: (
350
- fontFamily: "DN Serif Italic 22",
350
+ fontFamily: "DN Serif Italic",
351
351
  fontWeight: Regular,
352
352
  lineHeight: 24,
353
353
  fontSize: 16,
354
354
  fontStyle: italic
355
355
  ),
356
356
  expressive-body01italicsemibold: (
357
- fontFamily: "DN Serif Italic 22",
357
+ fontFamily: "DN Serif Italic",
358
358
  fontWeight: SemiBold,
359
359
  lineHeight: 24,
360
360
  fontSize: 16,
361
361
  fontStyle: italic
362
362
  ),
363
363
  expressive-body01italicbold: (
364
- fontFamily: "DN Serif Italic 22",
364
+ fontFamily: "DN Serif Italic",
365
365
  fontWeight: Bold,
366
366
  lineHeight: 24,
367
367
  fontSize: 16,
368
368
  fontStyle: italic
369
369
  ),
370
370
  expressive-body02regular: (
371
- fontFamily: "DN Serif 22",
371
+ fontFamily: "DN Serif",
372
372
  fontWeight: Regular,
373
373
  lineHeight: 28,
374
374
  fontSize: 18,
375
375
  paragraphSpacing: 16
376
376
  ),
377
377
  expressive-body02semibold: (
378
- fontFamily: "DN Serif 22",
378
+ fontFamily: "DN Serif",
379
379
  fontWeight: SemiBold,
380
380
  lineHeight: 28,
381
381
  fontSize: 18
382
382
  ),
383
383
  expressive-body02bold: (
384
- fontFamily: "DN Serif 22",
384
+ fontFamily: "DN Serif",
385
385
  fontWeight: Bold,
386
386
  lineHeight: 28,
387
387
  fontSize: 18
388
388
  ),
389
389
  expressive-body02italicregular: (
390
- fontFamily: "DN Serif Italic 22",
390
+ fontFamily: "DN Serif Italic",
391
391
  fontWeight: Regular,
392
392
  lineHeight: 28,
393
393
  fontSize: 18,
394
394
  fontStyle: italic
395
395
  ),
396
396
  expressive-body02italicsemibold: (
397
- fontFamily: "DN Serif Italic 22",
397
+ fontFamily: "DN Serif Italic",
398
398
  fontWeight: SemiBold,
399
399
  lineHeight: 28,
400
400
  fontSize: 18,
401
401
  fontStyle: italic
402
402
  ),
403
403
  expressive-body02italicbold: (
404
- fontFamily: "DN Serif Italic 22",
404
+ fontFamily: "DN Serif Italic",
405
405
  fontWeight: Bold,
406
406
  lineHeight: 28,
407
407
  fontSize: 18,
408
408
  fontStyle: italic
409
409
  ),
410
410
  functional-body01regular: (
411
- fontFamily: "DN Sans 11",
411
+ fontFamily: "DN Sans",
412
412
  fontWeight: Regular,
413
413
  fontSize: 14,
414
414
  letterSpacing: "",
@@ -416,118 +416,118 @@ $typographyTokensScreenSmall: (
416
416
  paragraphSpacing: ""
417
417
  ),
418
418
  functional-body01semibold: (
419
- fontFamily: "DN Sans 11",
419
+ fontFamily: "DN Sans",
420
420
  fontWeight: SemiBold,
421
421
  fontSize: 14,
422
422
  letterSpacing: "",
423
423
  lineHeight: 20
424
424
  ),
425
425
  functional-body01bold: (
426
- fontFamily: "DN Sans 11",
426
+ fontFamily: "DN Sans",
427
427
  fontWeight: Bold,
428
428
  fontSize: 14,
429
429
  letterSpacing: "",
430
430
  lineHeight: 20
431
431
  ),
432
432
  functional-body02regular: (
433
- fontFamily: "DN Sans 11",
433
+ fontFamily: "DN Sans",
434
434
  fontWeight: Regular,
435
435
  lineHeight: 24,
436
436
  fontSize: 16
437
437
  ),
438
438
  functional-body02semibold: (
439
- fontFamily: "DN Sans 11",
439
+ fontFamily: "DN Sans",
440
440
  fontWeight: SemiBold,
441
441
  lineHeight: 24,
442
442
  fontSize: 16
443
443
  ),
444
444
  functional-body02bold: (
445
- fontFamily: "DN Sans 11",
445
+ fontFamily: "DN Sans",
446
446
  fontWeight: Bold,
447
447
  lineHeight: 24,
448
448
  fontSize: 16
449
449
  ),
450
450
  functional-body03regular: (
451
- fontFamily: "DN Sans 11",
451
+ fontFamily: "DN Sans",
452
452
  fontWeight: Regular,
453
453
  lineHeight: 28,
454
454
  fontSize: 20
455
455
  ),
456
456
  functional-body03semibold: (
457
- fontFamily: "DN Sans 11",
457
+ fontFamily: "DN Sans",
458
458
  fontWeight: SemiBold,
459
459
  lineHeight: 28,
460
460
  fontSize: 20
461
461
  ),
462
462
  functional-body03bold: (
463
- fontFamily: "DN Sans 11",
463
+ fontFamily: "DN Sans",
464
464
  fontWeight: Bold,
465
465
  lineHeight: 28,
466
466
  fontSize: 20
467
467
  ),
468
468
  functional-meta01regular: (
469
- fontFamily: "DN Sans 11",
469
+ fontFamily: "DN Sans",
470
470
  fontWeight: Regular,
471
471
  fontSize: 10,
472
472
  lineHeight: 12
473
473
  ),
474
474
  functional-meta01semibold: (
475
- fontFamily: "DN Sans 11",
475
+ fontFamily: "DN Sans",
476
476
  fontWeight: SemiBold,
477
477
  fontSize: 10,
478
478
  lineHeight: 12
479
479
  ),
480
480
  functional-meta01bold: (
481
- fontFamily: "DN Sans 11",
481
+ fontFamily: "DN Sans",
482
482
  fontWeight: Bold,
483
483
  fontSize: 10,
484
484
  lineHeight: 12
485
485
  ),
486
486
  functional-meta02regular: (
487
- fontFamily: "DN Sans 11",
487
+ fontFamily: "DN Sans",
488
488
  fontWeight: Regular,
489
489
  lineHeight: 16,
490
490
  fontSize: 12
491
491
  ),
492
492
  functional-meta02semibold: (
493
- fontFamily: "DN Sans 11",
493
+ fontFamily: "DN Sans",
494
494
  fontWeight: SemiBold,
495
495
  lineHeight: 16,
496
496
  fontSize: 12
497
497
  ),
498
498
  functional-meta02bold: (
499
- fontFamily: "DN Sans 11",
499
+ fontFamily: "DN Sans",
500
500
  fontWeight: Bold,
501
501
  lineHeight: 16,
502
502
  fontSize: 12
503
503
  ),
504
504
  detailstandard-button: (
505
- fontFamily: "DN Sans 11",
505
+ fontFamily: "DN Sans",
506
506
  fontWeight: SemiBold,
507
507
  lineHeight: 24,
508
508
  fontSize: 16
509
509
  ),
510
510
  detailbottom-nav: (
511
- fontFamily: "DN Sans 11",
511
+ fontFamily: "DN Sans",
512
512
  fontWeight: SemiBold,
513
513
  lineHeight: 16,
514
514
  fontSize: 12,
515
515
  letterSpacing: 0.2
516
516
  ),
517
517
  detaildropcap: (
518
- fontFamily: "DN Serif 22",
518
+ fontFamily: "DN Serif",
519
519
  lineHeight: 52,
520
520
  fontSize: 52,
521
521
  fontWeight: Bold
522
522
  ),
523
523
  detailstandard-button-small: (
524
- fontFamily: "DN Sans 11",
524
+ fontFamily: "DN Sans",
525
525
  fontWeight: SemiBold,
526
526
  lineHeight: 20,
527
527
  fontSize: 14
528
528
  ),
529
529
  detailarticle-label: (
530
- fontFamily: "DN Sans 11",
530
+ fontFamily: "DN Sans",
531
531
  fontWeight: Bold,
532
532
  lineHeight: 16,
533
533
  fontSize: 12,
@@ -535,7 +535,7 @@ $typographyTokensScreenSmall: (
535
535
  letterSpacing: 0.5
536
536
  ),
537
537
  detailmedryckare: (
538
- fontFamily: "DN Serif 22",
538
+ fontFamily: "DN Serif",
539
539
  fontWeight: Regular,
540
540
  fontSize: 16,
541
541
  lineHeight: 22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.7",
3
+ "version": "3.0.0-alpha.71",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
@@ -20,7 +20,7 @@
20
20
  "stylelint": "^14.14.0",
21
21
  "stylelint-config-prettier": "^9.0.3",
22
22
  "stylelint-config-standard": "^29.0.0",
23
- "stylelint-config-standard-scss": "^6.0.0",
23
+ "stylelint-config-standard-scss": "^7.0.1",
24
24
  "stylelint-prettier": "^2.0.0",
25
25
  "stylelint-sass-render-errors": "^3.0.0",
26
26
  "stylelint-selector-bem-pattern": "^2.1.1"
package/tokens/colors-css-variables.json CHANGED
@@ -11,6 +11,7 @@
11
11
  "text-brand": "var(--ds-color-text-brand)",
12
12
  "text-body-link": "var(--ds-color-text-body-link)",
13
13
  "text-body-link-visited": "var(--ds-color-text-body-link-visited)",
14
+ "text-positive": "var(--ds-color-text-positive)",
14
15
  "icon-primary": "var(--ds-color-icon-primary)",
15
16
  "icon-primary-02": "var(--ds-color-icon-primary-02)",
16
17
  "icon-secondary": "var(--ds-color-icon-secondary)",
@@ -33,6 +34,7 @@
33
34
  "component-critical-overlay": "var(--ds-color-component-critical-overlay)",
34
35
  "component-static-white": "var(--ds-color-component-static-white)",
35
36
  "component-positive": "var(--ds-color-component-positive)",
37
+ "component-primary-02": "var(--ds-color-component-primary-02)",
36
38
  "surface-below": "var(--ds-color-surface-below)",
37
39
  "surface-native-article": "var(--ds-color-surface-native-article)",
38
40
  "surface-background": "var(--ds-color-surface-background)",
@@ -63,6 +65,9 @@
63
65
  "static-neutral-200": "var(--ds-color-static-neutral-200)",
64
66
  "static-sthlm": "var(--ds-color-static-sthlm)",
65
67
  "static-ad-yellow": "var(--ds-color-static-ad-yellow)",
68
+ "static-neutral-100": "var(--ds-color-static-neutral-100)",
69
+ "static-neutral-500": "var(--ds-color-static-neutral-500)",
70
+ "static-red-500": "var(--ds-color-static-red-500)",
66
71
  "gradient-content-fade-left": "var(--ds-color-gradient-content-fade-left)",
67
72
  "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
68
73
  "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",