@bsuite/theme 0.10.3 → 0.10.5

package/dist/react/BrandingProvider.d.ts

@@ -1,5 +1,48 @@
-import type { ReactNode } from 'react';
+/**
+ * BrandingProvider — runtime enterprise white-labelling
+ * Version 0.4.1
+ *
+ * On mount:
+ *  1. Calls supabase.rpc('branding_json_for_tenant') using the user's authed session.
+ *  2. Validates each colour value is a well-formed oklch() string.
+ *  3. Applies each key as a CSS custom property on document.documentElement.
+ *  4. Caches the result in localStorage under BRANDING_STORAGE_KEY for FOUC prevention.
+ *  5. Subscribes to tenant row changes via Supabase Realtime so branding updates
+ *     propagate without a page reload (within ~1 second).
+ *
+ * Security / brand policies:
+ *  - Only oklch() values are accepted for colour fields — hex/rgb/hsl are rejected.
+ *  - --role-error and --role-destructive are NOT overridable by tenants.
+ *    Colourblind policy (purple error) is a system-level requirement, not a brand pref.
+ *  - brand="braden" short-circuits all Supabase calls — Braden corporate site uses
+ *    static CSS tokens, not runtime tenant overrides.
+ *  - SEC-002 / SEC-003 (added 0.4.1) — tenant-controlled URL fields
+ *    (`logo_url`, `logo_light_url`, `logo_dark_url`, `mark_url`,
+ *    `favicon_url`) and `font_stack` are routed through `branding-sanitize`
+ *    at the DOM-apply sink. Dangerous schemes (`javascript:`, `data:`,
+ *    `vbscript:`, `blob:`, `file:`) are rejected; the URL is parsed and
+ *    re-serialised so breakout chars are percent-encoded; the `url()`
+ *    token is emitted in the safe quoted form with `"` and `\` escaped;
+ *    font values carrying CSS-breakout tokens (`< > ( ) { } ; @ \ /* *\/`)
+ *    are rejected and the var is cleared so the default font applies.
+ *
+ * Environment flags:
+ *  - VITE_ENABLE_BRANDING_OVERRIDE (default: 'true') — set 'false' as kill switch.
+ *
+ * Usage:
+ *    <ThemeProvider>
+ *      <BrandingProvider supabaseClient={supabase}>
+ *        {children}
+ *      </BrandingProvider>
+ *    </ThemeProvider>
+ *
+ *   For Braden corporate (skips all RPC/Realtime):
+ *    <BrandingProvider brand="braden" supabaseClient={supabase}>
+ *      {children}
+ *    </BrandingProvider>
+ */
 import type { SupabaseClient } from '@supabase/supabase-js';
+import type { ReactNode } from 'react';
 export declare const BRANDING_STORAGE_KEY = "bsuite_tenant_branding";
 export declare const BRANDING_OVERRIDE_FLAG = "VITE_ENABLE_BRANDING_OVERRIDE";
 /** Shape returned by the branding_json_for_tenant RPC */

package/dist/react/BrandingProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrandingProvider.d.ts","sourceRoot":"","sources":["../../src/react/BrandingProvider.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAO3D,eAAO,MAAM,oBAAoB,2BAA2B,CAAA;AAC5D,eAAO,MAAM,sBAAsB,kCAAkC,CAAA;AAErE,yDAAyD;AACzD,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC7B;AAED,eAAO,MAAM,eAAe,2DAA6D,CAAA;AAEzF,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAA;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AA+KD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,KAAgB,EAChB,qBAA4B,GAC7B,EAAE,qBAAqB,+BA4GvB"}
+{"version":3,"file":"BrandingProvider.d.ts","sourceRoot":"","sources":["../../src/react/BrandingProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,eAAO,MAAM,oBAAoB,2BAA2B,CAAA;AAC5D,eAAO,MAAM,sBAAsB,kCAAkC,CAAA;AAErE,yDAAyD;AACzD,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC7B;AAED,eAAO,MAAM,eAAe,2DAA6D,CAAA;AAEzF,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9C,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAA;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAyLD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,KAAgB,EAChB,qBAA4B,GAC7B,EAAE,qBAAqB,+BA4GvB"}

package/dist/react/BrandingProvider.js

@@ -1,47 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * BrandingProvider — runtime enterprise white-labelling
- * Version 0.4.1
- *
- * On mount:
- *  1. Calls supabase.rpc('branding_json_for_tenant') using the user's authed session.
- *  2. Validates each colour value is a well-formed oklch() string.
- *  3. Applies each key as a CSS custom property on document.documentElement.
- *  4. Caches the result in localStorage under BRANDING_STORAGE_KEY for FOUC prevention.
- *  5. Subscribes to tenant row changes via Supabase Realtime so branding updates
- *     propagate without a page reload (within ~1 second).
- *
- * Security / brand policies:
- *  - Only oklch() values are accepted for colour fields — hex/rgb/hsl are rejected.
- *  - --role-error and --role-destructive are NOT overridable by tenants.
- *    Colourblind policy (purple error) is a system-level requirement, not a brand pref.
- *  - brand="braden" short-circuits all Supabase calls — Braden corporate site uses
- *    static CSS tokens, not runtime tenant overrides.
- *  - SEC-002 / SEC-003 (added 0.4.1) — tenant-controlled URL fields
- *    (`logo_url`, `logo_light_url`, `logo_dark_url`, `mark_url`,
- *    `favicon_url`) and `font_stack` are routed through `branding-sanitize`
- *    at the DOM-apply sink. Dangerous schemes (`javascript:`, `data:`,
- *    `vbscript:`, `blob:`, `file:`) are rejected; the URL is parsed and
- *    re-serialised so breakout chars are percent-encoded; the `url()`
- *    token is emitted in the safe quoted form with `"` and `\` escaped;
- *    font values carrying CSS-breakout tokens (`< > ( ) { } ; @ \ /* *\/`)
- *    are rejected and the var is cleared so the default font applies.
- *
- * Environment flags:
- *  - VITE_ENABLE_BRANDING_OVERRIDE (default: 'true') — set 'false' as kill switch.
- *
- * Usage:
- *    <ThemeProvider>
- *      <BrandingProvider supabaseClient={supabase}>
- *        {children}
- *      </BrandingProvider>
- *    </ThemeProvider>
- *
- *   For Braden corporate (skips all RPC/Realtime):
- *    <BrandingProvider brand="braden" supabaseClient={supabase}>
- *      {children}
- *    </BrandingProvider>
- */
 import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { sanitizeBrandingUrl, sanitizeFontFamily, toCssUrl, } from './branding-sanitize.js';
 export const BRANDING_STORAGE_KEY = 'bsuite_tenant_branding';
@@ -169,8 +126,17 @@ function warnIfProtectedKeyAttempted(branding) {
     }
 }
 function isDevEnvironment() {
-    const env = import.meta.env;
-    return env?.DEV === true || env?.MODE === 'development' || env?.NODE_ENV === 'development';
+    // SECURITY: direct static key access only — assigning `import.meta.env` to a
+    // variable makes consumer bundlers (Vite) inline the ENTIRE env object into
+    // every client bundle, leaking every VITE_* secret. try/catch keeps this
+    // safe in non-Vite runtimes where import.meta.env does not exist.
+    try {
+        return (import.meta.env.DEV === true ||
+            import.meta.env.MODE === 'development');
+    }
+    catch {
+        return false;
+    }
 }
 function persistBranding(branding) {
     try {
@@ -197,10 +163,10 @@ function loadPersistedBranding() {
     }
 }
 function isBrandingEnabled() {
+    // SECURITY: direct static key access only (see isDevEnvironment) — reading
+    // `import.meta.env` wholesale leaks every VITE_* secret into client bundles.
     try {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const flag = import.meta.env;
-        const value = flag?.VITE_ENABLE_BRANDING_OVERRIDE ?? flag?.['VITE_ENABLE_BRANDING_OVERRIDE'];
+        const value = import.meta.env.VITE_ENABLE_BRANDING_OVERRIDE;
         if (value === 'false' || value === '0')
             return false;
     }

package/package.json

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

package/src/css/braden.css

@@ -78,7 +78,14 @@
    ============================================================ */
   --role-text-heading:   var(--role-h1);
   --role-text-body:      oklch(0.22 0.020 250);
-  --role-text-secondary: oklch(0.38 0.018 250);
+  /* -base is what a LIGHT panel nested inside a dark section resets to. A
+     dark brand fill re-scopes the surface tokens for everything inside it,
+     which is right until the section contains a white card — then the card
+     inherits on-dark type and renders light-on-white. The reset cannot
+     hardcode a value because the correct one differs per theme, so it reads
+     this alias instead. */
+  --role-text-secondary-base: oklch(0.38 0.018 250);
+  --role-text-secondary: var(--role-text-secondary-base);
   --role-text-muted:     oklch(0.52 0.018 250);
   --role-text-subtle:    oklch(0.60 0.012 250);
   --role-text-disabled:  oklch(0.72 0.010 250);
@@ -176,7 +183,8 @@
    A saturated fill colour is not a legible text colour.
    ============================================================ */
   --role-primary-text: oklch(0.566 0.170 17.6);
-  --role-accent-text:  oklch(0.544 0.092 89.9);
+  --role-accent-text-base: oklch(0.544 0.092 89.9);
+  --role-accent-text:  var(--role-accent-text-base);
   --role-error-text:   oklch(0.562 0.200 270);
   --role-warning-text: oklch(0.544 0.092 89.9);
   --role-success-text: oklch(0.515 0.130 198);
@@ -260,7 +268,8 @@
   --role-h5:             oklch(0.80 0.040 228);
   --role-h6:             oklch(0.75 0.048 220);
   --role-text-body:      oklch(0.93 0.014 250);
-  --role-text-secondary: oklch(0.80 0.016 250);
+  --role-text-secondary-base: oklch(0.80 0.016 250);
+  --role-text-secondary: var(--role-text-secondary-base);
   --role-text-muted:     oklch(0.66 0.018 250);
   --role-text-subtle:    oklch(0.55 0.015 250);
   --role-text-disabled:  oklch(0.43 0.010 250);
@@ -278,7 +287,8 @@
   --role-kbd-bg:         oklch(0.250 0.020 250);
   --role-kbd-border:     oklch(0.400 0.022 250);
   --role-primary-text:   oklch(0.704 0.170 17.6);
-  --role-accent-text:    oklch(0.683 0.092 89.9);
+  --role-accent-text-base: oklch(0.683 0.092 89.9);
+  --role-accent-text:    var(--role-accent-text-base);
   --role-error-text:     oklch(0.711 0.200 270);
   --role-warning-text:   oklch(0.683 0.092 89.9);
   --role-success-text:   oklch(0.662 0.130 198);

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

@@ -200,15 +200,30 @@
 
   /* AA-safe text renderings of the saturated roles on light surfaces.
      A saturated fill colour is not a legible text colour; these are the
-     text variants and are the ONLY correct token for coloured type. */
-  --role-primary-text: oklch(0.541 0.215 262.9);  /* 4.71:1 ✓ AA */
-  --role-accent-text:  oklch(0.499 0.132 191.7);  /* 4.70:1 ✓ AA */
-  --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 */
+     text variants and are the ONLY correct token for coloured type.
+
+     VERIFIED AGAINST THE TINTED PILL, NOT JUST THE PAGE BACKGROUND. These
+     previously sat at ~4.70:1 measured against --role-bg-body, which is the
+     right floor for a bare coloured word on the page and the wrong one for
+     where they are actually used most: `bg-success/10 text-success-text`, a
+     status pill captioned on a 10% wash of its own hue. That wash pulls the
+     backdrop toward the text, and every one of these measured BELOW 4.5:1 in
+     that setting — error worst at 3.64:1 live. A token can be AA in the
+     context it was measured in and fail in the context it ships in.
+
+     Each is now dropped in lightness until it clears 4.5:1 on its own /10
+     tint with margin. Darkening only ever RAISES contrast against a light
+     backdrop, so the original page-background figures improve rather than
+     regress; both are quoted below. Dark mode is untouched — its variants sit
+     at L 0.67-0.79 and already measure clean on tint (7:1+ AAA). */
+  --role-primary-text: oklch(0.499 0.215 262.9);  /* 4.96:1 tint · 5.66:1 body ✓ AA */
+  --role-accent-text:  oklch(0.468 0.132 191.7);  /* 4.96:1 tint · 5.32:1 body ✓ AA */
+  --role-error-text:   oklch(0.482 0.230  25);    /* 4.96:1 tint · 5.83:1 body ✓ AA */
+  --role-warning-text: oklch(0.509 0.150  75);    /* 4.96:1 tint · 5.24:1 body ✓ AA */
+  --role-success-text: oklch(0.463 0.130 195);    /* 4.97:1 tint · 5.46:1 body ✓ 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 */
+  --role-info-text:    oklch(0.468 0.120 192);    /* 4.96:1 tint · 5.44:1 body ✓ AA */
 
   /* Text roles — six-tier scale (W3 §3.1 contract). Every tier below is
      measured against --role-bg-body (the conservative floor); all tiers
@@ -317,6 +332,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
      ============================================================ */

package/src/preset-v4.css

@@ -169,6 +169,31 @@
   --color-text-on-success: var(--text-on-success);
   --color-text-on-warning: var(--text-on-warning);
 
+  /* The two BASE inverse tones, exposed because the semantic roles above do
+     not cover every coloured fill in the system. The stage ramp is the case
+     that forced this: --stage-1..6 is a FIXED light-to-dark scale that does
+     NOT flip with the theme, so a chip painted `bg-stage-1` (L 0.86) needs
+     dark type in BOTH modes. Captioning it `text-foreground` — which DOES
+     flip — measured 1.34:1 in dark mode on conduit's candidate list, the
+     worst reading anywhere in the estate.
+
+     Read the name as describing the TEXT, not the fill: --text-on-dark-fill
+     is the DARK tone, and it is what goes on a LIGHT fill (see
+     --text-on-accent, cyan at L 0.77, which uses it).
+
+     For the stage ramp specifically, the crossover is between 4 and 5:
+
+       stage-1 L 0.86   light 1.52:1   dark 11.49:1
+       stage-2 L 0.78   light 1.93:1   dark  9.01:1
+       stage-3 L 0.70   light 2.55:1   dark  6.84:1
+       stage-4 L 0.62   light 3.48:1   dark  5.01:1   <- still takes DARK
+       stage-5 L 0.54   light 4.85:1   dark  3.59:1   <- flips to LIGHT
+       stage-6 L 0.46   light 6.86:1   dark  2.54:1
+
+     stage-4 is the trap: it reads as "mid, so white type is fine" and is not. */
+  --color-text-on-light-fill: var(--text-on-light-fill);
+  --color-text-on-dark-fill:  var(--text-on-dark-fill);
+
   /* ============================================================
      TYPE — the contract's stack, bridged to Tailwind's font-* utilities.
      `font-sans` and `font-mono` are what components actually write, so