Centralize accent color

[mirmirmirr]

This pull request introduces a major refactor of the application's color and background class usage to support a more unified and themeable design system. The changes primarily focus on replacing hardcoded color values and mode-specific classes with semantic utility classes (such as bg-accent, bg-panel, bg-loading, bg-background, and text-accent). This improves maintainability, makes future theme changes easier, and provides a more consistent user experience across light and dark modes.

Theme and Color System Refactor

• Replaced hardcoded color classes (e.g., bg-gray-200, bg-[#343249], bg-[#FFFFFF], text-blue, dark:text-red) with semantic classes like bg-accent, bg-panel, bg-loading, bg-background, text-accent, and related variants throughout loading screens, dashboard, event pages, and components for consistent theming.

Component and Layout Updates

• Updated components such as Checkbox, Select, HeaderSpacer, LinkText, and dashboard/event info rows to use the new semantic color classes, removing conditional logic for dark mode and simplifying class lists.

Typography and Section Styling

• Simplified text color handling in headings, labels, and section backgrounds to rely on semantic classes, removing redundant or mode-specific color assignments.

[Copilot]

Pull Request Overview

This PR consolidates theme-related CSS variables into a centralized theming system in tailwind.css, removing redundant definitions from globals.css and updating all component files to use dynamic theme variables instead of hardcoded color classes with dark mode variants.

Key changes:

• Introduces centralized theme variables (--accent, --background, --foreground, --panel-color, --loading-color) in tailwind.css with light/dark variants
• Removes duplicate variable definitions from globals.css
• Replaces all hardcoded color classes (e.g., bg-blue dark:bg-red) with dynamic theme classes (e.g., bg-accent) across 30+ component files

Reviewed Changes

Copilot reviewed 32 out of 32 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/styles/tailwind.css	Adds centralized theme variable definitions in @layer base and exposes them through @theme
src/styles/globals.css	Removes duplicate calendar color variables now defined in tailwind.css
src/features/event/info-drawer.tsx	Updates drawer and info text to use bg-panel and text-accent
src/features/event/grid/timeblocks/results.tsx	Simplifies color-mix expressions using --color-accent and --color-background
src/features/event/grid/timeblocks/interactive.tsx	Refactors hover/selection states with theme-aware color-mix expressions
src/features/event/grid/time-slot.tsx	Updates time slot background and ring colors to use theme variables
src/features/event/grid/schedule-header.tsx	Simplifies header background with bg-panel and bg-background
src/features/event/grid/preview-dialog.tsx	Updates dialog backgrounds and hover states to use theme variables
src/features/event/editor/*.tsx	Updates all editor components (weekday-calendar, time-selector, duration-selector, date-range) to use bg-accent and text-accent
src/features/event/components/timezone-selector.tsx	Updates timezone selector styling with theme variables
src/features/dashboard/components/*.tsx	Updates dashboard event cards, date ranges, and weekday icons to use theme variables
src/components/*.tsx	Updates reusable components (select, checkbox, link-text, header-spacer) to use theme variables
src/app/page.tsx	Removes hardcoded dark mode text colors from marketing page
src/app/error.tsx	Removes hardcoded dark mode text color from error page
src/app/dashboard/page-client.tsx	Updates dashboard tabs and panels with theme variables
src/app/dashboard/loading.tsx	Updates loading skeletons to use bg-loading
src/app/(event)/[event-code]/*.tsx	Updates all event pages to use theme variables for backgrounds, text, and panels
src/app/(event)/[event-code]/loading.tsx	Updates loading skeletons to use bg-loading
src/app/(event)/[event-code]/edit/loading.tsx	Updates edit page loading skeletons to use bg-loading

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jzgom067]

I also found some hex codes in month-calendar.tsx, drawer.tsx, and selector.tsx for the ExclamationTriangleIcon component. That should be centralized to a global error color.

[jzgom067]

account-dropdown.tsx has some hard-coded colors for hover that should be centralized to an accent color variant.

[jzgom067]

The info button in info-drawer.tsx has hard-coded colors for light and dark mode. This should be centralized to match the text color (or whatever you see fit, it just needs to be not hard-coded).

[mirmirmirr]

The info button in info-drawer.tsx has hard-coded colors for light and dark mode. This should be centralized to match the text color (or whatever you see fit, it just needs to be not hard-coded).

Shouldn't this be addressed in the new button component?