/* ============================================================ NEXA - CAPA 1: TOKENS ------------------------------------------------------------ Propuesta de reemplazo del bloque :root de nexa-skin.css. Este archivo NO esta enchufado a la aplicacion. Es lo que se propone copiar cuando alguien lo apruebe. ------------------------------------------------------------ QUE CAMBIA EN ESTA RONDA (y solo esto) ------------------------------------------------------------ 1. SOMBRAS. Se retiran de las superficies. Una tarjeta, un panel, una tabla y un boton ya no llevan sombra: se separan con borde. Solo quedan dos sombras, y son para lo que flota de verdad: menu desplegable y dialogo. 2. RADIOS. De siete valores se pasa a tres familias -control, contenedor, pastilla- mas el circulo. Los sueltos (4 px y 18 px) desaparecen; sus nombres siguen existiendo pero apuntan a la familia que les toca. 3. ANILLO DE FOCO. Sube de opacidad y se documenta que nunca va solo: siempre acompanado del borde azul de marca, que es la parte que cumple la norma. 4. CONTRASTE APLICADO. Las tres correcciones que estaban "propuestas sin aplicar" se aplican: boton de exito, texto secundario y borde del campo. 5. ESPACIADO. La escala se completa y se le anaden los pasos de densidad (relleno de celda y de control), que hasta ahora no existian como token y por eso se escribian a ojo. ------------------------------------------------------------ COMO SE CALCULARON LAS ESCALAS ------------------------------------------------------------ No se inventaron. Se derivaron de los dos colores de marca que ya tenia NEXA (#1f6feb y #0d9488) fijando el tono, moviendo la luminosidad y midiendo el contraste de cada paso resultante. Prueba de que la derivacion es correcta: los cuatro tokens de marca que ya existian caen en pasos exactos de la escala nueva. --nexa-primario = azul-500 #1f6feb --nexa-primario-oscuro = azul-600 #1559c4 --nexa-primario-activo = azul-700 #1249a8 --nexa-primario-suave = azul-50 #e7eefc EL OFICIO DE CADA PASO Cada paso hace un trabajo y solo uno. Si una pantalla necesita un color que no esta en la escala, no se anade un hex: se usa el paso mas cercano. Ese es todo el sistema. 50 Fondo tenido de zona. Pastillas, filas resaltadas. 100 Fondo de componente en reposo. Avisos suaves. 200 Fondo de componente en hover. Bordes suaves. 300 Borde visible del componente. 400 Borde fuerte, iconos decorativos, graficas. 500 SOLIDO. El color de marca. Fondo de boton. 600 Solido en hover. Primer paso que sirve para texto. 700 Solido pulsado. Texto sobre fondo claro. 800 Texto sobre el fondo suave del mismo color. 900 Titulares y maximo contraste. REGLA DE CONTRASTE Al lado de cada paso va su contraste real contra #ffffff. Para texto normal hace falta 4.5. Para bordes de control y elementos de interfaz, 3.0. Los pasos 50 a 400 NUNCA llevan texto encima: son fondos y bordes. ============================================================ */ :root { /* ------------------------------------------------------------ AZUL - color de marca Derivado de #1f6feb (tono 216). Es la accion principal: guardar, radicar, continuar, y los enlaces. ------------------------------------------------------------ */ --nexa-azul-50: #e7eefc; /* 1.16 fondo de pastilla, fila seleccionada */ --nexa-azul-100: #d1e1fa; /* 1.32 fondo de aviso informativo */ --nexa-azul-200: #b1cdf6; /* 1.62 borde del aviso informativo */ --nexa-azul-300: #82aff3; /* 2.24 borde de campo con foco suave */ --nexa-azul-400: #4d8eef; /* 3.27 iconos, series de grafica */ --nexa-azul-500: #1f6feb; /* 4.63 SOLIDO. Fondo de boton principal */ --nexa-azul-600: #1559c4; /* 6.45 hover del boton, y enlace sobre fondo claro */ --nexa-azul-700: #1249a8; /* 8.25 boton pulsado */ --nexa-azul-800: #103e84; /* 10.27 texto azul sobre --nexa-azul-50 */ --nexa-azul-900: #102e5b; /* 13.43 titular */ /* ------------------------------------------------------------ TEAL - exito y confirmacion Derivado de #0d9488 (tono 175). Firmado, radicado, aprobado. AVISO IMPORTANTE sobre el paso 500: con etiqueta blanca da 3.74, por debajo del 4.5 que pide el texto normal. Sirve como relleno, icono o punto de estado, pero NO como fondo de un boton con texto blanco. Para eso empieza en el 600. ------------------------------------------------------------ */ --nexa-teal-50: #e7f7f1; /* 1.11 fondo del aviso de exito */ --nexa-teal-100: #ccf0ed; /* 1.22 fondo de pastilla "firmado" */ --nexa-teal-200: #9ee5df; /* 1.43 borde del aviso de exito */ --nexa-teal-300: #5ad8ce; /* 1.73 separador de zona completada */ --nexa-teal-400: #22bfb2; /* 2.29 icono de paso cumplido */ --nexa-teal-500: #0d9488; /* 3.74 relleno y punto de estado. SIN texto blanco */ --nexa-teal-600: #0b7d73; /* 5.01 SOLIDO real del boton de exito */ --nexa-teal-700: #0a6b63; /* 6.37 boton de exito pulsado */ --nexa-teal-800: #084540; /* 10.85 texto teal sobre --nexa-teal-50 */ /* ------------------------------------------------------------ AMBAR - aviso Derivado de #b45309 (tono 31). Algo esta pendiente o vence pronto, pero nada ha fallado todavia. ------------------------------------------------------------ */ --nexa-ambar-50: #fff3e3; /* 1.09 fondo del aviso */ --nexa-ambar-100: #fde1c3; /* 1.25 fondo de pastilla "pendiente" */ --nexa-ambar-200: #fbc993; /* 1.51 borde del aviso */ --nexa-ambar-300: #f5a147; /* 2.09 barra de progreso en riesgo */ --nexa-ambar-400: #e97e0c; /* 2.82 icono de advertencia */ --nexa-ambar-500: #b45309; /* 5.02 SOLIDO y tambien texto sobre blanco */ --nexa-ambar-600: #985106; /* 5.97 hover */ --nexa-ambar-700: #7f4405; /* 7.69 pulsado */ --nexa-ambar-800: #653706; /* 9.99 texto sobre --nexa-ambar-50 */ --nexa-ambar-900: #4b2a06; /* 12.86 titular */ /* ------------------------------------------------------------ ROJO - error Derivado de #c0392b (tono 6). Algo fallo o algo se va a destruir. En NEXA se reserva para eso: no se usa para "ojo". ------------------------------------------------------------ */ --nexa-rojo-50: #fdeaea; /* 1.16 fondo del mensaje de error */ --nexa-rojo-100: #f9d6d2; /* 1.35 fondo del campo invalido */ --nexa-rojo-200: #f2b7b0; /* 1.72 borde del mensaje de error */ --nexa-rojo-300: #e38278; /* 2.72 borde del campo invalido */ --nexa-rojo-400: #d75547; /* 3.98 icono de error */ --nexa-rojo-500: #c0392b; /* 5.44 SOLIDO y texto sobre blanco */ --nexa-rojo-600: #a12e21; /* 7.17 hover */ --nexa-rojo-700: #852419; /* 9.28 pulsado */ --nexa-rojo-800: #6a1e16; /* 11.60 texto sobre --nexa-rojo-50 */ --nexa-rojo-900: #4e1812; /* 14.35 titular */ /* ------------------------------------------------------------ NEUTROS - la escala mas usada de todas ------------------------------------------------------------ No es gris puro: lleva el mismo tono azulado (219) que la marca, que es lo que ya hacia NEXA. Un gris puro al lado de un azul se ve amarillento, y encima de un fondo azulado se ve sucio. COMPROBACION, no promesa. En un gris puro el rojo y el azul valen lo mismo. Aqui el azul va siempre por delante: paso hex azul menos rojo 0 #ffffff 0 (el blanco es blanco) 25 #fbfcfe +3 50 #f8fafd +5 100 #f3f5f9 +6 150 #f2f4f8 +6 200 #e9edf3 +10 300 #d6dce6 +16 400 #b9c2d0 +23 500 #8a94a6 +28 600 #636e83 +32 700 #5a6477 +29 800 #33415c +41 900 #1f2a37 +24 El paso 600 es el que resuelve el problema de accesibilidad mas extendido de NEXA: el 500 (#8a94a6, el viejo --nexa-texto-suave) da 3.06 sobre blanco y 2.80 sobre el fondo de la aplicacion. El 600 es el mismo tono, lo justo mas oscuro para cumplir en los dos fondos. ------------------------------------------------------------ */ --nexa-neutro-0: #ffffff; /* - superficie de tarjeta y de tabla */ --nexa-neutro-25: #fbfcfe; /* 1.03 superficie alterna, cabecera de tabla */ --nexa-neutro-50: #f8fafd; /* 1.05 fila en hover */ --nexa-neutro-100: #f3f5f9; /* 1.09 FONDO de la aplicacion */ --nexa-neutro-150: #f2f4f8; /* 1.10 linea divisoria muy tenue */ --nexa-neutro-200: #e9edf3; /* 1.17 borde de tarjeta y de tabla */ --nexa-neutro-300: #d6dce6; /* 1.38 borde decorativo, separador marcado */ --nexa-neutro-400: #b9c2d0; /* 1.80 borde de campo deshabilitado */ --nexa-neutro-500: #8a94a6; /* 3.06 BORDE DE CONTROL. Cumple el 3:1 justo */ --nexa-neutro-600: #636e83; /* 5.14 texto secundario ACCESIBLE */ --nexa-neutro-700: #5a6477; /* 5.96 etiqueta de campo, icono activo */ --nexa-neutro-800: #33415c; /* 10.24 texto de parrafo */ --nexa-neutro-900: #1f2a37; /* 14.54 titular */ /* ============================================================ ALIAS - los tokens que YA EXISTEN ------------------------------------------------------------ Mismo nombre. No borrar ninguno: los consumen theme.css, nexa-base.css, nexa-login.css y la capa 2 de nexa-skin.css. Los tres marcados [CAMBIA] tienen valor nuevo en esta ronda. Son los tres incumplimientos de contraste que el informe dejo senalados y que hasta ahora estaban propuestos sin aplicar. Ninguno mueve nada: son el mismo color, mas oscuro. ============================================================ */ /* --- Marca --------------------------------------------- --nexa-primario es un RELLENO, no un color de texto. Sobre blanco da 4,63 y pasa por 0,13. Sobre cualquier fondo tenido, no pasa: azul-500 sobre blanco 4,63 neutro-50 4,43 NO neutro-100 4,25 NO azul-50 3,98 NO teal-50 4,19 NO ambar-50 4,23 NO Por eso los enlaces y el texto azul NO usan --nexa-primario: usan --nexa-enlace, que es azul-600 y cumple en todas las superficies del sistema (5,54 en el peor caso). ------------------------------------------------------- */ --nexa-primario: var(--nexa-azul-500); --nexa-primario-oscuro: var(--nexa-azul-600); --nexa-primario-activo: var(--nexa-azul-700); --nexa-primario-suave: var(--nexa-azul-50); /* El azul cuando es TEXTO: enlaces, pestana activa, iconos que acompanan a una palabra. Nunca el 500. */ --nexa-enlace: var(--nexa-azul-600); /* 6,45 sobre blanco */ --nexa-enlace-hover: var(--nexa-azul-700); /* 8,25 */ /* --- Exito --------------------------------------------- [CAMBIA] --nexa-exito pasa de teal-500 a teal-600. Motivo: teal-500 con etiqueta blanca da 3.74 y el minimo es 4.5. Curiosidad que lo delataba: hasta hoy el boton MEJORABA de contraste al pasarle el raton por encima. */ --nexa-exito: var(--nexa-teal-600); /* 5.01 */ --nexa-exito-oscuro: var(--nexa-teal-700); /* 6.37 */ --nexa-exito-activo: var(--nexa-teal-800); --nexa-exito-suave: var(--nexa-teal-50); --nexa-exito-texto: #0f766e; /* 5.47 - entre el 600 y el 700 */ /* Se conserva el teal-500 con nombre propio porque sigue sirviendo para lo que NO lleva texto encima: el punto de una pastilla, el relleno de un icono, una serie. */ --nexa-exito-relleno: var(--nexa-teal-500); /* --- Aviso y error ------------------------------------- */ --nexa-aviso: var(--nexa-ambar-500); --nexa-aviso-suave: var(--nexa-ambar-50); --nexa-error: var(--nexa-rojo-500); --nexa-error-suave: var(--nexa-rojo-50); /* --- Texto --------------------------------------------- [CAMBIA] --nexa-texto-suave pasa de neutro-500 a neutro-600. El 500 se queda, pero solo para lo que la norma exime: texto de un control deshabilitado. */ --nexa-texto: var(--nexa-neutro-900); /* 14.54 */ --nexa-texto-medio: var(--nexa-neutro-800); /* 10.24 */ --nexa-texto-suave: var(--nexa-neutro-600); /* 5.14 */ --nexa-texto-deshabilitado: var(--nexa-neutro-500); /* 3.06 - exento */ --nexa-texto-tenue: #aeb6c4; /* 2.04 - solo deshabilitado */ /* --- Series de grafica --------------------------------- Una grafica necesita colores que se distingan ENTRE SI, que es un problema distinto al de la escala de marca. Salen de los tonos que ya existen, no de colores nuevos. REGLA: maximo seis series. A partir de ahi ningun ojo las separa y hay que agrupar en "otros". Y toda serie lleva su etiqueta: el color acompana, no informa por si solo, porque uno de cada doce hombres no distingue rojo de verde. ------------------------------------------------------- */ --nexa-serie-1: #1f6feb; /* azul 500 - la serie principal */ --nexa-serie-2: #0b7d73; /* teal 600 */ --nexa-serie-3: #b45309; /* ambar 500 */ --nexa-serie-4: #103e84; /* azul 800 */ --nexa-serie-5: #22bfb2; /* teal 400 */ --nexa-serie-6: #8a94a6; /* neutro 500 - "otros" */ --nexa-texto-sobre-color: var(--nexa-neutro-0); /* --- Superficies y bordes ------------------------------ Aqui esta la decision de esta ronda: LO QUE SEPARA ES EL BORDE. Por eso los bordes tienen nombre por oficio y no por intensidad. [CAMBIA] --nexa-borde-fuerte, que es el borde de los campos, pasa de neutro-300 (1.38) a neutro-500 (3.06). Motivo: cuando el borde es lo unico que dice donde se escribe, la norma pide 3:1. Se ve mas marcado que hoy, y eso es exactamente lo que se busca. */ --nexa-fondo: var(--nexa-neutro-100); /* fondo de la pagina */ --nexa-superficie: var(--nexa-neutro-0); /* tarjeta, tabla, dialogo */ --nexa-superficie-alt: var(--nexa-neutro-25); /* cabecera de tabla */ --nexa-superficie-hover: var(--nexa-neutro-50); /* fila bajo el raton */ --nexa-borde: var(--nexa-neutro-200); /* separa superficies */ --nexa-borde-fuerte: var(--nexa-neutro-500); /* borde de CONTROL, 3.06 */ --nexa-borde-hover: var(--nexa-neutro-600); /* control bajo el raton */ --nexa-borde-apagado: var(--nexa-neutro-300); /* control deshabilitado */ --nexa-linea: var(--nexa-neutro-150); /* divisoria dentro de la tabla */ /* Nombres por oficio, para escribir codigo nuevo mas claro. Apuntan a los mismos valores de arriba. */ --nexa-borde-superficie: var(--nexa-borde); --nexa-borde-control: var(--nexa-borde-fuerte); /* ============================================================ ESPACIADO ------------------------------------------------------------ Base de 4 px. Si un espacio no esta en la escala, es que se eligio a ojo. DONDE VALE: en las clases opcionales con prefijo nexa- y en pantallas nuevas. La capa global NO puede tocar padding ni margin: eso moveria los controles que estan en produccion. ============================================================ */ --nexa-esp-0: 0; --nexa-esp-1: 4px; /* separacion entre un icono y su texto */ --nexa-esp-2: 8px; /* entre etiqueta y campo */ --nexa-esp-3: 12px; /* entre dos campos de la misma fila */ --nexa-esp-4: 16px; /* relleno interior de una tarjeta pequena */ --nexa-esp-5: 20px; /* entre dos campos apilados */ --nexa-esp-6: 24px; /* relleno interior de una tarjeta */ --nexa-esp-8: 32px; /* entre dos bloques de un formulario */ --nexa-esp-10: 40px; /* entre dos secciones de la pagina */ --nexa-esp-12: 48px; /* aire antes de un titulo de seccion */ --nexa-esp-16: 64px; /* margen superior de una pantalla vacia */ /* ------------------------------------------------------------ DENSIDAD - los rellenos que hasta ahora se escribian a ojo ------------------------------------------------------------ Estos tokens son nuevos. Existen porque el relleno de una celda es la decision que mas cambia el aspecto de NEXA -hay 940 columnas en 151 tablas- y hasta ahora no era un token. HOY, en el tema propio (theme.css): .ui-datatable .ui-datatable-data > tr > td { padding: 1rem 1rem } Con la raiz en 16 px eso son 16 px por los cuatro lados. En una tabla de trabajo son cuatro o cinco filas menos por pantalla, y obliga a desplazarse para leer una lista que cabria entera. PROPUESTA: bajar el alto y conservar el ancho. El aire entre columnas es el que hace legible una fila larga; el aire de arriba y abajo solo gasta pantalla. NO se aplican en la capa global (padding esta prohibido). Se aplican con la clase opcional .nexa-tabla, que se pone tabla por tabla con styleClass. ------------------------------------------------------------ */ --nexa-celda-y: 12px; /* alto de celda, tabla normal */ --nexa-celda-x: 16px; /* ancho de celda: se conserva el de hoy */ --nexa-celda-y-compacta: 8px; /* tablas de mas de ocho columnas */ --nexa-celda-x-compacta: 12px; --nexa-control-y: 9px; /* alto de campo y de boton */ --nexa-control-x: 12px; /* ancho de campo */ --nexa-boton-x: 16px; /* ancho de boton: mas que el campo */ /* ============================================================ TIPOGRAFIA ------------------------------------------------------------ LA FAMILIA CAMBIA EN ESTA RONDA: de Lexend a Source Sans 3. Lexend esta dibujada para facilitar la lectura a quien le cuesta leer, y para conseguirlo redondea los remates y separa mucho las letras. En una pantalla de contratacion publica eso no se lee "facil", se lee informal; y el banner encima le pedia una cursiva que Lexend no tiene, asi que el navegador inclinaba la redonda a la fuerza. Source Sans 3 es humanista y sobria, dibujada para leer texto largo en pantalla -que es justo lo que hay aqui: objetos de contrato, obligaciones, observaciones de glosa- y es mas estrecha, con lo que las tablas de doce columnas respiran. Licencia OFL, empaquetada en el repositorio, no depende de internet. Y PESA MENOS QUE LA DE HOY: 28 KB del subconjunto latino contra los 170 KB del ttf de Lexend. Ver el @font-face al final del archivo. OJO AL CAMBIARLA: la familia SI se aplica globalmente al final de este archivo, asi que cambiarla cambia el ancho del texto en las 74 pantallas. Source Sans 3 es mas estrecha que Lexend, o sea que el riesgo es que algo quede holgado, no que se desborde; aun asi hay que mirar las tablas anchas -certificacion, pagos a terceros y estado de firmas-. El ttf de Lexend se queda un ciclo en la carpeta, por si hay que volver atras. Ya no lo pide nadie. Plus Jakarta Sans se retira: estaba en 3 archivos y se descargaba de Google Fonts. ============================================================ */ --nexa-fuente: 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, sans-serif; --nexa-fuente-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; /* Pesos. Por debajo de 400 no se baja: el inventario encontro texto a 11 px con peso 300, que es ilegible. */ --nexa-peso-normal: 400; --nexa-peso-medio: 500; --nexa-peso-fuerte: 600; --nexa-peso-titulo: 700; /* Escala de tamano. El paso base es 14 px, que es lo que ya usan de hecho las pantallas de NEXA. MINIMO ABSOLUTO: 12 px. Nada de 11 px, y menos con peso 300. */ --nexa-txt-xs: 12px; /* pie de tabla, sello de fecha */ --nexa-txt-sm: 13px; /* texto de apoyo bajo un campo */ --nexa-txt-base: 14px; /* cuerpo, celdas, etiquetas */ --nexa-txt-md: 16px; /* texto destacado, importe */ --nexa-txt-lg: 18px; /* titulo de tarjeta */ --nexa-txt-xl: 20px; /* titulo de seccion */ --nexa-txt-2xl: 24px; /* titulo de pagina */ --nexa-txt-3xl: 30px; /* cifra grande del tablero */ /* Interlineado. Cuanto mas grande el texto, mas apretado. */ --nexa-alto-apretado: 1.25; /* titulares */ --nexa-alto-normal: 1.45; /* cuerpo */ --nexa-alto-suelto: 1.6; /* parrafos largos, ayuda */ /* Espaciado entre letras. Solo para versalitas de cabecera. */ --nexa-track-titulo: .4px; /* ============================================================ ESQUINAS ------------------------------------------------------------ TRES radios y una forma. Ni uno mas. control 8 px boton, campo, desplegable, casilla, pestana, filtro de columna, aviso, boton del paginador contenedor 14 px tarjeta, panel, tabla, dialogo, zona de subida de archivos pastilla 999 px estado, etiqueta redonda, barra de progreso. Es "redondo del todo", no un numero: asi funciona a cualquier alto circulo 50 % avatar, boton de radio, numero de paso. No es un radio, es una forma El 14 px del contenedor no se invento: sale del tablero que ya esta en produccion (.cseg .ccard). POR QUE EL CONTROL VA MAS CERRADO QUE EL CONTENEDOR Si un boton y la tarjeta que lo contiene tienen el mismo radio, el boton parece pegado al borde. RETIRADOS EN ESTA RONDA: --nexa-radio-xs (4 px) y --nexa-radio-grande (18 px). Eran los dos valores sueltos. Los nombres siguen existiendo para no romper nada, pero apuntan a la familia que les corresponde. ============================================================ */ --nexa-radio-0: 0; --nexa-radio-control: 8px; --nexa-radio-contenedor: 14px; --nexa-radio-pastilla: 999px; --nexa-radio-circulo: 50%; /* Nombres viejos, ya sin valor propio */ --nexa-radio: var(--nexa-radio-contenedor); --nexa-radio-xs: var(--nexa-radio-control); /* era 4px */ --nexa-radio-grande: var(--nexa-radio-contenedor); /* era 18px */ /* ============================================================ SOMBRAS - reservadas a lo que flota ------------------------------------------------------------ LA DECISION DE ESTA RONDA, y es la que mas se nota. Una sombra en una tarjeta dice "esto esta levantado sobre la pagina". Cuando TODO lleva sombra, la pagina entera esta levantada, o sea nada lo esta, y lo unico que queda es una suciedad gris alrededor de cada caja. Regla nueva: las superficies se separan con BORDE. La sombra se reserva a lo que de verdad flota por encima de la pagina y se puede cerrar: el menu de un desplegable, el calendario, el aviso flotante y el dialogo. Quedan dos. El color no es negro puro sino azul muy oscuro (16,24,40): el negro puro sobre un fondo azulado se ve sucio. ============================================================ */ --nexa-sombra-menu: 0 6px 16px -4px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .08); --nexa-sombra-dialogo: 0 24px 48px -12px rgba(16, 24, 40, .24), 0 6px 16px -6px rgba(16, 24, 40, .12); /* ------------------------------------------------------------ NOMBRES VIEJOS. Estan en none a proposito. Asi, al copiar esta capa encima de la de hoy, las tarjetas, los paneles y los botones pierden la sombra sin tener que editar una sola regla de nexa-skin.css. Si alguna pantalla se queda "plana de mas", la respuesta no es devolverle la sombra: es darle borde. ------------------------------------------------------------ */ --nexa-sombra-1: none; /* era: fila, celda */ --nexa-sombra-2: none; /* era: tarjeta y boton en reposo */ --nexa-sombra-3: none; /* era: hover levantado */ --nexa-sombra-4: var(--nexa-sombra-menu); --nexa-sombra-flotante: var(--nexa-sombra-dialogo); --nexa-sombra-hundida: none; /* el boton pulsado se marca con color */ /* El velo que tapa la pagina detras de un dialogo */ --nexa-velo: rgba(16, 24, 40, .45); /* ============================================================ ANILLO DE FOCO ------------------------------------------------------------ Es lo unico que ve quien navega con teclado, y en NEXA hay flujos largos -radicar una cuenta, firmar un contrato- que se hacen enteros con tabulador. COMO FUNCIONA, porque no es solo el anillo: 1. El BORDE del control pasa al azul de marca (#1f6feb, 4.63 sobre blanco). Esta es la parte que cumple la norma. 2. El ANILLO es una sombra difusa del mismo azul alrededor. Esta es la parte que se ve de reojo desde el otro lado de la pantalla. La sombra sola no bastaria: difuminada al 25 % no llega al 3:1 que pide la norma. El borde solo si cumple, pero pasa desapercibido. Juntos funcionan. El anillo va con box-shadow y NO con outline ni con border: box-shadow no ocupa sitio, asi que nada se mueve al recibir el foco. Un outline del navegador tampoco mueve nada, pero es un contorno duro que no se puede tenir del color de marca de forma consistente entre navegadores. NUNCA se quita el foco sin poner otra cosa en su lugar. ============================================================ */ --nexa-foco: 0 0 0 3px rgba(31, 111, 235, .25); --nexa-foco-error: 0 0 0 3px rgba(192, 57, 43, .25); --nexa-foco-exito: 0 0 0 3px rgba(11, 125, 115, .25); --nexa-foco-borde: var(--nexa-azul-500); /* ============================================================ MOVIMIENTO ------------------------------------------------------------ Regla practica: si el usuario espera la animacion, sobra. El movimiento aqui solo confirma que algo respondio al clic. Nada por encima de 300 ms. ============================================================ */ --nexa-transicion: .2s; /* el token que ya existe */ --nexa-dur-rapida: 120ms; /* color de un boton al pasar el raton */ --nexa-dur-normal: 200ms; /* apertura de un desplegable */ --nexa-dur-lenta: 300ms; /* entrada de un dialogo */ /* Curvas. "salida" arranca rapido y frena: es la que sirve para casi todo, porque el resultado aparece antes. */ --nexa-curva-salida: cubic-bezier(.16, 1, .3, 1); --nexa-curva-entrada: cubic-bezier(.4, 0, 1, 1); --nexa-curva-suave: cubic-bezier(.4, 0, .2, 1); /* ============================================================ ESPERA ------------------------------------------------------------ Estos si son duraciones largas, y por una razon: no marcan una respuesta, marcan que NO hay respuesta todavia. NEXA firma documentos, genera Word con Aspose, manda correos y procesa lotes de hasta 50 contratos; nada de eso cabe en 300 ms. El giro se deja a 900 ms a proposito. Mas rapido transmite nerviosismo y hace que una espera de veinte segundos se sienta peor de lo que es. ============================================================ */ --nexa-dur-giro: 900ms; /* una vuelta del indicador */ --nexa-dur-esqueleto: 1600ms; /* barrido del esqueleto de carga */ /* Esqueleto: dos grises juntos, pero no tanto como para desaparecer. Se probo primero con neutro-150 y neutro-50 y sobre blanco no se veia nada: la barra tiene que separarse del fondo o no esta diciendo que viene contenido. Juntos entre si, si: si el contraste ENTRE los dos es alto, el barrido parece contenido de verdad y se intenta leer. */ --nexa-esqueleto-base: var(--nexa-neutro-200); /* #e9edf3 */ --nexa-esqueleto-brillo: var(--nexa-neutro-100); /* #f3f5f9 */ /* El velo de espera NO es el velo del dialogo. El del dialogo oscurece para apartar la pagina; este solo la apaga un poco para que se siga viendo donde estabas. */ --nexa-velo-espera: rgba(248, 250, 253, .72); /* ============================================================ CAPAS (z-index) ------------------------------------------------------------ PrimeFaces gestiona el suyo, asi que esto es solo para lo que escribamos nosotros. Se deja por debajo del 1000 que usa PrimeFaces para sus dialogos. ============================================================ */ --nexa-capa-base: 1; --nexa-capa-pegajosa: 10; /* cabecera de tabla que se queda arriba */ --nexa-capa-menu: 100; /* desplegable propio */ --nexa-capa-aviso: 900; /* banda de aviso de la pagina */ --nexa-capa-espera: 950; /* velo de espera: encima de todo lo nuestro */ } /* ============================================================ RESPETO POR QUIEN APAGA LAS ANIMACIONES ------------------------------------------------------------ Va aqui y no en la capa 2 porque es una decision del sistema, no de un componente. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --nexa-transicion: 0s; --nexa-dur-rapida: 0s; --nexa-dur-normal: 0s; --nexa-dur-lenta: 0s; } } /* ============================================================ LA FUENTE, APLICADA ------------------------------------------------------------ --nexa-fuente llevaba tiempo declarada y sin usar. Lexend se descargaba en cada pagina y no la pintaba nadie: el cuerpo corria con la pila de layout-blue.css y los componentes con la pila del sistema que trae el tema. Los cuatro sitios que hay que pisar salen de medir el CSS, no de adivinar: - body, que lo fija layout-blue.css - "body .ui-widget" del tema, que es el que alcanza a casi todo componente de PrimeFaces - los tres campos de escritura sueltos -autocomplete, chips y selectcheckboxmenu- que el tema declara aparte porque viven dentro de un contenedor de fichas - --font-family, la variable del tema: solo la lee input.ui-spinner-input en components.css, pero cuesta una linea dejarla apuntando al mismo sitio Los iconos NO entran: .fa y .pi resuelven su glifo por font-family, y pisarles la fuente los convierte en cuadros. Por eso se enumeran los campos en vez de usar un "*". ============================================================ */ /* --- El archivo de la fuente, declarado UNA vez -------------- Va AQUI y no en nexa-base.css ni en nexa-componentes.css, que es donde estaba repetido, porque este es el unico archivo que cargan las 74 pantallas: las de plantilla y las sueltas. Ahi estaba el fallo. Ninguna de las dos hojas anteriores la carga template.xhtml, asi que las 57 paginas con plantilla pedian Lexend y no la descargaba nadie: corrian con la primera de la lista de respaldo, la Segoe UI del sistema. No se veia porque la maqueta SI enlaza nexa-base.css. Ensenaba Lexend en pantallas donde la aplicacion no la tenia. La URL sale de una expresion de JSF y no de una ruta relativa porque este archivo lo sirve el manejador de recursos desde /javax.faces.resource/, donde "../fonts/" no resuelve. SON DOS BLOQUES Y NO UNO, y es el mismo corte que hace Google Fonts. Cada archivo trae un tramo del abecedario y el navegador descarga solo el que la pagina necesita: latin 28 KB todo el espanol, tildes y ene incluidas latin-ext 59 KB solo si sale un caracter de otro idioma Con una pantalla en espanol nunca se pasa del primero. La fuente es variable: esos 28 KB traen del peso 200 al 900, asi que usar cuatro pesos no cuesta un byte mas que usar uno. Y son woff2 y no ttf a proposito: es el mismo dibujo comprimido para la web. El ttf de Lexend pesaba 170 KB. CUIDADO al editar: JSF evalua las expresiones TAMBIEN dentro de los comentarios. Una expresion mal formada aqui arriba no rompe el comentario: deja la hoja entera en cero bytes, sin un solo error en el log. ------------------------------------------------------------ */ @font-face { font-family: 'Source Sans 3'; src: url("/interventoria/javax.faces.resource/fonts/SourceSans3-latin.woff2.xhtml?ln=nexa&v=1_3") format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Sans 3'; src: url("/interventoria/javax.faces.resource/fonts/SourceSans3-latin-ext.woff2.xhtml?ln=nexa&v=1_3") format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --font-family: var(--nexa-fuente); } body, body .ui-widget, body .ui-widget input, body .ui-widget select, body .ui-widget textarea, body .ui-widget button, body .ui-autocomplete .ui-autocomplete-multiple-container .ui-autocomplete-input-token input, body .ui-chips .ui-chips-container .ui-chips-input-token input, body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-input-token input { font-family: var(--nexa-fuente); }