/* ========================================================================= QUOMYA — APARIENCIA (SISTEMA / CLARO / OSCURO) Ola: S4.11A (arquitectura de información + fundamento de tema) Depende de: qy-tokens-v1.css (debe cargarse DESPUÉS que él) ------------------------------------------------------------------------ QUÉ HAY AQUÍ Y QUÉ NO ------------------------------------------------------------------------ Los VALORES del tema claro NO están en este archivo: viven en la capa L4 de `qy-tokens-v1.css`, porque el contrato semántico `--qy-color-*` debe declararse en un único archivo canónico -- invariante de S4.1, vigilada por `test-ui-redesign-s4-1-token-foundation-v1.mjs`. Un tema claro es parte de la paleta, no una paleta aparte. Lo que queda aquí es la MECÁNICA no cromática que acompaña a esa capa y que no declara ningún token: - corrección de `color-scheme` en los ámbitos oscuros heredados; - pintado de `html` / `body`, que resuelve el sobrescroll; - transición de cambio de tema. Por eso aquí no hay un solo selector de pantalla. ------------------------------------------------------------------------ MECANISMO: DOS ATRIBUTOS, UNA RESPONSABILIDAD CADA UNO ------------------------------------------------------------------------ data-qy-appearance system | light | dark La PREFERENCIA del usuario. Es lo que se guarda y lo que marca el control de Ajustes. El CSS no la usa para pintar. data-qy-appearance-resolved light | dark El tema EFECTIVO. Lo calcula `appearance.js` (y, antes del primer pintado, `appearanceBoot.js`) resolviendo `system` contra `prefers-color-scheme`. Es el único que pinta. La alternativa era escribir el bloque claro dos veces: una para `[data-qy-appearance="light"]` y otra dentro de `@media (prefers-color-scheme: light)` para `[data-qy-appearance="system"]`. Dos copias de la misma paleta divergen a la primera corrección de contraste. Resolviendo en JavaScript hay UNA declaración de cada valor. El coste de esa decisión es real y está asumido: sin JavaScript no hay tema claro. Como el degradado es hacia el contrato oscuro que la aplicación ya servía, un fallo del script deja exactamente el producto de S4.10, no una pantalla rota. La tabla de contrastes MEDIDOS del tema claro está al final de este archivo, junto a la mecánica, porque es donde se consulta al depurar una pantalla clara. La capa L4 la referencia desde `qy-tokens-v1.css`. ========================================================================= */ /* ========================================================================= ÁMBITOS OSCUROS HEREDADOS `qy-tokens-v1.css` declara `color-scheme: dark` dentro del bloque L3 (`.qy-theme` y `:root[data-qy-theme="stitch"]`). Ese bloque sigue siendo correcto -- es el que reapunta los alias heredados -- pero su declaración de `color-scheme` es del tema oscuro y en claro dejaría los controles nativos (barras de desplazamiento, selectores de fecha, autocompletado) pintados en oscuro dentro de una pantalla clara. Se corrige con la especificidad justa y solo para eso. ========================================================================= */ :root[data-qy-appearance-resolved="light"] .qy-theme, :root[data-qy-appearance-resolved="light"][data-qy-theme="stitch"] { color-scheme: light; } /* ========================================================================= PINTADO DE LA PÁGINA Hasta S4.11A el color de la página lo ponía `.qy-shell`, y `html` / `body` conservaban el fondo claro heredado de `styles.css`. Eso funciona mientras el armazón cubra el viewport, pero NO cubre el rebote de desplazamiento: en iOS y en Android el sobrescroll destapa el fondo del documento, y en modo oscuro asomaba una banda blanca por arriba y por abajo. Se pinta el FONDO únicamente. El color de texto no se toca aquí a propósito: cada superficie ya declara el suyo, y heredar tinta clara en `body` volvería ilegible cualquier overlay heredado que aún pinte su fondo en claro (guardián de beta, tutorial legacy). ========================================================================= */ :root[data-qy-appearance-resolved] { background-color: var(--qy-color-bg); } :root[data-qy-appearance-resolved] body { background-color: var(--qy-color-bg); } /* ========================================================================= TRANSICIÓN DE TEMA Solo color de fondo, borde y texto, y solo en las superficies estructurales. No se anima `box-shadow` -- repintarla en cada fotograma sobre una pantalla entera es el camino corto a un cambio de tema que da tirones en móvil. 150 ms: por debajo se percibe como un parpadeo; por encima, como un retardo. ========================================================================= */ :root[data-qy-appearance-resolved].qy-appearance-animating, :root[data-qy-appearance-resolved].qy-appearance-animating body, :root[data-qy-appearance-resolved].qy-appearance-animating .qy-shell, :root[data-qy-appearance-resolved].qy-appearance-animating .qy-theme, :root[data-qy-appearance-resolved].qy-appearance-animating .card, :root[data-qy-appearance-resolved].qy-appearance-animating .settings-panel { transition: background-color 150ms var(--qy-motion-ease), border-color 150ms var(--qy-motion-ease), color 150ms var(--qy-motion-ease); } @media (prefers-reduced-motion: reduce) { :root[data-qy-appearance-resolved].qy-appearance-animating, :root[data-qy-appearance-resolved].qy-appearance-animating body, :root[data-qy-appearance-resolved].qy-appearance-animating .qy-shell, :root[data-qy-appearance-resolved].qy-appearance-animating .qy-theme, :root[data-qy-appearance-resolved].qy-appearance-animating .card, :root[data-qy-appearance-resolved].qy-appearance-animating .settings-panel { transition: none; } } /* ========================================================================= ACCESIBILIDAD — TEMA CLARO, MEDIDO NO AFIRMADO Ratios calculados con la fórmula de WCAG 2.x contra la rampa clara completa (surface-1 #FFFFFF / surface-2 #F2F5F7 / bg #EFF3F5 / surface-3 #E8EDF0, que es la más apagada y por tanto el peor caso). s1 s2 bg s3 veredicto text-primary #0B1D29 17.19 16.42 16.24 15.35 AA / AAA text-secondary#4A5C6A 6.93 6.63 6.55 6.20 AA text-tertiary #556673 5.94 5.68 5.62 5.31 AA brand-text #046B5F 6.41 6.13 6.06 5.73 AA collected-text#047857 5.48 5.24 5.19 4.90 AA pending-text #9A5B00 5.43 5.19 5.13 4.85 AA closure-text #1D4ED8 6.70 6.41 6.34 5.99 AA cancelled-text#B91C1C 6.47 6.19 6.12 5.79 AA border-inter. #5F7280 4.99 4.77 4.72 4.46 >= 3:1 (1.4.11) focus ring #046B5F 6.41 sobre s1 >= 3:1 (1.4.11) text-on-brand #04241F 7.07 sobre el ancla #12BFA6 AA DECISIONES Y SU MOTIVO: ancla de marca #12BFA6 SIN AJUSTAR. Mide 2.33:1 sobre blanco, así que NUNCA es texto en claro; es relleno, icono, borde y marca. Su texto es -brand-text. anclas de estado SIN AJUSTAR, por la misma razón y con el mismo reparto de roles que en oscuro. disabled-text #8A99A5 2.9:1. Es deliberado: 1.4.3 exime el texto de controles deshabilitados, y subirlo haría que un control apagado no pareciera apagado. El estado nunca se comunica solo con color: los controles llevan además `disabled`. ========================================================================= */