/* ============================================================ Nexus Design System - Layer 3: DevExpress bridge Maps Nexus tokens onto PUBLIC DevExpress variables so the Fluent theme renders Nexus without per-component patching. Load AFTER nexus-tokens.css, BEFORE nexus-components.css. RULE: nothing in this file may reference an internal .dxbl-* class. Variables only. TARGET: DevExpress 26.1.3 (DevExpress.Blazor.Themes.Fluent). Verified against the installed package: _content/DevExpress.Blazor.Themes.Fluent/core.min.css _content/DevExpress.Blazor.Themes.Fluent/global.min.css _content/DevExpress.Blazor.Themes.Fluent/modes/{light,dark}.min.css _content/DevExpress.Blazor.Themes.Fluent/accents/*.min.css Full audit, rename table and open items: docs/design/13-tema-blazor.md ------------------------------------------------------------ TOKEN ARCHITECTURE IN 26.1 - three tiers, all public: 1. ramps --dxds-{primary|neutral|success|warning| danger|info|secondary}-10..250 The primary ramp is authored as --dxds-primary-NN: var(--dxbl-accent-color-NN, ) so --dxbl-accent-color-NN is the documented recolour hook. Declared at :root only. 2. semantics --dxds-color-{surface|content|border}-- -, resolved from the ramps by modes/light.min.css and modes/dark.min.css. Declared at :root only. 3. components --dxbl--*, resolved from tier 2. Declared ON THE COMPONENT CLASS (.dxbl-btn, .dxbl-grid, .dxbl-text-edit, .dxbl-tabs, ...). REACHABILITY RULE (measured, not assumed): a tier-3 variable declared on .dxbl- CANNOT be overridden from :root - a declaration on the element always beats an inherited value. Of the 100 tier-3 names the original handoff mapped, every one is component-scoped, so the whole tier-3 block was inert. The good news: nearly every tier-3 declaration reads a tier-2 token, so mapping tier 1 + 2 propagates through. Anything that does NOT propagate is listed at the bottom of this file and belongs to layer 4 (nexus-components.css, via a wrapper class applied with XAF CustomCSSClassName) or layer 6 (the single audited .dxbl-* file), never here. ------------------------------------------------------------ Every mapping points at a --nexus-* token, and those re-derive under [data-nexus-theme="dark"], so one block serves both modes. ============================================================ */ :root { /* ========================================================== TIER 1 - primary ramp (--dxbl-accent-color-10..170) DevExpress anchors the brand at step 90; 110/130 are the hover/active surfaces, 30/40 the subdued tints, 10/20 the "deep" tints. Steps between anchors are derived with color-mix() against --nexus-surface so the ramp re-derives itself in dark mode instead of being inverted. ========================================================== */ --dxbl-accent-color-10: color-mix(in srgb, var(--nexus-primary) 6%, var(--nexus-surface)); --dxbl-accent-color-20: color-mix(in srgb, var(--nexus-primary) 12%, var(--nexus-surface)); --dxbl-accent-color-30: color-mix(in srgb, var(--nexus-primary) 20%, var(--nexus-surface)); --dxbl-accent-color-40: color-mix(in srgb, var(--nexus-primary) 30%, var(--nexus-surface)); --dxbl-accent-color-50: color-mix(in srgb, var(--nexus-primary) 42%, var(--nexus-surface)); --dxbl-accent-color-60: color-mix(in srgb, var(--nexus-primary) 55%, var(--nexus-surface)); --dxbl-accent-color-70: color-mix(in srgb, var(--nexus-primary) 70%, var(--nexus-surface)); --dxbl-accent-color-80: color-mix(in srgb, var(--nexus-primary) 85%, var(--nexus-surface)); --dxbl-accent-color-90: var(--nexus-primary); /* brand anchor */ --dxbl-accent-color-100: color-mix(in srgb, var(--nexus-primary) 50%, var(--nexus-primary-hover)); --dxbl-accent-color-110: var(--nexus-primary-hover); --dxbl-accent-color-120: color-mix(in srgb, var(--nexus-primary-hover) 50%, var(--nexus-primary-active)); --dxbl-accent-color-130: var(--nexus-primary-active); --dxbl-accent-color-140: color-mix(in srgb, var(--nexus-primary-active) 80%, #000); --dxbl-accent-color-150: color-mix(in srgb, var(--nexus-primary-active) 60%, #000); --dxbl-accent-color-160: color-mix(in srgb, var(--nexus-primary-active) 40%, #000); --dxbl-accent-color-170: color-mix(in srgb, var(--nexus-primary-active) 25%, #000); /* ========================================================== TIER 2 - semantic colour tokens Only the mode-dependent families are remapped. The -inverted-, -static-light-, -static-dark- and -on-surface- families are deliberately mode-independent in Fluent (tooltips, overlays, compound content) and stay stock. Lines marked "inert" name a token the theme declares but no 26.1.3 component reads yet; kept for completeness. ========================================================== */ /* ---- surfaces ------------------------------------------- */ --dxds-color-surface-neutral-default-rest: var(--nexus-surface); --dxds-color-surface-neutral-default-hovered: var(--nexus-hover-surface); --dxds-color-surface-neutral-default-active: var(--nexus-active-surface); --dxds-color-surface-neutral-default-selected: var(--nexus-selected-surface); --dxds-color-surface-neutral-default-selected-hovered: var(--nexus-active-surface); --dxds-color-surface-neutral-default-disabled: var(--nexus-disabled-bg); --dxds-color-surface-neutral-subdued-rest: var(--nexus-surface-alt); --dxds-color-surface-neutral-subdued-hovered: var(--nexus-hover-surface); --dxds-color-surface-neutral-subdued-active: var(--nexus-active-surface); --dxds-color-surface-neutral-subdued-disabled: var(--nexus-disabled-bg); --dxds-color-surface-neutral-deep-rest: var(--nexus-surface-alt); --dxds-color-surface-neutral-deep-hovered: var(--nexus-hover-surface); --dxds-color-surface-neutral-deep-active: var(--nexus-active-surface); /* inert 26.1.3 */ --dxds-color-surface-neutral-deep-disabled: var(--nexus-disabled-bg); /* inert 26.1.3 */ /* La famiglia "alpha" e' l'overlay traslucido che DevExpress usa per hover/selected dei controlli di navigazione (DxTreeView, DxAccordion, DxMenu). Di serie e' una velatura di --dxds-neutral-250 (nero Fluent), che su bianco da' un grigio neutro: Nexus vuole il tinto blu, quindi qui diventano superfici opache. */ --dxds-color-surface-neutral-alpha-rest: transparent; --dxds-color-surface-neutral-alpha-hovered: var(--nexus-hover-surface); --dxds-color-surface-neutral-alpha-selected: var(--nexus-selected-surface); --dxds-color-surface-neutral-alpha-active: var(--nexus-active-surface); --dxds-color-surface-neutral-alpha-disabled: var(--nexus-disabled-bg); --dxds-color-surface-secondary-default-rest: var(--nexus-surface-alt); /* inert 26.1.3 */ /* primary-deep drives the selected grid row and the selected nav item, so it must be the subtle tint, not the fill. */ --dxds-color-surface-primary-default-rest: var(--nexus-primary); --dxds-color-surface-primary-default-hovered: var(--nexus-primary-hover); --dxds-color-surface-primary-default-active: var(--nexus-primary-active); --dxds-color-surface-primary-default-selected: var(--nexus-primary-active); --dxds-color-surface-primary-subdued-rest: var(--nexus-primary-subtle); --dxds-color-surface-primary-deep-rest: var(--nexus-selected-surface); --dxds-color-surface-primary-deep-hovered: var(--nexus-active-surface); --dxds-color-surface-primary-deep-selected: var(--nexus-selected-surface); --dxds-color-surface-success-default-rest: var(--nexus-success); --dxds-color-surface-warning-default-rest: var(--nexus-warning); --dxds-color-surface-danger-default-rest: var(--nexus-error); --dxds-color-surface-info-default-rest: var(--nexus-info); --dxds-color-surface-success-subdued-rest: var(--nexus-success-subtle); --dxds-color-surface-warning-subdued-rest: var(--nexus-warning-subtle); --dxds-color-surface-danger-subdued-rest: var(--nexus-error-subtle); /* inert 26.1.3 */ --dxds-color-surface-info-subdued-rest: var(--nexus-info-subtle); /* ---- content (text / icons) ----------------------------- */ --dxds-color-content-neutral-default-rest: var(--nexus-text-primary); --dxds-color-content-neutral-default-hovered: var(--nexus-text-primary); --dxds-color-content-neutral-default-active: var(--nexus-text-primary); --dxds-color-content-neutral-default-selected: var(--nexus-text-primary); --dxds-color-content-neutral-default-selected-hovered: var(--nexus-text-primary); --dxds-color-content-neutral-default-disabled: var(--nexus-disabled-fg); --dxds-color-content-neutral-subdued-rest: var(--nexus-text-secondary); --dxds-color-content-neutral-subdued-hovered: var(--nexus-text-primary); --dxds-color-content-neutral-subdued-active: var(--nexus-text-primary); --dxds-color-content-neutral-subdued-selected: var(--nexus-text-primary); --dxds-color-content-neutral-subdued-selected-hovered: var(--nexus-text-primary); /* inert 26.1.3 */ --dxds-color-content-neutral-subdued-disabled: var(--nexus-disabled-fg); /* content-neutral-deep-rest is the editor placeholder colour. */ --dxds-color-content-neutral-deep-rest: var(--nexus-text-muted); --dxds-color-content-neutral-deep-hovered: var(--nexus-text-primary); /* inert 26.1.3 */ --dxds-color-content-neutral-deep-active: var(--nexus-text-primary); /* inert 26.1.3 */ --dxds-color-content-neutral-deep-selected: var(--nexus-text-primary); /* inert 26.1.3 */ --dxds-color-content-neutral-deep-disabled: var(--nexus-disabled-fg); /* inert 26.1.3 */ --dxds-color-content-secondary-default-rest: var(--nexus-text-secondary); /* OPEN POINT: content-primary also colours (global.min.css) and the active tab underline. The Nexus table gives primary = navy and "interactive" = #2F6BFF for focus/links, without saying which owns hyperlink colour. Kept on --nexus-primary, faithful to the token table. See doc 13. */ --dxds-color-content-primary-default-rest: var(--nexus-primary); --dxds-color-content-primary-default-hovered: var(--nexus-primary-hover); --dxds-color-content-primary-default-active: var(--nexus-primary-active); --dxds-color-content-success-default-rest: var(--nexus-success-text); --dxds-color-content-warning-default-rest: var(--nexus-warning-text); --dxds-color-content-danger-default-rest: var(--nexus-error-text); --dxds-color-content-info-default-rest: var(--nexus-info-text); /* ---- borders -------------------------------------------- */ --dxds-color-border-neutral-default-rest: var(--nexus-border); --dxds-color-border-neutral-default-hovered: var(--nexus-slate-400); --dxds-color-border-neutral-default-active: var(--nexus-slate-400); --dxds-color-border-neutral-default-disabled: var(--nexus-border-subtle); --dxds-color-border-neutral-subdued-rest: var(--nexus-border-subtle); --dxds-color-border-neutral-deep-rest: var(--nexus-border-subtle); /* inert 26.1.3 */ --dxds-color-border-neutral-accessible-rest: var(--nexus-text-muted); --dxds-color-border-neutral-accessible-hovered: var(--nexus-text-secondary); --dxds-color-border-neutral-accessible-active: var(--nexus-text-primary); /* inert 26.1.3 */ --dxds-color-border-neutral-accessible-disabled: var(--nexus-disabled-fg); --dxds-color-border-primary-default-rest: var(--nexus-primary); --dxds-color-border-primary-default-hovered: var(--nexus-primary-hover); /* inert 26.1.3 */ --dxds-color-border-success-default-rest: var(--nexus-success); /* inert 26.1.3 */ --dxds-color-border-warning-default-rest: var(--nexus-warning); /* inert 26.1.3 */ --dxds-color-border-danger-default-rest: var(--nexus-error); /* inert 26.1.3 */ --dxds-color-border-info-default-rest: var(--nexus-info); /* inert 26.1.3 */ /* Focus is never removed. Fluent draws a 1px outline in this colour; the 3px Nexus ring is a layer-4/6 addition. */ --dxds-color-border-focus-default: var(--nexus-focus-border); /* ========================================================== TIER 2 - shape, elevation, typography ========================================================== */ /* radius-40 (4px stock) is the shared control radius: buttons, editors, grid, edit-dropdown all read it. Nexus md = 5px. radius-80 (8px) already equals Nexus lg; pinned for clarity. NOTE: the handoff is internally inconsistent here - the radius scale says inputs = sm 3px, section 8 (property editors) says 5px. Following section 8. See doc 13. */ --dxds-border-radius-40: var(--nexus-radius-md); --dxds-border-radius-80: var(--nexus-radius-lg); /* box-shadow-2xl is what popups, dropdowns and edit-dropdowns actually read; the smaller steps are used by cards/toasts. */ --dxds-box-shadow-xs: var(--nexus-shadow-sm); /* inert 26.1.3 */ --dxds-box-shadow-sm: var(--nexus-shadow-sm); --dxds-box-shadow-md: var(--nexus-shadow-md); --dxds-box-shadow-lg: var(--nexus-shadow-lg); --dxds-box-shadow-xl: var(--nexus-shadow-lg); /* inert 26.1.3 */ --dxds-box-shadow-2xl: var(--nexus-shadow-lg); --dxds-font-family-sans-serif: var(--nexus-font-family); --dxds-font-family-mono: var(--nexus-font-mono); /* inert 26.1.3 */ } /* ============================================================ NOT REACHABLE FROM HERE - deliberately not mapped. These Nexus rules cannot be expressed as a root variable in 26.1.3. They are recorded so nobody re-adds an inert mapping; each one carries its destination layer. -> layer 4 (nexus-components.css + CustomCSSClassName) .dxbl-grid declares --dxbl-grid-header-bg and --dxbl-grid-footer-bg as surface-transparent-rest, so the tinted 38px header row and the total row must be set on a .nexus-grid wrapper class, not at :root. Same for --dxbl-grid-border-radius / -v-line-color / -h-line-color (the "no vertical cell borders" rule); DxGrid also exposes ShowVerticalLines as a component parameter, which is the preferred route. -> layer 5/6 (component parameter, else the audited file) * Control and grid row heights are NOT variables: Fluent declares --dxbl-grid-text-height, -text-cell-padding-y and the button/editor metrics per SizeMode (Large/Medium/ Small). Density must bind to SizeMode at the layout root (Large = Comfortable 40/34px, Small = Compact 32/28px), exactly as the handoff prescribes. * .dxbl-text-edit paints an extra bottom "underline" (--dxbl-text-edit-underline-color, from content-neutral-subdued-rest, and -underline-focused-color from the accent). Nexus section 8 wants a uniform 1px border with state carried by border + ring only, so the underline has to be neutralised in the audited file. * The active tab rail is --dxbl-tabs-tab-border-thickness, declared on .dxbl-tabs from --dxds-spacing-30 (3px). Nexus wants the 2px signature rail; --dxds-spacing-30 is shared with unrelated 3px spacings, so it must not be overridden globally. * Popups read --dxbl-popups-bg from surface-neutral-default, i.e. --nexus-surface. Nexus asks for --nexus-surface- elevated; identical in light, differs in dark. -> dark mode All mappings above resolve through --nexus-* tokens, which already re-derive under [data-nexus-theme="dark"], so no dark block is needed here. DevExpress switches separately: XAF picks modes/light.min.css or modes/dark.min.css from DevExpress:ExpressApp:ThemeSwitcher in appsettings.json. The app currently ships DARK as its default, set in two places that must stay in step: appsettings.json -> "DefaultMode": "Dark" (--dxds-*) _Host.cshtml -> data-nexus-theme="dark" (--nexus-*) A runtime switcher has to move both together - see docs/design/13-tema-blazor.md par. 10. ============================================================ */