134 lines
3.5 KiB
TypeScript
134 lines
3.5 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Palette role shape emitted by the theme-generation workshop.
|
|
* Each role carries both a dark and light variant resolved as OKLCH + hex
|
|
* alongside a WCAG AA pass/fail flag computed against the generated
|
|
* background.
|
|
*/
|
|
export interface PaletteRole {
|
|
name: string;
|
|
dark: { oklch: string; hex: string; wcagAA: boolean };
|
|
light: { oklch: string; hex: string; wcagAA: boolean };
|
|
}
|
|
|
|
interface ThemePaletteGridProps {
|
|
palette: PaletteRole[];
|
|
variant?: "dark" | "light";
|
|
className?: string;
|
|
}
|
|
|
|
const ROLE_LABELS: Record<string, string> = {
|
|
background: "Background",
|
|
surface: "Surface",
|
|
overlay: "Overlay",
|
|
text: "Text",
|
|
"accent-1": "Accent 1",
|
|
"accent-2": "Accent 2",
|
|
"accent-3": "Accent 3",
|
|
};
|
|
|
|
function Swatch({
|
|
role,
|
|
variant,
|
|
}: {
|
|
role: PaletteRole;
|
|
variant: "dark" | "light";
|
|
}) {
|
|
const entry = variant === "dark" ? role.dark : role.light;
|
|
const label = ROLE_LABELS[role.name] ?? role.name;
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col gap-2 rounded-sm border border-border bg-card p-2"
|
|
style={{ minWidth: 96 }}
|
|
>
|
|
<div
|
|
className="rounded-sm border border-border"
|
|
style={{
|
|
height: 44,
|
|
backgroundColor: entry.hex,
|
|
}}
|
|
title={`${label}: ${entry.hex}`}
|
|
aria-label={`${label} swatch ${entry.hex}`}
|
|
/>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.1em] text-foreground">
|
|
{label}
|
|
</span>
|
|
<span className="font-mono text-[11px] text-muted-foreground">
|
|
{entry.hex}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"text-[10px] font-semibold uppercase tracking-[0.08em]",
|
|
entry.wcagAA ? "text-primary" : "text-destructive",
|
|
)}
|
|
>
|
|
{entry.wcagAA ? "AA" : "Fails AA"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PaletteRow({
|
|
palette,
|
|
variant,
|
|
}: {
|
|
palette: PaletteRole[];
|
|
variant: "dark" | "light";
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<span className="text-[12px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
|
|
{variant === "dark" ? "Dark mode" : "Light mode"}
|
|
</span>
|
|
<div className="flex flex-row flex-wrap gap-2">
|
|
{palette.map((role) => (
|
|
<Swatch key={role.name} role={role} variant={variant} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ThemePaletteGrid({
|
|
palette,
|
|
variant,
|
|
className,
|
|
}: ThemePaletteGridProps) {
|
|
if (palette.length === 0) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col items-center justify-center gap-2 rounded-sm border border-dashed border-border p-8 text-center",
|
|
className,
|
|
)}
|
|
>
|
|
<h3 className="text-base font-bold text-foreground">No palette yet</h3>
|
|
<p className="max-w-xs text-sm text-muted-foreground">
|
|
Pick a seed color to generate a full OKLCH palette with dark and
|
|
light variants.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// When variant is passed explicitly, render only that row. Otherwise show
|
|
// both dark and light, so reviewers can compare the generated bundle.
|
|
if (variant) {
|
|
return (
|
|
<div className={cn("flex flex-col gap-4", className)}>
|
|
<PaletteRow palette={palette} variant={variant} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn("flex flex-col gap-4", className)}>
|
|
<PaletteRow palette={palette} variant="dark" />
|
|
<PaletteRow palette={palette} variant="light" />
|
|
</div>
|
|
);
|
|
}
|