/* * Tokens de diseño FindAir V2 (estilo «suizo»). Única fuente de los valores * visuales: el tema de Vuetify (resource/js/vuetify_factory.js) usa los mismos * colores y los componentes V2 leen estas variables. * * Escala: 4 tamaños (28 / 17 / 14 / 12) y 3 pesos (300 / 400 / 600). * Un solo negrita por pantalla; el bronce solo indica «dónde estás». * Contrastes AA sobre blanco: ink 18,9:1 · navy 15,2:1 · mute 5,8:1 · * placeholder 4,6:1 · bronce 6,8:1. * * Líneas (WCAG 1.4.11, V2B F0-2): los campos son subrayados, así que su * línea es el límite del control y necesita 3:1 -> --fa-line-strong * (3,36:1 sobre blanco, 3,08:1 sobre --fa-soft). --fa-line queda para los * filetes decorativos (separadores de filas y secciones), que no lo * necesitan (1,29:1). --fa-disabled (fondo de los botones inactivos con * texto blanco y borde de los secundarios inactivos) está exento, pero se * sube a 3,04:1 para que el texto blanco se lea (antes 1,55:1). * tokens_contrast.test.js lo vigila. * * Temas (PLAN_V2B_APARIENCIA F3). Los nombres son de función (superficie, * relleno, texto, línea), no de color: un tema solo cambia sus valores. * El servidor emite en las * páginas V2 (y data-fa-style, data-fa-effects): * - light (por defecto): los valores de este :root, sin hoja añadida; * - brown / dark: dist-v2/theme-brown.css y dist-v2/theme-dark.css * redefinen los tokens con html[data-fa-theme="brown"] y * html[data-fa-theme="dark"] (fases F4 y F5); solo se encola la del tema; * - auto: el servidor encola theme-dark.css con * media="(prefers-color-scheme: dark)", así que esa hoja también * selecciona html[data-fa-theme="auto"]. * Esas hojas van en la capa tmwe-components (bundle v2), posterior a esta: * redefinen tokens, no pisan reglas, y sin !important (dentro de una capa * invierte el orden de las capas). Vuetify toma los mismos valores del módulo * de paleta (resource/js/vuetify_palette.js; tema findair, findair-brown o * findair-dark): vuetify_factory.test.js comprueba que coinciden. * Ningún color va escrito a mano en las SFC ni en frontend/v2/**.css: * frontend/v2/hardcoded_colors.test.ts lo vigila. */ @layer tmwe-base { :root { --fa-ink: #0d1118; --fa-navy: #14263f; --fa-navy-hover: #1c3352; --fa-bronze: #7a5234; --fa-mute: #5c6775; --fa-placeholder: #6b7684; --fa-line: #dfe3e8; --fa-line-strong: #838d9a; --fa-soft: #f4f5f7; --fa-disabled: #8b95a1; --fa-ok: #2e6b4f; --fa-warn: #8a5a1c; --fa-err: #9b2c1f; --fa-surface: #ffffff; /* Relleno de los botones principales y de las marcas llenas (pasos, chip activo, avatar, día elegido): texto --fa-on-fill encima. Hoy igual que navy, pero aparte: si un tema aclara --fa-navy para el texto, el botón conserva su contraste. Es el `primary` de Vuetify. */ --fa-fill: #14263f; --fa-fill-hover: #1c3352; --fa-on-fill: #ffffff; /* Texto sobre bronce (contadores) y sobre un botón desactivado. */ --fa-on-bronze: #ffffff; --fa-on-disabled: #ffffff; /* Superficies: hoja (diálogos), elevada (menús), velo de los overlays (el #000 de .v-overlay__scrim de Vuetify; la opacidad es la suya) y sombra de lo que flota (ink al 25 %). */ --fa-sheet: #ffffff; --fa-raise: #ffffff; --fa-scrim: #000000; --fa-shadow: rgba(13, 17, 24, 0.25); /* Contorno de una imagen sobre la superficie (banderas): ink al 8 %. */ --fa-hairline: rgba(13, 17, 24, 0.08); /* Placa clara bajo logos e imágenes de terceros pensados para fondo blanco (colas de aerolínea, logos de mensajeros, QR). En los temas claros es la propia superficie y no se pinta; el oscuro la aplica (frontend/v2/themes/dark.css). */ --fa-logo-plate: #ffffff; /* Grises de estado, de más a menos visibles: texto de enlace desactivado; texto de botón con borde desactivado y casilla sin marcar; iconos y marcas apagados (estrella sin marcar, nodo pendiente, icono de vacío). La zona de soltar usa --fa-line-strong. */ --fa-disabled-text: #8a939f; --fa-mute-soft: #9aa4b1; --fa-faint: #c3cad3; /* Brillo que recorre los esqueletos de carga, sobre --fa-soft. */ --fa-shimmer: #e9ecf0; /* Halos del bronce: anillo que late (micrófono) y aureola fija (último evento del seguimiento). */ --fa-bronze-glow: rgba(122, 82, 52, 0.45); --fa-bronze-halo: rgba(122, 82, 52, 0.18); /* Sobre fotos (carrusel de promociones): velo de arriba abajo y texto. No dependen del tema: la foto es la misma. */ --fa-photo-veil-top: rgba(13, 17, 24, 0.05); --fa-photo-veil-bottom: rgba(13, 17, 24, 0.62); --fa-on-photo: #ffffff; /* Destello del obturador de la cámara: blanco en todos los temas. */ --fa-flash: #ffffff; --fa-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --fa-size-xl: 28px; --fa-size-l: 17px; --fa-size-m: 14px; --fa-size-s: 12px; --fa-touch: 44px; --fa-gap: 20px; --fa-gutter: 20px; /* Columna de contenido en escritorio (maqueta: min-width 760px). */ --fa-column: 560px; /* Vuetify 4 toma la tipografía de estas variables. */ --v-font-body: var(--fa-font); --v-font-heading: var(--fa-font); } body { background: var(--fa-surface); color: var(--fa-ink); font-family: var(--fa-font); -webkit-font-smoothing: antialiased; } .v-application { font-family: var(--fa-font); font-variant-numeric: tabular-nums; line-height: 1.45; } /* * Chino simplificado (lote 16 de PLAN_ADOPCION_DESIGNING2; ). Fuentes CJK del sistema, sin descargar ninguna: las * latinas primero (las mismas que en los otros idiomas) para que cifras, * siglas y códigos IATA sigan iguales, y detrás las chinas de cada * plataforma, que el navegador usa carácter a carácter para lo que las * latinas no tienen (los caracteres Han). Con las CJK delante, Windows * (Microsoft YaHei) y Linux/Android (Noto Sans CJK SC) pintaban también * cifras y siglas con la fuente china (revisión del lote 16). Como * --v-font-body y --v-font-heading leen --fa-font en :root (el mismo * elemento), Vuetify y las SFC lo heredan sin tocarlas. */ html:lang(zh) { --fa-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; } /* Cortes de línea estrictos (sin «。» ni «，» a principio de línea) y sin espaciado de letras. */ html:lang(zh) body, html:lang(zh) .v-application { line-break: strict; letter-spacing: 0; } /* * Los encabezados de las SFC (antetítulos de FaTitle y TitleComponent, * barra inferior, SortBar, secciones de goods, IA, ayuda, filtros…) usan * mayúsculas con espaciado de letras: en chino no hay mayúsculas y el * espaciado separa los caracteres, así que la jerarquía la da el peso. * Cada SFC fija su letter-spacing en tmwe-components, por encima de esta * capa; un !important en una capa anterior gana a cualquier declaración * normal de las capas siguientes, sin tocar cada SFC. Lo único que le gana * es un !important de una capa anterior (vuetify-*, tmwe-icons, * tmwe-legacy) o de un style inline: zh_typography.test.js los vigila * (un !important de tmwe-components pierde). Solo en elementos en * chino: un texto marcado con otro lang (el nombre de un idioma en el * selector) conserva su estilo. */ html:lang(zh) :lang(zh) { letter-spacing: 0 !important; text-transform: none !important; } :focus-visible { outline: 2px solid var(--fa-bronze); outline-offset: 2px; } /* Los campos de Vuetify ya marcan el foco (subrayado bronce). */ .v-field :focus-visible { outline: none; } /* Vuetify enfoca el contenedor del diálogo al abrirlo (trampa de foco): no es un control, no lleva contorno. */ .v-overlay__content:focus-visible { outline: none; } /* * Temas brown y dark: NO van aquí, sino en su hoja (dist-v2/theme-*.css), * que solo se descarga si el admin elige ese tema. Estructura: * * html[data-fa-theme="brown"] { (theme-brown.css, F4) * color-scheme: light; * --fa-ink: …; --fa-navy: …; --fa-fill: …; --fa-sheet: …; … * } * html[data-fa-theme="dark"], * html[data-fa-theme="auto"] { (theme-dark.css, F5; * color-scheme: dark; con auto se encola con * --fa-ink: …; --fa-fill: …; --fa-shadow: …; media="(prefers-color- * } scheme: dark)") * * Cada hoja redefine todos los tokens de color de este :root (tipografía * y medidas no cambian) y los mismos valores van en el módulo de paleta * de Vuetify (resource/js/vuetify_palette.js). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } }