/* * Las consolas de Keycloak: el puente a PatternFly 5 * ═══════════════════════════════════════════════════ * * Las dos consolas de Keycloak —la de la cuenta y la de administración— son SPA * de React sobre PatternFly 5. Cada una trae su propio bundle de CSS de más de * un megabyte, así que perseguir componente por componente sería infinito y * quedaría desalineado con la siguiente actualización de Keycloak. * * PatternFly está completamente tokenizado: 234 variables globales de las que * cuelga todo lo demás. Así que este archivo no estiliza componentes: **redefine * las variables de PatternFly para que apunten a las nuestras**. Un solo mapeo, * y los cientos de componentes de las dos consolas se alinean solos. * * Requiere que `tokens.css` se haya cargado antes: aquí solo hay referencias a * `--pasa-*`, ni un color ni un tamaño escrito a mano. * * ── Por qué las variantes base y no las semánticas ───────────────────────── * * PatternFly define cada global dos veces: la semántica (`--Color--100`) y las * variantes por polaridad de superficie (`--Color--dark-100` para tinta oscura * sobre claro, `--Color--light-100` para tinta clara sobre oscuro). * * Y muchos componentes **re-declaran la semántica apuntando a la variante**: * * .pf-v5-c-table { --pf-v5-global--Color--100: var(--…--Color--dark-100) } * .pf-v5-c-masthead { --pf-v5-global--Color--100: var(--…--Color--light-100) } * * O sea que pisar solo `--Color--100` no alcanza a las tablas, los formularios, * los menús ni al masthead: esos vuelven a resolver desde la variante. Por eso * aquí se mapean **las dos**, y es la diferencia entre que el mapeo funcione y * que funcione a medias. * * ── El modo oscuro: un mapeo, más cuatro variables que solo existen ahí ──── * * PatternFly hace su modo oscuro invirtiendo la paleta base bajo * `:where(.pf-v5-theme-dark)`. Nosotros no necesitamos duplicar nada: los * `--pasa-*` ya cambian por modo en `tokens.css`, así que el mapeo se escribe * **una vez** y sirve a los dos. * * Con una salvedad que se descubrió mirando la consola en oscuro. Ese bloque * también re-declara variables **a nivel de componente**, y algunas apuntan a * globales que **no existen en el modo claro** y que por lo tanto no aparecen si * uno solo lee el `:where(:root)`: * * BackgroundColor--300 fondo de alertas, etiquetas y menús en oscuro * BackgroundColor--400 fondo de campos y de los menús desplegables * primary-color--300 relleno del botón primario en oscuro * primary-color--400 texto del botón primario en oscuro * * Sin ellas, al apagar la luz el botón de guardar volvía al azul #06c de fábrica * y los campos salían con los grises de PatternFly sobre nuestro navy. Están * mapeadas abajo, cada una con su nota. * * La lección general, si algún día se actualiza PatternFly: **el mapeo global no * se verifica leyendo el CSS, se verifica mirando la consola en los dos modos.** * * Lo que sí hay que ganarle es la especificidad. Los bloques de PatternFly usan * `:where(…)`, que vale cero, o `:root` a secas; los nuestros son `:root` y * vienen después en el orden de carga, así que ganan sin un solo `!important`. * Las excepciones son las variables de componente que PatternFly declara con un * selector de clase (`.pf-v5-c-masthead`), y ahí se repite la clase. */ :root { /* ── tinta ───────────────────────────────────────────────────────────── `dark-*` es tinta para superficies claras y `light-*` para superficies oscuras. Los nombres despistan: no tienen que ver con el modo del tema. `light-100` va a `--pasa-chrome-texto` y no a un blanco cualquiera porque es la tinta del masthead y del menú lateral, que son navy en los DOS modos. Si se dejara que PatternFly la invirtiera en oscuro, el masthead saldría con texto oscuro sobre navy. `light-200` y `light-300` se dejan como vienen: son grises claros que sobre navy dan la jerarquía de los rótulos del menú («Administrar», «Configurar») y no hay token nuestro para ese tercer nivel sobre chrome. */ --pf-v5-global--Color--100: var(--pasa-texto); --pf-v5-global--Color--200: var(--pasa-soporte); --pf-v5-global--Color--300: var(--pasa-texto); --pf-v5-global--Color--400: var(--pasa-soporte); --pf-v5-global--Color--dark-100: var(--pasa-texto); --pf-v5-global--Color--dark-200: var(--pasa-soporte); --pf-v5-global--Color--light-100: var(--pasa-chrome-texto); /* ── superficies ─────────────────────────────────────────────────────── `dark-100` es el fondo del masthead y `dark-300` el del menú lateral: los dos van al navy del chrome, para que arriba e izquierda sean una sola banda y no dos grises distintos. */ --pf-v5-global--BackgroundColor--100: var(--pasa-superficie); --pf-v5-global--BackgroundColor--150: var(--pasa-fila-alterna); --pf-v5-global--BackgroundColor--200: var(--pasa-fondo); --pf-v5-global--BackgroundColor--light-100: var(--pasa-superficie); --pf-v5-global--BackgroundColor--light-200: var(--pasa-fila-alterna); --pf-v5-global--BackgroundColor--light-300: var(--pasa-fondo); --pf-v5-global--BackgroundColor--dark-100: var(--pasa-chrome); --pf-v5-global--BackgroundColor--dark-200: var(--pasa-chrome); --pf-v5-global--BackgroundColor--dark-300: var(--pasa-chrome); /* `dark-400` es el relleno del renglón activo del menú lateral, y dejarlo sin mapear era lo que ponía una banda gris de PatternFly sobre el navy. Al navy también: PatternFly ya marca el renglón actual con un borde izquierdo de 4 px en el color de acción, que es como el sistema señala dónde estás. Rellenar además con otro color es decirlo dos veces. */ --pf-v5-global--BackgroundColor--dark-400: var(--pasa-chrome); /* `--300` y `--400` NO existen en claro: los introduce el bloque de modo oscuro de PatternFly, y de ahí sacan su fondo los campos, los menús, las alertas y las etiquetas. Sin mapearlos, en oscuro esos componentes salían con los grises de PatternFly encima de nuestro navy. Ver la nota de abajo sobre por qué el mapeo global no basta para el oscuro. */ --pf-v5-global--BackgroundColor--300: var(--pasa-fila-alterna); /* `--400` es el fondo de los campos, y aquí NO va a la superficie aunque sea lo que hace la pantalla de acceso. En oscuro PatternFly deja los campos con solo la línea de abajo, así que un campo del mismo color que la tarjeta se volvía invisible — y los de solo lectura, que sí llevan relleno, se veían MÁS que los editables: la señal al revés. Con el fondo alterno el campo se distingue de la tarjeta sin dibujarle una caja. */ --pf-v5-global--BackgroundColor--400: var(--pasa-fila-alterna); /* ── bordes ──────────────────────────────────────────────────────────── Un solo divisor para los tres niveles de PatternFly. Nuestro divisor es sutil a propósito —guía, no dibuja rejilla— y tres pesos de línea es exactamente el ruido que el sistema evita. */ --pf-v5-global--BorderColor--100: var(--pasa-borde); --pf-v5-global--BorderColor--200: var(--pasa-borde); --pf-v5-global--BorderColor--300: var(--pasa-divisor); --pf-v5-global--BorderColor--dark-100: var(--pasa-borde); --pf-v5-global--BorderColor--light-100: var(--pasa-borde); /* ── forma ───────────────────────────────────────────────────────────── PatternFly trae 3 px. La firma visual dice «exactamente 4 px, ni 3 ni 6», y esta línea es literalmente contra qué se escribió esa regla. `--lg` en PatternFly es la píldora (30em) de chips y etiquetas. Va a los 8 px de badge, que es la única forma más redonda que admite el sistema. */ --pf-v5-global--BorderRadius--sm: var(--pasa-radio); --pf-v5-global--BorderRadius--lg: var(--pasa-radio-badge); /* ── acción y enlaces ────────────────────────────────────────────────── El relleno de acción es el mismo en los dos modos, y su texto es oscuro. `--200` es el estado presionado y va al borde de acción, que es el navy. */ --pf-v5-global--primary-color--100: var(--pasa-accion); --pf-v5-global--primary-color--200: var(--pasa-accion-borde); --pf-v5-global--primary-color--dark-100: var(--pasa-accion); --pf-v5-global--primary-color--light-100: var(--pasa-accion); /* `--300` y `--400` tampoco existen en claro: son el relleno y el texto del botón primario en el modo oscuro de PatternFly. Sin esto, el botón de guardar volvía al azul #06c de fábrica en cuanto se apagaba la luz. */ --pf-v5-global--primary-color--300: var(--pasa-accion); --pf-v5-global--primary-color--400: var(--pasa-accion-texto); --pf-v5-global--active-color--100: var(--pasa-accion-borde); --pf-v5-global--active-color--200: var(--pasa-info-tinte); --pf-v5-global--active-color--300: var(--pasa-accion); --pf-v5-global--active-color--400: var(--pasa-accion); --pf-v5-global--link--Color: var(--pasa-enlace); --pf-v5-global--link--Color--hover: var(--pasa-enlace); --pf-v5-global--link--Color--dark: var(--pasa-enlace); --pf-v5-global--link--Color--dark--hover: var(--pasa-enlace); --pf-v5-global--link--Color--light: var(--pasa-chrome-texto); --pf-v5-global--link--Color--light--hover: var(--pasa-chrome-texto); --pf-v5-global--link--Color--visited: var(--pasa-enlace); /* ── estados ─────────────────────────────────────────────────────────── Los mismos cuatro del semáforo, con la separación de matiz ya verificada en tokens/verificar-contraste.py. `--200` es la variante presionada u oscura y `--300` el tinte de fondo. */ --pf-v5-global--danger-color--100: var(--pasa-peligro); --pf-v5-global--danger-color--200: var(--pasa-peligro); --pf-v5-global--danger-color--300: var(--pasa-peligro-tinte); --pf-v5-global--success-color--100: var(--pasa-exito); --pf-v5-global--success-color--200: var(--pasa-exito); --pf-v5-global--warning-color--100: var(--pasa-aviso); --pf-v5-global--warning-color--200: var(--pasa-aviso); --pf-v5-global--info-color--100: var(--pasa-info); --pf-v5-global--info-color--200: var(--pasa-info); --pf-v5-global--disabled-color--100: var(--pasa-inhabilitado-texto); --pf-v5-global--disabled-color--200: var(--pasa-inhabilitado-fondo); --pf-v5-global--disabled-color--300: var(--pasa-inhabilitado-fondo); /* ── tipografía ──────────────────────────────────────────────────────── PatternFly pide RedHatText y RedHatDisplay, que no están cargadas: hoy cae a helvetica. Se apunta a nuestra pila para que la consola se lea con la misma tipografía que la pantalla de acceso. */ --pf-v5-global--FontFamily--text: var(--pasa-fuente); --pf-v5-global--FontFamily--text--vf: var(--pasa-fuente); --pf-v5-global--FontFamily--heading: var(--pasa-fuente); --pf-v5-global--FontFamily--heading--vf: var(--pasa-fuente); --pf-v5-global--FontFamily--monospace: var(--pasa-fuente-numero); --pf-v5-global--FontFamily--monospace--vf: var(--pasa-fuente-numero); /* ── sombras ─────────────────────────────────────────────────────────── Todas a `none`. Son 21 variables y hay que nombrarlas una por una porque no hay una raíz común de la que cuelguen. Quitarlas sin más deja los menús flotantes sin nada que los ancle sobre el contenido, así que más abajo cada superficie flotante recibe el borde de 1 px que el sistema usa en lugar de elevación. */ --pf-v5-global--BoxShadow--sm: var(--pasa-sombra); --pf-v5-global--BoxShadow--sm-top: var(--pasa-sombra); --pf-v5-global--BoxShadow--sm-right: var(--pasa-sombra); --pf-v5-global--BoxShadow--sm-bottom: var(--pasa-sombra); --pf-v5-global--BoxShadow--sm-left: var(--pasa-sombra); --pf-v5-global--BoxShadow--md: var(--pasa-sombra); --pf-v5-global--BoxShadow--md-top: var(--pasa-sombra); --pf-v5-global--BoxShadow--md-right: var(--pasa-sombra); --pf-v5-global--BoxShadow--md-bottom: var(--pasa-sombra); --pf-v5-global--BoxShadow--md-left: var(--pasa-sombra); --pf-v5-global--BoxShadow--lg: var(--pasa-sombra); --pf-v5-global--BoxShadow--lg-top: var(--pasa-sombra); --pf-v5-global--BoxShadow--lg-right: var(--pasa-sombra); --pf-v5-global--BoxShadow--lg-bottom: var(--pasa-sombra); --pf-v5-global--BoxShadow--lg-left: var(--pasa-sombra); --pf-v5-global--BoxShadow--xl: var(--pasa-sombra); --pf-v5-global--BoxShadow--xl-top: var(--pasa-sombra); --pf-v5-global--BoxShadow--xl-right: var(--pasa-sombra); --pf-v5-global--BoxShadow--xl-bottom: var(--pasa-sombra); --pf-v5-global--BoxShadow--xl-left: var(--pasa-sombra); --pf-v5-global--BoxShadow--inset: var(--pasa-sombra); /* ── foco ────────────────────────────────────────────────────────────── El anillo de foco no es decorativo: es lo único que le dice a quien navega con teclado dónde está. */ --pf-v5-global--primary-color--light-200: var(--pasa-borde-foco); --pf-v5-global--BorderColor--active: var(--pasa-borde-foco); /* ── el menú lateral ─────────────────────────────────────────────────── PatternFly lo declara en `:root` en claro y lo vuelve a declarar en `:where(.pf-v5-theme-dark):root` apuntando a la superficie, o sea que en oscuro dejaría de ser navy. Se fija aquí, que va después, para que sea la misma banda en los dos modos. */ --pf-v5-c-page__sidebar--BackgroundColor: var(--pasa-chrome); --pf-v5-c-page--BackgroundColor: var(--pasa-fondo); } /* El masthead. PatternFly declara su fondo con un selector de CLASE —y otra vez bajo `:where(.pf-v5-theme-dark) .pf-v5-c-masthead`—, así que un `:root` no lo alcanza y hay que repetir la clase. El alto de 64 px es el mismo de la barra de toda aplicación del grupo: es el único lugar donde vive la identidad, y con menos el tigre no se lee. */ .pf-v5-c-masthead { --pf-v5-c-masthead--BackgroundColor: var(--pasa-chrome); min-height: var(--pasa-chrome-alto); border-bottom: 0; } /* Las superficies flotantes, ahora que no hay sombra que las separe del contenido. El borde de 1 px es lo que el sistema usa en lugar de elevación, y aquí no es una preferencia estética: sin sombra y sin borde, un menú abierto se confunde con la página que tiene debajo. */ .pf-v5-c-menu, .pf-v5-c-modal-box, .pf-v5-c-dropdown__menu, .pf-v5-c-select__menu, .pf-v5-c-popover__content, .pf-v5-c-panel, .pf-v5-c-notification-drawer, .pf-v5-c-date-picker__calendar { border: var(--pasa-borde-ancho) solid var(--pasa-borde); } /* El botón primario. El relleno de acción da 1.85:1 contra el fondo: su texto se lee perfecto, pero el relleno solo no alcanza el 3:1 que pide WCAG 1.4.11 para identificar un componente. De ahí el contorno — es el mismo hueco que encontró el verificador de contraste y la misma solución que en la pantalla de acceso. */ .pf-v5-c-button.pf-m-primary { color: var(--pasa-accion-texto); border: var(--pasa-borde-ancho) solid var(--pasa-accion-borde); } /* ── la marca ──────────────────────────────────────────────────────────── * * El tigre arriba a la izquierda, y es el botón de inicio: es la primera regla de * la firma visual y el ancla de orientación de toda aplicación del grupo. * * No se pone con CSS. Keycloak pasa `logo` y `logoUrl` de theme.properties al * entorno de la SPA, que los usa para el `` y su enlace — o sea que hay una * vía soportada y no hace falta inyectar nada. Aquí solo se le da tamaño, porque * Keycloak le pone el suyo pensando en su propio logotipo. * * 160×54, la proporción del arte (3.06:1). El alto es lo que le da presencia y el * ancho lo dicta el dibujo, para no cortarlo ni rodearlo de relleno vacío. */ .pf-v5-c-masthead__brand img, img.keycloak__pageheader_brand { width: var(--pasa-marca-ancho); height: var(--pasa-marca-alto); max-height: var(--pasa-marca-alto); object-fit: contain; } /* ── el alto del chrome ────────────────────────────────────────────────── * * 64 px, los mismos de la barra de toda aplicación del grupo. PatternFly no * expone un alto: el masthead mide lo que mida su contenido más el relleno, así * que el relleno se DERIVA de los dos tokens en lugar de escribir un número. * Si mañana cambia el alto de la barra o el de la marca, esto sigue cuadrando. * * Y quien mandaba el alto no era la marca sino la barra de herramientas: sus * 36 px de contenido más 16 de relleno arriba y abajo daban 68, y con eso el * masthead se iba a 78. Por eso se le quita el relleno vertical —dentro del * masthead, no en toda la consola— y el alto vuelve a depender de la marca. */ .pf-v5-c-masthead.pf-m-display-inline { --pasa-chrome-relleno: calc( (var(--pasa-chrome-alto) - var(--pasa-marca-alto)) / 2 ); --pf-v5-c-masthead--m-display-inline__main--MinHeight: var(--pasa-marca-alto); --pf-v5-c-masthead--m-display-inline__content--MinHeight: var(--pasa-marca-alto); --pf-v5-c-masthead--m-display-inline__main--PaddingTop: var(--pasa-chrome-relleno); --pf-v5-c-masthead--m-display-inline__main--PaddingBottom: var(--pasa-chrome-relleno); --pf-v5-c-masthead--m-display-inline__content--PaddingTop: var(--pasa-chrome-relleno); --pf-v5-c-masthead--m-display-inline__content--PaddingBottom: var(--pasa-chrome-relleno); } .pf-v5-c-masthead .pf-v5-c-toolbar { --pf-v5-c-toolbar--PaddingTop: 0; --pf-v5-c-toolbar--PaddingBottom: 0; /* La barra se pinta a sí misma con un color de la PALETA de PatternFly (`--palette--black-1000`), no con una global. En claro coincidía con el navy y no se notaba; en oscuro pintaba un rectángulo negro dentro del masthead, al lado del tigre. Transparente: el masthead ya trae el color. */ --pf-v5-c-toolbar--BackgroundColor: transparent; } /* Los menús del masthead, sin caja. PatternFly les dibuja un borde con el color de borde general, que sobre el navy del chrome sale como un rectángulo claro alrededor del nombre de usuario. El chrome es UNA banda: dentro de ella no van contornos, y la regla del sistema es «bordes muy pequeños o inexistentes». */ .pf-v5-c-masthead .pf-v5-c-menu-toggle { --pf-v5-c-menu-toggle--BorderColor: transparent; --pf-v5-c-menu-toggle--BorderWidth: 0; } /* ── las bandas de aviso ───────────────────────────────────────────────── * * PatternFly usa los colores de estado como RELLENO del banner * (`--m-gold--BackgroundColor: var(--warning-color--100)`), y los nuestros son * colores de TEXTO: están medidos para leerse sobre su tinte, no para llenar una * banda. Mapeados a lo bruto, la banda de aviso salía café oscuro con texto casi * negro encima. * * Se corrige con el patrón del sistema, el mismo de los badges: el tinte va de * fondo y el color de estado va de tinta. La separación de matiz entre los cuatro * ya está verificada en tokens/verificar-contraste.py. * * La tinta se pone además como PROPIEDAD y no solo como variable: en oscuro la * banda resolvía su `color` por otra vía y salía texto casi negro sobre el tinte * oscuro. Una propiedad directa no admite ese rodeo. */ .pf-v5-c-banner.pf-m-gold { --pf-v5-c-banner--m-gold--BackgroundColor: var(--pasa-aviso-tinte); --pf-v5-global--Color--100: var(--pasa-aviso); color: var(--pasa-aviso); } .pf-v5-c-banner.pf-m-red { --pf-v5-c-banner--m-red--BackgroundColor: var(--pasa-peligro-tinte); --pf-v5-global--Color--100: var(--pasa-peligro); color: var(--pasa-peligro); } .pf-v5-c-banner.pf-m-green { --pf-v5-c-banner--m-green--BackgroundColor: var(--pasa-exito-tinte); --pf-v5-global--Color--100: var(--pasa-exito); color: var(--pasa-exito); } .pf-v5-c-banner.pf-m-blue { --pf-v5-c-banner--m-blue--BackgroundColor: var(--pasa-info-tinte); --pf-v5-global--Color--100: var(--pasa-info); color: var(--pasa-info); } /* ── el interruptor de claro/oscuro ────────────────────────────────────── * * Arriba a la derecha, siempre visible: la otra regla de la firma. Lo inyecta * `js/consola-tema.js` dentro de la barra del masthead. * * Mismo dibujo que el de la pantalla de acceso, con una diferencia: aquí va en * flujo dentro de la barra y no absoluto en una esquina, y sobre el navy del * chrome, así que su color es la tinta del chrome y no el gris de soporte. */ .pasa-modo { display: inline-flex; align-items: center; gap: var(--pasa-esp-4); box-sizing: border-box; /* A la izquierda, aire para que no quede pegado al avatar; a la derecha no hace falta, el masthead ya trae su propio relleno. */ margin-left: var(--pasa-esp-12); padding: var(--pasa-esp-4); border: 0; background: none; color: var(--pasa-chrome-texto); cursor: pointer; } .pasa-modo svg { width: 14px; height: 14px; display: block; } .pasa-riel { width: 26px; height: 14px; border: var(--pasa-borde-ancho) solid var(--pasa-chrome-texto); border-radius: 7px; position: relative; flex-shrink: 0; opacity: .55; } .pasa-perilla { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--pasa-chrome-texto); transition: transform var(--pasa-transicion); } .pasa-modo[aria-pressed="true"] .pasa-perilla { transform: translateX(12px); background: var(--pasa-accion); } .pasa-modo:hover .pasa-riel { opacity: 1; } /* Quien pidió menos movimiento, recibe menos movimiento. */ @media (prefers-reduced-motion: reduce) { .pasa-perilla { transition-duration: 1ms; } }