/* Copyright (c) 2026, SFY / Plexus Tech y contribuidores */ /* ============================================================================ * MARCA CORPORATIVA BSC AI FACTORY EN EL DESK Y EL LOGIN DE FRAPPE (§ 5 / UX) * ---------------------------------------------------------------------------- * Aplica la guía "Manual BSC_Imatge Corporativa" a la UI interna de Frappe v15 * (el Desk /app y la pantalla de login /login). NO toca el portal Vue, que ya * está brandeado por su cuenta (ver portal/src/themes/bsc.css y tokens/*.json). * * MECANISMO: Frappe v15 expone su sistema de diseño como CUSTOM PROPERTIES CSS * en :root (paleta "espresso"). Redefinir esas variables en una hoja cargada * DESPUÉS de los bundles de Frappe (vía app_include_css / web_include_css) las * sobre-escribe en cascada sin tocar el core. Variables reales verificadas en * la versión instalada (apps/frappe/frappe/public/scss): * --primary color maestro de marca (Bootstrap; def. #171717). * Lo consumen: color activo del sidebar, subrayado de * pestaña activa (form), enlaces .btn-link, barra de * progreso, checkbox, calendario, enlaces de report... * --primary-color acento en bordes (notification, theme_switcher). * --brand-color = var(--primary) (se hereda solo, no hay que fijarlo). * --btn-primary fondo del botón primario (.btn-primary). El texto es * var(--neutral) -> blanco en claro / negro en oscuro. * --font-stack familia tipográfica de TODO el Desk y el login * (common/global.scss, desk/global.scss, website/base). * --focus-default sombra de foco de teclado (botones, checkbox, grid). * * PALETA (Manual BSC): * Navy #002369 (Pantone 280) -> primario/base. Blanco encima = 14.5:1 (AAA). * Azul #006EC7 (P300) -> acento. Blanco encima = 5.2:1 (AA). * Azul #51A8FF (P279) -> acento claro (marca en tema oscuro). * Naranja#E27000 -> SOLO decorativo. No cumple AA como texto, * así que NO se usa para texto ni botones. * * CONTRASTE AA: en claro el primario es navy (texto blanco encima, 14.5:1); en * oscuro el primario pasa a #51A8FF (texto/enlaces sobre gray-900 = 7.2:1, y el * botón primario invierte a fondo claro + texto negro = 8.4:1), respetando el * patrón de inversión propio de Frappe. * * TEMA OSCURO: Frappe marca el modo oscuro con el atributo data-theme="dark" en * (theme_switcher.js: document.documentElement.setAttribute("data-theme", * ...)). El tema claro es :root / [data-theme="light"]. Por eso los overrides de * oscuro se repiten bajo [data-theme="dark"], que gana en especificidad. * ============================================================================ */ /* --- Tema claro (por defecto) --------------------------------------------- */ :root, :root[data-theme="light"] { /* Tipografía web corporativa (Manual BSC: "textos web" = Verdana). Espejo de * portal/tokens/typography.json y portal/src/style.css. Public Sans Variable * como fallback autoalojado (sin fuentes por CDN); luego sans-serif de sistema. * !important: login.bundle.css redefine :root{--font-stack} DESPUÉS de esta hoja * (orden de carga fijado por Frappe); un !important en la custom property gana a * esa redefinición posterior sin tener que controlar el orden de los bundles. */ --font-stack: Verdana, "Public Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; /* Color maestro de marca -> navy corporativo (Pantone 280). */ --primary: #002369 !important; --primary-color: #002369 !important; /* Botón primario: fondo navy. El texto es var(--neutral) = blanco => 14.5:1. * !important por el mismo motivo que --font-stack (login.bundle pisa --btn-primary * después). NO afecta al :active del Desk, que fija el fondo por otra vía. */ --btn-primary: #002369 !important; /* Foco de teclado visible con color de marca (acento P300 sobre fondos claros). */ --focus-default: 0px 0px 0px 2px #006ec7 !important; } /* --- Tema oscuro ----------------------------------------------------------- */ :root[data-theme="dark"] { /* En oscuro el primario navy no contrasta contra gray-900; se usa el acento * claro de marca (P279) para enlaces, sidebar activo, subrayados, etc. * !important por el mismo motivo que en el bloque claro (bundles posteriores). */ --primary: #51a8ff !important; --primary-color: #51a8ff !important; /* Botón primario en oscuro: Frappe invierte (fondo claro + texto var(--neutral) * = negro). #51A8FF con texto negro = 8.4:1. On-brand (acento claro P279). */ --btn-primary: #51a8ff !important; /* Foco de teclado más luminoso para que resalte sobre superficies oscuras. */ --focus-default: 0px 0px 0px 2px #51a8ff !important; } /* ---------------------------------------------------------------------------- * Refuerzos puntuales de identidad (no dependen solo de la cascada de vars). * -------------------------------------------------------------------------- */ /* Línea de marca en la navbar del Desk: identidad sin tocar el fondo (mantiene * el contraste de los iconos). var(--primary) => navy en claro, P279 en oscuro. */ .navbar { border-bottom: 2px solid var(--primary); } /* Foco de teclado accesible también en elementos que no usan --focus-default * (enlaces y controles nativos): contorno visible de color de marca. Complementa * (no sustituye) el box-shadow de Frappe en botones/checkbox. */ a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* ---------------------------------------------------------------------------- * BOTÓN PRIMARIO EN WEB/LOGIN (.btn-primary) * ---------------------------------------------------------------------------- * IMPORTANTE: en el Desk el botón primario es ".btn.btn-primary" y sí lee * var(--btn-primary), así que la variable de arriba ya lo tiñe. Pero en las * páginas WEB (incluido /login) ".btn-primary" viene del bundle de website con * el mixin button-variant de Bootstrap, que COMPILA el color $primary (#171717) * a pelo (no usa la custom property). Verificado en el render: la regla efectiva * es `.btn-primary{background:#171717}` desde website.bundle.css. Por eso hay que * teñirlo explícitamente aquí. * * Se usa var(--primary) (navy en claro, P279 en oscuro) para el fondo y * var(--neutral) (blanco en claro, negro en oscuro) para el texto, replicando el * patrón de inversión de Frappe: navy + blanco (14.5:1) en claro; #51A8FF + negro * (8.4:1) en oscuro. Ambos AA. El :active del Desk lleva !important propio y se * respeta (feedback nativo, sigue siendo legible). * -------------------------------------------------------------------------- */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--primary); border-color: var(--primary); color: var(--neutral); } /* Feedback de hover sin cambiar de tono (evita usar el naranja decorativo o * mezclar hues): se aclara ligeramente el navy/azul de marca. */ .btn-primary:hover { filter: brightness(1.12); } /* Enlace de "regístrate / olvidé contraseña" del login: Frappe lo pinta con * var(--primary) (ya navy). Subrayado en hover para affordance de enlace. */ .for-login .sign-up-message a:hover, .for-forgot .sign-up-message a:hover, .for-signup .sign-up-message a:hover { text-decoration: underline; }