/* ===================================================================== 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 barra oscura de arriba, y nada mas --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; --banda: #101826; --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; /* 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; /* 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); --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; } /* --------------------------------------------------------------------- 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; /* 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-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); }