@bonniernews/dn-design-system-web 15.2.12 → 15.2.14

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/image-caption/image-caption.njk +2 -2
  3. package/components/teaser-image/teaser-image.njk +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.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.13...@bonniernews/dn-design-system-web@15.2.14) (2024-07-04)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** hide photo bylines for screen readers ([#1325](https://github.com/BonnierNews/dn-design-system/issues/1325)) ([fe3254b](https://github.com/BonnierNews/dn-design-system/commit/fe3254b955a0f847c3d3e4bc2fb190f98c4e6f3d))
13
+
14
+ ## [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)
15
+
16
+
17
+ ### Maintenance
18
+
19
+ * **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))
20
+ * prerelease packages ([27b604f](https://github.com/BonnierNews/dn-design-system/commit/27b604f4fc12546cc0b653e6d40a49b9bae8e082))
21
+
7
22
  ## [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
23
 
9
24
 
package/components/image-caption/image-caption.njk CHANGED
@@ -10,9 +10,9 @@
10
10
  params.classNames if params.classNames
11
11
  ] | join(" ") %}
12
12
 
13
- <figcaption class="{{ classes }}" {{- attributes | safe }}>
13
+ <figcaption class="{{ classes }}" {{- attributes | safe }} aria-hidden="true">
14
14
  {% if params.caption %}
15
- <span aria-hidden="true">{{ params.caption | safe }}</span>
15
+ <span>{{ params.caption | safe }}</span>
16
16
  {% endif %}
17
17
  {% if params.author %}
18
18
  {% set authorText = ((params.imageType | capitalize) + ": " + params.author) if params.imageType else params.author %}
package/components/teaser-image/teaser-image.njk CHANGED
@@ -12,7 +12,7 @@
12
12
  {{ params.imageHtml | safe }}
13
13
 
14
14
  {% if params.byline %}
15
- <figcaption class={{ componentClassName + "__byline" }}>{{ params.byline }}</figcaption>
15
+ <figcaption class={{ componentClassName + "__byline" }} aria-hidden="true">{{ params.byline }}</figcaption>
16
16
  {% endif %}
17
17
  </figure>
18
18
  {% endmacro %}
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.14",
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'",