From 7d95606901e68705cd250e32b348378d7ac59754 Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Fri, 31 Jul 2026 22:03:08 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(design-system):=20critique=20fixes=20?= =?UTF-8?q?=E2=80=94=20fallback=20literals,=20test=20precision,=20HCM=20ba?= =?UTF-8?q?ckdrop,=20allowlist?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Strip literal var() fallback values from the v2 components (20 sites, 5 files) - the last value-restatement channel. The one surviving fallback is role-to-role (var(--e2, var(--shadow-soft))), which restates no value. - Contract test parses the structural and light .ckb-v2 blocks separately, so a token declared in the wrong block now fails instead of passing merged. - Forced-colours --overlay-backdrop is transparent, not opaque Canvas - HCM users rely on borders for layer separation. - Remove the six docs-link allowlist entries whose files landed with #1538, per their own remove-after-merge note. Verified: vitest 5 files -> 70 passed (70); docs:check-links 1517 resolve. Co-Authored-By: Claude Fable 5 --- scripts/check-docs-links.mjs | 9 --------- src/app/ckb-v2-tokens.css | 4 +++- src/components/AccessibleTable.tsx | 2 +- src/components/ui/answer-card.tsx | 28 ++++++++++++---------------- src/components/ui/disclosure.tsx | 2 +- src/components/ui/progress.tsx | 6 +++--- src/components/ui/quantity.tsx | 8 ++++---- tests/ckb-v2-token-contract.test.ts | 18 +++++++++++------- 8 files changed, 35 insertions(+), 42 deletions(-) diff --git a/scripts/check-docs-links.mjs b/scripts/check-docs-links.mjs index c0ea395bf6..23bd96468e 100644 --- a/scripts/check-docs-links.mjs +++ b/scripts/check-docs-links.mjs @@ -53,15 +53,6 @@ const ALLOWLIST = new Set([ "src/app/(search-app)/tools/page.tsx", "src/lib/tools.ts", "src/components/ServiceDetailPage.tsx", - // Design-system branch (claude/clinical-kb-design-system-333a69 @ ef13a072a) paths - // cited by docs/design-system/*.md; the files land when that branch merges — - // remove these entries afterwards so the checker guards them again: - "src/app/ckb-v2-tokens.css", - "tests/ckb-v2-token-contract.test.ts", - "tests/source-badges-off-vocab.dom.test.tsx", - "tests/source-metadata-browser-safety.test.ts", - "tests/accessible-table-alignment.dom.test.tsx", - "tests/ui-v2-components.dom.test.tsx", ]); const DATED_DOC = /\b20\d{2}-\d{2}(-\d{2})?\b/; diff --git a/src/app/ckb-v2-tokens.css b/src/app/ckb-v2-tokens.css index 8e834a3141..ab99c92772 100644 --- a/src/app/ckb-v2-tokens.css +++ b/src/app/ckb-v2-tokens.css @@ -323,7 +323,9 @@ --shadow-well: none; --glow-primary: none; --glow-soft: none; - --overlay-backdrop: Canvas; + /* Transparent, not Canvas: forced-colours users rely on borders for layer + separation, and an opaque backdrop would hide the context behind a modal. */ + --overlay-backdrop: transparent; --rule-accent: inset var(--rule-w) 0 0 LinkText; --rule-warning: inset var(--rule-w) 0 0 CanvasText; --spine-current: LinkText; diff --git a/src/components/AccessibleTable.tsx b/src/components/AccessibleTable.tsx index c7818e9291..7664130c67 100644 --- a/src/components/AccessibleTable.tsx +++ b/src/components/AccessibleTable.tsx @@ -345,7 +345,7 @@ function UnverifiedExtractionNotice({ showingFallback }: { showingFallback: bool role="status" className={cn( "mb-2 flex items-start gap-2 rounded-md border border-[color:var(--warning-border)] bg-[color:var(--warning-soft)]", - "px-3 py-2 text-xs text-[color:var(--warning-text)] shadow-[var(--rule-warning,inset_3px_0_0_var(--warning))]", + "px-3 py-2 text-xs text-[color:var(--warning-text)] shadow-[var(--rule-warning)]", )} > diff --git a/src/components/ui/answer-card.tsx b/src/components/ui/answer-card.tsx index 6328a97bce..67f87464b7 100644 --- a/src/components/ui/answer-card.tsx +++ b/src/components/ui/answer-card.tsx @@ -28,21 +28,19 @@ export function AnswerCard({ children, header, footer, className }: AnswerCardPr
{header ? ( -
- {header} -
+
{header}
) : null}
{children} @@ -93,12 +91,12 @@ export function DoseLine({ rows, caption, className }: DoseLineProps) { return (
{caption ? ( -

+

{caption}

) : null} @@ -112,11 +110,9 @@ export function DoseLine({ rows, caption, className }: DoseLineProps) { // width; the left padding compensates for it explicitly rather than // letting the rule eat the card inset. className={cn( - "flex items-baseline justify-between gap-4 py-3 pr-[var(--pad-card,1.25rem)]", - "pl-[calc(var(--pad-card,1.25rem)_+_var(--rule-w,3px))]", - row.overdue - ? "shadow-[var(--rule-warning,inset_3px_0_0_var(--warning))]" - : "shadow-[var(--rule-accent,inset_3px_0_0_var(--clinical-accent))]", + "flex items-baseline justify-between gap-4 py-3 pr-[var(--pad-card)]", + "pl-[calc(var(--pad-card)_+_var(--rule-w)]", + row.overdue ? "shadow-[var(--rule-warning)]" : "shadow-[var(--rule-accent)]", )} > @@ -126,11 +122,11 @@ export function DoseLine({ rows, caption, className }: DoseLineProps) { ) : null} - + {row.value} {row.unit ? ( - + {row.unit} ) : null} @@ -173,7 +169,7 @@ export function AnswerFooter({ publisher, version, reviewDate, generatedAt, clas data-testid="answer-footer" className={cn( "flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-[color:var(--border)] bg-[color:var(--surface-wash)]", - "px-[var(--pad-panel,1.5rem)] py-[var(--gap-inline,0.75rem)] text-xs tabular-nums text-[color:var(--text-muted)]", + "px-[var(--pad-panel)] py-[var(--gap-inline)] text-xs tabular-nums text-[color:var(--text-muted)]", className, )} > diff --git a/src/components/ui/disclosure.tsx b/src/components/ui/disclosure.tsx index f1b07ccfa2..7cc5c80e0e 100644 --- a/src/components/ui/disclosure.tsx +++ b/src/components/ui/disclosure.tsx @@ -75,7 +75,7 @@ export function Disclosure({