feat(design): port Clinical Sky token system, elevation ladder and radius grid - #1375
Conversation
…n-system-update-e34ca9
…rect token docs
Follow-ups on the Clinical Sky token port:
- Restore Therapy Compass's 650/680 font weights. They were normalised to
600/700 on the premise that they were off-scale, but globals.css uses
520/540/560/580/640 deliberately ("Geist is a variable face, so these
interpolate instead of snapping to 700"), so the intermediate weights were
the established idiom rather than drift. therapy-compass.css now differs
from main only by the Clinical Sky print palette.
- Fix a pre-existing race in the header-overlap coverage. gotoHome settles on
a single visible header, but a later React remount can detach it before the
measurement, leaving a 0x0 rect and no candidates, so the suite failed at a
different arbitrary width on each contended run. Retry the collection, not
the overlap assertion, so a header that never renders still fails. Stable
across four consecutive runs.
- Correct docs/redesign/02-design-direction.md, whose "Token set (implemented
in globals.css)" section claimed a primary ramp of #0e8f85/#33d4c2, a radius
scale of lg 0.875rem / xl 1.25rem / 2xl 1.75rem, and durations of
150/200/250ms. None matched the stylesheet. Every value is now cross-checked
against globals.css; the dated June 20 / July 1 sections are left as the
record of past runs.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>This pull request has been ignored for the connected project Preview Branches by Supabase. |
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in:11 minutes Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (62)
✨ Finishing Touches📝 Generate docstrings
Comment |
BigSimmo
commented
Jul 29, 2026
@cursoragent Inspect the PR and repository state, identify the root cause of every failing CI check, unresolved review comment, merge conflict, and related defect. Apply the smallest robust fix using existing project patterns and best practices, without unrelated changes. Run Bugbot and all relevant lint, type-check, test, build, and CI-equivalent commands, fix any issues found, then resolve only the review comments that are fully addressed. Summarise the root causes, changes made, validation results, and any remaining blockers. |
PR #1375 is merged ( Root causes
Fixes applied (all in the squash)
Validation
Remaining
  |
BigSimmo
commented
Jul 29, 2026
@codex fix issues |
BigSimmo
commented
Jul 29, 2026
@claude review PR |
Hi @BigSimmo — thanks for the @claude mention. Open this in Claude Code on the web to continue here: https://claude.ai/code Context: Automated backlink from the Claude backlink workflow. Claude Code can pick up the mention and push a scoped fix to the branch. |
Claude encountered an error after 2s —— View job I'll analyze this and get back to you. |
BigSimmo
commented
Jul 29, 2026
@CodeRabbit review PR |
✅ Action performedReview finished.
|
Take main's DocumentViewerRail extraction and re-apply the tracking-eyebrow token on the moved summary heading so the design system port stays mergeable with current main.
Summary
Testing
|
CI triageCI failed on this PR. Automated classification of the 2 failed job(s):
Compared with main CI run #6463 (success). Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger. |
Production UI failed when hydration briefly left two form-detail-page mains mounted. Use expectSingleSettledOwner so transient remounts can converge while a permanent double-render still fails.
Resolve document-search-results conflict by taking #1378's removal of SelectedDocumentEvidencePanel; this branch only had tracking-eyebrow edits inside that deleted overlay.
…n-system-update-e34ca9
Uh oh!
There was an error while loading. Please reload this page.
(#1391) Follow-ups to #1375 (Clinical Sky design system), which merged before these landed. `text-4xs` was dead on main. #1375 retired the `--text-4xs` token, so Tailwind emits no such rule and every remaining `text-4xs` class was a silent no-op with the text falling back to inherited size. Two files carrying it landed from main while #1375 was in flight and were dead on arrival. Repointed to `text-3xs`, the 10px floor, and guarded: the design-token contract now fails if any tracked file under `src/` references the retired class outside a comment. Mockups are deliberately not exempt — a dead utility breaks a mockup exactly as it breaks production. Six hydration races fixed at the source. In this app visible never implies interactive: the server-rendered tree paints before React owns it, so a single un-retried action asserted once is a coin flip under load. Every fix retries the action together with the effect it should produce, so a swallowed first attempt retries while a genuine regression still fails. Both retries added to ui-smoke are idempotent, which review caught and which matters more than it looks. `toPass` schedules another attempt whenever the inner assertion's own deadline expires — which can happen after the click already landed. Without a guard, `openGuide` clicked a Settings trigger the modal was already covering, and the mode-menu retry clicked a TOGGLE a second time, closing a menu that had just opened and oscillating until the budget ran out. The mobile branch needed a second guard: a swallowed Settings click leaves the phone menu open, so re-running `openMobileClinicalGuideMenu` would toggle it shut and then fail to find Settings inside it — meaning the <768px branch could not recover on retry at all. The ui-overlap phone-inset measurement now retries inside `toPass` with the 2px symmetry tolerance and the assertions byte-for-byte unchanged, so a genuinely asymmetric header still fails once the retry budget is spent. Documentation records that the intermediate font weights on the variable face are deliberate rather than drift, and that redefining Tailwind's own leading names silently retunes every existing call site. Also resolves an `issues:next-id` double-allocation: #108/#109 were claimed concurrently by two branches, so this branch's two rows are renumbered #110/#111 and the marker moved to 112. #111 is archived rather than left open, since this change is what closes it. RAG impact: no retrieval behaviour change — test robustness, two mockup class names, and docs only; nothing under `src/lib/rag/**`, clinical-search, ranking-config, the eval harness or the golden fixture is touched. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FvU8z73P6TXUXoYBqN5K1P
Summary
Ports the reviewed Clinical Sky design system into
globals.css, then fixes the drift and defects that port exposed.Accent moved from Aegean teal
#0b6f86to Clinical Sky#1d6fb8. The full--primary-*ramp is re-derived in both themes rather than swapping the 500 step, so tints, borders and hover states stay coherent; dark holds the same hue (#74bdf0) instead of drifting to cyan-green.#1d6fb8is 5.2:1 on white, legal as both text colour and button fill.Structural token work:
inset < wash < subtle < surface < raised).--surface-raisedwas darker than--surface, so raised cards read as recesses.--e0–--e4— one monotonic sequence that sorts by name, hue-tinted, with negative spread. Seven shadow names previously produced five effects that didn't sort (tight3px <soft20px <hover26px <elevated48px). Old names are aliases onto tiers, so nothing breaks.--type-*/--tone-*anchors are chroma-capped below the calmest status colour so an identity chip can never out-shout a status badge.--radius-lgwas 10px; moving it to 12 collided with--radius-xl, so the upper ladder shifted a rung rather than collapsing two names onto one value.--text-4xsstep is retired (indefensible at any density in a clinical product);--tracking-eyebrowand--leading-display/--leading-prosereplace 67 + 12 arbitrary values. Tailwind's own--leading-tight/-snugare deliberately not shadowed — that would silently retune 38 existing call sites.code/kbd/th/td/.font-monoso doses and counts stop wobbling between rows.Three drift bugs found in passing, each silently keeping the old teal: the pre-paint
APP_THEME_COLORS.light(a flash of the wrong page colour and a mismatched browser chrome bar), the brand mark powering the favicon and generated icon routes, and the Therapy Compass print palette.tests/design-token-contract.test.ts(27 assertions) now ratchets these relationships — surface ladder ordering, ramp distinctness, chroma cap, contrast floors, ladder aliasing, radius grid, and the derived values (APP_THEME_COLORSmust equal the resolved--background; the brand tiles must equal--clinical-accent). Two stale pins that copied token values instead of tracking them are repaired.Not adopted from the review: the proposed two-tone focus ring. It stacked a second box-shadow — which the shared focus rule exists to prevent — and wiped the control's resting elevation. Its premise doesn't hold here:
outline-offsetpaints outside the border box, so the gap shows the ancestor surface, not the control's accent fill.RAG impact: no retrieval behaviour change — design tokens, styling and docs only; no file under
src/lib/rag/**, clinical-search, ranking-config, the eval harness, or the golden fixture is touched.Verification
npm run verify:pr-local—Test Files 418 passed (418),Tests 4265 passed | 3 skipped, plus format, client-bundle secret surface, and offline RAG fixture/manifest validation (36 golden cases, 21 suites)npm run verify:cheap— green on the merged basenpm run verify:ui— 323 passed. Residual failures on this machine were hydration/load races under ~40 concurrent worktrees (button never enables, menu never opens); each re-verified passing on an idle boxui-overlap.spec.tsmeasured the header without covering the measurement in the same retrygotoHomealready uses, so a React remount left a 0×0 rect and the suite failed at a different arbitrary width each contended run. Stable across four consecutive runs sincetheme-colormeta matches--backgroundexactly (#f1f4f8/#060708)Risk and rollout
Visual change across the product: every page background moves off pure white, and 1,036
rounded-*call sites change radius. No behavioural or data-path change. Revert is a single-commit revert of the token blocks; the--e0–--e4aliases mean call sites need no coordinated change either way.Clinical Governance Preflight
Design tokens, styling and docs only — no ingestion, answer generation, search/ranking, document access, privacy or clinical output path is touched. Recorded for completeness:
Clinical KB Database(sjrfecxgysukkwxsowpy)Notes
docs/redesign/02-design-direction.mdcarried pre-existing rot in its "Token set (implemented inglobals.css)" section — a primary ramp of#0e8f85/#33d4c2, a radius scale that never matched, durations of 150/200/250ms against an actual 120/180/240ms. Corrected and cross-checked value by value.650/680weights were briefly normalised to600/700and then restored:globals.cssuses520/540/560/580/640deliberately, so intermediate weights on a variable face are the established idiom, not drift.08d6f126has been updated with the recompiled bundle and the four changed guideline docs. Its_ds_manifest.jsontoken inventory still lists--text-4xsand the retired arbitrary utilities until a fullresync.mjs --remoteregenerates bundle and manifest together.🤖 Generated with Claude Code