Commit Graph

2 Commits

Author SHA1 Message Date
Adrian Flores Cortes
b3dd4b859e [G-009] feat(components): Add Skeleton loading component system
- Add Skeleton base component with variants: text, rectangular, circular
- Add SkeletonText for multi-line text placeholders
- Add SkeletonCard for card-shaped loading states
- Add SkeletonTable for table loading with configurable rows/columns
- Add SkeletonAvatar for avatar placeholders (sm/md/lg/xl)
- Add SkeletonButton for button placeholders
- Add shimmer animation to Tailwind config
- Add comprehensive tests (21 tests passing)
- Export all components from common/index.ts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-04 01:27:06 -06:00
Adrian Flores Cortes
a746b0b4df feat(design-system): Implement CSS custom properties for theming
- Add src/styles/variables.css with 100+ design tokens
- Define ISEM brand colors (primary #0061A8, secondary #00A868)
- Add semantic colors (success, warning, danger, info)
- Add light/dark theme support via CSS variables
- Add construction-specific colors (EVM, HSE, project states)
- Add typography tokens (Inter font family)
- Add spacing system (4px base)
- Add border radius, shadows, z-index scales
- Add animation duration and easing tokens
- Add component-specific tokens (button, input, card, modal)
- Update tailwind.config.js to use CSS variables
- Enable dark mode support with 'class' strategy
- Update index.css to import variables and use semantic tokens

Closes G-001 from FASE3-VALIDACION-FRONTEND-UXUI.md

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-04 00:51:57 -06:00