6.6 KiB
RFC — Sistemas estructurales (espacio · densidad · escala) de Eidos
Hermano de
COLOR_ENGINE_RFC.md,TYPOGRAPHY_ENGINE_RFC.md,DEPTH_ENGINE_RFC.mdySHAPE_ENGINE_RFC.md. Lleva los sistemas estructurales a reference-grade. A diferencia de los canales expresivos (los 8 del libro), lo estructural es solo-estado — el escenario, no el suceso. Por eso la novedad aquí no es eventful: es ritmo, fluidez y composición de ejes, bajo la jaula abierta.
0. Tesis
El espacio no es una tabla de búsqueda de píxeles arbitrarios; es un ritmo — derivado de una unidad base, fluido (respira con el viewport) y compuesto con densidad y zoom desde una semilla mínima.
Todos shippean una escala de espacio plana (4 · 8 · 12 · 16 · 24…), arbitraria,
estática y desligada de la tipografía. Eidos ya tiene los otros dos ejes estructurales
—densidad (compacidad) y scaling (zoom)— por encima de la media; falta que el espacio
mismo sea ritmo: modular, fluido y con builder runtime, como ya hizo la tipografía.
1. El estudio — cómo lo hacen los referentes y dónde topan
| Framework | Espacio | Límite |
|---|---|---|
| Tailwind | escala fija (0.25rem × N) |
plana, arbitraria, estática |
| Material | grid 8dp |
múltiplos de 8, estática, sin fluidez |
| Radix / Chakra / Mantine | tokens de space | escala plana estática; densidad (si hay) = preset global |
| Bootstrap / Ant / Carbon / Fluent | escala de spacers | igual — plana + estática |
| Utopia.fyi | fluid space (técnica) | una calculadora externa, no un sistema de tokens integrado con densidad + zoom |
Límite común: el espacio es una escala plana de px, estática (no respira con el viewport), arbitraria (no deriva de nada), y desconectada de la densidad / el zoom como un sistema. Utopia demostró el fluid space pero como hoja de cálculo, no como motor de tokens.
2. Dónde está Eidos hoy (fuerte en 2 de 3 ejes)
- Densidad — 3 niveles (
compact · comfortable · spacious) × 2 ejes (spaceScale+controlScale). Aprieta el layout sin tocar la legibilidad del texto. ✓ (por encima de la media) - Scaling — zoom global
90–110que escala los px incluida la tipografía (paridad Radix), componiendo con densidad. ✓ - Layout — contenedores + padding + breakpoints + aspect-ratios. ✓
- Composición —
--space-{key}se emite comocalc(value · var(--density-space-scale) · var(--scaling)): densidad × zoom ya componen. ✓ - PERO el espacio EN SÍ (
STATIC_SPACE) es px plano y arbitrario (base 4, medios-pasos a mano), estático (no respira) y sin builder — a diferencia del tipo, que tienebuildTypeScale(modular + fluido) +applyTypeScale(runtime). Es el eje rezagado.
3. El modelo novel — el espacio como ritmo
- Modular — cada paso = unidad base × N (un ladder coherente), no px sueltos.
- Fluido —
clamp(): el espacio respira con el viewport (como el tipo fluido — casi ningún framework lo hace para el espacio). Reusa el mismofluidClampdel type scale. - Tres ejes ortogonales — ritmo (la escala) × densidad (compacidad) × scaling (zoom), compuestos multiplicativamente. Una semilla mínima los gobierna.
- Builder runtime —
buildSpaceScale(seed)(puro) +applySpacing(seed)(DOM), hermano deapplyColorScheme/applyTypeScale/applyDepth/applyShape. Completa el quinteto.
3.bis Estructural = solo-estado (sin dos momentos)
A diferencia de motion / depth / shape, el espacio no “ocurre”: es el escenario, no el suceso. El modelo de dos momentos (estado vs evento) pertenece a los canales expresivos. Forzar un “espacio eventful” sería disfraz — la honestidad doctrinal es que aquí la novedad es ritmo + fluidez + composición de ejes, no eventful. (Mismo rigor: no inventar un momento que no existe.)
4. Doctrina — default fuerte, jaula abierta
| Pieza | Default fuerte | Puerta abierta |
|---|---|---|
| escala de espacio | STATIC_SPACE authored (estable, curada) |
buildSpaceScale / applySpacing = alternativa modular + fluida opt-in (misma postura que applyTypeScale sobre la escala authored) |
| densidad | 3 niveles × 2 ejes | config-driven + runtime ([data-density]) |
| scaling | 90–110, factores universales |
runtime ([data-scaling]); compone con densidad |
| composición | calc(value · density · scaling) |
los primitivos --space-* siempre accesibles; el builder preserva la composición |
| sistema entero | tema canónico | applySpacing(seed) runtime |
5. Contrato de tokens
--space-{key} value · var(--density-space-scale) · var(--scaling) (escala existente — se mantiene)
El builder reescribe el value (bloque gestionado) por uno modular/fluido, preservando el
calc(… · density · scaling) para que densidad y zoom sigan componiendo. Cero renombrado → cero
rotura.
6. Fases
- Builder de espacio —
buildSpaceScale(seed)(puro: unidad base × ladder, fluido víafluidClamp) +ActiveEidos.applySpacing/clearSpacing(bloque gestionado que preserva· density · scaling) + export + test. Opt-in;STATIC_SPACEintacto. - Showcase + docs —
/temas/estructura(densidad × scaling × espacio fluido en vivo) + THEMING §estructura + esta RFC. - ⏸️ (futuro)
applyTheme(seed)— una semilla que compone tipo + espacio (ritmo compartido).
7. Composición con lo existente
fluidClamp(del type scale) → el espacio fluido (no se reinventa).calc(value · density · scaling)→ se preserva (densidad + zoom siguen componiendo).buildTypeScale→ el patrón exacto quebuildSpaceScalerefleja (semilla → ladder fluido).- Box/Flex/Grid/Stack/Container → consumen
--space-*; no se tocan.
8. Doctrina (paralela a color / tipografía / depth / shape)
- Escala authored = canon estable; el builder = alternativa matemática opt-in (igual que tipografía). El theme retunea, el builder recompone.
- Densidad y scaling = ejes ortogonales al ritmo; los tres componen.
- Jaula abierta:
--space-*crudo siempre a un paso.
9. Fuera de alcance
- Baseline grid rígido (vertical rhythm pixel-perfect): el ritmo modular + fluido da cadencia sin imponer una rejilla rígida que pelee con el contenido real.
- Reinventar el layout:
Box · Flex · Grid · Stack · Container · AutoGridya cubren la composición; aquí elevamos el espacio, no las primitivas de layout.