@bonniernews/dn-design-system-web 3.0.0-alpha.0 → 3.0.0-alpha.2

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 (12) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/foundations/helpers/spacing.scss +2 -2
  3. package/foundations/helpers/typography.scss +8 -9
  4. package/foundations/typography/fontDefinitions.scss +32 -32
  5. package/foundations/variables/colorsCssVariables.scss +1 -0
  6. package/foundations/variables/colorsDnDarkTokens.scss +1 -0
  7. package/foundations/variables/colorsDnLightTokens.scss +1 -0
  8. package/foundations/variables/spacingLayout.scss +1 -8
  9. package/foundations/variables/typographyTokensScreenLarge.scss +92 -92
  10. package/foundations/variables/typographyTokensScreenSmall.scss +76 -76
  11. package/package.json +1 -1
  12. package/tokens/colors-css-variables.json +1 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.1...@bonniernews/dn-design-system-web@3.0.0-alpha.2) (2023-03-06)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **web:** use large screen spacing on tablet ([#718](https://github.com/BonnierNews/dn-design-system/issues/718)) ([42f6dc7](https://github.com/BonnierNews/dn-design-system/commit/42f6dc79c03f2cca823921b07d9ec5855628625a))
12
+
13
+
14
+
15
+ ## [3.0.0-alpha.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.0...@bonniernews/dn-design-system-web@3.0.0-alpha.1) (2023-03-06)
16
+
17
+
18
+ ### ⚠ BREAKING CHANGES
19
+
20
+ * **foundations:** update tokens from Figma (#713)
21
+
22
+ ### Miscellaneous Chores
23
+
24
+ * **foundations:** update tokens from Figma ([#713](https://github.com/BonnierNews/dn-design-system/issues/713)) ([7076264](https://github.com/BonnierNews/dn-design-system/commit/7076264e88601032c525274440c16aa162e3ee61))
25
+
26
+
27
+
6
28
  ## [3.0.0-alpha.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.22...@bonniernews/dn-design-system-web@3.0.0-alpha.0) (2023-03-03)
7
29
 
8
30
 
package/foundations/helpers/spacing.scss CHANGED
@@ -26,7 +26,7 @@
26
26
  ) {
27
27
  @if $units {
28
28
  $values: _ds-get-spacings($spacingLayout, $units, $sizeUnit, $negative);
29
- @include ds-mq-largest-breakpoint(tablet) {
29
+ @include ds-mq-largest-breakpoint(mobile) {
30
30
  #{$property}: $values;
31
31
  }
32
32
  $valuesLargeScreen: _ds-get-spacings(
@@ -35,7 +35,7 @@
35
35
  $sizeUnit,
36
36
  $negative
37
37
  );
38
- @include ds-mq-smallest-breakpoint(desktop) {
38
+ @include ds-mq-smallest-breakpoint(tablet) {
39
39
  #{$property}: $valuesLargeScreen;
40
40
  }
41
41
  }
package/foundations/helpers/typography.scss CHANGED
@@ -50,21 +50,20 @@ $dsSansWeights: (
50
50
  light: 300,
51
51
  regular: 400,
52
52
  medium: 500,
53
- bold: 700,
54
53
  semibold: 600,
54
+ bold: 700,
55
55
  extrabold: 800,
56
56
  black: 900,
57
57
  );
58
58
 
59
- // @todo fix how we handle weight for serif, current span is 86-180
60
59
  $dsSerifWeights: (
61
- light: 86,
62
- regular: 104,
63
- medium: 126,
64
- semibold: 142,
65
- bold: 150,
66
- extrabold: 170,
67
- black: 180,
60
+ light: 300,
61
+ regular: 400,
62
+ medium: 500,
63
+ semibold: 600,
64
+ bold: 700,
65
+ extrabold: 800,
66
+ black: 900,
68
67
  );
69
68
 
70
69
  // Serif variation changes, text 18px, headline 26px, display 34px. As fallback we will always use headline
package/foundations/typography/fontDefinitions.scss CHANGED
@@ -3,22 +3,22 @@ $dnSerif: (
3
3
  fontFamily: DNSerifVf,
4
4
  sources: (
5
5
  (
6
- file: "DNSerif21-Variable.woff2",
6
+ file: "DNSerif22-Variable.woff2",
7
7
  format: "woff2-variations",
8
8
  ),
9
9
  ),
10
- fontWeight: 86 180,
10
+ fontWeight: 300 900,
11
11
  fontDisplay: swap,
12
12
  ),
13
13
  (
14
14
  fontFamily: DNSerif,
15
15
  sources: (
16
16
  (
17
- file: "DNSerifHeadline21-Light.woff2",
17
+ file: "DNSerifHeadline22-Light.woff2",
18
18
  format: "woff2",
19
19
  ),
20
20
  (
21
- file: "DNSerifHeadline21-Light.woff",
21
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-Regular.woff2",
32
+ file: "DNSerifHeadline22-Regular.woff2",
33
33
  format: "woff2",
34
34
  ),
35
35
  (
36
- file: "DNSerifHeadline21-Regular.woff",
36
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-Medium.woff2",
47
+ file: "DNSerifHeadline22-Medium.woff2",
48
48
  format: "woff2",
49
49
  ),
50
50
  (
51
- file: "DNSerifHeadline21-Medium.woff",
51
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-SemiBold.woff2",
62
+ file: "DNSerifHeadline22-SemiBold.woff2",
63
63
  format: "woff2",
64
64
  ),
65
65
  (
66
- file: "DNSerifHeadline21-SemiBold.woff",
66
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-Bold.woff2",
77
+ file: "DNSerifHeadline22-Bold.woff2",
78
78
  format: "woff2",
79
79
  ),
80
80
  (
81
- file: "DNSerifHeadline21-Bold.woff",
81
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-ExtraBold.woff2",
92
+ file: "DNSerifHeadline22-ExtraBold.woff2",
93
93
  format: "woff2",
94
94
  ),
95
95
  (
96
- file: "DNSerifHeadline21-ExtraBold.woff",
96
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-Black.woff2",
107
+ file: "DNSerifHeadline22-Black.woff2",
108
108
  format: "woff2",
109
109
  ),
110
110
  (
111
- file: "DNSerifHeadline21-Black.woff",
111
+ file: "DNSerifHeadline22-Black.woff",
112
112
  format: "woff",
113
113
  ),
114
114
  ),
@@ -122,11 +122,11 @@ $dnSerifItalic: (
122
122
  fontFamily: DNSerifVf,
123
123
  sources: (
124
124
  (
125
- file: "DNSerifItalic21-Variable.woff2",
125
+ file: "DNSerifItalic22-Variable.woff2",
126
126
  format: "woff2-variations",
127
127
  ),
128
128
  ),
129
- fontWeight: 86 180,
129
+ fontWeight: 300 900,
130
130
  fontStyle: italic,
131
131
  fontDisplay: swap,
132
132
  ),
@@ -134,11 +134,11 @@ $dnSerifItalic: (
134
134
  fontFamily: DNSerif,
135
135
  sources: (
136
136
  (
137
- file: "DNSerifHeadline21-LightItalic.woff2",
137
+ file: "DNSerifHeadline22-LightItalic.woff2",
138
138
  format: "woff2",
139
139
  ),
140
140
  (
141
- file: "DNSerifHeadline21-LightItalic.woff",
141
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-RegularItalic.woff2",
153
+ file: "DNSerifHeadline22-RegularItalic.woff2",
154
154
  format: "woff2",
155
155
  ),
156
156
  (
157
- file: "DNSerifHeadline21-RegularItalic.woff",
157
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-MediumItalic.woff2",
169
+ file: "DNSerifHeadline22-MediumItalic.woff2",
170
170
  format: "woff2",
171
171
  ),
172
172
  (
173
- file: "DNSerifHeadline21-MediumItalic.woff",
173
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-SemiBoldItalic.woff2",
185
+ file: "DNSerifHeadline22-SemiBoldItalic.woff2",
186
186
  format: "woff2",
187
187
  ),
188
188
  (
189
- file: "DNSerifHeadline21-SemiBoldItalic.woff",
189
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-BoldItalic.woff2",
201
+ file: "DNSerifHeadline22-BoldItalic.woff2",
202
202
  format: "woff2",
203
203
  ),
204
204
  (
205
- file: "DNSerifHeadline21-BoldItalic.woff",
205
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-ExtraBoldItalic.woff2",
217
+ file: "DNSerifHeadline22-ExtraBoldItalic.woff2",
218
218
  format: "woff2",
219
219
  ),
220
220
  (
221
- file: "DNSerifHeadline21-ExtraBoldItalic.woff",
221
+ file: "DNSerifHeadline22-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: "DNSerifHeadline21-BlackItalic.woff2",
233
+ file: "DNSerifHeadline22-BlackItalic.woff2",
234
234
  format: "woff2",
235
235
  ),
236
236
  (
237
- file: "DNSerifHeadline21-BlackItalic.woff",
237
+ file: "DNSerifHeadline22-BlackItalic.woff",
238
238
  format: "woff",
239
239
  ),
240
240
  ),
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -33,6 +33,7 @@ $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
35
  $ds-color-surface-below: var(--ds-color-surface-below);
36
+ $ds-color-surface-native-article: var(--ds-color-surface-native-article);
36
37
  $ds-color-surface-background: var(--ds-color-surface-background);
37
38
  $ds-color-surface-raised: var(--ds-color-surface-raised);
38
39
  $ds-color-surface-elevated: var(--ds-color-surface-elevated);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -35,6 +35,7 @@ $ds-hex-dark-component-positive: #3A8352;
35
35
  $ds-hex-dark-surface-below: #050505;
36
36
  $ds-hex-dark-surface-background: #141414;
37
37
  $ds-hex-dark-surface-raised: #2B2B2B;
38
+ $ds-hex-dark-surface-native-article: #2B2B2B;
38
39
  $ds-hex-dark-surface-elevated: #2B2B2B;
39
40
  $ds-hex-dark-border-primary: #ffffff1a;
40
41
  $ds-hex-dark-border-primary-02: #ffffff66;
package/foundations/variables/colorsDnLightTokens.scss CHANGED
@@ -33,6 +33,7 @@ $ds-hex-component-critical-overlay: #A51D24;
33
33
  $ds-hex-component-static-white: #ffffff;
34
34
  $ds-hex-component-positive: #3A8352;
35
35
  $ds-hex-surface-below: #EDEDED;
36
+ $ds-hex-surface-native-article: #EDEDED;
36
37
  $ds-hex-surface-background: #ffffff;
37
38
  $ds-hex-surface-raised: #EDEDED;
38
39
  $ds-hex-surface-elevated: #ffffff;
package/foundations/variables/spacingLayout.scss CHANGED
@@ -6,12 +6,5 @@ $spacingLayout: (
6
6
  gap-vertical-static-medium: 16,
7
7
  gap-vertical-static-large: 32,
8
8
  gap-horizontal-static-small: 8,
9
- gap-vertical-static-small: 8,
10
- x1: 8,
11
- x2: 16,
12
- x3: 24,
13
- x4: 32,
14
- x5: 40,
15
- x6: 48,
16
- x8: 64
9
+ gap-vertical-static-small: 8
17
10
  );
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -1,18 +1,18 @@
1
1
  $typographyTokensScreenLarge: (
2
2
  expressive-heading01regular: (
3
- fontFamily: "DN Serif 21",
3
+ fontFamily: "DN Serif 22",
4
4
  fontWeight: Regular,
5
5
  fontSize: 16,
6
6
  lineHeight: 20
7
7
  ),
8
8
  expressive-heading01medium: (
9
- fontFamily: "DN Serif 21",
9
+ fontFamily: "DN Serif 22",
10
10
  fontWeight: Medium,
11
11
  fontSize: 16,
12
12
  lineHeight: 20
13
13
  ),
14
14
  expressive-heading01bold: (
15
- fontFamily: "DN Serif 21",
15
+ fontFamily: "DN Serif 22",
16
16
  fontWeight: Bold,
17
17
  fontSize: 16,
18
18
  lineHeight: 20
@@ -20,179 +20,179 @@ $typographyTokensScreenLarge: (
20
20
  expressive-heading01italicregular: (
21
21
  lineHeight: 20,
22
22
  fontSize: 16,
23
- fontFamily: "DN Serif Italic 21",
23
+ fontFamily: "DN Serif Italic 22",
24
24
  fontWeight: Regular,
25
25
  fontStyle: italic
26
26
  ),
27
27
  expressive-heading01italicmedium: (
28
28
  lineHeight: 20,
29
29
  fontSize: 16,
30
- fontFamily: "DN Serif Italic 21",
30
+ fontFamily: "DN Serif Italic 22",
31
31
  fontWeight: Medium,
32
32
  fontStyle: italic
33
33
  ),
34
34
  expressive-heading01italicbold: (
35
35
  lineHeight: 20,
36
36
  fontSize: 16,
37
- fontFamily: "DN Serif Italic 21",
37
+ fontFamily: "DN Serif Italic 22",
38
38
  fontWeight: Bold,
39
39
  fontStyle: italic
40
40
  ),
41
41
  expressive-heading02regular: (
42
- fontFamily: "DN Serif 21",
42
+ fontFamily: "DN Serif 22",
43
43
  fontWeight: Regular,
44
- fontSize: 20,
45
- lineHeight: 24,
44
+ fontSize: 22,
45
+ lineHeight: 26,
46
46
  paragraphSpacing: 16
47
47
  ),
48
48
  expressive-heading02medium: (
49
- fontFamily: "DN Serif 21",
49
+ fontFamily: "DN Serif 22",
50
50
  fontWeight: Medium,
51
- fontSize: 20,
52
- lineHeight: 24
51
+ fontSize: 22,
52
+ lineHeight: 26
53
53
  ),
54
54
  expressive-heading02bold: (
55
- fontFamily: "DN Serif 21",
55
+ fontFamily: "DN Serif 22",
56
56
  fontWeight: Bold,
57
- fontSize: 20,
58
- lineHeight: 24
57
+ fontSize: 22,
58
+ lineHeight: 26
59
59
  ),
60
60
  expressive-heading02italicregular: (
61
- fontSize: 20,
62
- lineHeight: 24,
61
+ fontSize: 22,
62
+ lineHeight: 26,
63
63
  fontWeight: Regular,
64
- fontFamily: "DN Serif Italic 21",
64
+ fontFamily: "DN Serif Italic 22",
65
65
  fontStyle: italic
66
66
  ),
67
67
  expressive-heading02italicmedium: (
68
- fontSize: 20,
69
- lineHeight: 24,
68
+ fontSize: 22,
69
+ lineHeight: 26,
70
70
  fontWeight: Medium,
71
- fontFamily: "DN Serif Italic 21",
71
+ fontFamily: "DN Serif Italic 22",
72
72
  fontStyle: italic
73
73
  ),
74
74
  expressive-heading02italicbold: (
75
- fontSize: 20,
76
- lineHeight: 24,
75
+ fontSize: 22,
76
+ lineHeight: 26,
77
77
  fontWeight: Bold,
78
- fontFamily: "DN Serif Italic 21",
78
+ fontFamily: "DN Serif Italic 22",
79
79
  fontStyle: italic
80
80
  ),
81
81
  expressive-heading03regular: (
82
- fontFamily: "DN Serif 21",
82
+ fontFamily: "DN Serif 22",
83
83
  fontWeight: Regular,
84
- fontSize: 26,
85
- lineHeight: 32
84
+ fontSize: 32,
85
+ lineHeight: 36
86
86
  ),
87
87
  expressive-heading03medium: (
88
- fontFamily: "DN Serif 21",
88
+ fontFamily: "DN Serif 22",
89
89
  fontWeight: Medium,
90
- fontSize: 26,
91
- lineHeight: 32
90
+ fontSize: 32,
91
+ lineHeight: 36
92
92
  ),
93
93
  expressive-heading03bold: (
94
- fontFamily: "DN Serif 21",
94
+ fontFamily: "DN Serif 22",
95
95
  fontWeight: Bold,
96
- fontSize: 26,
97
- lineHeight: 32
96
+ fontSize: 32,
97
+ lineHeight: 36
98
98
  ),
99
99
  expressive-heading03italicregular: (
100
- fontSize: 26,
101
- lineHeight: 32,
100
+ fontSize: 32,
101
+ lineHeight: 36,
102
102
  fontWeight: Regular,
103
- fontFamily: "DN Serif Italic 21",
103
+ fontFamily: "DN Serif Italic 22",
104
104
  fontStyle: italic
105
105
  ),
106
106
  expressive-heading03italicmedium: (
107
- fontSize: 26,
108
- lineHeight: 32,
107
+ fontSize: 32,
108
+ lineHeight: 36,
109
109
  fontWeight: Medium,
110
- fontFamily: "DN Serif Italic 21",
110
+ fontFamily: "DN Serif Italic 22",
111
111
  fontStyle: italic
112
112
  ),
113
113
  expressive-heading03italicbold: (
114
- fontSize: 26,
115
- lineHeight: 32,
114
+ fontSize: 32,
115
+ lineHeight: 36,
116
116
  fontWeight: Bold,
117
- fontFamily: "DN Serif Italic 21",
117
+ fontFamily: "DN Serif Italic 22",
118
118
  fontStyle: italic
119
119
  ),
120
120
  expressive-heading04regular: (
121
- fontFamily: "DN Serif 21",
121
+ fontFamily: "DN Serif 22",
122
122
  fontWeight: Regular,
123
- fontSize: 48,
124
- lineHeight: 56
123
+ fontSize: 52,
124
+ lineHeight: 48
125
125
  ),
126
126
  expressive-heading04medium: (
127
- fontFamily: "DN Serif 21",
127
+ fontFamily: "DN Serif 22",
128
128
  fontWeight: Medium,
129
129
  fontSize: 48,
130
- lineHeight: 56
130
+ lineHeight: 52
131
131
  ),
132
132
  expressive-heading04bold: (
133
- fontFamily: "DN Serif 21",
133
+ fontFamily: "DN Serif 22",
134
134
  fontWeight: Bold,
135
135
  fontSize: 48,
136
- lineHeight: 56
136
+ lineHeight: 52
137
137
  ),
138
138
  expressive-heading04italicregular: (
139
139
  fontSize: 48,
140
- lineHeight: 56,
140
+ lineHeight: 52,
141
141
  fontWeight: Regular,
142
- fontFamily: "DN Serif Italic 21",
142
+ fontFamily: "DN Serif Italic 22",
143
143
  fontStyle: italic
144
144
  ),
145
145
  expressive-heading04italicmedium: (
146
146
  fontSize: 48,
147
- lineHeight: 56,
147
+ lineHeight: 52,
148
148
  fontWeight: Medium,
149
- fontFamily: "DN Serif Italic 21",
149
+ fontFamily: "DN Serif Italic 22",
150
150
  fontStyle: italic
151
151
  ),
152
152
  expressive-heading04italicbold: (
153
153
  fontSize: 48,
154
- lineHeight: 56,
154
+ lineHeight: 52,
155
155
  fontWeight: Bold,
156
- fontFamily: "DN Serif Italic 21",
156
+ fontFamily: "DN Serif Italic 22",
157
157
  fontStyle: italic
158
158
  ),
159
159
  expressive-heading05regular: (
160
- fontFamily: "DN Serif 21",
160
+ fontFamily: "DN Serif 22",
161
161
  fontWeight: Regular,
162
- lineHeight: 56,
163
- fontSize: 48
162
+ lineHeight: 64,
163
+ fontSize: 56
164
164
  ),
165
165
  expressive-heading05medium: (
166
- fontFamily: "DN Serif 21",
166
+ fontFamily: "DN Serif 22",
167
167
  fontWeight: Medium,
168
- lineHeight: 56,
169
- fontSize: 39
168
+ lineHeight: 64,
169
+ fontSize: 56
170
170
  ),
171
171
  expressive-heading05bold: (
172
- fontFamily: "DN Serif 21",
172
+ fontFamily: "DN Serif 22",
173
173
  fontWeight: Bold,
174
- lineHeight: 56,
175
- fontSize: 48
174
+ lineHeight: 64,
175
+ fontSize: 56
176
176
  ),
177
177
  expressive-heading05italicregular: (
178
- fontFamily: "DN Serif Italic 21",
178
+ fontFamily: "DN Serif Italic 22",
179
179
  fontWeight: Regular,
180
- fontSize: 48,
181
- lineHeight: 56,
180
+ fontSize: 56,
181
+ lineHeight: 64,
182
182
  fontStyle: italic
183
183
  ),
184
184
  expressive-heading05italicmedium: (
185
- fontFamily: "DN Serif Italic 21",
185
+ fontFamily: "DN Serif Italic 22",
186
186
  fontWeight: Medium,
187
- fontSize: 48,
188
- lineHeight: 56,
187
+ fontSize: 56,
188
+ lineHeight: 64,
189
189
  fontStyle: italic
190
190
  ),
191
191
  expressive-heading05italicbold: (
192
- fontFamily: "DN Serif Italic 21",
192
+ fontFamily: "DN Serif Italic 22",
193
193
  fontWeight: Bold,
194
- fontSize: 48,
195
- lineHeight: 56,
194
+ fontSize: 56,
195
+ lineHeight: 64,
196
196
  fontStyle: italic
197
197
  ),
198
198
  functional-heading01regular: (
@@ -286,117 +286,117 @@ $typographyTokensScreenLarge: (
286
286
  lineHeight: 48
287
287
  ),
288
288
  expressive-paragraph01regular: (
289
- fontFamily: "DN Serif 21",
289
+ fontFamily: "DN Serif 22",
290
290
  fontWeight: Regular,
291
291
  fontSize: 20,
292
292
  lineHeight: 28
293
293
  ),
294
294
  expressive-paragraph01medium: (
295
- fontFamily: "DN Serif 21",
295
+ fontFamily: "DN Serif 22",
296
296
  fontWeight: Medium,
297
297
  fontSize: 20,
298
298
  lineHeight: 28
299
299
  ),
300
300
  expressive-paragraph01bold: (
301
- fontFamily: "DN Serif 21",
301
+ fontFamily: "DN Serif 22",
302
302
  fontWeight: Bold,
303
303
  fontSize: 20,
304
304
  lineHeight: 28
305
305
  ),
306
306
  expressive-paragraph01italicregular: (
307
- fontFamily: "DN Serif Italic 21",
307
+ fontFamily: "DN Serif Italic 22",
308
308
  fontWeight: Regular,
309
309
  lineHeight: 28,
310
310
  fontSize: 20,
311
311
  fontStyle: italic
312
312
  ),
313
313
  expressive-paragraph01italicmedium: (
314
- fontFamily: "DN Serif Italic 21",
314
+ fontFamily: "DN Serif Italic 22",
315
315
  fontWeight: Medium,
316
316
  lineHeight: 28,
317
317
  fontSize: 20,
318
318
  fontStyle: italic
319
319
  ),
320
320
  expressive-paragraph01italicbold: (
321
- fontFamily: "DN Serif Italic 21",
321
+ fontFamily: "DN Serif Italic 22",
322
322
  fontWeight: Bold,
323
323
  lineHeight: 28,
324
324
  fontSize: 20,
325
325
  fontStyle: italic
326
326
  ),
327
327
  expressive-body01regular: (
328
- fontFamily: "DN Serif 21",
328
+ fontFamily: "DN Serif 22",
329
329
  fontWeight: Regular,
330
330
  fontSize: 16,
331
331
  lineHeight: 24
332
332
  ),
333
333
  expressive-body01medium: (
334
- fontFamily: "DN Serif 21",
334
+ fontFamily: "DN Serif 22",
335
335
  fontWeight: Medium,
336
336
  fontSize: 16,
337
337
  lineHeight: 24
338
338
  ),
339
339
  expressive-body01bold: (
340
- fontFamily: "DN Serif 21",
340
+ fontFamily: "DN Serif 22",
341
341
  fontWeight: Bold,
342
342
  fontSize: 16,
343
343
  lineHeight: 24
344
344
  ),
345
345
  expressive-body01italicregular: (
346
- fontFamily: "DN Serif Italic 21",
346
+ fontFamily: "DN Serif Italic 22",
347
347
  fontWeight: Regular,
348
348
  lineHeight: 24,
349
349
  fontSize: 18,
350
350
  fontStyle: italic
351
351
  ),
352
352
  expressive-body01italicmedium: (
353
- fontFamily: "DN Serif Italic 21",
353
+ fontFamily: "DN Serif Italic 22",
354
354
  fontWeight: Medium,
355
355
  lineHeight: 24,
356
356
  fontSize: 18,
357
357
  fontStyle: italic
358
358
  ),
359
359
  expressive-body01italicbold: (
360
- fontFamily: "DN Serif Italic 21",
360
+ fontFamily: "DN Serif Italic 22",
361
361
  fontWeight: Bold,
362
362
  lineHeight: 24,
363
363
  fontSize: 18,
364
364
  fontStyle: italic
365
365
  ),
366
366
  expressive-body02regular: (
367
- fontFamily: "DN Serif 21",
367
+ fontFamily: "DN Serif 22",
368
368
  fontWeight: Regular,
369
369
  lineHeight: 26,
370
370
  fontSize: 18
371
371
  ),
372
372
  expressive-body02medium: (
373
- fontFamily: "DN Serif 21",
373
+ fontFamily: "DN Serif 22",
374
374
  fontWeight: Medium,
375
375
  lineHeight: 28,
376
376
  fontSize: 18
377
377
  ),
378
378
  expressive-body02bold: (
379
- fontFamily: "DN Serif 21",
379
+ fontFamily: "DN Serif 22",
380
380
  fontWeight: Bold,
381
381
  lineHeight: 26,
382
382
  fontSize: 18
383
383
  ),
384
384
  expressive-body02italicregular: (
385
- fontFamily: "DN Serif Italic 21",
385
+ fontFamily: "DN Serif Italic 22",
386
386
  fontWeight: Regular,
387
387
  lineHeight: 26,
388
388
  fontSize: 18,
389
389
  fontStyle: italic
390
390
  ),
391
391
  expressive-body02italicmedium: (
392
- fontFamily: "DN Serif Italic 21",
392
+ fontFamily: "DN Serif Italic 22",
393
393
  fontWeight: Medium,
394
394
  lineHeight: 26,
395
395
  fontSize: 18,
396
396
  fontStyle: italic
397
397
  ),
398
398
  expressive-body02italicbold: (
399
- fontFamily: "DN Serif Italic 21",
399
+ fontFamily: "DN Serif Italic 22",
400
400
  fontWeight: Bold,
401
401
  lineHeight: 26,
402
402
  fontSize: 18,
@@ -497,7 +497,7 @@ $typographyTokensScreenLarge: (
497
497
  fontSize: 12
498
498
  ),
499
499
  detaildropcap: (
500
- fontFamily: "DN Serif 21",
500
+ fontFamily: "DN Serif 22",
501
501
  fontWeight: Bold,
502
502
  lineHeight: 78,
503
503
  fontSize: 92
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -1,24 +1,24 @@
1
1
  $typographyTokensScreenSmall: (
2
2
  expressive-heading01regular: (
3
- fontFamily: "DN Serif 21",
3
+ fontFamily: "DN Serif 22",
4
4
  fontWeight: Regular,
5
5
  fontSize: 16,
6
6
  lineHeight: 20
7
7
  ),
8
8
  expressive-heading01medium: (
9
- fontFamily: "DN Serif 21",
9
+ fontFamily: "DN Serif 22",
10
10
  fontWeight: Medium,
11
11
  fontSize: 16,
12
12
  lineHeight: 20
13
13
  ),
14
14
  expressive-heading01bold: (
15
- fontFamily: "DN Serif 21",
15
+ fontFamily: "DN Serif 22",
16
16
  fontWeight: Bold,
17
17
  fontSize: 16,
18
18
  lineHeight: 20
19
19
  ),
20
20
  expressive-heading01italicregular: (
21
- fontFamily: "DN Serif Italic 21",
21
+ fontFamily: "DN Serif Italic 22",
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-heading01italicmedium: (
29
- fontFamily: "DN Serif Italic 21",
29
+ fontFamily: "DN Serif Italic 22",
30
30
  fontWeight: Medium,
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 21",
37
+ fontFamily: "DN Serif Italic 22",
38
38
  fontWeight: Bold,
39
39
  fontSize: 16,
40
40
  letterSpacing: "",
@@ -42,161 +42,161 @@ $typographyTokensScreenSmall: (
42
42
  fontStyle: italic
43
43
  ),
44
44
  expressive-heading02regular: (
45
- fontFamily: "DN Serif 21",
45
+ fontFamily: "DN Serif 22",
46
46
  fontWeight: Regular,
47
47
  fontSize: 18,
48
- lineHeight: 20
48
+ lineHeight: 24
49
49
  ),
50
50
  expressive-heading02medium: (
51
- fontFamily: "DN Serif 21",
51
+ fontFamily: "DN Serif 22",
52
52
  fontWeight: Medium,
53
53
  fontSize: 18,
54
- lineHeight: 20
54
+ lineHeight: 24
55
55
  ),
56
56
  expressive-heading02bold: (
57
- fontFamily: "DN Serif 21",
57
+ fontFamily: "DN Serif 22",
58
58
  fontWeight: Bold,
59
59
  fontSize: 18,
60
- lineHeight: 20
60
+ lineHeight: 24
61
61
  ),
62
62
  expressive-heading02italicregular: (
63
- fontFamily: "DN Serif Italic 21",
63
+ fontFamily: "DN Serif Italic 22",
64
64
  fontWeight: Regular,
65
- fontSize: 16,
66
- lineHeight: 20,
65
+ fontSize: 18,
66
+ lineHeight: 24,
67
67
  fontStyle: italic
68
68
  ),
69
69
  expressive-heading02italicmedium: (
70
- fontFamily: "DN Serif Italic 21",
70
+ fontFamily: "DN Serif Italic 22",
71
71
  fontWeight: Medium,
72
- fontSize: 16,
73
- lineHeight: 20,
72
+ fontSize: 18,
73
+ lineHeight: 24,
74
74
  fontStyle: italic
75
75
  ),
76
76
  expressive-heading02italicbold: (
77
- fontFamily: "DN Serif Italic 21",
77
+ fontFamily: "DN Serif Italic 22",
78
78
  fontWeight: Bold,
79
- fontSize: 16,
80
- lineHeight: 20,
79
+ fontSize: 18,
80
+ lineHeight: 24,
81
81
  fontStyle: italic
82
82
  ),
83
83
  expressive-heading03regular: (
84
- fontFamily: "DN Serif 21",
84
+ fontFamily: "DN Serif 22",
85
85
  fontWeight: Regular,
86
- fontSize: 21,
87
- lineHeight: 24
86
+ fontSize: 22,
87
+ lineHeight: 26
88
88
  ),
89
89
  expressive-heading03medium: (
90
- fontFamily: "DN Serif 21",
90
+ fontFamily: "DN Serif 22",
91
91
  fontWeight: Medium,
92
- fontSize: 21,
93
- lineHeight: 28
92
+ fontSize: 22,
93
+ lineHeight: 26
94
94
  ),
95
95
  expressive-heading03bold: (
96
- fontFamily: "DN Serif 21",
96
+ fontFamily: "DN Serif 22",
97
97
  fontWeight: Bold,
98
- fontSize: 21,
99
- lineHeight: 28
98
+ fontSize: 22,
99
+ lineHeight: 26
100
100
  ),
101
101
  expressive-heading03italicregular: (
102
- fontFamily: "DN Serif Italic 21",
103
- fontSize: 16,
104
- lineHeight: 20,
102
+ fontFamily: "DN Serif Italic 22",
103
+ fontSize: 22,
104
+ lineHeight: 26,
105
105
  fontWeight: Regular,
106
106
  fontStyle: italic
107
107
  ),
108
108
  expressive-heading03italicmedium: (
109
- fontFamily: "DN Serif Italic 21",
110
- fontSize: 16,
111
- lineHeight: 20,
109
+ fontFamily: "DN Serif Italic 22",
110
+ fontSize: 22,
111
+ lineHeight: 26,
112
112
  fontWeight: Medium,
113
113
  fontStyle: italic
114
114
  ),
115
115
  expressive-heading03italicbold: (
116
- fontFamily: "DN Serif Italic 21",
117
- fontSize: 16,
118
- lineHeight: 20,
116
+ fontFamily: "DN Serif Italic 22",
117
+ fontSize: 22,
118
+ lineHeight: 26,
119
119
  fontWeight: Bold,
120
120
  fontStyle: italic
121
121
  ),
122
122
  expressive-heading04regular: (
123
- fontFamily: "DN Serif 21",
123
+ fontFamily: "DN Serif 22",
124
124
  fontWeight: Regular,
125
125
  fontSize: 26,
126
126
  lineHeight: 32
127
127
  ),
128
128
  expressive-heading04medium: (
129
- fontFamily: "DN Serif 21",
129
+ fontFamily: "DN Serif 22",
130
130
  fontWeight: Medium,
131
131
  fontSize: 26,
132
132
  lineHeight: 32
133
133
  ),
134
134
  expressive-heading04bold: (
135
- fontFamily: "DN Serif 21",
135
+ fontFamily: "DN Serif 22",
136
136
  fontWeight: Bold,
137
137
  fontSize: 26,
138
138
  lineHeight: 32
139
139
  ),
140
140
  expressive-heading04italicregular: (
141
- fontFamily: "DN Serif Italic 21",
141
+ fontFamily: "DN Serif Italic 22",
142
142
  fontWeight: Regular,
143
143
  lineHeight: 32,
144
144
  fontSize: 26,
145
145
  fontStyle: italic
146
146
  ),
147
147
  expressive-heading04italicmedium: (
148
- fontFamily: "DN Serif Italic 21",
148
+ fontFamily: "DN Serif Italic 22",
149
149
  fontWeight: Medium,
150
150
  lineHeight: 32,
151
151
  fontSize: 26,
152
152
  fontStyle: italic
153
153
  ),
154
154
  expressive-heading04italicbold: (
155
- fontFamily: "DN Serif Italic 21",
155
+ fontFamily: "DN Serif Italic 22",
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 21",
162
+ fontFamily: "DN Serif 22",
163
163
  fontWeight: Regular,
164
164
  lineHeight: 36,
165
165
  fontSize: 32,
166
166
  letterSpacing: ""
167
167
  ),
168
168
  expressive-heading05medium: (
169
- fontFamily: "DN Serif 21",
169
+ fontFamily: "DN Serif 22",
170
170
  fontWeight: Medium,
171
171
  lineHeight: 36,
172
172
  fontSize: 32
173
173
  ),
174
174
  expressive-heading05bold: (
175
- fontFamily: "DN Serif 21",
175
+ fontFamily: "DN Serif 22",
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 21",
182
+ fontFamily: "DN Serif Italic 22",
183
183
  fontWeight: Regular,
184
- lineHeight: 20,
185
- fontSize: 16,
184
+ lineHeight: 36,
185
+ fontSize: 32,
186
186
  fontStyle: italic
187
187
  ),
188
188
  expressive-heading05italicmedium: (
189
- fontFamily: "DN Serif Italic 21",
189
+ fontFamily: "DN Serif Italic 22",
190
190
  fontWeight: Medium,
191
- lineHeight: 20,
192
- fontSize: 16,
191
+ lineHeight: 36,
192
+ fontSize: 32,
193
193
  fontStyle: italic
194
194
  ),
195
195
  expressive-heading05italicbold: (
196
- fontFamily: "DN Serif Italic 21",
196
+ fontFamily: "DN Serif Italic 22",
197
197
  fontWeight: Bold,
198
- lineHeight: 20,
199
- fontSize: 16,
198
+ lineHeight: 36,
199
+ fontSize: 32,
200
200
  fontStyle: italic
201
201
  ),
202
202
  functional-heading01regular: (
@@ -290,118 +290,118 @@ $typographyTokensScreenSmall: (
290
290
  lineHeight: 48
291
291
  ),
292
292
  expressive-paragraph01regular: (
293
- fontFamily: "DN Serif 21",
293
+ fontFamily: "DN Serif 22",
294
294
  fontWeight: Regular,
295
295
  fontSize: 20,
296
296
  lineHeight: 26
297
297
  ),
298
298
  expressive-paragraph01medium: (
299
- fontFamily: "DN Serif 21",
299
+ fontFamily: "DN Serif 22",
300
300
  fontWeight: Medium,
301
301
  fontSize: 20,
302
302
  lineHeight: 28
303
303
  ),
304
304
  expressive-paragraph01bold: (
305
- fontFamily: "DN Serif 21",
305
+ fontFamily: "DN Serif 22",
306
306
  fontWeight: Bold,
307
307
  fontSize: 20,
308
308
  lineHeight: 28
309
309
  ),
310
310
  expressive-paragraph01italicregular: (
311
- fontFamily: "DN Serif Italic 21",
311
+ fontFamily: "DN Serif Italic 22",
312
312
  fontWeight: Regular,
313
313
  fontSize: 20,
314
314
  lineHeight: 28,
315
315
  fontStyle: italic
316
316
  ),
317
317
  expressive-paragraph01italicmedium: (
318
- fontFamily: "DN Serif Italic 21",
318
+ fontFamily: "DN Serif Italic 22",
319
319
  fontWeight: Medium,
320
320
  fontSize: 20,
321
321
  lineHeight: 28,
322
322
  fontStyle: italic
323
323
  ),
324
324
  expressive-paragraph01italicbold: (
325
- fontFamily: "DN Serif Italic 21",
325
+ fontFamily: "DN Serif Italic 22",
326
326
  fontWeight: Bold,
327
327
  fontSize: 20,
328
328
  lineHeight: 28,
329
329
  fontStyle: italic
330
330
  ),
331
331
  expressive-body01regular: (
332
- fontFamily: "DN Serif 21",
332
+ fontFamily: "DN Serif 22",
333
333
  fontWeight: Regular,
334
334
  fontSize: 16,
335
335
  lineHeight: 24
336
336
  ),
337
337
  expressive-body01medium: (
338
- fontFamily: "DN Serif 21",
338
+ fontFamily: "DN Serif 22",
339
339
  fontWeight: Medium,
340
340
  fontSize: 16,
341
341
  lineHeight: 24
342
342
  ),
343
343
  expressive-body01bold: (
344
- fontFamily: "DN Serif 21",
344
+ fontFamily: "DN Serif 22",
345
345
  fontWeight: Bold,
346
346
  fontSize: 16,
347
347
  lineHeight: 24
348
348
  ),
349
349
  expressive-body01italicregular: (
350
- fontFamily: "DN Serif Italic 21",
350
+ fontFamily: "DN Serif Italic 22",
351
351
  fontWeight: Regular,
352
352
  lineHeight: 24,
353
353
  fontSize: 16,
354
354
  fontStyle: italic
355
355
  ),
356
356
  expressive-body01italicmedium: (
357
- fontFamily: "DN Serif Italic 21",
357
+ fontFamily: "DN Serif Italic 22",
358
358
  fontWeight: Medium,
359
359
  lineHeight: 24,
360
360
  fontSize: 16,
361
361
  fontStyle: italic
362
362
  ),
363
363
  expressive-body01italicbold: (
364
- fontFamily: "DN Serif Italic 21",
364
+ fontFamily: "DN Serif Italic 22",
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 21",
371
+ fontFamily: "DN Serif 22",
372
372
  fontWeight: Regular,
373
373
  lineHeight: 26,
374
374
  fontSize: 18,
375
375
  paragraphSpacing: 16
376
376
  ),
377
377
  expressive-body02medium: (
378
- fontFamily: "DN Serif 21",
378
+ fontFamily: "DN Serif 22",
379
379
  fontWeight: Medium,
380
380
  lineHeight: 26,
381
381
  fontSize: 18
382
382
  ),
383
383
  expressive-body02bold: (
384
- fontFamily: "DN Serif 21",
384
+ fontFamily: "DN Serif 22",
385
385
  fontWeight: Bold,
386
386
  lineHeight: 26,
387
387
  fontSize: 18
388
388
  ),
389
389
  expressive-body02italicregular: (
390
- fontFamily: "DN Serif Italic 21",
390
+ fontFamily: "DN Serif Italic 22",
391
391
  fontWeight: Regular,
392
392
  lineHeight: 26,
393
393
  fontSize: 18,
394
394
  fontStyle: italic
395
395
  ),
396
396
  expressive-body02italicmedium: (
397
- fontFamily: "DN Serif Italic 21",
397
+ fontFamily: "DN Serif Italic 22",
398
398
  fontWeight: Medium,
399
399
  lineHeight: 26,
400
400
  fontSize: 18,
401
401
  fontStyle: italic
402
402
  ),
403
403
  expressive-body02italicbold: (
404
- fontFamily: "DN Serif Italic 21",
404
+ fontFamily: "DN Serif Italic 22",
405
405
  fontWeight: Bold,
406
406
  lineHeight: 26,
407
407
  fontSize: 18,
@@ -515,7 +515,7 @@ $typographyTokensScreenSmall: (
515
515
  letterSpacing: 0.2
516
516
  ),
517
517
  detaildropcap: (
518
- fontFamily: "DN Serif 21",
518
+ fontFamily: "DN Serif 22",
519
519
  lineHeight: 52,
520
520
  fontSize: 52,
521
521
  fontWeight: Bold
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.0",
3
+ "version": "3.0.0-alpha.2",
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",
package/tokens/colors-css-variables.json CHANGED
@@ -34,6 +34,7 @@
34
34
  "component-static-white": "var(--ds-color-component-static-white)",
35
35
  "component-positive": "var(--ds-color-component-positive)",
36
36
  "surface-below": "var(--ds-color-surface-below)",
37
+ "surface-native-article": "var(--ds-color-surface-native-article)",
37
38
  "surface-background": "var(--ds-color-surface-background)",
38
39
  "surface-raised": "var(--ds-color-surface-raised)",
39
40
  "surface-elevated": "var(--ds-color-surface-elevated)",