import { DEFAULT_COLOR_PALETTE } from "../constants"; import type { ColorName, ColorPalette, ColorScale, ColorStep, SolidColorScale, StrictColorPalette, } from "../types"; const COLOR_NAMES: ColorName[] = ["blue", "yellow", "gray"]; const COLOR_STEPS: ColorStep[] = [100, 200, 300]; /** * Generate alpha colors from solid colors using CSS color-mix. * The generated colors are 50% transparent. */ function generateAlphaColors(solidColors: SolidColorScale): SolidColorScale { return COLOR_STEPS.reduce((acc, step) => { acc[step] = `color-mix(in srgb, ${solidColors[step]} 50%, transparent)`; return acc; }, {} as SolidColorScale); } /** * Create a StrictColorPalette from a partial ColorPalette. * * - Missing ColorNames are filled from DEFAULT_COLOR_PALETTE. * - Missing alpha values are generated using CSS color-mix. * * @param palette - A partial ColorPalette to convert * @returns A StrictColorPalette with all colors and alpha values filled */ export function createStrictColorPalette(palette?: Partial): StrictColorPalette { return COLOR_NAMES.reduce((result, colorName) => { // Get the color scale from input palette, fallback to default const inputScale: ColorScale | undefined = palette?.[colorName]; const defaultScale: ColorScale = DEFAULT_COLOR_PALETTE[colorName]; // Merge solid colors: use input if provided, otherwise use default const solidColors: SolidColorScale = { 100: inputScale?.[100] ?? defaultScale[100], 200: inputScale?.[200] ?? defaultScale[200], 300: inputScale?.[300] ?? defaultScale[300], }; // For alpha: use input alpha if provided, otherwise generate using color-mix const alphaColors: SolidColorScale = inputScale?.alpha ?? generateAlphaColors(solidColors); result[colorName] = { ...solidColors, alpha: alphaColors, }; return result; }, {} as StrictColorPalette); }