// Note color palette. Keys match the backend's NOTE_COLORS; the actual tints live // here (frontend concern). Class strings are full literals so Tailwind's content // scanner (src/**/*.ts) keeps them in the build. export const NOTE_COLOR_KEYS = [ "default", "red", "orange", "yellow", "green", "teal", "blue", "purple", "pink", "gray", ] as const; export type NoteColor = (typeof NOTE_COLOR_KEYS)[number]; export const NOTE_CARD_CLASSES: Record = { default: "bg-white border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700", red: "bg-red-50 border-red-200 dark:bg-red-950/40 dark:border-red-900", orange: "bg-orange-50 border-orange-200 dark:bg-orange-950/40 dark:border-orange-900", yellow: "bg-amber-50 border-amber-200 dark:bg-amber-950/40 dark:border-amber-900", green: "bg-green-50 border-green-200 dark:bg-green-950/40 dark:border-green-900", teal: "bg-teal-50 border-teal-200 dark:bg-teal-950/40 dark:border-teal-900", blue: "bg-blue-50 border-blue-200 dark:bg-blue-950/40 dark:border-blue-900", purple: "bg-purple-50 border-purple-200 dark:bg-purple-950/40 dark:border-purple-900", pink: "bg-pink-50 border-pink-200 dark:bg-pink-950/40 dark:border-pink-900", gray: "bg-neutral-100 border-neutral-300 dark:bg-neutral-800 dark:border-neutral-700", }; export const NOTE_SWATCH_CLASSES: Record = { default: "bg-white dark:bg-neutral-600", red: "bg-red-300 dark:bg-red-700", orange: "bg-orange-300 dark:bg-orange-700", yellow: "bg-amber-300 dark:bg-amber-700", green: "bg-green-300 dark:bg-green-700", teal: "bg-teal-300 dark:bg-teal-700", blue: "bg-blue-300 dark:bg-blue-700", purple: "bg-purple-300 dark:bg-purple-700", pink: "bg-pink-300 dark:bg-pink-700", gray: "bg-neutral-400 dark:bg-neutral-500", }; // Label chip tints (bg + readable text), keyed by the same color vocabulary. export const LABEL_CHIP_CLASSES: Record = { default: "bg-black/5 text-neutral-600 dark:bg-white/10 dark:text-neutral-300", red: "bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-300", orange: "bg-orange-100 text-orange-700 dark:bg-orange-950/50 dark:text-orange-300", yellow: "bg-amber-100 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300", green: "bg-green-100 text-green-700 dark:bg-green-950/50 dark:text-green-300", teal: "bg-teal-100 text-teal-700 dark:bg-teal-950/50 dark:text-teal-300", blue: "bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300", purple: "bg-purple-100 text-purple-700 dark:bg-purple-950/50 dark:text-purple-300", pink: "bg-pink-100 text-pink-700 dark:bg-pink-950/50 dark:text-pink-300", gray: "bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200", }; // Solid fills for graph nodes (SVG needs concrete colors, not Tailwind bg classes). // Mid-tone hues read on both the light and dark graph background. export const NOTE_NODE_FILL: Record = { default: "#9ca3af", red: "#ef4444", orange: "#f97316", yellow: "#f59e0b", green: "#22c55e", teal: "#14b8a6", blue: "#3b82f6", purple: "#a855f7", pink: "#ec4899", gray: "#6b7280", }; export const NOTE_COLOR_LABELS: Record = { default: "Default", red: "Red", orange: "Orange", yellow: "Yellow", green: "Green", teal: "Teal", blue: "Blue", purple: "Purple", pink: "Pink", gray: "Gray", };