@bonniernews/dn-design-system-web 22.0.0 → 22.1.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 (44) hide show
  1. package/CHANGELOG.md +66 -3
  2. package/assets/teaser/teaser.scss +7 -1
  3. package/components/group-header/group-header.scss +1 -1
  4. package/components/teaser-centered/README-UXD.md +0 -0
  5. package/components/teaser-centered/README.md +46 -0
  6. package/components/teaser-centered/teaser-centered.njk +47 -0
  7. package/components/teaser-centered/teaser-centered.scss +51 -0
  8. package/components/teaser-image/teaser-image.scss +1 -1
  9. package/components/teaser-large/README.md +0 -1
  10. package/components/teaser-large/teaser-large.njk +6 -4
  11. package/components/teaser-large/teaser-large.scss +5 -11
  12. package/components/teaser-list-vertical/teaser-list-vertical.njk +0 -1
  13. package/components/teaser-native/teaser-native.njk +5 -3
  14. package/components/teaser-native/teaser-native.scss +0 -6
  15. package/components/teaser-onsite/README.md +1 -8
  16. package/components/teaser-onsite/teaser-onsite.njk +5 -1
  17. package/components/teaser-package/teaser-package.scss +7 -6
  18. package/components/teaser-slideshow/teaser-slideshow.scss +1 -1
  19. package/components/teaser-split/teaser-split.njk +6 -2
  20. package/components/teaser-split/teaser-split.scss +3 -1
  21. package/components/teaser-standard/teaser-standard.njk +7 -3
  22. package/components/teaser-standard/teaser-standard.scss +5 -6
  23. package/foundations/helpers/README-links.md +1 -1
  24. package/foundations/helpers/README-spacing.md +1 -1
  25. package/foundations/helpers/colors.scss +1 -6
  26. package/foundations/variables/colorsCssVariables.scss +4 -0
  27. package/foundations/variables/colorsDnDarkTokens.scss +64 -60
  28. package/foundations/variables/colorsDnLightTokens.scss +55 -51
  29. package/foundations/variables/metrics.scss +3 -1
  30. package/foundations/variables/typographyFontWeight.scss +1 -0
  31. package/foundations/variables/typographyTokensList.scss +1 -0
  32. package/foundations/variables/typographyTokensScreenExtraLarge.scss +11 -4
  33. package/foundations/variables/typographyTokensScreenLarge.scss +10 -3
  34. package/foundations/variables/typographyTokensScreenSmall.scss +13 -6
  35. package/package.json +1 -1
  36. package/preact/components/icon-with-wrapper/icon-with-wrapper.js +4 -0
  37. package/preact/components/icon-with-wrapper/icon-with-wrapper.js.map +2 -2
  38. package/preact/components/teaser-onsite/teaser-onsite.js +4 -3
  39. package/preact/components/teaser-onsite/teaser-onsite.js.map +2 -2
  40. package/tokens/colors-css-variables.json +5 -1
  41. package/tokens/colors-dark-mode.json +64 -60
  42. package/tokens/colors-light-mode.json +57 -53
  43. package/tokens/typography-list.json +1 -0
  44. package/types-lib/ds-color.d.ts +6 -1
package/tokens/colors-light-mode.json CHANGED
@@ -3,94 +3,98 @@
3
3
  "primary": "#050505",
4
4
  "primary-02": "#666666",
5
5
  "secondary": "#ffffff",
6
- "critical": "#DA000D",
6
+ "critical": "#da000d",
7
7
  "disabled": "#666666",
8
8
  "on-brand": "#ffffff",
9
9
  "on-business": "#ffffff",
10
10
  "on-critical": "#ffffff",
11
11
  "on-success": "#ffffff",
12
- "brand": "#DA000D",
13
- "body-link": "#4373CE",
14
- "body-link-visited": "#4373CE",
15
- "positive": "#3A8352"
12
+ "brand": "#da000d",
13
+ "body-link": "#4373ce",
14
+ "body-link-visited": "#4373ce",
15
+ "positive": "#3a8352",
16
+ "culture": "#227ac3"
16
17
  },
17
18
  "icon": {
18
19
  "primary": "#050505",
19
20
  "primary-02": "#666666",
20
21
  "secondary": "#ffffff",
21
- "critical": "#DA000D",
22
+ "critical": "#da000d",
22
23
  "disabled": "#666666",
23
24
  "on-brand": "#ffffff",
24
25
  "on-business": "#ffffff",
25
- "brand": "#DA000D",
26
+ "brand": "#da000d",
26
27
  "on-critical": "#ffffff",
27
- "on-success": "#ffffff"
28
+ "on-success": "#ffffff",
29
+ "culture": "#227ac3"
28
30
  },
29
31
  "component": {
30
- "brand": "#DA000D",
31
- "business": "#3A8352",
32
+ "brand": "#da000d",
33
+ "business": "#3a8352",
32
34
  "primary": "#141414",
33
- "primary-overlay": "#08080821",
34
- "primary-overlay-02": "#08080833",
35
+ "primary-overlay": "rgba(8, 8, 8, 0.13)",
36
+ "primary-overlay-02": "rgba(8, 8, 8, 0.2)",
35
37
  "secondary": "#ffffff",
36
- "secondary-overlay": "#ffffff21",
37
- "secondary-overlay-02": "#ffffff33",
38
- "critical": "#EA3E3F",
39
- "critical-overlay": "#A51D24",
38
+ "secondary-overlay": "rgba(255, 255, 255, 0.13)",
39
+ "secondary-overlay-02": "rgba(255, 255, 255, 0.2)",
40
+ "critical": "#ea3e3f",
41
+ "critical-overlay": "#a51d24",
40
42
  "static-white": "#ffffff",
41
- "positive": "#3A8352",
42
- "primary-02": "#CFCFCF"
43
+ "positive": "#3a8352",
44
+ "primary-02": "#cfcfcf"
43
45
  },
44
46
  "surface": {
45
- "below": "#EDEDED",
46
- "native-article": "#EDEDED",
47
+ "below": "#f2f2f2",
48
+ "native-article": "#ededed",
47
49
  "background": "#ffffff",
48
- "raised": "#EDEDED",
50
+ "raised": "#ededed",
49
51
  "elevated": "#ffffff",
50
- "overlay": "#05050580",
51
- "quiz": "#EA3E3F",
52
- "korsord": "#8BB6E8",
53
- "sudoko": "#90D0BD",
54
- "brand": "#DA000D",
55
- "inverted": "#141414"
52
+ "overlay": "rgba(5, 5, 5, 0.5)",
53
+ "quiz": "#ea3e3f",
54
+ "korsord": "#8bb6e8",
55
+ "sudoko": "#90d0bd",
56
+ "brand": "#da000d",
57
+ "inverted": "#141414",
58
+ "breaking": "#300407"
56
59
  },
57
60
  "border": {
58
- "primary": "#08080821",
59
- "primary-02": "#08080866",
61
+ "primary": "rgba(5, 5, 5, 0.13)",
62
+ "primary-02": "rgba(8, 8, 8, 0.4)",
60
63
  "primary-03": "#050505",
61
64
  "secondary": "#ffffff",
62
- "business": "#3A8352",
63
- "critical": "#DA000D",
64
- "focus": "#DA000D",
65
+ "business": "#3a8352",
66
+ "critical": "#da000d",
67
+ "focus": "#da000d",
65
68
  "focus-02": "#141414",
66
- "focus-03": "#DA000D",
67
- "focus-04": "#3A8352",
68
- "brand": "#DA000D"
69
+ "focus-03": "#da000d",
70
+ "focus-04": "#3a8352",
71
+ "brand": "#da000d",
72
+ "culture": "#227ac3"
69
73
  },
70
74
  "background": {
71
75
  "primary": "#ffffff"
72
76
  },
73
77
  "static": {
74
- "red-100": "#FAD4D4",
78
+ "red-100": "#fad4d4",
75
79
  "black": "#141414",
76
- "transparent-black": "#14141499",
80
+ "transparent-black": "rgba(20, 20, 20, 0.6)",
77
81
  "white": "#ffffff",
78
- "transparent-white": "#ffffff80",
79
- "green-100": "#CEE4D6",
80
- "red-300": "#EF7171",
81
- "transparent-white-10": "#ffffff21",
82
- "kultur": "#568CBB",
83
- "economy": "#60BCA1",
84
- "sport": "#F58D2D",
85
- "neutral-200": "#E0E0E0",
86
- "sthlm": "#FF589B",
87
- "ad-yellow": "#FFEAC2",
88
- "neutral-100": "#EDEDED",
89
- "neutral-500": "#9E9E9E",
90
- "red-500": "#DA000D",
91
- "yellow": "#FFE600",
92
- "red-200": "#F6ACAD",
93
- "red-0": "#FCE8E8"
82
+ "transparent-white": "rgba(255, 255, 255, 0.5)",
83
+ "green-100": "#cee4d6",
84
+ "red-300": "#ef7171",
85
+ "transparent-white-10": "rgba(255, 255, 255, 0.13)",
86
+ "kultur": "#568cbb",
87
+ "economy": "#60bca1",
88
+ "sport": "#f58d2d",
89
+ "neutral-200": "#e0e0e0",
90
+ "sthlm": "#ff589b",
91
+ "ad-yellow": "#ffeac2",
92
+ "neutral-100": "#ededed",
93
+ "neutral-500": "#9e9e9e",
94
+ "red-500": "#da000d",
95
+ "yellow": "#ffe600",
96
+ "red-200": "#f6acad",
97
+ "red-0": "#fce8e8"
94
98
  },
95
99
  "gradient": {
96
100
  "content-fade-left": "linear-gradient(90deg, #ffffff00 0%, #ffffff 100%)",
package/tokens/typography-list.json CHANGED
@@ -16,6 +16,7 @@
16
16
  "detailteaser-standard-compact": "'detailteaser-standard-compact'",
17
17
  "detailteaser-standard-compact-opinion": "'detailteaser-standard-compact-opinion'",
18
18
  "detailteaser-large": "'detailteaser-large'",
19
+ "detailteaser-breaking": "'detailteaser-breaking'",
19
20
  "detailteaser-large-opinion": "'detailteaser-large-opinion'",
20
21
  "detailteaser-large-storRubrik": "'detailteaser-large-storRubrik'",
21
22
  "detailteaser-standard": "'detailteaser-standard'",
package/types-lib/ds-color.d.ts CHANGED
@@ -12,6 +12,7 @@ export enum DsColorEnum {
12
12
  "text-body-link" = "text-body-link",
13
13
  "text-body-link-visited" = "text-body-link-visited",
14
14
  "text-positive" = "text-positive",
15
+ "text-culture" = "text-culture",
15
16
  "icon-primary" = "icon-primary",
16
17
  "icon-primary-02" = "icon-primary-02",
17
18
  "icon-secondary" = "icon-secondary",
@@ -22,6 +23,7 @@ export enum DsColorEnum {
22
23
  "icon-brand" = "icon-brand",
23
24
  "icon-on-critical" = "icon-on-critical",
24
25
  "icon-on-success" = "icon-on-success",
26
+ "icon-culture" = "icon-culture",
25
27
  "component-brand" = "component-brand",
26
28
  "component-business" = "component-business",
27
29
  "component-primary" = "component-primary",
@@ -46,6 +48,7 @@ export enum DsColorEnum {
46
48
  "surface-sudoko" = "surface-sudoko",
47
49
  "surface-brand" = "surface-brand",
48
50
  "surface-inverted" = "surface-inverted",
51
+ "surface-breaking" = "surface-breaking",
49
52
  "border-primary" = "border-primary",
50
53
  "border-primary-02" = "border-primary-02",
51
54
  "border-primary-03" = "border-primary-03",
@@ -57,6 +60,7 @@ export enum DsColorEnum {
57
60
  "border-focus-03" = "border-focus-03",
58
61
  "border-focus-04" = "border-focus-04",
59
62
  "border-brand" = "border-brand",
63
+ "border-culture" = "border-culture",
60
64
  "background-primary" = "background-primary",
61
65
  "static-red-100" = "static-red-100",
62
66
  "static-black" = "static-black",
@@ -95,6 +99,7 @@ export enum DsColorIconEnum {
95
99
  "icon-on-business" = "icon-on-business",
96
100
  "icon-brand" = "icon-brand",
97
101
  "icon-on-critical" = "icon-on-critical",
98
- "icon-on-success" = "icon-on-success"
102
+ "icon-on-success" = "icon-on-success",
103
+ "icon-culture" = "icon-culture"
99
104
  }
100
105
  export type DsColorIcon = keyof typeof DsColorIconEnum;