/* * UIBoard — tema "B · Plano" (dirección visual aprobada por el owner, * 2026-09-29, sobre la revisión de diseño de esa fecha). * * QUÉ ES ESTO Y POR QUÉ NO VIOLA LA REGLA DURA DE ../README.md * -------------------------------------------------------------- * La regla dura del branding ("nunca se edita un archivo fuente de Penpot, * ni para branding") sigue vigente sin cambios. Este archivo NO toca, no * lee, no depende del contenido de `css/main.css` de Penpot — es un * stylesheet 100% nuestro, servido por este mismo sidecar, inyectado en el * del HTML por el MISMO mecanismo `sub_filter` que ya usa ../nginx.conf * para el (ver ese archivo, bloque `sub_filter`). El navegador lo * evalúa DESPUÉS del `css/main.css` de Penpot y gana por cascada — ninguna * línea de acá modifica un byte de ningún archivo que Penpot compile o sirva. * * Es una categoría distinta de la que ../README.md descarta explícitamente * ("textos/logo dentro de la SPA ya cargada... exigiría editar el bundle"). * Las custom properties de CSS se resuelven en tiempo de RENDER por el * motor del navegador, no en tiempo de build de Penpot — no importa qué * componente ClojureScript haya creado el elemento en el DOM, si ese * elemento lee `var(--color-accent-primary)`, toma el valor que gane la * cascada, sea cual sea el stylesheet que lo definió último. * * Ampliación de alcance vs. lo que ../README.md tenía escrito hasta hoy * (branding = solo pestaña + compartición social): el owner confirmó * explícitamente extenderlo a color/tipografía de la interfaz, 2026-09-29. * * FUENTE DE LOS TOKENS QUE SE SOBRESCRIBEN * -------------------------------------------------------------- * Los nombres de las ~35 variables de abajo se verificaron contra el * `css/main.css` REAL servido por la instancia de staging (stg-app2-nbg1), * vía túnel SSH, 2026-09-29 — no son un supuesto ni una lectura de * documentación de terceros. Penpot las declara bajo dos clases, * `.default` (tema oscuro, el que usa este proyecto por defecto — Penpot es * ante todo un editor de canvas, y el oscuro es su hábito) y `.light` * (tema claro). Este archivo SOLO sobrescribe `.default` — Dirección B se * definió como "oscuro · técnico" en la revisión de diseño; un usuario que * cambie a tema claro ve el Penpot original sin marca. Gap conocido y * declarado, no un olvido: cerrarlo es agregar el bloque `.light` * equivalente cuando haga falta, mismo patrón. * * QUÉ NO SE TOCA, Y POR QUÉ (a propósito, no por omisión) * -------------------------------------------------------------- * - --color-canvas: es el fondo real del LIENZO de diseño — el color contra * el que cada usuario ve y compara los colores de su propio trabajo. * Cambiarlo distorsionaría la percepción de color de cualquier diseño * real cargado en la app. Se deja EXACTAMENTE como Penpot lo define. * - --color-accent-success/warning/error/info y sus *-background/*-foreground: * son color semántico (bueno/alerta/crítico), ya probado por Penpot para * contraste y reconocimiento. Un acento de marca no debe pisar semántica * de estado — mismo criterio que la propia revisión de diseño del * 2026-09-29 (sección "Cuando la página es una UI"). * - --color-token-*: pertenecen a la feature de "design tokens" de Penpot * (paneles de tokens del propio producto), sin relación con la marca. * - --color-badge-premium: badge comercial de Penpot, fuera de alcance. * * Nota: la cabecera de este archivo mencionaba antes cargar las fuentes vía * Google Fonts en tiempo de ejecución — se cambió a autohospedar los .woff2 * en ./fonts/ (ver el comentario del bloque de tipografía, más abajo) antes * de desplegar nada; no queda ninguna dependencia de red externa para texto. * * VERIFICACIÓN PENDIENTE (declarada, no asumida) * -------------------------------------------------------------- * El frontend de esta instancia todavía no resuelve su `penpotPublicURI` * (`https://uiboard.argusapps.net`, ver hallazgo de la revisión de diseño * del 2026-09-29) — hasta que la Task 3 (exposición pública) esté resuelta, * la SPA no monta ningún DOM autenticado contra el que verificar visualmente * estos colores en el navegador. Lo que SÍ se verificó por efecto antes de * este commit: (a) el archivo se sirve con 200 desde el sidecar, (b) el * `<link>` que lo carga aparece en el HTML devuelto por el proxy, (c) las * custom properties, leídas con `getComputedStyle` sobre `document.body` * tras forzar la clase `default` a mano, devuelven los valores de ESTE * archivo y no los de Penpot. Verificación visual completa (pixels reales * de login/dashboard/workspace): pendiente de Task 3. */ .default { /* ---- superficie ---- */ --color-background-default: #16232e !important; --color-background-primary: #16232e !important; --color-background-secondary: #101b24 !important; --color-background-tertiary: #1d2e3b !important; --color-background-quaternary: #26384a !important; --color-background-disabled: #26384a !important; --color-accent-default: #223140 !important; --color-icon-default: #7f97a8 !important; --color-foreground-primary: #eaf1f6 !important; --color-foreground-secondary: #7f97a8 !important; /* ---- acento de marca (ámbar — reemplaza el cian/violeta de Penpot) ---- */ --color-accent-primary: #e8a23d !important; --color-accent-primary-muted: #4a3b22 !important; --color-accent-secondary: #6e8ca0 !important; --color-accent-tertiary: #4fb8c9 !important; --color-accent-quaternary: #c97f73 !important; --color-accent-overlay: rgba(232, 162, 61, 0.5) !important; --color-accent-select: rgba(232, 162, 61, 0.12) !important; --color-accent-background-select: rgba(232, 162, 61, 0.55) !important; --color-accent-action: #6e8ca0 !important; --color-accent-action-hover: #5d7a8c !important; /* ---- superposiciones/sombras, derivadas del nuevo fondo ---- */ --color-overlay-default: rgba(22, 35, 46, 0.6) !important; --color-overlay-onboarding: rgba(22, 35, 46, 0.9) !important; --color-shadow-dark: rgba(0, 0, 0, 0.6) !important; --color-shadow-light: rgba(0, 0, 0, 0.3) !important; /* semántico (success/warning/error/info), --color-canvas y --color-token-*: deliberadamente NO se listan acá — ver el comentario de cabecera. */ } /* * Tipografía — mismo truco que el color: se REGISTRA un nuevo recurso de * fuente bajo el MISMO font-family que ya usan miles de selectores del CSS * de Penpot ("worksans" para texto, "Roboto Mono" para datos/coordenadas), * en vez de intentar sobrescribir cada selector individual. La spec de CSS * Fonts resuelve @font-face por orden de aparición en el documento cuando * hay solape de unicode-range — al cargar este archivo DESPUÉS del de * Penpot (mismo mecanismo `sub_filter`), estas dos declaraciones ganan para * todo el texto, sin tocar un solo selector de Penpot. * * Los archivos .woff2 se AUTOHOSPEDAN en ./fonts/ (mismo mount de solo * lectura que ya sirve el favicon) en vez de depender de Google Fonts en * tiempo de ejecución — evita un salto de red externo por cada visita y una * dependencia de disponibilidad de un tercero para algo tan central como el * texto de la app. Se descartó `src: local("Archivo")` a propósito: solo * funciona si el sistema operativo del visitante ya tiene esa fuente * instalada, que casi nunca es cierto — habría degradado en silencio a la * fuente de Penpot para la inmensa mayoría de usuarios. * * Origen de los archivos (Google Fonts, licencia OFL, subset "latin" — * cubre español/inglés incl. tildes y ñ, todo dentro de U+0000-00FF): * Archivo → variable, peso 100-900, un solo archivo cubre todo el rango * Space Mono → estático, solo viene en 400/700 (sin variable font) * Bajados 2026-09-29 desde fonts.gstatic.com vía la API css2 oficial. */ @font-face { font-family: "worksans"; src: url("/branding/fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url("/branding/fonts/SpaceMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url("/branding/fonts/SpaceMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }