diff --git a/src/components/calendar/eventColors.ts b/src/components/calendar/eventColors.ts index f750344..0db93d1 100644 --- a/src/components/calendar/eventColors.ts +++ b/src/components/calendar/eventColors.ts @@ -1,32 +1,28 @@ -// Google Calendar's 11 event colors, values lifted from the web client -// color picker. Colors are assigned deterministically by hashing the event -// summary so each recurring event always renders in the same color. -const GOOGLE_EVENT_COLORS = [ - { name: 'Tomato', bg: '#d50000', text: '#ffffff' }, - { name: 'Flamingo', bg: '#e67c73', text: '#ffffff' }, - { name: 'Tangerine', bg: '#f4511e', text: '#ffffff' }, - { name: 'Banana', bg: '#f6bf26', text: '#202124' }, - { name: 'Sage', bg: '#33b679', text: '#ffffff' }, - { name: 'Basil', bg: '#0b8043', text: '#ffffff' }, - { name: 'Peacock', bg: '#039be5', text: '#ffffff' }, - { name: 'Blueberry', bg: '#3f51b5', text: '#ffffff' }, - { name: 'Lavender', bg: '#7986cb', text: '#ffffff' }, - { name: 'Grape', bg: '#8e24aa', text: '#ffffff' }, - { name: 'Graphite', bg: '#616161', text: '#ffffff' }, -] as const; +// Per-person event colors. Any event whose summary contains one of the +// configured names (case-insensitive) renders in that person's color. +// Events that don't match a name fall back to a neutral slate color. +export interface PersonColor { + name: string; + bg: string; + text: string; +} -export type EventColor = (typeof GOOGLE_EVENT_COLORS)[number]; +export const PEOPLE: PersonColor[] = [ + { name: 'Becca', bg: '#14b8a6', text: '#ffffff' }, // teal-500 + { name: 'Chris', bg: '#22c55e', text: '#ffffff' }, // green-500 + { name: 'Arabella', bg: '#ec4899', text: '#ffffff' }, // pink-500 +]; -function hash(str: string): number { - let h = 2166136261; - for (let i = 0; i < str.length; i++) { - h ^= str.charCodeAt(i); - h = Math.imul(h, 16777619); +const FALLBACK: PersonColor = { + name: 'default', + bg: '#94a3b8', // slate-400 - muted pastel neutral + text: '#ffffff', +}; + +export function getEventColor(summary: string): PersonColor { + const lowered = summary.toLowerCase(); + for (const p of PEOPLE) { + if (lowered.includes(p.name.toLowerCase())) return p; } - return h >>> 0; -} - -export function getEventColor(key: string): EventColor { - const idx = hash(key.toLowerCase().trim()) % GOOGLE_EVENT_COLORS.length; - return GOOGLE_EVENT_COLORS[idx]; + return FALLBACK; } diff --git a/tailwind.config.js b/tailwind.config.js index 1fc2109..db4ed76 100755 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,11 +18,11 @@ module.exports = { border: '#e2e8f0', // cool soft border 'border-light': '#cbd5e1', }, - // Blue accent + // Cool pastel teal accent (picks up Becca's event color) accent: { - DEFAULT: '#3b82f6', // blue-500 - light: '#60a5fa', - dark: '#2563eb', + DEFAULT: '#14b8a6', // teal-500 + light: '#5eead4', // teal-300 + dark: '#0d9488', // teal-600 }, // Cool slate ink text scale ink: {