d4a5378adf
Frontend: - Replace Next.js with Vite + React + TypeScript - Add new component architecture (app-shell, sidebar, dashboard modules) - Implement product modules: FRAME, safety protocols, walkthrough checkin, campus/staff attendance, personality quiz, sign language, classroom timer - Add shadcn/ui component library with Tailwind CSS - Remove legacy generated components, stores, and pages Backend: - Add product migrations: frame_entries, user_progress, safety_quiz_results, walkthrough_checkins, communication_events, personality_quiz_results, campus_attendance_config/summaries, staff_attendance_records, content_catalog - Add corresponding models, services, and routes - Implement cookie-based auth with refresh token rotation - Add content catalog seeder with product content - Migrate to ESLint flat config - Switch from yarn to npm Infrastructure: - Update .gitignore for new tooling - Add project documentation (CLAUDE.md, docs/) - Remove deprecated config files and yarn.lock Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
22 lines
1.2 KiB
Markdown
22 lines
1.2 KiB
Markdown
# Theme
|
|
|
|
## Purpose
|
|
|
|
Frontend theme configuration is centralized so visual tokens, runtime theme state, and Tailwind mappings do not drift apart.
|
|
|
|
## Files
|
|
|
|
- `frontend/src/shared/constants/theme.ts` owns theme names, default theme values, CSS class names, and media query constants.
|
|
- `frontend/src/shared/constants/storage.ts` owns the local storage key used to persist the user theme preference.
|
|
- `frontend/src/components/theme-context.ts` owns the React context type and hook only.
|
|
- `frontend/src/components/theme-provider.tsx` owns runtime theme application to `document.documentElement`.
|
|
- `frontend/src/index.css` owns global CSS variables for light and dark theme tokens.
|
|
- `frontend/tailwind.config.ts` maps Tailwind color tokens to the CSS variables from `index.css`.
|
|
|
|
## Rules
|
|
|
|
- Do not hardcode theme names such as `dark`, `light`, or `system` outside `frontend/src/shared/constants/theme.ts`.
|
|
- Do not hardcode the theme storage key outside `frontend/src/shared/constants/storage.ts`.
|
|
- Add new design tokens as CSS variables in `frontend/src/index.css`, then expose them through `frontend/tailwind.config.ts` when Tailwind classes need them.
|
|
- Keep one-off module status colors in module constants only when they are domain semantics, not global theme tokens.
|