/* ============================================================ * Lean UI — sistema de diseño de Citra * ------------------------------------------------------------ * Tokens: la ÚNICA fuente de la verdad de color, tipografía, * espaciado, radios, sombras y motion. Todo componente —del * panel de NetProof y del futuro portal de cliente— se construye * sobre estas variables, nunca sobre valores sueltos. * * Regla dura del proyecto: todo autohospedado, nada de CDN. La * fuente de titulares (Geist) se sirve en local desde /assets/fonts. * ============================================================ */ @import url("fonts/geist.css"); /* Reset mínimo del sistema. Vive aquí, con los tokens, porque es la base que * carga TODA página que use Lean —el panel, el login, el asistente, la guía— y * los componentes cuentan con él: `lean-field` y `lean-input` llevan padding y * borde, así que sin border-box un campo al 100 % se sale de su columna por la * suma de los dos. Es lo que pasaba en el login: los campos medían 26 px más * que el botón que tenían debajo. */ *, *::before, *::after { box-sizing: border-box; } /* Y `hidden` TIENE QUE PODER ESCONDER UN COMPONENTE. * * El navegador le da a `[hidden]` un `display: none` de hoja de usuario, y eso * lo pisa CUALQUIER regla de autor que declare `display` —o sea, casi todos los * componentes de aquí: `lean-boton` es `inline-flex`, `lean-vital` es `flex`—. * Sin esta línea, esconder un botón con el atributo no lo esconde y el marcado * miente. * * Vivía sólo en `app.css`, así que funcionaba en el panel y NO en las demás * páginas que usan Lean: el login, el asistente, la guía y el portal de cliente * cuando llegue. Se vio en la guía, donde la demostración del botón partido * enseña la flecha escondida y la flecha salía igual. * * Va aquí y no allí porque el reset es de quien tiene los componentes: una * defensa que hay que acordarse de copiar en cada página es una defensa que se * va a olvidar. Y va con `!important` porque compite contra el `display` del * propio componente, que es más específico por definición. */ [hidden] { display: none !important; } /* Y EL FOCO TAMPOCO ES DE LA APLICACIÓN. Viene por la misma puerta que * `[hidden]`, y por el mismo motivo escrito seis líneas más arriba. * * Vivía en `app.css:31`, y de las SIETE páginas que usan Lean sólo `index.html` * carga esa hoja: el login, el asistente, recuperar contraseña, el enlace con * un secreto, la pantalla de una pegatina y la guía se quedaban sin reset de * foco. Ahí sólo tenía anillo lo que Lean enfoca por su cuenta; un ``, un * `` o una fila tabulable no tenían ninguno, y en el asistente de * primer arranque eso significa que se podía recorrer media pantalla a ciegas. * * Es la misma frase de arriba, palabra por palabra: un reset que sólo protege a * una de las páginas del sistema no es un reset. Se escribió el día del * `[hidden]` y se reabrió con la línea de al lado. * * El `border-radius` que acompañaba al anillo NO se trae. Servía para redondear * el foco de lo que no tiene radio propio, pero de paso se lo IMPONÍA a todo lo * demás, y `outline` sigue el radio del elemento él solo desde hace años: lo * único que hacía era reescribir a 6px la esquina de cualquier cosa sin clase * mientras estaba enfocada, o sea cambiarle la forma por recibir el foco. */ :focus-visible { outline: var(--foco-ancho) solid var(--foco); outline-offset: var(--foco-hueco); } :root { /* Permite animar tamaños hacia/desde 'auto' (acordeón, contenido plegable). */ interpolate-size: allow-keywords; /* --- Superficies e ink --- * DOS tintas de texto, no tres. `--ink` es lo que se lee y `--muted` lo que * acompaña; `--faint` NO ES UN COLOR DE TEXTO y no debe usarse como tal. * * Lo fue, y daba 2,18:1 sobre blanco —por debajo incluso del mínimo para * texto grande— justo donde peor caía: en TODOS los subtítulos, en el sub de * cada signo vital y en los rótulos en versalitas, o sea en letra de 11 y 12 * píxeles. 142 declaraciones se pasaron a `--muted`, que da 4,61. * * Y no se arreglaba oscureciéndolo: para llegar a 4,5 habría que llevarlo a * #657A83, que es prácticamente `--muted` (#66787F). O sea que el peldaño no * existía —lo que había era `--muted` escrito dos veces, una de ellas * ilegible—. Lo que sí sigue haciendo bien es lo que NO se lee: iconos * decorativos, separadores y bordes, donde 2,18 es justo el punto de «está * ahí sin llamar la atención». */ --bg: #F5F8FA; --panel: #FFFFFF; --panel-2: #ECF3F6; --ink: #16242A; /* --ink-doc: la tinta de un DOCUMENTO, que no es la de una interfaz. * * En claro vale lo mismo que `--ink` y está bien así: tinta oscura sobre papel * claro es lo que lleva haciéndose quinientos años. Lo que cambia es el otro * tema — ver el bloque de oscuro, donde este token sí toma valor propio. */ --ink-doc: #16242A; /* --muted SE OSCURECIÓ UN PELDAÑO (16/9/26), y el motivo es medible: en * #66787F daba 4,11:1 sobre `--panel-2` y sobre `--hondo`, por debajo del 4,5 * que pide un texto. Y no era un caso raro: ahí viven `lean-head__count` —la * píldora de recuento de TODA cabecera de sección— y `.side-buscar`, que sale * en cada pantalla del panel. * * El razonamiento de aquí abajo ya anotaba que los colores de estado caen a * ~4,0 sobre `--panel-2`; lo que no contemplaba es que la tinta de apoyo cae * igual, y ésa se lee mucho más. * * Ahora: 5,09 sobre `--panel`, 4,77 sobre `--bg` y 4,54 sobre `--panel-2` y * `--hondo`. El tema oscuro no se toca: allí ya iba de 5,47 a 6,86. */ --muted: #607177; --faint: #A3B2B8; --line: #DCE7EB; /* --- Marca --- * `--on-brand` es LO QUE VA ENCIMA del cian, y no cambia con el tema porque * el cian tampoco cambia: `--brand` es #10B0E6 en claro y en oscuro. Tinta * clara encima daba 2,51:1 —el peor contraste de todo el sistema, y en el * botón principal de la aplicación—; oscura da 6,56:1 sin tocar el color de * marca, que es lo que había que conservar. * * Alcanza a seis sitios de golpe, y en todos era el mismo fallo: el botón * primario, el CTA, el tick de una casilla marcada, el punto de un radio, la * página activa del paginador y el degradado de una tarjeta. En los dos * primeros era texto; en los otros, formas, que también necesitan 3:1 y * tampoco llegaban. * * `--brand-hover` existe porque con tinta oscura el hover ya NO puede * oscurecer el fondo: cuanto más oscuro el relleno, menos se lee lo de * encima. Antes caía en `--brand-ink` (#0A87B4), que con esta tinta da 4,03 y * se queda corto. En oscuro sí aclara, y ahí vale el mismo valor de siempre. */ --brand: #10B0E6; /* EL CIAN QUE NO CAMBIA CON EL TEMA, y hace falta de verdad: en negro `--brand` pasa a ser blanco roto (ahí la identidad la lleva la luz), así que cualquier mezcla escrita contra `--brand` sale BLANCA en ese tema sin que nadie lo pida. Le pasaría al lavado y al filo del botón marcado, que tienen que seguir siendo cian en los tres temas porque ahí el color no dice «dónde estoy», dice «esto se puede hacer». */ --brand-fijo: #10B0E6; --brand-ink: #0A87B4; --brand-hover: #0D92BF; --on-brand: #06222E; /* --- LA TINTA DE LA ACCIÓN --- * * Lo que rellena el botón sólido. Existe desde que nació el tema negro, para * que un tema pueda separar «dónde estoy» de «qué puedo hacer»; era un alias * de la marca en claro y en oscuro, y aquí deja de serlo en los tres. * * POR QUÉ, Y ESTO SE MIDE. `--brand` es #10B0E6, que en OKLCH vale L=0.709. * El papel claro vale 1.00: o sea que el relleno de la acción queda casi a la * luz de la hoja, y entonces no se lee como un objeto SOBRE una superficie * sino como un parche de color DENTRO de ella. Y a esa luz sólo le cabe tinta * oscura encima —#06222E, que es lo que daba el 6,56 de contraste—, así que * el botón principal del panel era texto oscuro sobre color claro y saturado. * Esa combinación es la firma visual del plástico: en los paneles que se * sienten caros el relleno de acción está POR DEBAJO de la luz del papel y * lleva tinta blanca. El de aquí hacía lo contrario. * * EL TONO NO SE MUEVE. #10B0E6 está en H=229,6 y #076C90 en H=230,7: grado y * medio, que no se ve. Lo que baja es la luz (0.709 → 0.498) y el croma * (0.138 → 0.098). Sigue siendo el cian de NetProof; deja de ser un cian * ILUMINADO. Y el logo, las gráficas y los estados no se enteran: ahí el * color INFORMA y sigue yendo a plena saturación, que es exactamente el * reparto que ya escribió el negro —la luz dice dónde estás, el color qué * informa—, aplicado ahora a los tres temas. * * ESTE VALOR ES EL TECHO DE LUZ DEL BOTÓN, y por eso es el que se audita: * blanco sobre #076C90 da 5,90. El cuerpo del sólido se pinta con este color * en `background-color` y encima lleva un velo negro que OSCURECE hacia abajo, * así que ninguna parte del relleno es más clara que lo que dice el token. Al * revés —un degradado que aclara por arriba— la zona crítica de contraste * pasaría a ser una mezcla que no está escrita en ningún sitio. * * Y EN OSCURO EL HOVER ACLARA, así que el reposo tiene que dejarle sitio: por * eso allí el relleno es un peldaño más hondo (4,99 con blanco) y el hover * sube al valor que da 4,54, que es el mínimo justo. En claro pasa lo * contrario y es igual de sencillo: con tinta blanca, oscurecer MEJORA la * lectura, así que el hover baja a 6,86. */ --accion: #076C90; --accion-hover: #06627F; --on-accion: #FFFFFF; /* --- Y LA ACCIÓN ESCRITA, que no es la acción rellena --- * * El peso que faltaba (`lean-boton--marcado`): el perfil de siempre pero en * la tinta de la acción. Es para la acción preferente de un bloque cuando no * hay nada que RESOLVER —escanear una red, instalar el agente, dar de alta—, * que hasta ahora obligaba a elegir entre gritar en relleno o no decir nada. * * `--accion-tinta` NO es `--accion`: sobre el lavado, #076C90 da 5,51 y el * relleno tendría que leerse como texto. Aquí coinciden en claro y se separan * en oscuro, que es donde el lavado es oscuro y la letra tiene que aclarar. * * Los dos últimos se mezclan contra `--panel` y no contra `transparent`: un * lavado transparente sobre un diálogo —que ya es `--panel`— se suma dos * veces y el botón sale más teñido dentro de una ventana que fuera. */ --accion-tinta: #076C90; --accion-lavado: color-mix(in srgb, var(--brand-fijo) 7%, var(--panel)); --accion-filo: color-mix(in srgb, var(--brand-fijo) 45%, var(--panel)); /* Y EL PELDAÑO DE ENCIMA, que es el velo del puntero sobre el marcado. Tiene nombre por lo mismo que lo tiene `--accion-hover`: un botón ES una superficie y al apuntarlo cambia entera, así que el color del gesto no puede ser una mezcla escrita a mano en la regla. No vale `--al-pasar`, que es un velo de TINTA y sobre un lavado cian lo ensucia en vez de intensificarlo; ni `--elegido-2`, que bebe de `--brand` y en el tema negro se vuelve blanco roto — allí la selección es neutra a propósito y la acción conserva el cian. */ --accion-lavado-2: color-mix(in srgb, var(--brand-fijo) 15%, var(--panel)); --accion-filo-2: color-mix(in srgb, var(--brand-fijo) 62%, var(--panel)); /* El rojo RELLENO, que sólo lleva el botón que confirma lo irreversible. El de perfil se sigue sacando de `--down`; éste es más oscuro porque tiene que sostener tinta blanca (5,63) y porque un rojo claro relleno se lee como una alarma encendida y no como un botón. */ --down-solido: #C42B2B; /* El filo de luz de 1 px que llevan los rellenos por arriba. Es lo que hace que un rectángulo plano parezca una pieza física, y baja en oscuro porque ahí el mismo valor se convierte en un borde blanco visible. */ --filo-luz: rgba(255,255,255,.26); /* Y EL VELO QUE LE DA CUERPO. Va en `background-image` y es CONSTANTE: lo que viaja en el hover es el `background-color` de debajo, que sí se interpola. Un `linear-gradient` no se puede animar, y ése era el motivo de que el relleno saltara mientras el borde y la sombra viajaban. */ --velo-cuerpo: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .11)); /* --velo-tinta: el color del velo que oscurece la página detrás de un modal. * * Estaba escrito a mano —`#0a1014`— en cinco sitios, y ese negro lleva el * tinte azulado del tema oscuro. En claro y en oscuro no se nota; en NEGRO, * que es neutro, el velo teñía de azul toda la página de detrás y abrir * cualquier modal parecía cambiar el tema al oscuro «solo por la cara» * (Leandro, 19/9/26). Un velo tiene que oscurecer lo que hay, no cambiarle el * color: por eso es del tema. El negro lo redefine abajo. */ --velo-tinta: #0a1014; /* --enlace-ink: el cian de un enlace DENTRO DE UN TEXTO, y no es `--brand-ink`. * * Un enlace en prosa es texto corriente, así que le toca el 4,5:1 de texto, y * `--brand-ink` sobre el panel se queda en 4,09 —el mismo motivo por el que * unas líneas más arriba no vale para `--brand-hover`—. Éste da 4,83, y * contra la tinta que lo rodea 3,29, que es el otro mínimo: el de una forma * que hay que distinguir de lo que tiene al lado. * * En OSCURO no hace falta un valor propio: allí `--brand-ink` (#4FC8F0) da * 8,66 sobre el panel y va sobrado. Se redefine igualmente en los dos bloques * de tema, porque un token que sólo existe en claro es el que un día alguien * lee en oscuro y se encuentra el de claro. */ --enlace-ink: #0A7B9F; /* --- EL ANILLO DE FOCO --- * * Era lo único del sistema que se decidía a ojo en las dos hojas a la vez: * SEIS formas de anillo —`2px solid var(--brand)`, `2.5px` con la marca al * 62 %, `2px` con la marca al 62 %, `--brand-ink`, y hasta un punteado de * 1,4px en el chasis— repartidas por treinta y una declaraciones, con cuatro * separaciones distintas (3px, 2px, 1px y −2px). * * Y EL NÚMERO NO DABA. `--brand` sobre blanco son 2,51:1 —está escrito en * `paleta_test.go` y se aceptó a sabiendas, porque para la MARCA es el color * correcto y no se toca—, pero un indicador de foco pide 3:1 contra lo que * tiene al lado. Peor todavía era el caso mayoritario: `lean-boton`, la pieza * que más veces se enfoca del panel, usaba la marca al 62 % sobre el papel, * o sea 1,79. En el tema oscuro ese mismo código da 6,68, así que la * navegación por teclado se veía en un tema y no en el otro — y eso no es una * preferencia estética, es media accesibilidad del panel. * * SE CONSERVA EL ARGUMENTO Y SE ARREGLA EL NÚMERO. El foco sigue siendo la * marca, porque lo que dice es DÓNDE ESTÁS y eso es lo que la marca significa * aquí; lo que cambia es que se escribe con la marca que se LEE, que es la * misma distinción que ya existía entre `--brand` y `--brand-ink` para los * enlaces. Da 4,09 en claro y 8,66 en oscuro: los dos por encima de 3. * * El hueco es de 2px y no de 1: con 1px el anillo toca el borde del control y * se lee como un borde más grueso, no como un foco. El de DENTRO existe para * lo que no tiene fuera —una fila de tabla, una opción de lista—, donde un * anillo por fuera se comería a la fila vecina. */ --foco: var(--brand-ink); --foco-ancho: 2px; --foco-hueco: 2px; --foco-dentro: -2px; /* --- Estado (semántico; nunca como color de acento decorativo) --- * Los tres se leen COMO TEXTO —en un distintivo, en una etiqueta, en la cifra * de un signo vital—, así que tienen que cumplir como texto. El verde estaba * en 3,38 y el ámbar en 3,45 sobre blanco; ahora los tres rondan 4,5. Mismo * tono y misma saturación: sólo baja la luminosidad. * (Sobre `--panel-2` se quedan en ~4,0. El fondo que manda es `--panel`.) */ --ok: #12884E; --warn: #AD6512; --down: #D93A3A; /* --- Novedad --- * Lo que acaba de llegar a una lista (ver `lean-nueva`). * * ES EL AZUL DE MARCA, Y LO QUE LO SEPARA DE «LO SELECCIONADO» NO ES EL COLOR: * ES QUE RESPIRA. Aquí el mensaje lo lleva el movimiento y el color sólo * acompaña, así que no hay significado nuevo que aprenderse —lo que late y se * calma se lee como «esto acaba de pasar» sin que nadie lo explique— y no se * confunde con la selección, que nunca late. * * Fue tinta blanca, y era defendible: los cinco colores de la casa ya dicen * algo —azul lo seleccionado, verde bien, rojo cuidado, ámbar no responde— y * un sexto color sólo para esto obliga a aprenderse otro significado. Pero el * blanco a plena tinta sobre el tema oscuro salta más que el contenido de la * propia tarjeta: pesa como una alarma para decir «ha llegado una red». El * latido dice lo mismo más bajo, que es lo que hacía falta. */ --nuevo: var(--brand); /* Y LA TINTA DEL DISTINTIVO (`lean-reciente`) NO PUEDE SER `--brand-ink`. Sobre el relleno del propio distintivo —azul al 12 % sobre el panel— da 3,67, y ahi va texto de 11 px, que necesita 4,5. Es el mismo cian bajado de luminosidad hasta 5,16 y ni un tono mas: lo que se corrige es el contraste, no el color, que sigue siendo el de la marca. En oscuro no hace falta bajarlo —el relleno ya es oscuro— y vale el mismo que el resto de la tinta de marca. */ --nuevo-ink: #0A6E92; /* --- LO ELEGIDO --------------------------------------------------------- * * El fondo de lo que está SELECCIONADO: el destino donde estás, la solapa * abierta, la opción marcada de un menú, el tema puesto. Un lavado plano de * marca, que es la señal que el panel ya usaba en el lateral. * * ESTE TOKEN EXISTE PORQUE EL ROL NO TENÍA NOMBRE, y sin nombre cada pantalla * se inventaba el suyo. Auditado el 27/8/26 sobre las dos hojas: había CUATRO * intensidades de marca para decir lo mismo —8 % en el destino del lateral, * 13 % en la nav de Ajustes, 16 % en la marca puesta de un bloque, 6 % en el * hover de siete listas— y, peor, `--panel-2` haciendo de las tres cosas a la * vez: superficie de una cabecera, fondo del hover en treinta y siete sitios y * «esto está elegido» en ocho. Con el mismo color diciendo «pasas por encima», * «estás aquí» y «esto es una cabecera», ninguna de las tres se lee. * * La partición que queda, y es la que hay que respetar: * * · superficie de una cabecera o de una caja hundida → --panel-2 * · el puntero está encima → --al-pasar * · esto está elegido / estás aquí → --elegido * * Los tres dicen cosas distintas y por eso son tres, y no dos con un color * repetido: un papel distinto, un velo de tinta encima del papel que haya, y * una tinta de marca. Lo elegido es lo único que se colorea, porque es lo * único que hay que encontrar de un vistazo entre veinte filas iguales. * * `--elegido-2` es el peldaño de encima: lo elegido cuando además se pulsa o * se pasa por encima, y el anillo de foco de un campo. */ /* --- EL VELO DEL PUNTERO ------------------------------------------------- * * Lo que se pone encima de una fila, un botón o una baldosa mientras el ratón * está ahí. Es un VELO y no una superficie: no dice qué es esa fila, dice que * la estás apuntando, y por eso se pinta con tinta y no con un papel distinto. * * Antes era `--panel-2` en treinta y siete sitios, o sea el mismo color con el * que se pinta la cabecera de una tabla y la fila que agrupa por cliente en * Equipos. Con eso, pasar el ratón por un equipo lo dejaba idéntico a la * cabecera de su grupo dos filas más arriba. Lo cazó Leandro el 27/8/26. * * En tinta funciona sobre cualquier fondo —el papel blanco, la caja hundida, * la propia cabecera— y en los dos temas: `--ink` es casi negro en claro y * casi blanco en oscuro, así que el velo oscurece o aclara según toque. Un * color fijo sólo habría valido para uno de los dos. */ --al-pasar: color-mix(in srgb, var(--ink) 6%, transparent); /* EL MISMO VELO PARA UNA SUPERFICIE GRANDE, y hace falta un peldaño porque el * velo no se percibe por su porcentaje sino por los píxeles que tiñe. * * El 6 % está calibrado sobre una FILA —36 px de alto, la de una tabla— y ahí * es exacto. Un bloque que se apunta entero es otra cosa: el cajón de una * categoría de la Wiki mide 66 x 660 px, cuatro veces esa superficie, y con el * 6 % deja de leerse como «estás encima» y pasa a leerse como que el bloque se * enciende. Medido en oscuro: el velo deja el papel a 1,79 veces la luminancia * del que tiene debajo, o sea MÁS de lo que lo aclara cambiar de papel * (`--panel-2` se queda en 1,55). Lo cazó Leandro el 28/8/26. * * Sigue siendo TINTA y no un papel distinto, así que vale sobre lo que haya * debajo y en los dos temas. La regla al elegir uno u otro: ¿lo que se vela es * una fila de una lista, o un bloque? */ --al-pasar-leve: color-mix(in srgb, var(--ink) 3%, transparent); --elegido: color-mix(in srgb, var(--brand) 8%, transparent); --elegido-2: color-mix(in srgb, var(--brand) 16%, transparent); /* --- LA ALTURA DE UNA SUPERFICIE ----------------------------------------- * * La partición de arriba dice QUÉ ES un color —papel, velo o tinta— y estaba * bien. Lo que no decía era A QUÉ ALTURA está el papel, y por eso el panel * tenía DOS peldaños de superficie para CINCO alturas distintas. Auditado * sobre el parque real el 9/9/26, y sale de leer una sola línea de la hoja: * * lean-tarjeta · lean-section · lean-menu · lean-notificacion · * lean-dialog · lean-pillbar → todos `background: var(--panel)` * * Seis piezas que están a cuatro alturas distintas pintadas del mismo color. * Lo único que las separaba era `--shadow` contra `--shadow-lg`, y en el tema * oscuro una sombra sobre casi negro no se ve: un menú desplegado sobre una * tarjeta era literalmente el mismo papel con un borde en medio. * * Y el caso que lo enseña mejor es la ficha: `lean-cajon--lienzo` se pinta con * `--bg`, o sea CON EL COLOR DEL SUELO QUE ESTÁ TAPANDO. Con el velo del 45 % * por medio, el contenido de detrás queda en #0B1114 y el cajón en #0E1519: * tres niveles de gris entre lo que está delante y lo que está debajo. * * LAS TRES ALTURAS, Y CADA TEMA LAS DICE COMO PUEDE. Esto no es una excepción * por tema: es física. En un mundo claro no hay nada más blanco que el blanco, * así que lo que se levanta proyecta SOMBRA y el papel no cambia. En un mundo * oscuro una sombra no se ve, así que lo que se levanta RECIBE LUZ. Es lo que * hacen todos los sistemas que sobreviven a los dos temas, y es la razón de que * en claro dos de estos tokens valgan lo mismo — no es un descuido. * * --hondo lo que es un RECEPTÁCULO dentro de una superficie: un campo, * el carril de un conmutador, un bloque de código. Baja. * --alzado lo que se levanta SIN tapar: un menú, un globo, una * notificación, una barra flotante de acciones. * --delante lo que se pone delante CON velo: un diálogo, un cajón. * * `--panel-2` NO ES `--hondo`, y ésa es la corrección más fina de todas. Su * comentario decía «cabecera o caja hundida» —dos cosas opuestas— y en oscuro * sólo una puede ser verdad, porque allí `--panel-2` es más CLARO que * `--panel`: una cabecera se eleva, un receptáculo se hunde. Se queda para lo * primero, que es lo que de verdad hace en las tablas y en el segmentado. */ --hondo: #ECF3F6; --alzado: #FFFFFF; --delante: #FFFFFF; /* El borde de lo que está elevado. En claro no cambia —la sombra ya lo dice—; en oscuro aclara, porque allí el borde es la mitad del trabajo. */ --linde-alto: var(--line); /* Y LA TERCERA SOMBRA, que es la que faltaba: dos niveles de sombra para cuatro alturas es el mismo problema de arriba en la otra propiedad. */ --shadow-xl: 0 24px 60px -16px rgba(22,36,42,.32), 0 4px 12px -4px rgba(22,36,42,.12); /* --- Radios --- */ --r: 12px; --r-s: 8px; --r-xs: 6px; --r-pill: 100px; /* --- Y LOS DOS QUE FALTABAN POR ABAJO --- * * La escala se acababa en 6 px, y por debajo de 6 px vive medio panel: la * barra de una gráfica, el cuadradito de una leyenda, una tecla, el hueco de * una boca de switch, el chip de un dato. Sin peldaño al que acogerse, cada * uno se escribió el suyo: había OCHO números sueltos —1 · 1,5 · 2 · 2,5 · 3 * · 4 · 5 · 7— repartidos por setenta y un sitios. * * Es exactamente el síntoma que la nota de la escala de letra describe con * los medios píxeles: 2,5px no es una decisión, es lo que se escribe cuando * no hay dónde mirar. Y lo delata que DOS DE LOS OCHO ESTABAN EN LEAN —el 7 * de `lean-tip` y el 5 de `lean-check`—: si el sistema se salta su propia * tabla es que la tabla no llegaba hasta donde hacía falta. * * Dos y no cuatro, por lo mismo que arriba: entre 2 y 4 px no cabe un * peldaño que el ojo separe. Y la proporción se sostiene —2 sobre una barra * de 6 px da 0,33; 4 sobre una tecla de 18 da 0,22—, que es la misma regla * de `--r-ctl`: la esquina se percibe contra el alto de lo que la lleva. */ --r-micro: 2px; /* lo diminuto: una barra, un segmento, un cuadro de leyenda */ --r-xxs: 4px; /* lo pequeño con cuerpo: una tecla, un chip, un marcador */ /* --- EL RADIO DE UN CONTROL ES PROPIEDAD DE SU TALLA --- * * Las tres tallas compartían `--r-s` (8 px), y eso no es «uniforme»: es lo * contrario. La esquina se percibe en PROPORCIÓN al alto, así que con un solo * número el botón pequeño salía a 0,267 y el grande a 0,182 — puestos en la * misma fila, que es donde viven, no se leen como una pieza en dos tamaños * sino como dos piezas distintas. Se ve saltando de la barra de una lista * (--sm) a un pie de diálogo (--md). * * Con la escala los tres rondan 0,27 y la familia se cierra: * * --sm 30 px → 8 px (0,267) * --md 36 px → 10 px (0,278) * --lg 44 px → 12 px (0,273) * * VA CON `--ctl-h`, NO CON EL BOTÓN, y de ahí sale casi todo su valor: lo que * mida una talla lleva su radio, sea botón, campo, desplegable o buscador. Si * subiera sólo el botón, en la barra de Equipos —donde comparten fila los dos * a 36 px— la diferencia de dos píxeles se vería como un descuido. * * NO ES PÍLDORA a propósito. El redondeo total ya significa algo en esta casa * —`lean-segmented--pill` y `lean-pillbar`, que es cuando el control hace de * navegación—, y dárselo también al botón borra esa distinción. Diez sobre * treinta y seis es donde la esquina se lee como superelipse y no como corte, * y en un panel denso el canto recto sigue siendo con lo que el ojo alinea * una fila. */ --r-ctl-sm: 8px; --r-ctl: 10px; --r-ctl-lg: 12px; /* --- Escala de espaciado (base 4) --- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* --- Altura de control --- * TRES tallas, y son las únicas. Todo lo que se pulsa o se rellena y puede * acabar en la misma fila que otra cosa —botón, campo, desplegable, buscador, * segmentado— mide una de éstas. No es cosmética: la altura la fijaba antes el * contenido, así que el MISMO botón medía 31 px con texto y 33 px con icono, y * al lado de un campo de 38 px no había fila que cuadrase. Trece alturas * distintas llegó a haber en el panel. * * md el defecto: barras de herramientas, formularios, diálogos. * sm denso: acciones dentro de una tabla o de la barra de una ficha. * lg las puertas de entrada (login, asistente) y algún CTA a página completa. * * Al añadir un control nuevo se le pone una de las tres, nunca un número. */ --ctl-h: 36px; --ctl-h-sm: 30px; --ctl-h-lg: 44px; /* --- Capas --- * QUÉ TAPA A QUÉ, dicho una vez y con nombre. Antes eran trece números * sueltos repartidos entre esta hoja y `app.css` —1, 2, 3, 40, 50, 60, 70, * 80, 90, 120, 130, 200, 300—, así que la única forma de colocar algo nuevo * era buscar el número más alto que hubiera y sumarle diez. Así se llega a un * menú del lateral en 130 para ganarle a un menú del sistema en 120, que es * exactamente la escalada que un token evita. * * El orden ES el argumento, y se lee de abajo arriba: el velo apaga la * página, el cajón va sobre el velo, lo que sale de un campo va sobre el * cajón, un menú va sobre todo eso, un aviso interrumpe, y el globo de ayuda * gana siempre porque explica lo que hay debajo. * * OJO con lo que NO va aquí: un `z-index: 1` para poner un punto encima de la * línea que lo cruza no es una capa de la aplicación, es orden dentro de una * caja. Ésos se quedan con su número, y está bien: meterlos en la escala * haría creer que compiten con el menú, y no se ven ni de lejos. * * Y no está aquí el diálogo: `lean-dialog` es un de verdad, y el * navegador lo sube al top layer, por encima de todo esto y sin z-index. Los * dos números de modal que quedan (70 y 80) son del modal a mano de app.css, * anterior a que el diálogo fuera nativo. */ --z-fondo: -1; /* el tinte que se pinta DETRÁS del contenido (lean-calor) */ --z-pegado: 2; /* cabecera o pie sticky dentro de una superficie */ --z-velo: 40; /* el velo que apaga lo de detrás */ --z-cajon: 50; /* el cajón de detalle */ --z-anclado: 60; /* lo que se despliega de un campo y sigue a su ancla */ --z-modal: 80; /* la ventana a mano de app.css (su velo, diez por debajo) */ --z-menu: 120; /* los menús desplegables */ --z-aviso: 200; /* lo que aparece en la esquina a contar algo */ --z-globo: 300; /* el globo de ayuda: explica lo de debajo, así que gana */ /* --- Sombras y motion --- */ --shadow: 0 1px 2px rgba(22,36,42,.04), 0 8px 24px -16px rgba(22,36,42,.20); --shadow-lg: 0 12px 40px -12px rgba(22,36,42,.28); --ease: cubic-bezier(.4,0,.2,1); --t: 220ms; --t-fast: 140ms; /* --- Las otras dos curvas, y cuándo toca cada una --- * `--ease` sirve para casi todo y se queda como el defecto. Lo que le falta * son los dos extremos, y sin ellos el movimiento del panel se siente * correcto pero plano: todo arranca y frena igual, así que nada parece tener * peso ni prisa. * * `--ease-entra` es lo que hace que algo que APARECE se sienta acabado: sale * disparado y frena largo, así que la última mitad del recorrido es casi toda * la duración y el ojo lo lee como que se posa en su sitio en vez de como que * llega. Es la diferencia entre una lista que se monta y una que salta. * Sólo para lo que entra —opacidad y desplazamiento—, nunca para un hover: * en 120 ms de hover una curva tan asimétrica se percibe como un retardo. * * `--ease-sale` es la contraria y es más corta de aplicar: lo que se va no * merece la atención de quien mira, así que arranca sin ceremonia. Un cierre * con la misma curva que la apertura es lo que hace que un menú «cueste» de * cerrar. * * Los números no son de una biblioteca: son la pareja clásica de expo-out y * expo-in recortada para que la salida no se vaya de 120 ms, que es donde * empieza a notarse la espera al cerrar algo. */ --ease-entra: cubic-bezier(.16, 1, .3, 1); --ease-sale: cubic-bezier(.55, 0, 1, .45); --t-sale: 120ms; /* --- LA CUARTA CURVA: la de lo que VIAJA estando ya en pantalla ----------- * * Las tres de arriba son para lo que aparece, lo que se va y lo que se posa. * Faltaba la de lo que NO cambia de estado: la fila que se recoloca al * ordenar, la tarjeta que vuela de la lista a la ficha. Ahí el elemento ya * estaba y va a seguir estando; lo único que cambia es DÓNDE. * * `--ease-entra` no vale, y es un error fácil de cometer porque «también se * mueve». Frena durante casi todo el recorrido, que es justo lo que hace que * una aparición se sienta acabada — y lo que hace que un desplazamiento corto * se lea como que la fila RESBALA hasta pararse. Un objeto que va de un sitio * a otro acelera y frena de forma más pareja. * * Se parece mucho a `--ease`, y la diferencia es que arranca un pelo más * deprisa: eso es lo que hace que el ojo enganche la fila al principio del * recorrido en vez de a mitad. En 320 ms se nota; en los 140 de un hover no se * notaría, y por eso `--ease` sigue siendo el defecto de todo lo demás. */ --ease-mueve: cubic-bezier(.2, .8, .2, 1); /* Y CUÁNTO DURA ESE VIAJE. Más que una entrada porque aquí no se trata de que * algo aparezca, sino de que el ojo PUEDA SEGUIRLO: a 150 ms el recorrido no * se ve, se adivina. Es el mismo número que `::view-transition-group` llevaba * escrito a mano en components.css desde que existe `Lean.transicion`; ahora * los dos salen de aquí en vez de estar puestos dos veces. */ --t-mueve: 320ms; /* EL RETARDO ENTRE HERMANOS, que es lo que separa una coreografía de un * parpadeo colectivo: primero llega el continente y después el contenido, y * entre dos cosas que llegan seguidas van dieciocho milisegundos. * * NO TENÍA TOKEN y sí tenía número: `componer` lo lleva escrito en `lean.js` * desde que existe, y `docs/animaciones.md` §3.2 lo cita como «el retardo entre * hermanos es 18 ms». O sea, un valor del vocabulario escrito en dos sitios y * en ninguno de los dos como token — que es exactamente la forma en que dos * tiempos que dicen lo mismo acaban siendo distintos. * * Es un RETARDO y no una duración, así que no entra en la escala de `--t-*`: * lo que mide es cuánto espera el segundo, no cuánto tarda ninguno. */ --escalon: 18ms; /* EL RELEVO DE UNA BARRA QUE SE RECOLOCA, que es el hermano del `--escalon` * para lo que no llega en fila sino que OCUPA UN SITIO. * * Cuando un mando se pliega y otro entra a ocupar su hueco, los dos gestos no * pueden correr a la vez: se disputan los mismos píxeles y el ojo lee un * salto, no un movimiento. Primero se hace el hueco —eso es lo que dura * `--t-sale`— y sólo entonces entra lo que viene. * * Es un RETARDO, como `--escalon`, y por eso tampoco entra en la escala de * `--t-*`. La diferencia entre los dos: `--escalon` separa a dos que llegan, * éste separa al que se va del que llega. */ --releva: 110ms; /* EL CAMBIO DE PANTALLA, que es la costura que no tenía tiempo propio. * * Ni `--t-entra` ni `--t`: cambiar de sección no es que aparezca una caja, es * que se sustituye TODO lo que hay delante, y lo que se sustituye entero pide * un poco más de recorrido para no leerse como un parpadeo. Por encima de 300 * el operador nota que el panel le hace esperar, y aquí se entra cincuenta * veces al día; por debajo de 200 no se distingue del corte seco que esto * viene a arreglar. 240 es donde deja de verse el corte y todavía no se ve la * espera. * * VA CON `--t-sale` DELANTE, nunca solo: lo que se va sale en 120 y lo que * llega entra en 240, solapados. Los dos números juntos son el relevo; este * token a secas, sin que lo anterior se haya ido, son dos pantallas * superpuestas durante un cuarto de segundo. */ --t-vista: 240ms; /* EL HUNDIDO DE UN CONTROL AL PULSARLO. * * El tiempo más corto de la hoja, y tiene que serlo: esto no cuenta nada, sólo * acusa recibo. Es el umbral por debajo del cual el gesto SE SIENTE y no se * ve, que es la diferencia entre un botón que responde y uno que se hunde * delante de ti. Con los 140 de `--t-fast` ya se percibe como un retardo al * pulsar seguido, que es exactamente lo contrario de lo que se busca. * * No se usa para nada más. Un color que cambia al pasar por encima sigue * siendo `--t-fast`: eso sí es una transición entre dos estados y necesita * verse ocurrir. */ --t-pulsa: 70ms; /* --t-releva: LO QUE ESPERA LO QUE LLEGA A QUE SE APARTE LO QUE SE VA. * * No es una duración, es un RETARDO, y es el único de la casa que tiene nombre * propio. Existe porque el encadenado ya ha aparecido tres veces —el anillo * que entra detrás de la cara, el cajón que releva su contenido, y salir de * una ficha a otra sección— y un valor que se repite tres veces sin nombre * acaba escrito de tres maneras. * * SESENTA Y NO CIENTO VEINTE, o sea la MITAD de `--t-sale` y no su total: lo * que llega arranca cuando lo que se va lleva medio camino, no cuando ha * terminado. En serie, salir de una ficha a otra sección son 120 + 80 + 150 = * 350 ms hasta ver la sección nueva; solapado son 290, por debajo del umbral * en el que un gesto se empieza a sentir lento. Y sobre todo: encadenado se * leen tres movimientos, solapado se lee uno. * * No se usa para «lo mismo pero más tarde» —eso es un escalonado, y ése va en * 18 ms entre hermanos—: esto es para DOS cosas distintas que se turnan un * hueco. */ --t-releva: 60ms; /* LA ÚNICA VELOCIDAD A LA QUE GIRA UNA RUEDA EN ESTE PANEL. * * Había cinco `@keyframes` de rotación repartidos por once sitios, con tres * velocidades —0,7s, 0,9s y 1,1s— y todos diciendo lo mismo: «espera». Puestos * juntos se ven desacompasados, y es el mismo defecto que esta hoja ya explicó * al unificar las nueve entradas: lo que se percibe como «hecho a trozos» no * es que algo se mueva mal, es que dos cosas que dicen lo mismo se mueven * distinto. * * SE ELIGE 0,9 PORQUE ES LA MAYORITARIA (`lean-girar` y `lean-presencia-giro`), * o sea la que menos sitios obliga a tocar, y porque es la que va a juego con * el anillo de quien está editando — que es el gesto de espera más visible que * tiene el panel. * * LA EXCEPCIÓN, y es la única: `lean-haciendo` sin plazo (1,1 s la vuelta). * Ése no es un «cargando» genérico, es un anillo de PROGRESO que ha perdido * su porcentaje, y vive pegado a una cara. Gira más despacio a propósito, * para no competir con el avatar que lleva dentro. Desde la 1.154.0 lo gira * el motor de `lean.js` (ver `Lean.haciendo`), no una animación de esta hoja. */ --t-giro: .9s; /* Y SU HERMANO, EL RITMO DE LO QUE BARRE: `--t-espera`. * * Es la misma historia que `--t-giro` y se encuentra por el mismo método — * buscar un número repetido y preguntar qué significa—. Girar no es la única * forma que tiene esta casa de decir «esto sigue en marcha»: también está * BARRER, que es lo que hacen el trazo del electrocardiograma al medir, el * brillo que recorre un esqueleto, la barra sin porcentaje y la rueda lenta. * * Los OCHO estaban a 1,4 s, escrito ocho veces en dos hojas: el barrido de * `lean-barrer-traza` (dos sitios), su gemelo `np-barrer-traza` de la consola, * el brillo de `lean-sk-brillo`, la respiración de `lean-rueda--lenta` (con su * duración repetida al lado), `lean-subiendo` y la barra indeterminada de la * prueba de conexión. Ocho aciertos seguidos es un valor de diseño que nadie * escribió, y el noveno habría sido 1,5 sin que nadie lo notara. * * NO SE CONFUNDE CON `--t-giro`, y la diferencia es la del §3.4: girar sólo * significa «espera» cuando lo que gira es una flecha circular; barrer lo * significa cuando lo que barre RECORRE algo —un trazo, una caja, un cable—. * Son dos gestos distintos para la misma idea y por eso llevan dos ritmos. * * Fuera se queda `lean-membrete-destello`, que también dura 1.400 ms y NO es * esto: es un destello de una sola pasada, no un ciclo de espera. Comparte el * número y no el significado, que es justo lo que un token no debe juntar. */ --t-espera: 1.4s; /* Y EL RITMO DE «ESTO ESTÁ VIVO»: el halo del punto que responde y el anillo * de quien está escribiendo. Los dos latían ya a 2,4 s cada uno por su lado; * el token no cambia nada hoy, y existe para que el tercero que haga falta no * sea 2,2. * * NO SE CONFUNDE CON `--t-latido` (4 s), y la diferencia importa: aquél es el * ritmo de lo que ACABA DE LLEGAR y se apaga solo, éste el de lo que está ahí * ahora mismo y no se apaga mientras siga estándolo. Uno es una noticia y el * otro un estado. */ --t-vivo: 2.4s; /* EL GOLPE SECO, que es de la consola y llega de ella. * * Vivía en el `:root` de `app.css` junto a `--inercia`, con un razonamiento * que se sostiene entero —«una máquina tiene inercia, NO rebote: un aparato de * medida que rebota no inspira confianza»— y por eso sube tal cual en vez de * retirarse. Lo que sí se retira es su compañera: `--inercia` valía * `cubic-bezier(.16,1,.3,1)`, que es `--ease-entra` byte a byte. La misma * curva con dos nombres en dos hojas, y la de la hoja de una sola pantalla * ganaba por estar más cerca. * * Es para un PULSADOR: el mando de un instrumento que se hunde y vuelve sin * ceremonia. Fuera de la consola casi nunca es lo que se quiere —un botón de * la aplicación usa `--t-pulsa` con `--ease`—, pero el token vive aquí porque * un valor que gobierna movimiento no puede estar declarado en la hoja de una * sola pantalla. */ --mecanico: cubic-bezier(.2, 0, .1, 1); /* --- Y LA ÚLTIMA: `--asienta`, la única que se pasa de largo -------------- * * Las dos de arriba llevan a su destino y frenan. Ésta lo REBASA un poco y * vuelve, que es lo que hace un objeto con masa cuando se posa. * * Existe para UN caso y no debe usarse fuera de él: cuando algo APARECE ENTRE * lo que ya está y le abre hueco. Ahí las de arriba se quedan cortas porque no * es lo mismo que algo entre en un sitio vacío que que la lista se separe para * dejarle sitio: en lo segundo el ojo espera ver ceder a lo de al lado, y sin * el rebase el desplazamiento se lee como un salto de maquetación —el mismo * gesto que hace una página mal hecha cuando le carga un anuncio tarde—. * * `linear()` y no `cubic-bezier()` porque una Bézier de un solo tramo no puede * pasar de 1 y volver: son puntos de una curva muestreada, que es como se * escribe un muelle en CSS puro sin una biblioteca detrás. * * EL REBASE ES DEL 4 %, y ése es el número que hay que respetar al tocarlo. En * una fila de 44 px son menos de dos píxeles: se percibe como peso, no como * rebote. Al 10 % ya se ve saltar y una tabla de trabajo se convierte en un * juguete; por debajo del 2 % no se distingue de `--ease-entra` y entonces * sobra la curva. * * Y NO ES PARA UNA LISTA ENTERA. Veinte cosas rebasando a la vez no es peso, * es gelatina: cuando llegan muchas de golpe lo que toca es la cascada, con * `--ease-entra` (ver `Lean.componer`). * * QUIÉN LO USA, para que la regla de arriba se pueda comprobar de un vistazo y * no haya que fiarse de que se respeta: `lean-bloque--llega` y * `lean-bloque--viaja` (el editor de la Wiki), `Lean.entraFila` y * `Lean.devolverASuSitio` (las tablas), y `.lista-acotado` en app.css (el chip * que acota una lista). Los cuatro primeros mueven UNA cosa que se abre hueco; * el chip es uno solo y empuja la lista de debajo, que es el mismo caso visto * del otro lado. Ninguno anima un conjunto. */ --asienta: linear(0, .42 12%, .85 26%, 1.04 42%, 1.008 62%, 1); --t-asienta: 380ms; /* EL ESCALONADO de una lista que entra, y su tope. * * 40 ms es lo que separa dos filas para que se lean como una secuencia y no * como un baile: por debajo de 25 se percibe como ruido —todo a la vez, pero * mal—, y por encima de 60 el último de ocho llega medio segundo tarde y la * lista se siente lenta al cargar. * * Y SE CORTA A LOS SEIS, que es lo que evita el telón: con cuarenta filas * escalonadas, las últimas entran cuando el operador ya está leyendo las * primeras, y lo que era un detalle se convierte en una espera. A partir del * sexto entran todas juntas con el retraso del sexto. * * ESE SEIS NO ES UN TOKEN, y no por descuido: lo hubo (`--stagger-tope`) y no * lo leía nadie. Un tope de escalonado se escribe en un `:nth-child(n+6)`, y * un selector no admite variables —sólo el `calc` del retraso las admite—, así * que el token gobernaba la mitad de la regla. Quien lo hubiera subido a 8 * habría cambiado el retraso del último peldaño y NO cuántos peldaños hay, con * la hoja diciendo ocho y la pantalla haciendo seis. Un token que manda en * media regla es peor que ninguno: promete un control que no tiene. El seis va * escrito donde se aplica, en `app.css`, con esta explicación al lado. */ --stagger: 40ms; /* LA ENTRADA DE ALGO QUE APARECE: una sola duración y una sola distancia para toda la aplicación. Había NUEVE animaciones de entrada con seis duraciones (140, 160, 190, 220, 320 y 460 ms) y cinco distancias (2, 4, 8, 10 y 12 px). Ninguna estaba mal por separado; juntas es lo que hace que un panel se perciba «hecho a trozos» sin que nadie sepa decir por qué. 150 ms es lo que tarda en leerse como un movimiento y no como un parpadeo, sin llegar a ser una espera: por encima de 200 el operador nota que el panel le hace aguardar, y esta pantalla se abre cincuenta veces al día. 6 px es desplazamiento suficiente para que se lea la dirección del gesto; con 12 parece que la caja «cae» y con 2 no se distingue de un desvanecido. */ --t-entra: 150ms; --entra-y: 6px; /* El LATIDO de lo que acaba de llegar, y cuánto tarda en apagarse (`lean-nueva`). Son los dos únicos tiempos de esta hoja medidos en segundos, y no desentonan: no son animaciones de interfaz, son el ritmo y el final de una novedad. CUATRO SEGUNDOS POR CICLO, que es lento a propósito: por debajo de dos, esto deja de respirar y empieza a parpadear, que es lo que hace un aviso de avería y no lo que hace una lista al recibir algo. A este ritmo se ve por el rabillo del ojo y no obliga a mirar. Y el apagado son TRES CICLOS. Aquí no se desvanece un color: se desvanece un movimiento, y un movimiento cortado a mitad de ciclo da justo el tirón que el apagado existe para evitar. Con tres, el latido pierde fuelle latido a latido y el último ya no se distingue de estar quieto. Es lo que pidió el encargo —«que vaya quitando el efecto poco a poco para quedarse igual que el resto»— y sale gratis: la amplitud va a cero y lo que queda es el borde de siempre. CUIDADO AL TOCAR ESTE NÚMERO: `Lean.novedades` retira la clase cuando cree que el apagado ha terminado (`NOVEDAD_SALE`), así que subirlo aquí sin subirlo allí corta el latido en seco. Van juntos, y allí está dicho también. Cuánto dura la marca ANTES de empezar a apagarse lo decide `Lean.novedades` y está explicado allí: depende de tiempo mirando la pestaña, que es algo que una hoja de estilo no sabe medir. */ --t-latido: 4s; --t-novedad: 12s; /* --- Tamaño de letra --- * OCHO peldaños, y son los únicos. Es la misma regla que `--ctl-h` y por el * mismo motivo: la escala existía en las alturas y no en la letra, así que * había VEINTE tamaños repartidos por el panel —incluidos 12,5 · 11,5 · 10,5 * · 13,5 y hasta 9,5—, y diecisiete de ellos dentro de esta misma hoja. * * Los medios píxeles son el síntoma que lo delata: 12,5px no es una decisión, * es lo que se escribe cuando 13 parece mucho, 12 parece poco y no hay ningún * sitio al que acogerse. Nadie eligió ese número mirando la pantalla. * * Los peldaños no son una progresión geométrica bonita: salen de lo que el * panel usa de verdad. Entre 11 y 14 van de uno en uno porque ahí se juega * la densidad de una tabla, y arriba se separan porque un titular no se * distingue de otro por un píxel. Tres titulares distintos había —26, 28 y * 30— y ninguna pantalla ganaba nada con ello. * * Al añadir texto nuevo se le pone un peldaño, nunca un número. Si de verdad * hace falta un tamaño que no está, la pregunta es si falta un peldaño (y * entonces se añade aquí, para todos) o si lo que hay que cambiar es el * diseño de esa pantalla. * * La única excepción admitida es la letra cuyo tamaño lo manda su caja y no * la jerarquía —la inicial dentro de un avatar de 18px—, y va comentada allí * donde esté. */ --fs-xs: 11px; /* sub, pistas, versalitas: la letra que acompaña */ --fs-sm: 12px; /* densidad: celdas, chips, ayuda de un campo */ --fs-md: 13px; /* EL DEFECTO: botones, campos, tablas, menús */ --fs-lg: 14px; /* texto corrido, el que se lee de seguido */ --fs-xl: 17px; /* entradilla, o el dato que preside un bloque */ --fs-2xl: 19px; /* título de tarjeta · cifra de un signo vital */ --fs-3xl: 23px; /* título de sección */ --fs-4xl: 28px; /* título de página · la cifra grande */ /* Y la cifra que PRESIDE una tira de signos vitales, que no es lo mismo que * una cifra grande: cuando de cuatro números uno es el que se viene a mirar * —«cuántos agentes responden AHORA», en la lista de ordenadores— los cuatro * al mismo tamaño dicen que valen lo mismo, y entonces no preside ninguno. * * Se añade como PELDAÑO y no como número suelto en la hoja de la aplicación, * que es lo que pide la nota de aquí arriba: ×1,21 sobre `--fs-4xl`, el mismo * salto que hay de `--fs-3xl` a `--fs-4xl`. Lo usa `lean-vital--destacado`. */ --fs-5xl: 34px; /* la cifra que preside una tira de vitales */ /* ── Y LOS PELDAÑOS DE DOCUMENTO ──────────────────────────────────────────── * Un documento no es una pantalla, y ésta es la excepción que la propia nota * de arriba pide que se resuelva añadiendo peldaños en vez de números sueltos. * * Toda la escala de arriba está calibrada para DENSIDAD: una tabla de equipos, * la ficha de un dispositivo, un formulario. Ahí `--fs-lg` (14px) es «texto * corrido» porque el texto corrido de una interfaz son dos frases seguidas. * * En la Wiki se lee un procedimiento entero, y 14px es letra de interfaz * puesta a hacer de letra de libro: se lee, pero cansa —y con el título de * sección a 19px la jerarquía sale plana, ×1,36 sobre el cuerpo, así que un h2 * apenas destaca del párrafo que titula—. * * Son dos peldaños y sólo los usa `.lean-doc`. No sustituyen a nada: el resto * del panel sigue con la escala de densidad, que para lo suyo es la correcta. */ --fs-doc: 16px; /* el cuerpo de un documento que se lee de seguido */ --fs-doc-h2: 25px; /* su título de sección: ×1,56 sobre el cuerpo */ --fs-doc-h3: 19px; /* y el subtítulo, que vuelve a la escala de la casa */ /* ── LOS TRES EJES QUE FALTABAN, Y POR QUÉ IMPORTAN MÁS QUE EL TAMAÑO ─────── * * La escala de arriba tiene nueve peldaños y su guardián. Pero el 87 % de los * usos del panel caen en `--fs-xs`, `--fs-sm` y `--fs-md`, que se separan un * píxel entre sí: 515 de 592. Los cinco peldaños de arriba —los que de verdad * distinguen— suman treinta y siete usos en veintiún mil líneas de CSS. * * O sea que EL TAMAÑO NO ES LO QUE JERARQUIZA ESTE PANEL. Lo que separa un * nombre de su subtítulo, o un rótulo de su valor, es el peso; y el peso no * tenía tabla. Había ONCE —400, 450, 500, 550, 600, 620, 650, 700, 750, 800 e * `inherit`— en trescientas treinta y tres declaraciones, y tres negritas * distintas diciendo lo mismo: `.np-fila__txt b` a 620, `.lean-salto__n b` a * 750 y `.lean-bloque__marca.es-negrita` a 800. * * Lo mismo en los otros dos. La interletra tenía VEINTITRÉS valores: una * versalita se escribía con .02, .04, .05, .06, .08, .1, .11, .12 o .13em * según dónde cayera. La interlínea, VEINTE, diez de ellos entre 1,15 y 1,6 * separados de cinco en cinco centésimas. * * Lo que se hace aquí NO es inventar una escala: es ponerle nombre a la que * ya se usaba. 550 y 650 aparecen treinta y cuatro veces entre los dos — son * dos peldaños de facto que nadie había escrito. Los que se quedaron fuera * (450, 620, 750, 800) aparecen una o dos veces cada uno, y ésa es justo la * prueba de que no eran una decisión. */ /* PESO. Cinco, y son los únicos. * La distancia mínima que el ojo separa en una fuente variable ronda las 50 * unidades, así que 550 y 600 es el salto más corto que se admite — y sólo * porque significa algo: el sólido pide menos peso que el perfil para pesar * lo mismo, que es por lo que `lean-boton--solido` nació en 550. */ --peso-texto: 400; /* el cuerpo: un párrafo, una descripción */ --peso-medio: 500; /* se distingue sin gritar: un rótulo, una opción, un valor */ --peso-firme: 550; /* el nombre de una fila · la letra sobre un fondo de color */ --peso-titulo: 600; /* EL DEFECTO de lo que titula: cabeceras, nombres, cifras */ --peso-fuerte: 700; /* la negrita DENTRO de una frase, que es otra cosa que titular */ /* INTERLETRA. Por ROL, no por valor, que es lo que evita volver a tener nueve. * La versalita lleva dos peldaños porque el aire que necesita depende del * cuerpo: a 13px con .11em las palabras se deshacen, y a 10px con .06em no se * lee que sean versalitas. Y el titular va en negativo porque Geist a 28px sin * apretar abre huecos que a 13px no existen. */ --letra-titular: -.02em; /* de --fs-4xl para arriba */ --letra-ajuste: -.01em; /* --fs-xl a --fs-3xl */ --letra-normal: 0; --letra-codigo: .02em; /* dígitos y monoespaciado: una serie, un código de un uso */ --letra-rotulo: .06em; /* VERSALITAS de --fs-sm y --fs-md */ --letra-menuda: .11em; /* VERSALITAS de --fs-xs y por debajo */ /* INTERLÍNEA. Cinco peldaños separados de una décima, que es donde empieza a * verse. `--alto-ui` es el que ya llevaba el `body` (1,5) y no se mueve: la * densidad de todas las tablas del panel está medida contra él. */ --alto-1: 1; /* una línea que no parte: una cifra, un icono, un chip */ --alto-corto: 1.2; /* un titular grande, donde el interlineado holgado separa */ --alto-nombre: 1.35; /* un nombre o rótulo que puede caer en dos líneas */ --alto-ui: 1.5; /* EL DEFECTO de interfaz */ --alto-lectura: 1.6; /* lo que se lee de seguido: un documento, una ayuda larga */ /* --- TALLA DE ICONO --- * Quince tamaños había —de 10 a 44 px—, y cinco de ellos (12, 13, 14, 15, 16) * a un píxel uno de otro: el mismo defecto que la letra, en el otro dibujo. * Un icono a 13 y otro a 14 en la misma fila no se leen como jerarquía, se * leen como descuido, y es lo que pasaba entre `.aud-accion .lean-ico` y el * icono de un botón de al lado. * * Cuatro peldaños, cada uno atado a para qué acompaña. Y son los únicos que * ACOMPAÑAN: los tres que quedan fuera —26, 40 y 44 px— no acompañan a nada, * son el dibujo que PRESIDE un hueco, y su tamaño lo manda la caja que lo * contiene y no la jerarquía del texto de al lado. Es la misma excepción que * la escala de letra admite para la inicial de un avatar, y son sólo tres: * `lean-vacio`, el hueco de una foto de ficha y el retrato de una tarjeta de * inventario. */ --ico-sm: 12px; /* dentro de un chip, una celda densa, una pista */ --ico: 14px; /* EL DEFECTO: dentro de un botón, en una fila, junto a un dato */ --ico-md: 16px; /* el que acompaña a un título o encabeza un aviso */ --ico-lg: 20px; /* el que preside: un emblema, un paso, una tarjeta */ /* --- Familia --- * --disp: titulares (H1/H2), Geist autohospedada, con caída al * display del sistema si aún no cargó. * --ui: cuerpo e interfaz (fuente del sistema: rápida, peso cero). * --mono: datos técnicos (series, MAC, versiones). */ --disp: "Geist", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --mono: "Cascadia Mono", Consolas, ui-monospace, monospace; } /* ============================================================ * EL TEMA OSCURO, y las TRES situaciones en las que hay que darlo * ------------------------------------------------------------ * El panel seguía al sistema operativo y no había forma de elegir. Ahora se * puede, y eso obliga a contemplar tres estados, no dos: * * 1. «Como el sistema» (lo de siempre, y el defecto): no hay nada escrito en * el , así que decide `prefers-color-scheme`. * 2. Oscuro a mano: ``. * 3. Claro a mano: `` — y esto es lo que se olvida. * Sin el `:not([data-theme="light"])` de abajo, quien tenga el sistema en * oscuro y elija claro se quedaría con el tema oscuro puesto y la elección * no serviría de nada. * * Por eso los valores van DOS VECES: en el media query guardado y en el * selector del atributo. Es la única duplicación que admite esta hoja, y se * mantienen a la vez o el conmutador miente en una de las tres situaciones. * * REGLA para lo que venga: un color se define en `:root` (claro) y, si cambia * en oscuro, en LOS DOS bloques de abajo. Un color definido sólo dentro de un * `@media` deja de existir cuando alguien elige el tema a mano. * ============================================================ */ /* 1 y 3 — el sistema manda, salvo que se haya elegido claro a mano. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0E1519; --panel: #151F24; --panel-2: #1C282E; --ink: #E3EDF0; /* Y AQUÍ SÍ BAJA. Blanco casi puro sobre casi negro da 15,47:1, que para un vistazo —una tabla, una cifra, un rótulo— es perfecto y para media pantalla de prosa seguida no: el texto claro sobre fondo oscuro «sangra» sobre el fondo (halation) y cansa. Éste da 12,13:1, que sigue siendo casi el triple del mínimo exigido y se lee sin vibrar. Sólo lo usa `.lean-doc`. */ --ink-doc: #C6D4DA; --muted: #8EA1A9; --faint: #5C6E76; --line: #26343A; --brand-ink: #4FC8F0; --nuevo-ink: var(--brand-ink); --enlace-ink: var(--brand-ink); /* Aquí el hover ACLARA, que es lo que procede sobre fondo oscuro, y por eso vale el mismo cian de siempre. `--on-brand` ya no hace falta repetirlo: vale lo mismo en los dos temas desde que es tinta oscura. */ --brand-hover: #4FC8F0; /* LA ACCIÓN EN OSCURO. El papel es #151F24 (L=0.24), así que aquí el relleno tiene que estar POR ENCIMA de la luz del papel y no por debajo: es la misma regla del claro leída en el otro sentido. #0F7FA8 da 3,69 contra el panel —se lee como un objeto— y 4,54 con blanco encima, así que el sólido lleva la MISMA tinta blanca en los dos temas. Eso es lo que retira del sistema el «texto oscuro sobre color claro» que hacía barato al botón, en vez de arreglarlo sólo en claro. Y aquí el hover ACLARA, como todo lo demás en oscuro. */ --accion: #0E789F; --accion-hover: #0F7FA8; --on-accion: #FFFFFF; /* La letra del marcado SÍ cambia: el lavado es oscuro y #076C90 no se leería encima. #6BD3F6 sobre el lavado da 7,79. */ --accion-tinta: #6BD3F6; --accion-lavado: color-mix(in srgb, var(--brand-fijo) 14%, var(--panel)); --accion-filo: color-mix(in srgb, var(--brand-fijo) 42%, var(--panel)); --accion-lavado-2: color-mix(in srgb, var(--brand-fijo) 24%, var(--panel)); --accion-filo-2: color-mix(in srgb, var(--brand-fijo) 60%, var(--panel)); --down-solido: #B93A36; /* El filo baja a la mitad larga: sobre superficies oscuras el mismo 26 % deja de ser un filo y se convierte en una raya blanca. */ --filo-luz: rgba(255,255,255,.16); --ok: #3EBB80; --warn: #E09A45; --down: #EE6A6A; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.55); --shadow-lg: 0 12px 40px -12px rgba(0,0,0,.7); /* Y AQUÍ LAS ALTURAS SÍ SUBEN DE PAPEL, que es lo que un fondo oscuro pide: la sombra no se ve, así que lo que separa un menú de la tarjeta que tiene debajo es la luz. Los peldaños son de siete puntos, los mismos que ya separaban `--bg` de `--panel`, y el borde de lo elevado aclara con ellos. `--hondo` va HACIA ABAJO —por debajo de `--panel` y por encima de `--bg`— porque un receptáculo se hunde: un campo de texto dentro de una tarjeta era exactamente del mismo color que la tarjeta, y lo único que lo dibujaba era `--line`, que sobre el panel da 1,2:1. */ --hondo: #101A1E; --alzado: #1E2A31; --delante: #24313A; --linde-alto: #38474F; --shadow-xl: 0 24px 60px -16px rgba(0,0,0,.75), 0 4px 12px -4px rgba(0,0,0,.5); } } /* 2 — elegido oscuro a mano, dé lo que dé el sistema. */ :root[data-theme="dark"] { --bg: #0E1519; --panel: #151F24; --panel-2: #1C282E; --ink: #E3EDF0; --ink-doc: #C6D4DA; --muted: #8EA1A9; --faint: #5C6E76; --line: #26343A; --brand-ink: #4FC8F0; --nuevo-ink: var(--brand-ink); --enlace-ink: var(--brand-ink); --brand-hover: #4FC8F0; /* LA ACCIÓN EN OSCURO. El papel es #151F24 (L=0.24), así que aquí el relleno tiene que estar POR ENCIMA de la luz del papel y no por debajo: es la misma regla del claro leída en el otro sentido. #0F7FA8 da 3,69 contra el panel —se lee como un objeto— y 4,54 con blanco encima, así que el sólido lleva la MISMA tinta blanca en los dos temas. Eso es lo que retira del sistema el «texto oscuro sobre color claro» que hacía barato al botón, en vez de arreglarlo sólo en claro. Y aquí el hover ACLARA, como todo lo demás en oscuro. */ --accion: #0E789F; --accion-hover: #0F7FA8; --on-accion: #FFFFFF; /* La letra del marcado SÍ cambia: el lavado es oscuro y #076C90 no se leería encima. #6BD3F6 sobre el lavado da 7,79. */ --accion-tinta: #6BD3F6; --accion-lavado: color-mix(in srgb, var(--brand-fijo) 14%, var(--panel)); --accion-filo: color-mix(in srgb, var(--brand-fijo) 42%, var(--panel)); --accion-lavado-2: color-mix(in srgb, var(--brand-fijo) 24%, var(--panel)); --accion-filo-2: color-mix(in srgb, var(--brand-fijo) 60%, var(--panel)); --down-solido: #B93A36; /* El filo baja a la mitad larga: sobre superficies oscuras el mismo 26 % deja de ser un filo y se convierte en una raya blanca. */ --filo-luz: rgba(255,255,255,.16); --ok: #3EBB80; --warn: #E09A45; --down: #EE6A6A; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.55); --shadow-lg: 0 12px 40px -12px rgba(0,0,0,.7); /* Y AQUÍ LAS ALTURAS SÍ SUBEN DE PAPEL, que es lo que un fondo oscuro pide: la sombra no se ve, así que lo que separa un menú de la tarjeta que tiene debajo es la luz. Los peldaños son de siete puntos, los mismos que ya separaban `--bg` de `--panel`, y el borde de lo elevado aclara con ellos. `--hondo` va HACIA ABAJO —por debajo de `--panel` y por encima de `--bg`— porque un receptáculo se hunde: un campo de texto dentro de una tarjeta era exactamente del mismo color que la tarjeta, y lo único que lo dibujaba era `--line`, que sobre el panel da 1,2:1. */ --hondo: #101A1E; --alzado: #1E2A31; --delante: #24313A; --linde-alto: #38474F; --shadow-xl: 0 24px 60px -16px rgba(0,0,0,.75), 0 4px 12px -4px rgba(0,0,0,.5); } /* NEGRO — el cuarto modo, y por qué NO es un tema aparte. Es el oscuro con las superficies en casi negro NEUTRO: se va el tinte azulado y la luz baja otro escalón. Monta ENCIMA del oscuro —tema.js pone `data-theme="dark"` Y `data-negro` a la vez— y eso es lo que lo hace barato: los bloques repartidos que dicen «en oscuro, esto» (avatares, los tonos de la bitácora, el chasis de la consola…) siguen aplicando sin enterarse, y aquí sólo se re-tiñe lo que cambia. Un valor nuevo de `data-theme` obligaría a tocarlos todos y a acordarse en cada uno que se añada. Y va UNA vez, no dos como el oscuro: negro sólo se elige a mano —el sistema operativo no tiene preferencia «negro»—, así que su caso del media query no existe. La REGLA de arriba no aplica aquí por eso mismo. No es #000 puro a propósito: el texto claro sobre negro absoluto «sangra» más (el halation de --ink-doc, más arriba) y en OLED el scroll deja estelas. La escalera fondo → panel → panel-2 se conserva, como en los otros dos temas. */ :root[data-theme="dark"][data-negro] { --bg: #0A0B0C; --panel: #141516; --panel-2: #1C1D1F; --line: #28292C; /* Y EL ACENTO ES NEUTRO: aquí la jerarquía la da la LUZ, no el color. Elegido mirando cinco opciones sobre el parque real (3/9/26): el cian de serie «vibra» sobre negro neutro —croma alto sin ningún color alrededor que lo arrope—, y aclararlo no arreglaba el fondo del asunto. Lo activo, los botones y las barras van en blanco ROTO —no #FFF, por lo mismo que el fondo no es #000: el acento no debe deslumbrar sobre las cifras—, y el cian queda donde el color INFORMA: el logo, las gráficas y los estados (que no beben de estos tokens) y las dos tintas de aquí abajo. */ --brand: #E6E9EC; --brand-ink: #E3EDF0; --brand-hover: #FFFFFF; /* El velo de un modal, NEUTRO como el resto del tema: más oscuro que el fondo y sin tinte (ver `--velo-tinta` arriba). */ --velo-tinta: #050506; /* Un enlace se tiene que seguir distinguiendo de una palabra, y lo nuevo de lo ya visto: las dos señales conservan el cian (aclarado, que es el que pide el negro), pisando el var(--brand-ink) que heredarían del oscuro. */ --enlace-ink: #6BD3F6; --nuevo-ink: #6BD3F6; /* Y LA ACCIÓN TAMBIÉN CONSERVA EL CIAN: un botón relleno de blanco sobre negro es un fogonazo —fue lo primero que se vio al vivir con el acento neutro—, y un botón es información igual que un enlace: qué puedo hacer aquí. El reparto del negro queda así: la LUZ dice dónde estás; el COLOR, qué informa y qué actúa. LO QUE CAMBIA CON LA TINTA DE ACCIÓN: el cian de aquí era #4FCBF4 con tinta oscura encima, o sea el mismo «color claro con letra oscura» que en claro se leía como plástico; sobre negro además era la cosa más luminosa de la pantalla. Con el relleno hondo y blanco encima, el sólido pesa MENOS que antes sobre este fondo y sigue siendo cian, que es justo lo que este tema pedía. Hereda del oscuro sin repetir nada salvo el lavado y el filo, que sí dependen del panel —aquí es más negro— y por eso se recalculan. */ --accion-lavado: color-mix(in srgb, var(--brand-fijo) 12%, var(--panel)); --accion-filo: color-mix(in srgb, var(--brand-fijo) 38%, var(--panel)); /* Las alturas del negro suben MENOS: los peldaños son de cinco puntos y no de siete, porque sobre un fondo casi negro neutro el ojo distingue mucho antes un cambio de luz. Con los del oscuro, un diálogo aquí se leía como una caja gris flotando en el vacío. */ --hondo: #0E0F10; --alzado: #202123; --delante: #26282A; --linde-alto: #3A3C40; --accion-lavado-2: color-mix(in srgb, var(--brand-fijo) 21%, var(--panel)); --accion-filo-2: color-mix(in srgb, var(--brand-fijo) 56%, var(--panel)); --filo-luz: rgba(255,255,255,.14); } /* Y que lo sepa el navegador: pinta con su tema los controles nativos, las barras de desplazamiento y el fondo que hay DETRÁS de la página. Sin esto, elegir oscuro deja los desplegables del sistema en blanco. */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; }