/* --------------------------------------------------------------------------- Capa semantica — design system v5 "Acero 3.1". theme.json publica la paleta cruda como --wp--preset--color--*, que son valores fijos. Los componentes no los usan directamente: usan los nombres semanticos de aqui, que son los que cambian entre claro y oscuro. Asi una sola hoja de estilos sirve los dos temas y ningun componente sabe en cual se esta pintando. v5 anade el vocabulario de la interfaz biselada: --eg-chrome (la cara de una ventana o de un boton), --eg-field (el fondo hundido de un campo), --eg-frame (el marco exterior) y el par --eg-bevel-light / --eg-bevel-dark, que son la luz de arriba-izquierda y la sombra de abajo-derecha. Los tres biseles compuestos NO se declaran aqui: viven en theme.json, en settings.custom, para que el Editor de sitios los conozca. Aqui solo se les pone un alias corto. --------------------------------------------------------------------------- */ :root { /* Oscuro es la base: el diseno lo declara por defecto. */ /* Los tres que theme.json usa en `styles`: fondo, texto y enlace del documento. Apuntan a un preset SEMANTICO -surface, text, link- y no al color crudo, porque el modo claro no cambia estos alias: cambia el preset de debajo (mas abajo, en los dos bloques de tema claro). Por que da igual y por que no. WordPress emite `body { background-color: var(--wp--preset--color--surface) }` desde theme.json, y eso solo sigue al conmutador si lo que cambia es la VARIABLE DE PRESET. Cuando `styles` apuntaba a `var(--eg-surface)` -un nombre que theme.json no conoce- el panel de Estilos no sabia que color habia puesto, y la primera vez que alguien tocase el fondo desde ahi se escribia un hex fijo en los estilos globales del usuario, que gana a esta hoja: el sitio se quedaba en un solo modo sin que el conmutador diera ninguna senal de haberse roto. */ --eg-surface: var(--wp--preset--color--surface); /* el escritorio */ --eg-surface-elevated: var(--wp--preset--color--ink-800); --eg-surface-mid: var(--wp--preset--color--ink-700); --eg-surface-3: var(--wp--preset--color--ink-700); /* pestaña pulsada */ --eg-chrome: var(--wp--preset--color--ink-800); /* cara de ventana y de boton */ --eg-field: var(--wp--preset--color--ink-900); /* fondo de campo hundido */ --eg-frame: var(--wp--preset--color--ink-600); /* marco exterior */ --eg-border: var(--wp--preset--color--ink-600); --eg-hairline: var(--wp--preset--color--ink-hairline); --eg-text: var(--wp--preset--color--text); --eg-text-dim: var(--wp--preset--color--text-dim); --eg-text-mute: var(--wp--preset--color--text-mute-d); --eg-link: var(--wp--preset--color--link); /* El bisel. Dos colores por tema; el resto es composicion. */ --eg-bevel-light: var(--wp--preset--color--bevel-light-ink-900); --eg-bevel-dark: var(--wp--preset--color--bevel-dark-ink-900); /* Barra de titulo. Activa en ambar, inactiva en gris: es lo que distingue la ventana que importa de las que solo acompanan. */ --eg-titlebar: var(--wp--preset--color--amber); --eg-titlebar-on: var(--wp--preset--color--ink-900); --eg-titlebar-off: var(--wp--preset--color--ink-700); --eg-titlebar-off-on: var(--wp--preset--color--text-dim); /* El ambar como TEXTO solo sobre oscuro: sobre papel no llega a AA. */ --eg-accent-text: var(--wp--preset--color--amber); --eg-accent: var(--wp--preset--color--amber); --eg-on-accent: var(--wp--preset--color--ink-900); --eg-border-width: 1px; /* 2px en oscuro pesa demasiado */ --eg-shadow: none; /* en oscuro separa el borde, no la sombra */ /* Trazabilidad. Sobre grafito valen los colores de marca; sobre papel no llegan a AA -el verde da 2,19:1 y el ambar 1,87:1-, asi que el tema claro usa las variantes oscurecidas. El significado no cambia, solo el tono. */ --eg-trace-verified: var(--wp--preset--color--verified); --eg-trace-attributed: var(--wp--preset--color--attributed); --eg-trace-unsourced: var(--wp--preset--color--unsourced); /* El rojo de error como TEXTO no es el mismo que el del punto. Un punto se distingue; un mensaje se lee. El rojo de trazabilidad sobre el chrome de una ventana da 4.4974:1, tres milesimas por debajo de AA: lo caza la formula, no el ojo. El valor vive en theme.json, como todos. */ --eg-error-text: var(--wp--preset--color--unsourced-text); /* Alias de los biseles de theme.json. Se resuelven contra los dos colores de arriba, asi que cambian de tema solos sin duplicar la declaracion. */ --eg-bevel-out: var(--wp--custom--bevel-out); --eg-bevel-in: var(--wp--custom--bevel-in); --eg-bevel-sunk: var(--wp--custom--bevel-sunk); /* v5 retira el movimiento del hover: un boton de 1992 no se desplaza al pasar por encima, se hunde al pulsarlo. --eg-dur-1 a 0ms no es una optimizacion, es el lenguaje. */ --eg-dur-1: 0ms; --eg-dur-2: 100ms; --eg-ease: linear; } /* El tema claro se declara dos veces a proposito: una para quien prefiere claro en el sistema y no ha elegido a mano, y otra para quien lo ha elegido. CSS no deja reutilizar un bloque de declaraciones sin duplicarlo. Esta duplicacion es tambien lo que hace posible el conmutador de dos etiquetas: sin eleccion guardada no hay atributo data-theme y manda el sistema, que es lo que pidio el usuario -"dos, pero que el auto sea lo que sale al entrar"-. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { /* Se reasignan los tres presets semanticos, no los alias: asi cambia tambien el `body{background-color:var(--wp--preset--color--surface)}` que emite theme.json, sin pelear con el por especificidad. Los presets los declara WordPress en `:root`, el mismo elemento que lleva [data-theme], asi que este bloque gana por especificidad. */ --wp--preset--color--surface: var(--wp--preset--color--paper); --eg-surface-elevated: var(--wp--preset--color--paper-alt); --eg-surface-mid: var(--wp--preset--color--paper-alt); --eg-surface-3: var(--wp--preset--color--paper-mid); --eg-chrome: var(--wp--preset--color--paper-alt); --eg-field: var(--wp--preset--color--paper-field); --eg-frame: var(--wp--preset--color--text-dark); --eg-border: var(--wp--preset--color--rule); --eg-hairline: var(--wp--preset--color--rule); --wp--preset--color--text: var(--wp--preset--color--text-dark); --eg-text-dim: var(--wp--preset--color--text-mute); --eg-text-mute: var(--wp--preset--color--text-faint); --wp--preset--color--link: var(--wp--preset--color--violet); --eg-bevel-light: var(--wp--preset--color--bevel-light-ink); --eg-bevel-dark: var(--wp--preset--color--bevel-dark-ink); --eg-titlebar-off: var(--wp--preset--color--titlebar-off-ink); --eg-titlebar-off-on: var(--wp--preset--color--text-mute); --eg-accent-text: var(--wp--preset--color--amber-ink); --eg-border-width: 2px; --eg-shadow: 2px 2px 0 var(--wp--preset--color--ink-900); --eg-trace-verified: var(--wp--preset--color--verified-ink); --eg-trace-attributed: var(--wp--preset--color--amber-ink); --eg-trace-unsourced: var(--wp--preset--color--unsourced-ink); --eg-error-text: var(--wp--preset--color--unsourced-ink); } } :root[data-theme="light"] { --wp--preset--color--surface: var(--wp--preset--color--paper); --eg-surface-elevated: var(--wp--preset--color--paper-alt); --eg-surface-mid: var(--wp--preset--color--paper-alt); --eg-surface-3: var(--wp--preset--color--paper-mid); --eg-chrome: var(--wp--preset--color--paper-alt); --eg-field: var(--wp--preset--color--paper-field); --eg-frame: var(--wp--preset--color--text-dark); --eg-border: var(--wp--preset--color--rule); --eg-hairline: var(--wp--preset--color--rule); --wp--preset--color--text: var(--wp--preset--color--text-dark); --eg-text-dim: var(--wp--preset--color--text-mute); --eg-text-mute: var(--wp--preset--color--text-faint); --wp--preset--color--link: var(--wp--preset--color--violet); --eg-bevel-light: var(--wp--preset--color--bevel-light-ink); --eg-bevel-dark: var(--wp--preset--color--bevel-dark-ink); --eg-titlebar-off: var(--wp--preset--color--titlebar-off-ink); --eg-titlebar-off-on: var(--wp--preset--color--text-mute); --eg-accent-text: var(--wp--preset--color--amber-ink); --eg-border-width: 2px; --eg-shadow: 2px 2px 0 var(--wp--preset--color--ink-900); --eg-trace-verified: var(--wp--preset--color--verified-ink); --eg-trace-attributed: var(--wp--preset--color--amber-ink); --eg-trace-unsourced: var(--wp--preset--color--unsourced-ink); --eg-error-text: var(--wp--preset--color--unsourced-ink); } html { background: var(--eg-surface); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } } /* El fondo y el color del los pone theme.json -`styles.color`-, que es donde le corresponde vivir a eso en un tema de bloques. Aqui habia una copia que decia lo mismo y ganaba por orden de carga, y mientras estuvo puesta el sitio se pintaba bien aunque theme.json dijera cualquier cosa: al romper el conmutador a proposito, dos de las tres comprobaciones nuevas del portero siguieron en verde porque esta linea tapaba el fallo. Una capa de respaldo que nadie pidio y que esconde el fallo de la capa buena. El si se queda (justo arriba): es lo que pinta la zona de rebote al hacer scroll mas alla del documento, que no es el . */ /* Radio 0. Siempre. */ * { border-radius: 0 !important; } /* Foco visible siempre, con el violeta como outline. v5 propone un rectangulo punteado de 1px al estilo de 1992. Se usa, pero SOLO dentro de los controles biselados -boton, pestaña, casilla, barra de menus-, donde el bisel ya delimita la pieza y el punteado se lee. Como regla general del documento se queda el violeta de 2px: un punteado de 1px en currentColor sobre un parrafo largo es exactamente el foco invisible que la restriccion 5 del encargo prohibe. */ :focus-visible { outline: 2px solid var(--eg-link); outline-offset: 3px; } /* Nada de movimiento que no se pueda parar. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* El atributo hidden tiene que ganar SIEMPRE. El navegador lo aplica con [hidden]{display:none} en su hoja de usuario, que pierde contra cualquier `display` de autor: `.eg-ranking__row{display:grid}` volvia a enseñar las 82 filas aunque estuvieran marcadas como ocultas, y la pestaña Top 10 no ocultaba nada. Es la unica regla del tema que lleva !important, y lo lleva por eso. */ [hidden] { display: none !important; } /* El pie se queda abajo en las paginas cortas. Sin esto, en el 404 -que es texto y un boton- la banda de señalizacion queda flotando a media pantalla con un hueco vacio debajo, y el cierre de pagina deja de cerrar nada. */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; } .wp-site-blocks > main { flex: 1 0 auto; }