/* dx-overrides.css — mapeo de DevExpress Blazor (tema Fluent 25.2) a los tokens --lx-*. SOLO VARIABLES: prohibido tocar clases internas de DX acá (se rompen en cada upgrade). --------------------------------------------------------------------------- CÓMO ES FLUENT 25.2.4 (verificado contra el CSS instalado en ~/.nuget/packages/devexpress.blazor.themes.fluent/25.2.4/staticwebassets/ — NO contra HUB, que está en 26.1 y lee pasos distintos) --------------------------------------------------------------------------- 1. ESCALAS CRUDAS --dxds-neutral-10..250 (25 pasos) y --dxds-primary-10..170 (17), declaradas en :root por el archivo de acento (accents/*.min.css). ⚠️ 25.2 declara ADEMÁS una copia legacy con prefijo --DS-* (--DS-neutral-*, --DS-primary-*, --DS-color-*). El core consume ~3900 veces --dxds-* y solo ~30 --DS-* (sombras, foco). Se reescribe --dxds-* y se apunta la copia legacy a la nuestra para que no quede un gris de Fluent suelto. 2. SEMÁNTICOS --dxds-color-{surface|content|border}-*, en modes/*.min.css, siempre como var(--dxds-neutral-N) / var(--dxds-primary-N). 3. COMPONENTE --dxbl-* (internas según la doc), declaradas en el scope del componente (.dxbl-grid, .dxbl-btn…): en :root son INERTES. ESTRATEGIA: reescribir la capa 1 por modo. Con eso caen solos los cientos de semánticos. La capa 3 solo donde el semántico no alcanza (grilla). REGLA AL AGREGAR UNA VARIABLE: verificar el nombre contra el CSS instalado. Un nombre inexistente no falla: no hace nada. grep -o -- '--dxbl-grid-[a-z0-9-]*' core.min.css | sort -u CÓMO SE DETECTA EL MODO: DX no lo marca en el DOM; swapea el archivo modes/light.min.css ↔ modes/dark.min.css, y ambos declaran sobre `.dxbl-theme-fluent-mode-X, :root`. Un bloque :root nuestro sin condicionar pisaría al modo cargado → todo bloque de modo va con :has() sobre el . Los bloques "de cualquier modo" usan :has(link[href*="modes/"]) solo para subir la especificidad por encima del :root de DX: el ThemeSwitcher inserta sus DESPUÉS de los nuestros, así que un empate lo ganaría DX. */ /* =========================================================================== 0. ESCALA DE ACENTO (--dxbl-accent-color-) --------------------------------------------------------------------------- XAF inyecta el color del ThemeSwitcher como UNA variable (`:root { --dxbl-accent-color: #3B4FD8 }`), pero accents/blue.min.css define cada paso como `--dxds-primary-N: var(--dxbl-accent-color-N, )`. Nadie define los pasos numerados → sin este bloque TODO el acento (botón primario, links, foco, selección, loader) cae al celeste #0F6CBD de Fluent. Los 17 pasos van POR MODO porque 25.2 lee pasos distintos en cada uno: claro: 90 relleno y texto primary · 110 hover · 120 pressed · 10 selección (deep-rest) · 30 selección hover · 60 borde primary oscuro: 70 texto/borde primary (links) · 60 texto hover · 90 relleno · 80 relleno hover · 120 pressed · 150 selección · 130 selección hover ⚠️ TRAMPA 25.2: el TEXTO sobre superficies primary (botón primario, check del checkbox, página activa del pager, día del calendario…) es content-neutral-default-static-dark-rest = neutral-10 en LOS DOS modos, o sea claro también en oscuro. Si el relleno oscuro fuera --lx-accent (#8C9CFF), ese texto claro daría 2,1:1. Por eso en oscuro el RELLENO (90) es el índigo exacto de marca #3B4FD8 (texto #E6EDF3 encima: 5,39) y el --lx-accent claro queda para lo que DX pinta como CONTENIDO (70: links, bordes, foco). Es el mismo reparto que hace DX, no un segundo acento. =========================================================================== */ :root:has(link[href*="modes/light.min.css"]) { --dxbl-accent-color-10: var(--lx-accent-subtle); /* #ECEEFC — selección */ --dxbl-accent-color-20: #DADEF8; --dxbl-accent-color-30: #C7CDF4; /* selección + hover */ --dxbl-accent-color-40: #B3BBF0; --dxbl-accent-color-50: #9FA9EC; /* relleno deshabilitado */ --dxbl-accent-color-60: #8A96E7; /* borde primary */ --dxbl-accent-color-70: #7383E2; --dxbl-accent-color-80: #5A6ADD; --dxbl-accent-color-90: var(--lx-accent); /* #3B4FD8 — EXACTO */ --dxbl-accent-color-100: #3647C8; --dxbl-accent-color-110: var(--lx-accent-hover); /* #3242B8 */ --dxbl-accent-color-120: #2A389C; --dxbl-accent-color-130: #232E80; --dxbl-accent-color-140: #1B2464; --dxbl-accent-color-150: #141A49; --dxbl-accent-color-160: #0D112E; --dxbl-accent-color-170: #060814; } :root:has(link[href*="modes/dark.min.css"]) { --dxbl-accent-color-10: #F0F2FF; --dxbl-accent-color-20: #E0E4FF; --dxbl-accent-color-30: #CDD3FF; --dxbl-accent-color-40: #BAC3FF; --dxbl-accent-color-50: #B0BAFF; --dxbl-accent-color-60: var(--lx-accent-hover); /* #A5B1FF — link hover */ --dxbl-accent-color-70: var(--lx-accent); /* #8C9CFF — links, bordes, foco */ --dxbl-accent-color-80: #4658DC; /* relleno hover: 4,82 con texto */ --dxbl-accent-color-90: #3B4FD8; /* relleno: índigo de marca (ver trampa) */ --dxbl-accent-color-100: #3445C4; --dxbl-accent-color-110: #2E3DB0; --dxbl-accent-color-120: #29379C; /* pressed / deshabilitado */ --dxbl-accent-color-130: #232A55; /* selección + hover */ --dxbl-accent-color-140: #202650; --dxbl-accent-color-150: var(--lx-accent-subtle); /* #1B2040 — selección */ --dxbl-accent-color-160: #131731; --dxbl-accent-color-170: #0B0E20; } /* =========================================================================== 1. ESCALA NEUTRAL — CLARO --------------------------------------------------------------------------- Pasos que consume modes/light.min.css (25.2.4): 10 surface-default-rest → --lx-surface 20 surface-default-hovered, surface-subdued-rest → --lx-surface-2 30 surface-default-selected 40 border-default-disabled 50 border-default-rest → --lx-border 60 border-default-hovered 90 content-default-disabled 140 border-accessible-rest (borde de inputs) 200 content-subdued-rest → --lx-text-2 250 content-default-rest → --lx-text El resto se interpola para que hovered/pressed sigan siendo coherentes. =========================================================================== */ :root:has(link[href*="modes/light.min.css"]) { --dxds-neutral-10: var(--lx-surface); /* #FFFFFF */ --dxds-neutral-20: var(--lx-surface-2); /* #F4F4F6 */ --dxds-neutral-30: #EDEDF1; --dxds-neutral-40: #E9E9EE; --dxds-neutral-50: var(--lx-border); /* #E4E4E9 */ --dxds-neutral-60: #D9D9E0; --dxds-neutral-70: #CFCFD8; --dxds-neutral-80: var(--lx-border-strong); /* #C9C9D2 */ --dxds-neutral-90: #BDBDC8; --dxds-neutral-100: #B0B0BD; --dxds-neutral-110: #A3A3B2; --dxds-neutral-120: #9696A6; --dxds-neutral-130: #88889A; --dxds-neutral-140: #7A7A8E; /* borde de input: 4,3 sobre blanco */ --dxds-neutral-150: #707084; --dxds-neutral-160: #6B6B7E; /* = --lx-text-3 */ --dxds-neutral-170: #626273; --dxds-neutral-180: #545462; --dxds-neutral-190: #4B4B58; --dxds-neutral-200: var(--lx-text-2); /* #5C5C6B */ --dxds-neutral-210: #3A3A45; --dxds-neutral-220: #31313B; --dxds-neutral-230: #292932; --dxds-neutral-240: #212129; --dxds-neutral-250: var(--lx-text); /* #1A1A21 */ } /* =========================================================================== 2. ESCALA NEUTRAL — OSCURO --------------------------------------------------------------------------- ⚠️ NO es el bloque de HUB invertido. 25.2 lee en oscuro: 230 surface-default-rest → --lx-surface 240 surface-subdued-rest → --lx-surface-2 200 surface-default-HOVERED → --lx-surface-2 (hover de fila, §4.1) 210 surface-subdued-hovered 220 surface-default-selected 250 surface-*-disabled → --lx-bg 10 content-default-rest → --lx-text 30 content-subdued-hovered 60 content-SUBDUED-rest → --lx-text-2 (HUB 26.1 lo tenía en 200) 90 border-default-hovered, border-accessible-rest → --lx-text-3 140 border-default-rest Y content-default-disabled → --lx-border 180 border-default-disabled Si el 200 quedara como un gris claro (así estaba en HUB), el hover de fila de cada grilla oscura se encendería en gris claro. =========================================================================== */ :root:has(link[href*="modes/dark.min.css"]) { --dxds-neutral-10: var(--lx-text); /* #E6EDF3 */ --dxds-neutral-20: #DDE3EA; --dxds-neutral-30: #D2D9E1; --dxds-neutral-40: #C4CCD6; --dxds-neutral-50: #B8C2CD; --dxds-neutral-60: var(--lx-text-2); /* #ADBAC7 */ --dxds-neutral-70: #A0ABB8; --dxds-neutral-80: #95A0AC; --dxds-neutral-90: var(--lx-text-3); /* #8B949E */ --dxds-neutral-100: #7A838E; --dxds-neutral-110: #69727D; --dxds-neutral-120: #59616B; --dxds-neutral-130: #484F59; --dxds-neutral-140: var(--lx-border); /* #30363D */ --dxds-neutral-150: var(--lx-border-strong); /* #444C56 */ --dxds-neutral-160: #3D444E; --dxds-neutral-170: #363D46; --dxds-neutral-180: #2D333B; --dxds-neutral-190: #262C34; --dxds-neutral-200: var(--lx-surface-2); /* #1C2129 — hover */ --dxds-neutral-210: #21262E; --dxds-neutral-220: #252B34; --dxds-neutral-230: var(--lx-surface); /* #161B22 */ --dxds-neutral-240: var(--lx-surface-2); /* #1C2129 */ --dxds-neutral-250: var(--lx-bg); /* #0D1117 */ } /* =========================================================================== 2b. TEXTO DESHABILITADO = DATO DE SOLO LECTURA (ambos modos) --------------------------------------------------------------------------- ⚠️ TRAMPA 25.2: content-neutral-default-disabled sale del paso 90 en claro (#BDBDC8, 1,9:1) y del 140 en oscuro, que es EL MISMO paso que el borde (#30363D, 1,4:1: prácticamente invisible). XAF dibuja los campos que no se pueden editar como editores deshabilitados, y en Lexta eso es la mayor parte del DetailView de un documento (el snapshot fiscal es inmutable). No se puede resolver moviendo el paso sin mover el borde, así que se redefine el SEMÁNTICO (API pública --dxds-*) a --lx-text-3: 4,74 / 5,26 sobre el peor fondo. Sigue leyéndose "apagado" frente a --lx-text, pero se lee. */ :root:has(link[href*="modes/"]) { --dxds-color-content-neutral-default-disabled: var(--lx-text-3); } /* =========================================================================== 3. COPIA LEGACY --DS-* (25.2) Y TIPOGRAFÍA / RADIOS (cualquier modo) --------------------------------------------------------------------------- --DS-neutral-* la usan los ~30 --DS-color-* que el core todavía consume (sombras, marcos de foco). Se apunta a la escala nuestra. Familias: los nombres reales son --dxds-font-family-sans-serif y -mono (no "-monospace"). Radios: escala numérica en rem (40 = 4px, 60 = 6px); en 25.2 existen 0,10,20,30,40,50,60,80,120,160,full — NO hay 100. Los pasos grandes se achatan a 6px (DESIGN.md §2: nada > 6px). */ :root:has(link[href*="modes/"]) { --DS-neutral-10: var(--dxds-neutral-10); --DS-neutral-20: var(--dxds-neutral-20); --DS-neutral-30: var(--dxds-neutral-30); --DS-neutral-40: var(--dxds-neutral-40); --DS-neutral-50: var(--dxds-neutral-50); --DS-neutral-60: var(--dxds-neutral-60); --DS-neutral-70: var(--dxds-neutral-70); --DS-neutral-80: var(--dxds-neutral-80); --DS-neutral-90: var(--dxds-neutral-90); --DS-neutral-100: var(--dxds-neutral-100); --DS-neutral-110: var(--dxds-neutral-110); --DS-neutral-120: var(--dxds-neutral-120); --DS-neutral-130: var(--dxds-neutral-130); --DS-neutral-140: var(--dxds-neutral-140); --DS-neutral-150: var(--dxds-neutral-150); --DS-neutral-160: var(--dxds-neutral-160); --DS-neutral-170: var(--dxds-neutral-170); --DS-neutral-180: var(--dxds-neutral-180); --DS-neutral-190: var(--dxds-neutral-190); --DS-neutral-200: var(--dxds-neutral-200); --DS-neutral-210: var(--dxds-neutral-210); --DS-neutral-220: var(--dxds-neutral-220); --DS-neutral-230: var(--dxds-neutral-230); --DS-neutral-240: var(--dxds-neutral-240); --DS-neutral-250: var(--dxds-neutral-250); --dxds-font-family-sans-serif: var(--lx-font); --dxds-font-family-mono: var(--lx-font-mono); --DS-font-family-sans-serif: var(--lx-font); --DS-font-family-mono: var(--lx-font-mono); --dxds-border-radius-40: var(--lx-radius-sm); /* 4px — inputs, badges, botones */ --dxds-border-radius-50: var(--lx-radius-sm); --dxds-border-radius-60: var(--lx-radius-md); /* 6px — cards, paneles */ --dxds-border-radius-80: var(--lx-radius-md); /* 8px → 6 */ --dxds-border-radius-120: var(--lx-radius-md); /* 12px → 6 */ --dxds-border-radius-160: var(--lx-radius-md); /* 16px → 6 */ } /* =========================================================================== 4. GRILLAS (DESIGN.md §4.1 y §7) --------------------------------------------------------------------------- Las --dxbl-grid-* se declaran en .dxbl-grid (0,1,0); repetimos el selector (en :root serían inertes) y este archivo va después del core, así que gana. ⚠️ 25.2 NO tiene --dxbl-grid-h-line-color / -v-line-color (sí en 26.1): todas las celdas heredan UN solo --dxbl-grid-border-color de la tabla. Sacar las líneas verticales no se puede por variable: queda para la fase 2. ⚠️ 25.2 pinta la FILA ENFOCADA (la que XAF deja al navegar con teclado o al volver de un detail) con surface-primary-default-rest = relleno de acento pleno con texto blanco. Se baja a --lx-accent-subtle, como la selección: DESIGN.md §4.1 no admite una fila entera pintada de acento. */ .dxbl-grid { --dxbl-grid-bg: var(--lx-surface); --dxbl-grid-color: var(--lx-text); --dxbl-grid-font-family: var(--lx-font); --dxbl-grid-border-color: var(--lx-border); --dxbl-grid-header-bg: var(--lx-surface-2); --dxbl-grid-header-color: var(--lx-text-2); --dxbl-grid-header-font-weight: 500; --dxbl-grid-hover-bg: var(--lx-surface-2); --dxbl-grid-hover-color: var(--lx-text); --dxbl-grid-selection-bg: var(--lx-accent-subtle); --dxbl-grid-selection-color: var(--lx-text); --dxbl-grid-selected-hover-bg: var(--lx-accent-subtle); --dxbl-grid-focus-bg: var(--lx-accent-subtle); --dxbl-grid-focus-color: var(--lx-text); --dxbl-grid-selection-focus-dark-bg: var(--lx-accent-subtle); --dxbl-grid-selection-focus-dark-color: var(--lx-text); --dxbl-grid-selection-focus-dark-hover-bg: var(--lx-accent-subtle); --dxbl-grid-focus-frame-color: var(--lx-accent); /* foco de teclado, §8 */ } /* Peek de la bandeja (fase 3). La bandeja corre con FocusedRowEnabled: la fila enfocada ES el documento del peek (hairline + accent-subtle). Pero el DxGrid enfoca la PRIMERA fila al cargar datos, y sin peek eso se leía como "hay algo seleccionado". Con el peek cerrado, la fila enfocada de la bandeja se ve como cualquier otra; el foco de teclado lo sigue marcando el anillo de DX (--dxbl-grid-focus-frame-color). :has() porque el panel no es hijo del grid. */ html:not(:has(.lx-peek--abierto)) .dxbl-grid.lx-bandeja { --dxbl-grid-focus-bg: var(--lx-surface); --dxbl-grid-focus-color: var(--lx-text); } /* Checkbox de selección en la FILA ENFOCADA (fase 3; defecto latente desde la fase 2, que solo se veía al volver de un detail). DX le pone al borde content-neutral-default-static-dark (= neutral-10, CLARO en los dos modos: trampa 3), pensado para su fila enfocada de acento pleno. Nosotros la bajamos a accent-subtle / surface, y el borde quedaba invisible (1,0:1). Se reasigna SOLO dentro de la fila enfocada: en el resto del grid esa variable es el texto del pager activo y el tilde del check marcado, que sí van sobre relleno de acento. Excepción acotada: el selector nombra .dxbl-grid-focused-row (como las reglas de la tabla en lexta-components.css), pero lo que se toca es solo la variable. */ html .dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row { --dxds-color-content-neutral-default-static-dark-rest: var(--lx-text-2); --dxds-color-content-neutral-default-static-dark-hovered: var(--lx-text); } /* Divisor de la vista de revisión (fase 4, DESIGN.md §4.3.1). DxSplitter 25.2 declara sus variables en .dxbl-splitter (verificado en core.min.css 25.2.4): se reasignan en el mismo nodo con (0,2,0) para ganarle. Calma (§1.5): el separador es un hairline ancho de surface-2, no una barra gris; hover y foco lo marcan en acento (el relleno primary de DX en foco es el paso 90, oscuro en los dos modos: el asa en neutral-10 se lee, trampa 3). Paneles sin padding: el padding lo pone cada panel propio. Tamaños -s y -m (size switcher, lección HUB). */ .dxbl-splitter.lx-rev__split { --dxbl-splitter-bg: var(--lx-surface); --dxbl-splitter-color: var(--lx-text); --dxbl-splitter-separator-bg: var(--lx-surface-2); --dxbl-splitter-separator-hover-bg: var(--lx-border); --dxbl-splitter-resize-handle-color: var(--lx-text-3); --dxbl-splitter-resize-handle-hover-color: var(--lx-accent); --dxbl-splitter-button-color: var(--lx-text-2); --dxbl-splitter-button-hover-color: var(--lx-accent); /* Foco de teclado y arrastre: DX pinta el separador entero con el relleno primary (8px de acento a todo el alto). Se baja a accent-subtle y el que marca es el asa, en acento (no-texto: 6,37 / 6,85 sobre surface; 5,52 / 6,26 sobre accent-subtle). */ --dxbl-splitter-separator-focused-bg: var(--lx-accent-subtle); --dxbl-splitter-separator-active-bg: var(--lx-accent-subtle); --dxbl-splitter-resize-handle-focused-color: var(--lx-accent); --dxbl-splitter-resize-handle-active-color: var(--lx-accent); --dxbl-splitter-button-focused-color: var(--lx-accent); --dxbl-splitter-button-active-color: var(--lx-accent); --dxbl-splitter-pane-padding-x-s: 0; --dxbl-splitter-pane-padding-x-m: 0; --dxbl-splitter-pane-padding-x-l: 0; --dxbl-splitter-pane-padding-y-s: 0; --dxbl-splitter-pane-padding-y-m: 0; --dxbl-splitter-pane-padding-y-l: 0; --dxbl-splitter-font-family-s: var(--lx-font); --dxbl-splitter-font-family-m: var(--lx-font); } /* =========================================================================== 5. FORMULARIOS DE XAF RECOMPUESTOS (fase 5, DESIGN.md §6.2–6.5) --------------------------------------------------------------------------- Proveedor, Configuración, Tenant y Dominio son DetailViews de XAF con PropertyEditors reales (decisión de Aldo). VistasLexta pone lx-form-seccion / lx-form-subseccion / lx-form-par en el por CustomCSSClassName. Las --dxbl-fl-* se declaran en el nodo .dxbl-fl (raíz del form layout) y se heredan; redeclararlas en NUESTRO grupo (más adentro) gana sin tocar clases de DX, y sin depender del sufijo de tamaño (-s/-m): el sufijo solo importa en la raíz, donde DX elige cuál copiar a la variable sin sufijo. Resultado: sin caja (fondo y borde fuera), encabezado --lx-text-lg 600 en la sección y --lx-text-sm en la sub-sección, labels arriba en --lx-text-2 500. */ .lx-form-seccion, .lx-form-subseccion, .lx-form-par { --dxbl-fl-group-bg: transparent; --dxbl-fl-group-border-width: 0; --dxbl-fl-group-header-bg: transparent; --dxbl-fl-group-header-color: var(--lx-text); --dxbl-fl-group-header-padding-x: 0; --dxbl-fl-group-content-padding-x: var(--lx-sp-2); --dxbl-fl-group-content-padding-y: 0; --dxbl-fl-caption-color: var(--lx-text-2); --dxbl-fl-caption-font-size: var(--lx-text-sm); --dxbl-fl-caption-font-weight: 500; } .lx-form-seccion { --dxbl-fl-group-header-font-size: var(--lx-text-lg); --dxbl-fl-group-header-font-weight: 600; } .lx-form-subseccion { --dxbl-fl-group-header-font-size: var(--lx-text-sm); --dxbl-fl-group-header-font-weight: 600; --dxbl-fl-group-header-color: var(--lx-text-2); } /* Identificadores en un editor de XAF (dominio, slug, connection string): Plex Mono. La familia se decide en el nodo .dxbl-text-edit (sin sufijo = copia del -s/-m/-l según el tamaño), así que se reasignan los tres sufijos EN ese nodo, dentro de nuestra clase. */ .lx-editor-mono .dxbl-text-edit { --dxbl-text-edit-font-family-s: var(--lx-font-mono); --dxbl-text-edit-font-family-m: var(--lx-font-mono); --dxbl-text-edit-font-family-l: var(--lx-font-mono); } /* =========================================================================== 6. TOASTS DE XAF (ShowViewStrategy.ShowMessage) — fase 5, decisión de Aldo: superficie + línea semántica --------------------------------------------------------------------------- ⚠️ TRAMPA 25.2: el toast de XAF NO es un DxToast (las --dxbl-toast-* no le llegan). Es un div.alert.alert-success.xaf-alert.text-white del template de XAF, y su styles.css lo pinta con VARIABLES DE DX: fondo = --dxds-color-content-{success|danger|warning|info}-default-rest (el color de TEXTO semántico usado como relleno: el verde de DX) texto = --dxds-primary-10 (vía body:not(.dx-external-theme) .text-white) Se reasignan esas variables SOLO dentro del toast (declaradas en el propio .xaf-alert, así no tocan el resto del portal): fondo --lx-surface, texto --lx-text. La línea del color de estado y la sombra de overlay van en lexta-components.css (fase 5, toasts). */ html .xaf-alert { --dxds-primary-10: var(--lx-text); --dxds-color-content-success-default-rest: var(--lx-surface); --dxds-color-content-danger-default-rest: var(--lx-surface); --dxds-color-content-warning-default-rest: var(--lx-surface); --dxds-color-content-info-default-rest: var(--lx-surface); }