@bsuite/theme 0.8.0 → 0.10.0

package/dist/react/components/StatusBadge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Role-bound, not palette-bound. Until 0.7.0 these were raw Tailwind palette
- * classes (`bg-emerald-50`, `bg-red-50`, …), which meant the design-system
+ * theme-audit-ok: prose. classes (`bg-emerald-50`, `bg-red-50`, …), which meant the design-system
  * component every app imports was invisible to tenant white-labelling —
  * BrandingProvider mutates the role layer, and these bound below it.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/theme",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "type": "module",
   "license": "UNLICENSED",
   "publishConfig": {

package/src/css/braden.css

@@ -281,3 +281,17 @@
   --dot-color:           oklch(0.72 0.060 90 / 0.16);
   --grid-color:          oklch(0.82 0.020 250 / 0.055);
 }
+
+/* ============================================================
+   BASE — the heading ramp, APPLIED. The tokens existed and nothing bound
+   them to an actual h1..h6, so every level rendered as flat body colour.
+   Contract values, verbatim.
+   ============================================================ */
+@layer base {
+  h1 { font-family: var(--font-display); color: var(--role-h1); font-size: 25px; font-weight: 600; letter-spacing: var(--track-display); }
+  h2 { font-family: var(--font-heading); color: var(--role-h2); font-size: 19px; font-weight: 700; }
+  h3 { font-family: var(--font-heading); color: var(--role-h3); font-size: 16px; font-weight: 700; }
+  h4 { font-family: var(--font-heading); color: var(--role-h4); font-size: 14px; font-weight: 700; }
+  h5 { font-family: var(--font-heading); color: var(--role-h5); font-size: 13px; font-weight: 700; }
+  h6 { font-family: var(--font-heading); color: var(--role-h6); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
+}

package/src/css/vars.css

@@ -127,6 +127,19 @@
   --role-success:     var(--neon-electric-teal);    /* was green — 0.043 from red */
   --role-info:        var(--neon-electric-cyan);    /* oklch(0.769 0.132 191.7) */
 
+  /* ═══ TYPE ═══ Lifted from the D2C contract, which specified a font
+     stack this package never shipped. Apps were left to pick their own, so
+     the estate ran system-ui, Inter and JetBrains Mono simultaneously while
+     the contract asked for one family. Same shape of gap as the heading
+     ramp: written down, never implemented. */
+  --font-display:  'Geist Variable', Geist, system-ui, sans-serif;
+  --font-body:     'Geist Variable', Geist, system-ui, sans-serif;
+  --font-mono:     'Geist Mono Variable', 'Geist Mono', ui-monospace, monospace;
+  --track-display: -0.028em;
+  --track-heading: -0.018em;
+  --track-body:    0em;
+  --track-eyebrow: 0.09em;
+
   /* ═══ INFORMATIONAL SCALE — categorical, NOT semantic ═══
      Added 2026-08-03 by operator ruling: "informational hues might be handy
      to stand out against the style colour palette."
@@ -469,3 +482,37 @@
 
   /* Shadcn bridge picks up rebindings automatically via var() chain */
 }
+
+/* ============================================================
+   BASE — the heading ramp, APPLIED.
+   ============================================================
+   Added 2026-08-03 after operator review: "borders and heading levels
+   unstyled" (conduit) and "Document Management looks all black" (BSU).
+
+   Both were the same omission. --role-h1..h6 existed as tokens and NOTHING
+   bound them to an actual h1..h6, so every heading fell through to
+   --role-text-body — one flat near-black for all six levels. A ramp nobody
+   applies is not a ramp, it is six unused variables, and that is exactly what
+   an operator sees as "unstyled".
+
+   Values are the contract's, verbatim (d2c-theme-source-of-truth.html and the
+   Corporate equivalent). Each level shifts HUE as well as lightness, so the
+   hierarchy survives greyscale and both dichromacies rather than relying on
+   size alone.
+
+   Scoped to @layer base so any component class still wins — this sets the
+   floor, it does not fight Tailwind utilities. */
+@layer base {
+  h1 { color: var(--role-h1); font-size: 25px; font-weight: 700; letter-spacing: var(--track-display); }
+  h2 { color: var(--role-h2); font-size: 19px; }
+  h3 { color: var(--role-h3); font-size: 16px; }
+  h4 { color: var(--role-h4); font-size: 14px; }
+  h5 { color: var(--role-h5); font-size: 13px; }
+  h6 {
+    color: var(--role-h6);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: var(--track-eyebrow);
+    font-weight: 700;
+  }
+}

package/src/preset-v4.css

@@ -168,6 +168,17 @@
   --color-text-on-success: var(--text-on-success);
   --color-text-on-warning: var(--text-on-warning);
 
+  /* ============================================================
+     TYPE — the contract's stack, bridged to Tailwind's font-* utilities.
+     `font-sans` and `font-mono` are what components actually write, so
+     without this bridge the tokens exist and nothing uses them. Every D2C
+     app had been declaring its own --font-sans locally instead, which is how
+     the estate came to run system-ui, Inter and JetBrains Mono at once.
+     ============================================================ */
+  --font-sans:    var(--font-body);
+  --font-display: var(--font-display);
+  --font-mono:    var(--font-mono);
+
   /* ============================================================
      ANIMATIONS
      ============================================================ */