@bonniernews/dn-design-system-web 34.2.2 → 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 (22) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/components/disclaimer/disclaimer.scss +1 -1
  3. package/components/teaser-native/teaser-native.scss +2 -2
  4. package/foundations/variables/colorsCssVariables.scss +32 -11
  5. package/foundations/variables/colorsDnDark.scss +32 -11
  6. package/foundations/variables/colorsDnLight.scss +32 -11
  7. package/foundations/variables/shadowsDnDark.scss +6 -6
  8. package/foundations/variables/shadowsDnLight.scss +6 -6
  9. package/foundations/variables/shadowsList.scss +1 -1
  10. package/foundations/variables/typographyList.scss +5 -0
  11. package/foundations/variables/typographyScreenExtraLarge.scss +35 -0
  12. package/foundations/variables/typographyScreenLarge.scss +35 -0
  13. package/foundations/variables/typographyScreenSmall.scss +35 -0
  14. package/package.json +1 -1
  15. package/preact/components/icon-with-wrapper/icon-with-wrapper.js +32 -11
  16. package/preact/components/icon-with-wrapper/icon-with-wrapper.js.map +2 -2
  17. package/types-lib/ds-color.d.ts +32 -11
  18. package/variables/colors-css-variables.json +32 -11
  19. package/variables/colors-dark-mode.json +32 -11
  20. package/variables/colors-light-mode.json +32 -11
  21. package/variables/shadows-list.json +1 -1
  22. package/variables/typography-list.json +5 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,23 @@ 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
+
7
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)
8
25
 
9
26
 
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/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.2",
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/icon-with-wrapper/icon-with-wrapper.js CHANGED
@@ -5,12 +5,12 @@ var formatClassString = (classesArray) => {
5
5
 
6
6
  // ../src/variables/colors-css-variables.json
7
7
  var colors_css_variables_default = {
8
- "surface-foreground": "var(--ds-color-surface-foreground)",
9
8
  "surface-primary": "var(--ds-color-surface-primary)",
10
9
  "surface-primary-raised-soft": "var(--ds-color-surface-primary-raised-soft)",
11
10
  "surface-primary-raised-strong": "var(--ds-color-surface-primary-raised-strong)",
12
11
  "surface-primary-elevated": "var(--ds-color-surface-primary-elevated)",
13
12
  "surface-primaryinvert": "var(--ds-color-surface-primaryinvert)",
13
+ "surface-foreground": "var(--ds-color-surface-foreground)",
14
14
  "surface-primaryinvert-raised-soft": "var(--ds-color-surface-primaryinvert-raised-soft)",
15
15
  "surface-primaryinvert-elevated": "var(--ds-color-surface-primaryinvert-elevated)",
16
16
  "surface-brand": "var(--ds-color-surface-brand)",
@@ -18,8 +18,8 @@ var colors_css_variables_default = {
18
18
  "surface-culture": "var(--ds-color-surface-culture)",
19
19
  "surface-breaking": "var(--ds-color-surface-breaking)",
20
20
  "surface-overlay": "var(--ds-color-surface-overlay)",
21
- "surface-ad-yellow": "var(--ds-color-surface-ad-yellow)",
22
- "surface-native-article": "var(--ds-color-surface-native-article)",
21
+ "surface-native": "var(--ds-color-surface-native)",
22
+ "surface-native-subtle": "var(--ds-color-surface-native-subtle)",
23
23
  "surface-quiz": "var(--ds-color-surface-quiz)",
24
24
  "surface-media": "var(--ds-color-surface-media)",
25
25
  "border-primary": "var(--ds-color-border-primary)",
@@ -47,14 +47,35 @@ var colors_css_variables_default = {
47
47
  "gradients-primary-end": "var(--ds-color-gradients-primary-end)",
48
48
  "gradients-overlay-start": "var(--ds-color-gradients-overlay-start)",
49
49
  "gradients-overlay-end": "var(--ds-color-gradients-overlay-end)",
50
- "button-primary-default": "var(--ds-color-button-primary-default)",
51
- "button-primary-hover": "var(--ds-color-button-primary-hover)",
52
- "button-primary-pressed": "var(--ds-color-button-primary-pressed)",
53
- "button-primary-disabled": "var(--ds-color-button-primary-disabled)",
54
- "button-secondary-filled-default": "var(--ds-color-button-secondary-filled-default)",
55
- "button-secondary-filled-hover": "var(--ds-color-button-secondary-filled-hover)",
56
- "button-secondary-filled-pressed": "var(--ds-color-button-secondary-filled-pressed)",
57
- "button-secondary-filled-disabled": "var(--ds-color-button-secondary-filled-disabled)",
50
+ "button-primary-bg-default": "var(--ds-color-button-primary-bg-default)",
51
+ "button-primary-bg-hover": "var(--ds-color-button-primary-bg-hover)",
52
+ "button-primary-bg-pressed": "var(--ds-color-button-primary-bg-pressed)",
53
+ "button-primary-bg-disabled": "var(--ds-color-button-primary-bg-disabled)",
54
+ "button-primary-black-bg-default": "var(--ds-color-button-primary-black-bg-default)",
55
+ "button-primary-black-bg-hover": "var(--ds-color-button-primary-black-bg-hover)",
56
+ "button-primary-black-bg-pressed": "var(--ds-color-button-primary-black-bg-pressed)",
57
+ "button-primary-black-bg-disabled": "var(--ds-color-button-primary-black-bg-disabled)",
58
+ "button-secondary-filled-bg-default": "var(--ds-color-button-secondary-filled-bg-default)",
59
+ "button-secondary-filled-bg-hover": "var(--ds-color-button-secondary-filled-bg-hover)",
60
+ "button-secondary-filled-bg-pressed": "var(--ds-color-button-secondary-filled-bg-pressed)",
61
+ "button-secondary-filled-bg-disabled": "var(--ds-color-button-secondary-filled-bg-disabled)",
62
+ "button-secondary-outline-outline-default": "var(--ds-color-button-secondary-outline-outline-default)",
63
+ "button-secondary-outline-outline-hover": "var(--ds-color-button-secondary-outline-outline-hover)",
64
+ "button-secondary-outline-outline-pressed": "var(--ds-color-button-secondary-outline-outline-pressed)",
65
+ "button-secondary-outline-bg-disabled": "var(--ds-color-button-secondary-outline-bg-disabled)",
66
+ "button-game-on-bg-default": "var(--ds-color-button-game-on-bg-default)",
67
+ "button-game-on-bg-hover": "var(--ds-color-button-game-on-bg-hover)",
68
+ "button-game-on-bg-pressed": "var(--ds-color-button-game-on-bg-pressed)",
69
+ "button-game-on-text-default": "var(--ds-color-button-game-on-text-default)",
70
+ "button-game-on-outline-default": "var(--ds-color-button-game-on-outline-default)",
71
+ "button-game-off-bg-default": "var(--ds-color-button-game-off-bg-default)",
72
+ "button-game-off-bg-hover": "var(--ds-color-button-game-off-bg-hover)",
73
+ "button-game-off-bg-pressed": "var(--ds-color-button-game-off-bg-pressed)",
74
+ "button-game-off-text-default": "var(--ds-color-button-game-off-text-default)",
75
+ "button-game-off-outline-default": "var(--ds-color-button-game-off-outline-default)",
76
+ "button-game-hint-bg-default": "var(--ds-color-button-game-hint-bg-default)",
77
+ "button-game-hint-outline-default": "var(--ds-color-button-game-hint-outline-default)",
78
+ "button-game-hint-text-default": "var(--ds-color-button-game-hint-text-default)",
58
79
  "brand-100": "var(--ds-color-brand-100)",
59
80
  "brand-200": "var(--ds-color-brand-200)",
60
81
  "brand-300": "var(--ds-color-brand-300)",