@bonniernews/dn-design-system-web 34.2.1 → 35.0.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 (31) hide show
  1. package/.prettierignore +1 -0
  2. package/CHANGELOG.md +24 -0
  3. package/components/disclaimer/disclaimer.scss +1 -1
  4. package/components/modal/modal.js +2 -1
  5. package/components/modal/modal.njk +1 -0
  6. package/components/modal/modal.scss +4 -4
  7. package/components/teaser-native/teaser-native.scss +2 -2
  8. package/foundations/variables/colorsCssVariables.scss +32 -11
  9. package/foundations/variables/colorsDnDark.scss +32 -11
  10. package/foundations/variables/colorsDnLight.scss +32 -11
  11. package/foundations/variables/shadowsDnDark.scss +6 -6
  12. package/foundations/variables/shadowsDnLight.scss +6 -6
  13. package/foundations/variables/shadowsList.scss +1 -1
  14. package/foundations/variables/typographyList.scss +5 -0
  15. package/foundations/variables/typographyScreenExtraLarge.scss +35 -0
  16. package/foundations/variables/typographyScreenLarge.scss +35 -0
  17. package/foundations/variables/typographyScreenSmall.scss +35 -0
  18. package/package.json +1 -1
  19. package/preact/components/byline/byline.js +2 -0
  20. package/preact/components/byline/byline.js.map +2 -2
  21. package/preact/components/icon-with-wrapper/icon-with-wrapper.js +32 -11
  22. package/preact/components/icon-with-wrapper/icon-with-wrapper.js.map +2 -2
  23. package/preact/components/modal/modal.d.ts +2 -2
  24. package/preact/components/modal/modal.js +2 -0
  25. package/preact/components/modal/modal.js.map +2 -2
  26. package/types-lib/ds-color.d.ts +32 -11
  27. package/variables/colors-css-variables.json +32 -11
  28. package/variables/colors-dark-mode.json +32 -11
  29. package/variables/colors-light-mode.json +32 -11
  30. package/variables/shadows-list.json +1 -1
  31. package/variables/typography-list.json +5 -0
package/.prettierignore CHANGED
@@ -6,5 +6,6 @@
6
6
  **/*.md
7
7
  **/*.json
8
8
  **/*.scss
9
+ /preact
9
10
  .release-it-beta.cjs
10
11
  .release-it.cjs
package/CHANGELOG.md CHANGED
@@ -4,6 +4,30 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [35.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@34.2.2...@bonniernews/dn-design-system-web@35.0.0) (2025-12-10)
8
+
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+
12
+ * **foundations:** update variables (#1968)
13
+
14
+ ### Maintenance
15
+
16
+ * **deps:** bump @react-native-community/datetimepicker from 8.4.4 to 8.5.1 ([#1960](https://github.com/BonnierNews/dn-design-system/issues/1960)) ([ea1d941](https://github.com/BonnierNews/dn-design-system/commit/ea1d9410f5ad3dac71eb0e7f2c8dfdbc99ca9132))
17
+ * **foundations:** remove app from designsystemet.dn.se and old paths on server ([#1966](https://github.com/BonnierNews/dn-design-system/issues/1966)) ([46e9260](https://github.com/BonnierNews/dn-design-system/commit/46e926008aeee903d590ae23aec54a643eb833de))
18
+ * **foundations:** update variables ([#1968](https://github.com/BonnierNews/dn-design-system/issues/1968)) ([b5c089c](https://github.com/BonnierNews/dn-design-system/commit/b5c089cafff5b538b6ec112516861aa19fe8a828))
19
+ * prerelease packages ([04ae6bb](https://github.com/BonnierNews/dn-design-system/commit/04ae6bb915728419623f3bb52fca6e083478663f))
20
+ * prerelease packages ([04f25cf](https://github.com/BonnierNews/dn-design-system/commit/04f25cfc873eb3aeb555da2090bd53c9c4c6264f))
21
+ * **web:** remove prerelease package as it can't publish to npm ([#1965](https://github.com/BonnierNews/dn-design-system/issues/1965)) ([8337bde](https://github.com/BonnierNews/dn-design-system/commit/8337bde491fdf8cb290a7f092db3f41223e5aa0e))
22
+ * **web:** remove screenshot update in github action ([#1964](https://github.com/BonnierNews/dn-design-system/issues/1964)) ([b9cda9f](https://github.com/BonnierNews/dn-design-system/commit/b9cda9f93415be902a17678bad797111ade98097))
23
+
24
+ ## [34.2.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@34.2.1...@bonniernews/dn-design-system-web@34.2.2) (2025-12-05)
25
+
26
+
27
+ ### Bug Fixes
28
+
29
+ * **web:** fix modal fallback for dialog element ([#1963](https://github.com/BonnierNews/dn-design-system/issues/1963)) ([40330b7](https://github.com/BonnierNews/dn-design-system/commit/40330b79fbc974de405583c9e57ffda6c3d04f1a))
30
+
7
31
  ## [34.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@34.2.0...@bonniernews/dn-design-system-web@34.2.1) (2025-12-03)
8
32
 
9
33
 
package/components/disclaimer/disclaimer.scss CHANGED
@@ -79,7 +79,7 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
79
79
  &.ds-disclaimer--native {
80
80
  .ds-disclaimer__body-html,
81
81
  .ds-disclaimer__icon-wrapper {
82
- background-color: $ds-color-surface-ad-yellow;
82
+ background-color: $ds-color-surface-native-subtle;
83
83
  }
84
84
 
85
85
  .ds-icon,
package/components/modal/modal.js CHANGED
@@ -31,12 +31,13 @@ function initModal(modalEl) {
31
31
  }
32
32
 
33
33
  function openModal(modalEl) {
34
+ modalEl.classList.remove('ds-modal--hidden');
35
+
34
36
  if (typeof HTMLDialogElement === 'function') {
35
37
  const modalElInner = modalEl.querySelector('.ds-modal__inner');
36
38
  modalElInner.showModal();
37
39
  modalElInner.focus(); // Ensure the modal is focused when opened and not a button/link within it
38
40
  } else {
39
- modalEl.classList.remove('ds-modal--hidden');
40
41
  document.body.classList.add('no-scroll');
41
42
  }
42
43
  }
package/components/modal/modal.njk CHANGED
@@ -8,6 +8,7 @@
8
8
  componentClassName,
9
9
  componentClassName + "--sheet" if params.modalType === "sheet",
10
10
  "ds-force-px" if params.forcePx,
11
+ "ds-modal--hidden",
11
12
  params.classNames if params.classNames
12
13
  ] | join(" ") %}
13
14
  {% set attributes = getAttributes(params.attributes) %}
package/components/modal/modal.scss CHANGED
@@ -8,11 +8,11 @@ body.no-scroll {
8
8
  touch-action: none;
9
9
  }
10
10
 
11
- .ds-modal {
12
- &--fallback.ds-modal--hidden {
13
- display: none;
14
- }
11
+ .ds-modal.ds-modal--hidden {
12
+ display: none;
13
+ }
15
14
 
15
+ .ds-modal {
16
16
  &--fallback {
17
17
  display: flex;
18
18
  position: fixed;
package/components/teaser-native/teaser-native.scss CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  .ds-teaser.ds-teaser--native {
5
5
  overflow: hidden;
6
- border-bottom: 4px solid $ds-color-surface-ad-yellow;
6
+ border-bottom: 4px solid $ds-color-surface-native-subtle;
7
7
 
8
8
  &:focus-visible {
9
9
  outline: none;
@@ -151,7 +151,7 @@
151
151
  }
152
152
 
153
153
  .ds-teaser__ad-bar {
154
- background-color: $ds-color-surface-ad-yellow;
154
+ background-color: $ds-color-surface-native-subtle;
155
155
  display: flex;
156
156
  height: ds-px-to-rem(40px);
157
157
  font-family: $ds-font--sans;
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -1,9 +1,9 @@
1
- $ds-color-surface-foreground: var(--ds-color-surface-foreground);
2
1
  $ds-color-surface-primary: var(--ds-color-surface-primary);
3
2
  $ds-color-surface-primary-raised-soft: var(--ds-color-surface-primary-raised-soft);
4
3
  $ds-color-surface-primary-raised-strong: var(--ds-color-surface-primary-raised-strong);
5
4
  $ds-color-surface-primary-elevated: var(--ds-color-surface-primary-elevated);
6
5
  $ds-color-surface-primaryinvert: var(--ds-color-surface-primaryinvert);
6
+ $ds-color-surface-foreground: var(--ds-color-surface-foreground);
7
7
  $ds-color-surface-primaryinvert-raised-soft: var(--ds-color-surface-primaryinvert-raised-soft);
8
8
  $ds-color-surface-primaryinvert-elevated: var(--ds-color-surface-primaryinvert-elevated);
9
9
  $ds-color-surface-brand: var(--ds-color-surface-brand);
@@ -11,8 +11,8 @@ $ds-color-surface-success: var(--ds-color-surface-success);
11
11
  $ds-color-surface-culture: var(--ds-color-surface-culture);
12
12
  $ds-color-surface-breaking: var(--ds-color-surface-breaking);
13
13
  $ds-color-surface-overlay: var(--ds-color-surface-overlay);
14
- $ds-color-surface-ad-yellow: var(--ds-color-surface-ad-yellow);
15
- $ds-color-surface-native-article: var(--ds-color-surface-native-article);
14
+ $ds-color-surface-native: var(--ds-color-surface-native);
15
+ $ds-color-surface-native-subtle: var(--ds-color-surface-native-subtle);
16
16
  $ds-color-surface-quiz: var(--ds-color-surface-quiz);
17
17
  $ds-color-surface-media: var(--ds-color-surface-media);
18
18
  $ds-color-border-primary: var(--ds-color-border-primary);
@@ -40,14 +40,35 @@ $ds-color-gradients-primary-start: var(--ds-color-gradients-primary-start);
40
40
  $ds-color-gradients-primary-end: var(--ds-color-gradients-primary-end);
41
41
  $ds-color-gradients-overlay-start: var(--ds-color-gradients-overlay-start);
42
42
  $ds-color-gradients-overlay-end: var(--ds-color-gradients-overlay-end);
43
- $ds-color-button-primary-default: var(--ds-color-button-primary-default);
44
- $ds-color-button-primary-hover: var(--ds-color-button-primary-hover);
45
- $ds-color-button-primary-pressed: var(--ds-color-button-primary-pressed);
46
- $ds-color-button-primary-disabled: var(--ds-color-button-primary-disabled);
47
- $ds-color-button-secondary-filled-default: var(--ds-color-button-secondary-filled-default);
48
- $ds-color-button-secondary-filled-hover: var(--ds-color-button-secondary-filled-hover);
49
- $ds-color-button-secondary-filled-pressed: var(--ds-color-button-secondary-filled-pressed);
50
- $ds-color-button-secondary-filled-disabled: var(--ds-color-button-secondary-filled-disabled);
43
+ $ds-color-button-primary-bg-default: var(--ds-color-button-primary-bg-default);
44
+ $ds-color-button-primary-bg-hover: var(--ds-color-button-primary-bg-hover);
45
+ $ds-color-button-primary-bg-pressed: var(--ds-color-button-primary-bg-pressed);
46
+ $ds-color-button-primary-bg-disabled: var(--ds-color-button-primary-bg-disabled);
47
+ $ds-color-button-primary-black-bg-default: var(--ds-color-button-primary-black-bg-default);
48
+ $ds-color-button-primary-black-bg-hover: var(--ds-color-button-primary-black-bg-hover);
49
+ $ds-color-button-primary-black-bg-pressed: var(--ds-color-button-primary-black-bg-pressed);
50
+ $ds-color-button-primary-black-bg-disabled: var(--ds-color-button-primary-black-bg-disabled);
51
+ $ds-color-button-secondary-filled-bg-default: var(--ds-color-button-secondary-filled-bg-default);
52
+ $ds-color-button-secondary-filled-bg-hover: var(--ds-color-button-secondary-filled-bg-hover);
53
+ $ds-color-button-secondary-filled-bg-pressed: var(--ds-color-button-secondary-filled-bg-pressed);
54
+ $ds-color-button-secondary-filled-bg-disabled: var(--ds-color-button-secondary-filled-bg-disabled);
55
+ $ds-color-button-secondary-outline-outline-default: var(--ds-color-button-secondary-outline-outline-default);
56
+ $ds-color-button-secondary-outline-outline-hover: var(--ds-color-button-secondary-outline-outline-hover);
57
+ $ds-color-button-secondary-outline-outline-pressed: var(--ds-color-button-secondary-outline-outline-pressed);
58
+ $ds-color-button-secondary-outline-bg-disabled: var(--ds-color-button-secondary-outline-bg-disabled);
59
+ $ds-color-button-game-on-bg-default: var(--ds-color-button-game-on-bg-default);
60
+ $ds-color-button-game-on-bg-hover: var(--ds-color-button-game-on-bg-hover);
61
+ $ds-color-button-game-on-bg-pressed: var(--ds-color-button-game-on-bg-pressed);
62
+ $ds-color-button-game-on-text-default: var(--ds-color-button-game-on-text-default);
63
+ $ds-color-button-game-on-outline-default: var(--ds-color-button-game-on-outline-default);
64
+ $ds-color-button-game-off-bg-default: var(--ds-color-button-game-off-bg-default);
65
+ $ds-color-button-game-off-bg-hover: var(--ds-color-button-game-off-bg-hover);
66
+ $ds-color-button-game-off-bg-pressed: var(--ds-color-button-game-off-bg-pressed);
67
+ $ds-color-button-game-off-text-default: var(--ds-color-button-game-off-text-default);
68
+ $ds-color-button-game-off-outline-default: var(--ds-color-button-game-off-outline-default);
69
+ $ds-color-button-game-hint-bg-default: var(--ds-color-button-game-hint-bg-default);
70
+ $ds-color-button-game-hint-outline-default: var(--ds-color-button-game-hint-outline-default);
71
+ $ds-color-button-game-hint-text-default: var(--ds-color-button-game-hint-text-default);
51
72
  $ds-color-brand-100: var(--ds-color-brand-100);
52
73
  $ds-color-brand-200: var(--ds-color-brand-200);
53
74
  $ds-color-brand-300: var(--ds-color-brand-300);
package/foundations/variables/colorsDnDark.scss CHANGED
@@ -1,9 +1,9 @@
1
- $ds-hex-dark-surface-foreground: #0d0d0d;
2
1
  $ds-hex-dark-surface-primary: #171717;
3
2
  $ds-hex-dark-surface-primary-raised-soft: #242424;
4
3
  $ds-hex-dark-surface-primary-raised-strong: #333333;
5
4
  $ds-hex-dark-surface-primary-elevated: #333333;
6
5
  $ds-hex-dark-surface-primaryinvert: #ffffff;
6
+ $ds-hex-dark-surface-foreground: #0d0d0d;
7
7
  $ds-hex-dark-surface-primaryinvert-raised-soft: rgba(5, 5, 5, 0.05);
8
8
  $ds-hex-dark-surface-primaryinvert-elevated: #ffffff;
9
9
  $ds-hex-dark-surface-brand: #da000d;
@@ -11,8 +11,8 @@ $ds-hex-dark-surface-success: #3a8352;
11
11
  $ds-hex-dark-surface-culture: #227ac3;
12
12
  $ds-hex-dark-surface-breaking: #320b0e;
13
13
  $ds-hex-dark-surface-overlay: rgba(5, 5, 5, 0.5);
14
- $ds-hex-dark-surface-ad-yellow: #ffeac6;
15
- $ds-hex-dark-surface-native-article: #2b2b2b;
14
+ $ds-hex-dark-surface-native: #ffe380;
15
+ $ds-hex-dark-surface-native-subtle: #1f1e19;
16
16
  $ds-hex-dark-surface-quiz: #ea3e3f;
17
17
  $ds-hex-dark-surface-media: #000000;
18
18
  $ds-hex-dark-border-primary: rgba(255, 255, 255, 0.1);
@@ -40,14 +40,35 @@ $ds-hex-dark-gradients-primary-start: #171717;
40
40
  $ds-hex-dark-gradients-primary-end: rgba(23, 23, 23, 0);
41
41
  $ds-hex-dark-gradients-overlay-start: rgba(36, 36, 36, 0.75);
42
42
  $ds-hex-dark-gradients-overlay-end: rgba(36, 36, 36, 0);
43
- $ds-hex-dark-button-primary-default: #da000d;
44
- $ds-hex-dark-button-primary-hover: #b8000b;
45
- $ds-hex-dark-button-primary-pressed: #b8000b;
46
- $ds-hex-dark-button-primary-disabled: #b8000b;
47
- $ds-hex-dark-button-secondary-filled-default: #da000d;
48
- $ds-hex-dark-button-secondary-filled-hover: #b8000b;
49
- $ds-hex-dark-button-secondary-filled-pressed: #b8000b;
50
- $ds-hex-dark-button-secondary-filled-disabled: #b8000b;
43
+ $ds-hex-dark-button-primary-bg-default: #da000d;
44
+ $ds-hex-dark-button-primary-bg-hover: #b8000b;
45
+ $ds-hex-dark-button-primary-bg-pressed: #b8000b;
46
+ $ds-hex-dark-button-primary-bg-disabled: #242424;
47
+ $ds-hex-dark-button-primary-black-bg-default: #ffffff;
48
+ $ds-hex-dark-button-primary-black-bg-hover: #f2f2f2;
49
+ $ds-hex-dark-button-primary-black-bg-pressed: #f2f2f2;
50
+ $ds-hex-dark-button-primary-black-bg-disabled: #242424;
51
+ $ds-hex-dark-button-secondary-filled-bg-default: #333333;
52
+ $ds-hex-dark-button-secondary-filled-bg-hover: #cdcdcd;
53
+ $ds-hex-dark-button-secondary-filled-bg-pressed: #cdcdcd;
54
+ $ds-hex-dark-button-secondary-filled-bg-disabled: #b8000b;
55
+ $ds-hex-dark-button-secondary-outline-outline-default: rgba(255, 255, 255, 0.1);
56
+ $ds-hex-dark-button-secondary-outline-outline-hover: rgba(255, 255, 255, 0.25);
57
+ $ds-hex-dark-button-secondary-outline-outline-pressed: rgba(255, 255, 255, 0.25);
58
+ $ds-hex-dark-button-secondary-outline-bg-disabled: #242424;
59
+ $ds-hex-dark-button-game-on-bg-default: #227ac3;
60
+ $ds-hex-dark-button-game-on-bg-hover: #227ac3;
61
+ $ds-hex-dark-button-game-on-bg-pressed: #227ac3;
62
+ $ds-hex-dark-button-game-on-text-default: #ffffff;
63
+ $ds-hex-dark-button-game-on-outline-default: #227ac3;
64
+ $ds-hex-dark-button-game-off-bg-default: #372c25;
65
+ $ds-hex-dark-button-game-off-bg-hover: #372c25;
66
+ $ds-hex-dark-button-game-off-bg-pressed: #372c25;
67
+ $ds-hex-dark-button-game-off-text-default: #ffffff;
68
+ $ds-hex-dark-button-game-off-outline-default: rgba(5, 5, 5, 0);
69
+ $ds-hex-dark-button-game-hint-bg-default: #1f272e;
70
+ $ds-hex-dark-button-game-hint-outline-default: #227ac3;
71
+ $ds-hex-dark-button-game-hint-text-default: #ffffff;
51
72
  $ds-hex-dark-brand-100: #ffd0d3;
52
73
  $ds-hex-dark-brand-200: #ffa9ae;
53
74
  $ds-hex-dark-brand-300: #ff757d;
package/foundations/variables/colorsDnLight.scss CHANGED
@@ -1,9 +1,9 @@
1
- $ds-hex-surface-foreground: #f2f2f2;
2
1
  $ds-hex-surface-primary: #ffffff;
3
2
  $ds-hex-surface-primary-raised-soft: #f2f2f2;
4
3
  $ds-hex-surface-primary-raised-strong: #e5e5e5;
5
4
  $ds-hex-surface-primary-elevated: #ffffff;
6
5
  $ds-hex-surface-primaryinvert: #0d0d0d;
6
+ $ds-hex-surface-foreground: #f2f2f2;
7
7
  $ds-hex-surface-primaryinvert-raised-soft: #ffffff0d;
8
8
  $ds-hex-surface-primaryinvert-elevated: #242424;
9
9
  $ds-hex-surface-brand: #da000d;
@@ -11,8 +11,8 @@ $ds-hex-surface-success: #3a8352;
11
11
  $ds-hex-surface-culture: #227ac3;
12
12
  $ds-hex-surface-breaking: #320b0e;
13
13
  $ds-hex-surface-overlay: #05050580;
14
- $ds-hex-surface-ad-yellow: #ffeac6;
15
- $ds-hex-surface-native-article: #ededed;
14
+ $ds-hex-surface-native: #ffe380;
15
+ $ds-hex-surface-native-subtle: #fff9e5;
16
16
  $ds-hex-surface-quiz: #ea3e3f;
17
17
  $ds-hex-surface-media: #000000;
18
18
  $ds-hex-border-primary: #0505051a;
@@ -40,14 +40,35 @@ $ds-hex-gradients-primary-start: #ffffff;
40
40
  $ds-hex-gradients-primary-end: #ffffff00;
41
41
  $ds-hex-gradients-overlay-start: #242424bf;
42
42
  $ds-hex-gradients-overlay-end: #24242400;
43
- $ds-hex-button-primary-default: #da000d;
44
- $ds-hex-button-primary-hover: #96171f;
45
- $ds-hex-button-primary-pressed: #96171f;
46
- $ds-hex-button-primary-disabled: #f2f2f2;
47
- $ds-hex-button-secondary-filled-default: #da000d;
48
- $ds-hex-button-secondary-filled-hover: #96171f;
49
- $ds-hex-button-secondary-filled-pressed: #96171f;
50
- $ds-hex-button-secondary-filled-disabled: #f2f2f2;
43
+ $ds-hex-button-primary-bg-default: #da000d;
44
+ $ds-hex-button-primary-bg-hover: #96171f;
45
+ $ds-hex-button-primary-bg-pressed: #96171f;
46
+ $ds-hex-button-primary-bg-disabled: #f2f2f2;
47
+ $ds-hex-button-primary-black-bg-default: #0d0d0d;
48
+ $ds-hex-button-primary-black-bg-hover: #171717;
49
+ $ds-hex-button-primary-black-bg-pressed: #171717;
50
+ $ds-hex-button-primary-black-bg-disabled: #f2f2f2;
51
+ $ds-hex-button-secondary-filled-bg-default: #e5e5e5;
52
+ $ds-hex-button-secondary-filled-bg-hover: #cdcdcd;
53
+ $ds-hex-button-secondary-filled-bg-pressed: #cdcdcd;
54
+ $ds-hex-button-secondary-filled-bg-disabled: #f2f2f2;
55
+ $ds-hex-button-secondary-outline-outline-default: #0505051a;
56
+ $ds-hex-button-secondary-outline-outline-hover: #05050540;
57
+ $ds-hex-button-secondary-outline-outline-pressed: #05050540;
58
+ $ds-hex-button-secondary-outline-bg-disabled: #f2f2f2;
59
+ $ds-hex-button-game-on-bg-default: #227ac3;
60
+ $ds-hex-button-game-on-bg-hover: #227ac3;
61
+ $ds-hex-button-game-on-bg-pressed: #227ac3;
62
+ $ds-hex-button-game-on-text-default: #ffffff;
63
+ $ds-hex-button-game-on-outline-default: #227ac3;
64
+ $ds-hex-button-game-off-bg-default: #f9f1eb;
65
+ $ds-hex-button-game-off-bg-hover: #f9f1eb;
66
+ $ds-hex-button-game-off-bg-pressed: #f9f1eb;
67
+ $ds-hex-button-game-off-text-default: #0d0d0d;
68
+ $ds-hex-button-game-off-outline-default: #0505051a;
69
+ $ds-hex-button-game-hint-bg-default: #f4f7fa;
70
+ $ds-hex-button-game-hint-outline-default: #227ac3;
71
+ $ds-hex-button-game-hint-text-default: #ffffff;
51
72
  $ds-hex-brand-100: #ffd0d3;
52
73
  $ds-hex-brand-200: #ffa9ae;
53
74
  $ds-hex-brand-300: #ff757d;
package/foundations/variables/shadowsDnDark.scss CHANGED
@@ -1,15 +1,15 @@
1
1
  $shadowsDnDark: (
2
- elevation-sm: (
2
+ elevation-xs: (
3
3
  x: 0,
4
- y: 2,
5
- blur: 4,
4
+ y: 1,
5
+ blur: 2,
6
6
  spread: 1,
7
7
  color: rgba(13, 13, 13, 0.25)
8
8
  ),
9
- elevation-xs: (
9
+ elevation-sm: (
10
10
  x: 0,
11
- y: 1,
12
- blur: 2,
11
+ y: 2,
12
+ blur: 4,
13
13
  spread: 1,
14
14
  color: rgba(13, 13, 13, 0.25)
15
15
  ),
package/foundations/variables/shadowsDnLight.scss CHANGED
@@ -1,15 +1,15 @@
1
1
  $shadowsDnLight: (
2
- elevation-sm: (
2
+ elevation-xs: (
3
3
  x: 0,
4
- y: 2,
5
- blur: 4,
4
+ y: 1,
5
+ blur: 2,
6
6
  spread: 1,
7
7
  color: rgba(13, 13, 13, 0.15)
8
8
  ),
9
- elevation-xs: (
9
+ elevation-sm: (
10
10
  x: 0,
11
- y: 1,
12
- blur: 2,
11
+ y: 2,
12
+ blur: 4,
13
13
  spread: 1,
14
14
  color: rgba(13, 13, 13, 0.15)
15
15
  ),
package/foundations/variables/shadowsList.scss CHANGED
@@ -1,4 +1,4 @@
1
- $ds-shadow-elevation-sm: --ds-shadow-elevation-sm;
2
1
  $ds-shadow-elevation-xs: --ds-shadow-elevation-xs;
2
+ $ds-shadow-elevation-sm: --ds-shadow-elevation-sm;
3
3
  $ds-shadow-elevation-lg: --ds-shadow-elevation-lg;
4
4
  $ds-shadow-elevation-md: --ds-shadow-elevation-md;
package/foundations/variables/typographyList.scss CHANGED
@@ -2,6 +2,7 @@ $ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
2
2
  $ds-typography-detail-article-direkt: 'detail-article-direkt';
3
3
  $ds-typography-detail-article-longread: 'detail-article-longread';
4
4
  $ds-typography-detail-article-longread-premium: 'detail-article-longread-premium';
5
+ $ds-typography-detail-article-native: 'detail-article-native';
5
6
  $ds-typography-detail-article-opinion: 'detail-article-opinion';
6
7
  $ds-typography-detail-article-quote: 'detail-article-quote';
7
8
  $ds-typography-detail-article-standard: 'detail-article-standard';
@@ -16,18 +17,22 @@ $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
16
17
  $ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
17
18
  $ds-typography-detail-teaser-large: 'detail-teaser-large';
18
19
  $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
20
+ $ds-typography-detail-teaser-large-native: 'detail-teaser-large-native';
19
21
  $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
20
22
  $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
23
+ $ds-typography-detail-teaser-list: 'detail-teaser-list';
21
24
  $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
22
25
  $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
23
26
  $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
24
27
  $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
28
+ $ds-typography-detail-teaser-standard-native: 'detail-teaser-standard-native';
25
29
  $ds-typography-detail-teaser-standard-opinion: 'detail-teaser-standard-opinion';
26
30
  $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
27
31
  $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
28
32
  $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
29
33
  $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
30
34
  $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
35
+ $ds-typography-detail-teaser-videostories: 'detail-teaser-videostories';
31
36
  $ds-typography-expressive-body-lg: 'expressive-body-lg';
32
37
  $ds-typography-expressive-body-md: 'expressive-body-md';
33
38
  $ds-typography-expressive-body-sm: 'expressive-body-sm';
package/foundations/variables/typographyScreenExtraLarge.scss CHANGED
@@ -28,6 +28,13 @@ $typographyScreenExtraLarge: (
28
28
  fontSize: 56,
29
29
  fontWeight: Bold
30
30
  ),
31
+ detail-article-native: (
32
+ lineHeight: 1.1,
33
+ letterSpacing: 0,
34
+ fontFamily: "DN Sans",
35
+ fontSize: 48,
36
+ fontWeight: Bold
37
+ ),
31
38
  detail-article-opinion: (
32
39
  lineHeight: 1.1,
33
40
  letterSpacing: 0,
@@ -127,6 +134,13 @@ $typographyScreenExtraLarge: (
127
134
  fontSize: 36,
128
135
  fontWeight: Bold
129
136
  ),
137
+ detail-teaser-large-native: (
138
+ lineHeight: 1.1,
139
+ letterSpacing: 0,
140
+ fontFamily: "DN Sans",
141
+ fontSize: 48,
142
+ fontWeight: Bold
143
+ ),
130
144
  detail-teaser-large-opinion: (
131
145
  lineHeight: 1.1,
132
146
  letterSpacing: 0,
@@ -142,6 +156,13 @@ $typographyScreenExtraLarge: (
142
156
  fontSize: 22,
143
157
  fontWeight: Bold
144
158
  ),
159
+ detail-teaser-list: (
160
+ lineHeight: 1.2,
161
+ letterSpacing: 0,
162
+ fontFamily: "DN Serif Text",
163
+ fontSize: 17,
164
+ fontWeight: SemiBold
165
+ ),
145
166
  detail-teaser-longlife: (
146
167
  lineHeight: 1.1,
147
168
  letterSpacing: 0,
@@ -171,6 +192,13 @@ $typographyScreenExtraLarge: (
171
192
  fontStyle: italic,
172
193
  fontWeight: Regular
173
194
  ),
195
+ detail-teaser-standard-native: (
196
+ lineHeight: 1.1,
197
+ letterSpacing: 0,
198
+ fontFamily: "DN Sans",
199
+ fontSize: 36,
200
+ fontWeight: Bold
201
+ ),
174
202
  detail-teaser-standard-opinion: (
175
203
  lineHeight: 1.1,
176
204
  letterSpacing: 0,
@@ -215,6 +243,13 @@ $typographyScreenExtraLarge: (
215
243
  fontSize: 22,
216
244
  fontWeight: Bold
217
245
  ),
246
+ detail-teaser-videostories: (
247
+ lineHeight: 1.1,
248
+ letterSpacing: 0,
249
+ fontFamily: "DN Serif Display",
250
+ fontSize: 36,
251
+ fontWeight: SemiBold
252
+ ),
218
253
  expressive-body-lg: (
219
254
  lineHeight: 1.5,
220
255
  letterSpacing: 0,
package/foundations/variables/typographyScreenLarge.scss CHANGED
@@ -28,6 +28,13 @@ $typographyScreenLarge: (
28
28
  fontSize: 48,
29
29
  fontWeight: Bold
30
30
  ),
31
+ detail-article-native: (
32
+ lineHeight: 1.1,
33
+ letterSpacing: 0,
34
+ fontFamily: "DN Sans",
35
+ fontSize: 40,
36
+ fontWeight: Bold
37
+ ),
31
38
  detail-article-opinion: (
32
39
  lineHeight: 1.1,
33
40
  letterSpacing: 0,
@@ -127,6 +134,13 @@ $typographyScreenLarge: (
127
134
  fontSize: 32,
128
135
  fontWeight: Bold
129
136
  ),
137
+ detail-teaser-large-native: (
138
+ lineHeight: 1.1,
139
+ letterSpacing: 0,
140
+ fontFamily: "DN Sans",
141
+ fontSize: 40,
142
+ fontWeight: Bold
143
+ ),
130
144
  detail-teaser-large-opinion: (
131
145
  lineHeight: 1.1,
132
146
  letterSpacing: 0,
@@ -142,6 +156,13 @@ $typographyScreenLarge: (
142
156
  fontSize: 22,
143
157
  fontWeight: Bold
144
158
  ),
159
+ detail-teaser-list: (
160
+ lineHeight: 1.2,
161
+ letterSpacing: 0,
162
+ fontFamily: "DN Serif Text",
163
+ fontSize: 17,
164
+ fontWeight: SemiBold
165
+ ),
145
166
  detail-teaser-longlife: (
146
167
  lineHeight: 1.1,
147
168
  letterSpacing: 0,
@@ -171,6 +192,13 @@ $typographyScreenLarge: (
171
192
  fontStyle: italic,
172
193
  fontWeight: Regular
173
194
  ),
195
+ detail-teaser-standard-native: (
196
+ lineHeight: 1.1,
197
+ letterSpacing: 0,
198
+ fontFamily: "DN Sans",
199
+ fontSize: 28,
200
+ fontWeight: Bold
201
+ ),
174
202
  detail-teaser-standard-opinion: (
175
203
  lineHeight: 1.1,
176
204
  letterSpacing: 0,
@@ -215,6 +243,13 @@ $typographyScreenLarge: (
215
243
  fontSize: 22,
216
244
  fontWeight: Bold
217
245
  ),
246
+ detail-teaser-videostories: (
247
+ lineHeight: 1.1,
248
+ letterSpacing: 0,
249
+ fontFamily: "DN Serif Display",
250
+ fontSize: 28,
251
+ fontWeight: SemiBold
252
+ ),
218
253
  expressive-body-lg: (
219
254
  lineHeight: 1.5,
220
255
  letterSpacing: 0,
package/foundations/variables/typographyScreenSmall.scss CHANGED
@@ -28,6 +28,13 @@ $typographyScreenSmall: (
28
28
  fontSize: 32,
29
29
  fontWeight: Bold
30
30
  ),
31
+ detail-article-native: (
32
+ lineHeight: 1.1,
33
+ letterSpacing: 0,
34
+ fontFamily: "DN Sans",
35
+ fontSize: 26,
36
+ fontWeight: Bold
37
+ ),
31
38
  detail-article-opinion: (
32
39
  lineHeight: 1.1,
33
40
  letterSpacing: 0,
@@ -127,6 +134,13 @@ $typographyScreenSmall: (
127
134
  fontSize: 20,
128
135
  fontWeight: Bold
129
136
  ),
137
+ detail-teaser-large-native: (
138
+ lineHeight: 1.1,
139
+ letterSpacing: 0,
140
+ fontFamily: "DN Sans",
141
+ fontSize: 26,
142
+ fontWeight: Bold
143
+ ),
130
144
  detail-teaser-large-opinion: (
131
145
  lineHeight: 1.1,
132
146
  letterSpacing: 0,
@@ -142,6 +156,13 @@ $typographyScreenSmall: (
142
156
  fontSize: 22,
143
157
  fontWeight: Bold
144
158
  ),
159
+ detail-teaser-list: (
160
+ lineHeight: 1.2,
161
+ letterSpacing: 0,
162
+ fontFamily: "DN Serif Text",
163
+ fontSize: 17,
164
+ fontWeight: SemiBold
165
+ ),
145
166
  detail-teaser-longlife: (
146
167
  lineHeight: 1.2,
147
168
  letterSpacing: 0,
@@ -171,6 +192,13 @@ $typographyScreenSmall: (
171
192
  fontStyle: italic,
172
193
  fontWeight: Medium
173
194
  ),
195
+ detail-teaser-standard-native: (
196
+ lineHeight: 1.2,
197
+ letterSpacing: 0,
198
+ fontFamily: "DN Sans",
199
+ fontSize: 20,
200
+ fontWeight: Bold
201
+ ),
174
202
  detail-teaser-standard-opinion: (
175
203
  lineHeight: 1.2,
176
204
  letterSpacing: 0,
@@ -215,6 +243,13 @@ $typographyScreenSmall: (
215
243
  fontSize: 18,
216
244
  fontWeight: Bold
217
245
  ),
246
+ detail-teaser-videostories: (
247
+ lineHeight: 1.2,
248
+ letterSpacing: 0,
249
+ fontFamily: "DN Serif Headline",
250
+ fontSize: 20,
251
+ fontWeight: SemiBold
252
+ ),
218
253
  expressive-body-lg: (
219
254
  lineHeight: 1.5,
220
255
  letterSpacing: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "34.2.1",
3
+ "version": "35.0.0",
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/preact/components/byline/byline.js CHANGED
@@ -346,6 +346,8 @@ var Modal = ({
346
346
  componentClassName,
347
347
  modalType === "sheet" && `${componentClassName}--sheet`,
348
348
  forcePx && "ds-force-px",
349
+ "ds-modal--hidden",
350
+ // Add default hidden class to prevent flashing modal in older browsers where dialog isn't supported
349
351
  classNames
350
352
  ]);
351
353
  const hasButtons = primaryButton || secondaryButton;