@burdenoff/fe-libs 2026.930.2 → 2026.930.4

package/dist/sharing/ShareDialog.js

@@ -189,7 +189,7 @@ var C = ({ resource: C, controller: w, open: T, onOpenChange: ae, workspaceId: E
 										value: V,
 										onChange: (e) => H(e.target.value),
 										"data-testid": "share-user-expiry",
-										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary scheme-normal dark:scheme-dark focus:outline-none focus:ring-2 focus:ring-action-primary-bg [&_option]:bg-bg-surface [&_option]:text-text-primary",
 										children: b.map((e) => /* @__PURE__ */ v("option", {
 											value: e.value,
 											children: e.label
@@ -268,7 +268,7 @@ var C = ({ resource: C, controller: w, open: T, onOpenChange: ae, workspaceId: E
 										value: q,
 										onChange: (e) => oe(e.target.value),
 										"data-testid": "share-link-expiry",
-										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary scheme-normal dark:scheme-dark focus:outline-none focus:ring-2 focus:ring-action-primary-bg [&_option]:bg-bg-surface [&_option]:text-text-primary",
 										children: b.map((e) => /* @__PURE__ */ v("option", {
 											value: e.value,
 											children: e.label

package/dist/storage/StorageFolderPicker.js

@@ -70,7 +70,7 @@ function c({ workspaceId: i, value: c, onChange: l, operations: u, initialParent
 				onChange: (e) => {
 					l(m.find((t) => t.id === e.target.value) ?? null);
 				},
-				className: "w-full rounded-md border border-border-subtle bg-bg-surface px-2 py-1.5 text-sm",
+				className: "w-full rounded-md border border-border-subtle bg-bg-surface text-text-primary px-2 py-1.5 text-sm scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 				"aria-label": "Folder",
 				children: [/* @__PURE__ */ n("option", {
 					value: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/fe-libs",
-  "version": "2026.930.2",
+  "version": "2026.930.4",
   "description": "Burdenoff frontend primitives and domain libraries",
   "type": "module",
   "bin": {

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

@@ -200,6 +200,40 @@
   --color-status-warning-subtle: var(--color-status-warning-bgSubtle);
   --color-status-info: var(--color-status-info-bg);
   --color-status-info-subtle: var(--color-status-info-bgSubtle);
+
+  /* BOFF-7280: shadcn-default token aliases.
+   * Many MFE components use shadcn/ui default class names
+   * (bg-popover, bg-background, text-muted-foreground, ring-ring, etc.)
+   * that are NOT defined in the Boff UI design system. Without these
+   * aliases, those classes resolve to undefined CSS variables, which
+   * renders as a transparent / browser-default panel in Dark Mode.
+   * Map every shadcn-default token used by microfe-* dropdowns to the
+   * corresponding semantic value so the rendered colors stay consistent
+   * with the rest of the FluidGrids UI. Pixel-level duplicates of the
+   * semantic tokens, no new tokens, no new Tailwind utilities. */
+  --color-background: var(--color-bg-surface);
+  --color-foreground: var(--color-text-primary);
+  --color-muted: var(--color-bg-sunken);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-accent: var(--color-bg-accentSubtle);
+  --color-accent-foreground: var(--color-text-primary);
+  --color-card: var(--color-bg-surface);
+  --color-card-foreground: var(--color-text-primary);
+  --color-secondary: var(--color-bg-sunken);
+  --color-secondary-foreground: var(--color-text-primary);
+  --color-popover: var(--color-bg-surface);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: var(--color-border-default);
+  --color-ring: var(--color-action-primary-bg);
+  --color-destructive: var(--color-status-error-bg);
+  --color-destructive-foreground: var(--color-status-error-text);
+  --color-primary: var(--color-action-primary-bg);
+  --color-primary-foreground: var(--color-action-primary-text);
+  --color-background-primary: var(--color-bg-canvas);
+  --color-background-secondary: var(--color-bg-sunken);
+  --color-background-tertiary: var(--color-bg-sunken);
+  --color-border-secondary: var(--color-border-subtle);
+  --color-focus-ring: var(--color-action-primary-bg);
 }
 
 /* Semantic Tokens - Dark Mode - Auto-generated */
@@ -344,6 +378,37 @@
   --color-status-warning-subtle: var(--color-status-warning-bgSubtle);
   --color-status-info: var(--color-status-info-bg);
   --color-status-info-subtle: var(--color-status-info-bgSubtle);
+
+  /* BOFF-7280: shadcn-default token aliases — DARK MODE values.
+   * Same set as the light-mode block above, mapped to the dark-mode
+   * equivalents of each semantic token. Required because the consuming
+   * MFEs write class names like \`bg-popover\` / \`ring-ring\` directly
+   * and Tailwind v4's default theme supplies those names with hard-coded
+   * OKLCH values that disagree with the FluidGrids palette. Pinning
+   * them here keeps every dropdown in the app on-brand without forcing
+   * MFE-by-MFE component rewrites. */
+  --color-background: var(--color-bg-surface);
+  --color-foreground: var(--color-text-primary);
+  --color-muted: var(--color-bg-sunken);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-accent: var(--color-bg-accentSubtle);
+  --color-accent-foreground: var(--color-text-primary);
+  --color-card: var(--color-bg-surface);
+  --color-card-foreground: var(--color-text-primary);
+  --color-secondary: var(--color-bg-sunken);
+  --color-secondary-foreground: var(--color-text-primary);
+  --color-popover: var(--color-bg-elevated);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: var(--color-border-default);
+  --color-ring: var(--color-action-primary-bg);
+  --color-destructive: var(--color-status-error-bg);
+  --color-destructive-foreground: var(--color-status-error-text);
+  --color-primary: var(--color-action-primary-bg);
+  --color-primary-foreground: var(--color-action-primary-text);
+  --color-background-primary: var(--color-bg-canvas);
+  --color-background-secondary: var(--color-bg-sunken);
+  --color-background-tertiary: var(--color-bg-sunken);
+  --color-border-secondary: var(--color-border-subtle);
 }
 
 /* Compact Density - Auto-generated */
@@ -376,6 +441,71 @@
   --size-controlHeight-lg: 52px;
 }
 
+/* BOFF-7280: UNLAYERED shadcn-default token aliases (FINAL OVERRIDE).
+ *
+ * Declared at the TOP LEVEL (no @layer wrapper) so they win the cascade
+ * over BOTH Tailwind v4's built-in @layer theme defaults (e.g.
+ * `--color-popover: 222.2 84% 4.9%` from the shadcn palette, which
+ * otherwise bleeds into every microfe-* dropdown panel) AND any
+ * same-token aliases that landed in @layer semantic.
+ *
+ * Unlayered CSS wins any layered CSS per the CSS Cascade Level 5 spec,
+ * so these two blocks — one for the default :root and one for the
+ * dark-mode selectors — guarantee every shadcn-default class used by
+ * FluidGrids MFEs (microfe-rbac, microfe-files, microfe-tags,
+ * microfe-conversations, etc.) renders with the FluidGrids palette in
+ * BOTH light and dark mode. */
+:root {
+  --color-background: var(--color-bg-surface);
+  --color-foreground: var(--color-text-primary);
+  --color-muted: var(--color-bg-sunken);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-accent: var(--color-bg-accentSubtle);
+  --color-accent-foreground: var(--color-text-primary);
+  --color-card: var(--color-bg-surface);
+  --color-card-foreground: var(--color-text-primary);
+  --color-secondary: var(--color-bg-sunken);
+  --color-secondary-foreground: var(--color-text-primary);
+  --color-popover: var(--color-bg-surface);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: var(--color-border-default);
+  --color-ring: var(--color-action-primary-bg);
+  --color-destructive: var(--color-status-error-bg);
+  --color-destructive-foreground: var(--color-status-error-text);
+  --color-primary: var(--color-action-primary-bg);
+  --color-primary-foreground: var(--color-action-primary-text);
+  --color-background-primary: var(--color-bg-canvas);
+  --color-background-secondary: var(--color-bg-sunken);
+  --color-background-tertiary: var(--color-bg-sunken);
+  --color-border-secondary: var(--color-border-subtle);
+  --color-focus-ring: var(--color-action-primary-bg);
+}
+[data-theme="dark"], .dark, :root.dark {
+  --color-background: var(--color-bg-surface);
+  --color-foreground: var(--color-text-primary);
+  --color-muted: var(--color-bg-sunken);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-accent: var(--color-bg-accentSubtle);
+  --color-accent-foreground: var(--color-text-primary);
+  --color-card: var(--color-bg-elevated);
+  --color-card-foreground: var(--color-text-primary);
+  --color-secondary: var(--color-bg-sunken);
+  --color-secondary-foreground: var(--color-text-primary);
+  --color-popover: var(--color-bg-elevated);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: var(--color-border-default);
+  --color-ring: var(--color-action-primary-bg);
+  --color-destructive: var(--color-status-error-bg);
+  --color-destructive-foreground: var(--color-status-error-text);
+  --color-primary: var(--color-action-primary-bg);
+  --color-primary-foreground: var(--color-action-primary-text);
+  --color-background-primary: var(--color-bg-canvas);
+  --color-background-secondary: var(--color-bg-sunken);
+  --color-background-tertiary: var(--color-bg-sunken);
+  --color-border-secondary: var(--color-border-subtle);
+  --color-focus-ring: var(--color-action-primary-bg);
+}
+
 /* Large Typography Scale - Auto-generated */
 [data-typography="large"] {
   --font-size-body-sm: 16px;
@@ -397,3 +527,4 @@
   --font-size-heading-h3: 20px;
   --font-size-heading-h4: 18px;
 }
+