/* ============================================================================ P4S — TOKENS DE MARCA. FUENTE UNICA DE COLOR DE TODA LA PLATAFORMA. Antes existian dos sistemas paralelos con los mismos colores escritos dos veces: --auth-* (login.css) y --p4s-* (inicioV2.jsp). Habian divergido. Aqui el hex se escribe UNA vez; todo lo demas son referencias. Consumidores: - App Java : layoutBase.jsp (auth) y privateLayout.jsp (dashboard) - WordPress : el child theme de BeTheme lo importa (ENA-2.4) REGLA: no escribir hex de marca fuera de este archivo. ========================================================================== MECANISMO DE TEMA — UN SOLO SELECTOR: oscuro <=> body.dark No hay @media aqui. La clase la pone `component/tema.jsp`, incluido lo primero del por cada layout que sepa pintarse oscuro; ese fragmento es el unico sitio donde se decide el tema (sigue a prefers-color-scheme, o a si se quiere forzar). Ref HU-1.5 (#37). Antes habia dos activadores —`body.theme-os` con @media para las paginas publicas y `body.dark` para el dashboard— y este archivo tenia que repetir ENTERO el bloque de tokens oscuros, uno por activador. Ya habian empezado a divergir. Con un unico selector el bloque se escribe una vez. Un @media global no sirve: dejaria los tokens en oscuro mientras el marco del template Cork (que solo entiende `body.dark`) se queda claro, y la pagina saldria mitad y mitad. Ese bug ya ocurrio con un background fijo en privateLayout.jsp. ========================================================================== */ /* ----- 1. Paleta cruda ------------------------------------------------------ El teal se muestreo a pixel del logo oficial (assets_p4s_new/img/cuadrado_p4s.png: relleno #0b4865, sombra #00405f). Ese tono oscuro funciona sobre tarjeta blanca, pero se funde con la tarjeta casi negra del tema oscuro -> ahi se usa una variante mas viva del MISMO matiz (misma familia teal/cyan, mas luminosidad) para tener contraste real. */ :root { /* Marca */ --p4s-brand-700: #083145; /* active / press, tema claro */ --p4s-brand-600: #0b4865; /* acento base, tema claro <- color del logo */ --p4s-brand-500: #116288; /* hover, tema claro */ --p4s-sky-500: #0c8dca; /* acento base, tema oscuro */ --p4s-sky-400: #0fa8f0; /* hover, tema oscuro */ /* Teales intermedios: SOLO para rellenos solidos en tema oscuro (ver bloque 3b). No son acentos de texto; no usarlos como color de enlace. */ --p4s-sky-600: #0a7bb0; /* hover de relleno, tema oscuro */ --p4s-sky-650: #0a76a8; /* relleno base, tema oscuro */ --p4s-sky-700: #0a6f9e; /* active de relleno, tema oscuro */ /* Neutros oscuros (fondos y superficies del template Cork) */ --p4s-ink-900: #060818; /* fondo de pagina, oscuro */ --p4s-ink-800: #0e1726; /* tarjeta, oscuro · texto, claro */ --p4s-ink-700: #17233a; /* superficie alterna, oscuro */ --p4s-ink-600: #191e3a; /* borde, oscuro */ --p4s-ink-500: #1b2e4b; /* campo de formulario, oscuro */ --p4s-ink-400: #54688f; /* borde de campo, oscuro (3.21:1 con la tarjeta) */ /* Neutros claros */ --p4s-slate-600: #3b3f5c; /* texto secundario, claro */ --p4s-slate-500: #646d7c; /* atenuado, tema claro */ --p4s-slate-450: #828fa6; /* borde de campo, tema claro */ --p4s-slate-400: #888ea8; /* grafico atenuado (chevron, iconos): 3:1 en ambos temas */ --p4s-slate-350: #949ab2; /* atenuado, tema oscuro */ --p4s-slate-300: #bfc9d4; /* texto secundario oscuro */ --p4s-slate-200: #e0e6ed; /* borde claro · texto oscuro */ --p4s-paper-alt: #f8f9fa; /* superficie alterna, claro */ --p4s-paper: #f1f2f3; /* fondo de pagina, claro */ --p4s-white: #ffffff; /* tarjeta y campo, claro */ /* Rojo semantico. Como el atenuado, NO puede ser el mismo hex en los dos temas: #e7515a da 4.89:1 sobre la tarjeta casi negra pero solo 3.67:1 sobre la blanca. El tono claro es el mismo rojo, un paso mas oscuro. */ --p4s-red-500: #e7515a; /* danger de TEXTO, tema oscuro */ --p4s-red-600: #d93a44; /* danger de TEXTO, tema claro; y relleno claro */ /* Relleno destructivo en tema oscuro. Mismo problema que el acento (bloque 3b): --p4s-red-500 se lee bien SOBRE la tarjeta pero con texto blanco ENCIMA da 3.67:1, por debajo de AA. Este da blanco 5.04 y tarjeta 3.57, los mismos numeros que --p4s-dark-accent-fill. Ref ENA-1.18 */ --p4s-red-650: #cc3640; /* relleno danger, tema oscuro */ /* Texto sobre superficies de marca (hero, botones primarios): la banda teal es igual en ambos temas, asi que su texto tambien. No conmuta. */ --p4s-on-brand: #ffffff; /* Halos de foco: no son solidos, van con alfa */ --p4s-glow-light: rgba(11, 72, 101, 0.18); --p4s-glow-dark: rgba(12, 141, 202, 0.28); --p4s-divider-dark: rgba(255, 255, 255, 0.06); /* Rojo con alfa: fondo de alerta y halo de campo invalido. Siguen al rojo solido de su tema, no al reves (antes eran rgba(231,81,90,..) escritos a mano en login.css, es decir el rojo oscuro incluso en tema claro). */ --p4s-red-tint-light: rgba(217, 58, 68, 0.10); --p4s-red-edge-light: rgba(217, 58, 68, 0.32); --p4s-red-ring-light: rgba(217, 58, 68, 0.18); --p4s-red-tint-dark: rgba(231, 81, 90, 0.12); --p4s-red-edge-dark: rgba(231, 81, 90, 0.35); --p4s-red-ring-dark: rgba(231, 81, 90, 0.20); /* Ambar y verde semanticos. Mismo problema y misma solucion que el rojo: el tono vivo de Cork se lee sobre la tarjeta casi negra pero NO sobre la blanca, asi que cada tema lleva su paso. Contrastes medidos: #e2a03f sobre tarjeta #0e1726 -> 7.98:1 #a5670f sobre blanco -> 4.62:1 #8dbf42 sobre tarjeta #0e1726 -> 8.26:1 #2a8549 sobre blanco -> 4.62:1 Los dos claros pasan AA (4.5) por poco a proposito: son el paso mas VIVO que lo cumple, para no acabar con un marron y un verde apagados. El ambar mantiene el matiz de Cork; el verde no, porque #8dbf42 es amarillento y al oscurecerlo hasta AA se confunde con el ambar -- se usa un verde medio, que es lo que "correcto" tiene que parecer. No hay familia `info`: ninguna vista usa `alert-info`. Tampoco `-fill` ni `-ring` para estas dos, que en `danger` existen porque hay botones destructivos y campos invalidos. Se anaden cuando algo los pida, no antes. Ref BUG-1.29 (#177). */ --p4s-amber-500: #e2a03f; /* warning de TEXTO, tema oscuro (el de Cork) */ --p4s-amber-600: #a5670f; /* warning de TEXTO, tema claro */ --p4s-green-500: #8dbf42; /* success de TEXTO, tema oscuro (el de Cork) */ --p4s-green-600: #2a8549; /* success de TEXTO, tema claro */ --p4s-amber-tint-light: rgba(165, 103, 15, 0.10); --p4s-amber-edge-light: rgba(165, 103, 15, 0.32); --p4s-amber-tint-dark: rgba(226, 160, 63, 0.12); --p4s-amber-edge-dark: rgba(226, 160, 63, 0.35); --p4s-green-tint-light: rgba(42, 133, 73, 0.10); --p4s-green-edge-light: rgba(42, 133, 73, 0.32); --p4s-green-tint-dark: rgba(141, 191, 66, 0.12); --p4s-green-edge-dark: rgba(141, 191, 66, 0.35); /* Sombra de elevacion de tarjeta: dos capas, CON desplazamiento en Y. Cork trae `box-shadow: 0 0 40px 0 rgba(...,.06)` en sus propias hojas -- sin offset, es un halo, no una sombra, y a esa opacidad casi no se ve: la tarjeta queda visualmente pegada a la pagina en vez de flotar sobre ella. Tenida del mismo ink-900 del fondo de pagina, no negro puro, para que la sombra "pertenezca" a la paleta. Ref ENA-1.26. */ --p4s-shadow-card-light: 0 4px 16px rgba(6, 8, 24, 0.10), 0 1px 3px rgba(6, 8, 24, 0.08); --p4s-shadow-card-dark: 0 4px 20px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); } /* ----- 2. Tokens semanticos: TEMA CLARO (base) ----------------------------- */ :root { --p4s-bg: var(--p4s-paper); --p4s-surface: var(--p4s-white); --p4s-surface-alt: var(--p4s-paper-alt); --p4s-border: var(--p4s-slate-200); --p4s-divider: var(--p4s-slate-200); --p4s-field: var(--p4s-white); --p4s-field-border: var(--p4s-slate-450); --p4s-accent: var(--p4s-brand-600); --p4s-accent-light: var(--p4s-brand-500); --p4s-accent-deep: var(--p4s-brand-700); --p4s-accent-glow: var(--p4s-glow-light); /* Relleno de controles primarios. En tema claro coincide con el acento; existe como rol aparte porque en oscuro NO puede coincidir (bloque 3b). */ --p4s-accent-fill: var(--p4s-brand-600); --p4s-accent-fill-hover: var(--p4s-brand-500); --p4s-accent-fill-active: var(--p4s-brand-700); --p4s-on-accent-fill: var(--p4s-on-brand); --p4s-text: var(--p4s-ink-800); --p4s-text-soft: var(--p4s-slate-600); --p4s-muted: var(--p4s-slate-500); --p4s-danger: var(--p4s-red-600); /* Relleno de un boton destructivo. En claro coincide con el danger de texto; en oscuro NO puede, igual que pasa con el acento. */ --p4s-danger-fill: var(--p4s-red-600); --p4s-on-danger-fill: var(--p4s-on-brand); --p4s-danger-tint: var(--p4s-red-tint-light); --p4s-danger-edge: var(--p4s-red-edge-light); --p4s-danger-ring: var(--p4s-red-ring-light); --p4s-warning: var(--p4s-amber-600); --p4s-warning-tint: var(--p4s-amber-tint-light); --p4s-warning-edge: var(--p4s-amber-edge-light); --p4s-success: var(--p4s-green-600); --p4s-success-tint: var(--p4s-green-tint-light); --p4s-success-edge: var(--p4s-green-edge-light); --p4s-hero-from: var(--p4s-sky-500); --p4s-hero-to: var(--p4s-brand-500); --p4s-shadow-card: var(--p4s-shadow-card-light); } /* ----- 3. Tokens semanticos: TEMA OSCURO ----------------------------------- Se declara en :root para que el bloque de activadores solo tenga que reasignar, sin repetir un solo hex. */ :root { --p4s-dark-bg: var(--p4s-ink-900); --p4s-dark-surface: var(--p4s-ink-800); --p4s-dark-surface-alt: var(--p4s-ink-700); --p4s-dark-border: var(--p4s-ink-600); --p4s-dark-divider: var(--p4s-divider-dark); --p4s-dark-field: var(--p4s-ink-500); /* Antes era el MISMO hex que el relleno: el campo no tenia borde visible (1.32:1 contra la tarjeta). Un campo de formulario es un componente de interfaz y su limite necesita 3:1. */ --p4s-dark-field-border: var(--p4s-ink-400); --p4s-dark-accent: var(--p4s-sky-500); --p4s-dark-accent-light: var(--p4s-sky-400); --p4s-dark-accent-deep: var(--p4s-brand-600); --p4s-dark-accent-glow: var(--p4s-glow-dark); /* ----- 3b. Acento de TEXTO vs acento de RELLENO, en tema oscuro --------- Son dos roles opuestos y por eso no pueden compartir hex: texto/enlace -> se lee SOBRE la tarjeta casi negra: cuanto mas claro, mejor. #0c8dca sobre #0e1726 = 4.86:1 OK relleno -> lleva texto BLANCO ENCIMA: cuanto mas claro, peor. #0c8dca con blanco = 3.70:1 <- fallaba AA El relleno baja al mismo teal un par de pasos: mantiene >=4.5:1 con el texto blanco y >=3:1 contra la tarjeta, asi el boton sigue leyendose como una superficie distinta. Medido en navegador, no estimado. */ --p4s-dark-accent-fill: var(--p4s-sky-650); /* blanco 5.04 · tarjeta 3.57 */ --p4s-dark-accent-fill-hover: var(--p4s-sky-600); /* blanco 4.69 · tarjeta 3.83 */ --p4s-dark-accent-fill-active: var(--p4s-sky-700); /* blanco 5.55 · tarjeta 3.23 */ --p4s-dark-text: var(--p4s-slate-200); --p4s-dark-text-soft: var(--p4s-slate-300); --p4s-dark-muted: var(--p4s-slate-350); --p4s-dark-danger: var(--p4s-red-500); --p4s-dark-danger-fill: var(--p4s-red-650); --p4s-dark-danger-tint: var(--p4s-red-tint-dark); --p4s-dark-danger-edge: var(--p4s-red-edge-dark); --p4s-dark-danger-ring: var(--p4s-red-ring-dark); --p4s-dark-warning: var(--p4s-amber-500); --p4s-dark-warning-tint: var(--p4s-amber-tint-dark); --p4s-dark-warning-edge: var(--p4s-amber-edge-dark); --p4s-dark-success: var(--p4s-green-500); --p4s-dark-success-tint: var(--p4s-green-tint-dark); --p4s-dark-success-edge: var(--p4s-green-edge-dark); --p4s-dark-hero-to: var(--p4s-brand-600); } /* ----- 4. Activador de tema oscuro ----------------------------------------- Uno, y solo uno. La escotilla manual tambien acaba aqui: `component/tema.jsp` la traduce a esta misma clase, para que el CSS no tenga que conocer dos formas de decir lo mismo. */ body.dark { --p4s-bg: var(--p4s-dark-bg); --p4s-surface: var(--p4s-dark-surface); --p4s-surface-alt: var(--p4s-dark-surface-alt); --p4s-border: var(--p4s-dark-border); --p4s-divider: var(--p4s-dark-divider); --p4s-field: var(--p4s-dark-field); --p4s-field-border: var(--p4s-dark-field-border); --p4s-accent: var(--p4s-dark-accent); --p4s-accent-light: var(--p4s-dark-accent-light); --p4s-accent-deep: var(--p4s-dark-accent-deep); --p4s-accent-glow: var(--p4s-dark-accent-glow); --p4s-accent-fill: var(--p4s-dark-accent-fill); --p4s-accent-fill-hover: var(--p4s-dark-accent-fill-hover); --p4s-accent-fill-active: var(--p4s-dark-accent-fill-active); --p4s-text: var(--p4s-dark-text); --p4s-text-soft: var(--p4s-dark-text-soft); --p4s-muted: var(--p4s-dark-muted); --p4s-danger: var(--p4s-dark-danger); --p4s-danger-fill: var(--p4s-dark-danger-fill); --p4s-danger-tint: var(--p4s-dark-danger-tint); --p4s-danger-edge: var(--p4s-dark-danger-edge); --p4s-danger-ring: var(--p4s-dark-danger-ring); --p4s-warning: var(--p4s-dark-warning); --p4s-warning-tint: var(--p4s-dark-warning-tint); --p4s-warning-edge: var(--p4s-dark-warning-edge); --p4s-success: var(--p4s-dark-success); --p4s-success-tint: var(--p4s-dark-success-tint); --p4s-success-edge: var(--p4s-dark-success-edge); --p4s-hero-to: var(--p4s-dark-hero-to); --p4s-shadow-card: var(--p4s-shadow-card-dark); } /* ----- 5. Alias de compatibilidad ------------------------------------------ login.css tiene 542 lineas escritas contra --auth-*. En vez de reescribirlas (y arriesgar una regresion visual en el flujo de login), los nombres viejos pasan a ser punteros a los tokens unificados. Van en `body` a proposito: el activador del bloque 4 tambien aplica a `body`, asi que el alias resuelve el valor YA conmutado. Si estuvieran en `:root` se quedarian congelados en el valor claro. Deuda: son un puente, no el destino. Al migrar login.css a --p4s-* este bloque desaparece. */ body { --auth-bg: var(--p4s-bg); --auth-card: var(--p4s-surface); --auth-card-border: var(--p4s-border); --auth-field: var(--p4s-field); --auth-field-border: var(--p4s-field-border); --auth-primary: var(--p4s-accent); --auth-primary-light: var(--p4s-accent-light); --auth-primary-deep: var(--p4s-accent-deep); --auth-primary-glow: var(--p4s-accent-glow); /* Relleno del boton primario: NO es --auth-primary. Ver bloque 3b. */ --auth-fill: var(--p4s-accent-fill); --auth-fill-hover: var(--p4s-accent-fill-hover); --auth-fill-active: var(--p4s-accent-fill-active); --auth-on-fill: var(--p4s-on-accent-fill); --auth-text: var(--p4s-text); --auth-text-soft: var(--p4s-text-soft); --auth-muted: var(--p4s-muted); --auth-danger: var(--p4s-danger); --auth-danger-tint: var(--p4s-danger-tint); --auth-danger-edge: var(--p4s-danger-edge); --auth-danger-ring: var(--p4s-danger-ring); --auth-divider: var(--p4s-divider); }