refactor: centralise color maps, org color fallback, and motion-safe transitions
Create src/lib/theme-colors.ts with DOT_COLORS, KPI_COLORS, PROJECT_STATUS_COLORS, and DEFAULT_ORG_COLOR constants. Add motionSafeTransition() utility to src/lib/utils.ts. Removes 6 duplicate color map definitions across Card, DetailPanel, PatientSummaryTile, KPIDetail, ProjectsTile, and ProjectDetail. Replaces 9 hardcoded '#0D6E6E' fallbacks and 7 inline motion ternaries. Fixes project status color inconsistency between ProjectsTile and ProjectDetail (Ongoing was teal in tile, amber in detail).
This commit is contained in:
@@ -15,3 +15,13 @@ export function hexToRgba(hex: string, opacity: number): string {
|
||||
}
|
||||
|
||||
export const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||||
|
||||
/** Returns a framer-motion transition that respects prefers-reduced-motion */
|
||||
export function motionSafeTransition(
|
||||
duration: number,
|
||||
ease: string = 'easeOut',
|
||||
delay: number = 0
|
||||
): { duration: number; ease?: string; delay?: number } {
|
||||
if (prefersReducedMotion) return { duration: 0 }
|
||||
return { duration, ease, ...(delay ? { delay } : {}) }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user