/* elevation-dark.css — dark-only surface-elevation ramp (exam-canvas-dark-theme brick). * * PROBLEM: the dx-token-bridge alias layer (tokens.css) is mode-agnostic and taps only 3 of DX's * neutral steps for surfaces — and in dark those 3 sit very close together * (bg.app #252525 / bg.subtle #1d1e1d / bg.default #161616, ~8 levels apart). A dense clinical * form nests page > section > card > input across them, so everything collapsed into a flat * near-black mass and controls read as sunken holes. * * FIX: elevation is mode-asymmetric (dark = surfaces LIGHTEN as they rise; light = stay ~white + * shadow/borders), which a mode-agnostic alias cannot express. So, in DARK ONLY, re-map the * surface tokens to WIDELY-SPACED steps from DX's own 25-step Fluent neutral ramp * (--dxds-neutral-10..250, verified live; docs: DesignSystem/405638). The only literal hexes * are the re-tinted ramp steps themselves; everything else reads the ramp or the --ke-wash-* * colours on .ke-shell-root. * * Dark elevation ladder (lightness rises with elevation), navy-tinted to sit on the navy/plum * page wash instead of charcoal (Alan 2026-10-15: "black cards on blue background dont look * great", "it has to be consistent everywhere"): * section bands (bg.subtle) neutral-240 * card / widget surface (bg.app) neutral-230 = DX surface-neutral-default-rest * raised fills (bg.default) neutral-220 * The dark end of DX's own neutral ramp (150-250) is re-tinted navy at the root, so every DX * surface derived from it (default, deep, subdued, selected, hover, disabled) and the popups DX * renders outside the page all match without naming tokens one by one. The steps stay SOLID: a * translucent token stacks through DX's nested layers (a grid came out milky grey). The cards, * tiles and grids that should be see-through are set explicitly below. * * TWO DARK PATHS (Codex round-1 P2): "effective dark" has two triggers, mirroring * theme-toggle.ts getEffectiveDark (explicit data-theme attr > OS prefers-color-scheme): * 1. EXPLICIT dark — user picked Dark; . → `[data-theme="dark"] …` * 2. SYSTEM dark — user picked System, OS is dark; theme-toggle.ts * REMOVES data-theme (line 74) and DX/canvas flip via * prefers-color-scheme. → `@media (prefers-color-scheme:dark) :root:not([data-theme]) …` * Both blocks below are KEPT IN SYNC — every rule appears once per path. Explicit LIGHT * () is excluded from path 2 by `:not([data-theme])`, so a dark OS * never overrides a user who deliberately chose Light. LIGHT IS UNTOUCHED either way: the * tokens/classes keep their tokens.css / app-shell.css values. Loaded AFTER tokens.css in * App.razor so the dark ramp wins. App-wide in dark by necessity (the canvas substrate reads * these vars from ); the laddered greys give the whole app coherent dark elevation. * * Exam-form chrome dark override (round-2 root cause, supersedes the canvas-elevation theory): * the exam-fill chrome is authored in ExamForm.razor / ComparisonBaselineTabs.razor with * hardcoded light hex (background:#fff base, #343a40 header, #f8f9fa comparison bar, * #212529/#343a40 body text) that NEVER flips with the DX theme. In dark the canvas-only * sections (steppers / numeric / angle) painted their correctly-themed dark-grey widgets on a * WHITE form base — the "unusable in dark" symptom. Widgets were already fine; the form base * was the bug. The .ke-exam-* / .ke-cmp-* rules below put the chrome on the SAME laddered * surfaces the canvas widgets sit on. Status colours (success/danger/blue link) stay * full-strength; text/border tokens flip via the alias layer so dark-on-white text stays legible. */ /* ── PATH 1: EXPLICIT dark (data-theme="dark") ──────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --dxds-neutral-150: #6b6d76; --dxds-neutral-160: #626370; --dxds-neutral-170: #585a6a; --dxds-neutral-180: #4f5164; --dxds-neutral-190: #46485d; --dxds-neutral-200: #3e3f55; --dxds-neutral-210: #35364c; --dxds-neutral-220: #2d2e44; --dxds-neutral-230: #24253b; --dxds-neutral-240: #1c1e34; --dxds-neutral-250: #15162c; --color-bg-subtle: var(--dxds-neutral-240); --color-bg-app: var(--dxds-neutral-230); --color-bg-default: var(--dxds-neutral-220); --color-text-brand: var(--dxds-primary-50); /* #7ab2f0, 5.4:1 on bg.app; DX's #3c92e9 was 3.7:1 */ --color-text-action: var(--dxds-primary-50); --color-text-link: var(--dxds-primary-50); --color-text-link-hover: var(--dxds-primary-40); --color-text-danger: var(--dxds-danger-50); /* #f08f86, 5.2:1; DX's #e0615a was 3.5:1 */ --color-text-info: var(--dxds-info-50); /* #92aaf5, 5.3:1; DX's #6a87f0 was 3.6:1 */ --color-text-placeholder: var(--dxds-neutral-90); /* #a8a9a8, 5.1:1; DX's #949493 was 4.0:1 */ } [data-theme="dark"] .ke-body-region { background: radial-gradient(ellipse 80% 70% at 100% 100%, var(--ke-wash-glow), transparent), var(--ke-wash-page); } [data-theme="dark"] .settings-card, [data-theme="dark"] .settings-tile, [data-theme="dark"] .ke-home-card, [data-theme="dark"] .ke-home-pinned-card, [data-theme="dark"] .ps-section, [data-theme="dark"] .es-section { background: rgb(255 255 255 / 0.045); border-color: rgb(255 255 255 / 0.09); } [data-theme="dark"] .ke-results-page, [data-theme="dark"] .designer-desk { background: transparent; } [data-theme="dark"] .ke-badge-completed { color: var(--dxds-success-40); } [data-theme="dark"] #components-reconnect-modal { background: var(--dxds-color-border-warning-default-rest); color: var(--dxds-color-content-neutral-default-static-dark-rest); font-weight: 600; } [data-theme="dark"] .ke-grid { --dxds-color-surface-neutral-default-rest: transparent; --dxds-color-surface-neutral-default-hovered: rgb(255 255 255 / 0.06); --dxds-color-surface-neutral-subdued-rest: rgb(255 255 255 / 0.05); background: rgb(255 255 255 / 0.045); border-color: rgb(255 255 255 / 0.09); } [data-theme="dark"] .ke-patient-top, [data-theme="dark"] .ke-patient-header, [data-theme="dark"] .ps-header, [data-theme="dark"] .ke-exam-section-nav { background: color-mix(in srgb, var(--dxds-neutral-240) 72%, transparent); border-color: rgb(255 255 255 / 0.09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } [data-theme="dark"] .ke-exam-root { background: transparent; } [data-theme="dark"] .ke-exam-header { background: var(--ke-wash-header); } [data-theme="dark"] .ke-exam-title { color: var(--color-text-primary); } [data-theme="dark"] .ke-exam-body-text { color: var(--color-text-primary); } [data-theme="dark"] .ke-exam-muted { color: var(--color-text-secondary); } [data-theme="dark"] .ke-exam-template-row { border-bottom-color: var(--color-border-default); color: var(--color-text-primary); } [data-theme="dark"] .ke-exam-notice { background: var(--color-bg-warning-subtle); border-top-color: var(--color-bg-warning-emphasis); } [data-theme="dark"] .ke-exam-notice-text { color: var(--color-text-warning); } [data-theme="dark"] .ke-cmp-tabs { background: var(--dxds-neutral-240); border-bottom-color: var(--color-border-default); } [data-theme="dark"] .ke-brand-logo { --ke-brand-insight: #3dc0ea; } /* ── PATH 2: SYSTEM dark (no data-theme attr + OS dark) — MUST MIRROR PATH 1 ─────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --dxds-neutral-150: #6b6d76; --dxds-neutral-160: #626370; --dxds-neutral-170: #585a6a; --dxds-neutral-180: #4f5164; --dxds-neutral-190: #46485d; --dxds-neutral-200: #3e3f55; --dxds-neutral-210: #35364c; --dxds-neutral-220: #2d2e44; --dxds-neutral-230: #24253b; --dxds-neutral-240: #1c1e34; --dxds-neutral-250: #15162c; --color-bg-subtle: var(--dxds-neutral-240); --color-bg-app: var(--dxds-neutral-230); --color-bg-default: var(--dxds-neutral-220); --color-text-brand: var(--dxds-primary-50); --color-text-action: var(--dxds-primary-50); --color-text-link: var(--dxds-primary-50); --color-text-link-hover: var(--dxds-primary-40); --color-text-danger: var(--dxds-danger-50); --color-text-info: var(--dxds-info-50); --color-text-placeholder: var(--dxds-neutral-90); } :root:not([data-theme]) .ke-body-region { background: radial-gradient(ellipse 80% 70% at 100% 100%, var(--ke-wash-glow), transparent), var(--ke-wash-page); } :root:not([data-theme]) .settings-card, :root:not([data-theme]) .settings-tile, :root:not([data-theme]) .ke-home-card, :root:not([data-theme]) .ke-home-pinned-card, :root:not([data-theme]) .ps-section, :root:not([data-theme]) .es-section { background: rgb(255 255 255 / 0.045); border-color: rgb(255 255 255 / 0.09); } :root:not([data-theme]) .ke-results-page, :root:not([data-theme]) .designer-desk { background: transparent; } :root:not([data-theme]) .ke-grid { --dxds-color-surface-neutral-default-rest: transparent; --dxds-color-surface-neutral-default-hovered: rgb(255 255 255 / 0.06); --dxds-color-surface-neutral-subdued-rest: rgb(255 255 255 / 0.05); background: rgb(255 255 255 / 0.045); border-color: rgb(255 255 255 / 0.09); } :root:not([data-theme]) .ke-patient-top, :root:not([data-theme]) .ke-patient-header, :root:not([data-theme]) .ps-header, :root:not([data-theme]) .ke-exam-section-nav { background: color-mix(in srgb, var(--dxds-neutral-240) 72%, transparent); border-color: rgb(255 255 255 / 0.09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } :root:not([data-theme]) .ke-exam-root { background: transparent; } :root:not([data-theme]) .ke-exam-header { background: var(--ke-wash-header); } :root:not([data-theme]) .ke-exam-title { color: var(--color-text-primary); } :root:not([data-theme]) .ke-exam-body-text { color: var(--color-text-primary); } :root:not([data-theme]) .ke-exam-muted { color: var(--color-text-secondary); } :root:not([data-theme]) .ke-exam-template-row { border-bottom-color: var(--color-border-default); color: var(--color-text-primary); } :root:not([data-theme]) .ke-exam-notice { background: var(--color-bg-warning-subtle); border-top-color: var(--color-bg-warning-emphasis); } :root:not([data-theme]) .ke-exam-notice-text { color: var(--color-text-warning); } :root:not([data-theme]) .ke-cmp-tabs { background: var(--dxds-neutral-240); border-bottom-color: var(--color-border-default); } :root:not([data-theme]) .ke-brand-logo { --ke-brand-insight: #3dc0ea; } :root:not([data-theme]) .ke-badge-completed { color: var(--dxds-success-40); } :root:not([data-theme]) #components-reconnect-modal { background: var(--dxds-color-border-warning-default-rest); color: var(--dxds-color-content-neutral-default-static-dark-rest); font-weight: 600; } }