@bonniernews/dn-design-system-web 32.4.0 → 32.4.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 (9) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/foundations/variables/colorsDnDark.scss +1 -1
  3. package/foundations/variables/typographyList.scss +5 -4
  4. package/foundations/variables/typographyScreenExtraLarge.scss +33 -26
  5. package/foundations/variables/typographyScreenLarge.scss +33 -26
  6. package/foundations/variables/typographyScreenSmall.scss +33 -26
  7. package/package.json +1 -1
  8. package/variables/colors-dark-mode.json +1 -1
  9. package/variables/typography-list.json +6 -5
package/CHANGELOG.md CHANGED
@@ -4,6 +4,15 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.4.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.4.0...@bonniernews/dn-design-system-web@32.4.1) (2025-05-23)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **foundations:** update variables from Figma ([#1747](https://github.com/BonnierNews/dn-design-system/issues/1747)) ([0d268c2](https://github.com/BonnierNews/dn-design-system/commit/0d268c274d6704f707e63e0a72e4ba9e28d31dde))
13
+ * prerelease packages ([cd36380](https://github.com/BonnierNews/dn-design-system/commit/cd36380468c30032e363d97552fdf642a3863f55))
14
+ * **web:** fix broken workflow ([#1748](https://github.com/BonnierNews/dn-design-system/issues/1748)) ([96320ca](https://github.com/BonnierNews/dn-design-system/commit/96320ca146bcdc20dd6131fb0ff1b2f999f7b044))
15
+
7
16
  ## [32.4.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.3.2...@bonniernews/dn-design-system-web@32.4.0) (2025-05-19)
8
17
 
9
18
 
package/foundations/variables/colorsDnDark.scss CHANGED
@@ -20,7 +20,7 @@ $ds-hex-dark-border-primary-strong: rgba(255, 255, 255, 0.25);
20
20
  $ds-hex-dark-border-primary-strongest: #ffffff;
21
21
  $ds-hex-dark-border-primaryinvert: rgba(5, 5, 5, 0.13);
22
22
  $ds-hex-dark-border-primaryinvert-strong: rgba(5, 5, 5, 0.5);
23
- $ds-hex-dark-border-primaryinvert-strongest: #0d0d0d;
23
+ $ds-hex-dark-border-primaryinvert-strongest: #171717;
24
24
  $ds-hex-dark-border-brand: #fd2330;
25
25
  $ds-hex-dark-border-culture: #4293d7;
26
26
  $ds-hex-dark-text-primary: #e5e5e5;
package/foundations/variables/typographyList.scss CHANGED
@@ -30,8 +30,6 @@ $ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
30
30
  $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
31
31
  $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
32
32
  $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
33
- $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
34
- $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
35
33
  $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
36
34
  $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
37
35
  $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
@@ -40,7 +38,8 @@ $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
40
38
  $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
41
39
  $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
42
40
  $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
43
- $ds-typography-detail-medryckare: 'detail-medryckare';
41
+ $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
42
+ $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
44
43
  $ds-typography-detail-article-quote: 'detail-article-quote';
45
44
  $ds-typography-detail-article-standard: 'detail-article-standard';
46
45
  $ds-typography-detail-article-direkt: 'detail-article-direkt';
@@ -49,6 +48,8 @@ $ds-typography-detail-article-longread-premium: 'detail-article-longread-premium
49
48
  $ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
50
49
  $ds-typography-detail-article-opinion: 'detail-article-opinion';
51
50
  $ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
52
- $ds-typography-detail-direkt-header: 'detail-direkt-header';
53
51
  $ds-typography-detail-gameheader: 'detail-gameheader';
54
52
  $ds-typography-detail-dropcap: 'detail-dropcap';
53
+ $ds-typography-detail-direkt-header: 'detail-direkt-header';
54
+ $ds-typography-detail-medryckare: 'detail-medryckare';
55
+ $ds-typography-detail-direkt-body: 'detail-direkt-body';
package/foundations/variables/typographyScreenExtraLarge.scss CHANGED
@@ -224,21 +224,6 @@ $typographyScreenExtraLarge: (
224
224
  fontSize: 80,
225
225
  fontWeight: Bold
226
226
  ),
227
- detail-teaser-text-i-bild: (
228
- lineHeight: 1.1,
229
- letterSpacing: 0,
230
- fontFamily: "DN Serif Display",
231
- fontSize: 40,
232
- fontWeight: Regular
233
- ),
234
- detail-teaser-large-opinion: (
235
- lineHeight: 1.1,
236
- letterSpacing: 0,
237
- fontFamily: "DN Serif Display",
238
- fontSize: 36,
239
- fontStyle: italic,
240
- fontWeight: Regular
241
- ),
242
227
  detail-teaser-large-rightcol: (
243
228
  lineHeight: 1.2,
244
229
  letterSpacing: 0,
@@ -298,11 +283,19 @@ $typographyScreenExtraLarge: (
298
283
  fontStyle: italic,
299
284
  fontWeight: Regular
300
285
  ),
301
- detail-medryckare: (
302
- lineHeight: 1.4,
286
+ detail-teaser-large-opinion: (
287
+ lineHeight: 1.1,
303
288
  letterSpacing: 0,
304
- fontFamily: "DN Serif Text",
305
- fontSize: 16,
289
+ fontFamily: "DN Serif Display",
290
+ fontSize: 36,
291
+ fontStyle: italic,
292
+ fontWeight: Regular
293
+ ),
294
+ detail-teaser-text-i-bild: (
295
+ lineHeight: 1.1,
296
+ letterSpacing: 0,
297
+ fontFamily: "DN Serif Display",
298
+ fontSize: 40,
306
299
  fontWeight: Regular
307
300
  ),
308
301
  detail-article-quote: (
@@ -363,13 +356,6 @@ $typographyScreenExtraLarge: (
363
356
  fontSize: 28,
364
357
  fontWeight: Bold
365
358
  ),
366
- detail-direkt-header: (
367
- lineHeight: 1.1,
368
- letterSpacing: 0,
369
- fontFamily: "DN Serif Display",
370
- fontSize: 48,
371
- fontWeight: Regular
372
- ),
373
359
  detail-gameheader: (
374
360
  lineHeight: 1.1,
375
361
  letterSpacing: 0,
@@ -383,5 +369,26 @@ $typographyScreenExtraLarge: (
383
369
  fontFamily: "DN Serif Display",
384
370
  fontSize: 92,
385
371
  fontWeight: Bold
372
+ ),
373
+ detail-direkt-header: (
374
+ lineHeight: 1.1,
375
+ letterSpacing: 0,
376
+ fontFamily: "DN Serif Display",
377
+ fontSize: 36,
378
+ fontWeight: Bold
379
+ ),
380
+ detail-medryckare: (
381
+ lineHeight: 1.4,
382
+ letterSpacing: 0,
383
+ fontFamily: "DN Serif Text",
384
+ fontSize: 16,
385
+ fontWeight: Regular
386
+ ),
387
+ detail-direkt-body: (
388
+ lineHeight: 1.5,
389
+ letterSpacing: 0,
390
+ fontFamily: "DN Serif Text",
391
+ fontSize: 18,
392
+ fontWeight: Regular
386
393
  )
387
394
  );
package/foundations/variables/typographyScreenLarge.scss CHANGED
@@ -224,21 +224,6 @@ $typographyScreenLarge: (
224
224
  fontSize: 56,
225
225
  fontWeight: Bold
226
226
  ),
227
- detail-teaser-text-i-bild: (
228
- lineHeight: 1.1,
229
- letterSpacing: 0,
230
- fontFamily: "DN Serif Display",
231
- fontSize: 40,
232
- fontWeight: Regular
233
- ),
234
- detail-teaser-large-opinion: (
235
- lineHeight: 1.1,
236
- letterSpacing: 0,
237
- fontFamily: "DN Serif Display",
238
- fontSize: 26,
239
- fontStyle: italic,
240
- fontWeight: Regular
241
- ),
242
227
  detail-teaser-large-rightcol: (
243
228
  lineHeight: 1.2,
244
229
  letterSpacing: 0,
@@ -298,11 +283,19 @@ $typographyScreenLarge: (
298
283
  fontStyle: italic,
299
284
  fontWeight: Regular
300
285
  ),
301
- detail-medryckare: (
302
- lineHeight: 1.4,
286
+ detail-teaser-large-opinion: (
287
+ lineHeight: 1.1,
303
288
  letterSpacing: 0,
304
- fontFamily: "DN Serif Text",
305
- fontSize: 16,
289
+ fontFamily: "DN Serif Display",
290
+ fontSize: 26,
291
+ fontStyle: italic,
292
+ fontWeight: Regular
293
+ ),
294
+ detail-teaser-text-i-bild: (
295
+ lineHeight: 1.1,
296
+ letterSpacing: 0,
297
+ fontFamily: "DN Serif Display",
298
+ fontSize: 40,
306
299
  fontWeight: Regular
307
300
  ),
308
301
  detail-article-quote: (
@@ -363,13 +356,6 @@ $typographyScreenLarge: (
363
356
  fontSize: 28,
364
357
  fontWeight: Bold
365
358
  ),
366
- detail-direkt-header: (
367
- lineHeight: 1.1,
368
- letterSpacing: 0,
369
- fontFamily: "DN Serif Display",
370
- fontSize: 48,
371
- fontWeight: Regular
372
- ),
373
359
  detail-gameheader: (
374
360
  lineHeight: 1.1,
375
361
  letterSpacing: 0,
@@ -383,5 +369,26 @@ $typographyScreenLarge: (
383
369
  fontFamily: "DN Serif Display",
384
370
  fontSize: 92,
385
371
  fontWeight: Bold
372
+ ),
373
+ detail-direkt-header: (
374
+ lineHeight: 1.1,
375
+ letterSpacing: 0,
376
+ fontFamily: "DN Serif Display",
377
+ fontSize: 36,
378
+ fontWeight: Bold
379
+ ),
380
+ detail-medryckare: (
381
+ lineHeight: 1.4,
382
+ letterSpacing: 0,
383
+ fontFamily: "DN Serif Text",
384
+ fontSize: 16,
385
+ fontWeight: Regular
386
+ ),
387
+ detail-direkt-body: (
388
+ lineHeight: 1.5,
389
+ letterSpacing: 0,
390
+ fontFamily: "DN Serif Text",
391
+ fontSize: 18,
392
+ fontWeight: Regular
386
393
  )
387
394
  );
package/foundations/variables/typographyScreenSmall.scss CHANGED
@@ -224,21 +224,6 @@ $typographyScreenSmall: (
224
224
  fontSize: 32,
225
225
  fontWeight: Bold
226
226
  ),
227
- detail-teaser-text-i-bild: (
228
- lineHeight: 1.1,
229
- letterSpacing: 0,
230
- fontFamily: "DN Serif Display",
231
- fontSize: 32,
232
- fontWeight: Regular
233
- ),
234
- detail-teaser-large-opinion: (
235
- lineHeight: 1.2,
236
- letterSpacing: 0,
237
- fontFamily: "DN Serif Headline",
238
- fontSize: 22,
239
- fontStyle: italic,
240
- fontWeight: Regular
241
- ),
242
227
  detail-teaser-large-rightcol: (
243
228
  lineHeight: 1.2,
244
229
  letterSpacing: 0,
@@ -298,11 +283,19 @@ $typographyScreenSmall: (
298
283
  fontStyle: italic,
299
284
  fontWeight: Regular
300
285
  ),
301
- detail-medryckare: (
302
- lineHeight: 1.4,
286
+ detail-teaser-large-opinion: (
287
+ lineHeight: 1.1,
303
288
  letterSpacing: 0,
304
- fontFamily: "DN Serif Text",
305
- fontSize: 16,
289
+ fontFamily: "DN Serif Headline",
290
+ fontSize: 22,
291
+ fontStyle: italic,
292
+ fontWeight: Regular
293
+ ),
294
+ detail-teaser-text-i-bild: (
295
+ lineHeight: 1.1,
296
+ letterSpacing: 0,
297
+ fontFamily: "DN Serif Display",
298
+ fontSize: 32,
306
299
  fontWeight: Regular
307
300
  ),
308
301
  detail-article-quote: (
@@ -363,13 +356,6 @@ $typographyScreenSmall: (
363
356
  fontSize: 22,
364
357
  fontWeight: Bold
365
358
  ),
366
- detail-direkt-header: (
367
- lineHeight: 1.1,
368
- letterSpacing: 0,
369
- fontFamily: "DN Serif Display",
370
- fontSize: 32,
371
- fontWeight: Regular
372
- ),
373
359
  detail-gameheader: (
374
360
  lineHeight: 1.1,
375
361
  letterSpacing: 0,
@@ -383,5 +369,26 @@ $typographyScreenSmall: (
383
369
  fontFamily: "DN Serif Display",
384
370
  fontSize: 52,
385
371
  fontWeight: Bold
372
+ ),
373
+ detail-direkt-header: (
374
+ lineHeight: 1.1,
375
+ letterSpacing: 0,
376
+ fontFamily: "DN Serif Headline",
377
+ fontSize: 26,
378
+ fontWeight: Bold
379
+ ),
380
+ detail-medryckare: (
381
+ lineHeight: 1.4,
382
+ letterSpacing: 0,
383
+ fontFamily: "DN Serif Text",
384
+ fontSize: 16,
385
+ fontWeight: Regular
386
+ ),
387
+ detail-direkt-body: (
388
+ lineHeight: 1.5,
389
+ letterSpacing: 0,
390
+ fontFamily: "DN Serif Text",
391
+ fontSize: 16,
392
+ fontWeight: Regular
386
393
  )
387
394
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.4.0",
3
+ "version": "32.4.1",
4
4
  "description": "DN design system for web.",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/variables/colors-dark-mode.json CHANGED
@@ -24,7 +24,7 @@
24
24
  "primary-strongest": "#ffffff",
25
25
  "primaryinvert": "rgba(5, 5, 5, 0.13)",
26
26
  "primaryinvert-strong": "rgba(5, 5, 5, 0.5)",
27
- "primaryinvert-strongest": "#0d0d0d",
27
+ "primaryinvert-strongest": "#171717",
28
28
  "brand": "#fd2330",
29
29
  "culture": "#4293d7"
30
30
  },
package/variables/typography-list.json CHANGED
@@ -31,8 +31,6 @@
31
31
  "detail-teaser-standard": "'detail-teaser-standard'",
32
32
  "detail-teaser-large-compact": "'detail-teaser-large-compact'",
33
33
  "detail-teaser-baotaxl": "'detail-teaser-baotaxl'",
34
- "detail-teaser-text-i-bild": "'detail-teaser-text-i-bild'",
35
- "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
36
34
  "detail-teaser-large-rightcol": "'detail-teaser-large-rightcol'",
37
35
  "detail-teaser-standard-compact-opinion": "'detail-teaser-standard-compact-opinion'",
38
36
  "detail-teaser-twin": "'detail-teaser-twin'",
@@ -41,7 +39,8 @@
41
39
  "detail-teaser-storrubrik": "'detail-teaser-storrubrik'",
42
40
  "detail-teaser-standard-compact": "'detail-teaser-standard-compact'",
43
41
  "detail-teaser-storrubrik-opinion": "'detail-teaser-storrubrik-opinion'",
44
- "detail-medryckare": "'detail-medryckare'",
42
+ "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
43
+ "detail-teaser-text-i-bild": "'detail-teaser-text-i-bild'",
45
44
  "detail-article-quote": "'detail-article-quote'",
46
45
  "detail-article-standard": "'detail-article-standard'",
47
46
  "detail-article-direkt": "'detail-article-direkt'",
@@ -50,7 +49,9 @@
50
49
  "detail-article-direct-opinion": "'detail-article-direct-opinion'",
51
50
  "detail-article-opinion": "'detail-article-opinion'",
52
51
  "detail-mellanrubrik": "'detail-mellanrubrik'",
53
- "detail-direkt-header": "'detail-direkt-header'",
54
52
  "detail-gameheader": "'detail-gameheader'",
55
- "detail-dropcap": "'detail-dropcap'"
53
+ "detail-dropcap": "'detail-dropcap'",
54
+ "detail-direkt-header": "'detail-direkt-header'",
55
+ "detail-medryckare": "'detail-medryckare'",
56
+ "detail-direkt-body": "'detail-direkt-body'"
56
57
  }