Swap calendar coloring to per-person keyword match; teal UI accent
- Events now color by name match in the summary: Becca=teal, Chris=green, Arabella=pink. Anything without a match gets a neutral slate. Replaces the hash-to-Google-palette logic. - Main accent swapped from blue to pastel teal (#14b8a6) so the UI feels cohesive with the event palette.
This commit is contained in:
@@ -1,32 +1,28 @@
|
|||||||
// Google Calendar's 11 event colors, values lifted from the web client
|
// Per-person event colors. Any event whose summary contains one of the
|
||||||
// color picker. Colors are assigned deterministically by hashing the event
|
// configured names (case-insensitive) renders in that person's color.
|
||||||
// summary so each recurring event always renders in the same color.
|
// Events that don't match a name fall back to a neutral slate color.
|
||||||
const GOOGLE_EVENT_COLORS = [
|
export interface PersonColor {
|
||||||
{ name: 'Tomato', bg: '#d50000', text: '#ffffff' },
|
name: string;
|
||||||
{ name: 'Flamingo', bg: '#e67c73', text: '#ffffff' },
|
bg: string;
|
||||||
{ name: 'Tangerine', bg: '#f4511e', text: '#ffffff' },
|
text: string;
|
||||||
{ 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;
|
|
||||||
|
|
||||||
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 {
|
const FALLBACK: PersonColor = {
|
||||||
let h = 2166136261;
|
name: 'default',
|
||||||
for (let i = 0; i < str.length; i++) {
|
bg: '#94a3b8', // slate-400 - muted pastel neutral
|
||||||
h ^= str.charCodeAt(i);
|
text: '#ffffff',
|
||||||
h = Math.imul(h, 16777619);
|
};
|
||||||
|
|
||||||
|
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;
|
return FALLBACK;
|
||||||
}
|
|
||||||
|
|
||||||
export function getEventColor(key: string): EventColor {
|
|
||||||
const idx = hash(key.toLowerCase().trim()) % GOOGLE_EVENT_COLORS.length;
|
|
||||||
return GOOGLE_EVENT_COLORS[idx];
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,11 +18,11 @@ module.exports = {
|
|||||||
border: '#e2e8f0', // cool soft border
|
border: '#e2e8f0', // cool soft border
|
||||||
'border-light': '#cbd5e1',
|
'border-light': '#cbd5e1',
|
||||||
},
|
},
|
||||||
// Blue accent
|
// Cool pastel teal accent (picks up Becca's event color)
|
||||||
accent: {
|
accent: {
|
||||||
DEFAULT: '#3b82f6', // blue-500
|
DEFAULT: '#14b8a6', // teal-500
|
||||||
light: '#60a5fa',
|
light: '#5eead4', // teal-300
|
||||||
dark: '#2563eb',
|
dark: '#0d9488', // teal-600
|
||||||
},
|
},
|
||||||
// Cool slate ink text scale
|
// Cool slate ink text scale
|
||||||
ink: {
|
ink: {
|
||||||
|
|||||||
Reference in New Issue
Block a user