@bonniernews/dn-design-system-web 21.1.0-beta.2 → 21.1.0-beta.3

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 (14) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/components/teaser-breaking/teaser-breaking.scss +4 -0
  3. package/components/teaser-large/teaser-large.scss +5 -0
  4. package/components/teaser-split/teaser-split.scss +2 -0
  5. package/components/teaser-standard/teaser-standard.scss +5 -0
  6. package/foundations/variables/colorsCssVariables.scss +3 -0
  7. package/foundations/variables/colorsDnDarkTokens.scss +3 -0
  8. package/foundations/variables/colorsDnLightTokens.scss +3 -0
  9. package/foundations/variables/metrics.scss +2 -1
  10. package/foundations/variables/typographyTokensScreenSmall.scss +1 -1
  11. package/package.json +1 -1
  12. package/tokens/colors-css-variables.json +3 -0
  13. package/tokens/colors-dark-mode.json +7 -4
  14. package/tokens/colors-light-mode.json +7 -4
package/CHANGELOG.md CHANGED
@@ -4,6 +4,36 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [21.1.0-beta.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.1.0-beta.3) (2024-11-06)
8
+
9
+
10
+ ### Features
11
+
12
+ * **web:** breaking aka nivå3puff till visuella toppar ([#1450](https://github.com/BonnierNews/dn-design-system/issues/1450)) ([5adacb9](https://github.com/BonnierNews/dn-design-system/commit/5adacb9d8b1fadecd615278e63139627f3b88cb7))
13
+ * **web:** nivå1puff till visuella toppar ([#1460](https://github.com/BonnierNews/dn-design-system/issues/1460)) ([7743c3b](https://github.com/BonnierNews/dn-design-system/commit/7743c3bfad040b46921e934570808b33083401ce))
14
+ * **web:** one level of bauta with background color ([9184544](https://github.com/BonnierNews/dn-design-system/commit/91845447403cb2ec5a787fd64c341d620861b148))
15
+ * **web:** one level of bauta with background color ([644acd6](https://github.com/BonnierNews/dn-design-system/commit/644acd6166d7385ac08c930fe725215a9e35fc80))
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **web:** correct spacing teasers ([#1491](https://github.com/BonnierNews/dn-design-system/issues/1491)) ([b2624b8](https://github.com/BonnierNews/dn-design-system/commit/b2624b8311384d38971f82eb84e73560244a4b18))
21
+ * **web:** media box sizing border box ([#1473](https://github.com/BonnierNews/dn-design-system/issues/1473)) ([48aeeca](https://github.com/BonnierNews/dn-design-system/commit/48aeecac1be293bbcb8ece678d562c26c0ec59d6))
22
+
23
+
24
+ ### Maintenance
25
+
26
+ * **deps-dev:** bump @babel/preset-env from 7.25.8 to 7.25.9 ([#1469](https://github.com/BonnierNews/dn-design-system/issues/1469)) ([b9a9884](https://github.com/BonnierNews/dn-design-system/commit/b9a988470f8862d4c010f27a097d9a65af115d2b))
27
+ * **deps-dev:** bump @testing-library/react-native from 12.7.2 to 12.8.0 ([#1477](https://github.com/BonnierNews/dn-design-system/issues/1477)) ([59e489f](https://github.com/BonnierNews/dn-design-system/commit/59e489f4227e83e1d6df43eb9acf6c1ea42db3e3))
28
+ * **deps:** bump @react-native-community/slider from 4.5.4 to 4.5.5 ([#1475](https://github.com/BonnierNews/dn-design-system/issues/1475)) ([c321542](https://github.com/BonnierNews/dn-design-system/commit/c321542bdf60e16f86fc02cae937b301e649bb48))
29
+ * **foundations:** update tokens from Figma ([#1467](https://github.com/BonnierNews/dn-design-system/issues/1467)) ([af2cd99](https://github.com/BonnierNews/dn-design-system/commit/af2cd99ce8ab17494a3e51e34588d25e24a9ef38))
30
+ * prerelease packages ([974fe99](https://github.com/BonnierNews/dn-design-system/commit/974fe99363323771a4284b36a895757fd4c49630))
31
+ * prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
32
+ * **web:** change screenshot location ([#1482](https://github.com/BonnierNews/dn-design-system/issues/1482)) ([472d0df](https://github.com/BonnierNews/dn-design-system/commit/472d0df71292d72206f908b82b45148a3b79cb91))
33
+ * **web:** released version v21.1.0-beta.1 ([9d45c5a](https://github.com/BonnierNews/dn-design-system/commit/9d45c5a4bbcfe53698ca9dffe3e1771422fbcdac))
34
+ * **web:** released version v21.1.0-beta.2 ([49b9324](https://github.com/BonnierNews/dn-design-system/commit/49b9324c7074d6835aab2de9bb7d9e18649f58b6))
35
+ * **web:** visuella-toppar-update-tokens ([#1468](https://github.com/BonnierNews/dn-design-system/issues/1468)) ([943705a](https://github.com/BonnierNews/dn-design-system/commit/943705afb2922c4d32bb4e042cd746857cbd26cf))
36
+
7
37
  ## [21.1.0-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.1...@bonniernews/dn-design-system-web@21.1.0-beta.2) (2024-10-25)
8
38
 
9
39
 
package/components/teaser-breaking/teaser-breaking.scss CHANGED
@@ -35,6 +35,10 @@
35
35
  }
36
36
  }
37
37
 
38
+ .ds-teaser__vignette {
39
+ margin-top: ds-spacing($ds-s-025);
40
+ }
41
+
38
42
  .ds-teaser__title {
39
43
  @include ds-typography($ds-typography-detailteaser-breaking);
40
44
  text-align: center;
package/components/teaser-large/teaser-large.scss CHANGED
@@ -32,6 +32,10 @@
32
32
  }
33
33
  }
34
34
 
35
+ .ds-teaser__vignette {
36
+ margin-top: ds-spacing($ds-s-025);
37
+ }
38
+
35
39
  .ds-teaser__title {
36
40
  @include ds-typography($ds-typography-detailteaser-large);
37
41
  }
@@ -65,6 +69,7 @@
65
69
  position: relative;
66
70
  margin-left: ds-spacing($ds-s-100);
67
71
  margin-bottom: ds-spacing($ds-s-100, "px", true);
72
+ margin-top: ds-spacing($ds-s-025);
68
73
 
69
74
  .picture {
70
75
  position: absolute;
package/components/teaser-split/teaser-split.scss CHANGED
@@ -70,6 +70,8 @@
70
70
  }
71
71
 
72
72
  .ds-teaser__media {
73
+ margin-top: ds-spacing($ds-s-025);
74
+
73
75
  .ds-teaser-image__byline {
74
76
  @include ds-typography($ds-typography-functionalmeta01, $forcePx: true, $lineHeight: $ds-lineheight-l);
75
77
  }
package/components/teaser-standard/teaser-standard.scss CHANGED
@@ -6,6 +6,10 @@
6
6
  padding: ds-spacing($ds-s-075 $ds-s-100 0);
7
7
  overflow: hidden;
8
8
 
9
+ .ds-teaser__vignette {
10
+ margin-top: ds-spacing($ds-s-025);
11
+ }
12
+
9
13
  .ds-teaser__title {
10
14
  @include ds-typography($ds-typography-detailteaser-standard);
11
15
 
@@ -34,6 +38,7 @@
34
38
  }
35
39
 
36
40
  .ds-teaser__media {
41
+ margin-top: ds-spacing($ds-s-025);
37
42
  margin-bottom: ds-spacing($ds-s-100);
38
43
  margin-left: ds-spacing($ds-s-100);
39
44
  float: right;
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -11,6 +11,7 @@ $ds-color-text-brand: var(--ds-color-text-brand);
11
11
  $ds-color-text-body-link: var(--ds-color-text-body-link);
12
12
  $ds-color-text-body-link-visited: var(--ds-color-text-body-link-visited);
13
13
  $ds-color-text-positive: var(--ds-color-text-positive);
14
+ $ds-color-text-culture: var(--ds-color-text-culture);
14
15
  $ds-color-icon-primary: var(--ds-color-icon-primary);
15
16
  $ds-color-icon-primary-02: var(--ds-color-icon-primary-02);
16
17
  $ds-color-icon-secondary: var(--ds-color-icon-secondary);
@@ -21,6 +22,7 @@ $ds-color-icon-on-business: var(--ds-color-icon-on-business);
21
22
  $ds-color-icon-brand: var(--ds-color-icon-brand);
22
23
  $ds-color-icon-on-critical: var(--ds-color-icon-on-critical);
23
24
  $ds-color-icon-on-success: var(--ds-color-icon-on-success);
25
+ $ds-color-icon-culture: var(--ds-color-icon-culture);
24
26
  $ds-color-component-brand: var(--ds-color-component-brand);
25
27
  $ds-color-component-business: var(--ds-color-component-business);
26
28
  $ds-color-component-primary: var(--ds-color-component-primary);
@@ -57,6 +59,7 @@ $ds-color-border-focus-02: var(--ds-color-border-focus-02);
57
59
  $ds-color-border-focus-03: var(--ds-color-border-focus-03);
58
60
  $ds-color-border-focus-04: var(--ds-color-border-focus-04);
59
61
  $ds-color-border-brand: var(--ds-color-border-brand);
62
+ $ds-color-border-culture: var(--ds-color-border-culture);
60
63
  $ds-color-background-primary: var(--ds-color-background-primary);
61
64
  $ds-color-static-red-100: var(--ds-color-static-red-100);
62
65
  $ds-color-static-black: var(--ds-color-static-black);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -11,6 +11,7 @@ $ds-hex-dark-text-brand: #fd2330;
11
11
  $ds-hex-dark-text-body-link: #65a0fc;
12
12
  $ds-hex-dark-text-body-link-visited: #65a0fc;
13
13
  $ds-hex-dark-text-positive: #3a8352;
14
+ $ds-hex-dark-text-culture: #4293d7;
14
15
  $ds-hex-dark-icon-primary: #ededed;
15
16
  $ds-hex-dark-icon-primary-02: #cfcfcf;
16
17
  $ds-hex-dark-icon-secondary: #050505;
@@ -21,6 +22,7 @@ $ds-hex-dark-icon-on-critical: #ffffff;
21
22
  $ds-hex-dark-icon-on-success: #ffffff;
22
23
  $ds-hex-dark-icon-on-business: #ffffff;
23
24
  $ds-hex-dark-icon-brand: #fd2330;
25
+ $ds-hex-dark-icon-culture: #4293d7;
24
26
  $ds-hex-dark-component-brand: #fd2330;
25
27
  $ds-hex-dark-component-business: #3a8352;
26
28
  $ds-hex-dark-component-primary: #ededed;
@@ -57,6 +59,7 @@ $ds-hex-dark-border-focus-02: #ffffff;
57
59
  $ds-hex-dark-border-focus-03: #fd2330;
58
60
  $ds-hex-dark-border-focus-04: #3a8352;
59
61
  $ds-hex-dark-border-brand: #fd2330;
62
+ $ds-hex-dark-border-culture: #4293d7;
60
63
  $ds-hex-dark-background-primary: #141414;
61
64
  $ds-hex-dark-gradient-content-fade-left: linear-gradient(90deg, #05050500 0%, #050505 100%);
62
65
  $ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #05050500 0%, #050505 100%);
package/foundations/variables/colorsDnLightTokens.scss CHANGED
@@ -11,6 +11,7 @@ $ds-hex-text-brand: #da000d;
11
11
  $ds-hex-text-body-link: #4373ce;
12
12
  $ds-hex-text-body-link-visited: #4373ce;
13
13
  $ds-hex-text-positive: #3a8352;
14
+ $ds-hex-text-culture: #227ac3;
14
15
  $ds-hex-icon-primary: #050505;
15
16
  $ds-hex-icon-primary-02: #666666;
16
17
  $ds-hex-icon-secondary: #ffffff;
@@ -21,6 +22,7 @@ $ds-hex-icon-on-business: #ffffff;
21
22
  $ds-hex-icon-brand: #da000d;
22
23
  $ds-hex-icon-on-critical: #ffffff;
23
24
  $ds-hex-icon-on-success: #ffffff;
25
+ $ds-hex-icon-culture: #227ac3;
24
26
  $ds-hex-component-brand: #da000d;
25
27
  $ds-hex-component-business: #3a8352;
26
28
  $ds-hex-component-primary: #141414;
@@ -57,6 +59,7 @@ $ds-hex-border-focus-02: #141414;
57
59
  $ds-hex-border-focus-03: #da000d;
58
60
  $ds-hex-border-focus-04: #3a8352;
59
61
  $ds-hex-border-brand: #da000d;
62
+ $ds-hex-border-culture: #227ac3;
60
63
  $ds-hex-background-primary: #ffffff;
61
64
  $ds-hex-static-red-100: #fad4d4;
62
65
  $ds-hex-static-black: #141414;
package/foundations/variables/metrics.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  $metrics: (
2
2
  border-radius: (
3
3
  x1: 2,
4
- x2: 4
4
+ x2: 4,
5
+ lg: 8
5
6
  ),
6
7
  border-width: (
7
8
  x1: 1,
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -126,7 +126,7 @@ $typographyTokensScreenSmall: (
126
126
  fontFamily: "DN Serif Display",
127
127
  fontWeight: ExtraBold,
128
128
  lineHeight: 1.1,
129
- fontSize: 40,
129
+ fontSize: 36,
130
130
  letterSpacing: 0
131
131
  ),
132
132
  detailteaser-large-opinion: (
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "21.1.0-beta.2",
3
+ "version": "21.1.0-beta.3",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.tsx",
6
6
  "type": "module",
package/tokens/colors-css-variables.json CHANGED
@@ -12,6 +12,7 @@
12
12
  "text-body-link": "var(--ds-color-text-body-link)",
13
13
  "text-body-link-visited": "var(--ds-color-text-body-link-visited)",
14
14
  "text-positive": "var(--ds-color-text-positive)",
15
+ "text-culture": "var(--ds-color-text-culture)",
15
16
  "icon-primary": "var(--ds-color-icon-primary)",
16
17
  "icon-primary-02": "var(--ds-color-icon-primary-02)",
17
18
  "icon-secondary": "var(--ds-color-icon-secondary)",
@@ -22,6 +23,7 @@
22
23
  "icon-brand": "var(--ds-color-icon-brand)",
23
24
  "icon-on-critical": "var(--ds-color-icon-on-critical)",
24
25
  "icon-on-success": "var(--ds-color-icon-on-success)",
26
+ "icon-culture": "var(--ds-color-icon-culture)",
25
27
  "component-brand": "var(--ds-color-component-brand)",
26
28
  "component-business": "var(--ds-color-component-business)",
27
29
  "component-primary": "var(--ds-color-component-primary)",
@@ -58,6 +60,7 @@
58
60
  "border-focus-03": "var(--ds-color-border-focus-03)",
59
61
  "border-focus-04": "var(--ds-color-border-focus-04)",
60
62
  "border-brand": "var(--ds-color-border-brand)",
63
+ "border-culture": "var(--ds-color-border-culture)",
61
64
  "background-primary": "var(--ds-color-background-primary)",
62
65
  "static-red-100": "var(--ds-color-static-red-100)",
63
66
  "static-black": "var(--ds-color-static-black)",
package/tokens/colors-dark-mode.json CHANGED
@@ -12,7 +12,8 @@
12
12
  "brand": "#fd2330",
13
13
  "body-link": "#65a0fc",
14
14
  "body-link-visited": "#65a0fc",
15
- "positive": "#3a8352"
15
+ "positive": "#3a8352",
16
+ "culture": "#4293d7"
16
17
  },
17
18
  "icon": {
18
19
  "primary": "#ededed",
@@ -24,7 +25,8 @@
24
25
  "on-critical": "#ffffff",
25
26
  "on-success": "#ffffff",
26
27
  "on-business": "#ffffff",
27
- "brand": "#fd2330"
28
+ "brand": "#fd2330",
29
+ "culture": "#4293d7"
28
30
  },
29
31
  "component": {
30
32
  "brand": "#fd2330",
@@ -66,7 +68,8 @@
66
68
  "focus-02": "#ffffff",
67
69
  "focus-03": "#fd2330",
68
70
  "focus-04": "#3a8352",
69
- "brand": "#fd2330"
71
+ "brand": "#fd2330",
72
+ "culture": "#4293d7"
70
73
  },
71
74
  "background": {
72
75
  "primary": "#141414"
@@ -100,4 +103,4 @@
100
103
  "red-200": "#f6acad",
101
104
  "red-0": "#fce8e8"
102
105
  }
103
- }
106
+ }
package/tokens/colors-light-mode.json CHANGED
@@ -12,7 +12,8 @@
12
12
  "brand": "#da000d",
13
13
  "body-link": "#4373ce",
14
14
  "body-link-visited": "#4373ce",
15
- "positive": "#3a8352"
15
+ "positive": "#3a8352",
16
+ "culture": "#227ac3"
16
17
  },
17
18
  "icon": {
18
19
  "primary": "#050505",
@@ -24,7 +25,8 @@
24
25
  "on-business": "#ffffff",
25
26
  "brand": "#da000d",
26
27
  "on-critical": "#ffffff",
27
- "on-success": "#ffffff"
28
+ "on-success": "#ffffff",
29
+ "culture": "#227ac3"
28
30
  },
29
31
  "component": {
30
32
  "brand": "#da000d",
@@ -66,7 +68,8 @@
66
68
  "focus-02": "#141414",
67
69
  "focus-03": "#da000d",
68
70
  "focus-04": "#3a8352",
69
- "brand": "#da000d"
71
+ "brand": "#da000d",
72
+ "culture": "#227ac3"
70
73
  },
71
74
  "background": {
72
75
  "primary": "#ffffff"
@@ -99,4 +102,4 @@
99
102
  "content-fade-up": "linear-gradient(180deg, #ffffff00 0%, #ffffff 100%)",
100
103
  "content-fade-down": "linear-gradient(0deg, #ffffff00 0%, #ffffff 100%)"
101
104
  }
102
- }
105
+ }