@bonniernews/dn-design-system-web 21.1.5 → 21.2.1-beta.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 (39) hide show
  1. package/CHANGELOG.md +53 -3
  2. package/assets/teaser/teaser.scss +7 -1
  3. package/components/divider/README.md +1 -3
  4. package/components/group-header/group-header.scss +1 -1
  5. package/components/teaser-breaking/README-UXD.md +0 -0
  6. package/components/teaser-breaking/README.md +46 -0
  7. package/components/teaser-breaking/teaser-breaking.njk +46 -0
  8. package/components/teaser-breaking/teaser-breaking.scss +52 -0
  9. package/components/teaser-image/teaser-image.scss +1 -1
  10. package/components/teaser-large/teaser-large.njk +13 -3
  11. package/components/teaser-large/teaser-large.scss +16 -0
  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-onsite/teaser-onsite.tsx +1 -1
  18. package/components/teaser-package/teaser-package.scss +17 -6
  19. package/components/teaser-slideshow/teaser-slideshow.scss +1 -1
  20. package/components/teaser-split/teaser-split.njk +6 -2
  21. package/components/teaser-split/teaser-split.scss +3 -1
  22. package/components/teaser-standard/teaser-standard.njk +7 -3
  23. package/components/teaser-standard/teaser-standard.scss +5 -6
  24. package/foundations/helpers/colors.scss +1 -6
  25. package/foundations/variables/colorsCssVariables.scss +4 -0
  26. package/foundations/variables/colorsDnDarkTokens.scss +64 -60
  27. package/foundations/variables/colorsDnLightTokens.scss +55 -51
  28. package/foundations/variables/metrics.scss +2 -1
  29. package/foundations/variables/typographyFontWeight.scss +1 -0
  30. package/foundations/variables/typographyTokensList.scss +1 -0
  31. package/foundations/variables/typographyTokensScreenExtraLarge.scss +11 -4
  32. package/foundations/variables/typographyTokensScreenLarge.scss +10 -3
  33. package/foundations/variables/typographyTokensScreenSmall.scss +13 -6
  34. package/helpers/teaser.tsx +4 -2
  35. package/package.json +1 -1
  36. package/tokens/colors-css-variables.json +5 -1
  37. package/tokens/colors-dark-mode.json +64 -60
  38. package/tokens/colors-light-mode.json +57 -53
  39. package/tokens/typography-list.json +1 -0
package/tokens/colors-dark-mode.json CHANGED
@@ -1,71 +1,75 @@
1
1
  {
2
2
  "text": {
3
- "primary": "#EDEDED",
4
- "primary-02": "#B8B8B8",
3
+ "primary": "#ededed",
4
+ "primary-02": "#b8b8b8",
5
5
  "secondary": "#050505",
6
- "critical": "#FD2330",
7
- "disabled": "#B8B8B8",
6
+ "critical": "#fd2330",
7
+ "disabled": "#b8b8b8",
8
8
  "on-brand": "#ffffff",
9
9
  "on-business": "#ffffff",
10
10
  "on-critical": "#ffffff",
11
11
  "on-success": "#ffffff",
12
- "brand": "#FD2330",
13
- "body-link": "#65A0FC",
14
- "body-link-visited": "#65A0FC",
15
- "positive": "#3A8352"
12
+ "brand": "#fd2330",
13
+ "body-link": "#65a0fc",
14
+ "body-link-visited": "#65a0fc",
15
+ "positive": "#3a8352",
16
+ "culture": "#4293d7"
16
17
  },
17
18
  "icon": {
18
- "primary": "#EDEDED",
19
- "primary-02": "#CFCFCF",
19
+ "primary": "#ededed",
20
+ "primary-02": "#cfcfcf",
20
21
  "secondary": "#050505",
21
- "critical": "#FD2330",
22
- "disabled": "#B8B8B8",
22
+ "critical": "#fd2330",
23
+ "disabled": "#b8b8b8",
23
24
  "on-brand": "#141414",
24
25
  "on-critical": "#ffffff",
25
26
  "on-success": "#ffffff",
26
27
  "on-business": "#ffffff",
27
- "brand": "#FD2330"
28
+ "brand": "#fd2330",
29
+ "culture": "#4293d7"
28
30
  },
29
31
  "component": {
30
- "brand": "#FD2330",
31
- "business": "#3A8352",
32
- "primary": "#EDEDED",
33
- "primary-overlay": "#ffffff21",
34
- "primary-overlay-02": "#9E9E9E",
32
+ "brand": "#fd2330",
33
+ "business": "#3a8352",
34
+ "primary": "#ededed",
35
+ "primary-overlay": "rgba(255, 255, 255, 0.13)",
36
+ "primary-overlay-02": "#9e9e9e",
35
37
  "secondary": "#050505",
36
- "secondary-overlay": "#08080821",
37
- "secondary-overlay-02": "#08080833",
38
- "critical": "#EF7171",
39
- "critical-overlay": "#A51D24",
38
+ "secondary-overlay": "rgba(8, 8, 8, 0.13)",
39
+ "secondary-overlay-02": "rgba(8, 8, 8, 0.2)",
40
+ "critical": "#ef7171",
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": "#262626",
47
+ "below": "#171717",
46
48
  "background": "#050505",
47
- "raised": "#2B2B2B",
48
- "native-article": "#2B2B2B",
49
- "elevated": "#2B2B2B",
49
+ "raised": "#2b2b2b",
50
+ "native-article": "#2b2b2b",
51
+ "elevated": "#2b2b2b",
50
52
  "inverted": "#ffffff",
51
- "overlay": "#05050580",
52
- "quiz": "#EA3E3F",
53
- "korsord": "#8BB6E8",
54
- "sudoko": "#90D0BD",
55
- "brand": "#DA000D"
53
+ "overlay": "rgba(5, 5, 5, 0.5)",
54
+ "quiz": "#ea3e3f",
55
+ "korsord": "#8bb6e8",
56
+ "sudoko": "#90d0bd",
57
+ "brand": "#da000d",
58
+ "breaking": "#300407"
56
59
  },
57
60
  "border": {
58
- "primary": "#3B3B3B",
59
- "primary-02": "#ffffff66",
60
- "primary-03": "#EDEDED",
61
+ "primary": "rgba(255, 255, 255, 0.19)",
62
+ "primary-02": "rgba(255, 255, 255, 0.4)",
63
+ "primary-03": "#ededed",
61
64
  "secondary": "#141414",
62
- "business": "#3A8352",
63
- "critical": "#FD2330",
64
- "focus": "#FD2330",
65
+ "business": "#3a8352",
66
+ "critical": "#fd2330",
67
+ "focus": "#fd2330",
65
68
  "focus-02": "#ffffff",
66
- "focus-03": "#FD2330",
67
- "focus-04": "#3A8352",
68
- "brand": "#DA000D"
69
+ "focus-03": "#fd2330",
70
+ "focus-04": "#3a8352",
71
+ "brand": "#fd2330",
72
+ "culture": "#4293d7"
69
73
  },
70
74
  "background": {
71
75
  "primary": "#141414"
@@ -78,25 +82,25 @@
78
82
  "content-fade-down": "linear-gradient(0deg, #05050500 0%, #050505 100%)"
79
83
  },
80
84
  "static": {
81
- "red-100": "#FAD4D4",
85
+ "red-100": "#fad4d4",
82
86
  "black": "#141414",
83
- "transparent-black": "#14141499",
87
+ "transparent-black": "rgba(20, 20, 20, 0.6)",
84
88
  "white": "#ffffff",
85
- "transparent-white": "#ffffff80",
86
- "green-100": "#CEE4D6",
87
- "red-300": "#EF7171",
88
- "transparent-white-10": "#ffffff21",
89
- "kultur": "#568CBB",
90
- "economy": "#60BCA1",
91
- "sport": "#F58D2D",
92
- "neutral-200": "#E0E0E0",
93
- "sthlm": "#FF589B",
94
- "ad-yellow": "#FFEAC2",
95
- "neutral-100": "#EDEDED",
96
- "neutral-500": "#9E9E9E",
97
- "red-500": "#DA000D",
98
- "yellow": "#FFE600",
99
- "red-200": "#F6ACAD",
100
- "red-0": "#FCE8E8"
89
+ "transparent-white": "rgba(255, 255, 255, 0.5)",
90
+ "green-100": "#cee4d6",
91
+ "red-300": "#ef7171",
92
+ "transparent-white-10": "rgba(255, 255, 255, 0.13)",
93
+ "kultur": "#568cbb",
94
+ "economy": "#60bca1",
95
+ "sport": "#f58d2d",
96
+ "neutral-200": "#e0e0e0",
97
+ "sthlm": "#ff589b",
98
+ "ad-yellow": "#ffeac2",
99
+ "neutral-100": "#ededed",
100
+ "neutral-500": "#9e9e9e",
101
+ "red-500": "#da000d",
102
+ "yellow": "#ffe600",
103
+ "red-200": "#f6acad",
104
+ "red-0": "#fce8e8"
101
105
  }
102
106
  }
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'",