refactor(tokens): migrate production letterspacing onto the named scale

scripts/design-system-contract-baseline.json

@@ -10,7 +10,7 @@
  "legacyPaletteUtilities": 2,
  "darkColorOverrides": 3,
  "legacyShadowAliases": 231,
- "arbitraryTracking": 68,
+ "arbitraryTracking": 0,
  "layoutTransitionExceptions": 12,
  "textSoftConsumers": 0
  },
@@ -148,48 +148,7 @@
  "src/components/ui/tooltip.tsx": 1,
  "src/components/ui-primitives.tsx": 6
  },
- "arbitraryTracking": {
- "src/app/reference/colour-coding/page.tsx": 1,
- "src/components/AccessibleTable.tsx": 2,
- "src/components/calculators/bedside-sheet.tsx": 1,
- "src/components/calculators/clinical-console.tsx": 1,
- "src/components/calculators/directory-grid.tsx": 3,
- "src/components/calculators/guided-flow.tsx": 4,
- "src/components/calculators/search-detail.tsx": 4,
- "src/components/calculators/search-page.tsx": 1,
- "src/components/clinical-dashboard/account-setup-dialog.tsx": 1,
- "src/components/clinical-dashboard/cross-mode-links.tsx": 1,
- "src/components/clinical-dashboard/differentials-home.tsx": 3,
- "src/components/clinical-dashboard/document-results.tsx": 1,
- "src/components/clinical-dashboard/document-search-results.tsx": 2,
- "src/components/clinical-dashboard/evidence-panels.tsx": 1,
- "src/components/clinical-dashboard/favourites-command-library-page.tsx": 1,
- "src/components/clinical-dashboard/library-health-strip.tsx": 1,
- "src/components/clinical-dashboard/medication-prescribing-workspace.tsx": 1,
- "src/components/clinical-dashboard/output-panel.tsx": 2,
- "src/components/clinical-dashboard/search-pins-menu.tsx": 1,
- "src/components/clinical-dashboard/settings-dialog.tsx": 1,
- "src/components/clinical-dashboard/universal-search-command-surface.tsx": 1,
- "src/components/ClinicalDashboard.tsx": 1,
- "src/components/differentials/differential-detail-page.tsx": 1,
- "src/components/differentials/differential-presentation-workflow-page.tsx": 1,
- "src/components/document-viewer/document-clinical-summary.tsx": 3,
- "src/components/document-viewer/document-overview-landing.tsx": 1,
- "src/components/document-viewer/section-nav.tsx": 2,
- "src/components/document-viewer/source-panels.tsx": 5,
- "src/components/dsm/dsm-comparison-page.tsx": 1,
- "src/components/factsheets/factsheet-detail-page.tsx": 6,
- "src/components/factsheets/factsheets-search-page.tsx": 2,
- "src/components/mode-nav/mode-nav.tsx": 1,
- "src/components/patient-safety-plan.tsx": 2,
- "src/components/pwa-lifecycle.tsx": 1,
- "src/components/services/services-navigator-page.tsx": 2,
- "src/components/specifiers/specifier-ui.tsx": 1,
- "src/components/therapy-compass/screens/recommend-screen.tsx": 1,
- "src/components/therapy-compass/screens/sheets-screen.tsx": 1,
- "src/components/therapy-compass/therapy-card.tsx": 1,
- "src/components/ui-primitives.tsx": 1
- },
+ "arbitraryTracking": {},
  "layoutTransitionExceptions": {
  "src/app/globals.css": 4,
  "src/components/calculators/guided-flow.tsx": 1,

src/app/reference/colour-coding/page.tsx

@@ -63,9 +63,7 @@ export default function ColourCodingReferencePage() {
  </header>
 
  <section className={cn(raisedCard, "p-4 sm:p-5")}>
- <h2 className="text-sm font-semibold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
- Tone key
- </h2>
+ <h2 className="text-sm font-semibold uppercase tracking-label text-[color:var(--text-muted)]">Tone key</h2>
  <dl className="mt-3 grid gap-3 sm:grid-cols-2">
  {SEMANTIC_TONES.map((tone) => (
  <div

src/components/AccessibleTable.tsx

@@ -233,7 +233,7 @@ function AccessibleTableMarkup({
  // column reads as one block rather than a split label/value pair.
  alignEnd?.[index] && "text-right",
  renderDensePreview
- ? "px-2 py-1.5 text-2xs uppercase tracking-[0.06em]"
+ ? "px-2 py-1.5 text-2xs uppercase tracking-label"
  : expanded
  ? "px-4 py-3 text-sm"
  : "px-3 py-2 text-xs",
@@ -252,7 +252,7 @@ function AccessibleTableMarkup({
  ? "overflow-hidden text-ellipsis whitespace-nowrap"
  : "whitespace-normal break-words",
  renderDensePreview
- ? "px-2 py-1.5 text-2xs uppercase tracking-[0.06em]"
+ ? "px-2 py-1.5 text-2xs uppercase tracking-label"
  : expanded
  ? "px-4 py-3 text-sm"
  : "px-3 py-2 text-xs",

src/components/ClinicalDashboard.tsx

@@ -3834,7 +3834,7 @@ export function ClinicalDashboard({
  )}
  {(settingsState.documentsDrawerOpen || settingsState.uploadDrawerOpen) && (
  <section id="sources" className="mx-auto grid w-full max-w-4xl gap-3 scroll-mt-4 sm:scroll-mt-6">
- <p className="px-1 pt-1 text-2xs font-bold uppercase tracking-[0.1em] text-[color:var(--text-muted)]">
+ <p className="px-1 pt-1 text-2xs font-bold uppercase tracking-kicker text-[color:var(--text-muted)]">
  {drawerGroupTitle}
  </p>
  {settingsState.documentsDrawerOpen ? (

src/components/calculators/bedside-sheet.tsx

@@ -67,7 +67,7 @@ function SheetSection({
  <span className="min-w-0">
  <span className="flex flex-wrap items-baseline gap-x-2">
  <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{calc.abbrev}</span>
- <span className="hidden text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)] sm:inline">
+ <span className="hidden text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)] sm:inline">
  {domainLabels[calc.domain]}
  </span>
  </span>

src/components/calculators/clinical-console.tsx

@@ -158,7 +158,7 @@ export function CalculatorsClinicalConsoleMockup() {
  const DomainIcon = domainIcons[domain];
  return (
  <section key={domain} className="grid gap-1">
- <h2 className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 px-3 text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+ <h2 className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 px-3 text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
  <DomainIcon className="size-icon-xs text-[color:var(--decoration-soft)]" aria-hidden="true" />
  {domainLabels[domain]}
  </h2>

src/components/calculators/directory-grid.tsx

@@ -48,7 +48,7 @@ function ExpandedCalculator({
  <aside className="grid h-fit content-start gap-3 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] p-4 shadow-[var(--shadow-inset)] lg:sticky lg:top-4">
  <div className="flex items-end justify-between gap-2">
  <div>
- <p className="text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+ <p className="text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
  Score
  </p>
  <p className="font-mono text-2xl font-extrabold tabular-nums leading-8 text-[color:var(--text-heading)]">
@@ -132,7 +132,7 @@ function CalculatorCard({
  <span className="min-w-0">
  <span className="flex flex-wrap items-center gap-2">
  <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{calc.abbrev}</span>
- <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+ <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
  {domainLabels[calc.domain]}
  </span>
  </span>
@@ -288,7 +288,7 @@ export function CalculatorsDirectoryGridMockup() {
  <span className="min-w-0">
  <span className="flex items-center gap-2">
  <span className="text-sm font-extrabold text-[color:var(--text-heading)]">{planned.abbrev}</span>
- <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+ <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
  Planned
  </span>
  </span>

src/components/calculators/guided-flow.tsx

@@ -48,7 +48,7 @@ function PickerScreen({ onPick }: { onPick: (id: string) => void }) {
  <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">
  {calc.abbrev}
  </span>
- <span className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+ <span className="text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
  {domainLabels[calc.domain]}
  </span>
  </span>
@@ -137,7 +137,7 @@ function QuestionScreen({
 
  <div className="grid gap-4 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4 shadow-[var(--shadow-soft)] sm:p-5">
  {calc.stem ? (
- <p className="text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+ <p className="text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
  {calc.stem}
  </p>
  ) : null}
@@ -251,7 +251,7 @@ function ResultScreen({
  return (
  <div className="mx-auto grid w-full max-w-lg content-start gap-4">
  <div className="grid gap-4 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] p-5 text-center shadow-[var(--shadow-soft)]">
- <p className="text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+ <p className="text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
  {calc.abbrev} result
  </p>
  <p className="font-mono text-3xl-minus font-extrabold tabular-nums leading-9 text-[color:var(--text-heading)]">
@@ -272,7 +272,7 @@ function ResultScreen({
  <BandLegend calc={calc} activeBand={derived.band} />
  </div>
  <div className="grid gap-1.5 border-t border-[color:var(--border)] pt-3 text-left">
- <p className="text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+ <p className="text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
  Answer review
  </p>
  <ul className="grid gap-1">

src/components/calculators/search-detail.tsx

@@ -113,7 +113,7 @@ function CalculatorResultCard({
  <span className="min-w-0">
  <span className="flex flex-wrap items-center gap-2">
  <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{calc.abbrev}</span>
- <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+ <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
  {domainLabels[calc.domain]}
  </span>
  </span>
@@ -382,7 +382,7 @@ export function NextActionsPanel({ calc, derived }: { calc: CalculatorFixture; d
  >
  <div className="flex items-center justify-between gap-2">
  <h2 className={cn(eyebrowText, "text-[color:var(--text-muted)]")}>Next clinical actions</h2>
- <span className="inline-flex min-h-5 items-center gap-1 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--clinical-accent)]">
+ <span className="inline-flex min-h-5 items-center gap-1 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--clinical-accent)]">
  <Sparkles className="size-icon-xs" aria-hidden="true" />
  Score-linked
  </span>
@@ -460,7 +460,7 @@ export function RelatedContentPanel({
  <>
  <span
  className={cn(
- "inline-flex min-h-5 w-[4.75rem] items-center justify-center rounded-md border px-1.5 text-3xs font-bold uppercase tracking-[0.05em]",
+ "inline-flex min-h-5 w-[4.75rem] items-center justify-center rounded-md border px-1.5 text-3xs font-bold uppercase tracking-label",
  relatedKindChip[item.kind],
  )}
  >
@@ -567,7 +567,7 @@ export function CalculatorDetailHeader({ calc }: { calc: CalculatorFixture }) {
  <div className="min-w-0">
  <div className="flex flex-wrap items-center gap-2">
  <h1 className="text-2xl-minus font-extrabold leading-7 text-[color:var(--text-heading)]">{calc.abbrev}</h1>
- <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+ <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
  {domainLabels[calc.domain]}
  </span>
  </div>

src/components/calculators/search-page.tsx

@@ -214,7 +214,7 @@ function CalculatorTile({
  <span className="min-w-0">
  <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
  <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{calc.abbrev}</span>
- <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+ <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
  {domainLabels[calc.domain]}
  </span>
  {derived.started ? (

src/components/clinical-dashboard/account-setup-dialog.tsx

@@ -202,7 +202,7 @@ export function AccountSetupDialog({
  >
  <h3
  id="account-benefits-title"
- className="mb-2.5 px-0.5 text-xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]"
+ className="mb-2.5 px-0.5 text-xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]"
  >
  {benefitsHeading}
  </h3>

src/components/clinical-dashboard/cross-mode-links.tsx

@@ -100,7 +100,7 @@ function CrossModeLinkChip({ link, Icon, query, onModeSearch }: CrossModeLinkCar
  <span className="max-w-[13rem] truncate text-xs font-semibold text-[color:var(--text-heading)]">
  {link.title}
  </span>
- <span className="shrink-0 text-2xs font-semibold uppercase tracking-[0.04em] text-[color:var(--text-muted)]">
+ <span className="shrink-0 text-2xs font-semibold uppercase tracking-label text-[color:var(--text-muted)]">
  {link.modeLabel}
  </span>
  </Link>

src/components/clinical-dashboard/differentials-home.tsx

@@ -614,9 +614,7 @@ function SafetyCard({ safety, query }: { safety: string; query: string }) {
  <ShieldAlert className="h-4 w-4" aria-hidden />
  </span>
  <div className="min-w-0">
- <h2 className="text-sm font-extrabold uppercase tracking-[0.05em] text-[color:var(--danger)]">
- Safety first
- </h2>
+ <h2 className="text-sm font-extrabold uppercase tracking-label text-[color:var(--danger)]">Safety first</h2>
  <p className="mt-2 text-sm font-semibold leading-6 text-[color:var(--text-heading)]">{safety}</p>
  <Link
  href={differentialRouteWithQuery("/differentials/presentations", query)}
@@ -771,7 +769,7 @@ function InterpretationRail({
 
  return (
  <aside className="hidden min-w-0 gap-3 lg:grid" aria-label="Differential interpretation">
- <h2 className="flex items-center gap-2 text-sm font-extrabold uppercase tracking-[0.1em] text-[color:var(--text-muted)]">
+ <h2 className="flex items-center gap-2 text-sm font-extrabold uppercase tracking-kicker text-[color:var(--text-muted)]">
  Interpretation
  <Info className="h-4 w-4" aria-hidden />
  </h2>
@@ -1062,7 +1060,7 @@ function SearchResultsView({
  : "Run source search to validate against indexed local documents."}
  </span>
  </div>
- <h2 className="mt-3 text-base font-extrabold uppercase tracking-[0.09em] text-[color:var(--text-heading)]">
+ <h2 className="mt-3 text-base font-extrabold uppercase tracking-eyebrow text-[color:var(--text-heading)]">
  Catalogue matches <span className="text-[color:var(--text-muted)]">(ranked)</span>
  </h2>
  </div>

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

@@ -56,7 +56,7 @@ function RelatedDocumentCard({
  <div className="flex items-start gap-2.5">
  <DocumentFileTile kind={documentFileKind(document.file_name)} compact />
  <div className="min-w-0 flex-1">
- <p className={cn("truncate text-2xs font-bold uppercase tracking-[0.06em]", textMuted)}>
+ <p className={cn("truncate text-2xs font-bold uppercase tracking-label", textMuted)}>
  {document.match_reason}
  </p>
  <Link

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

@@ -1206,7 +1206,7 @@ function SearchRecordResults({
  >
  <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
  <div className="min-w-0">
- <p className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+ <p className="text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
  {service.catalogueLabel ?? "Source-backed record"}
  </p>
  <Link
@@ -1249,7 +1249,7 @@ function SearchRecordResults({
  key={card.id}
  className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-2.5"
  >
- <dt className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+ <dt className="text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
  {card.label ?? card.id}
  </dt>
  <dd className="mt-1 text-sm font-semibold leading-5 text-[color:var(--text-heading)]">

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

@@ -874,7 +874,7 @@ export function ClinicalNotesChecklistPanel({
  >
  <CircleAlert aria-hidden="true" className="h-5 w-5" />
  <span className="min-w-0">
- <span className="block text-xs font-bold uppercase tracking-[0.06em]">Safety preview ({warningCount})</span>
+ <span className="block text-xs font-bold uppercase tracking-label">Safety preview ({warningCount})</span>
  <span className="block truncate text-xs font-semibold">Review toxicity symptoms</span>
  </span>
  <span className={cn(subtleStatusPill, "nums min-h-7 px-2 text-xs")}>S1</span>