/* ============================================================================================= El contrato de diseño del CRM. Va el ÚLTIMO en el , después de las hojas de Falcon y de site.css. Es a propósito: mientras convivan hojas de un tema de terceros, el orden es lo único que decide quién manda (§6.1 de los Principios de la suite). POR QUÉ ESTE ARCHIVO EMPIEZA CORTO ---------------------------------- El §6.1 dice que la forma correcta de empezar es copiar entero el contrato del ERP (ERP.Pymes.Web/wwwroot/css/gtech-tokens.css en GTECHERP, 50 KB y 109 papeles) y redefinir después lo que haga falta distinto. Aquí no se puede hacer así, y conviene que quede escrito por qué. Ese contrato está construido para una aplicación de Radzen sobre Bootstrap: define papeles para clases que el CRM no tiene, y el CRM está construido sobre el tema Falcon, que ya expone sus propias ~400 variables --falcon-*. Volcarle 109 papeles encima no lo alinearía: le pondría un segundo sistema de diseño compitiendo con el que ya manda, que es exactamente lo que el §5.2 llama tener dos dueños para el mismo estado. El camino que sí funciona con Falcon es reapuntar SUS variables a los papeles de la marca, una por una y explicando cada una. Este archivo es el sitio donde eso va pasando. Hoy trae la letra y el color, que es lo que se pudo medir y decidir mirandolo en pantalla; los cortes y el modo oscuro vienen después y se miran a 375 px antes de darlos por hechos (§6.9). ============================================================================================= */ :root { /* ---------------------------------------------------------------------------------------- §6.10 — La letra de la interfaz es la del sistema. Falcon venía con Poppins para los títulos y los botones (--falcon-font-sans-serif) y Open Sans para el cuerpo (--falcon-body-font-family y --falcon-font-base), las dos descargadas de Google Fonts. Las dos salen, por dos razones distintas: - Poppins es la letra de la MARCA: el logo -que va siempre como archivo- y las piezas de comunicación. No entra en las pantallas. Que el producto entero esté escrito en la letra del logotipo es lo que hace que se vea como un folleto y no como una herramienta. - Open Sans no es de nadie: es la que traía el tema. Descargar una letra para el cuerpo cuesta dos peticiones y un parpadeo en el primer pintado, y a cambio se ve PEOR que la del sistema, que cada aparato tiene ajustada para su pantalla. La cadena de respaldo que ya traía Falcon era precisamente ésta -Segoe UI en Windows, la de Apple en sus equipos, Roboto en Android-, así que quitar la descarga no cambia las medidas con las que el tema fue diseñado: deja la que ya se usaba cuando la descarga fallaba. `system-ui` va primero porque es la única forma de pedirle al navegador la letra de la interfaz del sistema sin nombrarla; el resto de la cadena es para los navegadores que no la entienden. ---------------------------------------------------------------------------------------- */ --gt-fuente: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --falcon-font-sans-serif: var(--gt-fuente); --falcon-body-font-family: var(--gt-fuente); --falcon-font-base: var(--gt-fuente); /* ---------------------------------------------------------------------------------------- §6.1 — LA PALETA DE LA MARCA. Copiada del contrato de la suite (GTECHCOMUN, gtech-tokens.css), que la saca del LOGO y no de lo que hubiera en los CSS: verdes y grises. No se reescriben aquí los valores ni los comentarios que explican una medida, porque cada número de contraste que llevan está medido en pantalla y volver a decidirlo aquí es cómo dos productos de la misma suite acaban con dos verdes parecidos. Esta escala NO se usa en los componentes: alimenta los papeles de abajo. ---------------------------------------------------------------------------------------- */ --gt-verde-900: #00564f; --gt-verde-800: #00706a; --gt-verde-700: #00857c; /* del logo */ --gt-verde-600: #00a99d; /* del logo · EL color de la marca */ --gt-verde-500: #00bfae; /* del logo · el vivo */ --gt-verde-300: #7fd9d0; --gt-verde-100: #d9f2ef; --gt-verde-050: #eff9f8; /* El gris sale del #58595B del logo: la misma familia, aclarada y oscurecida. Un gris neutro de otra escala, al lado del gris del logo, se ve sucio. */ --gt-gris-900: #1f2021; --gt-gris-800: #2e2f31; --gt-gris-700: #434447; --gt-gris-600: #58595b; /* del logo */ --gt-gris-500: #7c7d80; --gt-gris-400: #a3a4a6; --gt-gris-300: #cfd0d1; --gt-gris-200: #e4e5e6; --gt-gris-100: #f1f1f2; --gt-gris-050: #f7f7f8; --gt-blanco: #ffffff; /* --------------------------------------------------------------------- Los papeles Esto es lo que se usa. El acento es el verde 800 y NO el 700: medido en pantalla por el ERP el 2026-10-27, el 700 daba 4,00-4,29:1 contra las superficies reales -por debajo del 4,5 que pide la norma- y solo llegaba a 4,52 contra blanco puro, que es donde no se usa. */ --gt-acento: var(--gt-verde-800); /* EL VIVO ES DECORATIVO: barra, subrayado, borde de lo que ya se distingue por otra cosa. Da 2,16:1 sobre el fondo, así que nunca es el único indicador de un estado. */ --gt-acento-vivo: var(--gt-verde-500); --gt-acento-suave: var(--gt-verde-100); --gt-texto-sobre-acento: var(--gt-blanco); /* El verde del hover y el del deshabilitado TAMBIEN son papeles, y no el verde escrito en la regla del boton. Hacen falta porque en el tema oscuro un hover que oscurece va al reves: sobre un fondo oscuro, lo que responde al raton tiene que ACLARARSE. Con el papel en medio, el mismo bloque de componentes sirve para los dos temas y el oscuro solo redefine estas dos lineas. */ --gt-acento-hover: var(--gt-verde-900); --gt-acento-apagado: var(--gt-verde-300); /* ---------------------------------------------------------------------------------------- §6.1 — FALCON, REAPUNTADO. El azul #2c7be5 que se ve por todas partes NO es una decisión de nadie: es el `--falcon-primary` del tema Falcon, igual que el azul del ERP era el `--rz-secondary` de Radzen. Son 57 apariciones en theme.css, y 39 de ellas cuelgan de estas variables. POR ESO SE REAPUNTA EN VEZ DE BARRER LAS HOJAS: buscar y reemplazar un color por los archivos es cómo el ERP llegó a tener 434 copias del mismo azul mientras el original seguía intacto en su sitio. LAS VARIANTES NO SON OPCIONALES. `-text-emphasis`, `-bg-subtle` y `-border-subtle` son las que pintan el texto enfatizado, los fondos de aviso y los bordes suaves. Si solo se cambia la principal, el botón es verde hasta que lo pasas el ratón o abres un alert, y entonces vuelve a ser azul. LAS `-rgb` LLEVAN EL NÚMERO ESCRITO y no `var(...)`: Bootstrap y Falcon las meten dentro de `rgba(var(--x-rgb), .5)`, y ahí hace falta la terna «0, 112, 106», no un color. Si se pone un var() que resuelva a un hex, el rgba() queda inválido y el elemento se pinta transparente, que es un fallo mucho más difícil de leer que un color equivocado. ---------------------------------------------------------------------------------------- */ --falcon-primary: #00706a; /* var(--gt-acento) */ --falcon-primary-rgb: 0, 112, 106; --falcon-primary-text-emphasis: #00564f; /* verde 900 */ --falcon-primary-bg-subtle: #d9f2ef; /* verde 100 */ --falcon-primary-border-subtle: #7fd9d0; /* verde 300 */ /* Los enlaces de Falcon tienen su propia variable y no cuelgan de `--falcon-primary`: sin estas dos, los botones quedan verdes y TODOS los enlaces siguen azules. */ --falcon-link-color: #00706a; --falcon-link-color-rgb: 0, 112, 106; --falcon-link-hover-color: #00564f; --falcon-link-hover-color-rgb: 0, 86, 79; /* Bootstrap por debajo. Falcon renombra el prefijo a --falcon-, pero las hojas de los complementos -el calendario, el selector de fechas- siguen escritas contra --bs-. Son las mismas ternas. */ --bs-primary: #00706a; --bs-primary-rgb: 0, 112, 106; --bs-link-color: #00706a; --bs-link-color-rgb: 0, 112, 106; --bs-link-hover-color: #00564f; --bs-link-hover-color-rgb: 0, 86, 79; } /* ----------------------------------------------------------------------------------------- Los tres sitios donde el tema escribe la letra a mano en vez de usar su variable, así que redefinir la variable no los alcanza. Se midieron: son estos tres y no hay más (`font-family: "Open Sans"` literal en theme.css). Si en una actualización del tema aparecen otros, el síntoma será un tooltip o una notificación con una letra distinta de la del resto. ----------------------------------------------------------------------------------------- */ .tooltip, .popover, .notification { font-family: var(--gt-fuente); } /* ============================================================================================= QUÉ VARIABLE DE FALCON APUNTA A QUÉ PAPEL El inventario, para que se pueda leer de un vistazo qué se ha adoptado ya y qué sigue en manos del tema. Se amplía a medida que se miran las pantallas. | papel | variable de Falcon que lo toma | |------------------|-----------------------------------------| | --gt-fuente | --falcon-font-sans-serif | | | --falcon-body-font-family | | | --falcon-font-base | | --gt-cajon-fondo | --falcon-body-bg (el papel sale del tema; NO el «glass» de la barra, que es translúcido) | | --gt-velo | (nuevo: el tema no tiene velo porque no tiene cajón) | Los dos últimos son del cajón del teléfono, abajo. ============================================================================================= */ /* ============================================================================================= §9.3 a §9.5 — EL CAJÓN DEL TELÉFONO QUÉ HABÍA. La barra lateral era un `collapse` de Bootstrap: se desplegaba en el sitio, sin velo, sin cerrarse al tocar fuera, sin Escape, y —lo peor— sin cerrarse al navegar. En Blazor navegar no recarga la página, así que tocar una opción en un teléfono te dejaba el menú abierto encima de la pantalla a la que acababas de llegar. El §9.5 lo dice con todas las letras: llegar a una pantalla con el menú abierto encima es no haber navegado. QUÉ SE HACE. Por debajo del corte en el que Falcon ya esconde la barra, el mismo `collapse` se convierte en un cajón que entra por la izquierda, con velo. El marcado no cambia y el escritorio no se toca: de ese corte hacia arriba `navbar-expand-xl` muestra la barra siempre y nada de esto aplica. EL CORTE ES EL DE FALCON, no uno nuevo. El §6.6 nombra 640/960/1280, pero son los de un producto que no está construido sobre Bootstrap; cambiar los de Falcon obliga a recompilar el SCSS del tema. Así que se conserva el suyo y se dice cuál es: `xl` = 1200 px es «de aquí abajo, el menú está escondido detrás de un botón», que es la condición que importa para que haya cajón. ============================================================================================= */ :root { /* El velo. Es nuevo: el tema no lo tiene porque no tiene cajón. */ --gt-velo: rgba(0, 0, 0, 0.5); /* El fondo del cajón sale del propio tema, para que el cajón abierto se vea igual que la barra de escritorio. Pero NO se toma `--falcon-navbar-vertical-default-bg-color`, que es lo que usa la barra: ése es el «glass» de Falcon, `rgba(237,242,249,0.96)`. Ese 4 % de transparencia no se nota cuando la barra está sobre el fondo de la página, que es del mismo color; como cajón ENCIMA del contenido se nota muchísimo, y se lee el texto de la página a través del menú. Se vio en pantalla antes de dejarlo. `--falcon-body-bg` es ese mismo color sin la transparencia, y también cambia solo en modo oscuro, así que el cajón se ve igual que la barra y además tapa. */ --gt-cajon-fondo: var(--falcon-body-bg, #edf2f9); /* Por debajo de la escala de Falcon para los diálogos (modal 1055), y el cajón por encima de su propio velo. */ --gt-velo-z: 1040; --gt-cajon-z: 1045; } /* De 1200 px hacia arriba no hay cajón, así que no hay velo. Se dice con `display: none` en vez de dejarlo sin estilos: sin esto queda un div transparente de altura cero que no estorba —se midió— pero que obliga a comprobarlo a quien lea esto. */ .gt-velo { display: none; } @media (max-width: 1199.98px) { /* El velo. Vive siempre en el árbol y se enciende con la clase que pone el JS al abrirse el cajón; así no hay dos dueños del estado (§5.2): quien manda es Bootstrap, y esto solo lo refleja. */ .gt-velo { display: block; position: fixed; inset: 0; background-color: var(--gt-velo); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: var(--gt-velo-z); } body.gt-cajon-abierto .gt-velo { opacity: 1; pointer-events: auto; } /* El cajón. `display` se fuerza porque Bootstrap esconde el `.collapse` con `display: none`; como esto es un id (1-0-0) y aquello una clase, gana sin `!important`. `height` sí lo lleva, y es el único: el JS de Bootstrap anima la ALTURA con un estilo EN LÍNEA, y un estilo en línea le gana a cualquier hoja cargue donde cargue. Sin esto, el cajón se encoge a cero durante la transición y da un salto. Es el caso en el que una regla no puede ganar de otra manera. */ #navbarVerticalCollapse { position: fixed; top: 0; left: 0; bottom: 0; display: block; width: min(320px, 85vw); height: 100% !important; overflow-y: auto; background-color: var(--gt-cajon-fondo); box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2); z-index: var(--gt-cajon-z); transform: translateX(-100%); transition: transform 0.2s ease; /* Cerrado no se ve Y no se alcanza con el tabulador: un cajón que se esconde solo con transform sigue recibiendo el foco, y quien navega con teclado se encuentra recorriendo un menú invisible. */ visibility: hidden; } #navbarVerticalCollapse.show, #navbarVerticalCollapse.collapsing { transform: translateX(0); visibility: visible; } /* Bootstrap le pone `overflow: hidden` mientras anima; aquí la animación es de transform y el cajón necesita poder desplazarse por dentro. */ #navbarVerticalCollapse.collapsing { overflow-y: auto; } /* Con el cajón abierto, la página de debajo no se desplaza: si lo hiciera, arrastrar dentro del cajón acabaría moviendo la página. */ body.gt-cajon-abierto { overflow: hidden; } } /* §7.11 — quien pidió menos movimiento recibe menos movimiento. El cajón sigue abriendo y cerrando; lo que desaparece es el deslizamiento. */ @media (prefers-reduced-motion: reduce) { .gt-velo, #navbarVerticalCollapse { transition: none; } } /* ============================================================================================= §6.1 — LOS COMPONENTES QUE NO LEEN LA PALETA. Reapuntar `--falcon-primary` deja verdes los enlaces y las utilidades, pero NO los botones: Bootstrap 5.3 -y Falcon encima- pintan cada componente con variables PROPIAS declaradas dentro de su propia regla (`--falcon-btn-bg` dentro de `.btn-primary`), y una variable de `:root` no gana a eso. Medido en la pantalla de acceso: con la paleta ya en verde, el enlace daba rgb(0,112,106) y el botón seguía en rgb(44,123,229). LO QUE SE ESCRIBE AQUÍ ES SOLO LO QUE EL CRM USA. De los 39 selectores de `theme.css` que llevan el azul escrito dentro, las pantallas usan 13; los otros son de componentes que no están -dataTables, el selector de emojis, el calendario, la línea de tiempo, el módulo LMS-. Escribirles reglas sería dejar CSS que no pinta nada y que la siguiente persona tiene que leer para descubrir que no significa nada. El recuento sale de contar las clases en los 145 archivos de pantalla, no de mirar el tema. DOS QUE SE MIDIERON Y SE DEJAN, con el número al lado para no volver a buscarlo. Una sonda con las mismas hojas y marcado de todos los componentes encontró azul de Falcon en `.btn-info` (#27bcfd, el celeste) y en `.table-primary` (#d5e5fa de fondo y #c7d7ec de borde en claro, #09192e y #223043 en oscuro). Las dos tienen CERO usos en los .razor, así que entran en lo que este bloque deja fuera a proposito. Lo que sí se usa del info -`alert-info` 14 veces, `bg-info` 13, `badge bg-info` 5, `text-info` 1- lee `--falcon-info` y su terna, que sí están puestas. SI VUELVES A MEDIR CON EL PANEL DEL NAVEGADOR, lee las VARIABLES y no el color pintado de un boton: `background-color` lleva transición, y con el panel oculto las transiciones no avanzan, así que al cambiar de tema el valor pintado se lee un paso atrás. Costó dos medidas en falso: el botón primario aparecía igual en los dos temas mientras `--falcon-btn-bg` ya decía #00706a en claro y #00a99d en oscuro. ============================================================================================= */ /* 246 usos. El de más peso visual del producto. */ .btn-primary { --falcon-btn-bg: var(--gt-acento); --falcon-btn-border-color: var(--gt-acento); --falcon-btn-hover-bg: var(--gt-acento-hover); --falcon-btn-hover-border-color: var(--gt-acento-hover); --falcon-btn-active-bg: var(--gt-acento-hover); --falcon-btn-active-border-color: var(--gt-acento-hover); /* El deshabilitado es el verde claro y NO el acento con opacidad: un botón apagado tiene que leerse como apagado sin depender de la transparencia, que sobre una tarjeta blanca y sobre el fondo gris da dos grises distintos. */ --falcon-btn-disabled-bg: var(--gt-acento-apagado); --falcon-btn-disabled-border-color: var(--gt-acento-apagado); } /* 31 usos. */ .btn-outline-primary { --falcon-btn-color: var(--gt-acento); --falcon-btn-border-color: var(--gt-acento); --falcon-btn-hover-bg: var(--gt-acento); --falcon-btn-hover-border-color: var(--gt-acento); --falcon-btn-active-bg: var(--gt-acento-hover); --falcon-btn-active-border-color: var(--gt-acento-hover); --falcon-btn-disabled-color: var(--gt-acento-apagado); --falcon-btn-disabled-border-color: var(--gt-acento-apagado); } /* 4 usos, pero es lo que marca la opción señalada de cualquier desplegable. */ .dropdown-menu { --falcon-dropdown-link-active-bg: var(--gt-acento); } /* 3 usos. */ .list-group { --falcon-list-group-active-bg: var(--gt-acento); --falcon-list-group-active-border-color: var(--gt-acento); } /* 7 usos. */ .progress, .progress-stacked { --falcon-progress-bar-bg: var(--gt-acento); } /* --------------------------------------------------------------------------------------------- EL ANILLO DE FOCO. Falcon lo escribe como un `box-shadow` literal dentro de cada regla, no con la variable `--falcon-focus-ring-color`, así que hay que repetir la sombra con el verde. Es el único sitio de este archivo donde se copia una medida del tema -el 0.25rem y el 0.25 de opacidad-: se copia a propósito, porque cambiarla aquí haría que el foco de un campo se viera distinto del de un botón. NO SE PUEDE BORRAR, SOLO RECOLOREAR: el anillo de foco es como navega quien usa el teclado (WCAG 2.4.7). Un `box-shadow: none` aquí dejaría la aplicación sin saber dónde está el cursor. --------------------------------------------------------------------------------------------- */ .form-control:focus, .form-select:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(0, 112, 106, 0.25); } .form-check-input:focus, .btn-close:focus, .nav-link:focus-visible { box-shadow: 0 0 0 0.25rem rgba(0, 112, 106, 0.25); } /* 52 usos. La casilla marcada y la de estado intermedio llevan el color escrito, no una variable. */ .form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--gt-acento); border-color: var(--gt-acento); } /* ============================================================================================= §6.1 — LOS GRISES DE FALCON SON AZULES, Y ESO ES LO QUE MÁS SE VE. El acento era una parte del «se ve muy azul»; ésta es la grande. Medidos los trece neutros del tema, ONCE tienen tinte azul: el canal azul por encima del rojo entre 4 y 28 puntos. No es una impresión, es la escala: --falcon-gray-200 #edf2f9 R237 G242 B249 y es EL FONDO de toda la aplicación --falcon-gray-300 #d8e2ef R216 G226 B239 los bordes de tarjetas y campos --falcon-gray-700 #5e6e82 R 94 G110 B130 y es EL TEXTO del cuerpo Con el acento en verde y los neutros en azul, el resultado no es «verde»: es una aplicación azul con botones verdes. CÓMO SE EMPAREJAN. Cada gris de Falcon se cambia por el de la suite con la LUMINOSIDAD más parecida, no por el que lleve un número parecido. El tema está diseñado con esa escala y los saltos entre sus pasos son lo que hace que un borde se vea borde y un texto se lea; emparejar por luminosidad cambia el tinte y deja esa relación donde estaba. El desvío va escrito al lado de cada uno. DOS GRISES SON NUEVOS porque la escala de la suite no los tenía y aquí hacen falta: - `--gt-gris-350`, porque el gray-400 de Falcon cae justo entre el 300 y el 400 de la suite; con el 300 se iba 0,10 de luminosidad y los elementos de gris medio se veían lavados. - `--gt-gris-950`, porque sin él los gray-700 y gray-800 caían los DOS en el gris 600 y se aplastaba un escalón que el tema usa para distinguir el texto del cuerpo del texto fuerte. Los dos se calculan manteniendo la familia del gris del logo (#58595B es R, R+1, R+3), no cogiendo un gris neutro cualquiera: un gris de otra escala, al lado del del logo, se ve sucio. ============================================================================================= */ :root { --gt-gris-350: #bfc0c2; /* calculado · luz 0,5267 */ --gt-gris-950: #161719; /* calculado · luz 0,0085 */ --falcon-gray-100: var(--gt-gris-050); /* -0,025 */ --falcon-gray-200: var(--gt-gris-100); /* -0,003 */ --falcon-gray-300: var(--gt-gris-200); /* +0,030 */ --falcon-gray-400: var(--gt-gris-350); /* -0,001 */ --falcon-gray-500: var(--gt-gris-400); /* -0,020 */ --falcon-gray-600: var(--gt-gris-500); /* -0,010 */ --falcon-gray-700: var(--gt-gris-600); /* -0,052 · el gris DEL LOGO */ --falcon-gray-800: var(--gt-gris-700); /* -0,040 */ --falcon-gray-900: var(--gt-gris-800); /* -0,021 */ --falcon-gray-1000: var(--gt-gris-900); /* -0,012 */ --falcon-gray-1100: var(--gt-gris-950); /* +0,000 */ /* El extremo oscuro queda un punto más oscuro en todos: sube el contraste, que es el lado seguro al que equivocarse. */ --falcon-light: var(--gt-gris-050); --falcon-dark: var(--gt-gris-950); /* ---------------------------------------------------------------------------------------- Los papeles del cuerpo, que Falcon declara aparte de la escala. ---------------------------------------------------------------------------------------- */ /* EL FONDO va al gris 050 y no al 100 que le tocaría por la escala: el contrato de la suite nombra el fondo de página explícitamente (`--gt-fondo: var(--gt-gris-050)`) y es lo que usa el ERP, que es la referencia. Dos productos de la misma suite con el fondo distinto es exactamente lo que este archivo existe para evitar. */ --falcon-body-bg: var(--gt-gris-050); --falcon-body-bg-rgb: 247, 247, 248; /* EL TEXTO DEL CUERPO es el gris DEL LOGO. El contrato lo midió: 7,01:1 sobre la superficie y 6,55:1 sobre el fondo, frente al 4,5 que pide la norma. El #5e6e82 que traía Falcon es más claro y además azul. */ --falcon-body-color: var(--gt-gris-600); --falcon-body-color-rgb: 88, 89, 91; --falcon-secondary-color: var(--gt-gris-700); --falcon-secondary-color-rgb: 67, 68, 71; --falcon-secondary-bg: var(--gt-gris-200); --falcon-secondary-bg-rgb: 228, 229, 230; --falcon-border-color: var(--gt-gris-200); /* EL CONTORNO DE UN CAMPO tiene que verse: WCAG 1.4.11 le pide 3:1 contra lo que lo rodea, y el borde de dividir filas no llega. Por eso el campo lleva un gris más fuerte que el resto de los bordes, que es lo que el contrato llama `--gt-borde-fuerte`. */ --falcon-input-border-color: var(--gt-gris-400); } /* ============================================================================================= §6.1 — LOS COLORES DE ESTADO. El «info» de Falcon es un celeste (#27bcfd) de su propia paleta, no de la nuestra, y es el azul que queda a la vista en cuanto el resto se pone en verde: todo aviso informativo de la aplicación es una banda celeste. El contrato de la suite dice que el info ES el verde (`--gt-info-500: var(--gt-verde-700)`), por la misma razón por la que el acento lo es. Los otros tres cambian menos de tono y más de intensidad. Los de Falcon están escogidos para verse vivos sobre blanco; los de la suite están escogidos MEDIDOS, para que el texto blanco encima llegue a 4,5:1. El verde #00d27a de Falcon con texto blanco encima da 1,8:1: se lee mal y es justo el color con el que se dice «se guardó». Los tintes -el fondo suave de una banda- se cambian también: si se cambia el color y no el tinte, la banda queda con fondo celeste y texto verde. ============================================================================================= */ :root { --falcon-info: var(--gt-verde-700); --falcon-info-rgb: 0, 133, 124; --falcon-info-text-emphasis: var(--gt-verde-900); --falcon-info-bg-subtle: var(--gt-verde-100); --falcon-info-border-subtle: var(--gt-verde-300); --falcon-success: #0f7b4a; /* --gt-exito-500 */ --falcon-success-rgb: 15, 123, 74; --falcon-success-text-emphasis: #0b5c37; --falcon-success-bg-subtle: #e6f4ed; /* --gt-exito-suave */ --falcon-success-border-subtle: #a8d8c0; --falcon-warning: #b45309; /* --gt-aviso-500 */ --falcon-warning-rgb: 180, 83, 9; --falcon-warning-text-emphasis: #8a3f07; /* El tinte del aviso es #fff7ed y no el #fdf0e3 que parecería natural: con aquél, el ámbar encima daba 4,48:1 y se quedaba a dos centésimas del mínimo. Lo midió GTECH TH. */ --falcon-warning-bg-subtle: #fff7ed; /* --gt-aviso-suave */ --falcon-warning-border-subtle: #f3cfa8; --falcon-danger: #b3261e; /* --gt-peligro-500 */ --falcon-danger-rgb: 179, 38, 30; --falcon-danger-text-emphasis: #8c1d17; --falcon-danger-bg-subtle: #fbeae8; /* --gt-peligro-suave */ --falcon-danger-border-subtle: #efb8b3; } /* ============================================================================================= §6.1 — LAS VARIABLES DE COMPONENTE QUE LLEVAN UN GRIS AZUL. Mismo caso que el botón, repetido por todo el tema: cada componente de Falcon declara sus propias variables DENTRO de su regla, así que la paleta de `:root` no las alcanza. Medido en la pantalla de oportunidades con la paleta ya en gris neutro: 499 elementos seguían pintando rgb(94,110,130), y salían de `--falcon-table-color` en las celdas y de las del menú lateral. ESTE BLOQUE ESTÁ GENERADO, no escrito a mano, y conviene que quede dicho: son 57 variables en 14 componentes, y el gris que le toca a cada una ya está decidido por luminosidad más arriba. Escribirlas a mano es pedir una errata que nadie ve, porque una variable mal escrita no falla: el componente se queda azul y parece que la regla no se aplicó. Solo entran los componentes que las pantallas usan. El modo oscuro se decide aparte y está al final del archivo, en su propia sección: no es este bloque con otro selector, porque en oscuro la escala de Falcon está invertida. ============================================================================================= */ .breadcrumb { --falcon-breadcrumb-divider-color: var(--gt-gris-500); --falcon-breadcrumb-item-active-color: var(--gt-gris-500); } .btn-link { --falcon-btn-disabled-color: var(--gt-gris-500); } .btn-outline-light { --falcon-btn-active-bg: var(--gt-gris-050); --falcon-btn-active-border-color: var(--gt-gris-050); --falcon-btn-active-color: var(--gt-gris-700); --falcon-btn-border-color: var(--gt-gris-050); --falcon-btn-color: var(--gt-gris-050); --falcon-btn-disabled-border-color: var(--gt-gris-050); --falcon-btn-disabled-color: var(--gt-gris-050); --falcon-btn-hover-bg: var(--gt-gris-050); --falcon-btn-hover-border-color: var(--gt-gris-050); --falcon-btn-hover-color: var(--gt-gris-700); } .btn-outline-secondary { --falcon-btn-active-bg: var(--gt-gris-500); --falcon-btn-active-border-color: var(--gt-gris-500); --falcon-btn-border-color: var(--gt-gris-500); --falcon-btn-color: var(--gt-gris-500); --falcon-btn-disabled-border-color: var(--gt-gris-500); --falcon-btn-disabled-color: var(--gt-gris-500); --falcon-btn-hover-bg: var(--gt-gris-500); --falcon-btn-hover-border-color: var(--gt-gris-500); } .btn-secondary { --falcon-btn-bg: var(--gt-gris-500); --falcon-btn-border-color: var(--gt-gris-500); --falcon-btn-disabled-bg: var(--gt-gris-500); --falcon-btn-disabled-border-color: var(--gt-gris-500); } .popover { --falcon-popover-body-color: var(--gt-gris-600); } .table { --falcon-table-color: var(--gt-gris-600); --falcon-table-striped-color: var(--gt-gris-600); } .table-danger { --falcon-table-active-color: var(--gt-gris-700); --falcon-table-color: var(--gt-gris-700); --falcon-table-hover-color: var(--gt-gris-700); --falcon-table-striped-color: var(--gt-gris-700); } .table-info { --falcon-table-active-color: var(--gt-gris-700); --falcon-table-color: var(--gt-gris-700); --falcon-table-hover-color: var(--gt-gris-700); --falcon-table-striped-color: var(--gt-gris-700); } .table-light { --falcon-table-active-color: var(--gt-gris-700); --falcon-table-bg: var(--gt-gris-050); --falcon-table-color: var(--gt-gris-700); --falcon-table-hover-color: var(--gt-gris-700); --falcon-table-striped-color: var(--gt-gris-700); } .table-primary { --falcon-table-active-color: var(--gt-gris-700); --falcon-table-color: var(--gt-gris-700); --falcon-table-hover-color: var(--gt-gris-700); --falcon-table-striped-color: var(--gt-gris-700); } .table-secondary { --falcon-table-active-color: var(--gt-gris-700); --falcon-table-color: var(--gt-gris-700); --falcon-table-hover-color: var(--gt-gris-700); --falcon-table-striped-color: var(--gt-gris-700); } .table-success { --falcon-table-active-color: var(--gt-gris-700); --falcon-table-color: var(--gt-gris-700); --falcon-table-hover-color: var(--gt-gris-700); --falcon-table-striped-color: var(--gt-gris-700); } .table-warning { --falcon-table-active-color: var(--gt-gris-700); --falcon-table-color: var(--gt-gris-700); --falcon-table-hover-color: var(--gt-gris-700); --falcon-table-striped-color: var(--gt-gris-700); } /* ============================================================================================= §6.1 — LA COLA DE LA RAÍZ. Variables que Falcon declara en `:root` -no dentro de un componente- y que seguían valiendo un gris azul después de reapuntar la escala. La más visible es la del MENÚ LATERAL (`--falcon-navbar-vertical-default-link-color`): es el color de todas sus opciones, y era el #5e6e82 que pintaba 83 enlaces de la barra. Generadas del tema, no escritas a mano, por lo mismo que el bloque anterior. ============================================================================================= */ :root { --falcon-dark-border-subtle: var(--gt-gris-400); /* era #9da9bb */ --falcon-gray-dark: var(--gt-gris-700); /* era #4d5969 */ --falcon-light-border-subtle: var(--gt-gris-100); /* era #edf2f9 */ --falcon-tertiary-bg: var(--gt-gris-050); /* era #f9fafd */ --falcon-tertiary-color: var(--gt-gris-500); /* era #748194 */ } /* ============================================================================================= §6.1 — EL RESTO DE LAS VARIABLES DEL TEMA CLARO. Falcon NO declara sus variables en un solo sitio: las reparte entre `:root`, `[data-bs-theme=light]` y el selector combinado `:root, [data-bs-theme=light]`. Mirar uno solo es como se escapan, y así se escapó el color del MENÚ LATERAL: 83 enlaces de la barra seguían en gris azulado con la escala ya cambiada, porque su variable vive en el combinado. Los tres bloques valen lo mismo en especificidad -`:root` es una pseudoclase, (0,1,0), igual que un atributo-, así que lo que decide es el ORDEN y el contrato gana porque carga el último. Lo que el orden no arregla es lo que el contrato no NOMBRA, que es esto. Generado recorriendo los bloques del tema, no escrito a mano. ============================================================================================= */ :root, [data-bs-theme=light] { --falcon-accordion-btn-color-global: var(--gt-gris-600); /* era #5e6e82 */ --falcon-alert-link-color: var(--gt-acento); /* era #2c7be5 */ --falcon-avatar-name-bg: var(--gt-gris-800); /* era #344050 */ --falcon-bg-choices-close-button: var(--gt-gris-100); /* era #edf2f9 */ --falcon-blockquote-footer-color: var(--gt-gris-500); /* era #748194 */ --falcon-blue: var(--gt-acento); /* era #2c7be5 */ --falcon-btn-reveal-color: var(--gt-gris-500); /* era #748194 */ --falcon-btn-reveal-hover-color: var(--gt-gris-600); /* era #5e6e82 */ --falcon-dark-border-subtle: var(--gt-gris-400); /* era #9da9bb */ --falcon-dropdown-link-hover-bg-global: var(--gt-gris-050); /* era #f9fafd */ --falcon-gray: var(--gt-gris-500); /* era #748194 */ --falcon-gray-dark: var(--gt-gris-700); /* era #4d5969 */ --falcon-kanban-bg: var(--gt-gris-050); /* era #f9fafd */ --falcon-kanban-nav-link-card-details-hover-bg: var(--gt-gris-100); /* era #edf2f9 */ --falcon-light-border-subtle: var(--gt-gris-100); /* era #edf2f9 */ --falcon-navbar-vertical-default-link-active-color: var(--gt-acento); /* era #2c7be5 */ --falcon-navbar-vertical-default-link-color: var(--gt-gris-600); /* era #5e6e82 */ --falcon-navbar-vertical-default-link-disable-color: var(--gt-gris-350); /* era #b6c1d2 */ --falcon-navbar-vertical-default-link-hover-color: var(--gt-gris-900); /* era #232e3c */ --falcon-navbar-vertical-inverted-bg-color: var(--gt-gris-900); /* era #232e3c */ --falcon-navbar-vertical-inverted-label-color: var(--gt-gris-600); /* era #5e6e82 */ --falcon-navbar-vertical-inverted-link-active-color: var(--gt-gris-100); /* era #edf2f9 */ --falcon-navbar-vertical-inverted-link-color: var(--gt-gris-400); /* era #9da9bb */ --falcon-navbar-vertical-inverted-link-disable-color: var(--gt-gris-600); /* era #5e6e82 */ --falcon-navbar-vertical-inverted-link-hover-color: var(--gt-gris-100); /* era #edf2f9 */ --falcon-navbar-vertical-inverted-scrollbar-color: var(--gt-gris-350); /* era #b6c1d2 */ --falcon-navbar-vertical-vibrant-scrollbar-color: var(--gt-gris-350); /* era #b6c1d2 */ --falcon-notification-title-bg: var(--gt-gris-050); /* era #f9fafd */ --falcon-popover-header-bg-global: var(--gt-gris-050); /* era #f9fafd */ --falcon-secondary: var(--gt-gris-500); /* era #748194 */ --falcon-simplebar-bg: var(--gt-gris-350); /* era #b6c1d2 */ --falcon-tertiary-bg: var(--gt-gris-050); /* era #f9fafd */ --falcon-tertiary-color: var(--gt-gris-500); /* era #748194 */ } /* ============================================================================================= §6.1 — LAS TERNAS `-rgb` DE LA ESCALA. Bootstrap y Falcon pintan sus UTILIDADES con `rgba(var(--x-rgb), opacidad)` y no con el color: `.bg-200` lee `--falcon-gray-200-rgb`, no `--falcon-gray-200`. Reapuntar el hex no las toca, y son las que más usan las pantallas -`text-600` sale 86 veces en los .razor-. Van con el número escrito y no con `var(...)`: dentro de un `rgba()` hace falta la terna, y un var() que resuelva a un hex deja el rgba() inválido y el elemento transparente, que es un fallo bastante más difícil de leer que un color equivocado. Los números están calculados del hex de cada gris, no copiados: una terna mal escrita no falla, pinta un gris parecido y nadie lo ve. ============================================================================================= */ :root, [data-bs-theme=light] { --falcon-gray-100-rgb: 247, 247, 248; /* --gt-gris-050 */ --falcon-gray-200-rgb: 241, 241, 242; /* --gt-gris-100 */ --falcon-gray-300-rgb: 228, 229, 230; /* --gt-gris-200 */ --falcon-gray-400-rgb: 191, 192, 194; /* --gt-gris-350 */ --falcon-gray-500-rgb: 163, 164, 166; /* --gt-gris-400 */ --falcon-gray-600-rgb: 124, 125, 128; /* --gt-gris-500 */ --falcon-gray-700-rgb: 88, 89, 91; /* --gt-gris-600 */ --falcon-gray-800-rgb: 67, 68, 71; /* --gt-gris-700 */ --falcon-gray-900-rgb: 46, 47, 49; /* --gt-gris-800 */ --falcon-gray-1000-rgb: 31, 32, 33; /* --gt-gris-900 */ --falcon-gray-1100-rgb: 22, 23, 25; /* --gt-gris-950 */ } /* ============================================================================================= §6.1 — LAS CLASES DE UTILIDAD. `.text-600`, `.bg-200`, `.border-300`: la forma corta de pedir un gris sin inventarse uno, y por eso las pantallas las usan mucho -`text-600` sale 86 veces en los .razor-. Cada una lleva el hex ESCRITO dentro de su regla, así que ninguna variable las alcanza: eran los últimos 16 elementos con tinte azul después de reapuntar la escala entera. Se reapuntan al mismo paso de la escala de la suite, con el mismo mapeo por luminosidad. ============================================================================================= */ /* El cristal de la barra superior: un gris azulado al 96 % de opacidad. Se cambia el COLOR y se le deja su transparencia, que es lo que le da el efecto. */ :root, [data-bs-theme=light] { --falcon-bg-navbar-glass: rgba(241, 241, 242, 0.96); /* gris 100 */ } /* ============================================================================================= §6.1 — LOS DOS ÚLTIMOS. Lo que quedaba después de reapuntar la escala, las ternas y las variables de componente: seis elementos medidos en la pantalla de oportunidades. Son dos reglas del tema con el gris escrito dentro, y se corrigen una a una porque son dos, no un patrón. El icono del menú hamburguesa se dibuja con tres barras hechas de `border` y de `background`, así que lleva el color en las dos propiedades: cambiar solo una lo deja a medias. ============================================================================================= */ /* Se apunta a .btn-falcon-default y NO a .btn, aunque el gris lo declare .btn. Ponerlo en .btn parecia lo correcto -es donde el tema lo escribe- y dejo el texto de TODOS los botones llenos en gris sobre verde, ilegible: el blanco de .btn-primary lo declara el tema, y una regla .btn escrita aqui vale lo mismo en especificidad y va despues, asi que gana. La leccion: al corregir una variable heredada, apuntar a la variante que se vio mal, no a la base de la que cuelga. */ .btn { --falcon-btn-color: var(--gt-gris-600); } /* Y se VUELVE A AFIRMAR el blanco en las variantes llenas, despues y a proposito. El blanco lo declara el tema dentro de cada variante, pero la regla .btn de aqui vale lo mismo en especificidad y va despues, asi que ganaba: el primer intento dejo el texto de TODOS los botones llenos en gris sobre verde, ilegible. Se vio en pantalla, no leyendo el archivo. */ .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-dark { --falcon-btn-color: var(--gt-texto-sobre-acento); } .navbar-toggle-icon, .navbar-toggle-icon::after, .navbar-toggle-icon::before { background-color: var(--gt-gris-600); border-color: var(--gt-gris-600); } /* ============================================================================================= §6.1 — EL MODO OSCURO. Hasta aquí el contrato solo cubría el tema claro, y su propia cabecera lo decía: «queda fuera el modo oscuro, que se decide aparte y todavía no se ha mirado». Ya está mirado, y medido: Falcon declara 190 variables en sus bloques `[data-bs-theme=dark]` y **100 llevan tinte azul**, proporcionalmente más que en el claro. LO QUE HACE EL TRABAJO SON LOS PAPELES, no las 13 reglas de componente. Esas reglas no llevan el verde escrito dentro: llevan `var(--gt-acento)`. Redefinir el papel aquí las voltea todas de una vez, que es el mismo principio por el que este archivo reapunta el framework en vez de barrer los 145 archivos de pantalla. EL ACENTO DEL OSCURO ES OTRO, Y NO POR GUSTO. Medido contra las tres superficies oscuras que Falcon usa de verdad -#0b1727 el fondo, #232e3c la tarjeta, #121e2d el realce-, el acento del claro (verde 800) da 2,31:1 en la tarjeta: ilegible. El primero de la escala que pasa el 4,5 es el verde 600, con 4,69:1 en el peor caso, y resulta ser EL color de la marca del logo. Es la misma lógica con la que el claro eligió el 800 sobre el 700, aplicada al revés. Y EL TEXTO SOBRE EL BOTÓN LLENO DEJA DE SER BLANCO: sobre el verde 600, el blanco da 2,93:1 y el gris 900 da 5,57:1. El botón, además, queda a 6,14:1 del fondo. Un botón verde con texto oscuro en el tema oscuro no es un descuido; es lo que piden los números. LA ESCALA DE FALCON ESTÁ INVERTIDA EN OSCURO -`gray-100` es el MÁS oscuro (#0b1727) y `gray-1000` el más claro-, así que el emparejamiento por luminosidad sale al revés que en el claro y este bloque NO es el bloque claro con otro selector. Una confirmación de que el método es el bueno: `--falcon-body-bg` cayó en el `--gt-gris-950` que el claro había calculado, con una desviación de 0,0002. GENERADO, no escrito a mano, y el número de al lado es cuánto se desvía la luminosidad de la pareja. Una variable mal escrita no falla: el componente se queda azul y parece que la regla no se aplicó. ============================================================================================= */ [data-bs-theme=dark] { /* Los grises que hacían falta y la escala de la suite no tenía, calculados en la familia del #58595B del logo. Un gris neutro de otra escala, al lado del gris del logo, se ve sucio -es la misma razón por la que el claro calculó el 350 y el 950-. */ --gt-gris-550: #6b6d6f; /* calculado · luz 0.1521 */ --gt-gris-450: #949699; /* calculado · luz 0.3041 */ /* LOS PAPELES. Esto es lo que voltea las reglas de componente. */ --gt-acento: var(--gt-verde-600); --gt-acento-vivo: var(--gt-verde-300); --gt-acento-suave: var(--gt-verde-900); --gt-texto-sobre-acento: var(--gt-gris-900); --gt-acento-hover: var(--gt-verde-500); --gt-acento-apagado: var(--gt-verde-900); } /* Los neutros y el acento del tema, reapuntados. */ [data-bs-theme=dark] { --falcon-body-color: var(--gt-gris-400); /* #9da9bb -0.0204 */ --falcon-body-bg: var(--gt-gris-950); /* #0b1727 +0.0002 */ --falcon-secondary-color: var(--gt-gris-200); /* #d8e2ef +0.0302 */ --falcon-secondary-bg: var(--gt-gris-700); /* #344050 +0.0081 */ --falcon-tertiary-color: var(--gt-gris-500); /* #748194 -0.0104 */ --falcon-tertiary-bg: var(--gt-gris-900); /* #162231 -0.0010 */ --falcon-primary-text-emphasis: var(--gt-verde-300); /* #abcaf5 acento */ --falcon-secondary-text-emphasis: var(--gt-gris-300); /* #c7cdd4 +0.0242 */ --falcon-dark-text-emphasis: var(--gt-gris-450); /* #91979e -0.0021 */ --falcon-primary-bg-subtle: var(--gt-verde-900); /* #0f2b50 acento */ --falcon-secondary-bg-subtle: var(--gt-gris-800); /* #292d34 +0.0024 */ --falcon-dark-bg-subtle: var(--gt-gris-950); /* #08101b +0.0035 */ --falcon-primary-border-subtle: var(--gt-verde-900); /* #163e73 acento */ --falcon-secondary-border-subtle: var(--gt-gris-700); /* #3a414a +0.0061 */ --falcon-light-border-subtle: var(--gt-gris-550); /* #5e6e82 +0.0007 */ --falcon-dark-border-subtle: var(--gt-gris-600); /* #4d5969 +0.0023 */ --falcon-link-color: var(--gt-verde-600); /* #2c7be5 acento */ --falcon-link-hover-color: var(--gt-verde-600); /* #2362b7 acento */ --falcon-gray-100: var(--gt-gris-950); /* #0b1727 +0.0002 */ --falcon-gray-200: var(--gt-gris-800); /* #232e3c +0.0020 */ --falcon-gray-300: var(--gt-gris-700); /* #344050 +0.0081 */ --falcon-gray-400: var(--gt-gris-600); /* #4d5969 +0.0023 */ --falcon-gray-500: var(--gt-gris-550); /* #5e6e82 +0.0007 */ --falcon-gray-600: var(--gt-gris-500); /* #748194 -0.0104 */ --falcon-gray-700: var(--gt-gris-400); /* #9da9bb -0.0204 */ --falcon-gray-800: var(--gt-gris-350); /* #b6c1d2 -0.0007 */ --falcon-gray-900: var(--gt-gris-200); /* #d8e2ef +0.0302 */ --falcon-gray-1000: var(--gt-gris-100); /* #edf2f9 -0.0033 */ --falcon-btn-falcon-primary-hover-color: var(--gt-verde-600); /* #5091e9 acento */ --falcon-btn-falcon-primary-active-background: var(--gt-gris-950); /* #070e17 +0.0043 */ --falcon-btn-falcon-primary-active-color: var(--gt-verde-600); /* #5091e9 acento */ --falcon-btn-falcon-secondary-hover-color: var(--gt-gris-450); /* #8c96a6 +0.0027 */ --falcon-btn-falcon-secondary-active-background: var(--gt-gris-950); /* #070e17 +0.0043 */ --falcon-btn-falcon-secondary-active-color: var(--gt-gris-450); /* #8c96a6 +0.0027 */ --falcon-btn-falcon-light-active-background: var(--gt-gris-950); /* #070e17 +0.0043 */ --falcon-btn-falcon-dark-active-background: var(--gt-gris-950); /* #070e17 +0.0043 */ --falcon-quaternary-bg: var(--gt-gris-950); /* #0b1727 +0.0002 */ --falcon-emphasis-bg: var(--gt-gris-900); /* #121e2d +0.0019 */ --falcon-input-focus-border-color-global: var(--gt-verde-900); /* #163e73 acento */ --falcon-navbar-vertical-default-link-color: var(--gt-gris-400); /* #9da9bb -0.0204 */ --falcon-navbar-vertical-default-link-hover-color: var(--gt-gris-100); /* #edf2f9 -0.0033 */ --falcon-navbar-vertical-default-link-active-color: var(--gt-verde-600); /* #2c7be5 acento */ --falcon-navbar-vertical-default-link-disable-color: var(--gt-gris-600); /* #4d5969 +0.0023 */ --falcon-navbar-vertical-card-bg-color: var(--gt-gris-900); /* #121e2d +0.0019 */ --falcon-btn-reveal-focus-bg: var(--gt-gris-950); /* #0a1523 +0.0013 */ --falcon-btn-reveal-focus-border-color: var(--gt-gris-950); /* #0a1422 +0.0017 */ --falcon-btn-falcon-default-hover-color: var(--gt-gris-300); /* #c2ccda +0.0326 */ --falcon-btn-falcon-default-active-background: var(--gt-gris-950); /* #0a1523 +0.0013 */ --falcon-btn-falcon-default-active-border: var(--gt-gris-300); /* #c2ccda +0.0326 */ --falcon-avatar-name-bg: var(--gt-gris-600); /* #4d5969 +0.0023 */ --falcon-notification-title-bg: var(--gt-gris-700); /* #344050 +0.0081 */ --falcon-notification-unread-hover-bg: var(--gt-gris-900); /* #1a222c -0.0011 */ --falcon-kanban-item-bg: var(--gt-gris-800); /* #232e3c +0.0020 */ --falcon-kanban-nav-link-card-details-hover-bg: var(--gt-gris-700); /* #344050 +0.0081 */ --falcon-bg-shape-bg: var(--gt-verde-900); /* #01224b acento */ --falcon-bg-circle-shape-bg: var(--gt-verde-600); /* #4695ff acento */ --falcon-modal-shape-header-bg: var(--gt-verde-900); /* #01224b acento */ --fc-page-bg-color: var(--gt-gris-950); /* #0b1727 +0.0002 */ --fc-neutral-bg-color: var(--gt-gris-800); /* #232e3c +0.0020 */ --falcon-leaflet-bar-bg: var(--gt-gris-700); /* #344050 +0.0081 */ --falcon-bg-choices-close-button: var(--gt-gris-600); /* #4d5969 +0.0023 */ --falcon-thumbnail-bg-global: var(--gt-gris-800); /* #232e3c +0.0020 */ --falcon-dropdown-bg-global: var(--gt-gris-800); /* #232e3c +0.0020 */ --falcon-dropdown-link-hover-color-global: var(--gt-gris-100); /* #eaeff6 +0.0214 */ } /* Las ternas `-rgb`. Con el número escrito y no con `var(...)`: dentro de un `rgba()` hace falta la terna, y un var() que resuelva a un hex deja el rgba() inválido y el elemento transparente, que es un fallo bastante más difícil de leer que un color equivocado. */ [data-bs-theme=dark] { --falcon-body-color-rgb: 163, 164, 166; /* --gt-gris-400 */ --falcon-body-bg-rgb: 22, 23, 25; /* --gt-gris-950 */ --falcon-secondary-color-rgb: 228, 229, 230; /* --gt-gris-200 */ --falcon-secondary-bg-rgb: 67, 68, 71; /* --gt-gris-700 */ --falcon-tertiary-color-rgb: 124, 125, 128; /* --gt-gris-500 */ --falcon-tertiary-bg-rgb: 31, 32, 33; /* --gt-gris-900 */ --falcon-link-color-rgb: 0, 169, 157; /* --gt-verde-600 */ --falcon-link-hover-color-rgb: 0, 169, 157; /* --gt-verde-600 */ --falcon-gray-100-rgb: 22, 23, 25; /* --gt-gris-950 */ --falcon-gray-200-rgb: 46, 47, 49; /* --gt-gris-800 */ --falcon-gray-300-rgb: 67, 68, 71; /* --gt-gris-700 */ --falcon-gray-400-rgb: 88, 89, 91; /* --gt-gris-600 */ --falcon-gray-500-rgb: 107, 109, 111; /* --gt-gris-550 */ --falcon-gray-600-rgb: 124, 125, 128; /* --gt-gris-500 */ --falcon-gray-700-rgb: 163, 164, 166; /* --gt-gris-400 */ --falcon-gray-800-rgb: 191, 192, 194; /* --gt-gris-350 */ --falcon-gray-900-rgb: 228, 229, 230; /* --gt-gris-200 */ --falcon-gray-1000-rgb: 241, 241, 242; /* --gt-gris-100 */ --falcon-primary-rgb: 0, 169, 157; /* --gt-verde-600 */ --falcon-secondary-rgb: 124, 125, 128; /* --gt-gris-500 */ --falcon-dark-rgb: 46, 47, 49; /* --gt-gris-800 */ --falcon-quaternary-bg-rgb: 22, 23, 25; /* --gt-gris-950 */ --falcon-emphasis-bg-rgb: 31, 32, 33; /* --gt-gris-900 */ --falcon-dark: rgba(46, 47, 49, 0.25); /* --gt-gris-800 */ --falcon-btn-falcon-dark-hover-color: rgba(163, 164, 166, 0.3775); /* --gt-gris-400 */ --falcon-btn-falcon-dark-active-color: rgba(163, 164, 166, 0.3775); /* --gt-gris-400 */ --falcon-bg-navbar-glass: rgba(22, 23, 25, 0.96); /* --gt-gris-950 */ --falcon-navbar-vertical-default-scrollbar-color: rgba(124, 125, 128, 0.3); /* --gt-gris-500 */ --falcon-kanban-bg: rgba(46, 47, 49, 0.25); /* --gt-gris-800 */ --falcon-scrollbar-bg: rgba(67, 68, 71, 0.6); /* --gt-gris-700 */ --falcon-simplebar-bg: rgba(191, 192, 194, 0.6); /* --gt-gris-350 */ --falcon-btn-disabled-custom-background: rgba(22, 23, 25, 0.65); /* --gt-gris-950 */ --falcon-dropdown-link-hover-bg-global: rgba(22, 23, 25, 0.4); /* --gt-gris-950 */ --falcon-popover-header-bg-global: rgba(46, 47, 49, 0.25); /* --gt-gris-800 */ --falcon-toast-bg-global: rgba(67, 68, 71, 0.3); /* --gt-gris-700 */ --falcon-toast-header-bg-global: rgba(67, 68, 71, 0.3); /* --gt-gris-700 */ } /* ============================================================================================= §6.1 — LOS COLORES DE ESTADO EN OSCURO. Hacen falta porque los del claro viven en un `:root` pelado: en oscuro ganan igual -misma especificidad que `[data-bs-theme=dark]`, y esta hoja carga después-, así que sin esto una banda de aviso sale con fondo claro en una interfaz oscura. El texto se leería, pero el bloque brillaría como una lámpara en medio de la pantalla. Cada color se aclara mezclándolo con blanco hasta pasar 4,5:1 contra el fondo, y se para en el primer paso que pasa para no perder el tono más de lo necesario. El tinte se mezcla con NUESTRO fondo -el --gt-gris-950, #161719- y no con el #0b1727 de Falcon: mezclar con el de Falcon metía por la puerta de atrás el azul que todo esto venía a quitar, y la banda de información salía #09313c, con el azul por encima del verde. Se vio en el censo de la página pintada, no leyendo el archivo. El énfasis se mezcla con blanco. Las dos medidas van escritas: la del color sobre el fondo y la del texto sobre su propia banda. ============================================================================================= */ [data-bs-theme=dark] { /* info · #00a99d sobre el fondo 6,12:1 · el texto sobre su banda 9,22:1 */ --falcon-info: #00a99d; --falcon-info-rgb: 0, 169, 157; --falcon-info-text-emphasis: #9ededa; --falcon-info-bg-subtle: #123131; --falcon-info-border-subtle: #0a6762; /* success · #359067 sobre el fondo 4,56:1 · el texto sobre su banda 8,76:1 */ --falcon-success: #359067; --falcon-success-rgb: 53, 144, 103; --falcon-success-text-emphasis: #a4cdba; --falcon-success-bg-subtle: #152922; --falcon-success-border-subtle: #124e34; /* warning · #be6b2b sobre el fondo 4,55:1 · el texto sobre su banda 8,81:1 */ --falcon-warning: #be6b2b; --falcon-warning-rgb: 190, 107, 43; --falcon-warning-text-emphasis: #e2bea2; --falcon-warning-bg-subtle: #322216; --falcon-warning-border-subtle: #6d3810; /* danger · #c8635d sobre el fondo 4,61:1 · el texto sobre su banda 8,31:1 */ --falcon-danger: #c8635d; --falcon-danger-rgb: 200, 99, 93; --falcon-danger-text-emphasis: #e2adaa; --falcon-danger-bg-subtle: #321a1a; --falcon-danger-border-subtle: #6c1f1c; } /* ============================================================================================= §6.1 — LA FUGA DEL `:root` AL OSCURO. Esto es lo que se escapó al escribir el bloque de arriba, y conviene que quede dicho porque es un error de razonamiento y no un descuido. El bloque oscuro reapuntó lo que FALCON declara en SUS bloques `[data-bs-theme=dark]`, que son 190 variables. Pero este archivo escribe otras en `:root`, y `:root` casa SIEMPRE -también en oscuro-; `:root, [data-bs-theme=light]` también, porque el `:root` de la lista ya basta. Las dos valen (0,1,0), lo mismo que el selector del oscuro, así que gana la que va después... pero solo en las variables que el oscuro NOMBRA. Se vio en pantalla: con el bloque oscuro ya puesto, `--falcon-primary` seguía dando #00706a, el acento del CLARO, sobre el fondo oscuro. Medido: 106 variables de este archivo se filtran al oscuro y 32 no estaban nombradas. LOS GRISES SE ESPEJAN en la escala -900↔050, 800↔100, 700↔200, 600↔300, 500↔400-, que es lo mismo que hace Falcon con los suyos. Espejar conserva el CONTRASTE con el que el tema fue diseñado; elegir un gris «que se vea bien» lo pierde. LA LETRA NO ENTRA: `--falcon-font-sans-serif` y sus dos hermanas se filtran igual, y está bien. Que una variable se filtre no es el defecto; el defecto es que se filtre un valor que solo sirve para un tema. ============================================================================================= */ [data-bs-theme=dark] { --bs-link-color: #00a99d; /* acento del oscuro */ --bs-link-color-rgb: 0, 169, 157; /* acento del oscuro */ --bs-link-hover-color: #00bfae; /* acento del oscuro */ --bs-link-hover-color-rgb: 0, 191, 174; /* acento del oscuro */ --bs-primary: #00a99d; /* acento del oscuro */ --bs-primary-rgb: 0, 169, 157; /* acento del oscuro */ --falcon-accordion-btn-color-global: var(--gt-gris-300); /* gris 600 -> 300, espejado */ --falcon-alert-link-color: #00a99d; /* acento del oscuro */ --falcon-blockquote-footer-color: var(--gt-gris-400); /* gris 500 -> 400, espejado */ --falcon-blue: #00a99d; /* acento del oscuro */ --falcon-border-color: var(--gt-gris-700); /* gris 200 -> 700, espejado */ --falcon-btn-reveal-color: var(--gt-gris-400); /* gris 500 -> 400, espejado */ --falcon-btn-reveal-hover-color: var(--gt-gris-300); /* gris 600 -> 300, espejado */ --falcon-gray: var(--gt-gris-400); /* gris 500 -> 400, espejado */ --falcon-gray-1100: var(--gt-gris-050); /* gris 950 -> 50, espejado */ --falcon-gray-1100-rgb: 247, 247, 248; /* gris 950 -> 50, espejado */ --falcon-gray-dark: var(--gt-gris-200); /* gris 700 -> 200, espejado */ --falcon-input-border-color: var(--gt-gris-500); /* gris 400 -> 500, espejado */ --falcon-light: var(--gt-gris-900); /* gris 50 -> 900, espejado */ --falcon-primary: #00a99d; /* acento del oscuro */ --falcon-secondary: var(--gt-gris-400); /* gris 500 -> 400, espejado */ }