/* ========================================================================== koshiFlo — MudBlazor "accent variant" skin. Only the component-shape overrides that a C# MudTheme can't express (pill chips, left-border nav, sentence-case buttons, compressed elevation, quiet tooltip/snackbar/focus). The palette, typography and dark surfaces come from Theme/KfAccentTheme.cs via MudThemeProvider. EVERYTHING here is scoped under [data-kf-theme="mud"] so it never affects the base Koshi Indigo theme. The accent tracks --mud-palette-primary, which the theme provider sets to the chosen accent, so these rules stay accent-agnostic. ========================================================================== */ /* ---- Compressed, quiet elevation (Mud's 25-step scale → 3 reused values) ---- */ [data-kf-theme="mud"] { --mud-elevation1: var(--shadow-card); --mud-elevation2: var(--shadow-card); --mud-elevation3: var(--shadow-raised); --mud-elevation4: var(--shadow-raised); --mud-elevation5: var(--shadow-raised); --mud-elevation6: var(--shadow-raised); --mud-elevation8: var(--shadow-overlay); --mud-ripple-opacity: 0.06; --mud-typography-button-text-transform: none; } /* ---- Buttons: sentence case, disciplined radius, no shouty shadow ---- */ [data-kf-theme="mud"] .mud-button-root { border-radius: var(--radius-sm); text-transform: none; } [data-kf-theme="mud"] .mud-button-filled { border-radius: var(--radius-md); box-shadow: none; } [data-kf-theme="mud"] .mud-button-filled:hover { box-shadow: var(--shadow-card); } /* ---- Cards / paper: hairline border, quiet shadow ---- */ [data-kf-theme="mud"] .mud-card { border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); } [data-kf-theme="mud"] .mud-paper.mud-elevation-0 { /*border: 1px solid var(--border-subtle);*/ } /* ---- Chips / badges: MudChip pill shape mapped 1:1 to semantic state tokens. Mud's default "error"-red-for-anything is never used for a student state. ---- */ [data-kf-theme="mud"] .mud-chip { border-radius: 16px; font: var(--text-label-md); } [data-kf-theme="mud"] .mud-chip.mud-chip-color-success { background: var(--state-progress-bg); color: var(--state-progress-fg); } [data-kf-theme="mud"] .mud-chip.mud-chip-color-info { background: var(--state-ready-bg); color: var(--state-ready-fg); } [data-kf-theme="mud"] .mud-chip.mud-chip-color-warning { background: var(--state-attention-bg); color: var(--state-attention-fg); } [data-kf-theme="mud"] .mud-chip.mud-chip-color-error { background: var(--state-risk-bg); color: var(--state-risk-fg); } [data-kf-theme="mud"] .mud-chip.mud-chip-color-default { background: var(--state-paused-bg); color: var(--state-paused-fg); } /* Our own StatusBadge reads as a pill in this variant too. "Behind expected pace" takes on the muted accent (--kf-accent-muted, set on from C#) — still shape + label differentiated, so the accent's dual use stays accessible. */ [data-kf-theme="mud"] .kf-badge { border-radius: 16px; } [data-kf-theme="mud"] .kf-badge-risk { color: var(--kf-accent-muted, var(--state-risk-fg)) !important; background: color-mix(in srgb, var(--kf-accent-muted, var(--state-risk-fg)) 14%, transparent) !important; border-color: color-mix(in srgb, var(--kf-accent-muted, var(--state-risk-fg)) 34%, transparent) !important; } /* ---- Drawer / nav: left accent border + tint, not a filled pill ---- The drawer surface is light, so nav accenting uses --kf-accent-muted (the accent blended toward ink + darkened, set on from C#). This keeps a light accent like yellow legible on white while red/indigo still read true. */ [data-kf-theme="mud"] .mud-nav-link.active, [data-kf-theme="mud"] .mud-nav-link.mud-nav-link-active { color: var(--kf-accent-muted, var(--mud-palette-primary)); background-color: color-mix(in srgb, var(--kf-accent-muted, var(--mud-palette-primary)) 12%, transparent); border-left: 3px solid var(--kf-accent-muted, var(--mud-palette-primary)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* Nav icons take the accent highlight (matching the banner) so the drawer reads as accented too. Active icon = full muted accent; inactive icons soften it toward the secondary text colour to preserve hierarchy. */ [data-kf-theme="mud"] .mud-nav-link .mud-nav-link-icon { color: color-mix(in srgb, var(--kf-accent-muted, var(--mud-palette-primary)) 62%, var(--mud-palette-text-secondary)); } [data-kf-theme="mud"] .mud-nav-link.active .mud-nav-link-icon, [data-kf-theme="mud"] .mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: var(--kf-accent-muted, var(--mud-palette-primary)); } /* ---- Inputs: md radius, calm focus (no glow) ---- */ [data-kf-theme="mud"] .mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-md); } /* ---- Tabs: underline indicator only ---- */ [data-kf-theme="mud"] .mud-tabs-toolbar .mud-tab { text-transform: none; } [data-kf-theme="mud"] .mud-tabs-toolbar .mud-tabs-indicator { background-color: var(--mud-palette-primary); height: 2px; } /* ---- Dialog / overlay: the one intentional larger radius + real elevation ---- */ [data-kf-theme="mud"] .mud-dialog { border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay); } /* ---- Tooltip: dark ink surface in either mode ---- */ [data-kf-theme="mud"] .mud-tooltip { background-color: var(--ink-900); color: var(--white); border-radius: var(--radius-sm); font: var(--text-label-sm); } /* ---- Snackbar: semantic state backgrounds, dark text on the light tints ---- */ [data-kf-theme="mud"] .mud-snackbar.mud-alert-filled-success { background: var(--state-progress-fg); } [data-kf-theme="mud"] .mud-snackbar.mud-alert-filled-info { background: var(--state-ready-fg); } [data-kf-theme="mud"] .mud-snackbar.mud-alert-filled-warning { background: var(--state-attention-bg); color: var(--state-attention-fg); } [data-kf-theme="mud"] .mud-snackbar.mud-alert-filled-error { background: var(--state-destructive-solid); } /* ---- One consistent focus ring across interactive elements ---- */ [data-kf-theme="mud"] .mud-button-root:focus-visible, [data-kf-theme="mud"] .mud-icon-button:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); } @media (prefers-reduced-motion: reduce) { [data-kf-theme="mud"] .mud-ripple { display: none; } }