: MudBlazor teleports overlays (select dropdowns, dialogs, menus, tooltips) to a popover container at the END of , outside MudMainContent. Tagging means EVERY surface — content AND teleported overlays — inherits the theme. How it works: MudBlazor 9 renders almost everything off CSS custom properties (--mud-palette-*, --mud-default-borderradius, --mud-elevation-*). We simply REDEFINE those variables (plus a few of our own) on `.ui-next`. Custom properties resolve from the nearest ancestor that defines them, so `.ui-next` (on ) overrides MudThemeProvider's :root values for all descendants. A handful of component-level overrides handle the rest. Tuning lives here. /tools/theme-preview is a component gallery for eyeballing changes. If mobile/TV are themed later, fold these values into AppTheme.cs + app.css and drop the body-class mechanism. ============================================================================ */ .ui-next { /* ---- Design tokens ---------------------------------------------------- */ --radius: 8px; --radius-lg: 12px; --radius-sm: 6px; /* Soft, "React" shadow scale (replaces Material elevation). */ --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.08), 0 1px 2px -1px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.10), 0 2px 6px -2px rgba(16, 24, 40, 0.06); --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, 0.18), 0 4px 10px -4px rgba(16, 24, 40, 0.10); /* Accent (kept) + a soft focus-ring colour derived from it. */ --accent: #58a4da; --accent-rgb: 88, 164, 218; --ring: 0 0 0 3px rgba(88, 164, 218, 0.30); /* ---- Redefine MudBlazor palette → neutral zinc base ------------------- */ /* Accent kept; its -rgb companion drives Mud's hover/focus overlays. */ --mud-palette-primary: #58a4da; --mud-palette-primary-rgb: 88, 164, 218; --mud-palette-info: #58a4da; --mud-palette-info-rgb: 88, 164, 218; /* Surfaces + neutrals (zinc). */ --mud-palette-black: #18181b; --mud-palette-background: #fafafa; --mud-palette-background-grey: #fafafa; /* zinc-50 — figure boxes, detail panels, table headers. Kept very light so bold near-black figures don't sit on a heavy grey block; panels lean on a hairline border for edge. */ --mud-palette-surface: #ffffff; --mud-palette-drawer-background: #ffffff; --mud-palette-appbar-background: #ffffff; /* Text (neutral, replaces the dark-green TextPrimary). */ --mud-palette-text-primary: #18181b; /* zinc-900 */ --mud-palette-text-secondary: #71717a; /* zinc-500 */ --mud-palette-text-disabled: #a1a1aa; /* zinc-400 */ /* Lines + dividers (hairline zinc). */ --mud-palette-divider: #e4e4e7; /* zinc-200 */ --mud-palette-divider-light: #f4f4f5; --mud-palette-lines-default: #e4e4e7; --mud-palette-lines-inputs: #d4d4d8; /* zinc-300 — input borders a touch stronger */ --mud-palette-table-lines: #e4e4e7; --mud-palette-table-striped: #fafafa; --mud-palette-table-hover: rgba(0, 0, 0, 0.025); /* Actions. */ --mud-palette-action-default: #71717a; --mud-palette-action-default-hover: rgba(0, 0, 0, 0.04); --mud-palette-action-disabled: rgba(0, 0, 0, 0.26); --mud-palette-action-disabled-background: #f4f4f5; --mud-palette-gray-light: #f4f4f5; --mud-palette-gray-lighter: #fafafa; /* ---- Radius ---------------------------------------------------------- */ --mud-default-borderradius: 8px; /* ---- Soften Material elevations to the shadow scale above ------------- */ /* Most Paper/cards use 0–2; menus/popovers/dialogs use higher steps. */ --mud-elevation-0: none; --mud-elevation-1: var(--shadow-xs); --mud-elevation-2: var(--shadow-sm); --mud-elevation-3: var(--shadow-sm); --mud-elevation-4: var(--shadow-md); --mud-elevation-5: var(--shadow-md); --mud-elevation-6: var(--shadow-md); --mud-elevation-8: var(--shadow-lg); --mud-elevation-9: var(--shadow-lg); --mud-elevation-10: var(--shadow-lg); --mud-elevation-12: var(--shadow-lg); --mud-elevation-16: var(--shadow-lg); --mud-elevation-24: var(--shadow-lg); --mud-elevation-25: var(--shadow-lg); /* ---- Typography ------------------------------------------------------ */ font-family: 'Inter', 'Helvetica', 'Arial', sans-serif; --mud-typography-default-family: 'Inter', 'Helvetica', 'Arial', sans-serif; } /* Inter everywhere inside the scope. MudBlazor sets font-family per-component (from the MudTheme typography = DM Sans), which blocks plain inheritance, so we restate the font on the component classes that carry text. Deliberately NOT a universal selector — that would hit .mud-icon / .material-icons, whose glyphs depend on their own icon font. */ .ui-next, .ui-next .mud-typography, .ui-next .mud-input, .ui-next .mud-input-control, .ui-next .mud-button-root, .ui-next .mud-table, .ui-next .mud-table-cell, .ui-next .mud-chip, .ui-next .mud-nav-link, .ui-next .mud-list-item, .ui-next .mud-tabs, .ui-next .mud-dialog, .ui-next .mud-menu, .ui-next .mud-tooltip, .ui-next .mud-alert, .ui-next input, .ui-next textarea, .ui-next select, .ui-next button { font-family: 'Inter', 'Helvetica', 'Arial', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings: tighter tracking + 600 weight reads more "product UI", less Material. */ .ui-next .mud-typography-h1, .ui-next .mud-typography-h2, .ui-next .mud-typography-h3, .ui-next .mud-typography-h4, .ui-next .mud-typography-h5, .ui-next .mud-typography-h6 { font-weight: 600; letter-spacing: -0.014em; } /* ============================================================================ Component overrides ============================================================================ */ /* ---- Buttons: flat, 8px, medium weight, no Material caps/shadow ---------- */ .ui-next .mud-button-root { text-transform: none; font-weight: 500; letter-spacing: 0; border-radius: var(--radius-sm); /* 6px — buttons read a touch crisper than the 8px card radius */ } .ui-next .mud-button-filled { box-shadow: none; } .ui-next .mud-button-filled:hover { box-shadow: var(--shadow-sm); } .ui-next .mud-button-outlined { border: 1px solid var(--mud-palette-divider); } .ui-next .mud-button-outlined:hover { background-color: var(--mud-palette-action-default-hover); } /* Icon buttons: gentle rounded-square hover target. */ .ui-next .mud-icon-button { border-radius: var(--radius-sm); } /* ---- Paper / cards: flat with hairline border + soft shadow -------------- */ /* The look: cards read as outlined panels, not floating Material surfaces. Applies to any elevation 1+; elevation 0 (KpiCard) gets its border from its own PaperStyle, so leave 0 alone. */ .ui-next .mud-paper:not(.mud-paper-outlined):not([class*="mud-elevation-0"]) { border: 1px solid var(--mud-palette-divider); } .ui-next .mud-paper-outlined { border: 1px solid var(--mud-palette-divider); } /* ---- Inputs: 1px border, 8px, focus RING (not Material underline) -------- */ .ui-next .mud-input.mud-input-outlined .mud-input-outlined-border { border-width: 1px; border-color: var(--mud-palette-lines-inputs); border-radius: var(--radius); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ui-next .mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: #a1a1aa; } /* Focused: keep the border 1px (no Material 2px jump) and add a soft ring. */ .ui-next .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-width: 1px; border-color: var(--accent); box-shadow: var(--ring); } .ui-next .mud-input-control input::placeholder, .ui-next .mud-input-control textarea::placeholder { color: var(--mud-palette-text-disabled); opacity: 1; } /* ---- Selects / autocompletes share the input look (outlined) ------------- */ /* (covered by the rules above via .mud-input-outlined) */ /* ---- Toggle groups (analytics year toggle, filter bar) ------------------- */ .ui-next .mud-toggle-group { border-radius: var(--radius); border-color: var(--mud-palette-divider); } /* ---- Tabs: underline accent, neutral inactive ---------------------------- */ .ui-next .mud-tabs .mud-tab { text-transform: none; font-weight: 500; } /* ---- Dialogs / popovers / menus: rounded, soft shadow, hairline ---------- */ .ui-next .mud-dialog { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--mud-palette-divider); } .ui-next .mud-popover { border-radius: var(--radius); box-shadow: var(--shadow-md); border: 1px solid var(--mud-palette-divider); } .ui-next .mud-list-item { border-radius: var(--radius-sm); } /* ---- Tooltips: dark neutral, small radius -------------------------------- */ .ui-next .mud-tooltip, .mud-tooltip.ui-next-tip { border-radius: var(--radius-sm); } /* ---- Tables / DataGrid: hairline rows, light header, subtle hover -------- */ .ui-next .mud-table-root { border-radius: var(--radius); } .ui-next .mud-table-container .mud-table-head .mud-table-cell { font-weight: 600; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-grey); border-bottom: 1px solid var(--mud-palette-divider); } .ui-next .mud-table-row:hover > .mud-table-cell { background: var(--mud-palette-table-hover); } /* ---- Chips: subtle, rounded ---------------------------------------------- */ .ui-next .mud-chip { border-radius: var(--radius-sm); font-weight: 500; } /* ---- Alerts: flatter, hairline ------------------------------------------- */ .ui-next .mud-alert { border-radius: var(--radius); } /* ---- Switches / checkboxes / radios use the accent automatically --------- */ /* (driven by --mud-palette-primary above) */ /* ---- Nav links: neutral active pill (replaces the blue #EBF4FB tint) ----- */ /* `body.ui-next` (not `.ui-next`) so these beat NavMenu.razor.css's scoped `.nav-wrapper ::deep .mud-nav-link.active` rule on specificity, not just source order. */ body.ui-next .mud-nav-link { border-radius: var(--radius); } body.ui-next .mud-nav-link.active { background-color: var(--mud-palette-background-grey); color: var(--mud-palette-text-primary); font-weight: 600; } body.ui-next .mud-nav-link:not(.active):hover { background-color: var(--mud-palette-action-default-hover); } /* ---- Customer-list figure box -------------------------------------------- */ /* The fill now comes from the lightened --mud-palette-background-grey (zinc-50, set above). At that lightness it barely separates from the white row, so add a hairline border to keep it reading as its own panel. */ body.ui-next .company-card-row__figure { border: 1px solid var(--mud-palette-divider); } /* ---- Preview-page-only helpers ------------------------------------------ */ .ui-next .preview-section { margin-bottom: 40px; } .ui-next .preview-swatches { display: flex; flex-wrap: wrap; gap: 12px; } .ui-next .preview-swatch { width: 120px; border-radius: var(--radius); border: 1px solid var(--mud-palette-divider); overflow: hidden; font-size: 11px; } .ui-next .preview-swatch__chip { height: 48px; } .ui-next .preview-swatch__label { padding: 6px 8px; background: #fff; color: var(--mud-palette-text-secondary); }