@bonniernews/dn-design-system-web 16.1.2 → 16.2.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 (6) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/components/spinner/spinner.scss +1 -2
  3. package/components/teaser-onsite/teaser-onsite.scss +1 -1
  4. package/foundations/colors.scss +7 -33
  5. package/foundations/helpers/colors.scss +35 -0
  6. package/package.json +1 -1
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
+ ## [16.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.2.0...@bonniernews/dn-design-system-web@16.2.1) (2024-07-18)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** correct spacing on onsite teaser ([#1343](https://github.com/BonnierNews/dn-design-system/issues/1343)) ([10ae8cf](https://github.com/BonnierNews/dn-design-system/commit/10ae8cf6743f313622fb870bd9a59b8d6e4d4eab))
13
+
14
+
15
+ ### Maintenance
16
+
17
+ * **web:** fix update snapshots action ([#1340](https://github.com/BonnierNews/dn-design-system/issues/1340)) ([8f3508e](https://github.com/BonnierNews/dn-design-system/commit/8f3508e499dce3c5bb06944f929e6abb0e1d2be6))
18
+
19
+ ## [16.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.1.2...@bonniernews/dn-design-system-web@16.2.0) (2024-07-17)
20
+
21
+
22
+ ### Features
23
+
24
+ * **web:** enable dark mode if supported ([#1339](https://github.com/BonnierNews/dn-design-system/issues/1339)) ([899bbe5](https://github.com/BonnierNews/dn-design-system/commit/899bbe59d8c513b47fe5e04e2e462ea827c0c6a8))
25
+
7
26
  ## [16.1.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.1.1...@bonniernews/dn-design-system-web@16.1.2) (2024-07-16)
8
27
 
9
28
 
package/components/spinner/spinner.scss CHANGED
@@ -1,5 +1,4 @@
1
- @use "../../foundations/helpers/utilities.scss" as *;
2
- @use "../../foundations/helpers/colors.scss" as *;
1
+ @use "../../foundations/helpers/forward.helpers.scss" as *;
3
2
 
4
3
  $ds-spinner__border-radius: 50%;
5
4
  $ds-spinner__size--l: 40px;
package/components/teaser-onsite/teaser-onsite.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .ds-teaser__text {
24
- margin-top: 0;
24
+ margin-top: ds-spacing($ds-s-025);
25
25
  @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-m);
26
26
  }
27
27
 
package/foundations/colors.scss CHANGED
@@ -9,46 +9,20 @@ html,
9
9
  @each $name, $value in meta.module-variables("colorsDnLightTokens") {
10
10
  --ds-color-#{string.slice($name, 8)}: #{$value};
11
11
  }
12
+ }
12
13
 
13
- // Skip automatic dark mode since majority of dn.se is not adapted
14
- // Better to toggle using .dnDark on adapted views and/or elements
15
- // @media (prefers-color-scheme: dark) {
16
- // @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
17
- // --ds-#{string.slice($name, 9)}: #{$value};
18
- // }
19
- // }
14
+ // enable listening to OS dark mode by setting class support-color-scheme on html-tag
15
+ html.support-color-scheme:not(.ds-light) {
16
+ @media (prefers-color-scheme: dark) {
17
+ @include get-dark-color-scheme();
18
+ }
20
19
  }
21
20
 
22
21
  // for manually switching on dark mode
23
22
  // dnDark should only be used in storybook otherwise use ds-dark
24
23
  .dnDark,
25
24
  .ds-dark {
26
- @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
27
- --ds-color-#{string.slice($name, 13)}: #{$value};
28
- }
29
-
30
- // these are not static so needs to be defined here also
31
- --ds-theme-color: #{$ds-color-component-brand};
32
-
33
- .ds-theme--nyheter {
34
- --ds-theme-color: #{$ds-color-component-brand};
35
- }
36
-
37
- .ds-theme--ekonomi {
38
- --ds-theme-color: #{$ds-color-static-economy};
39
- }
40
-
41
- .ds-theme--kultur {
42
- --ds-theme-color: #{$ds-color-static-kultur};
43
- }
44
-
45
- .ds-theme--sport {
46
- --ds-theme-color: #{$ds-color-static-sport};
47
- }
48
-
49
- .ds-theme--sthlm {
50
- --ds-theme-color: #{$ds-color-static-sthlm};
51
- }
25
+ @include get-dark-color-scheme();
52
26
  }
53
27
 
54
28
  html {
package/foundations/helpers/colors.scss CHANGED
@@ -1,3 +1,38 @@
1
1
  @forward "../variables/colorsCssVariables.scss";
2
2
 
3
+ @use "sass:meta";
4
+ @use "sass:string";
5
+ @use "../variables/colorsCssVariables" as *;
6
+ @use "../variables/colorsDnLightTokens";
7
+ @use "../variables/colorsDnDarkTokens";
8
+
3
9
  $ds-theme-color: var(--ds-theme-color);
10
+
11
+ @mixin get-dark-color-scheme() {
12
+ @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
13
+ --ds-color-#{string.slice($name, 13)}: #{$value};
14
+ }
15
+
16
+ // these are not static so needs to be defined here also
17
+ --ds-theme-color: #{$ds-color-component-brand};
18
+
19
+ .ds-theme--nyheter {
20
+ --ds-theme-color: #{$ds-color-component-brand};
21
+ }
22
+
23
+ .ds-theme--ekonomi {
24
+ --ds-theme-color: #{$ds-color-static-economy};
25
+ }
26
+
27
+ .ds-theme--kultur {
28
+ --ds-theme-color: #{$ds-color-static-kultur};
29
+ }
30
+
31
+ .ds-theme--sport {
32
+ --ds-theme-color: #{$ds-color-static-sport};
33
+ }
34
+
35
+ .ds-theme--sthlm {
36
+ --ds-theme-color: #{$ds-color-static-sthlm};
37
+ }
38
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "16.1.2",
3
+ "version": "16.2.1",
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",