- Create frontend/colors.mjs as SSOT for all design colors
- Create scripts/generate-css-vars.mjs to auto-generate CSS variables
- Update tailwind.config.ts to import colors from colors.mjs
- Update frontend/package.json: add 'generate-css-vars' script to build pipeline
- Update start_servers.py: include CSS variable generation before npm build
- All color changes now require only one edit in colors.mjs
- Build process auto-syncs CSS variables and Tailwind colors
Eliminates DRY violation where colors were duplicated in:
- tailwind.config.ts (Tailwind utility classes)
- globals.css (CSS custom properties)
Single source of truth approach ensures:
✓ No inconsistency between Tailwind and CSS variables
✓ One place to update colors for all contexts
✓ Automated CSS variable generation on every build
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Fixed CSS syntax errors by replacing @apply statements with CSS variables:
- Replaced nested color classes (bg-surface-container-*, text-on-*, etc.)
- Used CSS custom properties for all dynamic color values
- Removed @apply for non-existent Tailwind classes (mt-0.5, text-muted-foreground)
- All components now use CSS variables with proper fallback values
This resolves the 'class does not exist' errors while maintaining the
full design system compliance.
Replace font-bold, font-black, and font-semibold with font-normal throughout:
- 26 component files
- 1 CSS utility file (globals.css)
- 291 total occurrences
Text hierarchy now maintained through font-size differences only.
All tests passing (291/291).
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Removed 74 instances of 'uppercase' Tailwind class
- Removed uppercase from card-subtitle utility in globals.css
- All UI text now displays in natural sentence/mixed case
- Maintains letter-spacing (tracking-widest) for hierarchy
This improves readability and accessibility.
- Upgraded color palette with enhanced contrast (5.2:1 to 15:1 ratios)
- Replaced all text-slate-* utilities with semantic color tokens
- Added Fira Code + Fira Sans typography stack
- Converted CSS variables from SCSS to direct hex values
- Updated 26 components with improved color semantics
- Added cursor-pointer and focus states (accessibility phase 1)
- Added aria-labels to 35+ icon-only buttons
- Added prefers-reduced-motion support in globals.css
WCAG AA compliance verified across all text color combinations.
Fixes invisible text issues (slate-500 4.2:1 → muted 5.2:1).
Accessibility:
- Add focus-visible indicators to all interactive elements (buttons, inputs)
- Create accessible CreateUserModal to replace window.prompt()
- Add aria-labels to icon buttons for screen readers
Colors & Theming:
- Move primary color to CSS variable (--primary)
- Remove hard-coded #3b82f6 from tailwind config
- Clean up color consistency across theme
UX:
- Replace prompt-based user creation with proper modal form
- Implement inline field validation with error messages
- Add loading state during form submission
- Improve visual hierarchy and spacing
Performance:
- Remove bootstrap-icons dependency (duplicate with lucide-react)
Design:
- Reduce backdrop-blur overuse (remove from overlay scrim, StatCard)
- Improve AdminOverlay responsive design
