refactor(design-system): burn down raw-color and legacy-tap contract debt (DSD-02/03)

scripts/design-system-contract-baseline.json

@@ -1,5 +1,5 @@
 {
-  "rawColorLiterals": 9,
+  "rawColorLiterals": 2,
   "literalShadowClasses": 1,
-  "legacyTapClasses": 28
+  "legacyTapClasses": 0
 }

scripts/design-system-contract-utils.mjs

@@ -24,6 +24,14 @@ export const RAW_COLOR_EXEMPTIONS = [
     pattern: /^src\/(?:app\/global-error|components\/route-error-boundary)\.tsx$/,
     scope: "whole-file",
   },
+  {
+    // Pre-paint / meta theme-color values: consumed as raw colours by the inline
+    // pre-hydration theme script and the browser theme-color meta tag, before any
+    // CSS (and therefore any token) is available, so they cannot be tokenised.
+    category: "pre-paint theme color",
+    pattern: /^src\/lib\/theme\.ts$/,
+    scope: "whole-file",
+  },
   {
     category: "printable Therapy paper",
     pattern: /^src\/components\/therapy-compass\/therapy-compass\.css$/,

src/components/applications-launcher-page.tsx

@@ -242,7 +242,7 @@ function ToolSearch({
         className,
       )}
     >
-      <span className="grid h-11 w-11 place-items-center rounded-full text-[color:var(--clinical-accent)]">
+      <span className="grid h-tap w-tap place-items-center rounded-full text-[color:var(--clinical-accent)]">
         <Plus className="size-icon-lg" aria-hidden />
       </span>
       <label className="min-w-0">

src/components/clinical-dashboard/answer-content.tsx

@@ -509,7 +509,7 @@ function SourcePreviewContent({
           </button>
         ) : null}
       </div>
-      <div className="mt-3 flex min-h-11 flex-wrap items-center justify-between gap-2 border-t border-[color:var(--border)] pt-2 text-xs font-semibold">
+      <div className="mt-3 flex min-h-tap flex-wrap items-center justify-between gap-2 border-t border-[color:var(--border)] pt-2 text-xs font-semibold">
         <span
           className={cn(
             "inline-flex min-h-8 items-center gap-1.5",

src/components/clinical-dashboard/answer-status.tsx

@@ -130,12 +130,12 @@ export function AnswerSkeleton() {
             <div className="h-3 w-24 animate-skeleton-shimmer rounded bg-[color:var(--surface-inset)]" />
             <div className="h-4 w-48 max-w-full animate-skeleton-shimmer rounded bg-[color:var(--surface-inset)]" />
           </div>
-          <div className="h-11 w-20 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
+          <div className="h-tap w-20 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
         </div>
       </div>
       <div className="flex flex-wrap gap-2">
-        <div className="h-11 w-48 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
-        <div className="h-11 w-40 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
+        <div className="h-tap w-48 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
+        <div className="h-tap w-40 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
       </div>
       <div className="grid gap-3 sm:grid-cols-2">
         <div className="h-28 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />

src/components/clinical-dashboard/auth-panel.tsx

@@ -147,7 +147,7 @@ export function AuthPanel() {
     >
       <div className="border-b border-[color:var(--border)]/70 p-4 sm:p-5">
         <div className="flex items-center gap-3">
-          <span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[color:var(--surface-inset)] text-[color:var(--text-muted)] ring-1 ring-[color:var(--border)]">
+          <span className="grid h-tap w-tap shrink-0 place-items-center rounded-full bg-[color:var(--surface-inset)] text-[color:var(--text-muted)] ring-1 ring-[color:var(--border)]">
             <UserRound aria-hidden="true" className="h-5 w-5" />
           </span>
           <div className="min-w-0">

src/components/clinical-dashboard/document-search-results.tsx

@@ -386,7 +386,7 @@ function SearchResultsHeader({
     <section className="flex items-start justify-between gap-3" aria-label="Document search results">
       <div className="min-w-0">
         <div className="flex items-center gap-3">
-          <span className="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]">
+          <span className="grid h-tap w-tap shrink-0 place-items-center rounded-lg bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]">
             <FileText aria-hidden="true" className="h-5 w-5" />
           </span>
           <div className="min-w-0">
@@ -971,7 +971,7 @@ function DocumentSearchResultsPanelImpl({
       ) : matches.length === 0 ? (
         recordMatchCount > 0 ? null : trimmedQuery && !shouldShowHome ? (
           <div className={cn(panelSubtle, "grid gap-3 p-5 text-center sm:p-6")}>
-            <span className="mx-auto grid h-11 w-11 place-items-center rounded-lg bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
+            <span className="mx-auto grid h-tap w-tap place-items-center rounded-lg bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
               <FileText aria-hidden="true" className="h-5 w-5" />
             </span>
             <div>

src/components/clinical-dashboard/evidence-panels.tsx

@@ -830,7 +830,7 @@ export function ClinicalNotesChecklistPanel({
               Source
             </Link>
           ) : (
-            <span className="inline-flex min-h-11 items-center justify-center gap-1.5 px-2 text-2xs font-semibold text-[color:var(--text-soft)]">
+            <span className="inline-flex min-h-tap items-center justify-center gap-1.5 px-2 text-2xs font-semibold text-[color:var(--text-soft)]">
               <ExternalLink aria-hidden="true" className="h-3.5 w-3.5" />
               Source
             </span>

src/components/clinical-dashboard/provider-brand-icons.tsx

@@ -89,3 +89,37 @@ export function ProviderBrandIcon({ provider, className }: { provider: SsoProvid
   if (provider === "Google") return <GoogleBrandIcon className={className} />;
   return <MicrosoftBrandIcon className={className} />;
 }
+
+/**
+ * Compact provider mark used in the settings sign-in list: Microsoft's four-colour
+ * grid and a lettered tile for Apple/Google. Distinct from {@link ProviderBrandIcon}
+ * (the full vendor logos); it lives here so its fixed brand colours sit with the
+ * other brand artwork. Decorative — the button always carries a visible label.
+ */
+export function ProviderBrandMark({ provider }: { provider: SsoProvider }) {
+  if (provider === "Microsoft") {
+    return (
+      <span
+        className="grid h-7 w-7 shrink-0 grid-cols-2 gap-0.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-1 shadow-[var(--shadow-inset)]"
+        aria-hidden="true"
+      >
+        <span className="bg-[#f25022]" />
+        <span className="bg-[#7fba00]" />
+        <span className="bg-[#00a4ef]" />
+        <span className="bg-[#ffb900]" />
+      </span>
+    );
+  }
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "grid h-7 w-7 shrink-0 place-items-center rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] text-base font-bold leading-none shadow-[var(--shadow-inset)]",
+        provider === "Apple" ? "text-[color:var(--text-heading)]" : "text-[#4285f4]",
+      )}
+    >
+      {provider === "Apple" ? "A" : "G"}
+    </span>
+  );
+}

src/components/clinical-dashboard/search-results-header-band.tsx

@@ -191,7 +191,7 @@ export function SearchResultsEmptyState({
 
   return (
     <div className="rounded-lg border border-dashed border-[color:var(--border-strong)] bg-[color:var(--surface-inset)] p-5 text-center shadow-[var(--shadow-inset)]">
-      <span className="mx-auto grid h-11 w-11 place-items-center rounded-full bg-[color:var(--surface)] text-[color:var(--text-muted)]">
+      <span className="mx-auto grid h-tap w-tap place-items-center rounded-full bg-[color:var(--surface)] text-[color:var(--text-muted)]">
         <Search className="h-5 w-5" aria-hidden />
       </span>
       <p className="mt-3 text-sm font-extrabold text-[color:var(--text-heading)]">

src/components/clinical-dashboard/settings-dialog.tsx

@@ -53,6 +53,7 @@ import {
   primaryControl,
   toggleThumbSurface,
 } from "@/components/ui-primitives";
+import { ProviderBrandMark } from "@/components/clinical-dashboard/provider-brand-icons";
 import { Sheet } from "@/components/ui/sheet";
 import { useAuthSession } from "@/lib/supabase/client";
 import type { ThemePreference } from "@/lib/theme";
@@ -1160,42 +1161,14 @@ function SettingsProviderRow({
           <Mail aria-hidden="true" className="h-4 w-4" />
         </span>
       ) : (
-        <SettingsProviderMark provider={provider} />
+        <ProviderBrandMark provider={provider} />
       )}
       <span className="min-w-0 flex-1 truncate">{label}</span>
       <ChevronRight aria-hidden="true" className="h-4 w-4 shrink-0 text-[color:var(--text-soft)]" />
     </button>
   );
 }
 
-function SettingsProviderMark({ provider }: { provider: "Apple" | "Google" | "Microsoft" }) {
-  if (provider === "Microsoft") {
-    return (
-      <span
-        className="grid h-7 w-7 shrink-0 grid-cols-2 gap-0.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-1 shadow-[var(--shadow-inset)]"
-        aria-hidden="true"
-      >
-        <span className="bg-[#f25022]" />
-        <span className="bg-[#7fba00]" />
-        <span className="bg-[#00a4ef]" />
-        <span className="bg-[#ffb900]" />
-      </span>
-    );
-  }
-
-  return (
-    <span
-      aria-hidden="true"
-      className={cn(
-        "grid h-7 w-7 shrink-0 place-items-center rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] text-base font-bold leading-none shadow-[var(--shadow-inset)]",
-        provider === "Apple" ? "text-[color:var(--text-heading)]" : "text-[#4285f4]",
-      )}
-    >
-      {provider === "Apple" ? "A" : "G"}
-    </span>
-  );
-}
-
 function SettingsClinicalContextStrip({ jurisdictionShort }: { jurisdictionShort: string }) {
   return (
     <div className="mt-2.5 flex min-h-8 items-center gap-2 rounded-full border border-[color:var(--clinical-accent)]/14 bg-[color:var(--clinical-accent-soft)]/60 px-3 text-xs font-semibold leading-none text-[color:var(--clinical-accent)] lg:hidden">

src/components/differentials/differential-detail-page.tsx

@@ -170,7 +170,7 @@ function SectionItems({
                   <ChevronRight className="h-3.5 w-3.5" aria-hidden />
                 </Link>
               ) : (
-                <span className="inline-flex min-h-11 items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-2.5 text-xs font-semibold text-[color:var(--text-muted)]">
+                <span className="inline-flex min-h-tap items-center rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-2.5 text-xs font-semibold text-[color:var(--text-muted)]">
                   {item}
                 </span>
               )}

src/components/document-viewer/pdf-canvas-viewer.tsx

@@ -425,7 +425,7 @@ export const PdfCanvasViewer = memo(function PdfCanvasViewer({
             </span>
           </label>
         ) : (
-          <div className="flex min-h-11 min-w-0 flex-1 items-center justify-center gap-2 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-glass)] px-2 text-xs font-semibold text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] backdrop-blur-md sm:flex-none sm:px-3">
+          <div className="flex min-h-tap min-w-0 flex-1 items-center justify-center gap-2 rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-glass)] px-2 text-xs font-semibold text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] backdrop-blur-md sm:flex-none sm:px-3">
             <Loader2 aria-hidden="true" className="h-4 w-4 animate-spin text-[color:var(--clinical-accent)]" />
             <span className="hidden sm:inline">{error ? "Page unavailable" : "Loading pages"}</span>
             <span className="sm:hidden">{error ? "Unavailable" : "Loading"}</span>

src/components/dsm/dsm-page-header.tsx

@@ -37,7 +37,7 @@ export function DsmPageHeader({
               {eyebrow}
             </p>
             <div className="mt-1.5 flex min-w-0 items-start gap-3">
-              <span className="mt-0.5 hidden h-11 w-11 shrink-0 place-items-center rounded-xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] sm:grid">
+              <span className="mt-0.5 hidden h-tap w-tap shrink-0 place-items-center rounded-xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] sm:grid">
                 <BookOpenCheck className="h-5 w-5" aria-hidden />
               </span>
               <div className="min-w-0">

src/components/forms/form-detail-page.tsx

@@ -458,7 +458,7 @@ function ActionPanel({
             Open official source
           </a>
         ) : (
-          <span className={cn(floatingControl, "min-h-11 w-full px-3 opacity-70")}>Source unavailable</span>
+          <span className={cn(floatingControl, "min-h-tap w-full px-3 opacity-70")}>Source unavailable</span>
         )}
         <button type="button" onClick={onCopy} className={cn(floatingControl, "min-h-tap w-full px-3")}>
           <Download className="h-4 w-4" aria-hidden />
@@ -567,7 +567,7 @@ export function FormDetailPage({ form }: { form: FormRecord }) {
             role="status"
             aria-live="polite"
             className={cn(
-              "mb-3 flex min-h-11 items-center justify-between gap-3 rounded-lg border p-3 text-sm font-semibold shadow-[var(--shadow-inset)]",
+              "mb-3 flex min-h-tap items-center justify-between gap-3 rounded-lg border p-3 text-sm font-semibold shadow-[var(--shadow-inset)]",
               notice.includes("failed") || notice.includes("Nothing") ? toneWarning : toneSuccess,
             )}
           >

src/components/mode-home-page-skeleton.tsx

@@ -14,7 +14,7 @@ export function ModeHomePageSkeleton() {
       role="status"
       aria-label="Loading"
     >
-      <SkeletonBlock className="h-11 w-11 rounded-2xl sm:h-12 sm:w-12 lg:h-14 lg:w-14" />
+      <SkeletonBlock className="h-tap w-tap rounded-2xl sm:h-12 sm:w-12 lg:h-14 lg:w-14" />
       <div className="grid w-full justify-items-center gap-2">
         <SkeletonBlock className="h-7 w-2/3 max-w-sm sm:h-9 lg:h-10" />
         <SkeletonBlock className="h-5 w-1/2 max-w-xs" />

src/components/mode-home-template.tsx

@@ -76,7 +76,7 @@ export function ModeHomeHero({
       className="grid justify-items-center gap-1.5 px-4 sm:gap-3 sm:px-0"
       aria-labelledby={`${testId ?? "mode-home"}-title`}
     >
-      <span className="mode-home-icon grid h-11 w-11 place-items-center rounded-2xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] sm:h-12 sm:w-12 lg:h-14 lg:w-14 lg:rounded-[1.15rem]">
+      <span className="mode-home-icon grid h-tap w-tap place-items-center rounded-2xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] sm:h-12 sm:w-12 lg:h-14 lg:w-14 lg:rounded-[1.15rem]">
         <Icon className="h-5 w-5 sm:h-6 sm:w-6 lg:h-7 lg:w-7" aria-hidden="true" />
       </span>
       <div className="grid gap-1 sm:gap-1.5">
@@ -267,7 +267,7 @@ export function ModeHomeTemplate({
             const ActionIcon = action.icon;
             const content = (
               <>
-                <span className="grid h-10 w-10 place-items-center rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] sm:h-11 sm:w-11 sm:rounded-xl">
+                <span className="grid h-10 w-10 place-items-center rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)] sm:h-tap sm:w-tap sm:rounded-xl">
                   <ActionIcon className="h-5 w-5 sm:h-6 sm:w-6" aria-hidden="true" />
                 </span>
                 <span className="min-w-0">

src/components/services/service-detail-page.tsx

@@ -516,7 +516,7 @@ export function ServiceDetailPage({ service }: { service: ServiceRecord }) {
             role="status"
             aria-live="polite"
             className={cn(
-              "mb-3 flex min-h-11 items-center justify-between gap-3 rounded-lg border p-3 text-sm font-semibold shadow-[var(--shadow-inset)]",
+              "mb-3 flex min-h-tap items-center justify-between gap-3 rounded-lg border p-3 text-sm font-semibold shadow-[var(--shadow-inset)]",
               notice.includes("failed") || notice.includes("Nothing") ? toneWarning : toneSuccess,
             )}
           >