valknar/units-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5 Commits 1 Branch 0 Tags
bd3a9a49d1e21a7441c3038fe74f2ac9903a97ec
Commit Graph

3 Commits

Author SHA1 Message Date
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
Sebastian Krüger
ea06e2e9d3 refactor: migrate to Tailwind CSS 4 native configuration 
Convert from Tailwind CSS 3 style to Tailwind CSS 4 native approach:
- Install @tailwindcss/postcss plugin
- Create postcss.config.mjs with Tailwind PostCSS plugin
- Migrate all custom theme colors to globals.css using @theme directive
- Remove tailwind.config.ts (no longer needed in Tailwind CSS 4)
- Update globals.css from @import style to native CSS with custom properties

Custom theme includes:
- 23 category-specific colors as CSS custom properties
- --color-category-* naming convention for all unit types
- Follows Tailwind CSS 4 best practices with @theme block

Benefits:
- Native CSS features, no JS config needed
- Better performance with PostCSS plugin
- Cleaner separation of concerns
- Follows Tailwind CSS 4 migration guide

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-08 09:26:11 +01:00
Sebastian Krüger
48b75b9755 feat: initialize Next.js 16 project with TypeScript and Tailwind CSS 4 
Set up complete Next.js 16 development environment:
- Next.js 16.0.1 with App Router and Turbopack
- React 19.2.0 with TypeScript 5.9
- Tailwind CSS 4.1.17 with custom category colors
- ESLint 9 with Next.js config
- Static site generation enabled (output: 'export')

Project structure:
- app/ directory with layout, page, and globals.css
- Tailwind config with 23 category-specific colors
- TypeScript config with strict mode and path aliases
- Complete .gitignore for Next.js projects

Dependencies installed:
- convert-units 2.3.4 for unit conversions
- All React 19 and Next.js 16 dependencies
- Development tooling (TypeScript, ESLint, Tailwind)

Ready for Phase 2: Core conversion engine implementation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-08 09:21:56 +01:00