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).
71 lines (70 loc) • 2.07 kB
JavaScript
import Color from 'colorjs.io';
import { unsafeCSS } from 'element-vir';
import { viraColorPalette } from 'vira';
function colorToCss(color) {
return unsafeCSS(color.toString({
format: 'hex',
}));
}
/**
* The default theme color.
*
* @category Internal
*/
export const defaultThemeStartColor = viraColorPalette['vira-brand-500'].default;
function calculateTextColorString(color) {
const onWhite = Math.abs(color.contrast('white', 'APCA'));
const onBlack = Math.abs(color.contrast('black', 'APCA'));
const textColorString = onWhite > onBlack ? 'white' : 'black';
return textColorString;
}
function createCssColorPair({ background, foreground, }) {
const bg = background ?? new Color(calculateTextColorString(foreground));
const fg = foreground ?? new Color(calculateTextColorString(background));
return {
background: colorToCss(bg),
foreground: colorToCss(fg),
};
}
/**
* Theme style options for the element-book app.
*
* @category Internal
*/
export var ThemeStyle;
(function (ThemeStyle) {
ThemeStyle["Dark"] = "dark";
ThemeStyle["Light"] = "light";
})(ThemeStyle || (ThemeStyle = {}));
/**
* Creates a theme from the given theme configuration.
*
* @category Internal
*/
export function createTheme({ themeColor: inputThemeColor = defaultThemeStartColor, } = {}) {
const themeColor = new Color(inputThemeColor);
return {
nav: {
hover: createCssColorPair({
background: themeColor.clone().set({
'hsl.l': 93,
}),
}),
active: createCssColorPair({
background: themeColor.clone().set({
'hsl.l': 90,
}),
}),
selected: createCssColorPair({
background: themeColor.clone().set({
'hsl.l': 85,
}),
}),
},
accent: {
icon: colorToCss(themeColor.clone().set({
'hsl.l': 40,
})),
},
};
}