5.9 KiB

Raw Blame History

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

Crear src/uix/air/themes/pretty/_static.css con overrides de radius, motion, tipografía
Crear src/uix/air/themes/pretty/light.css con primitivos + semánticos + sombras light
Crear src/uix/air/themes/pretty/dark.css con primitivos + semánticos + sombras dark
Crear src/uix/air/themes/pretty/index.css (barrel CSS)
Crear src/uix/air/themes/pretty/index.ts (exports TS)
Modificar src/uix/air/themes/index.css — añadir import pretty
Modificar src/uix/air/themes/index.ts — añadir tipos y exports
Verificar con npm run check y npm run build

5.9 KiB Raw Blame History