@apple-pie/slice 0.1.16 → 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
|
@@ -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. When `global` is enabled, it also applies the active theme's `core-surface-primary` color to `document.body.
|
|
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
|
|
|
@@ -44,12 +44,15 @@ exports.ThemeProvider = function(props) {
|
|
|
44
44
|
darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange);
|
|
45
45
|
};
|
|
46
46
|
}, [ system ]), React.useEffect(() => {
|
|
47
|
-
if (!global) return
|
|
47
|
+
if (!global) return document.documentElement.style.removeProperty("background-color"),
|
|
48
|
+
void document.body.style.removeProperty("background-color");
|
|
48
49
|
const activeTheme = resolveTheme(theme, system);
|
|
49
|
-
|
|
50
|
+
if (!activeTheme) return;
|
|
51
|
+
const backgroundColor = activeTheme.colors["core-surface-primary"];
|
|
52
|
+
return document.documentElement.style.backgroundColor = backgroundColor, document.body.style.backgroundColor = backgroundColor,
|
|
50
53
|
() => {
|
|
51
|
-
document.body.style.removeProperty("background-color");
|
|
52
|
-
}
|
|
54
|
+
document.documentElement.style.removeProperty("background-color"), document.body.style.removeProperty("background-color");
|
|
55
|
+
};
|
|
53
56
|
}, [ global, system, theme ]), jsxRuntime.jsx("div", {
|
|
54
57
|
"data-slice-theme-scope": !0,
|
|
55
58
|
children: children
|
|
@@ -55,12 +55,15 @@ function ThemeProvider(props) {
|
|
|
55
55
|
darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange);
|
|
56
56
|
};
|
|
57
57
|
}, [ system ]), useEffect(() => {
|
|
58
|
-
if (!global) return
|
|
58
|
+
if (!global) return document.documentElement.style.removeProperty("background-color"),
|
|
59
|
+
void document.body.style.removeProperty("background-color");
|
|
59
60
|
const activeTheme = resolveTheme(theme, system);
|
|
60
|
-
|
|
61
|
+
if (!activeTheme) return;
|
|
62
|
+
const backgroundColor = activeTheme.colors["core-surface-primary"];
|
|
63
|
+
return document.documentElement.style.backgroundColor = backgroundColor, document.body.style.backgroundColor = backgroundColor,
|
|
61
64
|
() => {
|
|
62
|
-
document.body.style.removeProperty("background-color");
|
|
63
|
-
}
|
|
65
|
+
document.documentElement.style.removeProperty("background-color"), document.body.style.removeProperty("background-color");
|
|
66
|
+
};
|
|
64
67
|
}, [ global, system, theme ]), jsx("div", {
|
|
65
68
|
"data-slice-theme-scope": !0,
|
|
66
69
|
children: children
|