Enhanced globals.css based on pastel-ui best practices:
Features added:
- @source directives for automatic component discovery
- @custom-variant for dark mode support
- Complete design system with :root and .dark themes
- OKLCH color space for better color precision
- shadcn/ui compatible color tokens (background, foreground, card, etc.)
- @theme inline block with Tailwind v4 color definitions
- 23 category colors converted to OKLCH format
- Custom animations system with 8 predefined animations
- @layer base with global styles
- Smooth transitions and custom scrollbar styling
- Screen reader utility class (.sr-only)
- Animation keyframes for all custom animations
Design system includes:
- Light/dark mode support with OKLCH colors
- Semantic color tokens (primary, secondary, muted, accent, destructive)
- Border radius variable (--radius)
- Smooth 200ms transitions
- Category-specific colors for all 23 unit types in OKLCH
- Custom animations: fadeIn, slideUp/Down, slideInRight/Left, scaleIn, bounceGentle, shimmer
Accessibility features:
- Proper outline ring on focus
- Theme transition prevention during theme switch
- Custom scrollbar with hover states
- Screen reader only utility
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Sebastian Krüger
bd3a9a49d1