@furystack/shades-common-components
Version:
75 lines • 2.98 kB
JavaScript
export const cssVariableTheme = {
name: 'css-variable-theme',
text: {
primary: 'var(--shades-theme-text-primary)',
secondary: 'var(--shades-theme-text-secondary)',
disabled: 'var(--shades-theme-text-disabled)',
},
button: {
active: 'var(--shades-theme-button-active)',
hover: 'var(--shades-theme-button-hover)',
selected: 'var(--shades-theme-button-selected)',
disabled: 'var(--shades-theme-button-disabled)',
disabledBackground: 'var(--shades-theme-button-disabled-background)',
},
background: {
default: 'var(--shades-theme-background-default)',
paper: 'var(--shades-theme-background-paper)',
},
palette: {
primary: {
light: 'var(--shades-theme-palette-primary-light)',
main: 'var(--shades-theme-palette-primary-main)',
dark: 'var(--shades-theme-palette-primary-dark)',
},
secondary: {
light: 'var(--shades-theme-palette-secondary-light)',
main: 'var(--shades-theme-palette-secondary-main)',
dark: 'var(--shades-theme-palette-secondary-dark)',
},
error: {
light: 'var(--shades-theme-palette-error-light)',
main: 'var(--shades-theme-palette-error-main)',
dark: 'var(--shades-theme-palette-error-dark)',
},
warning: {
light: 'var(--shades-theme-palette-warning-light)',
main: 'var(--shades-theme-palette-warning-main)',
dark: 'var(--shades-theme-palette-warning-dark)',
},
info: {
light: 'var(--shades-theme-palette-info-light)',
main: 'var(--shades-theme-palette-info-main)',
dark: 'var(--shades-theme-palette-info-dark)',
},
success: {
light: 'var(--shades-theme-palette-success-light)',
main: 'var(--shades-theme-palette-success-main)',
dark: 'var(--shades-theme-palette-success-dark)',
},
},
divider: 'var(--shades-theme-divider)',
};
export const setCssVariable = (key, value, root) => {
root.style.setProperty(key.replace('var(', '').replace(')', ''), value);
};
export const getCssVariable = (key, root = document.querySelector(':root')) => {
return getComputedStyle(root).getPropertyValue(key.replace('var(', '').replace(')', ''));
};
const assignValue = (target, source, root, assignFn = setCssVariable) => {
const keys = Object.keys(target);
keys.forEach((key) => {
if (typeof source[key] === 'object' && typeof target[key] === 'object') {
assignValue(target[key], source[key], root);
return;
}
else {
assignFn(target[key], source[key], root);
}
});
};
export const useThemeCssVariables = (theme) => {
const root = document.querySelector(':root');
assignValue(cssVariableTheme, theme, root);
};
//# sourceMappingURL=css-variable-theme.js.map