@burdenoff/fe-libs 2026.624.2 → 2026.625.2

package/src/shared/tokens/build/brands/fluidgrids.css

@@ -1,6 +1,6 @@
 /* FluidGrids brand overrides - Auto-generated */
 [data-brand="fluidgrids"] {
   --color-action-primary-bg: #0891B2;
-  --color-action-primary-bg-hover: #0E7490;
-  --color-action-primary-bg-active: #155E75;
+  --color-action-primary-bgHover: #0E7490;
+  --color-action-primary-bgActive: #155E75;
 }

package/src/shared/tokens/build/brands/healthybowl.css

@@ -1,6 +1,6 @@
 /* HealthyBowl brand overrides - Auto-generated */
 [data-brand="healthybowl"] {
   --color-action-primary-bg: #16A34A;
-  --color-action-primary-bg-hover: #15803D;
-  --color-action-primary-bg-active: #166534;
+  --color-action-primary-bgHover: #15803D;
+  --color-action-primary-bgActive: #166534;
 }

package/src/shared/tokens/build/brands/tenant.css

@@ -1,6 +1,6 @@
 /* Tenant brand overrides - Auto-generated */
 [data-brand="tenant"] {
   --color-action-primary-bg: #9333EA;
-  --color-action-primary-bg-hover: #7E22CE;
-  --color-action-primary-bg-active: #6B21A8;
+  --color-action-primary-bgHover: #7E22CE;
+  --color-action-primary-bgActive: #6B21A8;
 }

package/src/shared/tokens/build/brands/workspaces.css

@@ -1,6 +1,6 @@
 /* Workspaces brand overrides - Auto-generated */
 [data-brand="workspaces"] {
   --color-action-primary-bg: #2563EB;
-  --color-action-primary-bg-hover: #1D4ED8;
-  --color-action-primary-bg-active: #1E40AF;
+  --color-action-primary-bgHover: #1D4ED8;
+  --color-action-primary-bgActive: #1E40AF;
 }

package/src/shared/tokens/build/foundation.css

@@ -171,6 +171,15 @@
   --blur-glass: 16px;
   --blur-glass-lg: 24px;
 
+  /* Boff UI 2.0 — gloss / sheen primitives (hue-neutral alpha overlays).
+   * Composed into theme-aware gradients in semantic.css. */
+  --gloss-sheen-light: rgba(255, 255, 255, 0.1); /* top inner highlight, light surfaces */
+  --gloss-sheen-dark: rgba(255, 255, 255, 0.055); /* fainter highlight, dark surfaces */
+  --gloss-rim-light: rgba(15, 23, 42, 0.05); /* bottom rim shade, light */
+  --gloss-rim-dark: rgba(0, 0, 0, 0.28); /* bottom rim shade, dark */
+  /* Single allow-listed 3D-pop lift (transform only; collapsed in high-contrast). */
+  --pop-lift-y: 0px;
+
   /* Motion Durations */
   --motion-duration-instant: 60ms;
   --motion-duration-fast: 140ms;

package/src/shared/tokens/build/semantic.css

@@ -137,6 +137,36 @@
   --color-accent-softHover: color-mix(in oklab, var(--color-action-primary-bg) 16%, transparent);
   --color-focus-ring: var(--color-action-primary-bg);
   --blur-glass: 16px;
+  /* Boff UI 2.0 — gloss finish, accent washes, 3D-pop shadow, seam border (theme-aware) */
+  --gradient-gloss-card: linear-gradient(
+    180deg,
+    var(--gloss-sheen-light) 0%,
+    transparent 38%,
+    transparent 82%,
+    var(--gloss-rim-light) 100%
+  );
+  --gradient-accent-wash: linear-gradient(
+    135deg,
+    color-mix(in oklab, var(--color-action-primary-bg) 14%, transparent),
+    color-mix(in oklab, var(--color-action-primary-bg) 4%, transparent)
+  );
+  --gradient-hero-mesh: radial-gradient(
+    120% 120% at 0% 0%,
+    color-mix(in oklab, var(--color-action-primary-bg) 12%, transparent),
+    transparent 60%
+  );
+  --color-brand-primary: var(--color-action-primary-bg);
+  --color-brand-secondary: var(--color-action-primary-bgHover);
+  /* 3D-pop composite: elevation float + accent-tinted 1px glow rim, ONE token */
+  --shadow-pop: var(--shadow-float),
+    0 0 0 1px color-mix(in oklab, var(--color-action-primary-bg) 14%, transparent);
+  /* Hover state of --shadow-pop — INTENSIFIES (keeps the float, adds accent glow)
+   * so cards highlight on hover WITHOUT moving and WITHOUT losing their shadow. */
+  --shadow-pop-hover: var(--shadow-float),
+    0 0 0 1px color-mix(in oklab, var(--color-action-primary-bg) 26%, transparent),
+    0 12px 32px -10px color-mix(in oklab, var(--color-action-primary-bg) 28%, transparent);
+  /* Visible-but-subtle theme-aware seam border for seamless chrome edges */
+  --color-border-seam: color-mix(in oklab, var(--color-border-subtle) 72%, transparent);
   /* Accent color tokens */
   --color-accent-blue: #2563EB;
   --color-accent-blue-hover: #1D4ED8;
@@ -286,6 +316,14 @@
   --color-accent-soft: color-mix(in oklab, var(--color-action-primary-bg) 22%, transparent);
   --color-accent-softHover: color-mix(in oklab, var(--color-action-primary-bg) 30%, transparent);
   --color-focus-ring: var(--color-action-primary-bg);
+  /* Boff UI 2.0 — dark gloss finish (sheen/rim flip; color-mix gradients recompute) */
+  --gradient-gloss-card: linear-gradient(
+    180deg,
+    var(--gloss-sheen-dark) 0%,
+    transparent 40%,
+    transparent 84%,
+    var(--gloss-rim-dark) 100%
+  );
   /* Semantic aliases - dark mode */
   --color-bg-muted: var(--color-bg-sunken);
   --color-border-hover: var(--color-border-strong);

package/src/shared/tokens/build/tailwind.preset.js

@@ -110,6 +110,10 @@ export default {
         'accent-soft': 'var(--color-accent-soft)',
         'accent-soft-hover': 'var(--color-accent-softHover)',
         'focus-ring': 'var(--color-focus-ring)',
+        // Boff UI 2.0 — seam border + brand gradient stops (theme-aware)
+        'border-seam': 'var(--color-border-seam)',
+        'brand-primary': 'var(--color-brand-primary)',
+        'brand-secondary': 'var(--color-brand-secondary)',
 
         // Semantic aliases
         'bg-muted': 'var(--color-bg-muted)',
@@ -190,6 +194,14 @@ export default {
         'overlay': 'var(--shadow-overlay)',
         'glow': 'var(--shadow-glow)',
         'focus': 'var(--shadow-focus)',
+        // Boff UI 2.0 — composite 3D-pop (elevation + accent glow rim)
+        'pop': 'var(--shadow-pop)',
+      },
+      backgroundImage: {
+        // Boff UI 2.0 — theme-aware finishes (gloss sheen, accent washes)
+        'gloss-card': 'var(--gradient-gloss-card)',
+        'accent-wash': 'var(--gradient-accent-wash)',
+        'hero-mesh': 'var(--gradient-hero-mesh)',
       },
       height: {
         'control-sm': 'var(--size-controlHeight-sm)',

package/src/shared/tokens/build/themes.css

@@ -301,4 +301,16 @@
   /* Vivid yellow focus ring */
   --color-focus-ring: #FFFF00;
   --shadow-focus: 0 0 0 3px rgba(255, 255, 0, 0.55);
+
+  /* Boff UI 2.0 — high-contrast HARD-disables glass/gloss/glow/3D (a11y) */
+  --gradient-gloss-card: none;
+  --gradient-accent-wash: none;
+  --gradient-hero-mesh: none;
+  --shadow-pop: var(--shadow-elevation-2); /* opaque, no accent glow rim */
+  --shadow-pop-hover: var(--shadow-elevation-3);
+  --shadow-glow: var(--shadow-elevation-3);
+  --color-border-seam: var(--color-border-strong); /* solid, fully visible */
+  --color-surface-glass: var(--color-bg-elevated); /* opaque */
+  --blur-glass: 0px;
+  --pop-lift-y: 0px; /* no 3D lift */
 }

package/src/shared/tokens/tokens.css

@@ -25,3 +25,40 @@
  * Imported into the `themes` layer LAST so an expressive theme's accent wins
  * over the per-brand accent. See build/themes.css. */
 @import './build/themes.css' layer(themes);
+
+/* Boff UI 2.0 — glass-intensity preference (data-glass on <html>) + OS
+ * reduced-transparency. Unlayered so these win over foundation/semantic/
+ * brands/themes deterministically. Set by the Theme Preferences customizer. */
+:root[data-glass='off'] {
+  --blur-glass: 0px;
+  --color-surface-glass: var(--color-bg-elevated); /* opaque fallback */
+  --gradient-gloss-card: none;
+}
+:root[data-glass='subtle'] {
+  --blur-glass: 8px;
+}
+:root[data-glass='full'] {
+  --blur-glass: 16px;
+}
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --blur-glass: 0px;
+    --color-surface-glass: var(--color-bg-elevated);
+    --gradient-gloss-card: none;
+  }
+}
+
+/* Boff UI 2.0 — user "reduce motion" preference (data-reduce-motion on <html>),
+ * in addition to the OS prefers-reduced-motion media query. Neutralises all
+ * animations/transitions/lift while keeping the UI fully functional. */
+:root[data-reduce-motion] *,
+:root[data-reduce-motion] *::before,
+:root[data-reduce-motion] *::after {
+  animation-duration: 0.001ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.001ms !important;
+  scroll-behavior: auto !important;
+}
+:root[data-reduce-motion] {
+  --pop-lift-y: 0px;
+}