/* ============================================================================= ng-template — TOKENS ============================================================================= Contrato del design system activo, copiado tal cual. Ningún valor de este archivo se redefine acá ni en app.css: si falta una medida, va un valor concreto en el lugar donde se usa, nunca una escala paralela. TOTALES 36 custom properties `--app-*` → color puro. OJO: NO son todas "la marca": sólo 4 son slots que el generador rellena. 9 tipografía 21 layout / grid 45 tema (superficie, chips, badges) en modo claro 49 tema en modo oscuro CÓMO CONMUTA EL TEMA Por atributo `[data-theme='dark']` sobre el . NO hay media queries. ⚠️ NINGÚN `--app-*` cambia en modo oscuro. Cero de treinta y seis. Las anclas de marca son idénticas en claro y en oscuro; lo que el modo oscuro redefine son los `--theme-*`, los chips de agente, los badges de resultado y tres tokens MDC. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. ANCLAS DE COLOR — 9 tokens, y NO son todos lo mismo Sólo CUATRO son slots que el generador reemplaza: header, primary, secondary y tertiary. `--app-on-header` no es un slot: se CALCULA por luminancia del header. Y success/warning/error son constantes semánticas de estado. -------------------------------------------------------------------------- */ :root { --app-header: #1976d2; /* slot del generador ($2) */ --app-on-header: #ffffff; /* calculado por luminancia del header */ --app-primary: #1976d2; /* slot del generador ($3) */ --app-secondary: #00897b; /* slot del generador ($4) */ --app-tertiary: #5e35b1; /* slot del generador ($5) */ --app-success: #2e7d32; /* constante semántica — NO se reemplaza */ --app-warning: #f57c00; /* constante semántica — NO se reemplaza */ --app-error: #c62828; /* constante semántica — NO se reemplaza */ --app-super-admin: #ffde00; /* hueco declarado: no es slot del generador */ /* --------------------------------------------------------------------------- 2. DERIVADOS POR color.mix() — 9 tokens -light = mix(white, $color, 82%) -container = mix(white, $color, 90%) -dark = mix(black, $color, 15%) ------------------------------------------------------------------------ */ --app-primary-light: #d6e6f7; --app-primary-container: #e8f1fb; --app-primary-dark: #1564b3; --app-secondary-light: #d1eae7; --app-secondary-container: #e6f3f2; --app-secondary-dark: #007469; --app-tertiary-light: #e2dbf1; --app-tertiary-container: #efebf7; --app-tertiary-dark: #502d96; /* --------------------------------------------------------------------------- 3. ON-COLOR — 6 tokens `--app-on-warning` es NEGRO: el naranja no alcanza contraste con blanco. ------------------------------------------------------------------------ */ --app-on-primary: #ffffff; --app-on-secondary: #ffffff; --app-on-tertiary: #ffffff; --app-on-success: #ffffff; --app-on-warning: #000000; --app-on-error: #ffffff; /* --------------------------------------------------------------------------- 4. NEUTRALES — 7 tokens ------------------------------------------------------------------------ */ --app-neutral: #76777a; /* neutral 50 */ --app-neutral-light: #c7c6ca; /* neutral 80 */ --app-neutral-dark: #2f3033; /* neutral 20 */ --app-neutral-bg: #f1f0f4; /* neutral 95 */ --app-neutral-bg-dark: #1a1c1e; /* neutral 10 */ --app-neutral-surface: #faf9fd; /* neutral 98 */ --app-neutral-outline: #909094; /* neutral 60 */ /* --------------------------------------------------------------------------- 5. NEUTRAL VARIANT — 5 tokens ------------------------------------------------------------------------ */ --app-neutral-variant: #74777e; --app-neutral-variant-light: #c4c6ce; --app-neutral-variant-dark: #2d3037; --app-neutral-variant-bg: #eff0f9; --app-neutral-variant-outline: #8e9198; } /* ── Fin de los 36 `--app-*`. 9 + 9 + 6 + 7 + 5 = 36. ────────────────────── */ /* ----------------------------------------------------------------------------- 6. TIPOGRAFÍA — 9 tokens Las 5 familias son SELF-HOSTED: las sirve ./caras.css desde ./fonts/. Los artefactos generados no dependen de ningún proveedor remoto de fuentes. ⚠️ `--terciary-font` está mal escrito EN EL CÓDIGO ("terciary"). Es el nombre real del token: no se corrige acá. -------------------------------------------------------------------------- */ :root { --primary-font: Poppins, sans-serif; /* títulos */ --secondary-font: Open Sans, sans-serif; /* body */ --terciary-font: Montserrat, sans-serif; /* terciaria (sic) */ --monospace-font: M PLUS 1 Code, monospace; /* seriales y códigos */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 800; } /* ----------------------------------------------------------------------------- 7. LAYOUT / GRID — 21 tokens TODOS los grids son `repeat(auto-fit, minmax(min(100%, ), 1fr))`. La cantidad de columnas EMERGE del ancho disponible; nunca se fija. NOTA: no existen tokens de espaciado, radio, duración ni easing en NINGÚN :root del template. No se inventan acá. -------------------------------------------------------------------------- */ :root { --grid-container-width: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); --grid-profile-card: repeat(auto-fit, minmax(min(100%, 19.74rem), 1fr)); --grid-skills-width: repeat(auto-fit, minmax(min(100%, 19.74rem), 1fr)); --grid-mobile-width: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); --grid-complete-width: repeat(auto-fit, minmax(min(100%, 36rem), 1fr)); --grid-footer-width: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); --gallery-pic-width: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); --forma-input-width: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); --services-blocks-width: repeat(auto-fit, minmax(min(100%, 32rem), 1fr)); --container-width: min(100%, 12rem); --container-pic-width: minmax(min(100%, 12rem), 1fr); --container-minmax-width: minmax(min(100%, 12rem), 1fr); --gallery-container-width: minmax(min(100%, 12rem), 1fr); --main-section-width: minmax(min(80%, 12rem), 80%); --navbar-width: min(100%, 18rem); --logo-width: min(100%, 10rem); --ticker: min(100%, 28rem); --header-height: 5rem; --container-height: calc(100vh - 5rem); --gallery-container-height: calc(80vh - 13rem); --main-section-height: calc(100vh - var(--header-height)); } /* ----------------------------------------------------------------------------- 8. TEMA — MODO CLARO (45 tokens) -------------------------------------------------------------------------- */ :root { /* Superficies y texto (8) */ --theme-bg: #f5f5f5; --theme-bg-elevated: #ffffff; --theme-bg-surface: #fafafa; --theme-text: rgba(0, 0, 0, 0.87); --theme-text-secondary: rgba(0, 0, 0, 0.6); --theme-text-disabled: rgba(0, 0, 0, 0.38); --theme-border: #e0e0e0; --theme-divider: rgba(0, 0, 0, 0.12); /* Layout: header y sidenav (9) */ --theme-header-bg: var(--app-header); --theme-header-text: var(--app-on-header); --theme-sidenav-bg: #ffffff; --theme-sidenav-text: #2f3033; --theme-sidenav-hover: #f5f5f5; --theme-sidenav-active-bg: var(--app-primary-container); --theme-sidenav-active-text: var(--app-primary); --theme-sidenav-subitem-bg: var(--app-primary-container); --theme-sidenav-subitem-hover: var(--app-primary-light); /* Puentes a Angular Material (2 en claro) */ --mat-sys-on-surface: var(--theme-text); --mat-form-field-outlined-input-text-color: var(--theme-text); /* Chips de agente (20) */ --agent-frontend-text: #1a237e; --agent-frontend-bg: #e8eaf6; --agent-frontend-legacy-text: #4a148c; --agent-frontend-legacy-bg: #f3e5f5; --agent-backend-text: #004d40; --agent-backend-bg: #e0f2f1; --agent-bff-text: #e65100; --agent-bff-bg: #fff3e0; --agent-qa-text: #b71c1c; --agent-qa-bg: #ffebee; --agent-devops-text: #263238; --agent-devops-bg: #eceff1; --agent-migration-text: #3e2723; --agent-migration-bg: #efebe9; --agent-ui-text: #0d47a1; --agent-ui-bg: #e3f2fd; --agent-planner-text: #1b5e20; --agent-planner-bg: #e8f5e9; --agent-default-text: #37474f; --agent-default-bg: #eceff1; /* Badges de resultado (6) */ --result-success-text: #1b5e20; --result-success-bg: #e8f5e9; --result-failure-text: #b71c1c; --result-failure-bg: #ffebee; --result-timeout-text: #e65100; --result-timeout-bg: #fff3e0; } /* ----------------------------------------------------------------------------- 9. TEMA — MODO OSCURO (49 tokens) Selector REAL: atributo `[data-theme='dark']`, sin media query. ⚠️ CERO `--app-*` en este bloque. -------------------------------------------------------------------------- */ [data-theme='dark'] { /* Superficies y texto (8) */ --theme-bg: #121212; --theme-bg-elevated: #1e1e1e; --theme-bg-surface: #252525; --theme-text: #f5f5f5; --theme-text-secondary: #cccccc; --theme-text-disabled: #777777; --theme-border: #333333; --theme-divider: rgba(255, 255, 255, 0.12); /* Layout: header y sidenav (9) */ --theme-header-bg: #1e1e1e; --theme-header-text: #ffffff; --theme-sidenav-bg: #1e1e1e; --theme-sidenav-text: #f5f5f5; --theme-sidenav-hover: #333333; --theme-sidenav-active-bg: #1976d2; --theme-sidenav-active-text: #ffffff; --theme-sidenav-subitem-bg: #2a3f54; --theme-sidenav-subitem-hover: #3a5068; /* Puentes a Angular Material (3) */ --mat-sys-on-surface: var(--theme-text); --mat-form-field-outlined-input-text-color: var(--theme-text); --mat-form-field-container-text-color: var(--theme-text); /* Chips de agente (20) */ --agent-frontend-text: #9fa8da; --agent-frontend-bg: rgba(26, 35, 126, 0.25); --agent-frontend-legacy-text: #ce93d8; --agent-frontend-legacy-bg: rgba(74, 20, 140, 0.25); --agent-backend-text: #80cbc4; --agent-backend-bg: rgba(0, 77, 64, 0.25); --agent-bff-text: #ffb74d; --agent-bff-bg: rgba(230, 81, 0, 0.2); --agent-qa-text: #ef9a9a; --agent-qa-bg: rgba(183, 28, 28, 0.2); --agent-devops-text: #b0bec5; --agent-devops-bg: rgba(38, 50, 56, 0.3); --agent-migration-text: #bcaaa4; --agent-migration-bg: rgba(62, 39, 35, 0.25); --agent-ui-text: #90caf9; --agent-ui-bg: rgba(13, 71, 161, 0.25); --agent-planner-text: #a5d6a7; --agent-planner-bg: rgba(27, 94, 32, 0.25); --agent-default-text: #b0bec5; --agent-default-bg: rgba(55, 71, 79, 0.3); /* Badges de resultado (6) */ --result-success-text: #a5d6a7; --result-success-bg: rgba(27, 94, 32, 0.25); --result-failure-text: #ef9a9a; --result-failure-bg: rgba(183, 28, 28, 0.2); --result-timeout-text: #ffb74d; --result-timeout-bg: rgba(230, 81, 0, 0.2); /* Campos de texto MDC (3, SÓLO existen en oscuro) */ --mdc-outlined-text-field-container-color: transparent; --mdc-filled-text-field-container-color: #1a1c1e; --mdc-text-field-filled-container-color: #1a1c1e; } /* ----------------------------------------------------------------------------- 10. TEMA SANDBOX — 6 + 6 tokens Segundo atributo, ortogonal al tema. Marca el entorno de pruebas tiñendo el header de naranja. Tampoco toca ningún `--app-*`. -------------------------------------------------------------------------- */ [data-sandbox='true'] { --theme-header-bg: var(--app-warning); --theme-header-text: #000000; --theme-sidenav-active-bg: #fff3e0; --theme-sidenav-active-text: #f57c00; --theme-sidenav-subitem-bg: #fff8e1; --theme-sidenav-subitem-hover: #ffecb3; } [data-theme='dark'][data-sandbox='true'] { --theme-header-bg: var(--app-warning); --theme-header-text: #000000; --theme-sidenav-active-bg: #4a3000; --theme-sidenav-active-text: #ffb74d; --theme-sidenav-subitem-bg: #3d2800; --theme-sidenav-subitem-hover: #5c3d00; } /* ============================================================================= HUECOS DECLARADOS — lo que este design system NO tiene ============================================================================= · escala de espaciado (--space-*) · radios (--radius-*) — hardcodeados por componente: 0.5rem card / menu / snackbar / tooltip, 1rem dialog, 2rem chip · duración y easing — hardcodeados por componente (0.2s ease-in-out) · elevación (--elev-*) · escala tipográfica (--text-*) — sólo hay familias y pesos app.css respeta esto: usa el valor concreto en el lugar donde se usa. ============================================================================= */