Saltar a contenido

Reglas de estilos — Frontend

Tokens y variables

  • Colores y tema: usar siempre variables Ionic (--ion-color-primary, --ion-text-color, --ion-background-color, --ion-color-step-*). El tema claro/oscuro se aplica por clase en el root.
  • Definiciones de paleta: solo en src/theme/variables.scss (y en el bloque de tema claro de global.scss para el light mode). No definir hex/rgb nuevos en SCSS de páginas o componentes.

❌ Prohibido 

.report-selector ion-segment {
  --background: #1a1a1a;
}
.chart-box { background: #1a1a1a; border: 1px solid #333; }
✅ Correcto 
.report-selector ion-segment {
  --background: var(--ion-background-color);
}
.chart-box {
  background: var(--ion-card-background);
  border: 1px solid var(--ion-color-step-200);
}

  • AG Grid y terceros: si el componente no acepta variables CSS, definir un bloque en global.scss (o en un único archivo de tema) con variables --ag-* y referenciar variables Ionic allí. No repetir los mismos hex en varios archivos.

!important

  • Evitar !important salvo para sobrescribir estilos de librería (Ionic/AG Grid) cuando no haya otra forma. Si se usa, comentar el motivo.

❌ Prohibido 

.modal-content { background: #ffffff !important; }
.employee-row { width: 48px !important; }
✅ Correcto 
/* Forzar fondo opaco en modal empleados (tema claro) para contraste */
.employee-list-modal .modal-content {
  background: var(--ion-card-background);
}
/* Si realmente hace falta: background: var(--ion-card-background) !important; */

Duplicación

  • Estilos de modales genéricos (backdrop, content, header): definir una vez en global.scss (p. ej. .employee-list-modal) y reutilizar. No copiar el mismo bloque en dashboard.page.scss y time-control.page.scss.

Media queries

  • Breakpoint principal desktop: 768px. Mantener consistencia; si se añade otro (ej. 640px), documentarlo aquí o en el archivo.