@octopusdeploy/design-system-components
Version:
The design systems component library.
40 lines (39 loc) • 2.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useApplyGlobalThemeEffect = useApplyGlobalThemeEffect;
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const getTheme_1 = require("./utils/getTheme");
function useApplyGlobalThemeEffect(themeName, customFontOverride, updateFontFamilyOnBody, additionalThemeVariables) {
(0, react_1.useLayoutEffect)(() => {
const theme = (0, getTheme_1.getTheme)(themeName);
// This can be simplified once the feature toggle for switching between fonts is removed
const updatedTextTheme = {
...design_system_tokens_1.textTheme,
...(customFontOverride && { fontFamilyDefault: customFontOverride }),
};
// We want to manage the body separately so we can see where the cascade is being used
const fontFamilyOnBody = updateFontFamilyOnBody && customFontOverride ? updatedTextTheme.fontFamilyDefault : design_system_tokens_1.fontFamilyGlobal["system-ui"];
document.documentElement.style.setProperty("--fontFamilyBody", fontFamilyOnBody);
const themeCssVariableProps = Object.entries(theme)
.concat(Object.entries(updatedTextTheme))
.concat(Object.entries(additionalThemeVariables ?? {}))
.map(([cssVariableName, value]) => `--${cssVariableName}: ${value};`);
const serializedCss = `:root {
${themeCssVariableProps.join("\n")}
}`;
// We manually inject the styles ourselves rather than using injectGlobals from emotion
// injectGlobals does not have a way to remove or replace previously injected styles, so changing themes causes a new global style to be added
let styleElement = document.querySelector(`#${globalStyleNodeId}`);
if (styleElement) {
styleElement.innerHTML = serializedCss;
}
else {
styleElement = document.createElement("style");
styleElement.setAttribute("id", globalStyleNodeId);
styleElement.innerHTML = serializedCss;
document.head.appendChild(styleElement);
}
}, [themeName, customFontOverride, updateFontFamilyOnBody, additionalThemeVariables]);
}
const globalStyleNodeId = "octopus-global-theme";