Sistema de diseño

¿Qué quieres cambiar?

El cambio más común y el archivo que hay que tocar. Todo lo visual sale de tokens: nada va escrito a mano en un componente.

• Un color de la marcadesign/tokens/colors.scssEl contraste de esta página se recalcula solo.
• El color de un estado o una prioridadmodules/incidents/presentation/incidentTones.tsCódigo del catálogo → tono. Los catálogos no guardan colores.
• La tipografía o un tamaño de letradesign/tokens/typography.scssUna sola familia: Inter.
• Un espacio o un radiodesign/tokens/spacing.scssEscala de 4 px; Stylelint rechaza valores fuera de ella.
• Dónde cambia de celular a tablet, portátil o monitordesign/tokens/breakpoints.scssMixins tablet, laptop y desktop.
• Un íconodesign/icons/icons.tsFiguras sobre una grilla de 24.
• El logoshared/ui/brand/AppLogo.vueshared/ui/brand/AppLogoMark.vueEl aro de tres trazos.
• La pantalla de cargadesign/brand/boot-loader.scssCSS puro, antes de que cargue la app.
• Sombras, foco y duración de animacionesdesign/tokens/shadows.scss
• Los colores de los gráficosdesign/tokens/colors.scssMapa $chart-fills.
• El dock (menú de abajo)design/tokens/spacing.scssdesign/tokens/layout.tsAlto, separación y lugares según el ancho.
• Los colores que usa Quasardesign/theme/quasar-variables.scssQuasar toma los tokens de aquí.

Colores

Cada muestra dice su token, para qué se usa y el contraste del texto que lleva encima: negro o blanco, el que dé más contraste (regla de Trazo, mínimo AA 4,5:1).

Base

• Aa6,5:1 · AAAcento, gráficos e íconos$color-blue-base#03a8d5
• Aa7,9:1 · AAAcento, gráficos e íconos$color-green-base#86bb24
• Aa8,4:1 · AAAcento, gráficos e íconos$color-orange-base#ff9829

Tonos oscuros

• Aa5,2:1 · AABotones, enlaces y foco$color-blue-strong#027695
• Aa5,7:1 · AAÉxito$color-green-strong#507016
• Aa5,4:1 · AAAtención$color-orange-strong#995b19

Rojo armonizado

• Aa5,1:1 · AAErrores, Crítica y Vencido$color-red#c93a3a

Neutros fríos, sin blanco puro

• Aa16,2:1 · AAFondo de página$color-page#eef3f6
• Aa17,3:1 · AATarjetas y tablas$color-surface#f7fafb
• Aa14,2:1 · AABordes$color-border#dde5ea
• Aa11,4:1 · AABordes marcados$color-border-strong#c9ced4
• Aa5,7:1 · AATexto apagado$color-muted#8a929c
• Aa5,8:1 · AATexto secundario$color-text-secondary#5f6670
• Aa10,0:1 · AATono oscuro$color-neutral-dark#3d434a
• Aa18,1:1 · AATexto$color-text#161616
• Aa18,1:1 · AATexto sobre fondo oscuro$color-on-dark#ffffff

Tipografía

Una sola familia, Inter, autoalojada (sin servicios externos). Tres pesos: 400, 500 y 600.

• $font-size-xstexto auxiliar12 px
• $font-size-smetiquetas y botones13 px
• $font-size-mdtexto base14 px
• $font-size-lgsubtítulos16 px
• $font-size-xltítulos de sección20 px
• $font-size-2xltítulo de página28 px
• $font-size-brandlogo de las pantallas sin sesión40 px

Espacios y radios

Escala de 4 px. Stylelint rechaza cualquier medida que no sea un token.

• $space-14 px
• $space-28 px
• $space-312 px
• $space-416 px
• $space-524 px
• $space-632 px
• $space-748 px

• $radius-control8 px · botones y campos (Quasar opera los radios en px)
• $radius-card10 px · tarjetas y diálogos
• $radius-pillredondo · chips y barras
• $radius-badge4 px · etiquetas de estado
• $radius-menu4 px · paneles desplegables (menús y opciones de los selectores)
• $radius-dock16 px

Íconos

Los 39 íconos propios de Trazo, guardados como figuras en design/icons/icons.ts: grilla de 24, trazo de 1,5 px, puntas redondeadas y sin relleno. Se usan con <AppIcon name="…" />.

• home
• incidents
• dashboard
• audit
• users
• user
• shield
• server
• search
• filter
• sort
• plus
• edit
• trash
• refresh
• download
• calendar
• board
• clock
• info
• alert
• check
• close
• chat
• send
• bell
• menu
• more
• copy
• circle
• grip
• chevron-down
• chevron-up
• chevron-left
• chevron-right
• eye
• eye-off
• lock
• logout

Componentes

Los 41 componentes compartidos de shared/ui, con la descripción de su propio encabezado. El detalle de cada uno está en Componentes base.

Base

• AppActionMenuMenú de opciones que se abre desde el botón que lo contiene.
• AppAvatarCírculo con las iniciales de una persona, en tres tamaños: sm en las filas del listado, md en el historial y el chat, lg en la ficha.
• AppBackLinkEnlace para volver al listado de una sección ("‹ Usuarios" en la ficha de una persona).
• AppBadgeEtiqueta sólida (p.
• AppButtonBotón base.
• AppCardTarjeta: superficie casi blanca con borde suave, título opcional y zona de acciones.
• AppCopyBlockTexto para copiar (una clave, un código): se muestra legible y con el botón "Copiar", que avisa al terminar.
• AppDataTableTabla de datos de los listados (portátil y monitor): encabezados que ordenan, filas que se abren con clic o Enter y una fila elegida resaltada.
• AppDotPunto de color con texto (p.
• AppFilterSheetPanel de filtros de celular y tablet: sube desde abajo, con los campos en el slot y un pie fijo con "Limpiar" y el botón de aplicar.
• AppIconÍcono propio de Trazo.
• AppInfoTipÍcono de información: guarda una ayuda que aparece al pasar el cursor, al enfocarlo o al tocarlo.
• AppMenuMenú que se abre desde el elemento que lo contiene (envuelve QMenu).
• AppPaginationPaginación: "1–20 de 534", páginas con saltos (…) y tamaño de página.
• AppQrCodeCódigo QR dibujado como SVG a partir de la matriz que calcula la librería qrcode: sin v-html y con los colores de los tokens.
• AppSheetPanel que se abre sobre la página: desde la derecha en portátil y monitor, desde abajo en celular y tablet (o siempre desde abajo con side="bottom").

Formularios

• AppCheckboxCasilla de verificación con el estilo de Trazo (envuelve la de Quasar).
• AppChoiceChipsOpciones en forma de chips que se activan y desactivan (selección múltiple).
• AppCodeFieldCampo para un código numérico de un solo uso (p.
• AppDateRangeFieldRango de fechas (sin hora), para filtros: "1 oct – 22 oct".
• AppDateTimeFieldCampo de fecha y hora con el diseño de Trazo (no el del navegador).
• AppFieldEnvoltura común de todo campo: etiqueta arriba (o al lado, con "inline", para barras de una fila), ayuda en el ícono de información y error siempre visible.
• AppPopupFieldCampo que se ve como un selector y abre un panel: menú junto al campo en portátil y monitor (donde quepa entero, AppMenu), panel inferior de borde a borde en celular y tablet.
• AppRadioListLista de opciones de una sola elección, con nombre en negrita y una línea de descripción debajo (p.
• AppSegmentedSelector de una opción entre pocas, en forma de botones unidos (p.
• AppSelectSelector de una o varias opciones, con la misma envoltura que el resto de campos.
• AppTextFieldCampo de texto.

Avisos y diálogos

• AppAlertAviso dentro de la página, siempre visible: errores de un formulario o información imprescindible.
• AppCodeDialogDiálogo que pide el código actual de la aplicación antes de una acción sensible (regenerar códigos, desactivar el MFA o confirmar un cambio de administración), sobre AppFormDialog.
• AppConfirmDialogDiálogo de confirmación: explica la consecuencia antes de una acción importante.
• AppFormDialogDiálogo con un formulario corto: título, error general visible, los campos en el slot y los botones Cancelar y de guardar.

Estados

• AppEmptyStateEstado vacío: dice qué pasa y ofrece una acción, nunca deja la pantalla en blanco.
• AppErrorStateEstado de error: muestra el mensaje claro del catálogo y permite reintentar.
• AppSkeletonEsqueleto de carga: anticipa la forma del contenido en lugar de un spinner vacío.

Gráficos

• AppAreaChartLínea con área debajo para una sola serie en el tiempo (p.
• AppBarListBarras horizontales: nombre, barra proporcional y valor en texto.
• AppColumnChartColumnas agrupadas por punto (p.
• AppDonutChartDona con el total en el centro y una leyenda con nombre, cantidad y porcentaje (cada fila puede llevar a su detalle).
• AppRingAnillo de avance con el porcentaje en el centro (p.

Marca

• AppLogoLogo completo: "Traz" en Inter y el aro como la "o".
• AppLogoMarkAro de Trazo: tres trazos (azul, verde y naranja) que representan el ciclo de vida de un incidente.