/* ========================================================================== * DevExpress Blazor auf Talentum-Tokens ziehen. * -------------------------------------------------------------------------- * DxGrid, DxComboBox, DxDateEdit und DxHtmlEditor bleiben DevExpress- * Komponenten — nachgebaut wird davon nichts. Damit sie neben den * tl-*-Komponenten nicht wie ein Fremdkörper wirken, werden hier die * Design-Variablen des Themes `fluent-light.bs5` auf die Talentum-Tokens * umgebogen. * * WIE DAS THEME AUFGEBAUT IST * Das Theme rechnet in zwei Schichten: * 1. Primitive Farbleitern --DS--10 … -170 (hell -> dunkel) * 2. Semantische Rollen --DS-color-surface-…, --DS-color-content-…, * --DS-color-border-… (verweisen auf 1.) * Überschrieben wird ausschließlich Schicht 1 plus einige globale * Größen (Schrift, Radien). Damit greifen die Tokens überall, ohne dass * wir hunderte Rollen-Variablen einzeln nachziehen müssten — und ohne * dass ein DevExpress-Update unsere Overrides zerschießt. * * WARUM KEIN DARK-THEME-ZWEIG NÖTIG IST * Die Talentum-Tokens (--surface-100, --ink-900, …) kippen selbst, * sobald :root[data-theme="dark"] oder die Systemeinstellung greift. * Diese Datei verweist nur auf sie, also kippt das DevExpress-Theme * automatisch mit. Der Block ganz unten ergänzt lediglich das, was das * Hell-Theme fest verdrahtet hat und deshalb nicht mitkippt. * * GEMAPPT: Akzentfarbe (Buttons, Auswahl, Fokus), Flächen, Ränder, * Textstufen, Status-/Meldefarben, Eckenradien, Schriftfamilie. * BLEIBT DEVEXPRESS: Innenabstände und Zeilenhöhen der Grids, Sortier- * und Filter-Symbolik, Animationen, Scrollbar-Logik, * Editor-Toolbar des DxHtmlEditor. Das ist Absicht — die * Interaktionsmuster sollen DevExpress-Standard bleiben. * ========================================================================== */ :root { /* --- Schrift ---------------------------------------------------------- */ --DS-sans-serif: var(--font-sans); /* --- Akzentleiter ----------------------------------------------------- * `--dxbl-accent-color-*` ist der vom Theme vorgesehene Einstiegspunkt: * die --DS-primary-Leiter liest jeden Wert als * `var(--dxbl-accent-color-NN, )`. */ --dxbl-accent-color: var(--accent-500); --dxbl-accent-color-10: var(--accent-100); --dxbl-accent-color-20: var(--accent-100); --dxbl-accent-color-30: var(--accent-100); --dxbl-accent-color-40: var(--accent-100); --dxbl-accent-color-50: var(--accent-100); --dxbl-accent-color-60: var(--accent-500); --dxbl-accent-color-70: var(--accent-500); --dxbl-accent-color-80: var(--accent-500); --dxbl-accent-color-90: var(--accent-500); --dxbl-accent-color-100: var(--accent-500); --dxbl-accent-color-110: var(--accent-600); --dxbl-accent-color-120: var(--accent-600); --dxbl-accent-color-130: var(--accent-600); --dxbl-accent-color-140: var(--accent-600); --dxbl-accent-color-150: var(--accent-600); --dxbl-accent-color-160: var(--accent-text); --dxbl-accent-color-170: var(--accent-text); /* --- Neutrale Leiter: Flächen, Ränder, Text --------------------------- * 10–40 sind Flächen, 50–90 Ränder, 100–170 Text. Die Zuordnung folgt * der Talentum-Regel „border-100 trennt Inhalt, border-200 umrandet * Bedienelemente". */ --DS-neutral-10: var(--surface-100); --DS-neutral-20: var(--surface-200); --DS-neutral-30: var(--surface-200); --DS-neutral-40: var(--surface-300); --DS-neutral-50: var(--border-100); --DS-neutral-60: var(--border-100); --DS-neutral-70: var(--border-200); --DS-neutral-80: var(--border-200); --DS-neutral-90: var(--border-200); --DS-neutral-100: var(--ink-500); --DS-neutral-110: var(--ink-500); --DS-neutral-120: var(--ink-500); --DS-neutral-130: var(--ink-500); --DS-neutral-140: var(--ink-700); --DS-neutral-150: var(--ink-700); --DS-neutral-160: var(--ink-900); --DS-neutral-170: var(--ink-900); /* Sekundär-Leiter des Themes (sekundäre Buttons, Chrome) folgt derselben Zuordnung — sonst stünde ein grauer DevExpress-Button in einer sonst tokenisierten Ansicht. */ --DS-secondary-10: var(--surface-100); --DS-secondary-20: var(--surface-200); --DS-secondary-30: var(--surface-200); --DS-secondary-40: var(--surface-300); --DS-secondary-50: var(--border-100); --DS-secondary-60: var(--border-100); --DS-secondary-70: var(--border-200); --DS-secondary-80: var(--border-200); --DS-secondary-90: var(--border-200); --DS-secondary-100: var(--ink-500); --DS-secondary-110: var(--ink-500); --DS-secondary-120: var(--ink-500); --DS-secondary-130: var(--ink-500); --DS-secondary-140: var(--ink-700); --DS-secondary-150: var(--ink-700); --DS-secondary-160: var(--ink-900); --DS-secondary-170: var(--ink-900); /* --- Meldefarben: auf die Talentum-Statuspaare ------------------------ */ --DS-danger-10: var(--state-rejected-bg); --DS-danger-20: var(--state-rejected-bg); --DS-danger-30: var(--state-rejected-bg); --DS-danger-60: var(--danger-500); --DS-danger-70: var(--danger-500); --DS-danger-80: var(--danger-500); --DS-danger-90: var(--danger-500); --DS-danger-100: var(--danger-500); --DS-danger-110: var(--danger-600); --DS-danger-120: var(--danger-600); --DS-danger-130: var(--danger-600); --DS-success-10: var(--state-offer-bg); --DS-success-20: var(--state-offer-bg); --DS-success-30: var(--state-offer-bg); --DS-success-80: var(--state-offer-ink); --DS-success-90: var(--state-offer-ink); --DS-success-100: var(--state-offer-ink); --DS-success-110: var(--state-offer-ink); --DS-warning-10: var(--state-review-bg); --DS-warning-20: var(--state-review-bg); --DS-warning-30: var(--state-review-bg); --DS-warning-80: var(--state-review-ink); --DS-warning-90: var(--state-review-ink); --DS-warning-100: var(--state-review-ink); --DS-warning-110: var(--state-review-ink); --DS-info-10: var(--state-interview-bg); --DS-info-20: var(--state-interview-bg); --DS-info-30: var(--state-interview-bg); --DS-info-80: var(--state-interview-ink); --DS-info-90: var(--state-interview-ink); --DS-info-100: var(--state-interview-ink); --DS-info-110: var(--state-interview-ink); /* --- Radien ----------------------------------------------------------- * Talentum lässt Radien mit der Fläche wachsen; die DevExpress-Stufen * 20/40 sind Bedienelemente, 60/80 sind Container. */ --DS-border-radius-20: var(--radius-sm); --DS-border-radius-40: var(--radius-md); --DS-border-radius-60: var(--radius-lg); --DS-border-radius-80: var(--radius-lg); --DS-border-radius-120: var(--radius-lg); --DS-border-radius-160: var(--radius-lg); /* --- Fokus ------------------------------------------------------------ * Der sichtbare Fokus ist eine Zusage aus dem Talentum-Barrierefreiheits- * kapitel und muss auch in DevExpress-Komponenten gelten. */ --dxbl-focus-color: var(--focus-ring); } /* Abdunklung hinter modalen Popups — TlDialog (DxPopup) und die Dialoge, die DevExpress selbst öffnet (Link/Bild im DxHtmlEditor). Das Theme nimmt die dunkelste Neutralstufe mit 50 % Deckkraft; über die Leiter oben wäre das --ink-900 und würde im dunklen Theme hell. --scrim trägt die Deckkraft schon selbst. Gleiche Selektorliste wie im Theme, damit die spätere Ladereihenfolge gewinnt. */ .dxbl-modal, .dxbl-window, .dxbl-message-box { --dxbl-popups-backdrop-bg: var(--scrim); --dxbl-popups-backdrop-opacity: 1; } /* Der Rahmen um Grid und Editoren kommt bei DevExpress teils als fester Wert; hier auf die Haarlinie bzw. den Bedienelement-Rand ziehen. */ .dxbl-grid, .dxbl-grid-table, .dxbl-text-edit, .dxbl-combobox, .dxbl-date-edit, .dxbl-html-editor { font-family: var(--font-sans); } /* Tabellenkopf des DxGrid auf die Talentum-Tabellenoptik: gedämpfte Fläche, Label-Typografie. */ .dxbl-grid-header-row > th, .dxbl-grid-header-content { color: var(--ink-700); letter-spacing: 0.01em; } /* Lange Spaltenköpfe („Rechtsgrundlage", „Vormerkungen") trennen nach Silben () und brechen um, statt mit „…" abgeschnitten zu werden — Mindestbreiten je Spalte würden das Gitter zwischen 600 und 960 px über die Seite schieben (Gitter mit Zeilenmenü scrollen dort nicht in sich). */ .dxbl-grid-header-content, .dxbl-grid-header-content > span { hyphens: auto; text-overflow: clip; } /* -------------------------------------------------------------------------- * Dunkles Theme * -------------------------------------------------------------------------- * Das geladene DevExpress-Stylesheet ist das HELLE (`fluent-light.bs5`). * Die Leitern oben kippen über die Tokens automatisch mit; was bleibt, * sind einige fest verdrahtete Weiß-/Schwarzwerte, die das Theme nicht * über eine Leiter bezieht. Die werden hier nachgezogen. * ------------------------------------------------------------------------ */ :root[data-theme="dark"] .dxbl-popup, :root[data-theme="dark"] .dxbl-dropdown, :root[data-theme="dark"] .dxbl-grid, :root[data-theme="dark"] .dxbl-text-edit, :root[data-theme="dark"] .dxbl-html-editor { background-color: var(--surface-100); color: var(--ink-900); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dxbl-popup, :root:not([data-theme="light"]) .dxbl-dropdown, :root:not([data-theme="light"]) .dxbl-grid, :root:not([data-theme="light"]) .dxbl-text-edit, :root:not([data-theme="light"]) .dxbl-html-editor { background-color: var(--surface-100); color: var(--ink-900); } }