David
3d2ce8b981
- Introduced `page-layouts.md` to outline approved page patterns for progressive adoption. - Created `visual-system-design.md` to consolidate visual, architectural, and adoption decisions for a uniform UI/UX system in the ERP frontend. - Added `RdxEditorActionBar` component for managing action bars in editor screens. - Implemented `RdxPanel` component for grouping related content with optional headers and actions.
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`.
|