@bonniernews/dn-design-system-web 15.2.11 → 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 (17) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/components/group-header/group-header.scss +1 -1
  3. package/components/list-item/list-item.scss +1 -1
  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 +1 -1
  8. package/foundations/variables/shadowsDnLightTokens.scss +1 -1
  9. package/foundations/variables/typographyTokensList.scss +2 -0
  10. package/foundations/variables/typographyTokensScreenExtraLarge.scss +14 -0
  11. package/foundations/variables/typographyTokensScreenLarge.scss +14 -0
  12. package/foundations/variables/typographyTokensScreenSmall.scss +14 -0
  13. package/package.json +1 -1
  14. package/tokens/colors-css-variables.json +3 -0
  15. package/tokens/colors-dark-mode.json +6 -3
  16. package/tokens/colors-light-mode.json +5 -2
  17. package/tokens/typography-list.json +2 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,21 @@ 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
+
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)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **web:** group header image updates ([#1320](https://github.com/BonnierNews/dn-design-system/issues/1320)) ([2a684b5](https://github.com/BonnierNews/dn-design-system/commit/2a684b5d6a4aba737e3adb6fce78b0734e6f1d92))
21
+
7
22
  ## [15.2.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.10...@bonniernews/dn-design-system-web@15.2.11) (2024-06-04)
8
23
 
9
24
 
package/components/group-header/group-header.scss CHANGED
@@ -123,7 +123,7 @@ $ds-group-header__icon-size: 24px;
123
123
 
124
124
  .picture,
125
125
  img {
126
- max-height: ds-px-to-rem($ds-group-header__icon-size);
126
+ height: ds-px-to-rem($ds-group-header__icon-size);
127
127
  }
128
128
 
129
129
  figure {
package/components/list-item/list-item.scss CHANGED
@@ -113,7 +113,7 @@ $ds-list-item__icon-size: 24px;
113
113
  .ds-list-item__image {
114
114
  .picture,
115
115
  img {
116
- max-height: ds-px-to-rem($ds-list-item__icon-size);
116
+ height: ds-px-to-rem($ds-list-item__icon-size);
117
117
  }
118
118
 
119
119
  @at-root .ds-force-px#{&} {
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.11",
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'",