@bsuite/theme 0.10.3 → 0.10.4

package/package.json

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

package/src/css/utilities.css

@@ -101,3 +101,44 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* ============================================================
+   GRADIENT TEXT — the display-heading treatment
+   ============================================================
+   Operator ruling 2026-08-04: a page TITLE carries the accent gradient, on
+   authenticated surfaces too. That widens the `.bsuite-accent-gradient` note
+   above, which restricted the gradient to marketing/pre-auth heroes — the ban
+   it was really protecting is on FUNCTIONAL text (labels, body copy, values,
+   anything you read to make a decision), and a page title is none of those.
+
+   Uses --gradient-heading, NOT --gradient-accent. The raw accent gradient ends
+   in cyan at 1.76:1 on the light background, which would leave half the word
+   unreadable; --gradient-heading is built from the AA-verified *-text variants
+   and is correct in both modes. See the token for the measurements.
+
+   background-clip: text requires `color: transparent`, so a gradient that fails
+   to resolve produces INVISIBLE text rather than an ugly one. Both stops
+   therefore come from tokens the package itself defines. */
+.text-gradient-accent {
+  background-image: var(--gradient-heading);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  /* SHRINK-WRAP, and this is the whole reason the effect is visible.
+     background-clip: text paints the gradient across the ELEMENT BOX, not the
+     glyphs. A block-level h1 spans its container, so a short word samples only
+     the first ~15% of the gradient and the far stop never reaches the screen —
+     it renders as a flat colour, which is indistinguishable from the bug this
+     replaces. fit-content makes the box hug the text so the gradient spans the
+     letters. */
+  width: fit-content;
+  /* A gradient heading must still be selectable and searchable. background-clip
+     keeps the real glyphs, so text selection, find-in-page and screen readers
+     are unaffected — do not reach for an SVG or an image here. */
+}
+
+/* Forced-colours mode drops background-image entirely, which would leave
+   transparent glyphs on screen. Hand the text back to the system palette. */
+@media (forced-colors: active) {
+  .text-gradient-accent { background-image: none; color: CanvasText; }
+}

package/src/css/vars.css

@@ -317,6 +317,20 @@
      ============================================================ */
   --gradient-accent: linear-gradient(135deg, var(--role-primary), var(--role-accent));
 
+  /* HEADING gradient — the same two hues, but built from the *-text role
+     variants rather than the raw ones, and that difference is load-bearing.
+     Measured against the mode backgrounds:
+
+       --role-accent (cyan) on the LIGHT bg ......... 1.76:1   unreadable
+       --role-accent-text   on the LIGHT bg ......... 4.70:1   AA
+
+     So painting a heading with --gradient-accent verbatim leaves the cyan half
+     of the word illegible in light mode. The *-text variants are AA-verified in
+     BOTH modes and already flip under .dark, so one token is correct in both:
+       light  4.71:1 -> 4.70:1        dark  7.01:1 -> 9.78:1
+     No new colour values, so the palette whitelist is unaffected. */
+  --gradient-heading: linear-gradient(135deg, var(--role-primary-text), var(--role-accent-text));
+
   /* ============================================================
      GLOW + SHADOW MULTIPLIERS
      ============================================================ */