braid-design-system
Version:
Themeable design system for the SEEK Group
63 lines (62 loc) • 1.98 kB
JavaScript
import { useState, useEffect } from "react";
import { atoms, vars } from "../../css.mjs";
import { usePlayroomStore } from "./playroomState.mjs";
import { darkMode } from "../css/atoms/sprinkles.css.mjs";
import { useResponsiveValue } from "../components/useResponsiveValue/useResponsiveValue.mjs";
import { useToast } from "../components/useToast/ToastContext.mjs";
import { breakpoints } from "../css/breakpoints.mjs";
function useScope() {
const responsiveValue = useResponsiveValue();
const showToast = useToast();
const playroomState = usePlayroomStore();
const [colorMode, setColorMode] = useState(
"lightMode"
);
useEffect(() => {
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "attributes" && mutation.attributeName === "class") {
setColorMode(
document.documentElement.classList.contains(darkMode) ? "darkMode" : "lightMode"
);
}
}
});
observer.observe(document.documentElement, { attributes: true });
return () => {
observer.disconnect();
};
}, [colorMode]);
function playroomColorModeValue(value) {
if (typeof value !== "object" || !(value.darkMode || value.lightMode)) {
return;
}
return document.documentElement.classList.contains(darkMode) ? value.darkMode : value.lightMode;
}
function playroomResponsiveValue(value) {
Object.values(value).forEach((v) => {
if (v === null) {
throw new Error(
`You cannot use 'null' as a value when using 'responsiveValue'.`
);
}
});
const resolvedValue = responsiveValue(value);
if (resolvedValue === null) {
return value.mobile;
}
return resolvedValue;
}
return {
vars,
atoms,
breakpoints,
showToast,
responsiveValue: playroomResponsiveValue,
colorModeValue: playroomColorModeValue,
...playroomState
};
}
export {
useScope
};