/* ============================================================================= RUTINITAS — TOKENS ============================================================================= Base estructural: design system `ng-template` (Angular 21 + Material). Base cromática: la paleta Rutinitas de la landing de referencia (crema + ámbar + teal, más la expansión pastel sun / mint / lav / pink / sky). QUÉ SE TOCÓ Y POR QUÉ --------------------- `ng-template` NO es una marca: su DESIGN.md §3 declara que de las 7 anclas de color sólo CUATRO son slots que el generador rellena por proyecto — `header`, `primary`, `secondary`, `tertiary` — y que `success` / `warning` / `error` son constantes semánticas que NO se reemplazan nunca. Esos 4 slots ahora llevan la paleta Rutinitas: header → cream #ebe0cd (el header cálido de la referencia) primary → amber #ef9d4e ("Primary — color de acción / CTA") secondary → teal #00695c (teal-deep del par teal de la referencia) tertiary → lavanda #685ab2 (lav-ink #7a6ad1 con la regla -dark del template) Los 9 derivados se recalculan con la MISMA regla del template, no a ojo: -light = mix(white, C, 82%) → 82% blanco + 18% color -container = mix(white, C, 90%) → 90% blanco + 10% color -dark = mix(black, C, 15%) → 15% negro + 85% color DOS DESVÍOS DECLARADOS respecto del contrato de `ng-template`: 1. Los `--app-on-*` de header, primary, secondary y tertiary se recalculan por luminancia del ancla, que es exactamente lo que el propio DESIGN.md dice que hace el generador con `--app-on-header` y lo que explica por qué `--app-on-warning` es NEGRO. Con un ancla cálida clara, el texto blanco no llega a 4.5:1; el ancla manda sobre el literal. 2. Las superficies de tema CLARO (`--theme-bg`, `--theme-text`, `--theme-border`…) toman las de la referencia (crema #fff9f0 / tinta #3d3222). El gris frío #f5f5f5 del template peleaba con una paleta cálida. El tema OSCURO queda igual que el contrato. HUECO DECLARADO: las 12 neutrales (`--app-neutral*`) se dejan como las trae el contrato. Regenerarlas cálidas es el paso `bin/generate-palettes.js` sobre las nuevas anclas por HCT — fuera del alcance de un prototipo HTML. Donde se notaba el choque (chips neutros) se usa la capa de producto `--rt-neutral-*`. CONTRASTES VERIFICADOS (WCAG AA, texto normal ≥ 4.5:1) cream #ebe0cd + #5a4632 → 6.8 amber #ef9d4e + #4a2e08 → 5.7 teal #00695c + #ffffff → 6.6 lav #685ab2 + #ffffff → 5.7 tinta #3d3222 sobre #fff9f0 → 12.0 tinta suave #7c6f5d sobre #fff9f0 → 4.7 ============================================================================= */ /* ----------------------------------------------------------------------------- 1. ANCLAS DE COLOR — 9 tokens 4 slots con la paleta Rutinitas · 3 constantes semánticas intactas -------------------------------------------------------------------------- */ :root { --app-header: #ebe0cd; /* slot — cream, el header cálido */ --app-on-header: #5a4632; /* calculado por luminancia: cream es claro → tinta marrón */ --app-primary: #ef9d4e; /* slot — amber, color de acción / CTA */ --app-secondary: #00695c; /* slot — teal profundo, apoyo / confianza */ --app-tertiary: #685ab2; /* slot — lavanda, de lav-ink #7a6ad1 */ --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 del contrato */ /* --------------------------------------------------------------------------- 2. DERIVADOS POR mix() — 9 tokens, con la regla del template ------------------------------------------------------------------------ */ --app-primary-light: #fceddf; /* mix(white, #ef9d4e, 82%) */ --app-primary-container: #fdf5ed; /* mix(white, #ef9d4e, 90%) */ --app-primary-dark: #cb8542; /* mix(black, #ef9d4e, 15%) */ --app-secondary-light: #d1e4e2; /* mix(white, #00695c, 82%) */ --app-secondary-container: #e6f0ef; /* mix(white, #00695c, 90%) */ --app-secondary-dark: #00594e; /* mix(black, #00695c, 15%) */ --app-tertiary-light: #e4e1f1; /* mix(white, #685ab2, 82%) */ --app-tertiary-container: #f0eff7; /* mix(white, #685ab2, 90%) */ --app-tertiary-dark: #584d97; /* mix(black, #685ab2, 15%) */ /* --------------------------------------------------------------------------- 3. ON-COLOR — 6 tokens Recalculados por luminancia del ancla (desvío 1 de la cabecera). ------------------------------------------------------------------------ */ --app-on-primary: #4a2e08; /* marrón oscuro: el mismo que la referencia usa sobre amber */ --app-on-secondary: #ffffff; --app-on-tertiary: #ffffff; --app-on-success: #ffffff; --app-on-warning: #000000; --app-on-error: #ffffff; /* --------------------------------------------------------------------------- 4. NEUTRALES — 7 tokens (verbatim del contrato, ver hueco declarado) ------------------------------------------------------------------------ */ --app-neutral: #76777a; --app-neutral-light: #c7c6ca; --app-neutral-dark: #2f3033; --app-neutral-bg: #f1f0f4; --app-neutral-bg-dark: #1a1c1e; --app-neutral-surface: #faf9fd; --app-neutral-outline: #909094; /* --------------------------------------------------------------------------- 5. NEUTRAL VARIANT — 5 tokens (verbatim) ------------------------------------------------------------------------ */ --app-neutral-variant: #74777e; --app-neutral-variant-light: #c4c6ce; --app-neutral-variant-dark: #2d3037; --app-neutral-variant-bg: #eff0f9; --app-neutral-variant-outline: #8e9198; } /* ----------------------------------------------------------------------------- 6. TIPOGRAFÍA — 9 tokens (verbatim del contrato) Sin Google Fonts: se referencian por nombre y resuelven local o al fallback. -------------------------------------------------------------------------- */ :root { --primary-font: Poppins, sans-serif; --secondary-font: Open Sans, sans-serif; --terciary-font: Montserrat, sans-serif; /* sic — typo real del token */ --monospace-font: M PLUS 1 Code, monospace; --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 800; } /* ----------------------------------------------------------------------------- 7. LAYOUT / GRID — 21 tokens (verbatim) -------------------------------------------------------------------------- */ :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 Superficies cálidas de la referencia (desvío 2 de la cabecera). -------------------------------------------------------------------------- */ :root { --theme-bg: #fff9f0; /* crema muy suave */ --theme-bg-elevated: #ffffff; --theme-bg-surface: color-mix(in oklab, #fff9f0 55%, var(--rt-papel)); --theme-text: #3d3222; /* tinta cálida */ --theme-text-secondary: #7c6f5d; --theme-text-disabled: color-mix(in oklab, #7c6f5d 52%, #fff9f0); --theme-border: #f0e6d6; --theme-divider: color-mix(in oklab, #7c6f5d 18%, transparent); --theme-header-bg: var(--app-header); --theme-header-text: var(--app-on-header); --theme-sidenav-bg: #ffffff; --theme-sidenav-text: #3d3222; --theme-sidenav-hover: #fff9f0; --theme-sidenav-active-bg: var(--app-primary-container); --theme-sidenav-active-text: var(--app-on-header); --theme-sidenav-subitem-bg: var(--app-primary-container); --theme-sidenav-subitem-hover: var(--app-primary-light); --mat-sys-on-surface: var(--theme-text); --mat-form-field-outlined-input-text-color: var(--theme-text); /* Chips de agente y badges de resultado: verbatim del contrato */ --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; --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 (verbatim del contrato) Selector por ATRIBUTO sobre , sin media query. Ningún `--app-*` cambia. -------------------------------------------------------------------------- */ [data-theme='dark'] { --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); --theme-header-bg: #1e1e1e; --theme-header-text: #ffffff; --theme-sidenav-bg: #1e1e1e; --theme-sidenav-text: #f5f5f5; --theme-sidenav-hover: #333333; --theme-sidenav-active-bg: #3a2d1c; /* ámbar apagado sobre superficie oscura */ --theme-sidenav-active-text: var(--app-primary); /* 6.1:1 */ --theme-sidenav-subitem-bg: #3a2d1c; --theme-sidenav-subitem-hover: #4d3c26; --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); --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); --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); --mdc-outlined-text-field-container-color: transparent; --mdc-filled-text-field-container-color: #1a1c1e; --mdc-text-field-filled-container-color: #1a1c1e; } /* ----------------------------------------------------------------------------- 10. TEMA SANDBOX (verbatim) -------------------------------------------------------------------------- */ [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; } /* ============================================================================= 11. CAPA DE PRODUCTO — `--rt-*` ============================================================================= Cubre los huecos que el DESIGN.md de ng-template declara inexistentes (espaciado, radios, motion, elevación, escala tipográfica) y define el sistema de franjas horarias sobre la expansión pastel de la referencia. CÓMO FUNCIONA UNA FRANJA — cinco papeles, no uno: --rt-X color vivo: relleno de botón, barra de progreso, celda llena --rt-X-on texto sobre el vivo (por eso NO es siempre blanco) --rt-X-soft PASTEL de superficie: card, chip, carril, tarjetón --rt-X-tint un paso más saturado que el pastel: bordes y avatares --rt-X-deep tinta oscura legible SOBRE el pastel Es el mismo modelo de la referencia: cada pastel viene con su tinta. ============================================================================= */ :root { /* ── Mañana — familia sun / amber ──────────────────────────────────────── */ --rt-manana: var(--app-primary); /* #ef9d4e */ --rt-manana-on: var(--app-on-primary); /* #4a2e08 · 5.7:1 */ --rt-manana-soft: #fff0c2; /* sun */ --rt-manana-tint: #ffe09a; /* sun un paso más saturado */ --rt-manana-deep: #5a4632; /* on-cream · 7.9:1 sobre sun */ /* ── Tarde — familia mint / teal ───────────────────────────────────────── */ --rt-tarde: var(--app-secondary); /* #00695c */ --rt-tarde-on: var(--app-on-secondary); /* #ffffff · 6.6:1 */ --rt-tarde-soft: #cdeede; /* mint */ --rt-tarde-tint: #a9dfc9; /* mint un paso más saturado */ --rt-tarde-deep: #00594e; /* teal más profundo · 5.3:1 sobre mint */ /* ── Noche — familia lav / lavanda ─────────────────────────────────────── */ --rt-noche: var(--app-tertiary); /* #685ab2 */ --rt-noche-on: var(--app-on-tertiary); /* #ffffff · 5.7:1 */ --rt-noche-soft: #e2d9ff; /* lav */ --rt-noche-tint: #c9baff; /* lav un paso más saturado */ --rt-noche-deep: #584d97; /* lavanda oscura · 5.3:1 sobre lav */ /* Franja activa — la pisa `[data-franja]` más abajo */ --rt-franja: var(--rt-manana); --rt-franja-on: var(--rt-manana-on); --rt-franja-soft: var(--rt-manana-soft); --rt-franja-tint: var(--rt-manana-tint); --rt-franja-deep: var(--rt-manana-deep); /* ── Pastel reservados de la referencia, todavía sin franja asignada ───── */ --rt-pink: #ffd6e0; --rt-pink-ink: #c65f7b; --rt-sky: #d4ecff; --rt-sky-ink: #3d8fc7; /* ── Neutro cálido: reemplaza al gris frío del contrato en el producto ─── */ --rt-neutral-soft: #f0e6d6; --rt-neutral-ink: #7c6f5d; --rt-taupe: #a98b68; /* ── Estrella: el oro de la referencia ─────────────────────────────────── */ --rt-estrella: #f5b53a; /* ── Papel y tinta: la hoja impresa NO sigue al tema ───────────────────── */ --rt-papel: #ffffff; --rt-tinta: #3d3222; /* ── Tipografía de producto: extiende las familias del contrato ────────── */ --rt-font-display: Poppins, ui-rounded, 'Trebuchet MS', var(--primary-font); --rt-font-body: 'Open Sans', 'Segoe UI', system-ui, var(--secondary-font); --rt-font-mono: 'M PLUS 1 Code', ui-monospace, Menlo, var(--monospace-font); /* ── Escala tipográfica ────────────────────────────────────────────────── */ --rt-text-xs: 0.75rem; --rt-text-sm: 0.875rem; --rt-text-md: 1rem; --rt-text-lg: 1.125rem; --rt-text-xl: 1.375rem; --rt-text-2xl: clamp(1.6rem, 3vw, 2.1rem); --rt-text-3xl: clamp(2rem, 5vw, 3.2rem); /* ── Espaciado ─────────────────────────────────────────────────────────── */ --rt-space-1: 0.25rem; --rt-space-2: 0.5rem; --rt-space-3: 0.75rem; --rt-space-4: 1rem; --rt-space-5: 1.5rem; --rt-space-6: 2rem; --rt-space-7: 3rem; --rt-space-8: 4.5rem; /* ── Radios: la referencia es más redonda que el template ──────────────── */ --rt-radius-sm: 1rem; --rt-radius-md: 1.625rem; --rt-radius-lg: 2.5rem; --rt-radius-pill: 62.4375rem; /* ── Motion ────────────────────────────────────────────────────────────── */ --rt-dur-fast: 0.12s; --rt-dur: 0.2s; --rt-dur-slow: 0.45s; --rt-ease: ease-in-out; --rt-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Elevación: sombra cálida, no gris ─────────────────────────────────── */ --rt-elev-1: 0 0.375rem 1rem -0.75rem rgba(120, 90, 40, 0.35); --rt-elev-2: 0 0.875rem 2.5rem -1.125rem rgba(120, 90, 40, 0.35); --rt-elev-3: 0 1.625rem 3.75rem -1.375rem rgba(120, 90, 40, 0.45); /* ── Anchos de layout del producto ─────────────────────────────────────── */ --rt-shell-nav: 16.5rem; --rt-content-max: 76rem; /* ── PERSONAJE ───────────────────────────────────────────────────────────── Paleta de rasgos del avatar. No es piel de marca ni superficie de tema: es CONTENIDO — la cara de un chico real. Por eso vive acá, con nombre propio, y NO cambia en modo oscuro: la piel de una persona no se re-tinta. El avatar de js/personajes.js las consume por var(), así que sigue sin haber un solo hex suelto fuera de este archivo. ---------------------------------------------------------------------- */ --rt-piel-1: #f7d9c4; --rt-piel-2: #eec2a4; --rt-piel-3: #d9a074; --rt-piel-4: #bb7a4e; --rt-piel-5: #8d5524; --rt-piel-6: #5c3317; --rt-pelo-1: #241a15; /* negro */ --rt-pelo-2: #4a2f1c; /* castaño oscuro */ --rt-pelo-3: #7b4a24; /* castaño */ --rt-pelo-4: #b5651d; /* castaño rojizo — el de las 17 ilustraciones */ --rt-pelo-5: #c1502a; /* pelirrojo */ --rt-pelo-6: #dfae62; /* rubio */ --rt-mejilla: #f2a6a6; --rt-peca: #a9683f; --rt-trazo-cara: #3d2b1f; } [data-theme='dark'] { --rt-neutral-soft: #2a2620; --rt-neutral-ink: #cbbfae; --rt-elev-1: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5); --rt-elev-2: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.55); --rt-elev-3: 0 0.75rem 2rem rgba(0, 0, 0, 0.65); } /* ── Conmutador de franja: un solo atributo re-tiñe toda una región ─────── */ [data-franja='manana'] { --rt-franja: var(--rt-manana); --rt-franja-on: var(--rt-manana-on); --rt-franja-soft: var(--rt-manana-soft); --rt-franja-tint: var(--rt-manana-tint); --rt-franja-deep: var(--rt-manana-deep); } [data-franja='tarde'] { --rt-franja: var(--rt-tarde); --rt-franja-on: var(--rt-tarde-on); --rt-franja-soft: var(--rt-tarde-soft); --rt-franja-tint: var(--rt-tarde-tint); --rt-franja-deep: var(--rt-tarde-deep); } [data-franja='noche'] { --rt-franja: var(--rt-noche); --rt-franja-on: var(--rt-noche-on); --rt-franja-soft: var(--rt-noche-soft); --rt-franja-tint: var(--rt-noche-tint); --rt-franja-deep: var(--rt-noche-deep); } /* En oscuro el pastel no puede ser el pastel: se re-deriva como mezcla sobre la superficie elevada, y la tinta `-deep` se invierte a un tono claro para mantener el contraste. Ningún `--app-*` cambia. */ [data-theme='dark'] [data-franja='manana'], [data-theme='dark'][data-franja='manana'] { --rt-franja-soft: color-mix(in oklab, var(--rt-manana) 20%, var(--theme-bg-elevated)); --rt-franja-tint: color-mix(in oklab, var(--rt-manana) 36%, var(--theme-bg-elevated)); --rt-franja-deep: color-mix(in oklab, var(--rt-manana) 68%, var(--rt-papel)); } [data-theme='dark'] [data-franja='tarde'], [data-theme='dark'][data-franja='tarde'] { --rt-franja-soft: color-mix(in oklab, var(--rt-tarde-soft) 18%, var(--theme-bg-elevated)); --rt-franja-tint: color-mix(in oklab, var(--rt-tarde-soft) 34%, var(--theme-bg-elevated)); --rt-franja-deep: color-mix(in oklab, var(--rt-tarde-soft) 82%, var(--rt-papel)); } [data-theme='dark'] [data-franja='noche'], [data-theme='dark'][data-franja='noche'] { --rt-franja-soft: color-mix(in oklab, var(--rt-noche) 24%, var(--theme-bg-elevated)); --rt-franja-tint: color-mix(in oklab, var(--rt-noche) 42%, var(--theme-bg-elevated)); --rt-franja-deep: color-mix(in oklab, var(--rt-noche-soft) 88%, var(--rt-papel)); }