Sebastian Krüger bd3a9a49d1 style: streamline globals.css with comprehensive design system ...

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>

2025-11-08 09:28:20 +01:00

6.3 KiB

Raw Blame History

View Raw