@bonniernews/dn-design-system-web 14.3.4 → 14.3.6

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 +15 -0
  2. package/components/list-item/list-item.scss +12 -0
  3. package/foundations/variables/colorsCssVariables.scss +2 -1
  4. package/foundations/variables/colorsDnDarkTokens.scss +2 -1
  5. package/foundations/variables/colorsDnLightTokens.scss +2 -1
  6. package/foundations/variables/typographyTokensScreenExtraLarge.scss +3 -3
  7. package/foundations/variables/typographyTokensScreenLarge.scss +3 -3
  8. package/foundations/variables/typographyTokensScreenSmall.scss +2 -2
  9. package/package.json +1 -1
  10. package/tokens/colors-css-variables.json +2 -1
  11. package/tokens/colors-dark-mode.json +3 -2
  12. package/tokens/colors-light-mode.json +3 -2
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
+ ## [14.3.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.5...@bonniernews/dn-design-system-web@14.3.6) (2024-03-19)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** semibold text on image list item ([#1251](https://github.com/BonnierNews/dn-design-system/issues/1251)) ([e623514](https://github.com/BonnierNews/dn-design-system/commit/e623514d5761e60a4d853737dcc7cada0d7dffce))
13
+
14
+ ## [14.3.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.4...@bonniernews/dn-design-system-web@14.3.5) (2024-03-15)
15
+
16
+
17
+ ### Maintenance
18
+
19
+ * **foundations:** update tokens from Figma ([#1247](https://github.com/BonnierNews/dn-design-system/issues/1247)) ([13c450c](https://github.com/BonnierNews/dn-design-system/commit/13c450c200d518f199ad4190d62fce10bf234228))
20
+ * prerelease packages ([51094f1](https://github.com/BonnierNews/dn-design-system/commit/51094f148b5113464f5ea4bf2adc7ef6a6aeda91))
21
+
7
22
  ## [14.3.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.3...@bonniernews/dn-design-system-web@14.3.4) (2024-03-15)
8
23
 
9
24
 
package/components/list-item/list-item.scss CHANGED
@@ -130,6 +130,18 @@ $ds-list-item__icon-size: 24px;
130
130
 
131
131
  + .ds-list-item__titles {
132
132
  margin-left: ds-spacing($ds-s-100);
133
+
134
+ .ds-list-item__title {
135
+ @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
136
+
137
+ @at-root .ds-force-px#{&} {
138
+ @include ds-typography(
139
+ $ds-typography-functional-body02regular,
140
+ $forcePx: true,
141
+ $fontWeight: $ds-fontweight-semibold
142
+ );
143
+ }
144
+ }
133
145
  }
134
146
  }
135
147
 
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -51,7 +51,7 @@ $ds-color-border-focus-02: var(--ds-color-border-focus-02);
51
51
  $ds-color-border-focus-03: var(--ds-color-border-focus-03);
52
52
  $ds-color-border-focus-04: var(--ds-color-border-focus-04);
53
53
  $ds-color-background-primary: var(--ds-color-background-primary);
54
- $ds-color-static-red-200: var(--ds-color-static-red-200);
54
+ $ds-color-static-red-100: var(--ds-color-static-red-100);
55
55
  $ds-color-static-black: var(--ds-color-static-black);
56
56
  $ds-color-static-transparent-black: var(--ds-color-static-transparent-black);
57
57
  $ds-color-static-white: var(--ds-color-static-white);
@@ -69,6 +69,7 @@ $ds-color-static-neutral-100: var(--ds-color-static-neutral-100);
69
69
  $ds-color-static-neutral-500: var(--ds-color-static-neutral-500);
70
70
  $ds-color-static-red-500: var(--ds-color-static-red-500);
71
71
  $ds-color-static-yellow: var(--ds-color-static-yellow);
72
+ $ds-color-static-red-200: var(--ds-color-static-red-200);
72
73
  $ds-color-gradient-content-fade-left: var(--ds-color-gradient-content-fade-left);
73
74
  $ds-color-gradient-content-fade-right: var(--ds-color-gradient-content-fade-right);
74
75
  $ds-color-gradient-content-fade-up: var(--ds-color-gradient-content-fade-up);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -56,7 +56,7 @@ $ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #14141400 0%,
56
56
  $ds-hex-dark-gradient-content-fade-up: linear-gradient(180deg, #14141400 0%, #141414 100%);
57
57
  $ds-hex-dark-gradient-content-fade-up-down: linear-gradient(0deg, #14141400 0%, #141414 100%);
58
58
  $ds-hex-dark-gradient-content-fade-down: linear-gradient(0deg, #14141400 0%, #141414 100%);
59
- $ds-hex-dark-static-red-200: #FAD4D4;
59
+ $ds-hex-dark-static-red-100: #FAD4D4;
60
60
  $ds-hex-dark-static-black: #141414;
61
61
  $ds-hex-dark-static-transparent-black: #14141499;
62
62
  $ds-hex-dark-static-white: #ffffff;
@@ -74,3 +74,4 @@ $ds-hex-dark-static-neutral-100: #EDEDED;
74
74
  $ds-hex-dark-static-neutral-500: #9E9E9E;
75
75
  $ds-hex-dark-static-red-500: #DA000D;
76
76
  $ds-hex-dark-static-yellow: #FFE600;
77
+ $ds-hex-dark-static-red-200: #F6ACAD;
package/foundations/variables/colorsDnLightTokens.scss CHANGED
@@ -51,7 +51,7 @@ $ds-hex-border-focus-02: #141414;
51
51
  $ds-hex-border-focus-03: #DA000D;
52
52
  $ds-hex-border-focus-04: #3A8352;
53
53
  $ds-hex-background-primary: #ffffff;
54
- $ds-hex-static-red-200: #FAD4D4;
54
+ $ds-hex-static-red-100: #FAD4D4;
55
55
  $ds-hex-static-black: #141414;
56
56
  $ds-hex-static-transparent-black: #14141499;
57
57
  $ds-hex-static-white: #ffffff;
@@ -69,6 +69,7 @@ $ds-hex-static-neutral-100: #EDEDED;
69
69
  $ds-hex-static-neutral-500: #9E9E9E;
70
70
  $ds-hex-static-red-500: #DA000D;
71
71
  $ds-hex-static-yellow: #FFE600;
72
+ $ds-hex-static-red-200: #F6ACAD;
72
73
  $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
73
74
  $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
74
75
  $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);
package/foundations/variables/typographyTokensScreenExtraLarge.scss CHANGED
@@ -67,7 +67,7 @@ $typographyTokensScreenExtraLarge: (
67
67
  detailteaser-standard-compact: (
68
68
  fontFamily: "DN Serif Headline",
69
69
  fontWeight: Bold,
70
- lineHeight: 1.1,
70
+ lineHeight: 1.2,
71
71
  fontSize: 24,
72
72
  letterSpacing: 0
73
73
  ),
@@ -192,7 +192,7 @@ $typographyTokensScreenExtraLarge: (
192
192
  fontFamily: "DN Serif Text",
193
193
  fontWeight: Bold,
194
194
  fontSize: 16,
195
- lineHeight: 1.1,
195
+ lineHeight: 1.2,
196
196
  letterSpacing: 0
197
197
  ),
198
198
  expressiveheading02: (
@@ -284,7 +284,7 @@ $typographyTokensScreenExtraLarge: (
284
284
  fontWeight: Regular,
285
285
  fontSize: 12,
286
286
  lineHeight: 1.2,
287
- letterSpacing: 0.2
287
+ letterSpacing: 0
288
288
  ),
289
289
  functionallabel01: (
290
290
  fontFamily: "DN Sans",
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -74,7 +74,7 @@ $typographyTokensScreenLarge: (
74
74
  detailteaser-standard-compact: (
75
75
  fontFamily: "DN Serif Headline",
76
76
  fontWeight: Bold,
77
- lineHeight: 1.1,
77
+ lineHeight: 1.2,
78
78
  fontSize: 24,
79
79
  letterSpacing: 0
80
80
  ),
@@ -193,7 +193,7 @@ $typographyTokensScreenLarge: (
193
193
  fontFamily: "DN Serif Text",
194
194
  fontWeight: Bold,
195
195
  fontSize: 16,
196
- lineHeight: 1.1,
196
+ lineHeight: 1.2,
197
197
  letterSpacing: 0
198
198
  ),
199
199
  expressiveheading02: (
@@ -285,7 +285,7 @@ $typographyTokensScreenLarge: (
285
285
  fontWeight: Regular,
286
286
  fontSize: 12,
287
287
  lineHeight: 1.2,
288
- letterSpacing: 0.2
288
+ letterSpacing: 0
289
289
  ),
290
290
  functionallabel01: (
291
291
  fontFamily: "DN Sans",
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -193,7 +193,7 @@ $typographyTokensScreenSmall: (
193
193
  fontFamily: "DN Serif Text",
194
194
  fontWeight: Bold,
195
195
  fontSize: 16,
196
- lineHeight: 1.1,
196
+ lineHeight: 1.2,
197
197
  letterSpacing: 0
198
198
  ),
199
199
  expressiveheading02: (
@@ -285,7 +285,7 @@ $typographyTokensScreenSmall: (
285
285
  fontWeight: Regular,
286
286
  fontSize: 12,
287
287
  lineHeight: 1.2,
288
- letterSpacing: 0.2
288
+ letterSpacing: 0
289
289
  ),
290
290
  functionallabel01: (
291
291
  fontFamily: "DN Sans",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "14.3.4",
3
+ "version": "14.3.6",
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
@@ -52,7 +52,7 @@
52
52
  "border-focus-03": "var(--ds-color-border-focus-03)",
53
53
  "border-focus-04": "var(--ds-color-border-focus-04)",
54
54
  "background-primary": "var(--ds-color-background-primary)",
55
- "static-red-200": "var(--ds-color-static-red-200)",
55
+ "static-red-100": "var(--ds-color-static-red-100)",
56
56
  "static-black": "var(--ds-color-static-black)",
57
57
  "static-transparent-black": "var(--ds-color-static-transparent-black)",
58
58
  "static-white": "var(--ds-color-static-white)",
@@ -70,6 +70,7 @@
70
70
  "static-neutral-500": "var(--ds-color-static-neutral-500)",
71
71
  "static-red-500": "var(--ds-color-static-red-500)",
72
72
  "static-yellow": "var(--ds-color-static-yellow)",
73
+ "static-red-200": "var(--ds-color-static-red-200)",
73
74
  "gradient-content-fade-left": "var(--ds-color-gradient-content-fade-left)",
74
75
  "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
75
76
  "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",
package/tokens/colors-dark-mode.json CHANGED
@@ -72,7 +72,7 @@
72
72
  "content-fade-down": "linear-gradient(0deg, #14141400 0%, #141414 100%)"
73
73
  },
74
74
  "static": {
75
- "red-200": "#FAD4D4",
75
+ "red-100": "#FAD4D4",
76
76
  "black": "#141414",
77
77
  "transparent-black": "#14141499",
78
78
  "white": "#ffffff",
@@ -89,6 +89,7 @@
89
89
  "neutral-100": "#EDEDED",
90
90
  "neutral-500": "#9E9E9E",
91
91
  "red-500": "#DA000D",
92
- "yellow": "#FFE600"
92
+ "yellow": "#FFE600",
93
+ "red-200": "#F6ACAD"
93
94
  }
94
95
  }
package/tokens/colors-light-mode.json CHANGED
@@ -65,7 +65,7 @@
65
65
  "primary": "#ffffff"
66
66
  },
67
67
  "static": {
68
- "red-200": "#FAD4D4",
68
+ "red-100": "#FAD4D4",
69
69
  "black": "#141414",
70
70
  "transparent-black": "#14141499",
71
71
  "white": "#ffffff",
@@ -82,7 +82,8 @@
82
82
  "neutral-100": "#EDEDED",
83
83
  "neutral-500": "#9E9E9E",
84
84
  "red-500": "#DA000D",
85
- "yellow": "#FFE600"
85
+ "yellow": "#FFE600",
86
+ "red-200": "#F6ACAD"
86
87
  },
87
88
  "gradient": {
88
89
  "content-fade-left": "linear-gradient(90deg, #ffffff00 0%, #ffffff 100%)",