go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '72e8fb57ea'
${ noResults }
svelte-kit-vice/.kilo/plans/1775997720057-swift-pixel.md

204 lines
5.9 KiB
Raw Normal View History Unescape

soma: 12 components, architecture docs, naming fixes, form tier complete Components (12): - Accordion (keyboard nav, single/multiple, collapsible, loop) - Checkbox (indeterminate, group, readonly) - Collapsible - Combobox (input + floating listbox, consumer-side filtering) - Dialog (variant dialog/alertdialog, modal, nested, animations, forceMount) - DropdownMenu (15 parts, submenus, typeahead, checkbox/radio items) - Popover (floating, openOnHover, modal, custom anchor) - RadioGroup (roving tabindex, orientation, readonly) - Select (single/multiple, typeahead, scroll-into-view, hidden select) - Slider (drag, keyboard, single/range, ticks, vertical) - Switch (hidden input, data-checked) - Tooltip (skip-delay group, 3-state, hover/focus) Architecture: - State class files renamed: {name}.svelte.ts → {name}-provider.svelte.ts (avoids Vite module resolution ambiguity with .svelte wrappers) - Export name standardized: always Provider, never Root - COMPONENT_GUIDE.md: step-by-step implementation guide with checklist - SOMA_ARCHITECTURE.md: updated structure, anti-patterns, improvements table - README.md: updated naming, file structure, inventory - context.ts: error message uses Provider not Root - Demo index page at /test/soma/ Bug fixes: - DropdownMenu trigger missing onclick/onkeydown in props - DropdownMenu interactOutsideBehavior always 'close' (not modal-dependent) - Checkbox getContext in event handler → captured in constructor - Select context not found → was Vite cache issue (not naming) - ScrollLock unlock path - Floating wrapper z-index: auto override Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
6 months ago
# 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`

Powered by TurnKey Linux.