Configuración · UI
Valores por defecto de theme.ts, editables en vivo. Se guardan en localStorage de este navegador.
Presets
Guarda cada categoría por separado y combínalas: aplicar un preset no cambia las demás
Aún no hay presets en esta categoría. Ajusta los valores y guarda el primero.
Cada secuencia tiene un número por token, de xs a 9xl. Edita los números y guárdalos como preset de Tamaños.
xssmmdlgxl2xl3xl4xl5xl6xl7xl8xl9xl --sp-<size> · × --sp-un--rd-<size> · × --rd-un × --f-radius--text-<size> · × --fs-un--cp-<size> · × --sp-un--cg-<size> · × --sp-un--cc-<size> · × --sp-un--lh-<size> · emTemas
Guarda el estado actual en este navegador y copia el código TypeScript para fijarlo en theme.ts
Aún no hay temas guardados. Ajusta colores, escalas o tokens y guarda el primero.
Tipografía
--fs-un
1rem · 16pxRadios
--rd-un · --f-radius
0.0625rem×1Sombras
--sh-* · intensidad global
×1Unidades de las que derivan tipografía, espaciado y radios
| Valor | Vista | |||
|---|---|---|---|---|
| Unidad tipográfica | --fs-un | 1rem | 16px | |
| Unidad de espaciado | --sp-un | 0.25rem | 4px | |
| Unidad de radio | --rd-un | 0.0625rem | 1px | |
| Factor de radio | --f-radius | 1 |
--sh-<size>: cualquier valor CSS de box-shadow (respeta la intensidad global si no la editas)
| Valor | Vista | |||
|---|---|---|---|---|
| shadow-xs | --sh-xs | 0 1px 2px 0 rgb(0 0 0 / 0.05) | ||
| shadow-sm | --sh-sm | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) | ||
| shadow-md | --sh-md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | ||
| shadow-lg | --sh-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | ||
| shadow-xl | --sh-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | ||
| shadow-2xl | --sh-2xl | 0 25px 50px -12px rgb(0 0 0 / 0.25) |
Toca la muestra de «Vista» para abrir el color: base y parámetros que generan su escala 50–900
| Valor | Vista | |||
|---|---|---|---|---|
| primary | --primary | #4f78ba | ||
| accent | --accent | #2c6e49 | ||
| neutral | --neutral | #646d66 | ||
| success | --success | #6f9e23 | ||
| error | --error | #d6322c | ||
| warning | --warning | #fcbf49 | ||
| info | --info | #227cbd |
Dimensiones del App Shell y contenedores
| Valor | Vista | |||
|---|---|---|---|---|
| Ancho del sidebar | --sidebar-w | 280px | ||
| Ancho del sidebar · iconos | --sidebar-w-iconbar | 5rem | ||
| Ancho del sidebar · riel | --sidebar-w-railbar | 5.5rem | ||
| Radio de los ítems del menú | --sidebar-item-radius | var(--rd-sm) | ||
| Alto del header | --web-header-h | 4rem | ||
| Ancho máx. contenedor | --container-max | 1340px | ||
| Ancho máx. contenedor admin | --container-admin-max | 90% |