3.5 KiB
Sistema visual de Juegoland
La identidad la llevan el logo multicolor y los tableros. La interfaz acompaña con una sola familia, controles legibles y alineaciones compartidas. Esta consolidación mantiene las paletas existentes; concentra sus valores y retira las correcciones CSS duplicadas.
Tokens
src/tokens.css define los valores compartidos. La base clara conserva fondo #f5f7fc, superficie #ffffff, texto #202c41, texto secundario #58677e, acento #0759d9 y borde #dde4f0. Los modos claro, oscuro y sistema y las paletas azul, bosque y violeta consumen los mismos nombres semánticos.
Manrope se usa para títulos y texto. El cuerpo aumenta gradualmente de 16 a 18 px con el ancho disponible; los demás roles derivan de él. Un título de tarjeta usa --type-subtitle, una sección --type-section, el nombre de una partida --type-body y sus datos --type-secondary. El texto auxiliar usa --type-detail. El cambio de ancho no cambia estos roles.
Los espaciados siguen una base de 4 px: 4, 8, 12, 16, 20, 24, 32, 40, 48 y 64. Hay 2 px para separaciones pequeñas. Los radios distinguen controles, tarjetas, paneles y diálogos; las sombras distinguen controles, tarjetas y capas flotantes.
Composición
El catálogo alinea título, descripción, datos y acción dentro de cada tarjeta. Las partidas pendientes y las salas comparten tamaños de nombre y metadatos. El texto de lectura se limita a 70 caracteres de ancho. En una sala, el tablero ocupa el espacio disponible y los controles y el chat mantienen una escala de interfaz propia.
El tablero y sus controles forman un conjunto compacto centrado. Al abrir el chat, el panel utiliza primero el margen libre de la derecha: si cabe, conserva las mismas coordenadas y dimensiones del tablero y los controles. Cuando falta espacio, el conjunto se desplaza solo lo necesario y el tablero reduce su tamaño si hace falta. En tabletas, el parchís coloca los controles debajo; en móvil, el chat se superpone y se cierra con su botón. El cálculo usa las dimensiones completas del área de juego, sin estrechar el contenedor ni convertir la columna del tablero en una franja elástica.
Escritorio Móvil
menú | contenido alineado cabecera
| tarjetas y partidas tarjeta
| tarjeta
diálogo centrado diálogo con márgenes laterales
La marca y los tableros concentran el color y el detalle. Los controles comparten alineación, foco visible y tamaño táctil. Las animaciones de juego conservan sus reglas y respetan movimiento reducido.
Mantenimiento
src/app.css contiene los estilos globales consolidados en el orden necesario para preservar la cascada. Los estilos locales de Svelte consumen los mismos tokens. No se crean hojas de correcciones superpuestas.
Las coordenadas SVG, el recorrido de los tableros, los puntos y caras del dado y la geometría de las ilustraciones son valores de dibujo: se mantienen en sus componentes. Los puntos de ruptura permanecen como condiciones CSS explícitas, porque las variables CSS no se pueden usar directamente en las condiciones de @media.
Antes de publicar: ejecutar npm run design:check, las comprobaciones del proyecto y revisar catálogo, perfil, diálogos y sala en móvil y escritorio, tanto en claro como en oscuro. La auditoría exige tokens para tamaños, familia, peso, interlineado y espaciado tipográfico; también revisa márgenes, rellenos, separaciones, radios y referencias a variables CSS.