nice-ui
Version:
React design system, components, and utilities
86 lines (85 loc) • 3.03 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Colors = void 0;
const Color_1 = require("./Color");
const light_1 = require("./theme/light");
const dark_1 = require("./theme/dark");
const util_1 = require("../util");
const gray = [0, 0];
const STEP_MAP = {
'bg-1': 0,
'bg-2': 1,
'el-1': 2,
'el-2': 3,
'el-3': 4,
'border-1': 5,
'border-2': 6,
'border-3': 7,
'solid-1': 8,
'solid-2': 9,
'txt-1': 10,
'txt-2': 11,
};
class Colors {
constructor(theme = { palette: {} }) {
this.theme = theme;
this.col = ([type, index = 0, step = 8, adj]) => {
const palette = this.theme.palette;
const colors = palette[type] ?? palette.brand ?? palette.neutral ?? [gray];
const wrappedIndex = index % colors.length;
const color = colors[wrappedIndex];
const options = color[2];
const stepIndex = this.stepNum(step);
const scaleL = options?.scales?.L ?? this.scales.L;
const scaleXS = options?.scales?.xS ?? this.scales.xS;
const scaleDH = options?.scales?.dH ?? this.scales.dH;
const xS = scaleXS[stepIndex];
const dH = scaleDH[stepIndex];
const H = color[0] + dH;
let S = color[1] * xS;
let L = scaleL[stepIndex];
let A = 100;
if (adj) {
S += adj.dS ?? 0;
A = adj.A ?? A;
const adjL = adj.L;
if (adjL)
L = adjL;
else {
const dL = adj.dL;
if (dL)
L += this.light ? dL : -dL;
}
}
return new Color_1.Color(H, S, L, A, this.light);
};
this.get = (type, step = 8, index = 0, adj) => this.col([type, index, step, adj]) + '';
this.accent = (index = 0, step = 8, adj) => this.get('accent', step, index, adj) + '';
this.g = (step = 8, adj, index = 0) => this.get('neutral', step, index, adj) + '';
this._map = new Map();
this.map = (name) => this.mapped(name) + '';
this.hash = (str) => {
const int = (0, util_1.hash)(str);
const H = int % 360;
const S = 0.22;
const L = this.scales.L[6];
return new Color_1.Color(H, S, L, 100, this.light);
};
this.light = theme.light ?? true;
this.scales = { ...(this.light ? light_1.theme.scales : dark_1.theme.scales), ...theme.scales };
}
stepNum(step) {
return typeof step === 'number' ? (step % 12) : (STEP_MAP[step] ?? 1);
}
mapped(name) {
const cache = this._map;
let col = cache.get(name);
if (col)
return col;
const specifier = this.theme.mapping?.[name] ?? light_1.theme.mapping[name];
col = this.col(specifier);
cache.set(name, col);
return col;
}
}
exports.Colors = Colors;