@bonniernews/dn-design-system-web 3.0.0-alpha.11 → 3.0.0-alpha.13

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 (9) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/foundations/typography/fontDefinitions.scss +30 -30
  3. package/foundations/variables/colorsCssVariables.scss +3 -0
  4. package/foundations/variables/colorsDnDarkTokens.scss +4 -1
  5. package/foundations/variables/colorsDnLightTokens.scss +3 -0
  6. package/foundations/variables/typographyTokensScreenLarge.scss +50 -50
  7. package/foundations/variables/typographyTokensScreenSmall.scss +50 -50
  8. package/package.json +2 -2
  9. package/tokens/colors-css-variables.json +3 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.12...@bonniernews/dn-design-system-web@3.0.0-alpha.13) (2023-03-21)
7
+
8
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
9
+
10
+
11
+
12
+
13
+
14
+ ## [3.0.0-alpha.12](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.11...@bonniernews/dn-design-system-web@3.0.0-alpha.12) (2023-03-20)
15
+
16
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
17
+
18
+
19
+
20
+
21
+
6
22
  ## [3.0.0-alpha.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.10...@bonniernews/dn-design-system-web@3.0.0-alpha.11) (2023-03-15)
7
23
 
8
24
  **Note:** Version bump only for package @bonniernews/dn-design-system-web
package/foundations/typography/fontDefinitions.scss CHANGED
@@ -3,7 +3,7 @@ $dnSerif: (
3
3
  fontFamily: DNSerifVf,
4
4
  sources: (
5
5
  (
6
- file: "DNSerif23-Variable.woff2",
6
+ file: "DNSerif24-Variable.woff2",
7
7
  format: "woff2-variations",
8
8
  ),
9
9
  ),
@@ -14,11 +14,11 @@ $dnSerif: (
14
14
  fontFamily: DNSerif,
15
15
  sources: (
16
16
  (
17
- file: "DNSerifHeadline23-Light.woff2",
17
+ file: "DNSerifHeadline24-Light.woff2",
18
18
  format: "woff2",
19
19
  ),
20
20
  (
21
- file: "DNSerifHeadline23-Light.woff",
21
+ file: "DNSerifHeadline24-Light.woff",
22
22
  format: "woff",
23
23
  ),
24
24
  ),
@@ -29,11 +29,11 @@ $dnSerif: (
29
29
  fontFamily: DNSerif,
30
30
  sources: (
31
31
  (
32
- file: "DNSerifHeadline23-Regular.woff2",
32
+ file: "DNSerifHeadline24-Regular.woff2",
33
33
  format: "woff2",
34
34
  ),
35
35
  (
36
- file: "DNSerifHeadline23-Regular.woff",
36
+ file: "DNSerifHeadline24-Regular.woff",
37
37
  format: "woff",
38
38
  ),
39
39
  ),
@@ -44,11 +44,11 @@ $dnSerif: (
44
44
  fontFamily: DNSerif,
45
45
  sources: (
46
46
  (
47
- file: "DNSerifHeadline23-Medium.woff2",
47
+ file: "DNSerifHeadline24-Medium.woff2",
48
48
  format: "woff2",
49
49
  ),
50
50
  (
51
- file: "DNSerifHeadline23-Medium.woff",
51
+ file: "DNSerifHeadline24-Medium.woff",
52
52
  format: "woff",
53
53
  ),
54
54
  ),
@@ -59,11 +59,11 @@ $dnSerif: (
59
59
  fontFamily: DNSerif,
60
60
  sources: (
61
61
  (
62
- file: "DNSerifHeadline23-SemiBold.woff2",
62
+ file: "DNSerifHeadline24-SemiBold.woff2",
63
63
  format: "woff2",
64
64
  ),
65
65
  (
66
- file: "DNSerifHeadline23-SemiBold.woff",
66
+ file: "DNSerifHeadline24-SemiBold.woff",
67
67
  format: "woff",
68
68
  ),
69
69
  ),
@@ -74,11 +74,11 @@ $dnSerif: (
74
74
  fontFamily: DNSerif,
75
75
  sources: (
76
76
  (
77
- file: "DNSerifHeadline23-Bold.woff2",
77
+ file: "DNSerifHeadline24-Bold.woff2",
78
78
  format: "woff2",
79
79
  ),
80
80
  (
81
- file: "DNSerifHeadline23-Bold.woff",
81
+ file: "DNSerifHeadline24-Bold.woff",
82
82
  format: "woff",
83
83
  ),
84
84
  ),
@@ -89,11 +89,11 @@ $dnSerif: (
89
89
  fontFamily: DNSerif,
90
90
  sources: (
91
91
  (
92
- file: "DNSerifHeadline23-ExtraBold.woff2",
92
+ file: "DNSerifHeadline24-ExtraBold.woff2",
93
93
  format: "woff2",
94
94
  ),
95
95
  (
96
- file: "DNSerifHeadline23-ExtraBold.woff",
96
+ file: "DNSerifHeadline24-ExtraBold.woff",
97
97
  format: "woff",
98
98
  ),
99
99
  ),
@@ -104,11 +104,11 @@ $dnSerif: (
104
104
  fontFamily: DNSerif,
105
105
  sources: (
106
106
  (
107
- file: "DNSerifHeadline23-Black.woff2",
107
+ file: "DNSerifHeadline24-Black.woff2",
108
108
  format: "woff2",
109
109
  ),
110
110
  (
111
- file: "DNSerifHeadline23-Black.woff",
111
+ file: "DNSerifHeadline24-Black.woff",
112
112
  format: "woff",
113
113
  ),
114
114
  ),
@@ -122,7 +122,7 @@ $dnSerifItalic: (
122
122
  fontFamily: DNSerifVf,
123
123
  sources: (
124
124
  (
125
- file: "DNSerifItalic23-Variable.woff2",
125
+ file: "DNSerifItalic24-Variable.woff2",
126
126
  format: "woff2-variations",
127
127
  ),
128
128
  ),
@@ -134,11 +134,11 @@ $dnSerifItalic: (
134
134
  fontFamily: DNSerif,
135
135
  sources: (
136
136
  (
137
- file: "DNSerifHeadline23-LightItalic.woff2",
137
+ file: "DNSerifHeadline24-LightItalic.woff2",
138
138
  format: "woff2",
139
139
  ),
140
140
  (
141
- file: "DNSerifHeadline23-LightItalic.woff",
141
+ file: "DNSerifHeadline24-LightItalic.woff",
142
142
  format: "woff",
143
143
  ),
144
144
  ),
@@ -150,11 +150,11 @@ $dnSerifItalic: (
150
150
  fontFamily: DNSerif,
151
151
  sources: (
152
152
  (
153
- file: "DNSerifHeadline23-RegularItalic.woff2",
153
+ file: "DNSerifHeadline24-RegularItalic.woff2",
154
154
  format: "woff2",
155
155
  ),
156
156
  (
157
- file: "DNSerifHeadline23-RegularItalic.woff",
157
+ file: "DNSerifHeadline24-RegularItalic.woff",
158
158
  format: "woff",
159
159
  ),
160
160
  ),
@@ -166,11 +166,11 @@ $dnSerifItalic: (
166
166
  fontFamily: DNSerif,
167
167
  sources: (
168
168
  (
169
- file: "DNSerifHeadline23-MediumItalic.woff2",
169
+ file: "DNSerifHeadline24-MediumItalic.woff2",
170
170
  format: "woff2",
171
171
  ),
172
172
  (
173
- file: "DNSerifHeadline23-MediumItalic.woff",
173
+ file: "DNSerifHeadline24-MediumItalic.woff",
174
174
  format: "woff",
175
175
  ),
176
176
  ),
@@ -182,11 +182,11 @@ $dnSerifItalic: (
182
182
  fontFamily: DNSerif,
183
183
  sources: (
184
184
  (
185
- file: "DNSerifHeadline23-SemiBoldItalic.woff2",
185
+ file: "DNSerifHeadline24-SemiBoldItalic.woff2",
186
186
  format: "woff2",
187
187
  ),
188
188
  (
189
- file: "DNSerifHeadline23-SemiBoldItalic.woff",
189
+ file: "DNSerifHeadline24-SemiBoldItalic.woff",
190
190
  format: "woff",
191
191
  ),
192
192
  ),
@@ -198,11 +198,11 @@ $dnSerifItalic: (
198
198
  fontFamily: DNSerif,
199
199
  sources: (
200
200
  (
201
- file: "DNSerifHeadline23-BoldItalic.woff2",
201
+ file: "DNSerifHeadline24-BoldItalic.woff2",
202
202
  format: "woff2",
203
203
  ),
204
204
  (
205
- file: "DNSerifHeadline23-BoldItalic.woff",
205
+ file: "DNSerifHeadline24-BoldItalic.woff",
206
206
  format: "woff",
207
207
  ),
208
208
  ),
@@ -214,11 +214,11 @@ $dnSerifItalic: (
214
214
  fontFamily: DNSerif,
215
215
  sources: (
216
216
  (
217
- file: "DNSerifHeadline23-ExtraBoldItalic.woff2",
217
+ file: "DNSerifHeadline24-ExtraBoldItalic.woff2",
218
218
  format: "woff2",
219
219
  ),
220
220
  (
221
- file: "DNSerifHeadline23-ExtraBoldItalic.woff",
221
+ file: "DNSerifHeadline24-ExtraBoldItalic.woff",
222
222
  format: "woff",
223
223
  ),
224
224
  ),
@@ -230,11 +230,11 @@ $dnSerifItalic: (
230
230
  fontFamily: DNSerif,
231
231
  sources: (
232
232
  (
233
- file: "DNSerifHeadline23-BlackItalic.woff2",
233
+ file: "DNSerifHeadline24-BlackItalic.woff2",
234
234
  format: "woff2",
235
235
  ),
236
236
  (
237
- file: "DNSerifHeadline23-BlackItalic.woff",
237
+ file: "DNSerifHeadline24-BlackItalic.woff",
238
238
  format: "woff",
239
239
  ),
240
240
  ),
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -32,6 +32,7 @@ $ds-color-component-critical: var(--ds-color-component-critical);
32
32
  $ds-color-component-critical-overlay: var(--ds-color-component-critical-overlay);
33
33
  $ds-color-component-static-white: var(--ds-color-component-static-white);
34
34
  $ds-color-component-positive: var(--ds-color-component-positive);
35
+ $ds-color-component-primary-02: var(--ds-color-component-primary-02);
35
36
  $ds-color-surface-below: var(--ds-color-surface-below);
36
37
  $ds-color-surface-native-article: var(--ds-color-surface-native-article);
37
38
  $ds-color-surface-background: var(--ds-color-surface-background);
@@ -62,6 +63,8 @@ $ds-color-static-sport: var(--ds-color-static-sport);
62
63
  $ds-color-static-neutral-200: var(--ds-color-static-neutral-200);
63
64
  $ds-color-static-sthlm: var(--ds-color-static-sthlm);
64
65
  $ds-color-static-ad-yellow: var(--ds-color-static-ad-yellow);
66
+ $ds-color-static-neutral-100: var(--ds-color-static-neutral-100);
67
+ $ds-color-static-neutral-500: var(--ds-color-static-neutral-500);
65
68
  $ds-color-gradient-content-fade-left: var(--ds-color-gradient-content-fade-left);
66
69
  $ds-color-gradient-content-fade-right: var(--ds-color-gradient-content-fade-right);
67
70
  $ds-color-gradient-content-fade-up: var(--ds-color-gradient-content-fade-up);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -24,7 +24,7 @@ $ds-hex-dark-component-brand: #EF7171;
24
24
  $ds-hex-dark-component-business: #3A8352;
25
25
  $ds-hex-dark-component-primary: #EDEDED;
26
26
  $ds-hex-dark-component-primary-overlay: #ffffff1a;
27
- $ds-hex-dark-component-primary-overlay-02: #ffffff33;
27
+ $ds-hex-dark-component-primary-overlay-02: #9E9E9E;
28
28
  $ds-hex-dark-component-secondary: #141414;
29
29
  $ds-hex-dark-component-secondary-overlay: #0808081a;
30
30
  $ds-hex-dark-component-secondary-overlay-02: #08080833;
@@ -32,6 +32,7 @@ $ds-hex-dark-component-critical: #EF7171;
32
32
  $ds-hex-dark-component-critical-overlay: #A51D24;
33
33
  $ds-hex-dark-component-static-white: #ffffff;
34
34
  $ds-hex-dark-component-positive: #3A8352;
35
+ $ds-hex-dark-component-primary-02: #CFCFCF;
35
36
  $ds-hex-dark-surface-below: #050505;
36
37
  $ds-hex-dark-surface-background: #141414;
37
38
  $ds-hex-dark-surface-raised: #2B2B2B;
@@ -67,3 +68,5 @@ $ds-hex-dark-static-sport: #F58D2D;
67
68
  $ds-hex-dark-static-neutral-200: #E0E0E0;
68
69
  $ds-hex-dark-static-sthlm: #FF589B;
69
70
  $ds-hex-dark-static-ad-yellow: #FFEAC2;
71
+ $ds-hex-dark-static-neutral-100: #EDEDED;
72
+ $ds-hex-dark-static-neutral-500: #9E9E9E;
package/foundations/variables/colorsDnLightTokens.scss CHANGED
@@ -32,6 +32,7 @@ $ds-hex-component-critical: #EA3E3F;
32
32
  $ds-hex-component-critical-overlay: #A51D24;
33
33
  $ds-hex-component-static-white: #ffffff;
34
34
  $ds-hex-component-positive: #3A8352;
35
+ $ds-hex-component-primary-02: #CFCFCF;
35
36
  $ds-hex-surface-below: #EDEDED;
36
37
  $ds-hex-surface-native-article: #EDEDED;
37
38
  $ds-hex-surface-background: #ffffff;
@@ -62,6 +63,8 @@ $ds-hex-static-sport: #F58D2D;
62
63
  $ds-hex-static-neutral-200: #E0E0E0;
63
64
  $ds-hex-static-sthlm: #FF589B;
64
65
  $ds-hex-static-ad-yellow: #FFEAC2;
66
+ $ds-hex-static-neutral-100: #EDEDED;
67
+ $ds-hex-static-neutral-500: #9E9E9E;
65
68
  $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
66
69
  $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
67
70
  $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -1,18 +1,18 @@
1
1
  $typographyTokensScreenLarge: (
2
2
  expressive-heading01regular: (
3
- fontFamily: "DN Serif 22",
3
+ fontFamily: "DN Serif 24",
4
4
  fontWeight: Regular,
5
5
  fontSize: 16,
6
6
  lineHeight: 20
7
7
  ),
8
8
  expressive-heading01semibold: (
9
- fontFamily: "DN Serif 22",
9
+ fontFamily: "DN Serif 24",
10
10
  fontWeight: SemiBold,
11
11
  fontSize: 16,
12
12
  lineHeight: 20
13
13
  ),
14
14
  expressive-heading01bold: (
15
- fontFamily: "DN Serif 22",
15
+ fontFamily: "DN Serif 24",
16
16
  fontWeight: Bold,
17
17
  fontSize: 16,
18
18
  lineHeight: 20
@@ -20,39 +20,39 @@ $typographyTokensScreenLarge: (
20
20
  expressive-heading01italicregular: (
21
21
  lineHeight: 20,
22
22
  fontSize: 16,
23
- fontFamily: "DN Serif Italic 22",
23
+ fontFamily: "DN Serif Italic 24",
24
24
  fontWeight: Regular,
25
25
  fontStyle: italic
26
26
  ),
27
27
  expressive-heading01italicsemibold: (
28
28
  lineHeight: 20,
29
29
  fontSize: 16,
30
- fontFamily: "DN Serif Italic 22",
30
+ fontFamily: "DN Serif Italic 24",
31
31
  fontWeight: SemiBold,
32
32
  fontStyle: italic
33
33
  ),
34
34
  expressive-heading01italicbold: (
35
35
  lineHeight: 20,
36
36
  fontSize: 16,
37
- fontFamily: "DN Serif Italic 22",
37
+ fontFamily: "DN Serif Italic 24",
38
38
  fontWeight: Bold,
39
39
  fontStyle: italic
40
40
  ),
41
41
  expressive-heading02regular: (
42
- fontFamily: "DN Serif 22",
42
+ fontFamily: "DN Serif 24",
43
43
  fontWeight: Regular,
44
44
  fontSize: 22,
45
45
  lineHeight: 26,
46
46
  paragraphSpacing: 16
47
47
  ),
48
48
  expressive-heading02semibold: (
49
- fontFamily: "DN Serif 22",
49
+ fontFamily: "DN Serif 24",
50
50
  fontWeight: SemiBold,
51
51
  fontSize: 22,
52
52
  lineHeight: 26
53
53
  ),
54
54
  expressive-heading02bold: (
55
- fontFamily: "DN Serif 22",
55
+ fontFamily: "DN Serif 24",
56
56
  fontWeight: Bold,
57
57
  fontSize: 22,
58
58
  lineHeight: 26
@@ -61,37 +61,37 @@ $typographyTokensScreenLarge: (
61
61
  fontSize: 22,
62
62
  lineHeight: 26,
63
63
  fontWeight: Regular,
64
- fontFamily: "DN Serif Italic 22",
64
+ fontFamily: "DN Serif Italic 24",
65
65
  fontStyle: italic
66
66
  ),
67
67
  expressive-heading02italicsemibold: (
68
68
  fontSize: 22,
69
69
  lineHeight: 26,
70
70
  fontWeight: SemiBold,
71
- fontFamily: "DN Serif Italic 22",
71
+ fontFamily: "DN Serif Italic 24",
72
72
  fontStyle: italic
73
73
  ),
74
74
  expressive-heading02italicbold: (
75
75
  fontSize: 22,
76
76
  lineHeight: 26,
77
77
  fontWeight: Bold,
78
- fontFamily: "DN Serif Italic 22",
78
+ fontFamily: "DN Serif Italic 24",
79
79
  fontStyle: italic
80
80
  ),
81
81
  expressive-heading03regular: (
82
- fontFamily: "DN Serif 22",
82
+ fontFamily: "DN Serif 24",
83
83
  fontWeight: Regular,
84
84
  fontSize: 32,
85
85
  lineHeight: 36
86
86
  ),
87
87
  expressive-heading03semibold: (
88
- fontFamily: "DN Serif 22",
88
+ fontFamily: "DN Serif 24",
89
89
  fontWeight: SemiBold,
90
90
  fontSize: 32,
91
91
  lineHeight: 36
92
92
  ),
93
93
  expressive-heading03bold: (
94
- fontFamily: "DN Serif 22",
94
+ fontFamily: "DN Serif 24",
95
95
  fontWeight: Bold,
96
96
  fontSize: 32,
97
97
  lineHeight: 36
@@ -100,37 +100,37 @@ $typographyTokensScreenLarge: (
100
100
  fontSize: 32,
101
101
  lineHeight: 36,
102
102
  fontWeight: Regular,
103
- fontFamily: "DN Serif Italic 22",
103
+ fontFamily: "DN Serif Italic 24",
104
104
  fontStyle: italic
105
105
  ),
106
106
  expressive-heading03italicsemibold: (
107
107
  fontSize: 32,
108
108
  lineHeight: 36,
109
109
  fontWeight: SemiBold,
110
- fontFamily: "DN Serif Italic 22",
110
+ fontFamily: "DN Serif Italic 24",
111
111
  fontStyle: italic
112
112
  ),
113
113
  expressive-heading03italicbold: (
114
114
  fontSize: 32,
115
115
  lineHeight: 36,
116
116
  fontWeight: Bold,
117
- fontFamily: "DN Serif Italic 22",
117
+ fontFamily: "DN Serif Italic 24",
118
118
  fontStyle: italic
119
119
  ),
120
120
  expressive-heading04regular: (
121
- fontFamily: "DN Serif 22",
121
+ fontFamily: "DN Serif 24",
122
122
  fontWeight: Regular,
123
123
  fontSize: 48,
124
124
  lineHeight: 52
125
125
  ),
126
126
  expressive-heading04semibold: (
127
- fontFamily: "DN Serif 22",
127
+ fontFamily: "DN Serif 24",
128
128
  fontWeight: SemiBold,
129
129
  fontSize: 48,
130
130
  lineHeight: 52
131
131
  ),
132
132
  expressive-heading04bold: (
133
- fontFamily: "DN Serif 22",
133
+ fontFamily: "DN Serif 24",
134
134
  fontWeight: Bold,
135
135
  fontSize: 48,
136
136
  lineHeight: 52
@@ -139,57 +139,57 @@ $typographyTokensScreenLarge: (
139
139
  fontSize: 48,
140
140
  lineHeight: 52,
141
141
  fontWeight: Regular,
142
- fontFamily: "DN Serif Italic 22",
142
+ fontFamily: "DN Serif Italic 24",
143
143
  fontStyle: italic
144
144
  ),
145
145
  expressive-heading04italicsemibold: (
146
146
  fontSize: 48,
147
147
  lineHeight: 52,
148
148
  fontWeight: SemiBold,
149
- fontFamily: "DN Serif Italic 22",
149
+ fontFamily: "DN Serif Italic 24",
150
150
  fontStyle: italic
151
151
  ),
152
152
  expressive-heading04italicbold: (
153
153
  fontSize: 48,
154
154
  lineHeight: 52,
155
155
  fontWeight: Bold,
156
- fontFamily: "DN Serif Italic 22",
156
+ fontFamily: "DN Serif Italic 24",
157
157
  fontStyle: italic
158
158
  ),
159
159
  expressive-heading05regular: (
160
- fontFamily: "DN Serif 22",
160
+ fontFamily: "DN Serif 24",
161
161
  fontWeight: Regular,
162
162
  lineHeight: 64,
163
163
  fontSize: 56
164
164
  ),
165
165
  expressive-heading05semibold: (
166
- fontFamily: "DN Serif 22",
166
+ fontFamily: "DN Serif 24",
167
167
  fontWeight: SemiBold,
168
168
  lineHeight: 64,
169
169
  fontSize: 56
170
170
  ),
171
171
  expressive-heading05bold: (
172
- fontFamily: "DN Serif 22",
172
+ fontFamily: "DN Serif 24",
173
173
  fontWeight: Bold,
174
174
  lineHeight: 64,
175
175
  fontSize: 56
176
176
  ),
177
177
  expressive-heading05italicregular: (
178
- fontFamily: "DN Serif Italic 22",
178
+ fontFamily: "DN Serif Italic 24",
179
179
  fontWeight: Regular,
180
180
  fontSize: 56,
181
181
  lineHeight: 64,
182
182
  fontStyle: italic
183
183
  ),
184
184
  expressive-heading05italicsemibold: (
185
- fontFamily: "DN Serif Italic 22",
185
+ fontFamily: "DN Serif Italic 24",
186
186
  fontWeight: SemiBold,
187
187
  fontSize: 56,
188
188
  lineHeight: 64,
189
189
  fontStyle: italic
190
190
  ),
191
191
  expressive-heading05italicbold: (
192
- fontFamily: "DN Serif Italic 22",
192
+ fontFamily: "DN Serif Italic 24",
193
193
  fontWeight: Bold,
194
194
  fontSize: 56,
195
195
  lineHeight: 64,
@@ -286,117 +286,117 @@ $typographyTokensScreenLarge: (
286
286
  lineHeight: 48
287
287
  ),
288
288
  expressive-preamble01regular: (
289
- fontFamily: "DN Serif 22",
289
+ fontFamily: "DN Serif 24",
290
290
  fontWeight: Regular,
291
291
  fontSize: 20,
292
292
  lineHeight: 30
293
293
  ),
294
294
  expressive-preamble01semibold: (
295
- fontFamily: "DN Serif 22",
295
+ fontFamily: "DN Serif 24",
296
296
  fontWeight: SemiBold,
297
297
  fontSize: 20,
298
298
  lineHeight: 30
299
299
  ),
300
300
  expressive-preamble01bold: (
301
- fontFamily: "DN Serif 22",
301
+ fontFamily: "DN Serif 24",
302
302
  fontWeight: Bold,
303
303
  fontSize: 20,
304
304
  lineHeight: 30
305
305
  ),
306
306
  expressive-preamble01italicregular: (
307
- fontFamily: "DN Serif Italic 22",
307
+ fontFamily: "DN Serif Italic 24",
308
308
  fontWeight: Regular,
309
309
  lineHeight: 30,
310
310
  fontSize: 20,
311
311
  fontStyle: italic
312
312
  ),
313
313
  expressive-preamble01italicsemibold: (
314
- fontFamily: "DN Serif Italic 22",
314
+ fontFamily: "DN Serif Italic 24",
315
315
  fontWeight: SemiBold,
316
316
  lineHeight: 30,
317
317
  fontSize: 20,
318
318
  fontStyle: italic
319
319
  ),
320
320
  expressive-preamble01italicbold: (
321
- fontFamily: "DN Serif Italic 22",
321
+ fontFamily: "DN Serif Italic 24",
322
322
  fontWeight: Bold,
323
323
  lineHeight: 30,
324
324
  fontSize: 20,
325
325
  fontStyle: italic
326
326
  ),
327
327
  expressive-body01regular: (
328
- fontFamily: "DN Serif 22",
328
+ fontFamily: "DN Serif 24",
329
329
  fontWeight: Regular,
330
330
  fontSize: 16,
331
331
  lineHeight: 24
332
332
  ),
333
333
  expressive-body01semibold: (
334
- fontFamily: "DN Serif 22",
334
+ fontFamily: "DN Serif 24",
335
335
  fontWeight: SemiBold,
336
336
  fontSize: 16,
337
337
  lineHeight: 24
338
338
  ),
339
339
  expressive-body01bold: (
340
- fontFamily: "DN Serif 22",
340
+ fontFamily: "DN Serif 24",
341
341
  fontWeight: Bold,
342
342
  fontSize: 16,
343
343
  lineHeight: 24
344
344
  ),
345
345
  expressive-body01italicregular: (
346
- fontFamily: "DN Serif Italic 22",
346
+ fontFamily: "DN Serif Italic 24",
347
347
  fontWeight: Regular,
348
348
  lineHeight: 24,
349
349
  fontSize: 16,
350
350
  fontStyle: italic
351
351
  ),
352
352
  expressive-body01italicsemibold: (
353
- fontFamily: "DN Serif Italic 22",
353
+ fontFamily: "DN Serif Italic 24",
354
354
  fontWeight: SemiBold,
355
355
  lineHeight: 24,
356
356
  fontSize: 16,
357
357
  fontStyle: italic
358
358
  ),
359
359
  expressive-body01italicbold: (
360
- fontFamily: "DN Serif Italic 22",
360
+ fontFamily: "DN Serif Italic 24",
361
361
  fontWeight: Bold,
362
362
  lineHeight: 24,
363
363
  fontSize: 16,
364
364
  fontStyle: italic
365
365
  ),
366
366
  expressive-body02regular: (
367
- fontFamily: "DN Serif 22",
367
+ fontFamily: "DN Serif 24",
368
368
  fontWeight: Regular,
369
369
  lineHeight: 28,
370
370
  fontSize: 18
371
371
  ),
372
372
  expressive-body02semibold: (
373
- fontFamily: "DN Serif 22",
373
+ fontFamily: "DN Serif 24",
374
374
  fontWeight: SemiBold,
375
375
  lineHeight: 28,
376
376
  fontSize: 18
377
377
  ),
378
378
  expressive-body02bold: (
379
- fontFamily: "DN Serif 22",
379
+ fontFamily: "DN Serif 24",
380
380
  fontWeight: Bold,
381
381
  lineHeight: 28,
382
382
  fontSize: 18
383
383
  ),
384
384
  expressive-body02italicregular: (
385
- fontFamily: "DN Serif Italic 22",
385
+ fontFamily: "DN Serif Italic 24",
386
386
  fontWeight: Regular,
387
387
  lineHeight: 28,
388
388
  fontSize: 18,
389
389
  fontStyle: italic
390
390
  ),
391
391
  expressive-body02italicsemibold: (
392
- fontFamily: "DN Serif Italic 22",
392
+ fontFamily: "DN Serif Italic 24",
393
393
  fontWeight: SemiBold,
394
394
  lineHeight: 28,
395
395
  fontSize: 18,
396
396
  fontStyle: italic
397
397
  ),
398
398
  expressive-body02italicbold: (
399
- fontFamily: "DN Serif Italic 22",
399
+ fontFamily: "DN Serif Italic 24",
400
400
  fontWeight: Bold,
401
401
  lineHeight: 28,
402
402
  fontSize: 18,
@@ -497,7 +497,7 @@ $typographyTokensScreenLarge: (
497
497
  fontSize: 12
498
498
  ),
499
499
  detaildropcap: (
500
- fontFamily: "DN Serif 22",
500
+ fontFamily: "DN Serif 24",
501
501
  fontWeight: Bold,
502
502
  lineHeight: 78,
503
503
  fontSize: 92
@@ -530,7 +530,7 @@ $typographyTokensScreenLarge: (
530
530
  letterSpacing: 0.5
531
531
  ),
532
532
  detailmedryckare: (
533
- fontFamily: "DN Serif 22",
533
+ fontFamily: "DN Serif 24",
534
534
  fontWeight: Regular,
535
535
  fontSize: 16,
536
536
  lineHeight: 22
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -1,24 +1,24 @@
1
1
  $typographyTokensScreenSmall: (
2
2
  expressive-heading01regular: (
3
- fontFamily: "DN Serif 22",
3
+ fontFamily: "DN Serif 24",
4
4
  fontWeight: Regular,
5
5
  fontSize: 16,
6
6
  lineHeight: 20
7
7
  ),
8
8
  expressive-heading01semibold: (
9
- fontFamily: "DN Serif 22",
9
+ fontFamily: "DN Serif 24",
10
10
  fontWeight: SemiBold,
11
11
  fontSize: 16,
12
12
  lineHeight: 20
13
13
  ),
14
14
  expressive-heading01bold: (
15
- fontFamily: "DN Serif 22",
15
+ fontFamily: "DN Serif 24",
16
16
  fontWeight: Bold,
17
17
  fontSize: 16,
18
18
  lineHeight: 20
19
19
  ),
20
20
  expressive-heading01italicregular: (
21
- fontFamily: "DN Serif Italic 22",
21
+ fontFamily: "DN Serif Italic 24",
22
22
  fontWeight: Regular,
23
23
  fontSize: 16,
24
24
  letterSpacing: "",
@@ -26,7 +26,7 @@ $typographyTokensScreenSmall: (
26
26
  fontStyle: italic
27
27
  ),
28
28
  expressive-heading01italicsemibold: (
29
- fontFamily: "DN Serif Italic 22",
29
+ fontFamily: "DN Serif Italic 24",
30
30
  fontWeight: SemiBold,
31
31
  fontSize: 16,
32
32
  letterSpacing: "",
@@ -34,7 +34,7 @@ $typographyTokensScreenSmall: (
34
34
  fontStyle: italic
35
35
  ),
36
36
  expressive-heading01italicbold: (
37
- fontFamily: "DN Serif Italic 22",
37
+ fontFamily: "DN Serif Italic 24",
38
38
  fontWeight: Bold,
39
39
  fontSize: 16,
40
40
  letterSpacing: "",
@@ -42,158 +42,158 @@ $typographyTokensScreenSmall: (
42
42
  fontStyle: italic
43
43
  ),
44
44
  expressive-heading02regular: (
45
- fontFamily: "DN Serif 22",
45
+ fontFamily: "DN Serif 24",
46
46
  fontWeight: Regular,
47
47
  fontSize: 16,
48
48
  lineHeight: 20
49
49
  ),
50
50
  expressive-heading02semibold: (
51
- fontFamily: "DN Serif 22",
51
+ fontFamily: "DN Serif 24",
52
52
  fontWeight: SemiBold,
53
53
  fontSize: 16,
54
54
  lineHeight: 20
55
55
  ),
56
56
  expressive-heading02bold: (
57
- fontFamily: "DN Serif 22",
57
+ fontFamily: "DN Serif 24",
58
58
  fontWeight: Bold,
59
59
  fontSize: 16,
60
60
  lineHeight: 20
61
61
  ),
62
62
  expressive-heading02italicregular: (
63
- fontFamily: "DN Serif Italic 22",
63
+ fontFamily: "DN Serif Italic 24",
64
64
  fontWeight: Regular,
65
65
  fontSize: 16,
66
66
  lineHeight: 20,
67
67
  fontStyle: italic
68
68
  ),
69
69
  expressive-heading02italicsemibold: (
70
- fontFamily: "DN Serif Italic 22",
70
+ fontFamily: "DN Serif Italic 24",
71
71
  fontWeight: SemiBold,
72
72
  fontSize: 16,
73
73
  lineHeight: 20,
74
74
  fontStyle: italic
75
75
  ),
76
76
  expressive-heading02italicbold: (
77
- fontFamily: "DN Serif Italic 22",
77
+ fontFamily: "DN Serif Italic 24",
78
78
  fontWeight: Bold,
79
79
  fontSize: 16,
80
80
  lineHeight: 20,
81
81
  fontStyle: italic
82
82
  ),
83
83
  expressive-heading03regular: (
84
- fontFamily: "DN Serif 22",
84
+ fontFamily: "DN Serif 24",
85
85
  fontWeight: Regular,
86
86
  fontSize: 22,
87
87
  lineHeight: 26
88
88
  ),
89
89
  expressive-heading03semibold: (
90
- fontFamily: "DN Serif 22",
90
+ fontFamily: "DN Serif 24",
91
91
  fontWeight: SemiBold,
92
92
  fontSize: 22,
93
93
  lineHeight: 26
94
94
  ),
95
95
  expressive-heading03bold: (
96
- fontFamily: "DN Serif 22",
96
+ fontFamily: "DN Serif 24",
97
97
  fontWeight: Bold,
98
98
  fontSize: 22,
99
99
  lineHeight: 26
100
100
  ),
101
101
  expressive-heading03italicregular: (
102
- fontFamily: "DN Serif Italic 22",
102
+ fontFamily: "DN Serif Italic 24",
103
103
  fontSize: 22,
104
104
  lineHeight: 26,
105
105
  fontWeight: Regular,
106
106
  fontStyle: italic
107
107
  ),
108
108
  expressive-heading03italicsemibold: (
109
- fontFamily: "DN Serif Italic 22",
109
+ fontFamily: "DN Serif Italic 24",
110
110
  fontSize: 22,
111
111
  lineHeight: 26,
112
112
  fontWeight: SemiBold,
113
113
  fontStyle: italic
114
114
  ),
115
115
  expressive-heading03italicbold: (
116
- fontFamily: "DN Serif Italic 22",
116
+ fontFamily: "DN Serif Italic 24",
117
117
  fontSize: 22,
118
118
  lineHeight: 26,
119
119
  fontWeight: Bold,
120
120
  fontStyle: italic
121
121
  ),
122
122
  expressive-heading04regular: (
123
- fontFamily: "DN Serif 22",
123
+ fontFamily: "DN Serif 24",
124
124
  fontWeight: Regular,
125
125
  fontSize: 26,
126
126
  lineHeight: 32
127
127
  ),
128
128
  expressive-heading04semibold: (
129
- fontFamily: "DN Serif 22",
129
+ fontFamily: "DN Serif 24",
130
130
  fontWeight: SemiBold,
131
131
  fontSize: 26,
132
132
  lineHeight: 32
133
133
  ),
134
134
  expressive-heading04bold: (
135
- fontFamily: "DN Serif 22",
135
+ fontFamily: "DN Serif 24",
136
136
  fontWeight: Bold,
137
137
  fontSize: 26,
138
138
  lineHeight: 32
139
139
  ),
140
140
  expressive-heading04italicregular: (
141
- fontFamily: "DN Serif Italic 22",
141
+ fontFamily: "DN Serif Italic 24",
142
142
  fontWeight: Regular,
143
143
  lineHeight: 32,
144
144
  fontSize: 26,
145
145
  fontStyle: italic
146
146
  ),
147
147
  expressive-heading04italicsemibold: (
148
- fontFamily: "DN Serif Italic 22",
148
+ fontFamily: "DN Serif Italic 24",
149
149
  fontWeight: SemiBold,
150
150
  lineHeight: 32,
151
151
  fontSize: 26,
152
152
  fontStyle: italic
153
153
  ),
154
154
  expressive-heading04italicbold: (
155
- fontFamily: "DN Serif Italic 22",
155
+ fontFamily: "DN Serif Italic 24",
156
156
  fontWeight: Bold,
157
157
  lineHeight: 32,
158
158
  fontSize: 26,
159
159
  fontStyle: italic
160
160
  ),
161
161
  expressive-heading05regular: (
162
- fontFamily: "DN Serif 22",
162
+ fontFamily: "DN Serif 24",
163
163
  fontWeight: Regular,
164
164
  lineHeight: 36,
165
165
  fontSize: 32,
166
166
  letterSpacing: ""
167
167
  ),
168
168
  expressive-heading05semibold: (
169
- fontFamily: "DN Serif 22",
169
+ fontFamily: "DN Serif 24",
170
170
  fontWeight: SemiBold,
171
171
  lineHeight: 36,
172
172
  fontSize: 32
173
173
  ),
174
174
  expressive-heading05bold: (
175
- fontFamily: "DN Serif 22",
175
+ fontFamily: "DN Serif 24",
176
176
  fontWeight: Bold,
177
177
  lineHeight: 36,
178
178
  fontSize: 32,
179
179
  letterSpacing: ""
180
180
  ),
181
181
  expressive-heading05italicregular: (
182
- fontFamily: "DN Serif Italic 22",
182
+ fontFamily: "DN Serif Italic 24",
183
183
  fontWeight: Regular,
184
184
  lineHeight: 36,
185
185
  fontSize: 32,
186
186
  fontStyle: italic
187
187
  ),
188
188
  expressive-heading05italicsemibold: (
189
- fontFamily: "DN Serif Italic 22",
189
+ fontFamily: "DN Serif Italic 24",
190
190
  fontWeight: SemiBold,
191
191
  lineHeight: 36,
192
192
  fontSize: 32,
193
193
  fontStyle: italic
194
194
  ),
195
195
  expressive-heading05italicbold: (
196
- fontFamily: "DN Serif Italic 22",
196
+ fontFamily: "DN Serif Italic 24",
197
197
  fontWeight: Bold,
198
198
  lineHeight: 36,
199
199
  fontSize: 32,
@@ -290,118 +290,118 @@ $typographyTokensScreenSmall: (
290
290
  lineHeight: 48
291
291
  ),
292
292
  expressive-preamble01regular: (
293
- fontFamily: "DN Serif 22",
293
+ fontFamily: "DN Serif 24",
294
294
  fontWeight: Regular,
295
295
  fontSize: 18,
296
296
  lineHeight: 26
297
297
  ),
298
298
  expressive-preamble01semibold: (
299
- fontFamily: "DN Serif 22",
299
+ fontFamily: "DN Serif 24",
300
300
  fontWeight: SemiBold,
301
301
  fontSize: 18,
302
302
  lineHeight: 26
303
303
  ),
304
304
  expressive-preamble01bold: (
305
- fontFamily: "DN Serif 22",
305
+ fontFamily: "DN Serif 24",
306
306
  fontWeight: Bold,
307
307
  fontSize: 18,
308
308
  lineHeight: 26
309
309
  ),
310
310
  expressive-preamble01italicregular: (
311
- fontFamily: "DN Serif Italic 22",
311
+ fontFamily: "DN Serif Italic 24",
312
312
  fontWeight: Regular,
313
313
  fontSize: 18,
314
314
  lineHeight: 26,
315
315
  fontStyle: italic
316
316
  ),
317
317
  expressive-preamble01italicsemibold: (
318
- fontFamily: "DN Serif Italic 22",
318
+ fontFamily: "DN Serif Italic 24",
319
319
  fontWeight: SemiBold,
320
320
  fontSize: 18,
321
321
  lineHeight: 26,
322
322
  fontStyle: italic
323
323
  ),
324
324
  expressive-preamble01italicbold: (
325
- fontFamily: "DN Serif Italic 22",
325
+ fontFamily: "DN Serif Italic 24",
326
326
  fontWeight: Bold,
327
327
  fontSize: 18,
328
328
  lineHeight: 26,
329
329
  fontStyle: italic
330
330
  ),
331
331
  expressive-body01regular: (
332
- fontFamily: "DN Serif 22",
332
+ fontFamily: "DN Serif 24",
333
333
  fontWeight: Regular,
334
334
  fontSize: 16,
335
335
  lineHeight: 24
336
336
  ),
337
337
  expressive-body01semibold: (
338
- fontFamily: "DN Serif 22",
338
+ fontFamily: "DN Serif 24",
339
339
  fontWeight: SemiBold,
340
340
  fontSize: 16,
341
341
  lineHeight: 24
342
342
  ),
343
343
  expressive-body01bold: (
344
- fontFamily: "DN Serif 22",
344
+ fontFamily: "DN Serif 24",
345
345
  fontWeight: Bold,
346
346
  fontSize: 16,
347
347
  lineHeight: 24
348
348
  ),
349
349
  expressive-body01italicregular: (
350
- fontFamily: "DN Serif Italic 22",
350
+ fontFamily: "DN Serif Italic 24",
351
351
  fontWeight: Regular,
352
352
  lineHeight: 24,
353
353
  fontSize: 16,
354
354
  fontStyle: italic
355
355
  ),
356
356
  expressive-body01italicsemibold: (
357
- fontFamily: "DN Serif Italic 22",
357
+ fontFamily: "DN Serif Italic 24",
358
358
  fontWeight: SemiBold,
359
359
  lineHeight: 24,
360
360
  fontSize: 16,
361
361
  fontStyle: italic
362
362
  ),
363
363
  expressive-body01italicbold: (
364
- fontFamily: "DN Serif Italic 22",
364
+ fontFamily: "DN Serif Italic 24",
365
365
  fontWeight: Bold,
366
366
  lineHeight: 24,
367
367
  fontSize: 16,
368
368
  fontStyle: italic
369
369
  ),
370
370
  expressive-body02regular: (
371
- fontFamily: "DN Serif 22",
371
+ fontFamily: "DN Serif 24",
372
372
  fontWeight: Regular,
373
373
  lineHeight: 28,
374
374
  fontSize: 18,
375
375
  paragraphSpacing: 16
376
376
  ),
377
377
  expressive-body02semibold: (
378
- fontFamily: "DN Serif 22",
378
+ fontFamily: "DN Serif 24",
379
379
  fontWeight: SemiBold,
380
380
  lineHeight: 28,
381
381
  fontSize: 18
382
382
  ),
383
383
  expressive-body02bold: (
384
- fontFamily: "DN Serif 22",
384
+ fontFamily: "DN Serif 24",
385
385
  fontWeight: Bold,
386
386
  lineHeight: 28,
387
387
  fontSize: 18
388
388
  ),
389
389
  expressive-body02italicregular: (
390
- fontFamily: "DN Serif Italic 22",
390
+ fontFamily: "DN Serif Italic 24",
391
391
  fontWeight: Regular,
392
392
  lineHeight: 28,
393
393
  fontSize: 18,
394
394
  fontStyle: italic
395
395
  ),
396
396
  expressive-body02italicsemibold: (
397
- fontFamily: "DN Serif Italic 22",
397
+ fontFamily: "DN Serif Italic 24",
398
398
  fontWeight: SemiBold,
399
399
  lineHeight: 28,
400
400
  fontSize: 18,
401
401
  fontStyle: italic
402
402
  ),
403
403
  expressive-body02italicbold: (
404
- fontFamily: "DN Serif Italic 22",
404
+ fontFamily: "DN Serif Italic 24",
405
405
  fontWeight: Bold,
406
406
  lineHeight: 28,
407
407
  fontSize: 18,
@@ -515,7 +515,7 @@ $typographyTokensScreenSmall: (
515
515
  letterSpacing: 0.2
516
516
  ),
517
517
  detaildropcap: (
518
- fontFamily: "DN Serif 22",
518
+ fontFamily: "DN Serif 24",
519
519
  lineHeight: 52,
520
520
  fontSize: 52,
521
521
  fontWeight: Bold
@@ -535,7 +535,7 @@ $typographyTokensScreenSmall: (
535
535
  letterSpacing: 0.5
536
536
  ),
537
537
  detailmedryckare: (
538
- fontFamily: "DN Serif 22",
538
+ fontFamily: "DN Serif 24",
539
539
  fontWeight: Regular,
540
540
  fontSize: 16,
541
541
  lineHeight: 22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.11",
3
+ "version": "3.0.0-alpha.13",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
@@ -20,7 +20,7 @@
20
20
  "stylelint": "^14.14.0",
21
21
  "stylelint-config-prettier": "^9.0.3",
22
22
  "stylelint-config-standard": "^29.0.0",
23
- "stylelint-config-standard-scss": "^6.0.0",
23
+ "stylelint-config-standard-scss": "^7.0.1",
24
24
  "stylelint-prettier": "^2.0.0",
25
25
  "stylelint-sass-render-errors": "^3.0.0",
26
26
  "stylelint-selector-bem-pattern": "^2.1.1"
package/tokens/colors-css-variables.json CHANGED
@@ -33,6 +33,7 @@
33
33
  "component-critical-overlay": "var(--ds-color-component-critical-overlay)",
34
34
  "component-static-white": "var(--ds-color-component-static-white)",
35
35
  "component-positive": "var(--ds-color-component-positive)",
36
+ "component-primary-02": "var(--ds-color-component-primary-02)",
36
37
  "surface-below": "var(--ds-color-surface-below)",
37
38
  "surface-native-article": "var(--ds-color-surface-native-article)",
38
39
  "surface-background": "var(--ds-color-surface-background)",
@@ -63,6 +64,8 @@
63
64
  "static-neutral-200": "var(--ds-color-static-neutral-200)",
64
65
  "static-sthlm": "var(--ds-color-static-sthlm)",
65
66
  "static-ad-yellow": "var(--ds-color-static-ad-yellow)",
67
+ "static-neutral-100": "var(--ds-color-static-neutral-100)",
68
+ "static-neutral-500": "var(--ds-color-static-neutral-500)",
66
69
  "gradient-content-fade-left": "var(--ds-color-gradient-content-fade-left)",
67
70
  "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
68
71
  "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",