refactor(design): shadow-literal and raw-hex token migration (elevation E1+E2)

[BigSimmo]

Summary

First tranche of the design-elevation work items from the July 2026 design review (CLAUDE_CODE_FIXES.md Part 2, E1+E2 — the mechanical, highest-yield group):

• E1: ~15 arbitrary shadow-[0_…] literals in live components mapped onto the elevation token ladder — --shadow-tight (cards), --shadow-soft (mid panels, composer shell), --shadow-hover (hover states), --shadow-elevated (overlays/dialogs/popups), --glow-soft (accent glow on the settings nav active state). Two dark:shadow-[…] twin overrides in settings-dialog collapsed to a single token reference — the tokens flip in .dark themselves.
• E2: raw hex ring/inset colours in the favourites mockup (ring-[#bfe6d8], inset_3px_0_0_#0b7285, inset_0_0_0_1px_#d8e6eb) replaced with --clinical-accent-border / --clinical-accent / --border, fixing their dark-mode behaviour.

Deliberately kept: the diagnosis-map drawer's upward 0_-20px_60px shadow (no upward token exists; the direction is intentional), and the favourites mockup's three per-mode coloured command glows (deliberate multi-hue exploration in a dev-only mockup lane). Other mockup-file shadow literals are out of scope for this tranche.

Verification

• npm run verify:cheap — green (lint, typecheck, vitest, runtime/type-scale/icon-scale/brand/sitemap checks)
• npm run verify:ui — green, 158 passed (full Chromium Playwright suite)

Clinical governance preflight

Not applicable — visual token refactor only; no ingestion, answer generation, search/ranking, source rendering, document access, privacy, or production env changes.

Notes

Remaining elevation items (E3 typography, E4 colour system, E5 space/radius, E6 component details) are follow-up tranches. After this and #627 merge, a design re-sync picks the changes up automatically.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Updated shadows, borders, glows, and selected-state accents across dialogs, search results, settings, popovers, forms, tables, and mockups.
  • Standardized visual elevation and hover effects using shared design tokens for a more consistent interface.
  • No functional behavior or user workflows were changed.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 1f8edcef-d310-49a5-bda5-283027c074b7

📥 Commits

Reviewing files that changed from the base of the PR and between 77cb0d0 and b91437c.

📒 Files selected for processing (8)

• src/components/clinical-dashboard/account-setup-dialog.tsx
• src/components/clinical-dashboard/document-search-results.tsx
• src/components/clinical-dashboard/mode-action-popup.tsx
• src/components/clinical-dashboard/settings-dialog.tsx
• src/components/clinical-dashboard/universal-search-command-surface.tsx
• src/components/favourites-page-mockups/favourites-library-redesign-page.tsx
• src/components/forms/forms-search-results-page.tsx
• src/components/ui-primitives.tsx

---

📝 Walkthrough

Walkthrough

Replaces hard-coded shadow and accent color utilities with CSS theme variables across shared UI primitives, clinical dashboard components, favourites mockups, and mobile search result cards. No functional logic or exported APIs changed.

Changes

Theme token styling

Layer / File(s)	Summary
Shared shadow primitive updates src/components/ui-primitives.tsx	Shared commandInput, chatComposerShellDelta, and tableCard classes now use theme shadow variables.
Clinical dashboard shadow updates src/components/clinical-dashboard/...	Dialogs, settings sections, action panels, search result cards, and command dropdowns now use shared shadow tokens.
Accent and result card styling src/components/favourites-page-mockups/..., src/components/forms/forms-search-results-page.tsx	Favourites accents and mobile result card shadows now reference CSS variables.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• BigSimmo/Database#476: Also updates the mobile “Best matches” result cards in forms-search-results-page.tsx.

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the design-token shadow and raw-hex migration covered by the changeset.
Description check	✅ Passed	The description includes summary, verification, governance notes, and scope caveats, matching the template mostly.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/design-elevation-e1e2

---

_{Comment @coderabbitai help to get the list of available commands.}