@bonniernews/dn-design-system-web 16.1.2 → 16.2.0
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.
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [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)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
* **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))
|
|
13
|
+
|
|
7
14
|
## [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
15
|
|
|
9
16
|
|
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
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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
|
-
@
|
|
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 {
|
|
@@ -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