franken-ui
Version:
Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.
48 lines (47 loc) • 1.42 kB
JavaScript
const map = {
'--background': 'background',
'--foreground': 'foreground',
'--card': 'card',
'--card-foreground': 'cardForeground',
'--popover': 'popover',
'--popover-foreground': 'popoverForeground',
'--primary': 'primary',
'--primary-foreground': 'primaryForeground',
'--secondary': 'secondary',
'--secondary-foreground': 'secondaryForeground',
'--muted': 'muted',
'--muted-foreground': 'mutedForeground',
'--accent': 'accent',
'--accent-foreground': 'accentForeground',
'--destructive': 'destructive',
'--destructive-foreground': 'destructiveForeground',
'--border': 'border',
'--input': 'input',
'--ring': 'ring'
};
function hex(h, s, l) {
l /= 100;
const a = (s * Math.min(l, 1 - l)) / 100;
const f = (n) => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color)
.toString(16)
.padStart(2, '0');
};
return `#${f(0)}${f(8)}${f(4)}`;
}
function hexes(palette) {
const hexes = {};
for (const a in palette) {
const [h, s, l] = palette[a].split(' ').map((a) => Number(a.replace('%', '')));
hexes[map[a]] = hex(h, s, l);
}
return hexes;
}
export default function (palette) {
return {
light: hexes(palette[':root']),
dark: hexes(palette['.dark'])
};
}