47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
// Curated palette for Group cards. Colors are hand-picked and spaced evenly
|
|
// around the hue wheel so no two are near-duplicates and none clash, per the
|
|
// "vibrant colors from the same aesthetic family" requirement. Stored as a
|
|
// palette *key* on the Group record (not a raw hex) so this list can be
|
|
// retinted centrally without a data migration.
|
|
//
|
|
// Each color has a slightly deeper/less-saturated `dark` variant so a thick
|
|
// border doesn't glare against a dark background.
|
|
|
|
export type GroupColorKey =
|
|
| "coral"
|
|
| "amber"
|
|
| "lime"
|
|
| "teal"
|
|
| "sky"
|
|
| "indigo"
|
|
| "violet"
|
|
| "pink";
|
|
|
|
export interface GroupColor {
|
|
key: GroupColorKey;
|
|
label: string;
|
|
light: string;
|
|
dark: string;
|
|
}
|
|
|
|
export const GROUP_COLORS: GroupColor[] = [
|
|
{ key: "coral", label: "Coral", light: "#f4574a", dark: "#ff7a6e" },
|
|
{ key: "amber", label: "Amber", light: "#e8940f", dark: "#f5ad3d" },
|
|
{ key: "lime", label: "Lime", light: "#4c9a2a", dark: "#78c94e" },
|
|
{ key: "teal", label: "Teal", light: "#0f9488", dark: "#2dd4bf" },
|
|
{ key: "sky", label: "Sky", light: "#2f7fe0", dark: "#5b9dee" },
|
|
{ key: "indigo", label: "Indigo", light: "#5b5bd6", dark: "#8c8cf0" },
|
|
{ key: "violet", label: "Violet", light: "#9440d1", dark: "#c084fc" },
|
|
{ key: "pink", label: "Pink", light: "#d63f8f", dark: "#f472b6" },
|
|
];
|
|
|
|
const GROUP_COLOR_MAP: Record<string, GroupColor> = Object.fromEntries(
|
|
GROUP_COLORS.map((c) => [c.key, c])
|
|
);
|
|
|
|
export const DEFAULT_GROUP_COLOR_KEY: GroupColorKey = GROUP_COLORS[0].key;
|
|
|
|
export function getGroupColor(key: string): GroupColor {
|
|
return GROUP_COLOR_MAP[key] ?? GROUP_COLORS[0];
|
|
}
|