@bonniernews/dn-design-system-web 15.2.12 → 15.2.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 (15) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/foundations/variables/colorsCssVariables.scss +3 -0
  3. package/foundations/variables/colorsDnDarkTokens.scss +4 -1
  4. package/foundations/variables/colorsDnLightTokens.scss +3 -0
  5. package/foundations/variables/shadowsDnDarkTokens.scss +1 -1
  6. package/foundations/variables/shadowsDnLightTokens.scss +1 -1
  7. package/foundations/variables/typographyTokensList.scss +2 -0
  8. package/foundations/variables/typographyTokensScreenExtraLarge.scss +14 -0
  9. package/foundations/variables/typographyTokensScreenLarge.scss +14 -0
  10. package/foundations/variables/typographyTokensScreenSmall.scss +14 -0
  11. package/package.json +1 -1
  12. package/tokens/colors-css-variables.json +3 -0
  13. package/tokens/colors-dark-mode.json +6 -3
  14. package/tokens/colors-light-mode.json +5 -2
  15. package/tokens/typography-list.json +2 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,14 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [15.2.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.12...@bonniernews/dn-design-system-web@15.2.13) (2024-07-04)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **foundations:** update tokens from Figma ([#1326](https://github.com/BonnierNews/dn-design-system/issues/1326)) ([701b32c](https://github.com/BonnierNews/dn-design-system/commit/701b32c98393e40fef2684c090eb8629f02d719d))
13
+ * prerelease packages ([27b604f](https://github.com/BonnierNews/dn-design-system/commit/27b604f4fc12546cc0b653e6d40a49b9bae8e082))
14
+
7
15
  ## [15.2.12](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.11...@bonniernews/dn-design-system-web@15.2.12) (2024-06-19)
8
16
 
9
17
 
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -43,6 +43,8 @@ $ds-color-surface-overlay: var(--ds-color-surface-overlay);
43
43
  $ds-color-surface-quiz: var(--ds-color-surface-quiz);
44
44
  $ds-color-surface-korsord: var(--ds-color-surface-korsord);
45
45
  $ds-color-surface-sudoko: var(--ds-color-surface-sudoko);
46
+ $ds-color-surface-brand: var(--ds-color-surface-brand);
47
+ $ds-color-surface-inverted: var(--ds-color-surface-inverted);
46
48
  $ds-color-border-primary: var(--ds-color-border-primary);
47
49
  $ds-color-border-primary-02: var(--ds-color-border-primary-02);
48
50
  $ds-color-border-primary-03: var(--ds-color-border-primary-03);
@@ -53,6 +55,7 @@ $ds-color-border-focus: var(--ds-color-border-focus);
53
55
  $ds-color-border-focus-02: var(--ds-color-border-focus-02);
54
56
  $ds-color-border-focus-03: var(--ds-color-border-focus-03);
55
57
  $ds-color-border-focus-04: var(--ds-color-border-focus-04);
58
+ $ds-color-border-brand: var(--ds-color-border-brand);
56
59
  $ds-color-background-primary: var(--ds-color-background-primary);
57
60
  $ds-color-static-red-100: var(--ds-color-static-red-100);
58
61
  $ds-color-static-black: var(--ds-color-static-black);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -26,7 +26,7 @@ $ds-hex-dark-component-business: #3A8352;
26
26
  $ds-hex-dark-component-primary: #EDEDED;
27
27
  $ds-hex-dark-component-primary-overlay: #ffffff21;
28
28
  $ds-hex-dark-component-primary-overlay-02: #9E9E9E;
29
- $ds-hex-dark-component-secondary: #141414;
29
+ $ds-hex-dark-component-secondary: #050505;
30
30
  $ds-hex-dark-component-secondary-overlay: #08080821;
31
31
  $ds-hex-dark-component-secondary-overlay-02: #08080833;
32
32
  $ds-hex-dark-component-critical: #EF7171;
@@ -43,6 +43,8 @@ $ds-hex-dark-surface-overlay: #05050580;
43
43
  $ds-hex-dark-surface-quiz: #EA3E3F;
44
44
  $ds-hex-dark-surface-korsord: #8BB6E8;
45
45
  $ds-hex-dark-surface-sudoko: #90D0BD;
46
+ $ds-hex-dark-surface-brand: #DA000D;
47
+ $ds-hex-dark-surface-inverted: #141414;
46
48
  $ds-hex-dark-border-primary: #3B3B3B;
47
49
  $ds-hex-dark-border-primary-02: #ffffff66;
48
50
  $ds-hex-dark-border-primary-03: #EDEDED;
@@ -53,6 +55,7 @@ $ds-hex-dark-border-focus: #FD2330;
53
55
  $ds-hex-dark-border-focus-02: #ffffff;
54
56
  $ds-hex-dark-border-focus-03: #FD2330;
55
57
  $ds-hex-dark-border-focus-04: #3A8352;
58
+ $ds-hex-dark-border-brand: #DA000D;
56
59
  $ds-hex-dark-background-primary: #141414;
57
60
  $ds-hex-dark-gradient-content-fade-left: linear-gradient(90deg, #05050500 0%, #050505 100%);
58
61
  $ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #05050500 0%, #050505 100%);
package/foundations/variables/colorsDnLightTokens.scss CHANGED
@@ -43,6 +43,8 @@ $ds-hex-surface-overlay: #05050580;
43
43
  $ds-hex-surface-quiz: #EA3E3F;
44
44
  $ds-hex-surface-korsord: #8BB6E8;
45
45
  $ds-hex-surface-sudoko: #90D0BD;
46
+ $ds-hex-surface-brand: #DA000D;
47
+ $ds-hex-surface-inverted: #141414;
46
48
  $ds-hex-border-primary: #08080821;
47
49
  $ds-hex-border-primary-02: #08080866;
48
50
  $ds-hex-border-primary-03: #050505;
@@ -53,6 +55,7 @@ $ds-hex-border-focus: #DA000D;
53
55
  $ds-hex-border-focus-02: #141414;
54
56
  $ds-hex-border-focus-03: #DA000D;
55
57
  $ds-hex-border-focus-04: #3A8352;
58
+ $ds-hex-border-brand: #DA000D;
56
59
  $ds-hex-background-primary: #ffffff;
57
60
  $ds-hex-static-red-100: #FAD4D4;
58
61
  $ds-hex-static-black: #141414;
package/foundations/variables/shadowsDnDarkTokens.scss CHANGED
@@ -11,7 +11,7 @@ $shadowsDnDarkTokens: (
11
11
  x: 0,
12
12
  y: 2,
13
13
  blur: 4,
14
- spread: 0,
14
+ spread: 1,
15
15
  color: #00000026,
16
16
  type: dropShadow
17
17
  ),
package/foundations/variables/shadowsDnLightTokens.scss CHANGED
@@ -11,7 +11,7 @@ $shadowsDnLightTokens: (
11
11
  x: 0,
12
12
  y: 2,
13
13
  blur: 4,
14
- spread: 0,
14
+ spread: 1,
15
15
  color: #00000026,
16
16
  type: dropShadow
17
17
  ),
package/foundations/variables/typographyTokensList.scss CHANGED
@@ -25,6 +25,8 @@ $ds-typography-detailteaser-large-compact-opinion: 'detailteaser-large-compact-o
25
25
  $ds-typography-detailteaser-large-storRubrik-opinion: 'detailteaser-large-storRubrik-opinion';
26
26
  $ds-typography-detailstandard-button-xlarge: 'detailstandard-button-xlarge';
27
27
  $ds-typography-detailteaser-large-rightcol: 'detailteaser-large-rightcol';
28
+ $ds-typography-detailteaser-baotaxl: 'detailteaser-baotaxl';
29
+ $ds-typography-detailteaser-tipsa: 'detailteaser-tipsa';
28
30
  $ds-typography-expressiveheading01: 'expressiveheading01';
29
31
  $ds-typography-expressiveheading02: 'expressiveheading02';
30
32
  $ds-typography-expressiveheading03: 'expressiveheading03';
package/foundations/variables/typographyTokensScreenExtraLarge.scss CHANGED
@@ -131,6 +131,20 @@ $typographyTokensScreenExtraLarge: (
131
131
  fontSize: 22,
132
132
  letterSpacing: 0
133
133
  ),
134
+ detailteaser-baotaxl: (
135
+ fontFamily: "DN Serif Display",
136
+ fontWeight: Bold,
137
+ fontSize: 80,
138
+ lineHeight: 1.1,
139
+ letterSpacing: 0
140
+ ),
141
+ detailteaser-tipsa: (
142
+ fontFamily: "DN Serif Headline",
143
+ fontWeight: Bold,
144
+ fontSize: 22,
145
+ lineHeight: 1.1,
146
+ letterSpacing: 0
147
+ ),
134
148
  detaildropcap: (
135
149
  fontFamily: "DN Serif Display",
136
150
  fontWeight: Bold,
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -153,6 +153,20 @@ $typographyTokensScreenLarge: (
153
153
  letterSpacing: 0,
154
154
  fontStyle: italic
155
155
  ),
156
+ detailteaser-baotaxl: (
157
+ fontFamily: "DN Serif Display",
158
+ fontWeight: Bold,
159
+ fontSize: 56,
160
+ lineHeight: 1.1,
161
+ letterSpacing: 0
162
+ ),
163
+ detailteaser-tipsa: (
164
+ fontFamily: "DN Serif Headline",
165
+ fontWeight: Bold,
166
+ fontSize: 22,
167
+ lineHeight: 1.1,
168
+ letterSpacing: 0
169
+ ),
156
170
  detailstandard-button: (
157
171
  fontFamily: "DN Sans",
158
172
  fontWeight: SemiBold,
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -195,6 +195,20 @@ $typographyTokensScreenSmall: (
195
195
  fontSize: 22,
196
196
  lineHeight: 1.2
197
197
  ),
198
+ detailteaser-baotaxl: (
199
+ fontFamily: "DN Serif Headline",
200
+ fontWeight: Bold,
201
+ fontSize: 32,
202
+ lineHeight: 1.1,
203
+ letterSpacing: 0
204
+ ),
205
+ detailteaser-tipsa: (
206
+ fontFamily: "DN Serif Text",
207
+ fontWeight: Bold,
208
+ fontSize: 17,
209
+ lineHeight: 1.2,
210
+ letterSpacing: 0
211
+ ),
198
212
  expressiveheading01: (
199
213
  fontFamily: "DN Serif Text",
200
214
  fontWeight: Bold,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "15.2.12",
3
+ "version": "15.2.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",
package/tokens/colors-css-variables.json CHANGED
@@ -44,6 +44,8 @@
44
44
  "surface-quiz": "var(--ds-color-surface-quiz)",
45
45
  "surface-korsord": "var(--ds-color-surface-korsord)",
46
46
  "surface-sudoko": "var(--ds-color-surface-sudoko)",
47
+ "surface-brand": "var(--ds-color-surface-brand)",
48
+ "surface-inverted": "var(--ds-color-surface-inverted)",
47
49
  "border-primary": "var(--ds-color-border-primary)",
48
50
  "border-primary-02": "var(--ds-color-border-primary-02)",
49
51
  "border-primary-03": "var(--ds-color-border-primary-03)",
@@ -54,6 +56,7 @@
54
56
  "border-focus-02": "var(--ds-color-border-focus-02)",
55
57
  "border-focus-03": "var(--ds-color-border-focus-03)",
56
58
  "border-focus-04": "var(--ds-color-border-focus-04)",
59
+ "border-brand": "var(--ds-color-border-brand)",
57
60
  "background-primary": "var(--ds-color-background-primary)",
58
61
  "static-red-100": "var(--ds-color-static-red-100)",
59
62
  "static-black": "var(--ds-color-static-black)",
package/tokens/colors-dark-mode.json CHANGED
@@ -32,7 +32,7 @@
32
32
  "primary": "#EDEDED",
33
33
  "primary-overlay": "#ffffff21",
34
34
  "primary-overlay-02": "#9E9E9E",
35
- "secondary": "#141414",
35
+ "secondary": "#050505",
36
36
  "secondary-overlay": "#08080821",
37
37
  "secondary-overlay-02": "#08080833",
38
38
  "critical": "#EF7171",
@@ -50,7 +50,9 @@
50
50
  "overlay": "#05050580",
51
51
  "quiz": "#EA3E3F",
52
52
  "korsord": "#8BB6E8",
53
- "sudoko": "#90D0BD"
53
+ "sudoko": "#90D0BD",
54
+ "brand": "#DA000D",
55
+ "inverted": "#141414"
54
56
  },
55
57
  "border": {
56
58
  "primary": "#3B3B3B",
@@ -62,7 +64,8 @@
62
64
  "focus": "#FD2330",
63
65
  "focus-02": "#ffffff",
64
66
  "focus-03": "#FD2330",
65
- "focus-04": "#3A8352"
67
+ "focus-04": "#3A8352",
68
+ "brand": "#DA000D"
66
69
  },
67
70
  "background": {
68
71
  "primary": "#141414"
package/tokens/colors-light-mode.json CHANGED
@@ -50,7 +50,9 @@
50
50
  "overlay": "#05050580",
51
51
  "quiz": "#EA3E3F",
52
52
  "korsord": "#8BB6E8",
53
- "sudoko": "#90D0BD"
53
+ "sudoko": "#90D0BD",
54
+ "brand": "#DA000D",
55
+ "inverted": "#141414"
54
56
  },
55
57
  "border": {
56
58
  "primary": "#08080821",
@@ -62,7 +64,8 @@
62
64
  "focus": "#DA000D",
63
65
  "focus-02": "#141414",
64
66
  "focus-03": "#DA000D",
65
- "focus-04": "#3A8352"
67
+ "focus-04": "#3A8352",
68
+ "brand": "#DA000D"
66
69
  },
67
70
  "background": {
68
71
  "primary": "#ffffff"
package/tokens/typography-list.json CHANGED
@@ -26,6 +26,8 @@
26
26
  "detailteaser-large-storRubrik-opinion": "'detailteaser-large-storRubrik-opinion'",
27
27
  "detailstandard-button-xlarge": "'detailstandard-button-xlarge'",
28
28
  "detailteaser-large-rightcol": "'detailteaser-large-rightcol'",
29
+ "detailteaser-baotaxl": "'detailteaser-baotaxl'",
30
+ "detailteaser-tipsa": "'detailteaser-tipsa'",
29
31
  "expressiveheading01": "'expressiveheading01'",
30
32
  "expressiveheading02": "'expressiveheading02'",
31
33
  "expressiveheading03": "'expressiveheading03'",