@tolokoban/ui
Version:
React components with theme
125 lines • 12.2 kB
JavaScript
import Color from "../color.js";
import ClassNames from "./class-names.js";
import "./theme.css";
export * from "./styles/common.js";
const DEFAULT_COLOR_TEXT_LIGHT = "#fffe";
const DEFAULT_COLOR_TEXT_DARK = "#000e";
const DEFAULT_COLOR_PRIMARY = "hsl(215 80% 50%)";
const DEFAULT_COLOR_SECONDARY = "hsl(30 90% 50%)";
const DEFAULT_COLOR_TERTIARY = "hsl(60 80% 50%)";
const DEFAULT_COLOR_NEUTRAL = ["hsl(0 0% 40%)", "hsl(0 0% 90%)"];
const DEFAULT_COLOR_INPUT = "#fff";
const DEFAULT_COLOR_ERROR = "#d00";
const DEFAULT_COLOR_VALID = "#0f0";
export class Theme {
static apply(options = {}, element) {
const theme = new Theme(options);
theme.apply(element);
return theme;
}
constructor(options = {}) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
this.vars = [];
const colors = (_a = options.colors) !== null && _a !== void 0 ? _a : {};
const gap = (_b = options.gap) !== null && _b !== void 0 ? _b : {
XS: ".25rem",
S: ".5rem",
M: "1rem",
L: "2rem",
XL: "4rem",
};
this.add("gap-none", "0");
this.add("gap-XS", gap.XS);
this.add("gap-S", gap.S);
this.add("gap-M", gap.M);
this.add("gap-L", gap.L);
this.add("gap-XL", gap.XL);
this.add("color-text-light", (_c = colors.textLight) !== null && _c !== void 0 ? _c : DEFAULT_COLOR_TEXT_LIGHT);
this.add("color-text-dark", (_d = colors.textDark) !== null && _d !== void 0 ? _d : DEFAULT_COLOR_TEXT_DARK);
this.addColor("input", (_e = colors.input) !== null && _e !== void 0 ? _e : DEFAULT_COLOR_INPUT);
this.addColor("error", (_f = colors.error) !== null && _f !== void 0 ? _f : DEFAULT_COLOR_ERROR);
this.addColor("valid", (_g = colors.valid) !== null && _g !== void 0 ? _g : DEFAULT_COLOR_VALID);
this.addColorVars("primary", makeColors((_h = colors.primary) !== null && _h !== void 0 ? _h : DEFAULT_COLOR_PRIMARY));
this.addColorVars("secondary", makeColors((_j = colors.secondary) !== null && _j !== void 0 ? _j : DEFAULT_COLOR_SECONDARY));
this.addColorVars("tertiary", makeColors((_k = colors.tertiary) !== null && _k !== void 0 ? _k : DEFAULT_COLOR_TERTIARY));
this.addColorVars("neutral", makeColors((_l = colors.neutral) !== null && _l !== void 0 ? _l : DEFAULT_COLOR_NEUTRAL));
for (let shadow = 0; shadow < 10; shadow++) {
const y = shadow;
this.add(`shadow-${shadow}`, `0 ${y}px ${y * 2}px #000e`);
}
}
/**
* Add a new CSS custom variable.
*/
add(name, value, alpha = 1) {
let color = value;
if (alpha <= 0)
color = "transparent";
else if (alpha < 1) {
const obj = new Color(value);
obj.A = alpha;
color = obj.toString();
}
this.vars.push([name, color]);
}
addColor(name, color) {
this.add(`color-${name}`, color);
this.add(`color-on-${name}`, `var(--theme-color-text-${Color.isLight(color) ? `dark` : "light"})`);
}
addColorVars(name, colors) {
let index = 1;
for (const color of colors) {
this.add(`color-${name}-${index}`, color);
for (let alpha = 1; alpha < 10; alpha++) {
this.add(`color-${name}-${index}-${alpha}`, color, alpha / 10);
}
this.add(`color-on-${name}-${index}`, `var(--theme-color-text-${Color.isLight(color) ? "dark" : "light"})`);
for (let opacity = 1; opacity < 10; opacity++) {
this.add(`color-on-${name}-${index}-${opacity}`, `var(--theme-color-on-${name}-${index})`);
}
index++;
}
this.add(`color-${name}`, `var(--theme-color-${name}-5)`);
}
/**
* Apply this theme to `element`.
* @param element Default to `document.body`.
*/
apply(element) {
var _a;
const target = element !== null && element !== void 0 ? element : (_a = globalThis.window) === null || _a === void 0 ? void 0 : _a.document.body;
if (target) {
for (const [key, val] of this.vars) {
target.style.setProperty(`--theme-${key}`, val);
}
}
}
}
Theme.classNames = new ClassNames();
function makeColors(colorDef) {
const colors = Array.isArray(colorDef)
? colorDef
: [colorDef];
if (colors.length === 0)
colors.push("#fff");
if (colors.length === 1)
expandColorRange(colors);
const output = Color.makeGradient(9, ...colors).map((color) => color.toString());
return output;
}
function expandColorRange(colors) {
const [color] = colors;
const dark = new Color(color);
const light = new Color(color);
const levelD = 0.3;
const levelL = 0.2;
dark.R *= levelD;
dark.G *= levelD;
dark.B *= levelD;
light.R = 1 - levelL * (1 - light.R);
light.G = 1 - levelL * (1 - light.G);
light.B = 1 - levelL * (1 - light.B);
colors.unshift(dark);
colors.push(light);
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdGhlbWUvdGhlbWUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sYUFBYSxDQUFBO0FBRS9CLE9BQU8sVUFBVSxNQUFNLGtCQUFrQixDQUFBO0FBQ3pDLE9BQU8sYUFBYSxDQUFBO0FBRXBCLGNBQWMsb0JBQW9CLENBQUE7QUFFbEMsTUFBTSx3QkFBd0IsR0FBRyxPQUFPLENBQUE7QUFDeEMsTUFBTSx1QkFBdUIsR0FBRyxPQUFPLENBQUE7QUFDdkMsTUFBTSxxQkFBcUIsR0FBZSxrQkFBa0IsQ0FBQTtBQUM1RCxNQUFNLHVCQUF1QixHQUFlLGlCQUFpQixDQUFBO0FBQzdELE1BQU0sc0JBQXNCLEdBQWUsaUJBQWlCLENBQUE7QUFDNUQsTUFBTSxxQkFBcUIsR0FBZSxDQUFDLGVBQWUsRUFBRSxlQUFlLENBQUMsQ0FBQTtBQUM1RSxNQUFNLG1CQUFtQixHQUFHLE1BQU0sQ0FBQTtBQUNsQyxNQUFNLG1CQUFtQixHQUFHLE1BQU0sQ0FBQTtBQUNsQyxNQUFNLG1CQUFtQixHQUFHLE1BQU0sQ0FBQTtBQUVsQyxNQUFNLE9BQU8sS0FBSztJQUVQLE1BQU0sQ0FBQyxLQUFLLENBQ2YsVUFBeUIsRUFBRSxFQUMzQixPQUFrQztRQUVsQyxNQUFNLEtBQUssR0FBRyxJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQTtRQUNoQyxLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFBO1FBQ3BCLE9BQU8sS0FBSyxDQUFBO0lBQ2hCLENBQUM7SUFJRCxZQUFZLFVBQXlCLEVBQUU7O1FBRnRCLFNBQUksR0FBeUMsRUFBRSxDQUFBO1FBRzVELE1BQU0sTUFBTSxHQUFHLE1BQUEsT0FBTyxDQUFDLE1BQU0sbUNBQUksRUFBRSxDQUFBO1FBQ25DLE1BQU0sR0FBRyxHQUFHLE1BQUEsT0FBTyxDQUFDLEdBQUcsbUNBQUk7WUFDdkIsRUFBRSxFQUFF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