40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import type{ RecursiveKeyValuePair } from 'tailwindcss/types/config';
|
|
|
|
/** https://tailwindcss.com/docs/customizing-colors#using-css-variables */
|
|
const withOpacityValue = (variable: string): string => `rgb(var(${variable}) / <alpha-value>)`;
|
|
|
|
/** Parse a single color as a CSS variable. */
|
|
const toColorVariable = (colorName: string, tint: number | null = null): string => {
|
|
const suffix = tint ? `-${tint}` : '';
|
|
const variable = `--color-${colorName}${suffix}`;
|
|
|
|
return withOpacityValue(variable);
|
|
};
|
|
|
|
/** Parse list of tints into Tailwind function with CSS variables. */
|
|
const parseTints = (colorName: string, tints: number[]): RecursiveKeyValuePair =>
|
|
tints.reduce<Record<string, string>>((colorObj, tint) => {
|
|
colorObj[tint] = toColorVariable(colorName, tint);
|
|
return colorObj;
|
|
}, {});
|
|
|
|
interface ColorMatrix {
|
|
[colorName: string]: number[] | boolean;
|
|
}
|
|
|
|
/** Parse color matrix into Tailwind color palette. */
|
|
const parseColorMatrix = (colorMatrix: ColorMatrix): RecursiveKeyValuePair =>
|
|
Object.entries(colorMatrix).reduce<RecursiveKeyValuePair>((palette, colorData) => {
|
|
const [colorName, tints] = colorData;
|
|
|
|
// Conditionally parse array or single-tint colors
|
|
if (Array.isArray(tints)) {
|
|
palette[colorName] = parseTints(colorName, tints);
|
|
} else if (tints === true) {
|
|
palette[colorName] = toColorVariable(colorName);
|
|
}
|
|
|
|
return palette;
|
|
}, {});
|
|
|
|
export { withOpacityValue, parseColorMatrix };
|