@bonniernews/dn-design-system-web 31.0.1-beta.2 → 31.0.1

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