|
|
|
|
@ -0,0 +1,114 @@
|
|
|
|
|
# RFC — Motor de profundidad (depth) de Eidos
|
|
|
|
|
|
|
|
|
|
> Hermano de `COLOR_ENGINE_RFC.md` y `TYPOGRAPHY_ENGINE_RFC.md`. Lleva el canal de
|
|
|
|
|
> **profundidad** (`depth/presence` del libro *Diseñando lo que ocurre*) a reference-grade
|
|
|
|
|
> **rompiendo** el modelo de los referentes, no copiándolo — con la **jaula abierta**.
|
|
|
|
|
|
|
|
|
|
## 0. Tesis
|
|
|
|
|
|
|
|
|
|
> **La profundidad no es algo que un elemento _tiene_; es algo que _ocurre_.**
|
|
|
|
|
|
|
|
|
|
Un overlay no "tiene elevación 4": **enuncia una emergencia** — asciende a un plano
|
|
|
|
|
delantero al aparecer, recede al irse — gobernado por el **mismo evento sema** que ya dirige
|
|
|
|
|
su motion/sound/haptic. La profundidad pasa a ser un **canal de expresión de primera clase**
|
|
|
|
|
(uno de los 8 del libro), **unificado** (una sola noción cohere superficie + sombra + z +
|
|
|
|
|
atmósfera), **eventful** (lo dispara el motor sema) y con **jaula abierta** (default fuerte,
|
|
|
|
|
puertas en cada capa).
|
|
|
|
|
|
|
|
|
|
## 1. El estudio — cómo lo hacen los referentes y dónde topan
|
|
|
|
|
|
|
|
|
|
| Framework | Modelo | Límite estructural |
|
|
|
|
|
|---|---|---|
|
|
|
|
|
| **Material 3** | elevación = tinte tonal + sombra, escala `dp` 0–5 | `dp` = altura física con 1 foco de luz; la elevación es **propiedad** del componente, no expresión de un suceso; escala fija |
|
|
|
|
|
| **Tailwind** | `shadow-sm…2xl` presets planos | sin modo (la sombra en dark *miente*), sin superficie, sin semántica |
|
|
|
|
|
| **Apple / SwiftUI** | materiales (blur/vibrancy) + sombra sutil | atado a plataforma (backdrop), no es sistema de tokens portable |
|
|
|
|
|
| **Polaris / Carbon / Radix** | escala de sombra por rol o numérica | estática; rol fijo, desligada de eventos |
|
|
|
|
|
|
|
|
|
|
**Límite común** (incluso M3, el más fino): profundidad = **propiedad estática que asignas**
|
|
|
|
|
+ **modelo de luz skeuomórfico** + **desconectada** de lo que ocurre y de sus propias señales
|
|
|
|
|
entre sí. Nadie trata la profundidad como **expresión de un suceso**. Y todos eligen un bando:
|
|
|
|
|
Tailwind = flexible **sin opinión**; Material = **opinión fuerte pero jaula cerrada**.
|
|
|
|
|
|
|
|
|
|
## 2. Dónde está Eidos hoy (ya por encima de la media, pero no novedoso)
|
|
|
|
|
|
|
|
|
|
- **z-index** en bandas semánticas: `base · raised · sticky · dropdown · popover · tooltip · modal · toast`. ✓
|
|
|
|
|
- **Escalera de superficie tonal y mode-aware**: `surface-default→raised→overlay` = `neutral-1→2→4` (en dark, "más arriba" = más claro — el tonal-overlay de M3, ya presente). ✓
|
|
|
|
|
- **Sombras nombradas por rol**: `shadow-subtle/raised/overlay` (→ `shadow-1/3/5`), set propio por tema (`THEME_BASE_DARK_SHADOW`). ✓ (por encima de Tailwind)
|
|
|
|
|
- **PERO** son **3 sistemas separados** (eliges sombra + superficie + z a mano), la profundidad es **estática** (un prop) y el modelo sigue siendo el de sombra-skeuomórfica. Estás ~a la par de M3.
|
|
|
|
|
|
|
|
|
|
## 3. El modelo novel — 4 piezas
|
|
|
|
|
|
|
|
|
|
1. **Plano semántico unificado** — `flush · raised · overlay · modal · recessed`. Un nivel cohere superficie + sombra + z + (blur/scrim) de una vez. Nombra por **rol en la jerarquía de atención**, no por milímetros.
|
|
|
|
|
2. **Mezcla multi-señal adaptada al modo, _computada_** — light se apoya en sombra; dark en tinte de superficie + halo (la sombra en dark miente). Sombras derivadas del **color de la superficie en OKLCH** (no negro-alpha plano), reusando el motor de color. Resuelve el problema sombra-en-dark de raíz.
|
|
|
|
|
3. **Profundidad _eventful_ (lo genuinamente nuevo)** — un canal que el motor **sema** dispara, como sound/haptic: `emerge`→sube, `contact`→hunde, `signal/threat`→empuja al frente; coordinado con el modelo de **dos momentos** de motion.
|
|
|
|
|
4. **Atmósfera / presencia** — backdrop-blur (frost) + scrim: lo que está al frente desenfoca/dimma lo que recede (solapamiento con el canal *presence*).
|
|
|
|
|
|
|
|
|
|
## 4. Doctrina — _default fuerte, jaula abierta_
|
|
|
|
|
|
|
|
|
|
> La capa semántica es **aditiva** sobre primitivos que **nunca desaparecen**; el set, la
|
|
|
|
|
> mezcla y el canal son **extensibles/anulables** por config + el registro abierto de sema.
|
|
|
|
|
|
|
|
|
|
| Pieza | Default fuerte | Puerta abierta |
|
|
|
|
|
|---|---|---|
|
|
|
|
|
| **planos** | set canónico (5) | el **set es config-driven** (`EidosConfig.depth.planes`); añade `sheet`/`peek`, renombra — no un enum cerrado |
|
|
|
|
|
| **mezcla** | mezcla computada por plano | **retunear la mezcla por plano** en config; **override por componente** de cualquier señal; los **primitivos siguen ahí** (`--shadow-N`, `z-index`, `box-shadow` crudo a un paso) |
|
|
|
|
|
| **canal eventful** | `emerge↑ / contact↓` | **opt-in/opt-out** (como sound+haptic); reglas en el **registro abierto de sema** (declaration merging + cascada appendable → la app añade/anula el mapa evento→profundidad); **degrada con `prefers-reduced-motion`**; la profundidad **estática funciona sin el canal** (eventful es aditivo, nunca un muro) |
|
|
|
|
|
| **atmósfera** | frost+scrim en overlays | amount/opacidad en config; **opt-out** por overlay (coste/preferencia) |
|
|
|
|
|
| **sistema entero** | tema canónico | **`applyDepth(seed)`** runtime (hermano de `applyColorScheme`/`applyTypeScale`) |
|
|
|
|
|
|
|
|
|
|
Esto **no es nuevo en el framework**: es exactamente cómo ya operan sema (registro abierto),
|
|
|
|
|
eidos (config + `setCssVariables` + overrides de recipe) y color/tipografía (canon retintable
|
|
|
|
|
+ builders runtime). Depth hereda el mismo contrato de apertura.
|
|
|
|
|
|
|
|
|
|
## 5. Contrato de tokens (añadidos, congelados)
|
|
|
|
|
|
|
|
|
|
Bare-prefixed por sistema (`--depth-…`). El plano es un **bundle nombrado** que **compone los
|
|
|
|
|
primitivos existentes** — no los reemplaza:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
--depth-{plane}-surface → var(--color-surface-{…}) (tinte tonal, mode-aware)
|
|
|
|
|
--depth-{plane}-shadow → var(--shadow-{…}) (computado en Fase 2)
|
|
|
|
|
--depth-{plane}-z → var(--z-index-{…}) (banda)
|
|
|
|
|
--depth-{plane}-blur → atmósfera (Fase 4)
|
|
|
|
|
--depth-{plane}-scrim → atmósfera (Fase 4)
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Consumo: `[data-depth='{plane}']` aplica las señales **aditivas seguras** (sombra + z + blur);
|
|
|
|
|
la **superficie** es un token opt-in (`background: var(--depth-{plane}-surface)`) para no pisar
|
|
|
|
|
fondos de componente. Sin renombrar nada existente → **cero rotura de componentes**.
|
|
|
|
|
|
|
|
|
|
## 6. Fases (la flexibilidad va horneada en cada una)
|
|
|
|
|
|
|
|
|
|
1. **Plano unificado** — `EidosConfig.depth` + planos canónicos + emisión `--depth-{plane}-*`
|
|
|
|
|
(componen surface/shadow/z) + regla `[data-depth]` (sombra+z) + validación + test + regen.
|
|
|
|
|
Puertas: set config-driven, mezcla por plano, primitivos intactos, escape a raw.
|
|
|
|
|
2. **Mezcla computada mode-adaptive** — sombras OKLCH derivadas de la superficie; light↑sombra /
|
|
|
|
|
dark↑tinte+halo. Override literal siempre disponible.
|
|
|
|
|
3. **Canal sema `depth`** — `emerge↑ / contact↓` vía el registro abierto de sema; opt-in/opt-out;
|
|
|
|
|
degrada en reduced-motion; reglas anulables. Coordinado con dos-momentos de motion.
|
|
|
|
|
4. **Atmósfera** — blur/scrim en config; opt-out por overlay. + builder `applyDepth(seed)`.
|
|
|
|
|
5. **Showcase + docs** — `/temas/profundidad` (planos/mezcla/eventful en vivo) + THEMING §depth.
|
|
|
|
|
|
|
|
|
|
## 7. Composición con lo existente
|
|
|
|
|
|
|
|
|
|
- **Escalera de superficie** (color) → la señal `surface` del plano (mode-aware gratis).
|
|
|
|
|
- **Motor de color OKLCH** → sombras computadas (Fase 2) y halos.
|
|
|
|
|
- **Dos momentos de motion** → la transición de ascenso/recesión (Fase 3) es un movimiento, no un salto.
|
|
|
|
|
- **Bus de eventos sema** → el disparo eventful (Fase 3), como sound/haptic.
|
|
|
|
|
- **z-index bands** → la señal `z` del plano.
|
|
|
|
|
|
|
|
|
|
No se reinventa nada: se **unifica + se hace eventful** lo disperso, bajo la doctrina del libro.
|
|
|
|
|
|
|
|
|
|
## 8. Doctrina (paralela a color / tipografía)
|
|
|
|
|
|
|
|
|
|
- **Planos + canal = canon del eidos** (como roles/variants y estilos nombrados): valores
|
|
|
|
|
themeables, pero el *set* es canon.
|
|
|
|
|
- **Profundidad eventful = capacidad del motor**, opt-in con degradación (como sound/haptic).
|
|
|
|
|
- **Theme = retintar/retunear lo perceptualmente fijo**: cambia CUÁNTA sombra es `overlay`,
|
|
|
|
|
no QUÉ significa `overlay`.
|
|
|
|
|
- **Jaula abierta**: opinión fuerte que nunca atrapa — primitivos siempre accesibles.
|
|
|
|
|
|
|
|
|
|
## 9. Fuera de alcance
|
|
|
|
|
|
|
|
|
|
- 3D real / perspectiva / parallax con giroscopio (la profundidad es perceptual, no un motor 3D).
|
|
|
|
|
- Ray-tracing de sombras por geometría (se computa el tinte/halo, no la oclusión física).
|
