Skip to content

fix(design-system): TSX ratchets (color exemption, type map, spacing) #2427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BigSimmo merged 9 commits into from
Aug 27, 2026
+94 −44
Merged

fix(design-system): TSX ratchets (color exemption, type map, spacing) #2427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3948b7a
fix(design-system): TSX ratchets (color exemption, type map, spacing)
BigSimmo Aug 27, 2026
05f5432
Merge branch 'main' into claude/ds-h36-tsx-ratchets
BigSimmo Aug 27, 2026
fe93457
Merge remote-tracking branch 'origin/main' into claude/ds-h36-tsx-rat…
claude Aug 27, 2026
7eddf8b
Merge branch 'main' into claude/ds-h36-tsx-ratchets
BigSimmo Aug 27, 2026
3c9ee51
Merge branch 'main' into claude/ds-h36-tsx-ratchets
BigSimmo Aug 27, 2026
5cf4bd3
Merge branch 'main' into claude/ds-h36-tsx-ratchets
BigSimmo Aug 27, 2026
eaf5053
Merge branch 'main' into claude/ds-h36-tsx-ratchets
BigSimmo Aug 27, 2026
841a051
fix(ui): correct collapsed sidebar rail height for its vertical margins
claude Aug 27, 2026
a8e96b7
Merge branch 'main' into claude/ds-h36-tsx-ratchets
BigSimmo Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions docs/design-system/GATES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,29 @@ Canonical role → live utility (TOKENS §6): `--text-xs` → `text-xs`; `--text
`--text-body` → `text-base-minus`; `--text-md` → `text-[length:var(--text-md)]`;
`--text-lg` → `text-xl`; `--text-xl` → `text-2xl`; `--text-hero` → `text-hero`.

**Step selection map (guidance only — DS-P2-02).** Pick the named step that matches the
rendered size. The `*-minus` steps sit one notch under the Tailwind default they are
named for. This table is documentation, not a gate: do not delete type steps, and do
not add a blocking ESLint rule for which existing step a surface chooses.

| Size | Utility | When to use |
| ----- | ----------------- | ------------------------------------------------------------------- |
| 10px | `text-3xs` | Micro floor: dense metadata, legends, count bubbles |
| 11px | `text-2xs` | Chip compact / secondary labels |
| 12px | `text-xs` | Tailwind default; Chip `standard` |
| 13px | `text-sm-minus` | One notch under `text-sm` (14px) — dense body/labels |
| 14px | `text-sm` | Tailwind default body/label |
| 15px | `text-base-minus` | One notch under `text-base` (16px) — comfortable body just under 16 |
| 16px | `text-base` | Tailwind default |
| 17px | `text-lg-minus` | One notch under `text-lg` (18px) |
| 18px | `text-lg` | Tailwind default |
| 20px | `text-xl` | Tailwind default |
| 22px | `text-2xl-minus` | One notch under `text-2xl` (24px) |
| 24px | `text-2xl` | Tailwind default |
| 26px | `text-3xl-minus` | One notch under `text-3xl` (30px) |
| 30px | `text-3xl` | Tailwind default |
| fluid | `text-hero` | Mode-home display heading (`clamp`) |

⚠️ **The "1 318 call sites" figure this section used to quote was a repo-wide grep including
`src/app/mockups/**`, which every one of these gates excludes** — 1 360 at `7aaf9349c`.
Production consumers of the eight non-standard steps total **705** **[verified: AST class-root
Expand Down
2 changes: 1 addition & 1 deletion src/components/clinical-dashboard/dashboard-nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ export function MobileSectionFab({
aria-hidden={!open}
inert={!open}
hidden={!open}
className="fixed z-40 overflow-hidden rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] text-[color:var(--text)] shadow-[var(--shadow-lux)] ring-1 ring-[color:var(--ring-highlight)] backdrop-blur-md"
className="fixed z-40 overflow-hidden rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] text-[color:var(--text)] shadow-[var(--shadow-lux)] backdrop-blur-md"
style={{
right: "max(0.75rem, env(safe-area-inset-right))",
bottom: "calc(max(0.75rem, env(safe-area-inset-bottom)) + 4.5rem)",
Expand Down
2 changes: 1 addition & 1 deletion src/components/clinical-dashboard/medication-prescribing-workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -823,7 +823,7 @@ function MedicationResults({
data-medication-cell="action"
className="flex min-w-0 items-start gap-2 pt-0.5 text-sm-minus font-medium leading-5 text-[color:var(--text-heading)]"
>
<ActionToneIcon tone={result.actionTone} className="mt-[0.1875rem] h-3.5 w-3.5" />
<ActionToneIcon tone={result.actionTone} className="mt-0.5 h-3.5 w-3.5" />
<span className="line-clamp-2 min-w-0 break-words">{result.action}</span>
</span>
{result.href ? (
Expand Down
2 changes: 1 addition & 1 deletion src/components/document-viewer/document-rail-panels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ export function DocumentViewerRail({
<li key={`${key}:${index}:${item}`} className="flex gap-2">
<span
aria-hidden="true"
className="mt-[0.65em] h-1.5 w-1.5 shrink-0 rounded-full bg-[color:var(--clinical-accent)]"
className="mt-2.5 h-1.5 w-1.5 shrink-0 rounded-full bg-[color:var(--clinical-accent)]"
/>
<span>
<SafeBoldText text={item} />
Expand Down
10 changes: 7 additions & 3 deletions src/components/sidebar-live-shell.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@
.railDivider {
width: 2rem;
height: 1px;
margin-block: 0.625rem;
/* 10px sat between --space-2 (8) and --space-3 (12); snap onto the 4px gap ladder. */
margin-block: var(--gap-tight);
flex: none;
background: var(--border);
}
Expand Down Expand Up @@ -275,8 +276,11 @@

.shell[data-collapsed="true"] .rail {
width: 5.5rem;
height: calc(100dvh - 0.25rem);
margin: 0.125rem 0.4375rem;
/* Subtract the full vertical margin (--space-1 top + --space-1 bottom =
--space-2) so the border-box height plus margins fits 100dvh exactly. */
height: calc(100dvh - var(--space-2));
/* 2px 7px sat off the 4px space ladder; snap to --space-1 / --space-2. */
margin: var(--space-1) var(--space-2);
Comment thread
BigSimmo marked this conversation as resolved.
padding: var(--radius-lg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
Expand Down
27 changes: 12 additions & 15 deletions src/components/therapy-compass/screens/brief-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,14 +183,14 @@ export function BriefScreen() {
className="flex flex-col gap-4 min-w-0"
provenance={`Source: ${t.name} Therapy record · ${durationLabel} intervention · Review status: ${t.reviewStatus === "reviewed" ? "reviewed" : "source review required"}`}
>
<div className={cn(cardSurface, "py-[22px] px-6")}>
<div className="flex items-center justify-between gap-3 mb-[18px] flex-wrap">
<div className={cn(cardSurface, "py-5.5 px-6")}>
<div className="flex items-center justify-between gap-3 mb-4.5 flex-wrap">
<div className="flex items-center gap-3 flex-wrap">
<h2 className="m-0 text-lg font-semibold text-[color:var(--text-heading)]">{t.name}</h2>
<span className="text-2xs font-semibold py-[3px] px-2.5 rounded-sm bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent-hover)] border border-[color:var(--clinical-accent-border)]">
<span className="text-2xs font-semibold py-0.5 px-2.5 rounded-sm bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent-hover)] border border-[color:var(--clinical-accent-border)]">
{durationLabel} mode
</span>
<span className="text-2xs font-semibold py-[3px] px-2.5 rounded-sm bg-[color:var(--warning-bg)] text-[color:var(--warning-text)] border border-[color:var(--warning-border)]">
<span className="text-2xs font-semibold py-0.5 px-2.5 rounded-sm bg-[color:var(--warning-bg)] text-[color:var(--warning-text)] border border-[color:var(--warning-border)]">
{t.reviewStatus === "reviewed" ? "Reviewed" : "Clinician review required"}
</span>
</div>
Expand All @@ -206,7 +206,7 @@ export function BriefScreen() {
</Button>
</span>
</div>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-[1px] bg-[color:var(--border)] border border-[color:var(--border)] rounded-lg overflow-hidden">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-px bg-[color:var(--border)] border border-[color:var(--border)] rounded-lg overflow-hidden">
<MetaCell eyebrow="GOAL" text={t.bestUsedFor || t.indications || "—"} />
<MetaCell eyebrow="FIRST STEP" text={steps[0] || summarise(durationText, 1) || "—"} />
<MetaCell
Expand All @@ -222,7 +222,7 @@ export function BriefScreen() {
</div>

<div className="grid grid-cols-1 sm:grid-cols-[1.6fr_1fr] gap-4 items-start">
<div className={cn(cardSurface, "py-5 px-[22px] min-w-0")}>
<div className={cn(cardSurface, "py-5 px-5.5 min-w-0")}>
<div className="text-base-minus font-semibold text-[color:var(--text-heading)] mb-4">
{durationLabel} delivery
</div>
Expand Down Expand Up @@ -271,7 +271,7 @@ export function BriefScreen() {
{t.clinicianScripts.slice(0, 2).map((c, i) => (
<div key={i} className="mb-3">
{c.scriptType ? (
<div className="text-xs font-semibold text-[color:var(--text-heading)] mb-[3px]">
<div className="text-xs font-semibold text-[color:var(--text-heading)] mb-0.5">
{c.scriptType}
</div>
) : null}
Expand All @@ -282,27 +282,24 @@ export function BriefScreen() {
) : null}
</div>

<div className={cn(cardSurface, "py-5 px-[22px]")}>
<div className={cn(cardSurface, "py-5 px-5.5")}>
<div className="text-base-minus font-semibold text-[color:var(--text-heading)] mb-3.5">
Before use
</div>
<div className="flex flex-col gap-[13px] mb-4">
<div className="flex flex-col gap-3.5 mb-4">
{CHECKLIST.map((item) => (
<span
key={item}
className="flex items-center gap-[11px] text-sm-minus text-[color:var(--text)]"
>
<span key={item} className="flex items-center gap-3 text-sm-minus text-[color:var(--text)]">
<span className="w-[19px] h-[19px] border-[1.5px] border-[color:var(--border-strong)] rounded-xs flex-none" />
{item}
</span>
))}
</div>
<div className="flex items-start gap-[9px] py-[13px] px-3.5 bg-[color:var(--warning-bg)] border border-[color:var(--warning-border)] rounded-lg">
<div className="flex items-start gap-2.5 py-3.5 px-3.5 bg-[color:var(--warning-bg)] border border-[color:var(--warning-border)] rounded-lg">
<TriangleAlert
aria-hidden="true"
size={17}
strokeWidth={1.8}
className="text-[color:var(--warning-text)] flex-none mt-[1px]"
className="text-[color:var(--warning-text)] flex-none mt-px"
/>
<span className="text-xs font-semibold leading-normal text-[color:var(--warning-text)]">
Clinical review is required before saving or sharing.
Expand Down
12 changes: 6 additions & 6 deletions src/components/therapy-compass/screens/compare-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export function CompareScreen() {
// which is not something `PageHeader` offers — and should not, since a
// count that grows cannot share a line with a title that wraps.
meta={
<span className="text-sm-minus font-semibold text-[color:var(--clinical-accent-hover)] bg-[color:var(--clinical-accent-soft)] py-[3px] px-2.5 rounded-md">
<span className="text-sm-minus font-semibold text-[color:var(--clinical-accent-hover)] bg-[color:var(--clinical-accent-soft)] py-0.5 px-2.5 rounded-md">
{items.length} of {THERAPY_MAX_COMPARE} selected
</span>
}
Expand Down Expand Up @@ -190,7 +190,7 @@ export function CompareScreen() {
<>
{/* decision summary */}
<div className={cn(cardSurface, "grid grid-cols-1 sm:grid-cols-[1.1fr_1fr_1fr] overflow-hidden mb-5")}>
<div className="py-5 px-[22px]">
<div className="py-5 px-5.5">
<div className="text-base-minus font-semibold text-[color:var(--text-heading)]">Decision summary</div>
</div>
<SummaryCell label="SHORTEST DELIVERY" value={shortestDelivery(items)?.name ?? "—"} accent />
Expand Down Expand Up @@ -240,15 +240,15 @@ export function CompareScreen() {
scope="col"
className="min-w-[160px] border-l border-[color:var(--border)] px-5 py-3.5 align-top"
>
<div className="flex items-center gap-[7px]">
<div className="flex items-center gap-2">
<Scale aria-hidden="true" className="size-icon-sm text-[color:var(--decoration-soft)]" />
<span className="text-sm-minus font-semibold text-[color:var(--text-heading)]">{t.name}</span>
</div>
<div
className={
t.reviewStatus === "reviewed"
? "mt-[3px] text-2xs font-semibold text-[color:var(--success-text)]"
: "mt-[3px] text-2xs font-semibold text-[color:var(--warning-text)]"
? "mt-0.5 text-2xs font-semibold text-[color:var(--success-text)]"
: "mt-0.5 text-2xs font-semibold text-[color:var(--warning-text)]"
}
>
{t.reviewStatus === "reviewed" ? "Reviewed" : "Needs review"}
Expand Down Expand Up @@ -389,7 +389,7 @@ function SummaryCell({
}) {
return (
<div
className={`border-l border-[color:var(--border)] px-[22px] py-5${accent ? " border-l-[3px] border-l-[color:var(--clinical-accent)]" : warn ? " bg-[color:var(--warning-bg)] text-[color:var(--warning-text)]" : ""}`}
className={`border-l border-[color:var(--border)] px-5.5 py-5${accent ? " border-l-[3px] border-l-[color:var(--clinical-accent)]" : warn ? " bg-[color:var(--warning-bg)] text-[color:var(--warning-text)]" : ""}`}
>
<div className="text-3xs font-bold tracking-eyebrow text-[color:var(--text-muted)] mb-1.5">{label}</div>
<div className="text-sm font-semibold text-[color:var(--text-heading)]">{value}</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/therapy-compass/screens/other-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function OtherScreen() {
return (
<section data-screen-label="Review Queue" className={pageContainer}>
<PageHeader
className="mb-[22px]"
className="mb-5.5"
title="Review Queue"
description="Records awaiting source and clinical review, lowest review-completeness first."
// A count, not a control: `meta` is the documented slot for status
Expand Down
Loading
Loading