David 3d2ce8b981 feat: add page layouts documentation and visual system design for Rdx UI components

- 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.

2026-09-04 11:07:59 +02:00

2.1 KiB

Raw Blame History

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

Espaciado de página

mobile:
  padding 4

desktop:
  padding 6

Referencia inicial:

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

compact:
  gap 4

default:
  gap 6

relaxed:
  gap 8

No se fija gap-12 como foundation general.

Se aplica en RdxPageStack.

Anchuras

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

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

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:

bg-background
text-foreground
bg-muted
text-muted-foreground
border-border
bg-primary
text-primary-foreground
bg-destructive
text-destructive-foreground