@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/variables/colors-dark-mode.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "surface": {
3
- "foreground": "#0d0d0d",
4
3
  "primary": "#171717",
5
4
  "primary-raised-soft": "#242424",
6
5
  "primary-raised-strong": "#333333",
7
6
  "primary-elevated": "#333333",
8
7
  "primaryinvert": "#ffffff",
8
+ "foreground": "#0d0d0d",
9
9
  "primaryinvert-raised-soft": "rgba(5, 5, 5, 0.05)",
10
10
  "primaryinvert-elevated": "#ffffff",
11
11
  "brand": "#da000d",
@@ -13,8 +13,8 @@
13
13
  "culture": "#227ac3",
14
14
  "breaking": "#320b0e",
15
15
  "overlay": "rgba(5, 5, 5, 0.5)",
16
- "ad-yellow": "#ffeac6",
17
- "native-article": "#2b2b2b",
16
+ "native": "#ffe380",
17
+ "native-subtle": "#1f1e19",
18
18
  "quiz": "#ea3e3f",
19
19
  "media": "#000000"
20
20
  },
@@ -50,14 +50,35 @@
50
50
  "overlay-end": "rgba(36, 36, 36, 0)"
51
51
  },
52
52
  "button": {
53
- "primary-default": "#da000d",
54
- "primary-hover": "#b8000b",
55
- "primary-pressed": "#b8000b",
56
- "primary-disabled": "#b8000b",
57
- "secondary-filled-default": "#da000d",
58
- "secondary-filled-hover": "#b8000b",
59
- "secondary-filled-pressed": "#b8000b",
60
- "secondary-filled-disabled": "#b8000b"
53
+ "primary-bg-default": "#da000d",
54
+ "primary-bg-hover": "#b8000b",
55
+ "primary-bg-pressed": "#b8000b",
56
+ "primary-bg-disabled": "#242424",
57
+ "primary-black-bg-default": "#ffffff",
58
+ "primary-black-bg-hover": "#f2f2f2",
59
+ "primary-black-bg-pressed": "#f2f2f2",
60
+ "primary-black-bg-disabled": "#242424",
61
+ "secondary-filled-bg-default": "#333333",
62
+ "secondary-filled-bg-hover": "#cdcdcd",
63
+ "secondary-filled-bg-pressed": "#cdcdcd",
64
+ "secondary-filled-bg-disabled": "#b8000b",
65
+ "secondary-outline-outline-default": "rgba(255, 255, 255, 0.1)",
66
+ "secondary-outline-outline-hover": "rgba(255, 255, 255, 0.25)",
67
+ "secondary-outline-outline-pressed": "rgba(255, 255, 255, 0.25)",
68
+ "secondary-outline-bg-disabled": "#242424",
69
+ "game-on-bg-default": "#227ac3",
70
+ "game-on-bg-hover": "#227ac3",
71
+ "game-on-bg-pressed": "#227ac3",
72
+ "game-on-text-default": "#ffffff",
73
+ "game-on-outline-default": "#227ac3",
74
+ "game-off-bg-default": "#372c25",
75
+ "game-off-bg-hover": "#372c25",
76
+ "game-off-bg-pressed": "#372c25",
77
+ "game-off-text-default": "#ffffff",
78
+ "game-off-outline-default": "rgba(5, 5, 5, 0)",
79
+ "game-hint-bg-default": "#1f272e",
80
+ "game-hint-outline-default": "#227ac3",
81
+ "game-hint-text-default": "#ffffff"
61
82
  },
62
83
  "brand": {
63
84
  "100": "#ffd0d3",
package/variables/colors-light-mode.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "surface": {
3
- "foreground": "#f2f2f2",
4
3
  "primary": "#ffffff",
5
4
  "primary-raised-soft": "#f2f2f2",
6
5
  "primary-raised-strong": "#e5e5e5",
7
6
  "primary-elevated": "#ffffff",
8
7
  "primaryinvert": "#0d0d0d",
8
+ "foreground": "#f2f2f2",
9
9
  "primaryinvert-raised-soft": "#ffffff0d",
10
10
  "primaryinvert-elevated": "#242424",
11
11
  "brand": "#da000d",
@@ -13,8 +13,8 @@
13
13
  "culture": "#227ac3",
14
14
  "breaking": "#320b0e",
15
15
  "overlay": "#05050580",
16
- "ad-yellow": "#ffeac6",
17
- "native-article": "#ededed",
16
+ "native": "#ffe380",
17
+ "native-subtle": "#fff9e5",
18
18
  "quiz": "#ea3e3f",
19
19
  "media": "#000000"
20
20
  },
@@ -50,14 +50,35 @@
50
50
  "overlay-end": "#24242400"
51
51
  },
52
52
  "button": {
53
- "primary-default": "#da000d",
54
- "primary-hover": "#96171f",
55
- "primary-pressed": "#96171f",
56
- "primary-disabled": "#f2f2f2",
57
- "secondary-filled-default": "#da000d",
58
- "secondary-filled-hover": "#96171f",
59
- "secondary-filled-pressed": "#96171f",
60
- "secondary-filled-disabled": "#f2f2f2"
53
+ "primary-bg-default": "#da000d",
54
+ "primary-bg-hover": "#96171f",
55
+ "primary-bg-pressed": "#96171f",
56
+ "primary-bg-disabled": "#f2f2f2",
57
+ "primary-black-bg-default": "#0d0d0d",
58
+ "primary-black-bg-hover": "#171717",
59
+ "primary-black-bg-pressed": "#171717",
60
+ "primary-black-bg-disabled": "#f2f2f2",
61
+ "secondary-filled-bg-default": "#e5e5e5",
62
+ "secondary-filled-bg-hover": "#cdcdcd",
63
+ "secondary-filled-bg-pressed": "#cdcdcd",
64
+ "secondary-filled-bg-disabled": "#f2f2f2",
65
+ "secondary-outline-outline-default": "#0505051a",
66
+ "secondary-outline-outline-hover": "#05050540",
67
+ "secondary-outline-outline-pressed": "#05050540",
68
+ "secondary-outline-bg-disabled": "#f2f2f2",
69
+ "game-on-bg-default": "#227ac3",
70
+ "game-on-bg-hover": "#227ac3",
71
+ "game-on-bg-pressed": "#227ac3",
72
+ "game-on-text-default": "#ffffff",
73
+ "game-on-outline-default": "#227ac3",
74
+ "game-off-bg-default": "#f9f1eb",
75
+ "game-off-bg-hover": "#f9f1eb",
76
+ "game-off-bg-pressed": "#f9f1eb",
77
+ "game-off-text-default": "#0d0d0d",
78
+ "game-off-outline-default": "#0505051a",
79
+ "game-hint-bg-default": "#f4f7fa",
80
+ "game-hint-outline-default": "#227ac3",
81
+ "game-hint-text-default": "#ffffff"
61
82
  },
62
83
  "brand": {
63
84
  "100": "#ffd0d3",
package/variables/shadows-list.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
- "elevation-sm": "--ds-shadow-elevation-sm",
3
2
  "elevation-xs": "--ds-shadow-elevation-xs",
3
+ "elevation-sm": "--ds-shadow-elevation-sm",
4
4
  "elevation-lg": "--ds-shadow-elevation-lg",
5
5
  "elevation-md": "--ds-shadow-elevation-md"
6
6
  }
package/variables/typography-list.json CHANGED
@@ -3,6 +3,7 @@
3
3
  "detail-article-direkt": "'detail-article-direkt'",
4
4
  "detail-article-longread": "'detail-article-longread'",
5
5
  "detail-article-longread-premium": "'detail-article-longread-premium'",
6
+ "detail-article-native": "'detail-article-native'",
6
7
  "detail-article-opinion": "'detail-article-opinion'",
7
8
  "detail-article-quote": "'detail-article-quote'",
8
9
  "detail-article-standard": "'detail-article-standard'",
@@ -17,18 +18,22 @@
17
18
  "detail-teaser-centrerad": "'detail-teaser-centrerad'",
18
19
  "detail-teaser-large": "'detail-teaser-large'",
19
20
  "detail-teaser-large-compact": "'detail-teaser-large-compact'",
21
+ "detail-teaser-large-native": "'detail-teaser-large-native'",
20
22
  "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
21
23
  "detail-teaser-large-rightcol": "'detail-teaser-large-rightcol'",
24
+ "detail-teaser-list": "'detail-teaser-list'",
22
25
  "detail-teaser-longlife": "'detail-teaser-longlife'",
23
26
  "detail-teaser-standard": "'detail-teaser-standard'",
24
27
  "detail-teaser-standard-compact": "'detail-teaser-standard-compact'",
25
28
  "detail-teaser-standard-compact-opinion": "'detail-teaser-standard-compact-opinion'",
29
+ "detail-teaser-standard-native": "'detail-teaser-standard-native'",
26
30
  "detail-teaser-standard-opinion": "'detail-teaser-standard-opinion'",
27
31
  "detail-teaser-storrubrik": "'detail-teaser-storrubrik'",
28
32
  "detail-teaser-storrubrik-opinion": "'detail-teaser-storrubrik-opinion'",
29
33
  "detail-teaser-text-i-bild": "'detail-teaser-text-i-bild'",
30
34
  "detail-teaser-tipsa": "'detail-teaser-tipsa'",
31
35
  "detail-teaser-twin": "'detail-teaser-twin'",
36
+ "detail-teaser-videostories": "'detail-teaser-videostories'",
32
37
  "expressive-body-lg": "'expressive-body-lg'",
33
38
  "expressive-body-md": "'expressive-body-md'",
34
39
  "expressive-body-sm": "'expressive-body-sm'",