From 790d2c0c0aa3ce30ffd114b7d25527d431fedbec Mon Sep 17 00:00:00 2001
From: David Gracia <david.gracia@code-sherpas.rocks>
Date: Fri, 10 Jul 2026 23:47:34 -0600
Subject: [PATCH] chore(storybook): apply DS base typography to the story
 canvas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deliberate, standalone re-baseline (the follow-up flagged when Checkbox's
first raw-text story exposed this). Storybook rendered inherited text in
its own default font because nothing set a base on the canvas; Pharos
components set their own font, but raw markup and font-inheriting elements
fell back to Storybook's default — so Chromatic snapshotted them in the
wrong typeface.

- Add a `#storybook-root` rule in preview.css: DS base type (font-family
  sans + 14/20 + neutral-900), scoped to the canvas so docs
  (#storybook-docs) are untouched. Mirrors a real consumer that sets the
  DS type as its base (per D8/D9 the consumer provides typography).
- Drop the now-redundant per-story decorator from Checkbox.stories.

Consequence: ~50 Chromatic snapshots re-baseline (typography/color of
inherited text only — no behaviour change). REQUIRES reviewing the diffs
and accepting them knowingly.

Storybook-only (never bundled, D9). No changeset. typecheck +
test:storybook a11y (99) + build-storybook green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AgnovjGivnndpV7Yzt6AmY
---
 .storybook/preview.css              | 21 +++++++++++++++++++++
 src/components/Checkbox.stories.tsx | 18 +++---------------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/.storybook/preview.css b/.storybook/preview.css
index 35d6aba..ff9c78b 100644
--- a/.storybook/preview.css
+++ b/.storybook/preview.css
@@ -3,6 +3,27 @@
  * into the published library. The published library is pure CSS Modules
  * with hashed class names — see Decision D9. */
 
+/* Design-system base typography for the story canvas.
+ *
+ * Pharos components set their own `font-family`, but raw markup in a story
+ * (a bare `<label>`, prose) and any element that only inherits font fell back
+ * to Storybook's DEFAULT base — so Chromatic snapshotted that text in the
+ * wrong typeface. Per the DS contract (D8/D9) the *consumer* provides the base
+ * typography; this makes the canvas render like a real consumer whose app sets
+ * the DS type (e.g. examples/saas-demo). Scoped to `#storybook-root` (canvas)
+ * so docs pages (`#storybook-docs`) keep their own typography.
+ *
+ * DELIBERATE re-baseline: this shifts the inherited text (and its color) of
+ * every component snapshot to the DS type — ~50 Chromatic changes to accept
+ * knowingly (typography/color only, no behaviour). The webfonts load in
+ * preview.ts. */
+#storybook-root {
+  font-family: var(--pharos-font-family-sans);
+  font-size: var(--pharos-font-size-sm);
+  line-height: 1.43;
+  color: var(--pharos-color-neutral-900);
+}
+
 .storybook-matrix {
   display: grid;
   grid-template-columns: auto repeat(3, auto);
diff --git a/src/components/Checkbox.stories.tsx b/src/components/Checkbox.stories.tsx
index 762865c..5397429 100644
--- a/src/components/Checkbox.stories.tsx
+++ b/src/components/Checkbox.stories.tsx
@@ -11,21 +11,9 @@ import { Checkbox } from './Checkbox';
 const meta: Meta<typeof Checkbox> = {
   title: 'Components/Checkbox',
   component: Checkbox,
-  // Give the stories the DS base typography so the raw <label> text renders in
-  // Outfit — a real consumer's app sets this as its base. Scoped to this meta
-  // (not the global story root) so it never re-bases other components' stories.
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          fontFamily: 'var(--pharos-font-family-sans)',
-          fontSize: 'var(--pharos-font-size-sm)',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
+  // The raw <label> text now inherits the DS base typography from the story
+  // canvas (#storybook-root, set in preview.css) — no per-story decorator
+  // needed.
 };
 
 export default meta;