element-book
Version:
An [`element-vir`](https://npmjs.com/package/element-vir) drop-in element for building, testing, and demonstrating a collection of elements (or, in other words, a design system).
95 lines (94 loc) • 3.82 kB
JavaScript
import { check } from '@augment-vir/assert';
import { defineCssVars, setCssVarValue } from 'lit-css-vars';
/**
* All color theme CSS vars for the element-book app.
*
* @category Internal
*/
export const colorThemeCssVars = defineCssVars({
'element-book-nav-hover-background-color': 'magenta',
'element-book-nav-hover-foreground-color': 'magenta',
'element-book-nav-active-background-color': 'magenta',
'element-book-nav-active-foreground-color': 'magenta',
'element-book-nav-selected-background-color': 'magenta',
'element-book-nav-selected-foreground-color': 'magenta',
'element-book-accent-icon-color': 'magenta',
'element-book-page-background-color': 'magenta',
'element-book-page-background-faint-level-1-color': 'magenta',
'element-book-page-background-faint-level-2-color': 'magenta',
'element-book-page-foreground-color': 'magenta',
'element-book-page-foreground-faint-level-1-color': 'magenta',
'element-book-page-foreground-faint-level-2-color': 'magenta',
});
const colorThemeCssVarMapping = {
nav: {
hover: {
background: colorThemeCssVars['element-book-nav-hover-background-color'],
foreground: colorThemeCssVars['element-book-nav-hover-foreground-color'],
},
active: {
background: colorThemeCssVars['element-book-nav-active-background-color'],
foreground: colorThemeCssVars['element-book-nav-active-foreground-color'],
},
selected: {
background: colorThemeCssVars['element-book-nav-selected-background-color'],
foreground: colorThemeCssVars['element-book-nav-selected-foreground-color'],
},
},
accent: {
icon: colorThemeCssVars['element-book-accent-icon-color'],
},
page: {
background: colorThemeCssVars['element-book-page-background-color'],
backgroundFaint1: colorThemeCssVars['element-book-page-background-faint-level-1-color'],
backgroundFaint2: colorThemeCssVars['element-book-page-background-faint-level-2-color'],
foreground: colorThemeCssVars['element-book-page-foreground-color'],
foregroundFaint1: colorThemeCssVars['element-book-page-foreground-faint-level-1-color'],
foregroundFaint2: colorThemeCssVars['element-book-page-foreground-faint-level-2-color'],
},
};
/**
* Sets a new color theme's CSS vars on the given HTML element for the element-book app.
*
* @category Internal
*/
export function setThemeCssVars(element, theme) {
recursiveSetThemeCssVars(element, theme, colorThemeCssVarMapping);
}
function isCssResult(input) {
return check.hasKey(input, '_$cssResult$');
}
function isCssVarDefinition(input) {
return (check.hasKeys(input, [
'name',
'value',
'default',
]) &&
check.isString(input.default) &&
isCssResult(input.name) &&
isCssResult(input.value));
}
function recursiveSetThemeCssVars(element, nestedCssResult, nestedCssVars) {
Object.entries(nestedCssResult).forEach(([key, value,]) => {
const nestedCssVar = nestedCssVars[key];
if (!nestedCssVar) {
throw new Error(`no nestedCssVar at key '${key}'`);
}
if (isCssResult(value)) {
if (!isCssVarDefinition(nestedCssVar)) {
throw new Error(`got a CSS result at '${key}' but no CSS var`);
}
setCssVarValue({
forCssVar: nestedCssVar,
onElement: element,
toValue: String(value),
});
}
else {
if (isCssVarDefinition(nestedCssVar)) {
throw new Error(`got no CSS result at '${key}' but did find a CSS var`);
}
recursiveSetThemeCssVars(element, value, nestedCssVar);
}
});
}