@tolokoban/ui
Version:
React components with theme
61 lines • 6.62 kB
JavaScript
export default class ClassNames {
constructor() {
this.signature = `${Date.now().toString(36)}-Theme-`;
this.colorPrimary = (level = "5") => this.cls(`color-primary-${level}`);
this.colorSecondary = (level = "5") => this.cls(`color-secondary-${level}`);
this.colorTertiary = (level = "5") => this.cls(`color-tertiary-${level}`);
this.colorNeutral = (level = "5") => this.cls(`color-neutral-${level}`);
this.init = () => {
if (!document.head) {
window.setTimeout(this.init, 200);
return;
}
const lines = [
`.${this.cls("display-flex")} { display: flex; justify-content: space-between; align-items: center; gap: var(--theme-gap-S); }`,
`.${this.cls("display-inline-flex")} { display: inline-flex; justify-content: space-between; align-items: center; gap: var(--theme-gap-S); }`,
];
for (const vertical of ["none", "XS", "S", "M", "L", "XL"]) {
for (const horizontal of ["none", "XS", "S", "M", "L", "XL"]) {
lines.push(`.${this.cls(`padding-${vertical}-${horizontal}`)} { padding: var(--theme-gap-${vertical}) var(--theme-gap-${horizontal}); }`);
lines.push(`.${this.cls(`margin-${vertical}-${horizontal}`)} { margin: var(--theme-gap-${vertical}) var(--theme-gap-${horizontal}); }`);
}
}
for (const group of ["primary", "secondary", "tertiary", "neutral"]) {
for (let level = 1; level < 10; level++) {
lines.push(`.${this.cls(`color-${group}-${level}`)} {`, ` color: var(--theme-color-on-${group}-${level});`, ` background-color: var(--theme-color-${group}-${level});`, "}");
}
}
const style = document.createElement("style");
style.textContent = lines.join("\n");
document.head.appendChild(style);
};
this.init();
}
join(...items) {
return items.filter((item) => typeof item === "string").join(" ");
}
padding(...values) {
let [vertical, horizontal] = values;
if (!vertical)
vertical = "none";
if (!horizontal)
horizontal = vertical;
return this.cls(`padding-${vertical}-${horizontal}`);
}
margin(...values) {
let [vertical, horizontal] = values;
if (!vertical)
vertical = "none";
if (!horizontal)
horizontal = vertical;
return this.cls(`margin-${vertical}-${horizontal}`);
}
display(type) {
const classes = [this.cls(`display-${type}`)];
return classes.join(" ");
}
cls(name) {
return `${this.signature}${name}`;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xhc3MtbmFtZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdGhlbWUvY2xhc3MtbmFtZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSxDQUFDLE9BQU8sT0FBTyxVQUFVO0lBRzNCO1FBRmlCLGNBQVMsR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLFNBQVMsQ0FBQTtRQU12RCxpQkFBWSxHQUFHLENBQUMsUUFBb0IsR0FBRyxFQUFFLEVBQUUsQ0FDaEQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxpQkFBaUIsS0FBSyxFQUFFLENBQUMsQ0FBQTtRQUM3QixtQkFBYyxHQUFHLENBQUMsUUFBb0IsR0FBRyxFQUFFLEVBQUUsQ0FDbEQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxtQkFBbUIsS0FBSyxFQUFFLENBQUMsQ0FBQTtRQUMvQixrQkFBYSxHQUFHLENBQUMsUUFBb0IsR0FBRyxFQUFFLEVBQUUsQ0FDakQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxrQkFBa0IsS0FBSyxFQUFFLENBQUMsQ0FBQTtRQUM5QixpQkFBWSxHQUFHLENBQUMsUUFBb0IsR0FBRyxFQUFFLEVBQUUsQ0FDaEQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxpQkFBaUIsS0FBSyxFQUFFLENBQUMsQ0FBQTtRQTZCckIsU0FBSSxHQUFHLEdBQUcsRUFBRTtZQUN6QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO2dCQUNqQixNQUFNLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsR0FBRyxDQUFDLENBQUE7Z0JBQ2pDLE9BQU07WUFDVixDQUFDO1lBQ0QsTUFBTSxLQUFLLEdBQWE7Z0JBQ3BCLElBQUksSUFBSSxDQUFDLEdBQUcsQ0FDUixjQUFjLENBQ2pCLG1HQUFtRztnQkFDcEcsSUFBSSxJQUFJLENBQUMsR0FBRyxDQUNSLHFCQUFxQixDQUN4QiwwR0FBMEc7YUFDOUcsQ0FB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