/* ===================================================================== FS - Tokens Los colores, las medidas, las tipografias y las dos variantes de tema. Parte de la hoja de estilos de FS, que se sirve en varios archivos enlazados en orden desde src/views/_estilos.php. El orden importa: la cascada es la concatenacion de todos ellos, y este va primero porque todo lo demas usa lo que se define aca. ===================================================================== Todos los colores salen de variables. El tema oscuro solo redefine las variables, no vuelve a declarar componentes. TEMA: el claro es el predeterminado, siempre. A proposito NO se usa @media (prefers-color-scheme: dark): con esa regla el sistema operativo decidia por el operador y la sala terminaba viendo la aplicacion en oscuro sin haberlo pedido. El oscuro se activa solo cuando el usuario lo elige con el boton de la cabecera, que guarda la preferencia en una cookie y el servidor la escribe como data-tema="oscuro" en . Al venir del servidor, el tema correcto se aplica en el primer pintado: no hay parpadeo de claro a oscuro al cargar la pagina. LOS NOMBRES DICEN EL PAPEL, NO EL COLOR --------------------------------------- Antes se llamaban por el color: azul-900, azul-800, azul-600 y azul-100. Mientras el acento fue azul el nombre alcanzaba; el dia que deje de serlo -y el plan es que cada sala tenga el suyo- un token con "azul" en el nombre guardando un verde es una trampa para el que venga despues. Ahora se llaman por lo que hacen: --banda la banda: la cabecera, el menu lateral y la barra de abajo del telefono (y sus --banda-*) --acento-fuerte el relleno de lo elegido: boton primario, chip activo --acento enlaces, bordes de lo activo, texto de acento --acento-suave fondos teñidos, para marcar sin gritar CONTRASTE --------- Cada par texto/fondo de este archivo llega al minimo AA de 4.5:1. El --texto-tenue anterior estaba en 2.8:1 -es el color de las fechas y de todas las aclaraciones chicas-, asi que ahora es mas oscuro: se lee. ===================================================================== */ /* --------------------------------------------------------------------- Tema claro (predeterminado) --------------------------------------------------------------------- */ :root { /* Alinea los controles nativos del navegador (scrollbars, selectores de fecha) con el tema, si no un input[type=date] se ve oscuro sobre claro. */ color-scheme: light; --acento-fuerte: #1a3fa8; --acento: #1d4ed8; /* Solo para el hover de lo que ya está relleno de acento. No es "el acento un poco más claro": es el otro color que también aguanta letra blanca encima, y en oscuro tiene que ir para el otro lado. */ --acento-hover: #2856cc; --acento-suave: #e7ecfb; /* La variante del acento para usar ENCIMA de la banda. Hace falta porque en el tema claro el acento es oscuro y la banda también: una barra de --acento sobre --banda da 2.65:1, o sea que no se ve. Esta es clara y funciona sobre lo oscuro, así que no se redefine por tema: solo por sala. Desde que la banda del tema claro es clara, encima de la banda se usa --acento-barra, que elige entre ésta y --acento según el tema; ésta queda para la banda oscura y para lo que se dibuja sobre fondo oscuro, como el visor de fotos. */ --acento-banda: #7fb0ff; /* La banda -la cabecera, el menú lateral y la barra de abajo del teléfono- sigue al tema. En claro es un gris cálido, dos pasos más oscuro que el fondo de la página, con letra oscura: blanca, como los paneles, brillaba más que el contenido y se pidió bajarla. En oscuro sigue siendo lo más oscuro de la pantalla. Fue oscura en los dos temas hasta que se pidió que el menú y la cabecera también se aclararan. En pantalla ancha y en claro, la cabecera y el menú se separan: ver «Pantalla ancha, tema claro» más abajo. Estos valores quedan para el teléfono. Todo lo que se dibuja ENCIMA de la banda sale de estos tokens y no de blancos fijos: --banda-velo es el relleno de los controles y del hover, --banda-borde sus bordes, y --acento-barra la marca de la sección abierta. En claro es el acento de la sala, que sobre el gris se lee; en oscuro, --acento-banda, la variante clara. --sala-banda es el nombre de la sala elegida en el selector, con el mismo criterio. */ --banda: #e6e3dc; --banda-texto: #14181f; --banda-texto-suave: #3f3b35; --banda-tenue: #615c53; --banda-velo: rgba(20, 24, 31, .05); --banda-velo-fuerte: rgba(20, 24, 31, .09); --banda-borde: rgba(20, 24, 31, .16); --banda-linea: #d6d2c9; --banda-icono: grayscale(1) brightness(.35); --acento-barra: var(--acento); --sala-banda: var(--acento); /* El fondo es un gris cálido, no azulado: deja que el azul del acento y el rojo del semáforo sean lo único frío de la pantalla. */ --fondo: #f1f0ec; --fondo-panel: #ffffff; --fondo-suave: #f8f7f4; --fondo-hover: #eae8e2; --texto: #14181f; --texto-suave: #57534c; --texto-tenue: #6b665d; --borde: #e2ded5; --borde-fuerte: #ccc7bd; /* El borde de en medio: para un dibujo que SIGNIFICA algo y no solo separa. --borde-fuerte da 1.68:1 contra el panel, que alcanza para una linea divisoria pero no para un punto que dice "este hito todavia no paso": eso es contenido no textual y la pauta pide 3:1. Este da exactamente 3.00:1 en claro y 3.58:1 en oscuro. Lo usa la via de una parte, en componentes.css. */ --borde-medio: #9c9488; /* Borde de máximo contraste: casi negro sobre fondo claro. En el tema oscuro se redefine a blanco. Se usa para que cada tarjeta del teléfono resalte. */ --borde-contraste: #14181f; --verde: #177244; --verde-bg: #e4f2e9; --ambar: #8a5a00; --ambar-bg: #f8efdc; --rojo: #b3261e; --rojo-bg: #fbeae7; --violeta: #6d28a8; --violeta-bg: #f0e9fa; --gris-bg: #eae8e2; /* Los paneles se separan con un borde, no con una sombra: la sombra queda como un apoyo mínimo para que la cabecera se despegue. */ --sombra: 0 1px 2px rgba(20, 24, 31, .05); /* Lo que ocupa la barra de arriba cuando esta pegada. No es decorativo: el bloque pegajoso de cada listado -el titulo con las pestañas- se pega JUSTO debajo de ella, y sin esta medida se le mete atras. Arranca en CERO y lo escribe fs.js con el alto medido. Cero no es un valor de relleno: es exactamente lo que corresponde cuando la barra NO esta pegada, que es el caso del telefono y el de una pagina sin JavaScript. O sea que si nadie la escribe, la pantalla queda como estaba siempre. No lleva un numero escrito a mano porque no hay uno solo que sirva: la barra mide 56px a 1280, 101 a 900 y 125 a 780 -entre los 700 y los 1000 el menu se va a dos renglones-. Ver .cabecera en armazon.css. */ --alto-cabecera: 0px; /* Lo mismo, para la cabecera de la ficha de reparacion, que tambien se queda a la vista. Solo la usa scroll-padding-top, que tiene que dejar libres las DOS: la barra de la aplicacion y esta. La cabecera de la ficha no necesita la medida para pegarse -se cuelga de --alto-cabecera con un `top` y listo-, asi que sin JavaScript queda en cero y lo unico que se pierde es el margen al llegar con Tab. */ --alto-ficha: 0px; --radio: 4px; --radio-chico: 3px; /* Las tres familias se sirven desde el propio servidor; ver fuentes.css. Detrás de cada una va el respaldo del sistema, que es lo que se ve si el .woff2 no llegó a cargar. */ --fuente: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fuente-display: "Oswald", "Arial Narrow", system-ui, sans-serif; --fuente-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; } /* --------------------------------------------------------------------- Pantalla ancha, tema claro: cabecera tinta y menú piedra Con el menú en columna, la banda clara de una sola pieza se confundía con el contenido y se pidió oscurecerla. Se separó en dos: la cabecera va en tinta, como una franja de mando, y el menú en un gris cálido dos pasos más oscuro que el de antes, con letra casi negra. El color sigue siendo sólo el de la sala. No se tocan componentes: se redefinen los --banda-* sobre cada elemento, y todo lo que se dibuja encima los hereda. La cabecera toma los valores de la banda del tema oscuro -incluidas --acento-barra y --sala-banda, que sobre fondo oscuro tienen que ser las variantes claras-, sobre una tinta un poco menos negra. La etiqueta del menú plegado va con el menú. El teléfono queda como estaba, a pedido: ahí la banda es la de arriba. --------------------------------------------------------------------- */ @media (min-width: 701px) { :root:not([data-tema="oscuro"]) .cabecera { --banda: #121a24; --banda-texto: #ffffff; --banda-texto-suave: #c8d4e4; --banda-tenue: #9fabbb; --banda-velo: rgba(255, 255, 255, .08); --banda-velo-fuerte: rgba(255, 255, 255, .14); --banda-borde: rgba(255, 255, 255, .22); --banda-linea: rgba(255, 255, 255, .06); --banda-icono: grayscale(1) brightness(3); --acento-barra: var(--acento-banda); --sala-banda: var(--sala-cabecera); } /* --banda-tenue da 5.9:1 sobre el piedra; la letra del menú, 9:1. */ :root:not([data-tema="oscuro"]) .con-lateral .nav, :root:not([data-tema="oscuro"]) .nav-etiqueta { --banda: #d6d1c7; --banda-texto-suave: #2f2b26; --banda-tenue: #4f4940; --banda-borde: rgba(20, 24, 31, .22); --banda-linea: #c3bdb1; } } /* --------------------------------------------------------------------- Tema oscuro: solo cuando el operador lo elige. Redefine unicamente las variables; ningun componente se vuelve a declarar. --------------------------------------------------------------------- */ :root[data-tema="oscuro"] { color-scheme: dark; /* La banda se va MAS oscura que el contenido. En claro es la parte oscura de la pantalla; en oscuro, la única manera de que siga leyéndose como cabecera es que sea lo más oscuro de todo. */ --banda: #070c13; --banda-texto: #ffffff; --banda-texto-suave: #c8d4e4; --banda-tenue: #9fabbb; --banda-velo: rgba(255, 255, 255, .08); --banda-velo-fuerte: rgba(255, 255, 255, .14); --banda-borde: rgba(255, 255, 255, .22); --banda-linea: rgba(255, 255, 255, .06); --banda-icono: grayscale(1) brightness(3); --acento-barra: var(--acento-banda); --sala-banda: var(--sala-cabecera); /* El acento se aclara para leerse sobre fondo oscuro, y el relleno se queda en un azul que aguanta letra blanca encima. */ --acento-fuerte: #2d62e0; --acento: #7fb0ff; --acento-hover: #3f70e0; --acento-suave: #16233a; --fondo: #0d1219; --fondo-panel: #151d28; --fondo-suave: #1b2532; --fondo-hover: #222d3b; --texto: #e9edf3; --texto-suave: #9fabbb; --texto-tenue: #7c8899; --borde: #29333f; --borde-fuerte: #3a4654; --borde-medio: #66748a; --borde-contraste: #ffffff; --verde: #5cc98d; --verde-bg: #133023; --ambar: #e5aa4a; --ambar-bg: #2a2111; --rojo: #f28b83; --rojo-bg: #2c1513; --violeta: #c7a0ed; --violeta-bg: #2b1f3d; --gris-bg: #222d3b; --sombra: 0 1px 2px rgba(0, 0, 0, .35); } /* --------------------------------------------------------------------- El acento de cada sala El servidor escribe data-sala en , al lado del data-tema, y aca cada sala redefine su acento. Sirve para saber de un vistazo donde estas parado: en la sala equivocada, un REQUI cargado no se deshace con Ctrl+Z. Los tres tonos salen de rotar el azul original y despues ajustar el brillo hasta que cada par pase el minimo AA de 4.5:1. Estan los tres escritos aunque el de Wilde sea igual al predeterminado: se leen como una tabla de tres salas y no como "dos salas y la que quedo". NINGUNO es rojo, ambar, verde ni violeta, y no es casualidad: esos cuatro son los colores del estado de una reparacion, y --acento aparece 87 veces adentro del contenido. Una sala violeta pondria dos violetas distintos en la misma pantalla, uno queriendo decir "REP. POR LAB" y el otro nada. Con "Todas las salas" no hay data-sala y queda el acento predeterminado, que es justamente lo que corresponde: no estas parado en ninguna. La especificidad esta pensada: :root[data-sala] empata con :root[data-tema="oscuro"], asi que el par oscuro de cada sala lleva los dos atributos y gana por tener uno mas. Si alguna vez se agrega una sala, son dos lineas y van juntas. --------------------------------------------------------------------- */ :root[data-sala="rebisco"] { --acento: #10776e; --acento-fuerte: #0f635c; --acento-hover: #1a847b; --acento-suave: #e7fbf9; --acento-banda: #6fd8cd; --sala-cabecera: #78b8b0; } :root[data-sala="biyemas"] { --acento: #2d1dd8; --acento-fuerte: #261aa8; --acento-hover: #3628cc; --acento-suave: #e9e7fb; --acento-banda: #8a7fff; --sala-cabecera: #d5968c; } :root[data-sala="wilde"] { --acento: #1d4ed8; --acento-fuerte: #1a3fa8; --acento-hover: #2856cc; --acento-suave: #e7ecfb; --acento-banda: #7fb0ff; --sala-cabecera: #c7a173; } :root[data-tema="oscuro"][data-sala="rebisco"] { --acento: #6fd8cd; --acento-fuerte: #138077; --acento-hover: #15837a; --acento-suave: #163a37; } :root[data-tema="oscuro"][data-sala="biyemas"] { --acento: #8a7fff; --acento-fuerte: #3c2de0; --acento-hover: #4c3fe0; --acento-suave: #19163a; } :root[data-tema="oscuro"][data-sala="wilde"] { --acento: #7fb0ff; --acento-fuerte: #2d62e0; --acento-hover: #3f70e0; --acento-suave: #16233a; }