@bonniernews/dn-design-system-web 1.0.0 → 1.1.0-alpha.1

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 (14) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/foundations/helpers/typography.scss +1 -1
  3. package/foundations/typography/fontDefinitions.scss +142 -15
  4. package/foundations/variables/colorsCssVariables.scss +3 -0
  5. package/foundations/variables/colorsDnDarkTokens.scss +4 -1
  6. package/foundations/variables/colorsDnLightTokens.scss +3 -0
  7. package/foundations/variables/shadowsDnDarkTokens.scss +3 -3
  8. package/foundations/variables/spacingComponent.scss +4 -1
  9. package/foundations/variables/spacingLayout.scss +4 -4
  10. package/foundations/variables/typographyTokensList.scss +24 -0
  11. package/foundations/variables/typographyTokensScreenLarge.scss +171 -26
  12. package/foundations/variables/typographyTokensScreenSmall.scss +160 -26
  13. package/package.json +1 -1
  14. package/tokens/colors-css-variables.json +3 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,31 @@
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
+ ## [1.1.0-alpha.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.1.0-alpha.0...@bonniernews/dn-design-system-web@1.1.0-alpha.1) (2023-01-24)
7
+
8
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
9
+
10
+
11
+
12
+
13
+
14
+ ## 1.1.0-alpha.0 (2023-01-23)
15
+
16
+
17
+ ### Features
18
+
19
+ * **foundations:** update font to serif 20 and added italic for serif display ([#581](https://github.com/BonnierNews/dn-design-system/issues/581)) ([66afa75](https://github.com/BonnierNews/dn-design-system/commit/66afa75397a11e4ff4b7947a644344f174a6714f))
20
+
21
+
22
+
23
+ ### [1.0.1-alpha.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0...@bonniernews/dn-design-system-web@1.0.1-alpha.0) (2023-01-23)
24
+
25
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
26
+
27
+
28
+
29
+
30
+
6
31
  ## [1.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@1.0.0-alpha.30...@bonniernews/dn-design-system-web@1.0.0) (2023-01-20)
7
32
 
8
33
  **Note:** Version bump only for package @bonniernews/dn-design-system-web
package/foundations/helpers/typography.scss CHANGED
@@ -57,7 +57,7 @@ $dsSansWeights: (
57
57
  // @todo fix how we handle weight for serif, current span is 86-180
58
58
  $dsSerifWeights: (
59
59
  light: 86,
60
- regular: 102,
60
+ regular: 104,
61
61
  medium: 126,
62
62
  semibold: 142,
63
63
  bold: 150,
package/foundations/typography/fontDefinitions.scss CHANGED
@@ -3,7 +3,7 @@ $dnSerif: (
3
3
  fontFamily: DNSerifVf,
4
4
  sources: (
5
5
  (
6
- file: "DNSerif19-Variable.woff2",
6
+ file: "DNSerif20-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: "DNSerifHeadline19-Light.woff2",
17
+ file: "DNSerifHeadline20-Light.woff2",
18
18
  format: "woff2",
19
19
  ),
20
20
  (
21
- file: "DNSerifHeadline19-Light.woff",
21
+ file: "DNSerifHeadline20-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: "DNSerifHeadline19-Regular.woff2",
32
+ file: "DNSerifHeadline20-Regular.woff2",
33
33
  format: "woff2",
34
34
  ),
35
35
  (
36
- file: "DNSerifHeadline19-Regular.woff",
36
+ file: "DNSerifHeadline20-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: "DNSerifHeadline19-Medium.woff2",
47
+ file: "DNSerifHeadline20-Medium.woff2",
48
48
  format: "woff2",
49
49
  ),
50
50
  (
51
- file: "DNSerifHeadline19-Medium.woff",
51
+ file: "DNSerifHeadline20-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: "DNSerifHeadline19-SemiBold.woff2",
62
+ file: "DNSerifHeadline20-SemiBold.woff2",
63
63
  format: "woff2",
64
64
  ),
65
65
  (
66
- file: "DNSerifHeadline19-SemiBold.woff",
66
+ file: "DNSerifHeadline20-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: "DNSerifHeadline19-Bold.woff2",
77
+ file: "DNSerifHeadline20-Bold.woff2",
78
78
  format: "woff2",
79
79
  ),
80
80
  (
81
- file: "DNSerifHeadline19-Bold.woff",
81
+ file: "DNSerifHeadline20-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: "DNSerifHeadline19-ExtraBold.woff2",
92
+ file: "DNSerifHeadline20-ExtraBold.woff2",
93
93
  format: "woff2",
94
94
  ),
95
95
  (
96
- file: "DNSerifHeadline19-ExtraBold.woff",
96
+ file: "DNSerifHeadline20-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: "DNSerifHeadline19-Black.woff2",
107
+ file: "DNSerifHeadline20-Black.woff2",
108
108
  format: "woff2",
109
109
  ),
110
110
  (
111
- file: "DNSerifHeadline19-Black.woff",
111
+ file: "DNSerifHeadline20-Black.woff",
112
112
  format: "woff",
113
113
  ),
114
114
  ),
@@ -117,6 +117,133 @@ $dnSerif: (
117
117
  )
118
118
  );
119
119
 
120
+ $dnSerifItalic: (
121
+ (
122
+ fontFamily: DNSerifVf,
123
+ sources: (
124
+ (
125
+ file: "DNSerifItalic20-Variable.woff2",
126
+ format: "woff2-variations",
127
+ ),
128
+ ),
129
+ fontWeight: 86 180,
130
+ fontStyle: italic,
131
+ fontDisplay: swap,
132
+ ),
133
+ (
134
+ fontFamily: DNSerif,
135
+ sources: (
136
+ (
137
+ file: "DNSerifDisplay20-LightItalic.woff2",
138
+ format: "woff2",
139
+ ),
140
+ (
141
+ file: "DNSerifDisplay20-LightItalic.woff",
142
+ format: "woff",
143
+ ),
144
+ ),
145
+ fontWeight: 300,
146
+ fontStyle: italic,
147
+ fontDisplay: swap,
148
+ ),
149
+ (
150
+ fontFamily: DNSerif,
151
+ sources: (
152
+ (
153
+ file: "DNSerifDisplay20-Italic.woff2",
154
+ format: "woff2",
155
+ ),
156
+ (
157
+ file: "DNSerifDisplay20-Italic.woff",
158
+ format: "woff",
159
+ ),
160
+ ),
161
+ fontWeight: 400,
162
+ fontStyle: italic,
163
+ fontDisplay: swap,
164
+ ),
165
+ (
166
+ fontFamily: DNSerif,
167
+ sources: (
168
+ (
169
+ file: "DNSerifDisplay20-MediumItalic.woff2",
170
+ format: "woff2",
171
+ ),
172
+ (
173
+ file: "DNSerifDisplay20-MediumItalic.woff",
174
+ format: "woff",
175
+ ),
176
+ ),
177
+ fontWeight: 500,
178
+ fontStyle: italic,
179
+ fontDisplay: swap,
180
+ ),
181
+ (
182
+ fontFamily: DNSerif,
183
+ sources: (
184
+ (
185
+ file: "DNSerifDisplay20-SemiBoldItalic.woff2",
186
+ format: "woff2",
187
+ ),
188
+ (
189
+ file: "DNSerifDisplay20-SemiBoldItalic.woff",
190
+ format: "woff",
191
+ ),
192
+ ),
193
+ fontWeight: 600,
194
+ fontStyle: italic,
195
+ fontDisplay: swap,
196
+ ),
197
+ (
198
+ fontFamily: DNSerif,
199
+ sources: (
200
+ (
201
+ file: "DNSerifDisplay20-BoldItalic.woff2",
202
+ format: "woff2",
203
+ ),
204
+ (
205
+ file: "DNSerifDisplay20-BoldItalic.woff",
206
+ format: "woff",
207
+ ),
208
+ ),
209
+ fontWeight: 700,
210
+ fontStyle: italic,
211
+ fontDisplay: swap,
212
+ ),
213
+ (
214
+ fontFamily: DNSerif,
215
+ sources: (
216
+ (
217
+ file: "DNSerifDisplay20-ExtraBoldItalic.woff2",
218
+ format: "woff2",
219
+ ),
220
+ (
221
+ file: "DNSerifDisplay20-ExtraBoldItalic.woff",
222
+ format: "woff",
223
+ ),
224
+ ),
225
+ fontWeight: 800,
226
+ fontStyle: italic,
227
+ fontDisplay: swap,
228
+ ),
229
+ (
230
+ fontFamily: DNSerif,
231
+ sources: (
232
+ (
233
+ file: "DNSerifDisplay20-BlackItalic.woff2",
234
+ format: "woff2",
235
+ ),
236
+ (
237
+ file: "DNSerifDisplay20-BlackItalic.woff",
238
+ format: "woff",
239
+ ),
240
+ ),
241
+ fontWeight: 900,
242
+ fontStyle: italic,
243
+ fontDisplay: swap,
244
+ )
245
+ );
246
+
120
247
  $dnSans: (
121
248
  (
122
249
  fontFamily: DNSansVF,
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -53,4 +53,7 @@ $ds-color-static-transparent-white: var(--ds-color-static-transparent-white);
53
53
  $ds-color-static-green-100: var(--ds-color-static-green-100);
54
54
  $ds-color-static-red-300: var(--ds-color-static-red-300);
55
55
  $ds-color-static-transparent-white-10: var(--ds-color-static-transparent-white-10);
56
+ $ds-color-static-kultur: var(--ds-color-static-kultur);
57
+ $ds-color-static-economy: var(--ds-color-static-economy);
58
+ $ds-color-static-sport: var(--ds-color-static-sport);
56
59
  $ds-color-gradient-content-fade: var(--ds-color-gradient-content-fade);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  $ds-hex-dark-text-primary: #EDEDED;
2
- $ds-hex-dark-text-primary-02: #CFCFCF;
2
+ $ds-hex-dark-text-primary-02: #B8B8B8;
3
3
  $ds-hex-dark-text-secondary: #050505;
4
4
  $ds-hex-dark-text-critical: #EF7171;
5
5
  $ds-hex-dark-text-disabled: #B8B8B8;
@@ -54,3 +54,6 @@ $ds-hex-dark-static-transparent-white: #ffffff80;
54
54
  $ds-hex-dark-static-green-100: #CEE4D6;
55
55
  $ds-hex-dark-static-red-300: #EF7171;
56
56
  $ds-hex-dark-static-transparent-white-10: #ffffff1a;
57
+ $ds-hex-dark-static-kultur: #568CBB;
58
+ $ds-hex-dark-static-economy: #60BCA1;
59
+ $ds-hex-dark-static-sport: #F58D2D;
package/foundations/variables/colorsDnLightTokens.scss CHANGED
@@ -53,4 +53,7 @@ $ds-hex-static-transparent-white: #ffffff80;
53
53
  $ds-hex-static-green-100: #CEE4D6;
54
54
  $ds-hex-static-red-300: #EF7171;
55
55
  $ds-hex-static-transparent-white-10: #ffffff1a;
56
+ $ds-hex-static-kultur: #568CBB;
57
+ $ds-hex-static-economy: #60BCA1;
58
+ $ds-hex-static-sport: #F58D2D;
56
59
  $ds-hex-gradient-content-fade: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
package/foundations/variables/shadowsDnDarkTokens.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  $shadowsDnDarkTokens: (
2
2
  drop-shadow-02: (
3
3
  x: 0,
4
- y: 0,
5
- blur: 0,
4
+ y: 3,
5
+ blur: 6,
6
6
  spread: 0,
7
- color: #00000000,
7
+ color: #0000001a,
8
8
  type: dropShadow
9
9
  )
10
10
  );
package/foundations/variables/spacingComponent.scss CHANGED
@@ -5,5 +5,8 @@ $spacingComponent: (
5
5
  x4: 16,
6
6
  x5: 20,
7
7
  x6: 24,
8
- x8: 32
8
+ x8: 32,
9
+ x20: 80,
10
+ outer: 16,
11
+ outer-negative: -16
9
12
  );
package/foundations/variables/spacingLayout.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  $spacingLayout: (
2
- side: 16,
3
- top-small: 16,
4
- top-large: 48,
5
- bottom: 16,
2
+ page-horizontal: 16,
3
+ page-top-small: 16,
4
+ page-top-large: 48,
5
+ page-bottom: 16,
6
6
  gap-vertical-static-medium: 16,
7
7
  gap-vertical-static-large: 32,
8
8
  gap-horizontal-static-small: 8,
package/foundations/variables/typographyTokensList.scss CHANGED
@@ -1,18 +1,33 @@
1
1
  $ds-typography-expressive-heading01regular: 'expressive-heading01regular';
2
2
  $ds-typography-expressive-heading01medium: 'expressive-heading01medium';
3
3
  $ds-typography-expressive-heading01bold: 'expressive-heading01bold';
4
+ $ds-typography-expressive-heading01italicregular: 'expressive-heading01italicregular';
5
+ $ds-typography-expressive-heading01italicmedium: 'expressive-heading01italicmedium';
6
+ $ds-typography-expressive-heading01italicbold: 'expressive-heading01italicbold';
4
7
  $ds-typography-expressive-heading02regular: 'expressive-heading02regular';
5
8
  $ds-typography-expressive-heading02medium: 'expressive-heading02medium';
6
9
  $ds-typography-expressive-heading02bold: 'expressive-heading02bold';
10
+ $ds-typography-expressive-heading02italicregular: 'expressive-heading02italicregular';
11
+ $ds-typography-expressive-heading02italicmedium: 'expressive-heading02italicmedium';
12
+ $ds-typography-expressive-heading02italicbold: 'expressive-heading02italicbold';
7
13
  $ds-typography-expressive-heading03regular: 'expressive-heading03regular';
8
14
  $ds-typography-expressive-heading03medium: 'expressive-heading03medium';
9
15
  $ds-typography-expressive-heading03bold: 'expressive-heading03bold';
16
+ $ds-typography-expressive-heading03italicregular: 'expressive-heading03italicregular';
17
+ $ds-typography-expressive-heading03italicmedium: 'expressive-heading03italicmedium';
18
+ $ds-typography-expressive-heading03italicbold: 'expressive-heading03italicbold';
10
19
  $ds-typography-expressive-heading04regular: 'expressive-heading04regular';
11
20
  $ds-typography-expressive-heading04medium: 'expressive-heading04medium';
12
21
  $ds-typography-expressive-heading04bold: 'expressive-heading04bold';
22
+ $ds-typography-expressive-heading04italicregular: 'expressive-heading04italicregular';
23
+ $ds-typography-expressive-heading04italicmedium: 'expressive-heading04italicmedium';
24
+ $ds-typography-expressive-heading04italicbold: 'expressive-heading04italicbold';
13
25
  $ds-typography-expressive-heading05regular: 'expressive-heading05regular';
14
26
  $ds-typography-expressive-heading05medium: 'expressive-heading05medium';
15
27
  $ds-typography-expressive-heading05bold: 'expressive-heading05bold';
28
+ $ds-typography-expressive-heading05italicregular: 'expressive-heading05italicregular';
29
+ $ds-typography-expressive-heading05italicmedium: 'expressive-heading05italicmedium';
30
+ $ds-typography-expressive-heading05italicbold: 'expressive-heading05italicbold';
16
31
  $ds-typography-functional-heading01regular: 'functional-heading01regular';
17
32
  $ds-typography-functional-heading01medium: 'functional-heading01medium';
18
33
  $ds-typography-functional-heading01bold: 'functional-heading01bold';
@@ -31,12 +46,21 @@ $ds-typography-functional-heading05bold: 'functional-heading05bold';
31
46
  $ds-typography-expressive-paragraph01regular: 'expressive-paragraph01regular';
32
47
  $ds-typography-expressive-paragraph01medium: 'expressive-paragraph01medium';
33
48
  $ds-typography-expressive-paragraph01bold: 'expressive-paragraph01bold';
49
+ $ds-typography-expressive-paragraph01italicregular: 'expressive-paragraph01italicregular';
50
+ $ds-typography-expressive-paragraph01italicmedium: 'expressive-paragraph01italicmedium';
51
+ $ds-typography-expressive-paragraph01italicbold: 'expressive-paragraph01italicbold';
34
52
  $ds-typography-expressive-body01regular: 'expressive-body01regular';
35
53
  $ds-typography-expressive-body01medium: 'expressive-body01medium';
36
54
  $ds-typography-expressive-body01bold: 'expressive-body01bold';
55
+ $ds-typography-expressive-body01italicregular: 'expressive-body01italicregular';
56
+ $ds-typography-expressive-body01italicmedium: 'expressive-body01italicmedium';
57
+ $ds-typography-expressive-body01italicbold: 'expressive-body01italicbold';
37
58
  $ds-typography-expressive-body02regular: 'expressive-body02regular';
38
59
  $ds-typography-expressive-body02medium: 'expressive-body02medium';
39
60
  $ds-typography-expressive-body02bold: 'expressive-body02bold';
61
+ $ds-typography-expressive-body02italicregular: 'expressive-body02italicregular';
62
+ $ds-typography-expressive-body02italicmedium: 'expressive-body02italicmedium';
63
+ $ds-typography-expressive-body02italicbold: 'expressive-body02italicbold';
40
64
  $ds-typography-functional-body01regular: 'functional-body01regular';
41
65
  $ds-typography-functional-body01medium: 'functional-body01medium';
42
66
  $ds-typography-functional-body01bold: 'functional-body01bold';
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -1,95 +1,185 @@
1
1
  $typographyTokensScreenLarge: (
2
2
  expressive-heading01regular: (
3
- fontFamily: "DN Serif 19",
3
+ fontFamily: "DN Serif 20",
4
4
  fontWeight: Regular,
5
5
  fontSize: 16,
6
6
  lineHeight: 20
7
7
  ),
8
8
  expressive-heading01medium: (
9
- fontFamily: "DN Serif 19",
9
+ fontFamily: "DN Serif 20",
10
10
  fontWeight: Medium,
11
11
  fontSize: 16,
12
12
  lineHeight: 20
13
13
  ),
14
14
  expressive-heading01bold: (
15
- fontFamily: "DN Serif 19",
15
+ fontFamily: "DN Serif 20",
16
16
  fontWeight: Bold,
17
17
  fontSize: 16,
18
18
  lineHeight: 20
19
19
  ),
20
+ expressive-heading01italicregular: (
21
+ lineHeight: 20,
22
+ fontSize: 16,
23
+ fontFamily: "DN Serif Italic 20",
24
+ fontWeight: Regular
25
+ ),
26
+ expressive-heading01italicmedium: (
27
+ lineHeight: 20,
28
+ fontSize: 16,
29
+ fontFamily: "DN Serif Italic 20",
30
+ fontWeight: Medium
31
+ ),
32
+ expressive-heading01italicbold: (
33
+ lineHeight: 20,
34
+ fontSize: 16,
35
+ fontFamily: "DN Serif Italic 20",
36
+ fontWeight: Bold
37
+ ),
20
38
  expressive-heading02regular: (
21
- fontFamily: "DN Serif 19",
39
+ fontFamily: "DN Serif 20",
22
40
  fontWeight: Regular,
23
41
  fontSize: 20,
24
42
  lineHeight: 24,
25
43
  paragraphSpacing: 16
26
44
  ),
27
45
  expressive-heading02medium: (
28
- fontFamily: "DN Serif 19",
46
+ fontFamily: "DN Serif 20",
29
47
  fontWeight: Medium,
30
48
  fontSize: 20,
31
49
  lineHeight: 24
32
50
  ),
33
51
  expressive-heading02bold: (
34
- fontFamily: "DN Serif 19",
52
+ fontFamily: "DN Serif 20",
35
53
  fontWeight: Bold,
36
54
  fontSize: 20,
37
55
  lineHeight: 24
38
56
  ),
57
+ expressive-heading02italicregular: (
58
+ fontSize: 20px,
59
+ lineHeight: 24px,
60
+ fontWeight: Regular,
61
+ fontFamily: "DN Serif Italic 20"
62
+ ),
63
+ expressive-heading02italicmedium: (
64
+ fontSize: 20px,
65
+ lineHeight: 24px,
66
+ fontWeight: Medium,
67
+ fontFamily: "DN Serif Italic 20"
68
+ ),
69
+ expressive-heading02italicbold: (
70
+ fontSize: 20px,
71
+ lineHeight: 24px,
72
+ fontWeight: Bold,
73
+ fontFamily: "DN Serif Italic 20"
74
+ ),
39
75
  expressive-heading03regular: (
40
- fontFamily: "DN Serif 19",
76
+ fontFamily: "DN Serif 20",
41
77
  fontWeight: Regular,
42
78
  fontSize: 26,
43
79
  lineHeight: 32
44
80
  ),
45
81
  expressive-heading03medium: (
46
- fontFamily: "DN Serif 19",
82
+ fontFamily: "DN Serif 20",
47
83
  fontWeight: Medium,
48
84
  fontSize: 26,
49
85
  lineHeight: 32
50
86
  ),
51
87
  expressive-heading03bold: (
52
- fontFamily: "DN Serif 19",
88
+ fontFamily: "DN Serif 20",
53
89
  fontWeight: Bold,
54
90
  fontSize: 26,
55
91
  lineHeight: 32
56
92
  ),
93
+ expressive-heading03italicregular: (
94
+ fontSize: 26,
95
+ lineHeight: 32,
96
+ fontWeight: Regular,
97
+ fontFamily: "DN Serif Italic 20"
98
+ ),
99
+ expressive-heading03italicmedium: (
100
+ fontSize: 26,
101
+ lineHeight: 32,
102
+ fontWeight: Medium,
103
+ fontFamily: "DN Serif Italic 20"
104
+ ),
105
+ expressive-heading03italicbold: (
106
+ fontSize: 26,
107
+ lineHeight: 32,
108
+ fontWeight: Bold,
109
+ fontFamily: "DN Serif Italic 20"
110
+ ),
57
111
  expressive-heading04regular: (
58
- fontFamily: "DN Serif 19",
112
+ fontFamily: "DN Serif 20",
59
113
  fontWeight: Regular,
60
114
  fontSize: 48,
61
115
  lineHeight: 56
62
116
  ),
63
117
  expressive-heading04medium: (
64
- fontFamily: "DN Serif 19",
118
+ fontFamily: "DN Serif 20",
65
119
  fontWeight: Medium,
66
120
  fontSize: 48,
67
121
  lineHeight: 56
68
122
  ),
69
123
  expressive-heading04bold: (
70
- fontFamily: "DN Serif 19",
124
+ fontFamily: "DN Serif 20",
71
125
  fontWeight: Bold,
72
126
  fontSize: 48,
73
127
  lineHeight: 56
74
128
  ),
129
+ expressive-heading04italicregular: (
130
+ fontSize: 48,
131
+ lineHeight: 56,
132
+ fontWeight: Regular,
133
+ fontFamily: "DN Serif Italic 20"
134
+ ),
135
+ expressive-heading04italicmedium: (
136
+ fontSize: 48,
137
+ lineHeight: 56,
138
+ fontWeight: Medium,
139
+ fontFamily: "DN Serif Italic 20"
140
+ ),
141
+ expressive-heading04italicbold: (
142
+ fontSize: 48,
143
+ lineHeight: 56,
144
+ fontWeight: Bold,
145
+ fontFamily: "DN Serif Italic 20"
146
+ ),
75
147
  expressive-heading05regular: (
76
- fontFamily: "DN Serif 19",
148
+ fontFamily: "DN Serif 20",
77
149
  fontWeight: Regular,
78
150
  lineHeight: 56,
79
151
  fontSize: 48
80
152
  ),
81
153
  expressive-heading05medium: (
82
- fontFamily: "DN Serif 19",
154
+ fontFamily: "DN Serif 20",
83
155
  fontWeight: Medium,
84
156
  lineHeight: 56,
85
157
  fontSize: 39
86
158
  ),
87
159
  expressive-heading05bold: (
88
- fontFamily: "DN Serif 19",
160
+ fontFamily: "DN Serif 20",
89
161
  fontWeight: Bold,
90
162
  lineHeight: 56,
91
163
  fontSize: 48
92
164
  ),
165
+ expressive-heading05italicregular: (
166
+ fontFamily: "DN Serif Italic 20",
167
+ fontWeight: Regular,
168
+ fontSize: 48,
169
+ lineHeight: 56
170
+ ),
171
+ expressive-heading05italicmedium: (
172
+ fontFamily: "DN Serif Italic 20",
173
+ fontWeight: Medium,
174
+ fontSize: 48,
175
+ lineHeight: 56
176
+ ),
177
+ expressive-heading05italicbold: (
178
+ fontFamily: "DN Serif Italic 20",
179
+ fontWeight: Bold,
180
+ fontSize: 48,
181
+ lineHeight: 56
182
+ ),
93
183
  functional-heading01regular: (
94
184
  fontFamily: "Dn Sans 10",
95
185
  fontWeight: Regular,
@@ -181,59 +271,113 @@ $typographyTokensScreenLarge: (
181
271
  lineHeight: 48
182
272
  ),
183
273
  expressive-paragraph01regular: (
184
- fontFamily: "DN Serif 19",
274
+ fontFamily: "DN Serif 20",
185
275
  fontWeight: Regular,
186
276
  fontSize: 20,
187
277
  lineHeight: 28
188
278
  ),
189
279
  expressive-paragraph01medium: (
190
- fontFamily: "DN Serif 19",
280
+ fontFamily: "DN Serif 20",
191
281
  fontWeight: Medium,
192
282
  fontSize: 20,
193
283
  lineHeight: 28
194
284
  ),
195
285
  expressive-paragraph01bold: (
196
- fontFamily: "DN Serif 19",
286
+ fontFamily: "DN Serif 20",
197
287
  fontWeight: Bold,
198
288
  fontSize: 20,
199
289
  lineHeight: 28
200
290
  ),
291
+ expressive-paragraph01italicregular: (
292
+ fontFamily: "DN Serif Italic 20",
293
+ fontWeight: Regular,
294
+ lineHeight: 28,
295
+ fontSize: 20
296
+ ),
297
+ expressive-paragraph01italicmedium: (
298
+ fontFamily: "DN Serif Italic 20",
299
+ fontWeight: Medium,
300
+ lineHeight: 28,
301
+ fontSize: 20
302
+ ),
303
+ expressive-paragraph01italicbold: (
304
+ fontFamily: "DN Serif Italic 20",
305
+ fontWeight: Bold,
306
+ lineHeight: 28,
307
+ fontSize: 20
308
+ ),
201
309
  expressive-body01regular: (
202
- fontFamily: "DN Serif 19",
310
+ fontFamily: "DN Serif 20",
203
311
  fontWeight: Regular,
204
312
  fontSize: 16,
205
313
  lineHeight: 24
206
314
  ),
207
315
  expressive-body01medium: (
208
- fontFamily: "DN Serif 19",
316
+ fontFamily: "DN Serif 20",
209
317
  fontWeight: Medium,
210
318
  fontSize: 16,
211
319
  lineHeight: 24
212
320
  ),
213
321
  expressive-body01bold: (
214
- fontFamily: "DN Serif 19",
322
+ fontFamily: "DN Serif 20",
215
323
  fontWeight: Bold,
216
324
  fontSize: 16,
217
325
  lineHeight: 24
218
326
  ),
327
+ expressive-body01italicregular: (
328
+ fontFamily: "DN Serif Italic 20",
329
+ fontWeight: Regular,
330
+ lineHeight: 24,
331
+ fontSize: 18
332
+ ),
333
+ expressive-body01italicmedium: (
334
+ fontFamily: "DN Serif Italic 20",
335
+ fontWeight: Medium,
336
+ lineHeight: 24,
337
+ fontSize: 18
338
+ ),
339
+ expressive-body01italicbold: (
340
+ fontFamily: "DN Serif Italic 20",
341
+ fontWeight: Bold,
342
+ lineHeight: 24,
343
+ fontSize: 18
344
+ ),
219
345
  expressive-body02regular: (
220
- fontFamily: "DN Serif 19",
346
+ fontFamily: "DN Serif 20",
221
347
  fontWeight: Regular,
222
- lineHeight: 28,
348
+ lineHeight: 26,
223
349
  fontSize: 18
224
350
  ),
225
351
  expressive-body02medium: (
226
- fontFamily: "DN Serif 19",
352
+ fontFamily: "DN Serif 20",
227
353
  fontWeight: Medium,
228
354
  lineHeight: 28,
229
355
  fontSize: 18
230
356
  ),
231
357
  expressive-body02bold: (
232
- fontFamily: "DN Serif 19",
358
+ fontFamily: "DN Serif 20",
233
359
  fontWeight: Bold,
234
360
  lineHeight: 28,
235
361
  fontSize: 18
236
362
  ),
363
+ expressive-body02italicregular: (
364
+ fontFamily: "DN Serif Italic 20",
365
+ fontWeight: Regular,
366
+ lineHeight: 26,
367
+ fontSize: 18
368
+ ),
369
+ expressive-body02italicmedium: (
370
+ fontFamily: "DN Serif Italic 20",
371
+ fontWeight: Medium,
372
+ lineHeight: 26,
373
+ fontSize: 18
374
+ ),
375
+ expressive-body02italicbold: (
376
+ fontFamily: "DN Serif Italic 20",
377
+ fontWeight: Bold,
378
+ lineHeight: 26,
379
+ fontSize: 18
380
+ ),
237
381
  functional-body01regular: (
238
382
  fontFamily: "Dn Sans 10",
239
383
  fontWeight: Regular,
@@ -338,6 +482,7 @@ $typographyTokensScreenLarge: (
338
482
  fontFamily: "Dn Sans 10",
339
483
  fontWeight: Medium,
340
484
  lineHeight: 16,
341
- fontSize: 12
485
+ fontSize: 12,
486
+ letterSpacing: 0.2
342
487
  )
343
488
  );
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -1,96 +1,186 @@
1
1
  $typographyTokensScreenSmall: (
2
2
  expressive-heading01regular: (
3
- fontFamily: "DN Serif 19",
3
+ fontFamily: "DN Serif 20",
4
4
  fontWeight: Regular,
5
5
  fontSize: 16,
6
6
  lineHeight: 20
7
7
  ),
8
8
  expressive-heading01medium: (
9
- fontFamily: "DN Serif 19",
9
+ fontFamily: "DN Serif 20",
10
10
  fontWeight: Medium,
11
11
  fontSize: 16,
12
12
  lineHeight: 20
13
13
  ),
14
14
  expressive-heading01bold: (
15
- fontFamily: "DN Serif 19",
15
+ fontFamily: "DN Serif 20",
16
16
  fontWeight: Bold,
17
17
  fontSize: 16,
18
18
  lineHeight: 20
19
19
  ),
20
+ expressive-heading01italicregular: (
21
+ fontFamily: "DN Serif 20",
22
+ fontWeight: Regular,
23
+ fontSize: 16,
24
+ letterSpacing: 20
25
+ ),
26
+ expressive-heading01italicmedium: (
27
+ fontFamily: "DN Serif 20",
28
+ fontWeight: Medium,
29
+ fontSize: 16,
30
+ letterSpacing: 20
31
+ ),
32
+ expressive-heading01italicbold: (
33
+ fontFamily: "DN Serif 20",
34
+ fontWeight: Bold,
35
+ fontSize: 16,
36
+ letterSpacing: 20
37
+ ),
20
38
  expressive-heading02regular: (
21
- fontFamily: "DN Serif 19",
39
+ fontFamily: "DN Serif 20",
22
40
  fontWeight: Regular,
23
41
  fontSize: 18,
24
42
  lineHeight: 20
25
43
  ),
26
44
  expressive-heading02medium: (
27
- fontFamily: "DN Serif 19",
45
+ fontFamily: "DN Serif 20",
28
46
  fontWeight: Medium,
29
47
  fontSize: 18,
30
48
  lineHeight: 20
31
49
  ),
32
50
  expressive-heading02bold: (
33
- fontFamily: "DN Serif 19",
51
+ fontFamily: "DN Serif 20",
34
52
  fontWeight: Bold,
35
53
  fontSize: 18,
36
54
  lineHeight: 20
37
55
  ),
56
+ expressive-heading02italicregular: (
57
+ fontFamily: "DN Serif Italic 20",
58
+ fontWeight: Regular,
59
+ fontSize: 16,
60
+ lineHeight: 20
61
+ ),
62
+ expressive-heading02italicmedium: (
63
+ fontFamily: "DN Serif Italic 20",
64
+ fontWeight: Medium,
65
+ fontSize: 16,
66
+ lineHeight: 20
67
+ ),
68
+ expressive-heading02italicbold: (
69
+ fontFamily: "DN Serif Italic 20",
70
+ fontWeight: Bold,
71
+ fontSize: 16,
72
+ lineHeight: 20
73
+ ),
38
74
  expressive-heading03regular: (
39
- fontFamily: "DN Serif 19",
75
+ fontFamily: "DN Serif 20",
40
76
  fontWeight: Regular,
41
77
  fontSize: 21,
42
78
  lineHeight: 24
43
79
  ),
44
80
  expressive-heading03medium: (
45
- fontFamily: "DN Serif 19",
81
+ fontFamily: "DN Serif 20",
46
82
  fontWeight: Medium,
47
83
  fontSize: 21,
48
84
  lineHeight: 28
49
85
  ),
50
86
  expressive-heading03bold: (
51
- fontFamily: "DN Serif 19",
87
+ fontFamily: "DN Serif 20",
52
88
  fontWeight: Bold,
53
89
  fontSize: 21,
54
90
  lineHeight: 28
55
91
  ),
92
+ expressive-heading03italicregular: (
93
+ fontFamily: "DN Serif Italic 20",
94
+ fontSize: 16,
95
+ lineHeight: 20,
96
+ fontWeight: Regular
97
+ ),
98
+ expressive-heading03italicmedium: (
99
+ fontFamily: "DN Serif Italic 20",
100
+ fontSize: 16,
101
+ lineHeight: 20,
102
+ fontWeight: Medium
103
+ ),
104
+ expressive-heading03italicbold: (
105
+ fontFamily: "DN Serif Italic 20",
106
+ fontSize: 16,
107
+ lineHeight: 20,
108
+ fontWeight: Bold
109
+ ),
56
110
  expressive-heading04regular: (
57
- fontFamily: "DN Serif 19",
111
+ fontFamily: "DN Serif 20",
58
112
  fontWeight: Regular,
59
113
  fontSize: 26,
60
114
  lineHeight: 32
61
115
  ),
62
116
  expressive-heading04medium: (
63
- fontFamily: "DN Serif 19",
117
+ fontFamily: "DN Serif 20",
64
118
  fontWeight: Medium,
65
119
  fontSize: 26,
66
120
  lineHeight: 32
67
121
  ),
68
122
  expressive-heading04bold: (
69
- fontFamily: "DN Serif 19",
123
+ fontFamily: "DN Serif 20",
70
124
  fontWeight: Bold,
71
125
  fontSize: 26,
72
126
  lineHeight: 32
73
127
  ),
128
+ expressive-heading04italicregular: (
129
+ fontFamily: "DN Serif Italic 20",
130
+ fontWeight: Regular,
131
+ lineHeight: 20,
132
+ fontSize: 16
133
+ ),
134
+ expressive-heading04italicmedium: (
135
+ fontFamily: "DN Serif Italic 20",
136
+ fontWeight: Medium,
137
+ lineHeight: 20,
138
+ fontSize: 16
139
+ ),
140
+ expressive-heading04italicbold: (
141
+ fontFamily: "DN Serif Italic 20",
142
+ fontWeight: Bold,
143
+ lineHeight: 20,
144
+ fontSize: 16
145
+ ),
74
146
  expressive-heading05regular: (
75
- fontFamily: "DN Serif 19",
147
+ fontFamily: "DN Serif 20",
76
148
  fontWeight: Regular,
77
149
  lineHeight: 36,
78
150
  fontSize: 32,
79
151
  letterSpacing: ""
80
152
  ),
81
153
  expressive-heading05medium: (
82
- fontFamily: "DN Serif 19",
154
+ fontFamily: "DN Serif 20",
83
155
  fontWeight: Medium,
84
156
  lineHeight: 36,
85
157
  fontSize: 32
86
158
  ),
87
159
  expressive-heading05bold: (
88
- fontFamily: "DN Serif 19",
160
+ fontFamily: "DN Serif 20",
89
161
  fontWeight: Bold,
90
162
  lineHeight: 36,
91
163
  fontSize: 32,
92
164
  letterSpacing: ""
93
165
  ),
166
+ expressive-heading05italicregular: (
167
+ fontFamily: "DN Serif Italic 20",
168
+ fontWeight: Regular,
169
+ lineHeight: 20,
170
+ fontSize: 16
171
+ ),
172
+ expressive-heading05italicmedium: (
173
+ fontFamily: "DN Serif Italic 20",
174
+ fontWeight: Medium,
175
+ lineHeight: 20,
176
+ fontSize: 16
177
+ ),
178
+ expressive-heading05italicbold: (
179
+ fontFamily: "DN Serif Italic 20",
180
+ fontWeight: Bold,
181
+ lineHeight: 20,
182
+ fontSize: 16
183
+ ),
94
184
  functional-heading01regular: (
95
185
  fontFamily: "Dn Sans 10",
96
186
  fontWeight: Regular,
@@ -182,59 +272,102 @@ $typographyTokensScreenSmall: (
182
272
  lineHeight: 48
183
273
  ),
184
274
  expressive-paragraph01regular: (
185
- fontFamily: "DN Serif 19",
275
+ fontFamily: "DN Serif 20",
186
276
  fontWeight: Regular,
187
277
  fontSize: 20,
188
278
  lineHeight: 26
189
279
  ),
190
280
  expressive-paragraph01medium: (
191
- fontFamily: "DN Serif 19",
281
+ fontFamily: "DN Serif 20",
192
282
  fontWeight: Medium,
193
283
  fontSize: 20,
194
284
  lineHeight: 28
195
285
  ),
196
286
  expressive-paragraph01bold: (
197
- fontFamily: "DN Serif 19",
287
+ fontFamily: "DN Serif 20",
288
+ fontWeight: Bold,
289
+ fontSize: 20,
290
+ lineHeight: 28
291
+ ),
292
+ expressive-paragraph01italicregular: (
293
+ fontFamily: "DN Serif Italic 20",
294
+ fontWeight: Regular,
295
+ fontSize: 20,
296
+ lineHeight: 28
297
+ ),
298
+ expressive-paragraph01italicmedium: (
299
+ fontFamily: "DN Serif Italic 20",
300
+ fontWeight: Medium,
301
+ fontSize: 20,
302
+ lineHeight: 28
303
+ ),
304
+ expressive-paragraph01italicbold: (
305
+ fontFamily: "DN Serif Italic 20",
198
306
  fontWeight: Bold,
199
307
  fontSize: 20,
200
308
  lineHeight: 28
201
309
  ),
202
310
  expressive-body01regular: (
203
- fontFamily: "DN Serif 19",
311
+ fontFamily: "DN Serif 20",
204
312
  fontWeight: Regular,
205
313
  fontSize: 16,
206
314
  lineHeight: 24
207
315
  ),
208
316
  expressive-body01medium: (
209
- fontFamily: "DN Serif 19",
317
+ fontFamily: "DN Serif 20",
210
318
  fontWeight: Medium,
211
319
  fontSize: 16,
212
320
  lineHeight: 24
213
321
  ),
214
322
  expressive-body01bold: (
215
- fontFamily: "DN Serif 19",
323
+ fontFamily: "DN Serif 20",
216
324
  fontWeight: Bold,
217
325
  fontSize: 16,
218
326
  lineHeight: 24
219
327
  ),
328
+ expressive-body01italicregular: (
329
+ fontFamily: "DN Serif Italic 20",
330
+ fontWeight: Regular,
331
+ lineHeight: 24,
332
+ fontSize: 16
333
+ ),
334
+ expressive-body01italicmedium: (
335
+ fontFamily: "DN Serif Italic 20",
336
+ fontWeight: Medium,
337
+ lineHeight: 24,
338
+ fontSize: 16
339
+ ),
340
+ expressive-body01italicbold: (
341
+ fontFamily: "DN Serif Italic 20",
342
+ fontWeight: Bold,
343
+ lineHeight: 24,
344
+ fontSize: 16
345
+ ),
220
346
  expressive-body02regular: (
221
- fontFamily: "DN Serif 19",
347
+ fontFamily: "DN Serif 20",
222
348
  fontWeight: Regular,
223
349
  lineHeight: 26,
224
- fontSize: 18
350
+ fontSize: 18,
351
+ paragraphSpacing: 16
225
352
  ),
226
353
  expressive-body02medium: (
227
- fontFamily: "DN Serif 19",
354
+ fontFamily: "DN Serif 20",
228
355
  fontWeight: Medium,
229
356
  lineHeight: 26,
230
357
  fontSize: 18
231
358
  ),
232
359
  expressive-body02bold: (
233
- fontFamily: "DN Serif 19",
360
+ fontFamily: "DN Serif 20",
234
361
  fontWeight: Bold,
235
362
  lineHeight: 26,
236
363
  fontSize: 18
237
364
  ),
365
+ expressive-body02italicregular: (
366
+ fontFamily: "DN Serif Italic 20",
367
+ fontWeight: Regular,
368
+ lineHeight: 26,
369
+ fontSize: 18
370
+ ),
238
371
  functional-body01regular: (
239
372
  fontFamily: "Dn Sans 10",
240
373
  fontWeight: Regular,
@@ -339,6 +472,7 @@ $typographyTokensScreenSmall: (
339
472
  fontFamily: "Dn Sans 10",
340
473
  fontWeight: Medium,
341
474
  lineHeight: 16,
342
- fontSize: 12
475
+ fontSize: 12,
476
+ letterSpacing: 0.2
343
477
  )
344
478
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "1.0.0",
3
+ "version": "1.1.0-alpha.1",
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
@@ -54,5 +54,8 @@
54
54
  "static-green-100": "var(--ds-color-static-green-100)",
55
55
  "static-red-300": "var(--ds-color-static-red-300)",
56
56
  "static-transparent-white-10": "var(--ds-color-static-transparent-white-10)",
57
+ "static-kultur": "var(--ds-color-static-kultur)",
58
+ "static-economy": "var(--ds-color-static-economy)",
59
+ "static-sport": "var(--ds-color-static-sport)",
57
60
  "gradient-content-fade": "var(--ds-color-gradient-content-fade)"
58
61
  }