fix components

libs/ui/src/lib/styles/themes/_default.scss

@@ -0,0 +1,75 @@
+// TEMA POR DEFECTO
+//
+// Este fichero es el *contrato* de theming de la librería: declara todos los
+// tokens `--pi-theme-*` que los componentes de `common/` consumen. Un tema
+// alternativo no necesita duplicar selectores: le basta con redefinir estos
+// tokens (ver `_alternative.scss`).
+//
+// Los valores viven en `.pi-shell` (no en `:root`) para que puedan convivir
+// varios temas en la misma página, y se repiten en `.cdk-overlay-container`
+// porque los overlays de Material (diálogos, snackbars, menús) se montan fuera
+// del árbol del shell y no heredarían nada.
+
+@mixin defaultThemeTokens {
+  // --- Botones ---------------------------------------------------------
+  --pi-theme-button-height: var(--pi-spacing-xxx-large);
+  --pi-theme-button-radius: var(--pi-border-radius-medium);
+  --pi-theme-button-font-weight: 600;
+  --pi-theme-button-letter-spacing: normal;
+  --pi-theme-button-text-transform: none;
+  --pi-theme-button-shadow: none;
+  --pi-theme-button-transition: background-color 0.16s ease-in;
+  // Superficie del relleno. Por defecto es plano (solo `background-color`);
+  // un tema puede inyectar aquí un degradado por color de marca.
+  --pi-theme-button-fill-primary: none;
+  --pi-theme-button-fill-accent: none;
+  --pi-theme-button-fill-warn: none;
+  --pi-theme-button-fill-success: none;
+  --pi-theme-button-fill-highlighted: none;
+
+  // --- Campos de formulario --------------------------------------------
+  --pi-theme-field-radius: 0.875rem;
+  --pi-theme-field-border-width: 1px;
+  --pi-theme-field-border-color: var(--pi-color-grey-200);
+  --pi-theme-field-border-color-hover: var(--pi-color-grey-300);
+  --pi-theme-field-border-color-focus: var(--pi-color-primary);
+  --pi-theme-field-surface: var(--pi-color-white);
+  --pi-theme-field-label-color: var(--pi-color-grey-300);
+  // La tipografía de la etiqueta y el radio del chip no se declaran: sus
+  // consumidores usan `var(--token, <valor original>)`, así el tema por
+  // defecto conserva exactamente el aspecto previo a los tokens.
+
+  // --- Superficies ------------------------------------------------------
+  --pi-theme-card-radius: var(--pi-border-radius-large);
+  --pi-theme-card-shadow: var(--pi-box-shadow-panel);
+  --pi-theme-panel-radius: var(--pi-border-radius-large);
+
+  // --- Puente con Angular Material --------------------------------------
+  // Los componentes de Material (slider, checkbox, radio, progress...) pintan
+  // con sus roles `--mat-sys-*`, que `mat.theme()` genera de una paleta propia
+  // y por tanto ignoran `--pi-color-*`. Aquí se reengancha una cosa con otra.
+  //
+  // Se define una sola vez, en el tema por defecto y por indirección
+  // (`var(--pi-color-*)`): como el tema alternativo redefine esas variables,
+  // Material le sigue solo, sin repetir este bloque.
+  --mat-sys-primary: var(--pi-color-primary);
+  --mat-sys-on-primary: var(--pi-color-white);
+  --mat-sys-primary-container: var(--pi-color-primary-100);
+  --mat-sys-on-primary-container: var(--pi-color-primary-900);
+  --mat-sys-secondary: var(--pi-color-accent);
+  --mat-sys-on-secondary: var(--pi-color-white);
+  --mat-sys-secondary-container: var(--pi-color-accent-100);
+  --mat-sys-on-secondary-container: var(--pi-color-accent-900);
+  --mat-sys-tertiary: var(--pi-color-highlighted);
+  --mat-sys-on-tertiary: var(--pi-color-white);
+  --mat-sys-error: var(--pi-color-warn);
+  --mat-sys-on-error: var(--pi-color-white);
+}
+
+// Base para *todos* los shells: así un tema solo tiene que declarar lo que
+// cambia, y lo que no redefina sigue teniendo valor (incluido el puente con
+// Material). Los temas concretos se aplican encima; ver `_alternative.scss`.
+.pi-shell,
+.cdk-overlay-container {
+  @include defaultThemeTokens;
+}