/* ============================================================================= BOTIZE — CONTRATO DE TOKENS DE TEMA ----------------------------------------------------------------------------- Este fichero es el UNICO sitio del sistema donde puede aparecer un literal de color. Todo lo demas consume var(--btz-*). Un "#" fuera de aqui es deuda. Lo cargan los cuatro consumidores: sitio publico (heads de EBS), panel_78, monitor_v13_prod y los componentes con shadow DOM. Las custom properties atraviesan el shadow boundary, asi que los componentes heredan solos. Especificacion y reglas: docs/theme_tokens.md Contrastes verificados AA (>=4.5:1) en ambos temas, 2026-08-18. ============================================================================= */ /* ----------------------------------------------------------------------------- CLARO — el valor por defecto. Siempre completo: los bloques de oscuro solo REDEFINEN, nunca introducen un token que no exista aqui. -------------------------------------------------------------------------- */ :root { /* superficies */ --btz-bg: #ffffff; --btz-surface: #ffffff; --btz-surface-2: #f6f7f8; /* texto */ --btz-text: #111111; --btz-text-muted: #555555; --btz-text-faint: #6b7075; /* lineas */ --btz-border: #e3e7eb; --btz-border-strong: #c4cad0; /* accion primaria — identidad blanco y negro */ --btz-action-bg: #111111; --btz-action-text: #ffffff; --btz-action-hover: #333333; /* enlaces */ --btz-link: #111111; --btz-link-hover: #444444; /* estado — lo unico con tinte permitido */ /* PELIGRO: TINTA Y RELLENO SON DOS PAPELES DISTINTOS. --btz-danger es la TINTA: texto e iconos sobre una superficie normal. En oscuro tiene que aclararse para leerse, pero SIN irse a pastel. --btz-danger-fill es el RELLENO de un boton destructivo, y ahi el rojo se OSCURECE en oscuro en vez de aclararse, con texto blanco encima. Tenerlo en un solo token fue el error original: el valor de tinta de Material (#f2b8b5) usado como relleno da un bloque rosa pastel. Un rojo de relleno tiene que seguir leyendose como rojo en los dos temas. */ --btz-danger: #b3261e; --btz-danger-fill: #b3261e; --btz-danger-on-fill:#ffffff; --btz-danger-hover: #c8382f; --btz-danger-bg: #fdeceb; --btz-success: #2e7d32; --btz-success-bg: #edf7ee; --btz-warning: #8a6100; --btz-warning-hover: #9a6d00; --btz-warning-bg: #fdf6e3; --btz-warning-bg-hover: #faeed0; /* foco de teclado */ --btz-focus: #111111; /* Superposicion de hover. NO es una superficie: se pinta ENCIMA de la que haya, asi que tiene que ser semitransparente y cambiar de negro a blanco entre temas. Con un color opaco, un hover sobre --btz-surface-2 seria invisible porque coincidiria con el fondo. */ --btz-overlay-hover: rgba(0, 0, 0, 0.06); /* Sombra proyectada. En oscuro NO se aclara: se hace mas densa. Una sombra es ausencia de luz en los dos temas; lo que cambia es cuanta falta hace para separar una superficie de su fondo. */ --btz-shadow: rgba(0, 0, 0, 0.28); /* BANDA INVERTIDA. Una seccion que contrasta con el resto de la pagina (.ap2-sec.alt y las bandas oscuras de la home). Su papel no es "ser oscura", es "romper con el fondo": en claro eso significa casi negra, y en oscuro significa ACLARARSE, porque una banda negra sobre una pagina negra no es una banda. Por eso no vale --btz-action-bg ni --btz-surface a secas: el trio bg/texto/apagado tiene que moverse junto. */ --btz-band-bg: #0a0a0a; --btz-band-text: #ffffff; --btz-band-muted: #cfcfcf; --btz-band-border: #2a2a2a; /* CHIP DE ICONO DE MARCA. Es el unico token que NO se invierte: se queda claro en los dos temas. Detras van los 338 PNG de btzappicons, y muchos son un glifo negro sobre transparente (X, GitHub, Notion). Sobre un chip oscuro desaparecen. En oscuro se rebaja un punto para que no deslumbre, pero sigue siendo claro a proposito. */ --btz-icon-chip: #ffffff; } /* ----------------------------------------------------------------------------- OSCURO POR PREFERENCIA DEL SISTEMA El guardado :not([data-theme="light"]) es lo que permite forzar claro teniendo el sistema en oscuro. Sin el, el interruptor solo funciona en una direccion. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { /* DESPLIEGUE POR FASES (2026-08-18). El guardado definitivo es :root:not([data-theme="light"]), que hace que el oscuro sea el defecto para quien tenga el sistema en oscuro. Mientras las plantillas sigan teniendo 382 colores en linea, eso le daria a media internet una pagina oscura con bloques blancos incrustados. Con [data-theme="auto"] solo lo recibe quien lo pida, y hoy no hay interruptor que lo pida. PARA ABRIRLO A TODOS: cambiar el selector de abajo por :root:not([data-theme="light"]). Es el unico cambio que hace falta. */ :root[data-theme="auto"] { --btz-bg: #0f1113; --btz-surface: #17191c; --btz-surface-2: #1f2226; --btz-text: #e8eaed; --btz-text-muted: #9aa0a6; --btz-text-faint: #8a9096; --btz-border: #2a2e33; --btz-border-strong: #3d434a; /* se invierte: el boton primario sigue siendo el contraste maximo */ --btz-action-bg: #e8eaed; --btz-action-text: #17191c; --btz-action-hover: #cfd3d7; --btz-link: #e8eaed; --btz-link-hover: #b0b5ba; --btz-danger: #ef6b6b; --btz-danger-fill: #8f2c2c; --btz-danger-on-fill:#ffffff; --btz-danger-hover: #a03232; --btz-danger-bg: #2b1513; --btz-success: #a6d4a8; --btz-success-bg: #14251a; --btz-warning: #e8c468; --btz-warning-hover: #d9b355; --btz-warning-bg: #2a2113; --btz-warning-bg-hover: #352a18; /* un anillo negro sobre fondo oscuro no se ve */ --btz-focus: #8ab4f8; /* de negro a blanco: en oscuro un velo negro no aclara nada */ --btz-overlay-hover: rgba(255, 255, 255, 0.08); --btz-shadow: rgba(0, 0, 0, 0.6); --btz-band-bg: #17191c; --btz-band-text: #e8eaed; --btz-band-muted: #9aa0a6; --btz-band-border: #2a2e33; --btz-icon-chip: #f1f3f4; } } /* ----------------------------------------------------------------------------- OSCURO POR ELECCION EXPLICITA — gana sobre la preferencia del sistema. El atributo lo sella el servidor en la linea del skeleton, no el JS, para que no haya destello blanco antes de pintar. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --btz-bg: #0f1113; --btz-surface: #17191c; --btz-surface-2: #1f2226; --btz-text: #e8eaed; --btz-text-muted: #9aa0a6; --btz-text-faint: #8a9096; --btz-border: #2a2e33; --btz-border-strong: #3d434a; --btz-action-bg: #e8eaed; --btz-action-text: #17191c; --btz-action-hover: #cfd3d7; --btz-link: #e8eaed; --btz-link-hover: #b0b5ba; --btz-danger: #ef6b6b; --btz-danger-fill: #8f2c2c; --btz-danger-on-fill:#ffffff; --btz-danger-hover: #a03232; --btz-danger-bg: #2b1513; --btz-success: #a6d4a8; --btz-success-bg: #14251a; --btz-warning: #e8c468; --btz-warning-hover: #d9b355; --btz-warning-bg: #2a2113; --btz-warning-bg-hover: #352a18; --btz-focus: #8ab4f8; --btz-overlay-hover: rgba(255, 255, 255, 0.08); --btz-shadow: rgba(0, 0, 0, 0.6); --btz-band-bg: #17191c; --btz-band-text: #e8eaed; --btz-band-muted: #9aa0a6; --btz-band-border: #2a2e33; --btz-icon-chip: #f1f3f4; } /* ============================================================================= ACTIVACION — ENCENDIDA, PERO GATEADA (2026-08-18) ----------------------------------------------------------------------------- El tema esta operativo: html/body consumen los tokens y el navegador pinta sus propios controles a juego. Pero SOLO lo recibe quien lleve data-theme puesto a mano, porque el bloque de preferencia del sistema esta gateado a [data-theme="auto"] (ver arriba). Motivo: las plantillas todavia tienen colores en linea. Media migracion no da una pagina inconsistente, da una pagina ILEGIBLE — texto claro, ya invertido por el token, sobre una tarjeta blanca que sigue hardcodeada. Comprobado en /es/app/gmail el 2026-08-18. Para probarlo: document.documentElement.setAttribute('data-theme','dark') ============================================================================= */ html, body { background-color: var(--btz-bg); color: var(--btz-text); } /* Le dice al navegador que pinte de oscuro sus propios controles: barras de scroll, campos de formulario nativos, desplegables. Sin esto quedan barras blancas incrustadas en una pagina oscura y parece un error de la web. */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; }