nice-ui
Version:
React design system, components, and utilities
33 lines (32 loc) • 1.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorLine = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const ColorRect_1 = require("./ColorRect");
const blockClass = (0, nano_theme_1.rule)({
d: 'flex',
columnGap: '4px',
jc: 'center',
});
const stepNames = ['25', '50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'];
const ColorLine = ({ color, scales }) => {
const { L, xS, dH } = scales;
if (!L)
return null;
const nodes = [];
const length = L.length;
for (let i = 0; i < length; i++) {
const lightness = L[i];
let c = color.setL(lightness);
const saturationFactor = xS ? (xS[i] ?? 1) : 1;
const hueShift = dH ? (dH[i] ?? 0) : 0;
if (saturationFactor !== 1)
c = c.setS(c.S * saturationFactor);
if (hueShift !== 0)
c = c.setH(c.H + hueShift);
nodes.push(React.createElement(ColorRect_1.ColorRect, { key: i, color: c, title: stepNames[i], subtitle: `${saturationFactor.toFixed(1)} : ${hueShift}` }));
}
return React.createElement("div", { className: blockClass }, nodes);
};
exports.ColorLine = ColorLine;