@bsuite/theme 0.4.2 → 0.5.0

package/package.json

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

package/src/css/braden.css

@@ -164,6 +164,11 @@
   --shadow-sm:  0 1px 2px oklch(0 0 0 / 0.08);
   --shadow-md:  0 4px 6px oklch(0 0 0 / 0.10), 0 2px 4px oklch(0 0 0 / 0.06);
   --shadow-lg:  0 10px 15px oklch(0 0 0 / 0.10), 0 4px 6px oklch(0 0 0 / 0.05);
+
+  /* Card glow is a dark-mode-only device (see .dark below); light mode
+     stays border-only, consistent with the corporate "no neon glow" rule. */
+  --glow-card:       none;
+  --glow-card-hover: none;
 }
 
 /* ============================================================
@@ -206,4 +211,20 @@
   --muted-foreground:var(--braden-dark-text-muted);
   --border:          oklch(0.30 0.020 250);
   --input:           oklch(0.30 0.020 250);
+
+  /*
+   * Card glow — Braden dark mode gets a restrained gold separation glow,
+   * NOT the D2C neon treatment (no cyan, lower alpha, same two-layer
+   * ring+halo shape for consumer-code parity with @bsuite/theme's D2C
+   * --glow-card). Source is --app-accent (Braden Gold), which is
+   * inherited from :root since this file does not rebind it per-mode.
+   * Deliberately more subdued than D2C to honour the "corporate
+   * subtle, no neon glow" shadow philosophy above, adapted for dark UI
+   * where SOME separation glow is still needed for surface legibility.
+   */
+  --card-glow-source: var(--app-accent, var(--braden-gold-500));
+  --glow-card:       0 0 0 1px color-mix(in oklch, var(--card-glow-source) 18%, transparent),
+                      0 0 10px -4px color-mix(in oklch, var(--card-glow-source) 20%, transparent);
+  --glow-card-hover: 0 0 0 1px color-mix(in oklch, var(--card-glow-source) 26%, transparent),
+                      0 0 14px -4px color-mix(in oklch, var(--card-glow-source) 28%, transparent);
 }

package/src/css/tokens-dark.css

@@ -77,8 +77,23 @@
   /* ===== Neon glow helpers ===== */
   --glow-button:       0 0 20px oklch(0.769 0.132 191.7 / 0.3);
   --glow-button-hover: 0 0 30px oklch(0.769 0.132 191.7 / 0.5);
-  --glow-card:         0 0 15px oklch(0.769 0.132 191.7 / 0.08);
-  --glow-card-hover:   0 0 25px oklch(0.769 0.132 191.7 / 0.15);
+
+  /*
+   * Card glow — subtle neon separation for card surfaces, dark mode only.
+   * Derived from the app's accent colour (--app-accent, falling back to
+   * the shared --role-accent default, matching the live vars.css) so
+   * per-tenant
+   * BrandingProvider overrides and per-app brand accents (Conduit green,
+   * R80.3 amber, etc.) automatically re-colour the glow. Two layers:
+   * a 1px accent ring (edge definition, replaces a hard border) plus a
+   * soft negative-spread halo (ambient separation). Kept subtle by
+   * design — this is surface separation, not a decorative outline.
+   */
+  --card-glow-source: var(--app-accent, var(--role-accent));
+  --glow-card:       0 0 0 1px color-mix(in oklch, var(--card-glow-source) 30%, transparent),
+                      0 0 14px -4px color-mix(in oklch, var(--card-glow-source) 35%, transparent);
+  --glow-card-hover: 0 0 0 1px color-mix(in oklch, var(--card-glow-source) 42%, transparent),
+                      0 0 20px -4px color-mix(in oklch, var(--card-glow-source) 48%, transparent);
 
   /* ===== Button shadow ===== */
   --button-shadow:       0 0 20px oklch(0.769 0.132 191.7 / 0.3);

package/src/css/vars.css

@@ -160,6 +160,16 @@
   --glow-strength:   0.4;
   --shadow-strength: 1;
 
+  /* ============================================================
+     CARD SURFACE GLOW — subtle neon separation, dark mode only.
+     Light mode keeps the existing border-only treatment (--role-border);
+     these resolve to `none` here so any consumer applying the utility
+     unconditionally (i.e. without a `dark:` guard) degrades safely.
+     ============================================================ */
+  --card-glow-source: var(--app-accent, var(--role-accent));
+  --glow-card:         none;
+  --glow-card-hover:   none;
+
   /* ============================================================
      SRGB FALLBACKS (for browsers without oklch support)
      Tested against Chrome 105-. Values are closest sRGB equivalents.
@@ -233,5 +243,22 @@
   --glow-strength:   0.6;
   --shadow-strength: 0.8;
 
+  /*
+   * Card glow — subtle neon separation for card surfaces, dark mode only.
+   * Derived from the app's accent colour (--app-accent, falling back to
+   * the shared --role-accent default) via color-mix() so per-tenant
+   * BrandingProvider overrides and per-app brand accents (Conduit green,
+   * R80.3 amber, etc.) automatically re-colour the glow. Two layers:
+   * a 1px accent ring (edge definition, replaces a hard border) plus a
+   * soft negative-spread halo (ambient separation). Kept subtle by
+   * design — this is surface separation, not a decorative outline.
+   */
+  --glow-card:
+    0 0 0 1px color-mix(in oklch, var(--card-glow-source) 30%, transparent),
+    0 0 14px -4px color-mix(in oklch, var(--card-glow-source) 35%, transparent);
+  --glow-card-hover:
+    0 0 0 1px color-mix(in oklch, var(--card-glow-source) 42%, transparent),
+    0 0 20px -4px color-mix(in oklch, var(--card-glow-source) 48%, transparent);
+
   /* Shadcn bridge picks up rebindings automatically via var() chain */
 }