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