Sistema de diseño y UI - Josecgh/diagAuto-frontend GitHub Wiki

Sistema de Diseño (Design System)

La identidad visual de DiagAuto está definida de forma centralizada en src/styles.css y se reutiliza en toda la aplicación. Los tokens de diseño están declarados dentro del bloque @theme de Tailwind CSS 4, por lo que cada uno se convierte automáticamente en una clase utilitaria (bg-primary, text-on-surface, etc.).

En Tailwind v4, solo las variables declaradas dentro de @theme generan clases utilitarias. Las variables normales en :root se pueden seguir usando con var(--name) en CSS tradicional, pero no crean clases automáticas.

Paleta de colores (neutros e industriales)

Token Valor Uso Ejemplo de clase
primary #1e293b Acciones principales, azul pizarra oscuro bg-primary, text-primary
on-primary #ffffff Texto sobre fondos primarios text-on-primary
brand-accent #2563eb Enlaces, botones interactivos y llamadas a la acción bg-brand-accent, text-brand-accent
success #059669 Estado disponible / Vehículo sin averías text-success, bg-success
warning #d97706 Avisos / Alerta de límite Freemium alcanzado text-warning, bg-warning
error #dc2626 Vehículo averiado / Acciones destructivas text-error, bg-error
background / surface #f8fafc Fondo gris neutro claro de la aplicación bg-surface
surface-container #ffffff Fondo de las tarjetas de la agenda y paneles bg-surface-container
on-surface #0f172a Texto principal de alta legibilidad text-on-surface
on-surface-varian #475569 Texto secundario y etiquetas informativas text-on-surface-variant
outline / outline-variant #cbd5e1 / #e2e8f0 Bordes finos, separadores y divisiones limpias border-outline

La aplicación utiliza un único tema claro optimizado para una alta legibilidad técnica en exteriores (taller/calle). No dispone de modo oscuro.

Tipografía e iconos

Recurso Uso
Inter Textos del cuerpo, botones y encabezados generales
JetBrains Mono Matrículas, códigos de error OBD-II e indicadores numéricos (Identidad técnica)
Material Symbols Outlined Iconografía utilitaria (Filtros, estado del motor, tuercas, tarjetas de pago)
Todos los recursos se cargan de forma nativa desde Google Fonts en el archivo src/index.html.
Elemento Escritorio (Desktop) Tablet / Móvil (< 1024px)
h1 40px / 800 (Extra Bold) 28px
h2 28px / 700 (Bold) 22px
h3 18px / 600 (Semi Bold) 18px

Espaciado y radios (Spacing & Radius)

Espaciado Valor Radio (Radius) Valor
--space-2xs 0.25rem --radius-sm 0.25rem
--space-xs 0.5rem --radius-default 0.5rem
--space-sm 0.75rem --radius-md 0.75rem
--space-md 1rem --radius-lg 1rem
--space-lg 1.5rem --radius-xl 1.5rem
--space-xl 2rem --radius-full 9999px

Clases base para componentes

Clase Propósito
.card Panel contenedor blanco con bordes neutros y sombra suave para la agenda
.btn-primary Botón de acción principal (Azul pizarra)
.btn-accent Botón interactivo destacado o de confirmación (Azul eléctrico)
.label-code Texto en formato monoespaciado para códigos mecánicos o matrículas
.label-badge Pequeña insignia indicadora de estado (Verde operativo / Rojo averiado)

Tailwind CSS dentro de los componentes de Angular

Los componentes aplican las utilidades de Tailwind directamente sobre los selectores semánticos dentro de sus bloques locales @media o estilos encapsulados, haciendo referencia a los tokens globales del proyecto:

// src/app/features/vehicles/components/vehicle-card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-vehicle-card',
  standalone: true,
  template: `
    <div class="vehicle-card">
      <h3 class="vehicle-card__title">Toyota Auris</h3>
    </div>
  `,
  styles: [`
    @reference "../../../../styles.css";

    .vehicle-card {
      @apply bg-surface-container border border-outline p-4 rounded-md shadow-sm transition-all;
    }
    .vehicle-card__title {
      @apply text-on-surface font-semibold text-lg;
    }
  `]
})
export class VehicleCardComponent {}
⚠️ **GitHub.com Fallback** ⚠️