@bonniernews/dn-design-system-web 15.2.5 → 15.2.7

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 (20) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/components/teaser-large/teaser-large.njk +1 -3
  3. package/components/teaser-split/teaser-split.njk +1 -3
  4. package/components/teaser-standard/teaser-standard.njk +1 -3
  5. package/foundations/variables/colorsCssVariables.scss +4 -0
  6. package/foundations/variables/colorsDnDarkTokens.scss +4 -0
  7. package/foundations/variables/colorsDnLightTokens.scss +4 -0
  8. package/foundations/variables/spacingDetail.scss +4 -1
  9. package/foundations/variables/spacingDetailList.scss +3 -0
  10. package/foundations/variables/spacingDetailScreenLarge.scss +3 -0
  11. package/foundations/variables/typographyTokensList.scss +1 -0
  12. package/foundations/variables/typographyTokensScreenExtraLarge.scss +7 -1
  13. package/foundations/variables/typographyTokensScreenLarge.scss +7 -1
  14. package/foundations/variables/typographyTokensScreenSmall.scss +7 -1
  15. package/package.json +1 -1
  16. package/tokens/colors-css-variables.json +4 -0
  17. package/tokens/colors-dark-mode.json +6 -2
  18. package/tokens/colors-light-mode.json +6 -2
  19. package/tokens/spacing-detail-list.json +4 -1
  20. package/tokens/typography-list.json +1 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,22 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [15.2.7](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.6...@bonniernews/dn-design-system-web@15.2.7) (2024-05-14)
8
+
9
+ ## [15.2.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.5...@bonniernews/dn-design-system-web@15.2.6) (2024-05-14)
10
+
11
+
12
+ ### Features
13
+
14
+ * **app:** create secondary badge variant ([#1286](https://github.com/BonnierNews/dn-design-system/issues/1286)) ([7771286](https://github.com/BonnierNews/dn-design-system/commit/7771286f5750f823aff39ab611d6b24101330ccd))
15
+
16
+
17
+ ### Maintenance
18
+
19
+ * **foundations:** update tokens ([#1304](https://github.com/BonnierNews/dn-design-system/issues/1304)) ([0a14d5c](https://github.com/BonnierNews/dn-design-system/commit/0a14d5cbf733f6fbf2e848dbe3e1fee7069ad292))
20
+ * prerelease packages ([43f15a9](https://github.com/BonnierNews/dn-design-system/commit/43f15a9065f73821e866ef9acd6b6aeccaf269a0))
21
+ * **web:** remove grade from teasers ([#1301](https://github.com/BonnierNews/dn-design-system/issues/1301)) ([5535110](https://github.com/BonnierNews/dn-design-system/commit/5535110f78fe3e09e39f093b49c976d748e7c2fa))
22
+
7
23
  ## [15.2.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.4...@bonniernews/dn-design-system-web@15.2.5) (2024-05-13)
8
24
 
9
25
 
package/components/teaser-large/teaser-large.njk CHANGED
@@ -3,7 +3,6 @@
3
3
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
4
4
  {% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
5
5
  {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
6
- {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
7
6
 
8
7
  {% macro TeaserLarge(params) %}
9
8
  {% set componentClassName = "ds-teaser" %}
@@ -64,9 +63,8 @@
64
63
  </h2>
65
64
 
66
65
  {% if params.text and params.areaType !== "right" %}
67
- {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim if params.grade else "" %}
68
66
  <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
69
- {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
67
+ {{ TeaserDot({ flashing: params.isFlashingDot }) }}
70
68
  {% if params.sticker %}
71
69
  <span class="ds-teaser__sticker">
72
70
  {{ params.sticker }}
package/components/teaser-split/teaser-split.njk CHANGED
@@ -4,7 +4,6 @@
4
4
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
5
5
  {% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
6
6
  {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
7
- {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
8
7
 
9
8
  {% macro TeaserSplit(params) %}
10
9
  {% set componentClassName = "ds-teaser" %}
@@ -52,9 +51,8 @@
52
51
  </h2>
53
52
 
54
53
  {% if params.text %}
55
- {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim if params.grade else "" %}
56
54
  <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
57
- {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
55
+ {{ TeaserDot({ flashing: params.isFlashingDot }) }}
58
56
  {% if params.sticker %}
59
57
  <span class="ds-teaser__sticker">
60
58
  {{ params.sticker }}
package/components/teaser-standard/teaser-standard.njk CHANGED
@@ -3,7 +3,6 @@
3
3
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
4
4
  {% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
5
5
  {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
6
- {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
7
6
 
8
7
  {% macro TeaserStandard(params) %}
9
8
  {% set componentClassName = "ds-teaser" %}
@@ -61,9 +60,8 @@
61
60
  </h2>
62
61
 
63
62
  {% if params.text and params.areaType !== "right" %}
64
- {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim if params.grade else "" %}
65
63
  <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
66
- {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
64
+ {{ TeaserDot({ flashing: params.isFlashingDot }) }}
67
65
 
68
66
  {% if params.sticker %}
69
67
  <span class="ds-teaser__sticker">
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -40,6 +40,9 @@ $ds-color-surface-background: var(--ds-color-surface-background);
40
40
  $ds-color-surface-raised: var(--ds-color-surface-raised);
41
41
  $ds-color-surface-elevated: var(--ds-color-surface-elevated);
42
42
  $ds-color-surface-overlay: var(--ds-color-surface-overlay);
43
+ $ds-color-surface-quiz: var(--ds-color-surface-quiz);
44
+ $ds-color-surface-korsord: var(--ds-color-surface-korsord);
45
+ $ds-color-surface-sudoko: var(--ds-color-surface-sudoko);
43
46
  $ds-color-border-primary: var(--ds-color-border-primary);
44
47
  $ds-color-border-primary-02: var(--ds-color-border-primary-02);
45
48
  $ds-color-border-primary-03: var(--ds-color-border-primary-03);
@@ -70,6 +73,7 @@ $ds-color-static-neutral-500: var(--ds-color-static-neutral-500);
70
73
  $ds-color-static-red-500: var(--ds-color-static-red-500);
71
74
  $ds-color-static-yellow: var(--ds-color-static-yellow);
72
75
  $ds-color-static-red-200: var(--ds-color-static-red-200);
76
+ $ds-color-static-red-0: var(--ds-color-static-red-0);
73
77
  $ds-color-gradient-content-fade-left: var(--ds-color-gradient-content-fade-left);
74
78
  $ds-color-gradient-content-fade-right: var(--ds-color-gradient-content-fade-right);
75
79
  $ds-color-gradient-content-fade-up: var(--ds-color-gradient-content-fade-up);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -40,6 +40,9 @@ $ds-hex-dark-surface-raised: #2B2B2B;
40
40
  $ds-hex-dark-surface-native-article: #2B2B2B;
41
41
  $ds-hex-dark-surface-elevated: #2B2B2B;
42
42
  $ds-hex-dark-surface-overlay: #05050580;
43
+ $ds-hex-dark-surface-quiz: #EA3E3F;
44
+ $ds-hex-dark-surface-korsord: #8BB6E8;
45
+ $ds-hex-dark-surface-sudoko: #90D0BD;
43
46
  $ds-hex-dark-border-primary: #ffffff21;
44
47
  $ds-hex-dark-border-primary-02: #ffffff66;
45
48
  $ds-hex-dark-border-primary-03: #EDEDED;
@@ -75,3 +78,4 @@ $ds-hex-dark-static-neutral-500: #9E9E9E;
75
78
  $ds-hex-dark-static-red-500: #DA000D;
76
79
  $ds-hex-dark-static-yellow: #FFE600;
77
80
  $ds-hex-dark-static-red-200: #F6ACAD;
81
+ $ds-hex-dark-static-red-0: #FCE8E8;
package/foundations/variables/colorsDnLightTokens.scss CHANGED
@@ -40,6 +40,9 @@ $ds-hex-surface-background: #ffffff;
40
40
  $ds-hex-surface-raised: #EDEDED;
41
41
  $ds-hex-surface-elevated: #ffffff;
42
42
  $ds-hex-surface-overlay: #05050580;
43
+ $ds-hex-surface-quiz: #EA3E3F;
44
+ $ds-hex-surface-korsord: #8BB6E8;
45
+ $ds-hex-surface-sudoko: #90D0BD;
43
46
  $ds-hex-border-primary: #08080821;
44
47
  $ds-hex-border-primary-02: #08080866;
45
48
  $ds-hex-border-primary-03: #050505;
@@ -70,6 +73,7 @@ $ds-hex-static-neutral-500: #9E9E9E;
70
73
  $ds-hex-static-red-500: #DA000D;
71
74
  $ds-hex-static-yellow: #FFE600;
72
75
  $ds-hex-static-red-200: #F6ACAD;
76
+ $ds-hex-static-red-0: #FCE8E8;
73
77
  $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
74
78
  $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
75
79
  $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);
package/foundations/variables/spacingDetail.scss CHANGED
@@ -11,5 +11,8 @@ $spacingDetail: (
11
11
  teaser-vertical-small: 8,
12
12
  teaser-horizontal: 16,
13
13
  teaser-vertical-medium: 12,
14
- direkt-header-bottom: 48
14
+ direkt-header-bottom: 48,
15
+ spacing-sm: 4,
16
+ spacing-md: 8,
17
+ spacing-lg: 16
15
18
  );
package/foundations/variables/spacingDetailList.scss CHANGED
@@ -11,3 +11,6 @@ $ds-s-teaser-vertical-small: teaser-vertical-small;
11
11
  $ds-s-teaser-horizontal: teaser-horizontal;
12
12
  $ds-s-teaser-vertical-medium: teaser-vertical-medium;
13
13
  $ds-s-direkt-header-bottom: direkt-header-bottom;
14
+ $ds-s-spacing-sm: spacing-sm;
15
+ $ds-s-spacing-md: spacing-md;
16
+ $ds-s-spacing-lg: spacing-lg;
package/foundations/variables/spacingDetailScreenLarge.scss CHANGED
@@ -6,6 +6,9 @@ $spacingDetailScreenLarge: (
6
6
  teaser-horizontal: 16,
7
7
  teaser-vertical-medium: 16,
8
8
  direkt-header-bottom: 64,
9
+ spacing-sm: 8,
10
+ spacing-md: 16,
11
+ spacing-lg: 32,
9
12
  outer: 16,
10
13
  outer-negative: -16,
11
14
  gap-vertical-static-medium: 16,
package/foundations/variables/typographyTokensList.scss CHANGED
@@ -24,6 +24,7 @@ $ds-typography-detailteaser-large-compact: 'detailteaser-large-compact';
24
24
  $ds-typography-detailteaser-large-compact-opinion: 'detailteaser-large-compact-opinion';
25
25
  $ds-typography-detailteaser-large-storRubrik-opinion: 'detailteaser-large-storRubrik-opinion';
26
26
  $ds-typography-detailstandard-button-xlarge: 'detailstandard-button-xlarge';
27
+ $ds-typography-detailteaser-large-rightcol: 'detailteaser-large-rightcol';
27
28
  $ds-typography-expressiveheading01: 'expressiveheading01';
28
29
  $ds-typography-expressiveheading02: 'expressiveheading02';
29
30
  $ds-typography-expressiveheading03: 'expressiveheading03';
package/foundations/variables/typographyTokensScreenExtraLarge.scss CHANGED
@@ -149,7 +149,7 @@ $typographyTokensScreenExtraLarge: (
149
149
  fontFamily: "DN Serif Display",
150
150
  fontWeight: Bold,
151
151
  lineHeight: 1.1,
152
- fontSize: 32,
152
+ fontSize: 28,
153
153
  letterSpacing: 0
154
154
  ),
155
155
  detailstandard-button: (
@@ -188,6 +188,12 @@ $typographyTokensScreenExtraLarge: (
188
188
  lineHeight: 1.75,
189
189
  letterSpacing: 0
190
190
  ),
191
+ detailteaser-large-rightcol: (
192
+ fontFamily: "DN Serif Headline",
193
+ fontWeight: Bold,
194
+ fontSize: 22,
195
+ lineHeight: 1.2
196
+ ),
191
197
  expressiveheading01: (
192
198
  fontFamily: "DN Serif Text",
193
199
  fontWeight: Bold,
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -46,7 +46,7 @@ $typographyTokensScreenLarge: (
46
46
  fontFamily: "DN Serif Display",
47
47
  fontWeight: Bold,
48
48
  lineHeight: 1.1,
49
- fontSize: 32,
49
+ fontSize: 28,
50
50
  letterSpacing: 0
51
51
  ),
52
52
  detailarticle-direkt: (
@@ -189,6 +189,12 @@ $typographyTokensScreenLarge: (
189
189
  lineHeight: 1.75,
190
190
  letterSpacing: 0
191
191
  ),
192
+ detailteaser-large-rightcol: (
193
+ fontFamily: "DN Serif Headline",
194
+ fontWeight: Bold,
195
+ fontSize: 22,
196
+ lineHeight: 1.2
197
+ ),
192
198
  expressiveheading01: (
193
199
  fontFamily: "DN Serif Text",
194
200
  fontWeight: Bold,
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -74,7 +74,7 @@ $typographyTokensScreenSmall: (
74
74
  detailmellanrubrik: (
75
75
  fontFamily: "DN Serif Headline",
76
76
  fontWeight: Bold,
77
- fontSize: 20,
77
+ fontSize: 22,
78
78
  lineHeight: 1.2,
79
79
  letterSpacing: 0
80
80
  ),
@@ -189,6 +189,12 @@ $typographyTokensScreenSmall: (
189
189
  lineHeight: 1.75,
190
190
  letterSpacing: 0
191
191
  ),
192
+ detailteaser-large-rightcol: (
193
+ fontFamily: "DN Serif Headline",
194
+ fontWeight: Bold,
195
+ fontSize: 22,
196
+ lineHeight: 1.2
197
+ ),
192
198
  expressiveheading01: (
193
199
  fontFamily: "DN Serif Text",
194
200
  fontWeight: Bold,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "15.2.5",
3
+ "version": "15.2.7",
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
@@ -41,6 +41,9 @@
41
41
  "surface-raised": "var(--ds-color-surface-raised)",
42
42
  "surface-elevated": "var(--ds-color-surface-elevated)",
43
43
  "surface-overlay": "var(--ds-color-surface-overlay)",
44
+ "surface-quiz": "var(--ds-color-surface-quiz)",
45
+ "surface-korsord": "var(--ds-color-surface-korsord)",
46
+ "surface-sudoko": "var(--ds-color-surface-sudoko)",
44
47
  "border-primary": "var(--ds-color-border-primary)",
45
48
  "border-primary-02": "var(--ds-color-border-primary-02)",
46
49
  "border-primary-03": "var(--ds-color-border-primary-03)",
@@ -71,6 +74,7 @@
71
74
  "static-red-500": "var(--ds-color-static-red-500)",
72
75
  "static-yellow": "var(--ds-color-static-yellow)",
73
76
  "static-red-200": "var(--ds-color-static-red-200)",
77
+ "static-red-0": "var(--ds-color-static-red-0)",
74
78
  "gradient-content-fade-left": "var(--ds-color-gradient-content-fade-left)",
75
79
  "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
76
80
  "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",
package/tokens/colors-dark-mode.json CHANGED
@@ -47,7 +47,10 @@
47
47
  "raised": "#2B2B2B",
48
48
  "native-article": "#2B2B2B",
49
49
  "elevated": "#2B2B2B",
50
- "overlay": "#05050580"
50
+ "overlay": "#05050580",
51
+ "quiz": "#EA3E3F",
52
+ "korsord": "#8BB6E8",
53
+ "sudoko": "#90D0BD"
51
54
  },
52
55
  "border": {
53
56
  "primary": "#ffffff21",
@@ -90,6 +93,7 @@
90
93
  "neutral-500": "#9E9E9E",
91
94
  "red-500": "#DA000D",
92
95
  "yellow": "#FFE600",
93
- "red-200": "#F6ACAD"
96
+ "red-200": "#F6ACAD",
97
+ "red-0": "#FCE8E8"
94
98
  }
95
99
  }
package/tokens/colors-light-mode.json CHANGED
@@ -47,7 +47,10 @@
47
47
  "background": "#ffffff",
48
48
  "raised": "#EDEDED",
49
49
  "elevated": "#ffffff",
50
- "overlay": "#05050580"
50
+ "overlay": "#05050580",
51
+ "quiz": "#EA3E3F",
52
+ "korsord": "#8BB6E8",
53
+ "sudoko": "#90D0BD"
51
54
  },
52
55
  "border": {
53
56
  "primary": "#08080821",
@@ -83,7 +86,8 @@
83
86
  "neutral-500": "#9E9E9E",
84
87
  "red-500": "#DA000D",
85
88
  "yellow": "#FFE600",
86
- "red-200": "#F6ACAD"
89
+ "red-200": "#F6ACAD",
90
+ "red-0": "#FCE8E8"
87
91
  },
88
92
  "gradient": {
89
93
  "content-fade-left": "linear-gradient(90deg, #ffffff00 0%, #ffffff 100%)",
package/tokens/spacing-detail-list.json CHANGED
@@ -11,5 +11,8 @@
11
11
  "teaser-vertical-small": "teaser-vertical-small",
12
12
  "teaser-horizontal": "teaser-horizontal",
13
13
  "teaser-vertical-medium": "teaser-vertical-medium",
14
- "direkt-header-bottom": "direkt-header-bottom"
14
+ "direkt-header-bottom": "direkt-header-bottom",
15
+ "spacing-sm": "spacing-sm",
16
+ "spacing-md": "spacing-md",
17
+ "spacing-lg": "spacing-lg"
15
18
  }
package/tokens/typography-list.json CHANGED
@@ -25,6 +25,7 @@
25
25
  "detailteaser-large-compact-opinion": "'detailteaser-large-compact-opinion'",
26
26
  "detailteaser-large-storRubrik-opinion": "'detailteaser-large-storRubrik-opinion'",
27
27
  "detailstandard-button-xlarge": "'detailstandard-button-xlarge'",
28
+ "detailteaser-large-rightcol": "'detailteaser-large-rightcol'",
28
29
  "expressiveheading01": "'expressiveheading01'",
29
30
  "expressiveheading02": "'expressiveheading02'",
30
31
  "expressiveheading03": "'expressiveheading03'",