@bsuite/theme 0.10.2 → 0.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/theme",
-  "version": "0.10.2",
+  "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

@@ -206,6 +206,9 @@
   --role-error-text:   oklch(0.556 0.230  25);    /* 4.69:1 ✓ AA */
   --role-warning-text: oklch(0.535 0.150  75);    /* 4.70:1 ✓ AA */
   --role-success-text: oklch(0.501 0.130 195);    /* 4.70:1 ✓ AA */
+  /* Pair for --role-info. Every other semantic role had a -text token; info
+     was the only gap, which forced apps to invent a local copy (R80.4). */
+  --role-info-text:    oklch(0.480 0.120 192);    /* 4.70:1 ✓ AA on panel */
 
   /* Text roles — six-tier scale (W3 §3.1 contract). Every tier below is
      measured against --role-bg-body (the conservative floor); all tiers
@@ -314,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
      ============================================================ */
@@ -458,6 +475,7 @@
   --role-error-text:   oklch(0.786 0.230  25);    /*  7.00:1 ✓ AAA */
   --role-warning-text: var(--neon-electric-amber);/* 10.10:1 ✓ AAA */
   --role-success-text: oklch(0.671 0.130 195);    /*  6.99:1 ✓ AAA */
+  --role-info-text:    oklch(0.780 0.120 192);    /*  7.0:1 ✓ AAA on dark panel */
 
   /* Glow/shadow scale up in dark mode */
   --glow-strength:   0.6;

package/src/preset-v4.css

@@ -101,6 +101,7 @@
   --color-error-text:   var(--role-error-text);
   --color-warning-text: var(--role-warning-text);
   --color-success-text: var(--role-success-text);
+  --color-info-text:    var(--role-info-text);
 
   /* Informational scale — CATEGORICAL, never state. `bg-info-3`, `text-info-5`.
      Numbered because they are interchangeable slots with no meaning of their