/* ========================================================================= TOKENS DE LA INTERFAZ NUEVA ========================================================================= LA FUENTE DE VERDAD DEL DISEÑO. De aqui sale `tokens.json` -generado, no copiado- para una app nativa futura. Dos listas de colores escritas a mano se separan; una generada, no. Se lee entero con `herramientas/generar_tokens.py`, asi que el formato importa: **un token por linea**, `--nombre: valor;`, y el comentario que lo explica ENCIMA, no al lado. Nombres por el PAPEL que juegan, no por el color. `--bronce` sobrevive a un cambio de tono; `--marron-500`, no. La unica excepcion son los tres semanticos -verde, ambar, granate- porque ahi el color ES el significado y cambiarlo seria cambiar lo que dicen. Este fichero NO se carga en la interfaz de siempre. Solo lo pide `premium/base.html`, asi que mientras el interruptor este apagado no llega ni un byte de esto a nadie. ========================================================================= */ /* --- La letra, servida por nosotros -------------------------------------- `--sans` decia `Inter` y NADIE LA ESTABA SIRVIENDO con ese nombre. El fichero existe desde la piel anterior, pero declarado como «Inter var», asi que el token caia en la del sistema y la piel nueva se veia con la letra de siempre. Se vio midiendo el ancho de un texto en el navegador: `Inter` media exactamente lo mismo que una familia inventada. Es el mismo woff2 que ya usa `piel-nueva.css`, asi que no se descarga dos veces: misma URL, una peticion. ALOJADA POR NOSOTROS, nunca desde un CDN: pedir una fuente fuera le entrega la IP de cada comensal a un tercero. Licencia SIL OFL 1.1, al lado del fichero y en AVISOS-DE-TERCEROS.md. Fraunces NO se sirve: no esta el fichero. El token la nombra la primera y detras van Iowan Old Style, Palatino y Georgia, que si estan en los sistemas de verdad; asi los titulares salen en una serif digna mientras tanto. Es una decision consciente, no un olvido: meter otro fichero de fuente son 300 KB mas en cada pantalla del panel. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; /* una sola variable cubre todo el rango */ font-display: swap; /* que el texto se lea mientras se descarga */ src: url("../fuentes/inter-variable.woff2") format("woff2"); } :root { /* --- Color ------------------------------------------------------------- La paleta clara va aqui A PELO, sin `@media`. Es la regla que evita el fallo clasico: un color cuya UNICA definicion vive dentro de una consulta de medios no se aplica cuando el sistema no dice nada, y la pagina sale con el texto de un tema sobre el fondo del otro. */ /* Titulares y texto principal. 15.67:1 sobre el marfil. */ --tinta: #0F1C23; /* Texto secundario y apuntes. 6.22:1 sobre el marfil. */ --tinta-suave: #4A5D66; /* El fondo de la pagina. Frio, no marfil: es el azulado de disertic.com. */ --marfil: #EFF4F7; /* Tarjetas y superficies levantadas. */ --papel: #FFFFFF; /* Separadores y fondos suaves. */ --arena: #DCE7EC; /* Bordes y desactivados. Decorativo: no lleva texto encima. */ --piedra: #A3B7C1; /* EL ACENTO, y hay uno solo. Se reserva para la accion principal: reservar. Si todo destaca, no destaca nada. AQUI MANDA EL AZUL PIZARRA DE LA MARCA, #365261, y no el naranja. Es la decision que separa esta piel -«Barra»- de la otra: el naranja se guarda para lo que reclama atencion (ver `--ambar-aviso` mas abajo), asi que cuando aparece, aparece solo el. Usandolo menos se ve mas. En la tablet de una barra, a media cena y a dos metros, eso es lo que decide si se ve la reserva sin mesa o no. Y sigue en pie la leccion que costo encontrar con el bronce: hay que medir DOS contrastes distintos, no uno. - el acento COMO TEXTO sobre el marfil -que es como va en un enlace-: 7.47:1, - y el texto QUE VA ENCIMA del acento, que es como va en el boton de reservar: 8.28:1. Los dos holgados, que es lo que se gana con un azul oscuro: deja de haber que hilar fino. Con el naranja vivo de la marca los dos salen a 2.8 y no hay forma de arreglarlo sin oscurecerlo. */ --bronce: #365261; /* Solo para fondos: no llega para texto. */ --bronce-vivo: #4A6E80; /* El color de la letra que va ENCIMA del acento. Lo calcula el servidor segun la luminancia del acento elegido -ver `servicios/apariencia.py`- y por eso no es un ajuste: el restaurante elige su color de marca, pero si ademas eligiera la letra de encima, el primero con un acento pastel tendria un boton «Reservar» ilegible. Aqui va el valor de fabrica. */ --sobre-acento: #FFFFFF; /* Los tres semanticos. Aqui el color ES el significado, asi que el nombre va por el color a proposito. EL AMBAR ES EL NARANJA DE DISERTIC, y no es un capricho de marca metido donde no toca: en esta pantalla lo que lleva ambar es exactamente lo que hay que mirar -la reserva sin mesa, el saldo de SMS a cero, quien lleva veinte minutos de pie en la puerta-. Que ese aviso salga en el color de la casa es que el color de la casa signifique algo. #A85200 y no #EF7D00 por lo de siempre: con el vivo, el blanco de encima se queda en 2.8:1. Oscurecido cumple 5.43 y se sigue leyendo como el mismo naranja. */ --verde-mesa: #146C43; --ambar-aviso: #A85200; --granate: #A4231C; /* La letra que va ENCIMA de los tres, por lo mismo que `--sobre-acento`: en claro son tonos oscuros y en oscuro son claros, asi que la letra se da la vuelta con ellos. Sin esto, el boton «Apagar online» -el mas grande de la pantalla del dia- se queda en blanco sobre verde claro: 2.99:1. Con esto, 6.26. */ --sobre-semantico: #FFFFFF; /* CUANTO MIDE UN QR EN PANTALLA. Es el tamaño con el que se genera -29 modulos de 8 px mas el margen- asi que enseñarlo a su tamaño exacto evita que el navegador lo reescale y emborrone los cuadraditos, que es lo que hace que un lector no lo pille a la primera. */ --qr-lado: 232px; /* EL FONDO DE UN CODIGO QR, y es blanco en los dos temas: por eso esta aqui y no se redefine abajo. Un QR en negativo -claro sobre oscuro- no lo lee la mitad de los lectores, y este se escanea en la puerta de un local de noche: no es el sitio para descubrirlo. Va como token para que no quede un `#FFFFFF` suelto en la hoja. */ --blanco-qr: #FFFFFF; /* El texto que va ENCIMA de una foto. Es claro en los dos temas y por eso no se redefine abajo: sobre el velo oscuro de la foto, un texto oscuro no se lee ni de dia ni de noche. Va como token igualmente para que no quede un `#F0F6F9` suelto en la hoja. */ --sobre-foto: #F0F6F9; /* El punto que dice el estado de una hora. Es una decision de diseño -y de accesibilidad: es la FORMA que acompaña al color- asi que no es un numero suelto del componente. */ --punto-estado: 12px; /* El punto menudo que marca un dia: hoy, y un festivo. Va como token y no como numero suelto porque es una decision de accesibilidad -es la FORMA que acompaña al color, para quien no distingue el granate del negro- y no un detalle del componente. */ --punto-menudo: 4px; /* --- Tipografia -------------------------------------------------------- Fraunces e Inter son la recomendacion; van con las del sistema detras porque una pila que no cae bien deja la pagina en Times y se nota mas que cualquier otro fallo. */ --serif: Fraunces, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Escala fluida: `clamp` en vez de saltos por punto de corte, para que no haya un tamaño que cambie de golpe al girar el telefono. EL SUELO ES 13 px y no es una preferencia: en el panel hubo texto a 9,6 px por multiplicacion de tamaños relativos, y hubo que ponerle tope. */ --texto-xs: clamp(0.82rem, 0.80rem + 0.10vw, 0.86rem); --texto-s: clamp(0.88rem, 0.85rem + 0.15vw, 0.94rem); --texto-m: clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem); --texto-l: clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem); --texto-xl: clamp(1.60rem, 1.30rem + 1.50vw, 2.40rem); --texto-2xl: clamp(2.10rem, 1.50rem + 3.00vw, 4.00rem); --linea-titulo: 1.15; --linea-texto: 1.6; --tracking-titulo: -0.02em; --tracking-rotulo: 0.08em; /* La medida de lectura: 65 caracteres. Mas ancho y el ojo pierde el renglon al volver; mas estrecho y se lee a saltos. */ --medida: 34rem; /* Y la medida ANCHA, para lo que no es un texto que se lee seguido: una rejilla de tarjetas. La de lectura son 65 caracteres y esta bien para un formulario o un resguardo; con una rejilla de dos columnas dentro deja tarjetas de 248 px que parten cada linea en tres y crecen a lo alto hasta hacer una pagina de cuatro mil pixeles. Medido en la portada. */ --medida-ancha: 58rem; /* El plano de sala NO es texto y no cabe en la medida de lectura. Con la columna de 34rem, un lienzo de 1200 deja mesas de 41 px y a siete de quince se les corta el rotulo: se midio en la sala de la demo. Asi que el plano se sale de la columna hasta `--plano-ancho`, y si aun asi no cabe se desplaza de lado a partir de `--plano-minimo`, que es donde los numeros de mesa dejan de leerse. */ --plano-ancho: 900px; --plano-minimo: 620px; /* Lo minimo que puede medir una columna de formulario antes de caer a una sola. Es el ancho al que una etiqueta corta -«Hasta», «Por hora»- y su campo siguen cabiendo en una linea; por debajo, la etiqueta parte y la rejilla se lee peor que una columna. Con `auto-fit` esto es lo unico que decide cuantas columnas salen, sin puntos de corte. */ --columna-formulario: 190px; /* --- Espaciado --------------------------------------------------------- Escala de 4, sin valores sueltos. Un `margin: 13px` es una decision que nadie puede repetir. */ --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e6: 1.5rem; --e8: 2rem; --e12: 3rem; --e16: 4rem; /* --- Radios ------------------------------------------------------------ Nada mas redondo: redondo = juguete. */ --radio-control: 4px; --radio-carta: 10px; --radio-pildora: 999px; /* --- Sombras: dos, y solo dos ------------------------------------------ Una para lo que descansa y otra para lo que se levanta. Con cinco, nadie sabe cual toca y acaban usandose al azar. */ --sombra-carta: 0 1px 2px rgba(15, 28, 35, 0.07), 0 4px 12px rgba(15, 28, 35, 0.06); --sombra-flotante: 0 8px 24px rgba(15, 28, 35, 0.16); /* --- Movimiento -------------------------------------------------------- Nada se mueve sin motivo: las transiciones explican de donde viene lo que aparece. Una animacion decorativa es una animacion que sobra. */ --dur-rapida: 120ms; --dur-normal: 200ms; --dur-lenta: 320ms; --curva: cubic-bezier(0.2, 0.7, 0.3, 1); /* --- Capas ------------------------------------------------------------- Nombradas, para no acabar con `z-index: 99999`. */ --capa-base: 0; --capa-pegada: 10; --capa-flotante: 20; --capa-velo: 30; --capa-dialogo: 40; --capa-aviso: 50; /* --- Tactil y foco ----------------------------------------------------- 44 px y no los 24 que pide WCAG 2.2: esto se toca de pie, con prisa y a veces con las manos mojadas. */ --tactil-min: 44px; --foco-ancho: 2px; --foco-sep: 2px; /* --- Los cortes -------------------------------------------------------- LOS MISMOS QUE YA USA LA APLICACION, y no se reinventan: 700 y 701, pegados. Salen de una medida concreta -una ventana de 768 px con barra de desplazamiento declara 753 a la consulta de medios- y con el corte en 767 la tableta caia en la vista de telefono. */ --corte-telefono: 700px; --corte-ancho: 701px; } /* --- Modo oscuro: la piel «Sala» ----------------------------------------- NO es el claro invertido. El texto va en un claro roto y nunca en #FFF: en una sala a media luz, el blanco puro sobre negro vibra y cansa en dos minutos. Y AQUI EL ACENTO CAMBIA DE COLOR, que es lo mas importante de este bloque. En claro manda el azul pizarra; sobre un fondo azul-negro ese mismo azul es casi el propio fondo y deja de verse. Asi que en oscuro sube el NARANJA de la marca, aclarado a #FF9A3D: 8.36:1 sobre el fondo. Consecuencia buena: este bloque y el oscuro de `piel-nueva.css` son el MISMO aspecto -mismo fondo, mismo naranja, mismos semanticos-. Las dos pieles claras comparten un unico oscuro, y no hay dos que mantener. Se escribe en las dos hojas porque no se cargan nunca juntas, no porque sean dos decisiones distintas. Se redefine DOS veces a proposito -bajo `prefers-color-scheme` con guarda, y bajo `[data-tema=oscuro]`- para que el interruptor manual gane en los dos sentidos y el sistema mande cuando no hay eleccion. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --tinta: #E7EEF2; --tinta-suave: #9FB3BD; --marfil: #101A20; --papel: #18262E; --arena: #223138; --piedra: #5E7480; /* Y LA LETRA DE ENCIMA SE DA LA VUELTA CON EL. En oscuro el acento es un naranja claro, y un texto claro encima de eso son 1.1:1: un boton «Reservar» que no se lee. Con este casi negro, 8.37:1. No se vio al montar la piel porque el contraste se midio solo en claro. Una pareja de colores hay que medirla en LOS DOS modos, y eso es lo que comprueba ahora `prueba_panel_premium`. */ --sobre-acento: #0F1A20; --bronce: #FF9A3D; --bronce-vivo: #FFB068; --sobre-semantico: #0F1A20; --verde-mesa: #4EA87A; --ambar-aviso: #F2A24E; --granate: #E0705F; --sombra-carta: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.25); --sombra-flotante: 0 8px 24px rgba(0, 0, 0, 0.45); } } :root[data-tema="oscuro"] { --tinta: #E7EEF2; --tinta-suave: #9FB3BD; --marfil: #101A20; --papel: #18262E; --arena: #223138; --piedra: #5E7480; --sobre-acento: #0F1A20; /* ver la nota de arriba */ --bronce: #FF9A3D; --bronce-vivo: #FFB068; --sobre-semantico: #0F1A20; --verde-mesa: #4EA87A; --ambar-aviso: #F2A24E; --granate: #E0705F; --sombra-carta: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.25); --sombra-flotante: 0 8px 24px rgba(0, 0, 0, 0.45); }