# Plan: Tema "pretty" — Basado en Chakra UI ## Objetivo Crear un nuevo tema llamado **"pretty"** para el sistema Air, inspirado en los design tokens de Chakra UI v3. Incluye variantes **light** y **dark**. --- ## Mapeo Chakra UI → Air Tokens ### Colores primarios Chakra usa **purple** como color de acento principal (`#faf5ff` → `#1a032e`). Se mapea a `--air-primitive-primary-*`. ### Paleta neutral Chakra usa **gray** (`#fafafa` → `#111111`). Se mapea a `--air-primitive-neutral-*`. ### Paletas semánticas | Chakra | Air | | -------------------------------- | --------------------------- | | `red` (`#fef2f2` → `#1f0808`) | `--air-primitive-danger-*` | | `green` (`#f0fdf4` → `#03190c`) | `--air-primitive-success-*` | | `orange` (`#fff7ed` → `#220a04`) | `--air-primitive-warning-*` | | `blue` (`#eff6ff` → `#0c142e`) | `--air-primitive-info-*` | ### Tipografía - **Sans**: Chakra usa Inter → se cambia `--air-font-sans` a Inter con fallbacks del sistema - **Serif**: Se mantiene Lora (ya en el sistema Air) - **Mono**: Se mantiene Azeret Mono - Escala de 12 pasos: Se ajustan sizes/line-heights para coincidir con escala Chakra ### Border radius Chakra es más redondeado: `sm: 4px`, `md: 6px`, `lg: 8px`, `xl: 12px`, `2xl: 16px`, `3xl: 24px` → Se ajustan `--air-radius-*` para reflejar la personalidad "pretty" (más suave/redondeado) ### Sombras Se adaptan las sombras semánticas de Chakra (light/dark con `gray.900/10` y `black/64`) ### Spacing Chakra tiene una escala más granular (con `.5`). Se mantiene la escala Air existente ya que los componentes la consumen. ### Motion Se usan los easings y duraciones de Chakra: `moderate: 200ms`, `ease-in-smooth: cubic-bezier(0.32, 0.72, 0, 1)` --- ## Archivos a crear ### 1. `src/uix/air/themes/pretty/_static.css` Overrides estáticos del tema pretty: - `--air-font-sans` → Inter con fallbacks - `--air-radius-*` → valores más redondeados (estilo Chakra) - `--air-motion-distance-*` → distancias de Chakra - `--air-duration-*` → duraciones de Chakra - `--air-ease-*` → easings de Chakra ### 2. `src/uix/air/themes/pretty/light.css` Tokens de color para variante light: - Primitivos de color: neutral (gray Chakra), primary (purple), info (blue), success (green), warning (orange), danger (red) - Tokens semánticos: surfaces, content, borders, paletas por categoría - Sombras light ### 3. `src/uix/air/themes/pretty/dark.css` Tokens de color para variante dark: - Primitivos de color: versiones dark de cada escala - Tokens semánticos: surfaces dark, content dark, borders dark - Sombras dark ### 4. `src/uix/air/themes/pretty/index.css` Barrel CSS: importa `_static.css`, `light.css`, `dark.css` ### 5. `src/uix/air/themes/pretty/index.ts` Exporta `PRETTY_LIGHT_THEME` y `PRETTY_DARK_THEME` como objetos `AirTheme` ## Archivos a modificar ### 6. `src/uix/air/themes/index.css` Añadir `@import './pretty/index.css';` después de earth ### 7. `src/uix/air/themes/index.ts` - Añadir `'pretty-light' | 'pretty-dark'` al union type `AirThemeId` - Añadir exports de `PRETTY_LIGHT_THEME` y `PRETTY_DARK_THEME` --- ## Valores concretos (light) ### Primitivos neutral (gray Chakra) ``` 1: #fafafa 2: #f5f5f5 3: #e5e5e5 4: #d4d4d4 5: #a3a3a3 6: #737373 7: #525252 8: #404040 9: #262626 10: #171717 11: #111111 12: #09090b ``` ### Primitivos primary (purple Chakra) ``` 1: #faf5ff 2: #f3e8ff 3: #e9d5ff 4: #d8b4fe 5: #c084fc 6: #a855f7 7: #9333ea 8: #7e22ce 9: #6b21a8 10: #581c87 11: #3b0764 12: #1a032e ``` ### Primitivos info (blue Chakra) ``` 1: #eff6ff 2: #dbeafe 3: #bfdbfe 4: #93c5fd 5: #60a5fa 6: #3b82f6 7: #2563eb 8: #1d4ed8 9: #1e40af 10: #1e3a8a 11: #172554 12: #0c142e ``` ### Primitivos success (green Chakra) ``` 1: #f0fdf4 2: #dcfce7 3: #bbf7d0 4: #86efac 5: #4ade80 6: #22c55e 7: #16a34a 8: #15803d 9: #166534 10: #14532d 11: #052e16 12: #03190c ``` ### Primitivos warning (orange Chakra) ``` 1: #fff7ed 2: #ffedd5 3: #fed7aa 4: #fdba74 5: #fb923c 6: #f97316 7: #ea580c 8: #c2410c 9: #9a3412 10: #7c2d12 11: #431407 12: #220a04 ``` ### Primitivos danger (red Chakra) ``` 1: #fef2f2 2: #fee2e2 3: #fecaca 4: #fca5a5 5: #f87171 6: #ef4444 7: #dc2626 8: #b91c1c 9: #991b1b 10: #7f1d1d 11: #450a0a 12: #1f0808 ``` ### Primitivos dark (versiones invertidas) Los primitivos dark se generan invirtiendo las escalas de Chakra (claro→oscuro) manteniendo la misma lógica que base-dark. ### Radius (pretty = más redondeado) ``` sm: 6px md: 8px lg: 12px xl: 16px xxl: 24px ``` ### Sombras light ``` subtle: 0 1px 2px rgb(9 9 11 / 0.1), 0 0 0 1px rgb(9 9 11 / 0.2) raised: 0 2px 4px rgb(9 9 11 / 0.1), 0 0 0 1px rgb(9 9 11 / 0.3) overlay: 0 4px 8px rgb(9 9 11 / 0.1), 0 0 0 1px rgb(9 9 11 / 0.3) ``` ### Sombras dark ``` subtle: 0 1px 1px rgb(0 0 0 / 0.64), 0 0 0 1px inset rgb(163 163 163 / 0.2) raised: 0 2px 4px rgb(0 0 0 / 0.64), 0 0 0 1px inset rgb(163 163 163 / 0.3) overlay: 0 4px 8px rgb(0 0 0 / 0.64), 0 0 0 1px inset rgb(163 163 163 / 0.3) ``` ### Motion (overrides Chakra) ``` duration-fast: 150ms duration-normal: 200ms duration-moderate: 300ms duration-slow: 400ms ease-default: cubic-bezier(0.4, 0, 0.2, 1) ease-out: cubic-bezier(0, 0, 0.58, 1) ease-in: cubic-bezier(0.42, 0, 1, 1) ease-spring: cubic-bezier(0.32, 0.72, 0, 1) ``` --- ## Orden de implementación 1. Crear `src/uix/air/themes/pretty/_static.css` con overrides de radius, motion, tipografía 2. Crear `src/uix/air/themes/pretty/light.css` con primitivos + semánticos + sombras light 3. Crear `src/uix/air/themes/pretty/dark.css` con primitivos + semánticos + sombras dark 4. Crear `src/uix/air/themes/pretty/index.css` (barrel CSS) 5. Crear `src/uix/air/themes/pretty/index.ts` (exports TS) 6. Modificar `src/uix/air/themes/index.css` — añadir import pretty 7. Modificar `src/uix/air/themes/index.ts` — añadir tipos y exports 8. Verificar con `npm run check` y `npm run build`