@apple-pie/slice 0.1.15 → 0.1.17
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/README.md
CHANGED
|
@@ -42,7 +42,7 @@ function ThemeToggle() {
|
|
|
42
42
|
|
|
43
43
|
export default function App() {
|
|
44
44
|
return (
|
|
45
|
-
<ThemeProvider system>
|
|
45
|
+
<ThemeProvider system global>
|
|
46
46
|
<Avatar size={32} first="John" last="Appleseed" />
|
|
47
47
|
<ThemeToggle />
|
|
48
48
|
</ThemeProvider>
|
|
@@ -50,7 +50,7 @@ export default function App() {
|
|
|
50
50
|
}
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
`ThemeProvider` is the default theme bootstrap for the library. It sets the active `data-slice-theme` value on the document root, renders a `data-slice-theme-scope` wrapper, and pulls in the packaged theme CSS token files used by components and Storybook.
|
|
53
|
+
`ThemeProvider` is the default theme bootstrap for the library. It sets the active `data-slice-theme` value on the document root, renders a `data-slice-theme-scope` wrapper, and pulls in the packaged theme CSS token files used by components and Storybook. When `global` is enabled, it also applies the active theme's `core-surface-primary` color to the root document element and `document.body` backgrounds.
|
|
54
54
|
|
|
55
55
|
## Package Surface
|
|
56
56
|
|
|
@@ -17,11 +17,16 @@ styleInject_es.styleInject("[data-slice-theme-scope] {\n\t--motion-magnet: cubic
|
|
|
17
17
|
|
|
18
18
|
const darkModeMediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)");
|
|
19
19
|
|
|
20
|
+
function resolveTheme(theme, system) {
|
|
21
|
+
return system ? darkModeMediaQuery.matches ? theme_themes.darkTheme : theme_themes.lightTheme : theme ? theme.includes("dark") ? theme_themes.darkTheme : theme_themes.lightTheme : void 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
20
24
|
exports.ThemeProvider = function(props) {
|
|
21
|
-
const {children: children, theme: theme, system: system} = props;
|
|
25
|
+
const {children: children, theme: theme, system: system, global: global} = props;
|
|
22
26
|
return React.useEffect(() => {
|
|
23
27
|
if (theme) {
|
|
24
|
-
const newTheme = theme
|
|
28
|
+
const newTheme = resolveTheme(theme, !1);
|
|
29
|
+
if (!newTheme) return;
|
|
25
30
|
document.documentElement.dataset.sliceTheme = newTheme.name;
|
|
26
31
|
}
|
|
27
32
|
}, [ theme ]), React.useEffect(() => {
|
|
@@ -38,7 +43,17 @@ exports.ThemeProvider = function(props) {
|
|
|
38
43
|
return darkModeMediaQuery.addEventListener("change", handleSystemThemeChange), () => {
|
|
39
44
|
darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange);
|
|
40
45
|
};
|
|
41
|
-
}, [ system ]),
|
|
46
|
+
}, [ system ]), React.useEffect(() => {
|
|
47
|
+
if (!global) return document.documentElement.style.removeProperty("background-color"),
|
|
48
|
+
void document.body.style.removeProperty("background-color");
|
|
49
|
+
const activeTheme = resolveTheme(theme, system);
|
|
50
|
+
if (!activeTheme) return;
|
|
51
|
+
const backgroundColor = activeTheme.colors["core-surface-primary"];
|
|
52
|
+
return document.documentElement.style.backgroundColor = backgroundColor, document.body.style.backgroundColor = backgroundColor,
|
|
53
|
+
() => {
|
|
54
|
+
document.documentElement.style.removeProperty("background-color"), document.body.style.removeProperty("background-color");
|
|
55
|
+
};
|
|
56
|
+
}, [ global, system, theme ]), jsxRuntime.jsx("div", {
|
|
42
57
|
"data-slice-theme-scope": !0,
|
|
43
58
|
children: children
|
|
44
59
|
});
|
|
@@ -28,11 +28,16 @@ styleInject("[data-slice-theme-scope] {\n\t--motion-magnet: cubic-bezier(0.352,
|
|
|
28
28
|
|
|
29
29
|
const darkModeMediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)");
|
|
30
30
|
|
|
31
|
+
function resolveTheme(theme, system) {
|
|
32
|
+
return system ? darkModeMediaQuery.matches ? darkTheme : lightTheme : theme ? theme.includes("dark") ? darkTheme : lightTheme : void 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
31
35
|
function ThemeProvider(props) {
|
|
32
|
-
const {children: children, theme: theme, system: system} = props;
|
|
36
|
+
const {children: children, theme: theme, system: system, global: global} = props;
|
|
33
37
|
return useEffect(() => {
|
|
34
38
|
if (theme) {
|
|
35
|
-
const newTheme = theme
|
|
39
|
+
const newTheme = resolveTheme(theme, !1);
|
|
40
|
+
if (!newTheme) return;
|
|
36
41
|
document.documentElement.dataset.sliceTheme = newTheme.name;
|
|
37
42
|
}
|
|
38
43
|
}, [ theme ]), useEffect(() => {
|
|
@@ -49,7 +54,17 @@ function ThemeProvider(props) {
|
|
|
49
54
|
return darkModeMediaQuery.addEventListener("change", handleSystemThemeChange), () => {
|
|
50
55
|
darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange);
|
|
51
56
|
};
|
|
52
|
-
}, [ system ]),
|
|
57
|
+
}, [ system ]), useEffect(() => {
|
|
58
|
+
if (!global) return document.documentElement.style.removeProperty("background-color"),
|
|
59
|
+
void document.body.style.removeProperty("background-color");
|
|
60
|
+
const activeTheme = resolveTheme(theme, system);
|
|
61
|
+
if (!activeTheme) return;
|
|
62
|
+
const backgroundColor = activeTheme.colors["core-surface-primary"];
|
|
63
|
+
return document.documentElement.style.backgroundColor = backgroundColor, document.body.style.backgroundColor = backgroundColor,
|
|
64
|
+
() => {
|
|
65
|
+
document.documentElement.style.removeProperty("background-color"), document.body.style.removeProperty("background-color");
|
|
66
|
+
};
|
|
67
|
+
}, [ global, system, theme ]), jsx("div", {
|
|
53
68
|
"data-slice-theme-scope": !0,
|
|
54
69
|
children: children
|
|
55
70
|
});
|