@bonniernews/dn-design-system-web 14.3.3 → 14.3.5

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 (13) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/components/group-header/group-header.scss +9 -3
  3. package/components/list-item/list-item.scss +12 -1
  4. package/foundations/variables/colorsCssVariables.scss +2 -1
  5. package/foundations/variables/colorsDnDarkTokens.scss +2 -1
  6. package/foundations/variables/colorsDnLightTokens.scss +2 -1
  7. package/foundations/variables/typographyTokensScreenExtraLarge.scss +3 -3
  8. package/foundations/variables/typographyTokensScreenLarge.scss +3 -3
  9. package/foundations/variables/typographyTokensScreenSmall.scss +2 -2
  10. package/package.json +1 -1
  11. package/tokens/colors-css-variables.json +2 -1
  12. package/tokens/colors-dark-mode.json +3 -2
  13. 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.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)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **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))
13
+ * prerelease packages ([51094f1](https://github.com/BonnierNews/dn-design-system/commit/51094f148b5113464f5ea4bf2adc7ef6a6aeda91))
14
+
15
+ ## [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)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **web:** move max-height styling to img element ([#1248](https://github.com/BonnierNews/dn-design-system/issues/1248)) ([811da42](https://github.com/BonnierNews/dn-design-system/commit/811da4268bacfbd2753ea01ac3836656ef8594d0))
21
+
7
22
  ## [14.3.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.2...@bonniernews/dn-design-system-web@14.3.3) (2024-03-14)
8
23
 
9
24
 
package/components/group-header/group-header.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  @use "../button-toggle/button-toggle.scss";
3
3
  @use "../icon-button/icon-button.scss";
4
4
 
5
+ $ds-group-header__icon-size: 24px;
6
+
5
7
  .ds-group-header {
6
8
  --group-header-background: #{$ds-color-background-primary};
7
9
  --group-header-color: #{$ds-color-text-primary};
@@ -74,8 +76,8 @@
74
76
  }
75
77
 
76
78
  .ds-group-header__icon {
77
- height: ds-px-to-rem(24px);
78
- width: ds-px-to-rem(24px);
79
+ height: ds-px-to-rem($ds-group-header__icon-size);
80
+ width: ds-px-to-rem($ds-group-header__icon-size);
79
81
  color: var(--group-header-icon-color);
80
82
  }
81
83
 
@@ -120,7 +122,11 @@
120
122
 
121
123
  .ds-group-header__image {
122
124
  margin-left: ds-spacing($ds-s-100);
123
- max-height: 24px;
125
+
126
+ .picture,
127
+ img {
128
+ max-height: ds-px-to-rem($ds-group-header__icon-size);
129
+ }
124
130
 
125
131
  figure {
126
132
  margin: 0;
package/components/list-item/list-item.scss CHANGED
@@ -111,7 +111,18 @@ $ds-list-item__icon-size: 24px;
111
111
  }
112
112
 
113
113
  .ds-list-item__image {
114
- max-height: 24px;
114
+ .picture,
115
+ img {
116
+ max-height: ds-px-to-rem($ds-list-item__icon-size);
117
+ }
118
+
119
+ @at-root .ds-force-px#{&} {
120
+ .picture,
121
+ img {
122
+ height: $ds-list-item__icon-size;
123
+ width: $ds-list-item__icon-size;
124
+ }
125
+ }
115
126
 
116
127
  figure {
117
128
  margin: 0;
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.3",
3
+ "version": "14.3.5",
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%)",