braid-design-system
Version:
Themeable design system for the SEEK Group
38 lines (37 loc) • 1.24 kB
JavaScript
import { useContext, createContext } from "react";
import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
import { mapColorModeValue } from "../../css/atoms/sprinkles.css.mjs";
const backgroundContext = createContext({
lightMode: "body",
darkMode: "bodyDark"
});
const BackgroundProvider = backgroundContext.Provider;
const useBackground = () => useContext(backgroundContext);
const useBackgroundLightness = (backgroundOverride) => {
const backgroundFromContext = useBackground();
const background = backgroundOverride || backgroundFromContext;
const { backgroundLightness } = useBraidTheme();
const lightnessMap = {
...backgroundLightness,
customDark: "dark",
customLight: "light"
};
return {
lightMode: lightnessMap[background.lightMode],
darkMode: lightnessMap[background.darkMode]
};
};
const useColorContrast = () => {
const background = useBackground();
const backgroundLightness = useBackgroundLightness();
return (map) => mapColorModeValue(
backgroundLightness,
(lightness, mode) => typeof map === "function" ? map(lightness, background[mode]) : map[lightness]
);
};
export {
BackgroundProvider,
useBackground,
useBackgroundLightness,
useColorContrast
};