135 lines
2.1 KiB
Markdown
135 lines
2.1 KiB
Markdown
|
# Foundations Rdx
|
||
|
|
|
||
|
|
## Estado
|
||
|
|
|
||
|
|
Este documento define las foundations estructurales iniciales del sistema visual Rdx.
|
||
|
|
|
||
|
|
El documento canónico de contexto global es:
|
||
|
|
|
||
|
|
- [visual-system-design.md](./visual-system-design.md)
|
||
|
|
|
||
|
|
## Espaciado de página
|
||
|
|
|
||
|
|
```txt
|
||
|
|
mobile:
|
||
|
|
padding 4
|
||
|
|
|
||
|
|
desktop:
|
||
|
|
padding 6
|
||
|
|
```
|
||
|
|
|
||
|
|
Referencia inicial:
|
||
|
|
|
||
|
|
```txt
|
||
|
|
px-4 py-4
|
||
|
|
md:px-6 md:py-6
|
||
|
|
```
|
||
|
|
|
||
|
|
Se aplica en `RdxPageContainer`.
|
||
|
|
|
||
|
|
Uso correcto:
|
||
|
|
|
||
|
|
- usarlo como padding principal de página;
|
||
|
|
- no anidarlo dentro de otro contenedor que ya aporte el mismo padding estructural;
|
||
|
|
- si el shell ya aplica padding equivalente, el consumidor debe evitar duplicarlo.
|
||
|
|
|
||
|
|
## Ritmo vertical
|
||
|
|
|
||
|
|
```txt
|
||
|
|
compact:
|
||
|
|
gap 4
|
||
|
|
|
||
|
|
default:
|
||
|
|
gap 6
|
||
|
|
|
||
|
|
relaxed:
|
||
|
|
gap 8
|
||
|
|
```
|
||
|
|
|
||
|
|
No se fija `gap-12` como foundation general.
|
||
|
|
|
||
|
|
Se aplica en `RdxPageStack`.
|
||
|
|
|
||
|
|
## Anchuras
|
||
|
|
|
||
|
|
```txt
|
||
|
|
full:
|
||
|
|
w-full
|
||
|
|
|
||
|
|
wide:
|
||
|
|
max-w-screen-2xl mx-auto
|
||
|
|
|
||
|
|
content:
|
||
|
|
max-w-5xl mx-auto
|
||
|
|
```
|
||
|
|
|
||
|
|
Uso recomendado:
|
||
|
|
|
||
|
|
- `full`: listados, tablas, editores complejos, pantallas documentales;
|
||
|
|
- `wide`: detalles o páginas amplias centradas;
|
||
|
|
- `content`: editores simples y formularios de una columna lógica.
|
||
|
|
|
||
|
|
## Superficies
|
||
|
|
|
||
|
|
```txt
|
||
|
|
contenido principal:
|
||
|
|
plano
|
||
|
|
|
||
|
|
secciones:
|
||
|
|
separadas por espacio o divisores
|
||
|
|
|
||
|
|
aside:
|
||
|
|
puede usar paneles
|
||
|
|
|
||
|
|
tabla/editor de líneas:
|
||
|
|
puede usar superficie independiente
|
||
|
|
|
||
|
|
card:
|
||
|
|
excepción, no default
|
||
|
|
```
|
||
|
|
|
||
|
|
Reglas:
|
||
|
|
|
||
|
|
- no usar card como solución por defecto para toda la página;
|
||
|
|
- evitar card dentro de card;
|
||
|
|
- preferir espacio, jerarquía tipográfica y divisores.
|
||
|
|
|
||
|
|
## Sombras
|
||
|
|
|
||
|
|
```txt
|
||
|
|
página:
|
||
|
|
sin sombra
|
||
|
|
|
||
|
|
secciones:
|
||
|
|
sin sombra
|
||
|
|
|
||
|
|
panel contextual:
|
||
|
|
sombra suave opcional
|
||
|
|
|
||
|
|
sticky header/footer:
|
||
|
|
preferir borde
|
||
|
|
usar sombra mínima solo cuando sea necesaria
|
||
|
|
```
|
||
|
|
|
||
|
|
## Tema
|
||
|
|
|
||
|
|
Uso obligatorio de tokens semánticos:
|
||
|
|
|
||
|
|
```txt
|
||
|
|
bg-background
|
||
|
|
text-foreground
|
||
|
|
bg-muted
|
||
|
|
text-muted-foreground
|
||
|
|
border-border
|
||
|
|
bg-primary
|
||
|
|
text-primary-foreground
|
||
|
|
bg-destructive
|
||
|
|
text-destructive-foreground
|
||
|
|
```
|
||
|
|
|
||
|
|
Reglas:
|
||
|
|
|
||
|
|
- no introducir colores físicos para resolver superficies o estados;
|
||
|
|
- no crear una nueva paleta de `success`, `warning` o `info` en esta fase si no existe convención central consolidada;
|
||
|
|
- validar cualquier foundation nueva en `light` y `dark`.
|