crdx-components 1.0.0

package/src/lib/styles/generated/_md3-tokens.scss

@@ -0,0 +1,179 @@
+/*
+ * Auto-generado: node shared/lib-ui/scripts/generate-tokens-resolved.cjs
+ * M3 bridge: mapea tokens de Material 3 a las variables resueltas de tokens-by-component.
+ * --pallete-scheme-*  → _tokens-pallete-scheme.scss
+ * --typescale-*       → _tokens-typescale.scss
+ * --shape-*           → _tokens-shape.scss
+ * --elevation-*       → _tokens-elevation.scss
+ */
+
+:root {
+  /* --- Sys Colors (Material 3) --- */
+  --md-sys-color-primary: var(--pallete-scheme-primary-primary);
+  --md-sys-color-on-primary: var(--pallete-scheme-primary-on-primary);
+  --md-sys-color-primary-container: var(--pallete-scheme-primary-primary-container);
+  --md-sys-color-on-primary-container: var(--pallete-scheme-primary-on-primary-container);
+  --md-sys-color-inverse-primary: var(--pallete-scheme-primary-inverse-primary);
+
+  --md-sys-color-secondary: var(--pallete-scheme-secondary-secondary);
+  --md-sys-color-on-secondary: var(--pallete-scheme-secondary-on-secondary);
+  --md-sys-color-secondary-container: var(--pallete-scheme-secondary-secondary-container);
+  --md-sys-color-on-secondary-container: var(--pallete-scheme-secondary-on-secondary-container);
+
+  --md-sys-color-tertiary: var(--pallete-scheme-tertiary-tertiary);
+  --md-sys-color-on-tertiary: var(--pallete-scheme-tertiary-on-tertiary);
+  --md-sys-color-tertiary-container: var(--pallete-scheme-tertiary-tertiary-container);
+  --md-sys-color-on-tertiary-container: var(--pallete-scheme-tertiary-on-tertiary-container);
+
+  --md-sys-color-error: var(--pallete-scheme-error-error);
+  --md-sys-color-on-error: var(--pallete-scheme-error-on-error);
+  --md-sys-color-error-container: var(--pallete-scheme-error-error-container);
+  --md-sys-color-on-error-container: var(--pallete-scheme-error-on-error-container);
+
+  --md-sys-color-surface: var(--pallete-scheme-primary-on-primary);
+  --md-sys-color-surface-dim: var(--pallete-scheme-surface-surface-dim);
+  --md-sys-color-surface-bright: var(--pallete-scheme-surface-surface-bright);
+  --md-sys-color-surface-container-lowest: var(--pallete-scheme-surface-surface-container-lowest);
+  --md-sys-color-surface-container-low: var(--pallete-scheme-surface-surface-container-low);
+  --md-sys-color-surface-container: var(--pallete-scheme-surface-surface-container);
+  --md-sys-color-surface-container-high: var(--pallete-scheme-surface-surface-container-high);
+  --md-sys-color-surface-container-highest: var(--pallete-scheme-surface-surface-container-highest);
+  --md-sys-color-on-surface: var(--pallete-scheme-surface-on-surface);
+  --md-sys-color-on-surface-variant: var(--pallete-scheme-surface-on-surface-variant);
+  --md-sys-color-outline: var(--pallete-scheme-surface-outline);
+  --md-sys-color-outline-variant: var(--pallete-scheme-surface-outline-variant);
+  --md-sys-color-scrim: var(--pallete-scheme-surface-scrim);
+  --md-sys-color-shadow: var(--pallete-scheme-surface-shadow);
+  --md-sys-color-inverse-surface: var(--pallete-scheme-surface-inverse-surface);
+  --md-sys-color-inverse-on-surface: var(--pallete-scheme-surface-inverse-on-surface);
+  --md-sys-color-surface-tint: var(--pallete-scheme-primary-primary);
+
+  /* --- Custom semantic colors (no estándar M3) --- */
+  --app-color-warning: var(--pallete-scheme-warning-warning);
+  --app-color-on-warning: var(--pallete-scheme-warning-on-warning);
+  --app-color-warning-container: var(--pallete-scheme-warning-warning-container);
+  --app-color-on-warning-container: var(--pallete-scheme-warning-on-warning-container);
+
+  --app-color-success: var(--pallete-scheme-success-success);
+  --app-color-on-success: var(--pallete-scheme-success-on-success);
+  --app-color-success-container: var(--pallete-scheme-success-success-container);
+  --app-color-on-success-container: var(--pallete-scheme-success-on-success-container);
+
+  --app-color-information: var(--pallete-scheme-information-information);
+  --app-color-on-information: var(--pallete-scheme-information-on-information);
+  --app-color-information-container: var(--pallete-scheme-information-information-container);
+  --app-color-on-information-container: var(--pallete-scheme-information-on-information-container);
+
+  --app-color-link: var(--pallete-scheme-link-link);
+  --app-color-on-link: var(--pallete-scheme-link-on-link);
+  --app-color-link-container: var(--pallete-scheme-link-link-container);
+  --app-color-on-link-container: var(--pallete-scheme-link-on-link-container);
+
+  /* --- Sys Typography (Material 3) --- */
+  --md-sys-typescale-display-large-font: var(--typescale-display-large-font);
+  --md-sys-typescale-display-large-weight: var(--typescale-display-large-weight);
+  --md-sys-typescale-display-large-size: var(--typescale-display-large-size);
+  --md-sys-typescale-display-large-line-height: calc(var(--typescale-display-large-line-height) * 1px);
+  --md-sys-typescale-display-large-tracking: var(--typescale-display-large-tracking);
+
+  --md-sys-typescale-display-medium-font: var(--typescale-display-medium-font);
+  --md-sys-typescale-display-medium-weight: var(--typescale-display-medium-weight);
+  --md-sys-typescale-display-medium-size: var(--typescale-display-medium-size);
+  --md-sys-typescale-display-medium-line-height: calc(var(--typescale-display-medium-line-height) * 1px);
+  --md-sys-typescale-display-medium-tracking: var(--typescale-display-medium-tracking);
+
+  --md-sys-typescale-display-small-font: var(--typescale-display-small-font);
+  --md-sys-typescale-display-small-weight: var(--typescale-display-small-weight);
+  --md-sys-typescale-display-small-size: var(--typescale-display-small-size);
+  --md-sys-typescale-display-small-line-height: calc(var(--typescale-display-small-line-height) * 1px);
+  --md-sys-typescale-display-small-tracking: var(--typescale-display-small-tracking);
+
+  --md-sys-typescale-headline-large-font: var(--typescale-headline-large-font);
+  --md-sys-typescale-headline-large-weight: var(--typescale-headline-large-weight);
+  --md-sys-typescale-headline-large-size: var(--typescale-headline-large-size);
+  --md-sys-typescale-headline-large-line-height: calc(var(--typescale-headline-large-line-height) * 1px);
+  --md-sys-typescale-headline-large-tracking: var(--typescale-headline-large-tracking);
+
+  --md-sys-typescale-headline-medium-font: var(--typescale-headline-medium-font);
+  --md-sys-typescale-headline-medium-weight: var(--typescale-headline-medium-weight);
+  --md-sys-typescale-headline-medium-size: var(--typescale-headline-medium-size);
+  --md-sys-typescale-headline-medium-line-height: calc(var(--typescale-headline-medium-line-height) * 1px);
+  --md-sys-typescale-headline-medium-tracking: var(--typescale-headline-medium-tracking);
+
+  --md-sys-typescale-headline-small-font: var(--typescale-headline-small-font);
+  --md-sys-typescale-headline-small-weight: var(--typescale-headline-small-weight);
+  --md-sys-typescale-headline-small-size: var(--typescale-headline-small-size);
+  --md-sys-typescale-headline-small-line-height: calc(var(--typescale-headline-small-line-height) * 1px);
+  --md-sys-typescale-headline-small-tracking: var(--typescale-headline-small-tracking);
+
+  --md-sys-typescale-title-large-font: var(--typescale-title-large-font);
+  --md-sys-typescale-title-large-weight: var(--typescale-title-large-weight);
+  --md-sys-typescale-title-large-size: var(--typescale-title-large-size);
+  --md-sys-typescale-title-large-line-height: calc(var(--typescale-title-large-line-height) * 1px);
+  --md-sys-typescale-title-large-tracking: var(--typescale-title-large-tracking);
+
+  --md-sys-typescale-title-medium-font: var(--typescale-title-medium-font);
+  --md-sys-typescale-title-medium-weight: var(--typescale-title-medium-weight);
+  --md-sys-typescale-title-medium-size: var(--typescale-title-medium-size);
+  --md-sys-typescale-title-medium-line-height: calc(var(--typescale-title-medium-line-height) * 1px);
+  --md-sys-typescale-title-medium-tracking: var(--typescale-title-medium-tracking);
+
+  --md-sys-typescale-title-small-font: var(--typescale-title-small-font);
+  --md-sys-typescale-title-small-weight: var(--typescale-title-small-weight);
+  --md-sys-typescale-title-small-size: var(--typescale-title-small-size);
+  --md-sys-typescale-title-small-line-height: calc(var(--typescale-title-small-line-height) * 1px);
+  --md-sys-typescale-title-small-tracking: var(--typescale-title-small-tracking);
+
+  --md-sys-typescale-label-large-font: var(--typescale-label-large-font);
+  --md-sys-typescale-label-large-weight: var(--typescale-label-large-weight);
+  --md-sys-typescale-label-large-size: var(--typescale-label-large-size);
+  --md-sys-typescale-label-large-line-height: calc(var(--typescale-label-large-line-height) * 1px);
+  --md-sys-typescale-label-large-tracking: var(--typescale-label-large-tracking);
+
+  --md-sys-typescale-label-medium-font: var(--typescale-label-medium-font);
+  --md-sys-typescale-label-medium-weight: var(--typescale-label-medium-weight);
+  --md-sys-typescale-label-medium-size: var(--typescale-label-medium-size);
+  --md-sys-typescale-label-medium-line-height: calc(var(--typescale-label-medium-line-height) * 1px);
+  --md-sys-typescale-label-medium-tracking: var(--typescale-label-medium-tracking);
+
+  --md-sys-typescale-label-small-font: var(--typescale-label-small-font);
+  --md-sys-typescale-label-small-weight: var(--typescale-label-small-weight);
+  --md-sys-typescale-label-small-size: var(--typescale-label-small-size);
+  --md-sys-typescale-label-small-line-height: calc(var(--typescale-label-small-line-height) * 1px);
+  --md-sys-typescale-label-small-tracking: var(--typescale-label-small-tracking);
+
+  --md-sys-typescale-body-large-font: var(--typescale-body-large-font);
+  --md-sys-typescale-body-large-weight: var(--typescale-body-large-weight);
+  --md-sys-typescale-body-large-size: var(--typescale-body-large-size);
+  --md-sys-typescale-body-large-line-height: calc(var(--typescale-body-large-line-height) * 1px);
+  --md-sys-typescale-body-large-tracking: var(--typescale-body-large-tracking);
+
+  --md-sys-typescale-body-medium-font: var(--typescale-body-medium-font);
+  --md-sys-typescale-body-medium-weight: var(--typescale-body-medium-weight);
+  --md-sys-typescale-body-medium-size: var(--typescale-body-medium-size);
+  --md-sys-typescale-body-medium-line-height: calc(var(--typescale-body-medium-line-height) * 1px);
+  --md-sys-typescale-body-medium-tracking: var(--typescale-body-medium-tracking);
+
+  --md-sys-typescale-body-small-font: var(--typescale-body-small-font);
+  --md-sys-typescale-body-small-weight: var(--typescale-body-small-weight);
+  --md-sys-typescale-body-small-size: var(--typescale-body-small-size);
+  --md-sys-typescale-body-small-line-height: calc(var(--typescale-body-small-line-height) * 1px);
+  --md-sys-typescale-body-small-tracking: var(--typescale-body-small-tracking);
+
+  /* --- Sys Shape --- */
+  --md-sys-shape-corner-none: calc(var(--shape-none) * 1px);
+  --md-sys-shape-corner-extra-small: calc(var(--shape-extra-small) * 1px);
+  --md-sys-shape-corner-small: calc(var(--shape-small) * 1px);
+  --md-sys-shape-corner-medium: calc(var(--shape-medium) * 1px);
+  --md-sys-shape-corner-large: calc(var(--shape-large) * 1px);
+  --md-sys-shape-corner-extra-large: calc(var(--shape-extra-large) * 1px);
+  --md-sys-shape-corner-full: calc(var(--shape-full) * 1px);
+
+  /* --- Sys Elevation --- */
+  --md-sys-elevation-level0: var(--elevation-0);
+  --md-sys-elevation-level1: var(--elevation-1);
+  --md-sys-elevation-level2: var(--elevation-2);
+  --md-sys-elevation-level3: var(--elevation-3);
+  --md-sys-elevation-level4: var(--elevation-4);
+  --md-sys-elevation-level5: var(--elevation-5);
+}

package/src/lib/styles/generated/_tokens-avatars.scss

@@ -0,0 +1,4 @@
+:root {
+  --app-avatars-avatar-background: #E42313;
+  --app-avatars-avatar-element: #FFFFFF;
+}

package/src/lib/styles/global-material-theme.scss

@@ -0,0 +1,69 @@
+@use '@angular/material' as mat;
+
+// Variables alias por componente (--buttons-wip-*, etc.) para overrides y componentes
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@include mat.core();
+
+// Reset y tipografía base
+body,
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Heebo', sans-serif;
+}
+
+@include mat.theme((
+  color: (
+    theme-type: light,
+    primary: mat.$blue-palette,
+    tertiary: mat.$blue-palette,
+  ),
+  typography: (
+    brand-family: 'Heebo',
+    plain-family: 'Heebo',
+  ),
+  density: 0,
+));
+
+@include mat.theme-overrides((
+  primary: var(--md-sys-color-secondary),
+  secondary: var(--md-sys-color-primary),
+  tertiary: var(--md-sys-color-tertiary),
+  error: var(--app-colors-rojo-primary-rojo-50),
+));
+
+// Tipografía común en componentes Material
+.mat-mdc-button,
+.mat-mdc-raised-button,
+.mat-mdc-outlined-button,
+.mat-mdc-unelevated-button,
+.mat-mdc-icon-button,
+.mat-mdc-fab,
+.mat-mdc-mini-fab,
+.mat-mdc-tab,
+.mat-mdc-tab-link,
+.mat-mdc-chip,
+.mat-mdc-form-field,
+.mat-mdc-form-field input,
+.mat-mdc-select,
+.mat-mdc-select-trigger,
+.mat-mdc-select-value,
+.mat-mdc-option,
+.mat-mdc-table,
+.mat-mdc-header-cell,
+.mat-mdc-cell,
+.mat-mdc-paginator,
+.mat-mdc-menu-item,
+.mat-mdc-tooltip,
+.mat-mdc-snack-bar-label,
+.mdc-list-item__primary-text,
+.mdc-button,
+.mdc-tab,
+.mdc-text-field,
+.mdc-select,
+.mdc-data-table,
+.mdc-menu-item {
+  font-family: var(--md-sys-typescale-body-medium-font, 'Heebo'), sans-serif;
+}

package/src/lib/styles/index.scss

@@ -0,0 +1,16 @@
+/// Punto de entrada global de estilos para los MFEs.
+/// Los proyectos incluyen este archivo en build.options.styles (project.json).
+/// Cadena: project.json styles[] → index.scss → global-material-theme.scss → overrides (mat-form-field, mat-button, etc.).
+@use './global-material-theme.scss' as *;
+@use './overrides/mat-table-overrides';
+@use './overrides/mat-slide-toggle-overrides';
+@use './overrides/mat-tabs-overrides';
+@use './overrides/mat-form-field-overrides';
+@use './overrides/mat-icon-button-overrides';
+@use './overrides/mat-list-overrides';
+@use './overrides/mat-checkbox-overrides';
+@use './overrides/mat-button-overrides';
+@use './layout.scss' as *;
+@use './typography.scss' as *;
+@use './text-classes.scss' as *;
+@use './scrollbar.scss' as *;

package/src/lib/styles/layout.scss

@@ -0,0 +1,29 @@
+/// Layout global: solo variables en :root.
+/// El grid del shell (section.container, .main-content) lo define cada app (ej. layout-shell.scss).
+/// Evita duplicar/conflictos con el layout del host.
+:root {
+  --header-height: calc(var(--bars-size-small-app-bar-small-container-height, 64) * 1px);
+  // Opcional: altura lista/tabla como calc(100vh - header - cabecera lista - offset). Ej.: height: calc(100vh - var(--list-area-offset));
+  --list-area-offset: 259px; // 80 + 72 + 107 (header, cabecera, contenido)
+}
+
+.lib-confirm-modal-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.import-massive-modal-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.lib-side-modal-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  background: rgba(0, 0, 0, 0.35);
+}
+
+/* Keep confirm dialogs centered even when opened from right side sheets. */
+.lib-confirm-modal-panel.cdk-overlay-pane {
+  position: fixed !important;
+  left: 50% !important;
+  top: 50% !important;
+  transform: translate(-50%, -50%) !important;
+  margin: 0 !important;
+}

package/src/lib/styles/overrides/_index.scss

@@ -0,0 +1,11 @@
+/// Índice de overrides de Angular Material (M3).
+/// Referencia: global-material-theme.scss importa cada override directamente (no usa este índice).
+/// Mantener en sync con global-material-theme por si algo hace @use 'overrides'.
+@forward 'mat-slide-toggle-overrides';
+@forward 'mat-tabs-overrides';
+@forward 'mat-form-field-overrides';
+@forward 'mat-icon-button-overrides';
+@forward 'mat-list-overrides';
+@forward 'mat-checkbox-overrides';
+@forward 'mat-button-overrides';
+@forward 'mat-table-overrides';

package/src/lib/styles/overrides/_mat-button-overrides.scss

@@ -0,0 +1,105 @@
+@use '@angular/material' as mat;
+
+/*
+ * Button overrides (M3). Tokens: --buttons-wip-* (generate-tokens-resolved.cjs)
+ *
+ * PATRÓN de opacidades con Material:
+ *   *-state-layer-color  → color BASE sin alpha (Material aplica el opacity encima)
+ *   *-hover/focus/pressed-state-layer-opacity → opacidades M3 estándar (0.08 / 0.10 / 0.10)
+ *   *-ripple-color       → token rgba directo SIN color-mix (ya tiene el alpha correcto)
+ *
+ * MAL: state-layer-color: rgba(67,71,73,0.08) + hover-opacity: 0.08 = visual 0.0064 (invisible)
+ * BIEN: state-layer-color: #434749           + hover-opacity: 0.08 = visual 0.08
+ */
+html {
+  @include mat.button-overrides((
+    // ── Filled ─────────────────────────────────────────────────────────────
+    filled-container-shape:          calc(var(--buttons-wip-size-medium-button-medium-shape-round) * 1px),
+    filled-container-color:          var(--buttons-wip-color-filled-enabled-button-filled-container-color, #E42313),
+    filled-label-text-color:         var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff),
+    filled-state-layer-color:        var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff),
+    filled-hover-state-layer-opacity:    0.08,
+    filled-focus-state-layer-opacity:    0.10,
+    filled-pressed-state-layer-opacity:  0.10,
+    filled-ripple-color:             var(--buttons-wip-color-filled-pressed-button-elevated-pressed-ripple-color, rgba(255, 255, 255, 0.10)),
+    filled-container-height:         calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px),
+    filled-label-text-font:          var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo),
+    filled-label-text-size:          calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px),
+    filled-label-text-weight:        var(--buttons-wip-size-medium-button-medium-label-text-weight, 500),
+    filled-label-text-tracking:      calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px),
+    filled-horizontal-padding:       calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px),
+    filled-icon-spacing:             calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px),
+
+    // ── Outlined ───────────────────────────────────────────────────────────
+    outlined-container-shape:        calc(var(--buttons-wip-size-medium-button-medium-shape-round) * 1px),
+    outlined-outline-width:          calc(var(--buttons-wip-size-medium-button-medium-outline-width, 1) * 1px),
+    outlined-outline-color:          var(--buttons-wip-color-outlined-enabled-button-outlined-outline-color, #c3c7c9),
+    outlined-label-text-color:       var(--buttons-wip-color-outlined-enabled-button-outlined-label-color, #434749),
+    outlined-state-layer-color:      var(--buttons-wip-color-outlined-enabled-button-outlined-label-color, #434749),
+    outlined-hover-state-layer-opacity:    0.08,
+    outlined-focus-state-layer-opacity:    0.10,
+    outlined-pressed-state-layer-opacity:  0.10,
+    outlined-ripple-color:           var(--buttons-wip-color-outlined-pressed-button-outlined-pressed-ripple-color, rgba(67, 71, 73, 0.10)),
+    outlined-container-height:       calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px),
+    outlined-label-text-font:        var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo),
+    outlined-label-text-size:        calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px),
+    outlined-label-text-weight:      var(--buttons-wip-size-medium-button-medium-label-text-weight, 500),
+    outlined-label-text-tracking:    calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px),
+    outlined-horizontal-padding:     calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px),
+    outlined-icon-spacing:           calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px),
+
+    // ── Tonal ──────────────────────────────────────────────────────────────
+    tonal-container-shape:           calc(var(--buttons-wip-size-medium-button-medium-shape-round) * 1px),
+    tonal-container-color:           var(--buttons-wip-color-tonal-enabled-button-tonal-container-color, #e0e3e5),
+    tonal-label-text-color:          var(--buttons-wip-color-tonal-enabled-button-tonal-label-color, #434749),
+    tonal-state-layer-color:         var(--buttons-wip-color-tonal-enabled-button-tonal-label-color, #434749),
+    tonal-hover-state-layer-opacity:    0.08,
+    tonal-focus-state-layer-opacity:    0.10,
+    tonal-pressed-state-layer-opacity:  0.10,
+    tonal-ripple-color:              var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-ripple-color, rgba(67, 71, 73, 0.10)),
+    tonal-container-height:          calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px),
+    tonal-label-text-font:           var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo),
+    tonal-label-text-size:           calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px),
+    tonal-label-text-weight:         var(--buttons-wip-size-medium-button-medium-label-text-weight, 500),
+    tonal-label-text-tracking:       calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px),
+    tonal-horizontal-padding:        calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px),
+    tonal-icon-spacing:              calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px),
+
+    // ── Text ───────────────────────────────────────────────────────────────
+    text-container-shape:            calc(var(--buttons-wip-size-medium-button-medium-shape-round) * 1px),
+    text-label-text-color:           var(--buttons-wip-color-text-enabled-button-text-label-color, #e42313),
+    text-state-layer-color:          var(--buttons-wip-color-text-enabled-button-text-label-color, #e42313),
+    text-hover-state-layer-opacity:    0.08,
+    text-focus-state-layer-opacity:    0.10,
+    text-pressed-state-layer-opacity:  0.10,
+    text-ripple-color:               var(--buttons-wip-color-text-pressed-button-text-pressed-ripple-color, rgba(228, 35, 19, 0.10)),
+    text-container-height:           calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px),
+    text-label-text-font:            var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo),
+    text-label-text-size:            calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px),
+    text-label-text-weight:          var(--buttons-wip-size-medium-button-medium-label-text-weight, 500),
+    text-label-text-tracking:        calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px),
+    text-horizontal-padding:         calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px),
+    text-icon-spacing:               calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px),
+
+    // ── Protected (Elevated) ───────────────────────────────────────────────
+    protected-container-shape:       calc(var(--buttons-wip-size-medium-button-medium-shape-round) * 1px),
+    protected-container-color:       var(--buttons-wip-color-elevated-enabled-button-elevated-container-color, #fff),
+    protected-label-text-color:      var(--buttons-wip-color-elevated-enabled-button-elevated-label-color, #e42313),
+    protected-container-elevation-shadow: 0 calc(var(--buttons-wip-color-elevated-enabled-button-elevated-elevation, 1) * 1px) calc(var(--buttons-wip-color-elevated-enabled-button-elevated-elevation, 1) * 4px) rgba(0, 0, 0, 0.18),
+    protected-state-layer-color:     var(--buttons-wip-color-elevated-enabled-button-elevated-label-color, #e42313),
+    protected-hover-state-layer-opacity:    0.08,
+    protected-focus-state-layer-opacity:    0.10,
+    protected-pressed-state-layer-opacity:  0.10,
+    protected-hover-container-elevation-shadow:    0 3px 12px rgba(0, 0, 0, 0.2),
+    protected-focus-container-elevation-shadow:    0 1px 4px  rgba(0, 0, 0, 0.2),
+    protected-pressed-container-elevation-shadow:  0 1px 4px  rgba(0, 0, 0, 0.24),
+    protected-ripple-color:          var(--buttons-wip-color-elevated-pressed-button-elevated-pressed-ripple-color, rgba(228, 35, 19, 0.10)),
+    protected-container-height:      calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px),
+    protected-label-text-font:       var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo),
+    protected-label-text-size:       calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px),
+    protected-label-text-weight:     var(--buttons-wip-size-medium-button-medium-label-text-weight, 500),
+    protected-label-text-tracking:   calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px),
+    protected-horizontal-padding:    calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px),
+    protected-icon-spacing:          calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px),
+  ));
+}

package/src/lib/styles/overrides/_mat-checkbox-overrides.scss

@@ -0,0 +1,49 @@
+@use '@angular/material' as mat;
+
+// Asegura que el borde (outline) del checkbox sin seleccionar use siempre #181c1e,
+// en lugar del valor por defecto (#434749) de los tokens.
+html {
+  --checkboxes-enabled-container-checkbox-unselected-outline-color: #181c1e;
+  --checkboxes-hovered-container-checkbox-unselected-hover-outline-color: #181c1e;
+  --checkboxes-focused-container-checkbox-unselected-focus-outline-color: #181c1e;
+  --checkboxes-pressed-ripple-container-checkbox-unselected-pressed-outline-color: #181c1e;
+
+  --checkboxes-pressed-ripple-icon-checkbox-selected-pressed-icon-color: #181c1e;
+  @include mat.checkbox-overrides((
+    selected-focus-state-layer-opacity: 0.10,
+    selected-hover-state-layer-opacity: 0.08,
+    // Ripple más oscuro cuando el checkbox está seleccionado y en pressed.
+    selected-pressed-state-layer-opacity: 0.20,
+    unselected-focus-state-layer-opacity: 0.10,
+    unselected-hover-state-layer-opacity: 0.08,
+    unselected-pressed-state-layer-opacity: 0.10,
+    touch-target-size: calc(var(--checkboxes-enabled-state-layer-checkbox-state-layer-size, 40) * 1px),
+    touch-target-display: block,
+    state-layer-size: calc(var(--checkboxes-enabled-state-layer-checkbox-state-layer-size, 40) * 1px),
+    disabled-label-color: var(--md-sys-color-on-surface),
+    disabled-selected-checkmark-color: var(--checkboxes-disabled-icon-checkbox-selected-disabled-icon-color, #f7fafc),
+    disabled-selected-icon-color: var(--checkboxes-disabled-icon-checkbox-disabled-selected-icon-color, #e42313),
+    disabled-unselected-icon-color: var(--checkboxes-disabled-icon-checkbox-disabled-unselected-icon-color, #e42313),
+    label-text-color: var(--md-sys-color-on-surface),
+    selected-checkmark-color: var(--checkboxes-enabled-icon-checkbox-selected-icon-color, #ffffff),
+    selected-focus-icon-color: #181c1e,
+    selected-focus-state-layer-color: var(--checkboxes-focused-state-layer-checkbox-selected-focus-state-layer-color, #181c1e),
+    selected-hover-icon-color: #181c1e,
+    selected-hover-state-layer-color: #181c1e,
+    selected-icon-color: #181c1e,
+    selected-pressed-icon-color:  #181c1e,
+    selected-pressed-state-layer-color:  #181c1e,
+    unselected-focus-icon-color: #181c1e,
+    unselected-focus-state-layer-color: var(--checkboxes-focused-state-layer-checkbox-unselected-focus-state-layer-color, #181c1e),
+    unselected-hover-icon-color: var(--checkboxes-hovered-icon-checkbox-unselected-hover-icon-color, #181c1e),
+    unselected-icon-color: var(--checkboxes-enabled-icon-checkbox-unselected-icon-color, #181c1e),
+    unselected-pressed-state-layer-color: var(--checkboxes-pressed-ripple-state-layer-checkbox-unselected-pressed-state-layer-color, #181c1e),
+    label-text-font: var(--typescale-body-medium-font, 'Heebo'),
+    label-text-line-height: calc(var(--typescale-body-medium-line-height, 20) * 1px),
+    label-text-size: var(--typescale-body-medium-size, 14px),
+    label-text-tracking: var(--typescale-body-medium-tracking, 0.25px),
+    label-text-weight: var(--typescale-body-medium-weight, 400),
+  ));
+}
+
+

package/src/lib/styles/overrides/_mat-form-field-overrides.scss

@@ -0,0 +1,148 @@
+@use '@angular/material' as mat;
+
+/// Form field (text fields) overrides (M3).
+/// Tokens: @tokens_variables_credix/tokenized-styles (tokens.css + components) → --text-fields-*.
+/// Color borde outline enabled: Text fields/outlined/enabled/outline #74787A.
+html {
+  --Text-fields-outlined-enabled-container-outlined-text-field-container-shape: calc(var(--text-fields-outlined-enabled-container-outlined-text-field-container-shape, 4) * 1px);
+  // 1px de tokens → 0.0625rem asumiendo base 16px.
+  --Text-fields-outlined-enabled-outline-outlined-text-field-outline-width:
+    0.0625rem;
+  /// Variable de la dependencia; fallback #74787A (estado default outlined).
+  --Text-fields-outlined-enabled-outline-outline-text-field-outline-color: var(--text-fields-outlined-enabled-outline-outline-text-field-outline-color, #74787A);
+
+  @include mat.form-field-overrides((
+
+    // Token value is numeric (e.g. 1), convert explicitly to px.
+    filled-active-indicator-height: calc(var(--text-fields-filled-enabled-active-indicator-filled-text-field-active-indicator-height, 1) * 1px),
+    filled-focus-active-indicator-height: var(--text-fields-filled-focused-active-indicator-filled-text-field-focus-active-indicator-height),
+    filled-container-shape: var(--text-fields-filled-enabled-container-filled-text-field-container-shape),
+    filled-active-indicator-color: var(--text-fields-filled-enabled-active-indicator-filled-text-field-active-indicator-color),
+    filled-caret-color: var(--text-fields-filled-enabled-caret-filled-text-field-caret-color),
+    filled-container-color: var(--text-fields-filled-enabled-container-filled-text-field-container-color),
+    // Disabled filled: color base + opacity desde tokens
+    filled-disabled-active-indicator-color: color-mix(in srgb,
+      var(--text-fields-filled-disabled-active-indicator-filled-text-field-disabled-active-indicator-color, #181c1e)
+      calc(var(--text-fields-filled-disabled-active-indicator-filled-text-field-disabled-active-indicator-opacity) * 1%),
+      transparent),
+    filled-disabled-container-color: color-mix(in srgb,
+      var(--text-fields-filled-disabled-container-filled-text-field-disabled-container-color, #181c1e)
+      calc(var(--text-fields-filled-disabled-container-filled-text-field-disabled-container-opacity) * 1%),
+      transparent),
+    filled-disabled-input-text-color: color-mix(in srgb,
+      var(--text-fields-filled-disabled-input-text-filled-text-field-disabled-input-text-color, #181c1e)
+      calc(var(--text-fields-filled-disabled-input-text-filled-text-field-disabled-input-text-opacity) * 1%),
+      transparent),
+    filled-disabled-label-text-color: color-mix(in srgb,
+      var(--text-fields-filled-disabled-label-text-filled-text-field-disabled-label-text-color, #181c1e)
+      calc(var(--text-fields-filled-disabled-label-text-filled-text-field-disabled-label-text-opacity) * 1%),
+      transparent),
+    filled-error-active-indicator-color: var(--text-fields-filled-error-active-indicator-filled-text-field-error-active-indicator-color),
+    filled-error-caret-color: var(--text-fields-filled-error-caret-filled-text-field-error-caret-color),
+    filled-error-focus-active-indicator-color: var(--text-fields-filled-error-focus-filled-text-field-error-focus-active-indicator-color),
+    filled-error-focus-label-text-color: var(--text-fields-filled-error-focus-filled-text-field-error-focus-label-text-color),
+    filled-error-hover-active-indicator-color: var(--text-fields-filled-error-hover-filled-text-field-error-hover-active-indicator-color),
+    filled-error-hover-label-text-color: var(--text-fields-filled-error-hover-filled-text-field-error-hover-label-text-color),
+    filled-error-label-text-color: var(--text-fields-filled-error-label-text-filled-text-field-error-label-text-color),
+    filled-focus-active-indicator-color: var(--text-fields-filled-focused-active-indicator-filled-text-field-focus-active-indicator-color),
+    filled-focus-label-text-color: var(--text-fields-filled-focused-label-text-filled-text-field-focus-label-text-color),
+    filled-hover-active-indicator-color: var(--text-fields-filled-hover-active-indicator-filled-text-field-hover-active-indicator-color),
+    filled-hover-label-text-color: var(--text-fields-filled-hover-label-text-filled-text-field-hover-label-text-color),
+    filled-input-text-color: var(--text-fields-filled-enabled-input-text-filled-text-field-input-text-color),
+    filled-input-text-placeholder-color: var(--text-fields-filled-enabled-input-text-filled-text-field-input-text-placeholder-color),
+    filled-label-text-color: var(--text-fields-filled-enabled-label-text-filled-text-field-label-text-color),
+    filled-label-text-font: var(--text-fields-filled-enabled-label-text-filled-text-field-label-text-font),
+    filled-label-text-size: var(--text-fields-filled-enabled-label-text-filled-text-field-label-text-size),
+    filled-label-text-tracking: var(--text-fields-filled-enabled-label-text-filled-text-field-label-text-tracking),
+    filled-label-text-weight: var(--text-fields-filled-enabled-label-text-filled-text-field-label-text-weight),
+    filled-label-display: var(--text-fields-filled-enabled-label-text-filled-text-field-label-display),
+    filled-with-label-container-padding-top: var(--text-fields-filled-enabled-label-text-filled-text-field-with-label-container-padding-top),
+    filled-with-label-container-padding-bottom: var(--text-fields-filled-enabled-label-text-filled-text-field-with-label-container-padding-bottom),
+    // @tokens_variables_credix/tokenized-styles dist/css/components/text-fields.css (y dist/scss/components/_text-fields.scss):
+    //   outlined-outline-width        ← --text-fields-outlined-enabled-outline-outlined-text-field-outline-width (valor 1)
+    //   outlined-focus-outline-width  ← --text-fields-outlined-focused-outline-outlined-text-field-focus-outline-width (valor 3)
+    //   outlined-container-shape       ← --text-fields-outlined-enabled-container-outlined-text-field-container-shape (valor 4)
+    // Las dos primeras se usan vía alias --Text-fields-* en html {} que convierten a rem (1px → 0.0625rem).
+    outlined-outline-width: 0.0625rem,
+    outlined-focus-outline-width: var(--text-fields-outlined-focused-outline-outlined-text-field-focus-outline-width),
+    outlined-container-shape: var(--Text-fields-outlined-enabled-container-outlined-text-field-container-shape),
+    outlined-caret-color: var( --Text-fields-outlined-enabled-outline-outline-text-field-outline-color),
+    outlined-disabled-input-text-color: color-mix(in srgb,
+      var(--text-fields-outlined-disabled-input-text-outlined-text-field-disabled-input-text-color)
+      calc(var(--text-fields-outlined-disabled-input-text-outlined-text-field-disabled-input-text-opacity) * 1%),
+      transparent),
+    //outlined-disabled-outline-color: color-mix(in srgb,
+    //  var(--text-fields-outlined-disabled-outline-outlined-text-field-disabled-outline-color)
+    //  calc(var(--text-fields-outlined-disabled-input-text-outlined-text-field-disabled-input-text-opacity) * 1%),
+    //  transparent),
+    outlined-disabled-label-text-color: color-mix(in srgb,
+      var(--text-fields-outlined-disabled-label-text-outlined-text-field-disabled-label-text-color)
+      calc(var(--text-fields-outlined-disabled-input-text-outlined-text-field-disabled-input-text-opacity) * 1%),
+      transparent),
+    // Tokens disabled globales (Material: --mat-sys-on-surface 38%). Figma: text-fields outlined disabled.
+    disabled-input-text-placeholder-color: color-mix(in srgb,
+      var(--text-fields-outlined-disabled-input-text-outlined-text-field-disabled-input-text-color)
+      calc(var(--text-fields-outlined-disabled-input-text-outlined-text-field-disabled-input-text-opacity) * 1%),
+      transparent),
+    disabled-leading-icon-color: color-mix(in srgb,
+      var(--text-fields-outlined-disabled-leading-icon-outlined-text-field-disabled-leading-icon-color)
+      calc(var(--text-fields-outlined-disabled-leading-icon-outlined-text-field-disabled-leading-icon-opacity, 38) * 1%),
+      transparent),
+    disabled-select-arrow-color: color-mix(in srgb,
+      var(--text-fields-outlined-disabled-leading-icon-outlined-text-field-disabled-leading-icon-color)
+      calc(var(--text-fields-outlined-disabled-leading-icon-outlined-text-field-disabled-leading-icon-opacity, 38) * 1%),
+      transparent),
+    disabled-trailing-icon-color: color-mix(in srgb,
+      var(--text-fields-outlined-disabled-trailing-icon-outlined-text-field-disabled-trailing-icon-color)
+      calc(var(--text-fields-outlined-disabled-trailing-icon-outlined-text-field-disabled-trailing-icon-opacity, 38) * 1%),
+      transparent),
+    outlined-error-caret-color: var(--text-fields-outlined-enabled-caret-outlined-text-field-error-focus-caret-color),
+    outlined-error-focus-label-text-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-label-text-color),
+    outlined-error-focus-outline-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-outline-color),
+    outlined-error-hover-label-text-color: var(--text-fields-outlined-error-hover-outlined-text-field-error-hover-label-text-color),
+    outlined-error-hover-outline-color: var(--text-fields-outlined-error-hover-outlined-text-field-error-hover-outline-color),
+    outlined-error-label-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color),
+    outlined-error-outline-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color),
+    error-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color),
+    outlined-focus-label-text-color: var(--text-fields-outlined-focused-label-text-outlined-text-field-focus-label-text-color),
+    outlined-focus-outline-color: var(--text-fields-outlined-focused-outline-outlined-text-field-focus-outline-color),
+    outlined-hover-outline-color: var(--text-fields-outlined-hovered-outline-outlined-text-field-hover-outline-color),
+    outlined-input-text-color: var(--text-fields-outlined-enabled-input-text-outlined-text-field-input-text-color),
+    outlined-input-text-placeholder-color: var(--text-fields-outlined-enabled-input-text-outlined-text-field-input-text-placeholder-color),
+    outlined-label-text-color: var(--text-fields-outlined-enabled-label-text-outlined-text-field-label-text-color),
+    outlined-outline-color: var(--text-fields-outlined-enabled-outline-outline-text-field-outline-color),
+    outlined-label-text-font: var(--text-fields-outlined-enabled-label-text-outlined-text-field-label-text-font),
+    outlined-label-text-size: var(--text-fields-outlined-enabled-label-text-outlined-text-field-label-text-size),
+    outlined-label-text-tracking: var(--text-fields-outlined-enabled-label-text-outlined-text-field-label-text-tracking),
+    // 12px de tokens → 0.75rem asumiendo base 16px.
+    outlined-label-text-populated-size: calc(
+      var(--text-fields-outlined-enabled-label-text-outlined-text-field-label-text-populated-size, 12px) / 16 * 1rem
+    ),
+    // Hint (supporting text) tipografía según Figma outlined enabled supporting text
+    subscript-text-font: var(--text-fields-outlined-enabled-supporting-text-outlined-text-field-supporting-text-font),
+    subscript-text-size: 0.75rem,
+    subscript-text-line-height: calc(var(--text-fields-outlined-enabled-supporting-text-outlined-text-field-supporting-text-line-height) * 1px),
+    subscript-text-tracking: calc(var(--text-fields-outlined-enabled-supporting-text-outlined-text-field-supporting-text-tracking) * 1px),
+    subscript-text-weight: var(--text-fields-outlined-enabled-supporting-text-outlined-text-field-supporting-text-weight),
+  ));
+
+  // Color del hint/supporting text en outlined (token de Figma).
+  .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper,
+  .mat-mdc-form-field .mat-mdc-form-field-hint,
+  .mat-mdc-form-field .mat-mdc-form-field-hint-start,
+  .mat-mdc-form-field .mat-mdc-form-field-hint-end {
+    color: var(--text-fields-outlined-enabled-supporting-text-outlined-text-field-supporting-text-color);
+  }
+
+  // Opacity desde token (38 → 0.38) para iconos SVG y mat-hint en form fields deshabilitados
+  .mat-mdc-form-field.mat-form-field-disabled {
+    .mat-icon,
+    .mat-mdc-form-field-icon-wrapper svg {
+      opacity: calc(var(--text-fields-outlined-disabled-input-text-outlined-text-field-disabled-input-text-opacity) / 100);
+    }
+    .mat-mdc-form-field-subscript-wrapper,
+    mat-hint {
+      opacity: calc(var(--text-fields-outlined-disabled-input-text-outlined-text-field-disabled-input-text-opacity) / 100);
+    }
+  }
+}

package/src/lib/styles/overrides/_mat-icon-button-overrides.scss

@@ -0,0 +1,20 @@
+@use '@angular/material' as mat;
+
+/// Icon button overrides (M3). Tokens: tokens-by-component (icon-buttons-*).
+html {
+  @include mat.icon-button-overrides((
+    icon-size: calc(var(--icon-buttons-icon-button-enabled-icon-button-icon-size, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-size, 24)) * 1px),
+    container-shape: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-round, 1000)) * 1px),
+    touch-target-size: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-height, var(--app-icon-buttons-icon-button-enabled-icon-button-container-height, 40)) * 1px),
+    disabled-icon-color: var(--icon-buttons-icon-button-disabled-icon-button-disabled-icon-color, var(--app-icon-buttons-icon-button-disabled-icon-button-disabled-icon-color)),
+    disabled-state-layer-color: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-color, var(--app-icon-buttons-icon-button-disabled-icon-button-disabled-container-color)),
+    focus-state-layer-opacity: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-opacity)),
+    hover-state-layer-opacity: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-opacity, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-opacity)),
+    icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color)),
+    pressed-state-layer-opacity: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-opacity, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-opacity)),
+    ripple-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-ripple-color, var(--app-icon-buttons-color-filled-pressed-icon-button-filled-pressed-ripple-color)),
+    state-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color)),
+    touch-target-display: block,
+    state-layer-size: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-height, var(--app-icon-buttons-icon-button-enabled-icon-button-container-height, 40)) * 1px),
+  ));
+}