@bonniernews/dn-design-system-web 26.0.2 → 27.0.1

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 +19 -0
  2. package/foundations/colors.scss +0 -2
  3. package/foundations/gradients.scss +8 -15
  4. package/foundations/helpers/gradients.scss +6 -0
  5. package/foundations/helpers/shadows.scss +6 -0
  6. package/foundations/shadows.scss +8 -15
  7. package/foundations/variables/colorsDnDark.scss +16 -16
  8. package/foundations/variables/colorsDnLight.scss +12 -12
  9. package/foundations/variables/shadowsDnDark.scss +14 -14
  10. package/foundations/variables/shadowsDnLight.scss +4 -4
  11. package/package.json +1 -1
  12. package/variables/colors-dark-mode.json +16 -16
  13. package/variables/colors-light-mode.json +12 -12
package/CHANGELOG.md CHANGED
@@ -4,6 +4,25 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [27.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@27.0.0...@bonniernews/dn-design-system-web@27.0.1) (2025-02-10)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** support color scheme ([#1600](https://github.com/BonnierNews/dn-design-system/issues/1600)) ([bd35beb](https://github.com/BonnierNews/dn-design-system/commit/bd35beb28a02bbbb486869301808deb6cf800084))
13
+
14
+ ## [27.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@26.0.2...@bonniernews/dn-design-system-web@27.0.0) (2025-02-09)
15
+
16
+
17
+ ### ⚠ BREAKING CHANGES
18
+
19
+ * update variables (#1601)
20
+
21
+ ### Maintenance
22
+
23
+ * prerelease packages ([d61250d](https://github.com/BonnierNews/dn-design-system/commit/d61250d70c8d4f05701eba31feecd6488105e0b7))
24
+ * update variables ([#1601](https://github.com/BonnierNews/dn-design-system/issues/1601)) ([221b0b5](https://github.com/BonnierNews/dn-design-system/commit/221b0b5bae56b8dcfee1c461341c8c3ddcf3f731))
25
+
7
26
  ## [26.0.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@26.0.1...@bonniernews/dn-design-system-web@26.0.2) (2025-02-05)
8
27
 
9
28
 
package/foundations/colors.scss CHANGED
@@ -19,8 +19,6 @@ html.support-color-scheme:not(.ds-light) {
19
19
  }
20
20
 
21
21
  // for manually switching on dark mode
22
- // dnDark should only be used in storybook otherwise use ds-dark
23
- .dnDark,
24
22
  .ds-dark {
25
23
  @include get-dark-color-scheme();
26
24
  }
package/foundations/gradients.scss CHANGED
@@ -1,25 +1,18 @@
1
- @use "sass:map";
2
- @use "sass:meta";
3
1
  @use "./helpers/gradients.scss" as *;
4
- @use "./variables/gradientsDnLight";
5
- @use "./variables/gradientsDnDark";
6
2
 
7
3
  html,
8
4
  .ds-light {
9
- @each $name, $value in meta.module-variables("gradientsDnLight") {
10
- @each $key in map.keys($value) {
11
- @include ds-gradient($key, light);
12
- }
5
+ @include get-gradient-scheme();
6
+ }
7
+
8
+ // enable listening to OS dark mode by setting class support-color-scheme on html-tag
9
+ html.support-color-scheme:not(.ds-light) {
10
+ @media (prefers-color-scheme: dark) {
11
+ @include get-gradient-scheme(dark);
13
12
  }
14
13
  }
15
14
 
16
15
  // for manually switching on dark mode
17
- // dnDark should only be used in storybook otherwise use ds-dark
18
- .dnDark,
19
16
  .ds-dark {
20
- @each $name, $value in meta.module-variables("gradientsDnDark") {
21
- @each $key in map.keys($value) {
22
- @include ds-gradient($key, dark);
23
- }
24
- }
17
+ @include get-gradient-scheme(dark);
25
18
  }
package/foundations/helpers/gradients.scss CHANGED
@@ -31,3 +31,9 @@
31
31
  @function _get-stop($map, $key, $index) {
32
32
  @return map.get(list.nth(map.get($map, "stops"), $index), $key);
33
33
  }
34
+
35
+ @mixin get-gradient-scheme($type: light) {
36
+ @each $key in map.keys($gradientsDnLight) {
37
+ @include ds-gradient($key, $type);
38
+ }
39
+ }
package/foundations/helpers/shadows.scss CHANGED
@@ -27,3 +27,9 @@
27
27
  @function ds-shadow-get-box-shadow($component) {
28
28
  @return var($component);
29
29
  }
30
+
31
+ @mixin get-shadow-scheme($type: light) {
32
+ @each $key in map.keys($shadowsDnLight) {
33
+ @include ds-shadow($key, $type);
34
+ }
35
+ }
package/foundations/shadows.scss CHANGED
@@ -1,25 +1,18 @@
1
- @use "sass:map";
2
- @use "sass:meta";
3
1
  @use "./helpers/shadows.scss" as *;
4
- @use "./variables/shadowsDnLight";
5
- @use "./variables/shadowsDnDark";
6
2
 
7
3
  html,
8
4
  .ds-light {
9
- @each $name, $value in meta.module-variables("shadowsDnLight") {
10
- @each $key in map.keys($value) {
11
- @include ds-shadow($key, light);
12
- }
5
+ @include get-shadow-scheme();
6
+ }
7
+
8
+ // enable listening to OS dark mode by setting class support-color-scheme on html-tag
9
+ html.support-color-scheme:not(.ds-light) {
10
+ @media (prefers-color-scheme: dark) {
11
+ @include get-shadow-scheme(dark);
13
12
  }
14
13
  }
15
14
 
16
15
  // for manually switching on dark mode
17
- // dnDark should only be used in storybook otherwise use ds-dark
18
- .dnDark,
19
16
  .ds-dark {
20
- @each $name, $value in meta.module-variables("shadowsDnDark") {
21
- @each $key in map.keys($value) {
22
- @include ds-shadow($key, dark);
23
- }
24
- }
17
+ @include get-shadow-scheme(dark);
25
18
  }
package/foundations/variables/colorsDnDark.scss CHANGED
@@ -1,8 +1,8 @@
1
- $ds-hex-dark-surface-foreground: #000000;
2
- $ds-hex-dark-surface-primary: #0f0f0f;
3
- $ds-hex-dark-surface-primary-raised-soft: #171717;
4
- $ds-hex-dark-surface-primary-raised-strong: #212121;
5
- $ds-hex-dark-surface-primary-elevated: #0f0f0f;
1
+ $ds-hex-dark-surface-foreground: #0d0d0d;
2
+ $ds-hex-dark-surface-primary: #171717;
3
+ $ds-hex-dark-surface-primary-raised-soft: #242424;
4
+ $ds-hex-dark-surface-primary-raised-strong: #333333;
5
+ $ds-hex-dark-surface-primary-elevated: #333333;
6
6
  $ds-hex-dark-surface-primaryinvert: #ffffff;
7
7
  $ds-hex-dark-surface-primaryinvert-raised-soft: rgba(5, 5, 5, 0.05);
8
8
  $ds-hex-dark-surface-primaryinvert-elevated: #ffffff;
@@ -14,20 +14,20 @@ $ds-hex-dark-surface-overlay: rgba(5, 5, 5, 0.5);
14
14
  $ds-hex-dark-surface-ad-yellow: #ffeac6;
15
15
  $ds-hex-dark-surface-native-article: #2b2b2b;
16
16
  $ds-hex-dark-surface-quiz: #ea3e3f;
17
- $ds-hex-dark-border-primary: rgba(255, 255, 255, 0.15);
18
- $ds-hex-dark-border-primary-strong: rgba(255, 255, 255, 0.39);
17
+ $ds-hex-dark-border-primary: rgba(255, 255, 255, 0.1);
18
+ $ds-hex-dark-border-primary-strong: rgba(255, 255, 255, 0.25);
19
19
  $ds-hex-dark-border-primary-strongest: #ffffff;
20
20
  $ds-hex-dark-border-primaryinvert: rgba(5, 5, 5, 0.13);
21
21
  $ds-hex-dark-border-primaryinvert-strong: rgba(5, 5, 5, 0.5);
22
- $ds-hex-dark-border-primaryinvert-strongest: #000000;
22
+ $ds-hex-dark-border-primaryinvert-strongest: #0d0d0d;
23
23
  $ds-hex-dark-border-brand: #fd2330;
24
24
  $ds-hex-dark-border-culture: #4293d7;
25
- $ds-hex-dark-text-primary: #e8e8e8;
25
+ $ds-hex-dark-text-primary: #e5e5e5;
26
26
  $ds-hex-dark-text-primary-subtle: #b2b2b2;
27
27
  $ds-hex-dark-text-primary-disabled: #b2b2b2;
28
- $ds-hex-dark-text-primaryinvert: #000000;
28
+ $ds-hex-dark-text-primaryinvert: #0d0d0d;
29
29
  $ds-hex-dark-text-primaryinvert-subtle: #595959;
30
- $ds-hex-dark-text-primaryinvert-disabled: #000000;
30
+ $ds-hex-dark-text-primaryinvert-disabled: #0d0d0d;
31
31
  $ds-hex-dark-text-brand: #fd2330;
32
32
  $ds-hex-dark-text-culture: #4293d7;
33
33
  $ds-hex-dark-text-critical: #fd2330;
@@ -62,19 +62,19 @@ $ds-hex-dark-culture-900: #0e314e;
62
62
  $ds-hex-dark-culture-1000: #152029;
63
63
  $ds-hex-dark-culture-1100: #05101a;
64
64
  $ds-hex-dark-neutral-100: #f2f2f2;
65
- $ds-hex-dark-neutral-200: #e8e8e8;
65
+ $ds-hex-dark-neutral-200: #e5e5e5;
66
66
  $ds-hex-dark-neutral-300: #cdcdcd;
67
67
  $ds-hex-dark-neutral-400: #b2b2b2;
68
68
  $ds-hex-dark-neutral-500: #8c8c8c;
69
69
  $ds-hex-dark-neutral-600: #666666;
70
70
  $ds-hex-dark-neutral-700: #595959;
71
71
  $ds-hex-dark-neutral-800: #363636;
72
- $ds-hex-dark-neutral-900: #212121;
73
- $ds-hex-dark-neutral-1000: #171717;
74
- $ds-hex-dark-neutral-1100: #0f0f0f;
72
+ $ds-hex-dark-neutral-900: #333333;
73
+ $ds-hex-dark-neutral-1000: #242424;
74
+ $ds-hex-dark-neutral-1100: #171717;
75
75
  $ds-hex-dark-neutral-white: #ffffff;
76
76
  $ds-hex-dark-neutral-050: #f8f8f8;
77
- $ds-hex-dark-neutral-black: #000000;
77
+ $ds-hex-dark-neutral-black: #0d0d0d;
78
78
  $ds-hex-dark-bright-neutral-alpha-100: rgba(5, 5, 5, 0.05);
79
79
  $ds-hex-dark-bright-neutral-alpha-200: rgba(5, 5, 5, 0.13);
80
80
  $ds-hex-dark-bright-neutral-alpha-300: rgba(5, 5, 5, 0.2);
package/foundations/variables/colorsDnLight.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  $ds-hex-surface-foreground: #f8f8f8;
2
2
  $ds-hex-surface-primary: #ffffff;
3
3
  $ds-hex-surface-primary-raised-soft: #f2f2f2;
4
- $ds-hex-surface-primary-raised-strong: #e8e8e8;
4
+ $ds-hex-surface-primary-raised-strong: #e5e5e5;
5
5
  $ds-hex-surface-primary-elevated: #ffffff;
6
- $ds-hex-surface-primaryinvert: #000000;
6
+ $ds-hex-surface-primaryinvert: #0d0d0d;
7
7
  $ds-hex-surface-primaryinvert-raised-soft: #ffffff0d;
8
- $ds-hex-surface-primaryinvert-elevated: #171717;
8
+ $ds-hex-surface-primaryinvert-elevated: #242424;
9
9
  $ds-hex-surface-brand: #da000d;
10
10
  $ds-hex-surface-success: #3a8352;
11
11
  $ds-hex-surface-culture: #227ac3;
@@ -14,15 +14,15 @@ $ds-hex-surface-overlay: #05050580;
14
14
  $ds-hex-surface-ad-yellow: #ffeac6;
15
15
  $ds-hex-surface-native-article: #ededed;
16
16
  $ds-hex-surface-quiz: #ea3e3f;
17
- $ds-hex-border-primary: #05050521;
18
- $ds-hex-border-primary-strong: #05050580;
19
- $ds-hex-border-primary-strongest: #000000;
17
+ $ds-hex-border-primary: #0505051a;
18
+ $ds-hex-border-primary-strong: #05050540;
19
+ $ds-hex-border-primary-strongest: #0d0d0d;
20
20
  $ds-hex-border-primaryinvert: #ffffff26;
21
21
  $ds-hex-border-primaryinvert-strong: #ffffff63;
22
22
  $ds-hex-border-primaryinvert-strongest: #ffffff;
23
23
  $ds-hex-border-brand: #da000d;
24
24
  $ds-hex-border-culture: #227ac3;
25
- $ds-hex-text-primary: #000000;
25
+ $ds-hex-text-primary: #0d0d0d;
26
26
  $ds-hex-text-primary-subtle: #595959;
27
27
  $ds-hex-text-primary-disabled: #595959;
28
28
  $ds-hex-text-primaryinvert: #f2f2f2;
@@ -62,19 +62,19 @@ $ds-hex-culture-900: #0e314e;
62
62
  $ds-hex-culture-1000: #152029;
63
63
  $ds-hex-culture-1100: #05101a;
64
64
  $ds-hex-neutral-100: #f2f2f2;
65
- $ds-hex-neutral-200: #e8e8e8;
65
+ $ds-hex-neutral-200: #e5e5e5;
66
66
  $ds-hex-neutral-300: #cdcdcd;
67
67
  $ds-hex-neutral-400: #b2b2b2;
68
68
  $ds-hex-neutral-500: #8c8c8c;
69
69
  $ds-hex-neutral-600: #666666;
70
70
  $ds-hex-neutral-700: #595959;
71
71
  $ds-hex-neutral-800: #363636;
72
- $ds-hex-neutral-900: #212121;
73
- $ds-hex-neutral-1000: #171717;
74
- $ds-hex-neutral-1100: #0f0f0f;
72
+ $ds-hex-neutral-900: #333333;
73
+ $ds-hex-neutral-1000: #242424;
74
+ $ds-hex-neutral-1100: #171717;
75
75
  $ds-hex-neutral-white: #ffffff;
76
76
  $ds-hex-neutral-050: #f8f8f8;
77
- $ds-hex-neutral-black: #000000;
77
+ $ds-hex-neutral-black: #0d0d0d;
78
78
  $ds-hex-bright-neutral-alpha-100: #0505050d;
79
79
  $ds-hex-bright-neutral-alpha-200: #05050521;
80
80
  $ds-hex-bright-neutral-alpha-300: #05050533;
package/foundations/variables/shadowsDnDark.scss CHANGED
@@ -1,30 +1,30 @@
1
1
  $shadowsDnDark: (
2
2
  elevation-xs: (
3
3
  x: 0,
4
- y: 0,
5
- blur: 0,
6
- spread: 0,
7
- color: #0505051a
4
+ y: 1,
5
+ blur: 2,
6
+ spread: 1,
7
+ color: rgba(13, 13, 13, 0.25)
8
8
  ),
9
9
  elevation-sm: (
10
10
  x: 0,
11
- y: 0,
12
- blur: 0,
13
- spread: 0,
14
- color: #0505051a
11
+ y: 2,
12
+ blur: 4,
13
+ spread: 1,
14
+ color: rgba(13, 13, 13, 0.25)
15
15
  ),
16
16
  elevation-md: (
17
17
  x: 0,
18
- y: 0,
19
- blur: 0,
18
+ y: 4,
19
+ blur: 8,
20
20
  spread: 0,
21
- color: #0505051a
21
+ color: rgba(13, 13, 13, 0.25)
22
22
  ),
23
23
  elevation-lg: (
24
24
  x: 0,
25
- y: 0,
26
- blur: 0,
25
+ y: 4,
26
+ blur: 16,
27
27
  spread: 0,
28
- color: #0000001a
28
+ color: rgba(13, 13, 13, 0.25)
29
29
  )
30
30
  );
package/foundations/variables/shadowsDnLight.scss CHANGED
@@ -4,27 +4,27 @@ $shadowsDnLight: (
4
4
  y: 1,
5
5
  blur: 2,
6
6
  spread: 1,
7
- color: #0505051a
7
+ color: rgba(13, 13, 13, 0.15)
8
8
  ),
9
9
  elevation-sm: (
10
10
  x: 0,
11
11
  y: 2,
12
12
  blur: 4,
13
13
  spread: 1,
14
- color: #0505051a
14
+ color: rgba(13, 13, 13, 0.15)
15
15
  ),
16
16
  elevation-md: (
17
17
  x: 0,
18
18
  y: 4,
19
19
  blur: 8,
20
20
  spread: 0,
21
- color: #0505051a
21
+ color: rgba(13, 13, 13, 0.15)
22
22
  ),
23
23
  elevation-lg: (
24
24
  x: 0,
25
25
  y: 4,
26
26
  blur: 16,
27
27
  spread: 0,
28
- color: #0000001a
28
+ color: rgba(13, 13, 13, 0.15)
29
29
  )
30
30
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "26.0.2",
3
+ "version": "27.0.1",
4
4
  "description": "DN design system for web.",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/variables/colors-dark-mode.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "surface": {
3
- "foreground": "#000000",
4
- "primary": "#0f0f0f",
5
- "primary-raised-soft": "#171717",
6
- "primary-raised-strong": "#212121",
7
- "primary-elevated": "#0f0f0f",
3
+ "foreground": "#0d0d0d",
4
+ "primary": "#171717",
5
+ "primary-raised-soft": "#242424",
6
+ "primary-raised-strong": "#333333",
7
+ "primary-elevated": "#333333",
8
8
  "primaryinvert": "#ffffff",
9
9
  "primaryinvert-raised-soft": "rgba(5, 5, 5, 0.05)",
10
10
  "primaryinvert-elevated": "#ffffff",
@@ -18,22 +18,22 @@
18
18
  "quiz": "#ea3e3f"
19
19
  },
20
20
  "border": {
21
- "primary": "rgba(255, 255, 255, 0.15)",
22
- "primary-strong": "rgba(255, 255, 255, 0.39)",
21
+ "primary": "rgba(255, 255, 255, 0.1)",
22
+ "primary-strong": "rgba(255, 255, 255, 0.25)",
23
23
  "primary-strongest": "#ffffff",
24
24
  "primaryinvert": "rgba(5, 5, 5, 0.13)",
25
25
  "primaryinvert-strong": "rgba(5, 5, 5, 0.5)",
26
- "primaryinvert-strongest": "#000000",
26
+ "primaryinvert-strongest": "#0d0d0d",
27
27
  "brand": "#fd2330",
28
28
  "culture": "#4293d7"
29
29
  },
30
30
  "text": {
31
- "primary": "#e8e8e8",
31
+ "primary": "#e5e5e5",
32
32
  "primary-subtle": "#b2b2b2",
33
33
  "primary-disabled": "#b2b2b2",
34
- "primaryinvert": "#000000",
34
+ "primaryinvert": "#0d0d0d",
35
35
  "primaryinvert-subtle": "#595959",
36
- "primaryinvert-disabled": "#000000",
36
+ "primaryinvert-disabled": "#0d0d0d",
37
37
  "brand": "#fd2330",
38
38
  "culture": "#4293d7",
39
39
  "critical": "#fd2330",
@@ -76,19 +76,19 @@
76
76
  },
77
77
  "neutral": {
78
78
  "100": "#f2f2f2",
79
- "200": "#e8e8e8",
79
+ "200": "#e5e5e5",
80
80
  "300": "#cdcdcd",
81
81
  "400": "#b2b2b2",
82
82
  "500": "#8c8c8c",
83
83
  "600": "#666666",
84
84
  "700": "#595959",
85
85
  "800": "#363636",
86
- "900": "#212121",
87
- "1000": "#171717",
88
- "1100": "#0f0f0f",
86
+ "900": "#333333",
87
+ "1000": "#242424",
88
+ "1100": "#171717",
89
89
  "white": "#ffffff",
90
90
  "050": "#f8f8f8",
91
- "black": "#000000"
91
+ "black": "#0d0d0d"
92
92
  },
93
93
  "bright-neutral-alpha": {
94
94
  "100": "rgba(5, 5, 5, 0.05)",
package/variables/colors-light-mode.json CHANGED
@@ -3,11 +3,11 @@
3
3
  "foreground": "#f8f8f8",
4
4
  "primary": "#ffffff",
5
5
  "primary-raised-soft": "#f2f2f2",
6
- "primary-raised-strong": "#e8e8e8",
6
+ "primary-raised-strong": "#e5e5e5",
7
7
  "primary-elevated": "#ffffff",
8
- "primaryinvert": "#000000",
8
+ "primaryinvert": "#0d0d0d",
9
9
  "primaryinvert-raised-soft": "#ffffff0d",
10
- "primaryinvert-elevated": "#171717",
10
+ "primaryinvert-elevated": "#242424",
11
11
  "brand": "#da000d",
12
12
  "success": "#3a8352",
13
13
  "culture": "#227ac3",
@@ -18,9 +18,9 @@
18
18
  "quiz": "#ea3e3f"
19
19
  },
20
20
  "border": {
21
- "primary": "#05050521",
22
- "primary-strong": "#05050580",
23
- "primary-strongest": "#000000",
21
+ "primary": "#0505051a",
22
+ "primary-strong": "#05050540",
23
+ "primary-strongest": "#0d0d0d",
24
24
  "primaryinvert": "#ffffff26",
25
25
  "primaryinvert-strong": "#ffffff63",
26
26
  "primaryinvert-strongest": "#ffffff",
@@ -28,7 +28,7 @@
28
28
  "culture": "#227ac3"
29
29
  },
30
30
  "text": {
31
- "primary": "#000000",
31
+ "primary": "#0d0d0d",
32
32
  "primary-subtle": "#595959",
33
33
  "primary-disabled": "#595959",
34
34
  "primaryinvert": "#f2f2f2",
@@ -76,19 +76,19 @@
76
76
  },
77
77
  "neutral": {
78
78
  "100": "#f2f2f2",
79
- "200": "#e8e8e8",
79
+ "200": "#e5e5e5",
80
80
  "300": "#cdcdcd",
81
81
  "400": "#b2b2b2",
82
82
  "500": "#8c8c8c",
83
83
  "600": "#666666",
84
84
  "700": "#595959",
85
85
  "800": "#363636",
86
- "900": "#212121",
87
- "1000": "#171717",
88
- "1100": "#0f0f0f",
86
+ "900": "#333333",
87
+ "1000": "#242424",
88
+ "1100": "#171717",
89
89
  "white": "#ffffff",
90
90
  "050": "#f8f8f8",
91
- "black": "#000000"
91
+ "black": "#0d0d0d"
92
92
  },
93
93
  "bright-neutral-alpha": {
94
94
  "100": "#0505050d",