@devfellowship/components 1.2.0 → 1.2.1

package/dist/index.cjs

@@ -3214,7 +3214,7 @@ var Sidebar = React28.forwardRef(({ side = "left", variant = "sidebar", collapsi
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       {
-        className: cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className),
+        className: cn("flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground", className),
         ref,
         ...props,
         children
@@ -3227,7 +3227,7 @@ var Sidebar = React28.forwardRef(({ side = "left", variant = "sidebar", collapsi
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
-        className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+        className: "w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
         style: {
           "--sidebar-width": SIDEBAR_WIDTH_MOBILE
         },
@@ -3250,10 +3250,10 @@ var Sidebar = React28.forwardRef(({ side = "left", variant = "sidebar", collapsi
           "div",
           {
             className: cn(
-              "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+              "relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
               "group-data-[collapsible=offcanvas]:w-0",
               "group-data-[side=right]:rotate-180",
-              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
             )
           }
         ),
@@ -3261,10 +3261,10 @@ var Sidebar = React28.forwardRef(({ side = "left", variant = "sidebar", collapsi
           "div",
           {
             className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+              "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
               side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
               // Adjust the padding for floating and inset variants.
-              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
               className
             ),
             ...props,
@@ -3571,7 +3571,7 @@ var SidebarMenuSkeleton = React28.forwardRef(({ className, showIcon = false, ...
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Skeleton,
           {
-            className: "h-4 max-w-[--skeleton-width] flex-1",
+            className: "h-4 max-w-[var(--skeleton-width)] flex-1",
             "data-sidebar": "menu-skeleton-text",
             style: {
               "--skeleton-width": width
@@ -4954,7 +4954,7 @@ function AppSidebar({
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SidebarProvider, { defaultOpen, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-h-screen w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SidebarInner, { ...props }),
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-col flex-1 min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SidebarTrigger, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "sticky top-0 z-20 flex h-12 shrink-0 items-center gap-2 border-b border-sidebar-border bg-background/80 px-2 backdrop-blur", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SidebarTrigger, {}) }),
       children
     ] })
   ] }) });

package/dist/index.js

@@ -2892,7 +2892,7 @@ var Sidebar = React28.forwardRef(({ side = "left", variant = "sidebar", collapsi
     return /* @__PURE__ */ jsx40(
       "div",
       {
-        className: cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className),
+        className: cn("flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground", className),
         ref,
         ...props,
         children
@@ -2905,7 +2905,7 @@ var Sidebar = React28.forwardRef(({ side = "left", variant = "sidebar", collapsi
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
-        className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+        className: "w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
         style: {
           "--sidebar-width": SIDEBAR_WIDTH_MOBILE
         },
@@ -2928,10 +2928,10 @@ var Sidebar = React28.forwardRef(({ side = "left", variant = "sidebar", collapsi
           "div",
           {
             className: cn(
-              "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+              "relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
               "group-data-[collapsible=offcanvas]:w-0",
               "group-data-[side=right]:rotate-180",
-              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
             )
           }
         ),
@@ -2939,10 +2939,10 @@ var Sidebar = React28.forwardRef(({ side = "left", variant = "sidebar", collapsi
           "div",
           {
             className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+              "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
               side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
               // Adjust the padding for floating and inset variants.
-              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
               className
             ),
             ...props,
@@ -3249,7 +3249,7 @@ var SidebarMenuSkeleton = React28.forwardRef(({ className, showIcon = false, ...
         /* @__PURE__ */ jsx40(
           Skeleton,
           {
-            className: "h-4 max-w-[--skeleton-width] flex-1",
+            className: "h-4 max-w-[var(--skeleton-width)] flex-1",
             "data-sidebar": "menu-skeleton-text",
             style: {
               "--skeleton-width": width
@@ -4640,7 +4640,7 @@ function AppSidebar({
   return /* @__PURE__ */ jsx61(SidebarProvider, { defaultOpen, children: /* @__PURE__ */ jsxs29("div", { className: "flex min-h-screen w-full", children: [
     /* @__PURE__ */ jsx61(SidebarInner, { ...props }),
     /* @__PURE__ */ jsxs29("div", { className: "flex flex-col flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsx61("div", { className: "p-2", children: /* @__PURE__ */ jsx61(SidebarTrigger, {}) }),
+      /* @__PURE__ */ jsx61("div", { className: "sticky top-0 z-20 flex h-12 shrink-0 items-center gap-2 border-b border-sidebar-border bg-background/80 px-2 backdrop-blur", children: /* @__PURE__ */ jsx61(SidebarTrigger, {}) }),
       children
     ] })
   ] }) });

package/dist/styles/tailwind.css

@@ -11,140 +11,11 @@
  * Or combined if you only need utilities:
  *   @import 'tailwindcss';
  *   @import '@dfl/components/tailwind';
+ *
+ * NOTE: The token→utility `@theme inline` mappings now live in
+ * theme-mappings.css (single source of truth, also imported by theme.css so
+ * `/styles` consumers get the utilities wired without importing `/tailwind`).
  */
 
 @import 'tailwindcss';
-
-@theme inline {
-  /* ─── Colours ──────────────────────────────────────────────────────────── */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* Brand shortcuts */
-  --color-brand: var(--brand-orange);
-  --color-brand-accent: var(--brand-accent);
-  --color-brand-dark: var(--brand-dark);
-
-  /* Sidebar */
-  --color-sidebar: var(--sidebar-background);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Charts */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  /* ─── Border radius ────────────────────────────────────────────────────── */
-  --radius-sm: var(--radius-sm);
-  --radius-md: var(--radius-md);
-  --radius-lg: var(--radius-lg);
-  --radius-xl: var(--radius-xl);
-  --radius-full: var(--radius-full);
-
-  /* ─── Fonts ────────────────────────────────────────────────────────────── */
-  --font-sans: var(--font-sans);
-  --font-condensed: var(--font-condensed);
-  --font-mono: var(--font-mono);
-  --font-editorial: var(--font-editorial);
-
-  /* ─── Editorial / paper (light, NOT default — see tokens.css §5.8) ─────── */
-  --color-paper:          var(--paper);
-  --color-paper-2:        var(--paper-2);
-  --color-ink-on-paper:   var(--ink-on-paper);
-  --color-brand-on-light: var(--brand-on-light);
-
-  /* ─── Motion — DS-spec named easings → `ease-*` utilities ─────────────── */
-  --ease-standard: var(--p-ease-standard);
-  --ease-snap:     var(--p-ease-snap);
-  --ease-out-std:  var(--p-ease-out-std);
-  --ease-in-std:   var(--p-ease-in-std);
-
-  /* ─── Z-index scale → `z-*` utilities (z-sticky, z-modal, z-toast, …) ─── */
-  --z-base:        var(--p-z-base);
-  --z-sticky:      var(--p-z-sticky);
-  --z-dropdown:    var(--p-z-dropdown);
-  --z-tooltip:     var(--p-z-tooltip);
-  --z-modal-scrim: var(--p-z-modal-scrim);
-  --z-modal:       var(--p-z-modal);
-  --z-toast:       var(--p-z-toast);
-
-  /* ─── DS v0 component tokens (--c-*) exposed as Tailwind utilities ────── */
-  /* Atoms cluster (Phase 1.1) — Button + Input + Card knobs */
-  --color-c-button-primary-bg:           var(--c-button-primary-bg);
-  --color-c-button-primary-fg:           var(--c-button-primary-fg);
-  --color-c-button-primary-bg-hover:     var(--c-button-primary-bg-hover);
-  --color-c-button-primary-bg-active:    var(--c-button-primary-bg-active);
-  --color-c-button-secondary-bg:         var(--c-button-secondary-bg);
-  --color-c-button-secondary-fg:         var(--c-button-secondary-fg);
-  --color-c-button-secondary-border:     var(--c-button-secondary-border);
-  --color-c-button-secondary-bg-hover:   var(--c-button-secondary-bg-hover);
-  --color-c-button-secondary-border-hover: var(--c-button-secondary-border-hover);
-  --color-c-button-ghost-fg:             var(--c-button-ghost-fg);
-  --color-c-button-ghost-bg-hover:       var(--c-button-ghost-bg-hover);
-  --color-c-button-destructive-fg:       var(--c-button-destructive-fg);
-  --color-c-button-destructive-border:   var(--c-button-destructive-border);
-  --color-c-button-destructive-bg-hover: var(--c-button-destructive-bg-hover);
-  --color-c-button-success-bg:           var(--c-button-success-bg);
-  --color-c-button-success-fg:           var(--c-button-success-fg);
-  --color-c-input-bg:                    var(--c-input-bg);
-  --color-c-input-fg:                    var(--c-input-fg);
-  --color-c-input-placeholder:           var(--c-input-placeholder);
-  --color-c-input-border:                var(--c-input-border);
-  --color-c-input-border-hover:          var(--c-input-border-hover);
-  --color-c-input-border-focus:          var(--c-input-border-focus);
-  --color-c-input-ring-focus:            var(--c-input-ring-focus);
-  --color-c-input-border-error:          var(--c-input-border-error);
-
-  /* Semantic ink as utilities */
-  --color-s-ink-primary:    var(--s-ink-primary);
-  --color-s-ink-secondary:  var(--s-ink-secondary);
-  --color-s-ink-muted:      var(--s-ink-muted);
-  --color-s-ink-disabled:   var(--s-ink-disabled);
-  --color-s-surface-page:   var(--s-surface-page);
-  --color-s-surface-panel:  var(--s-surface-panel);
-  --color-s-surface-raised: var(--s-surface-raised);
-  --color-s-surface-elevated: var(--s-surface-elevated);
-  --color-s-border-subtle:  var(--s-border-subtle);
-  --color-s-border-strong:  var(--s-border-strong);
-  --color-s-border-focus:   var(--s-border-focus);
-  --color-s-brand-solid:    var(--s-brand-solid);
-  --color-s-brand-hover:    var(--s-brand-hover);
-  --color-s-brand-subtle:   var(--s-brand-subtle);
-  --color-s-brand-ring:     var(--s-brand-ring);
-}
-
-/* Dark mode variant — class-based */
-@variant dark (&:is(.dark *));
+@import './theme-mappings.css';

package/dist/styles/theme-mappings.css

@@ -0,0 +1,153 @@
+/*
+ * @dfl/components — Tailwind v4 token→utility mappings (DS v0)
+ *
+ * Single source of truth for the `@theme inline` color/font/radius mappings
+ * that turn the DS tokens (--popover, --sidebar-background, …) into Tailwind v4
+ * utility classes (bg-popover, bg-sidebar, …).
+ *
+ * Imported by BOTH:
+ *   • theme.css       (the `@devfellowship/components/styles` export) — so apps
+ *     that import `/styles` + `tailwindcss` directly get the utilities wired
+ *     WITHOUT also having to import `/tailwind`. This fixes the "transparent
+ *     popover / dead bg-* utility" class of bugs where bg-popover / bg-sidebar
+ *     resolved to nothing because --color-popover / --color-sidebar were never
+ *     registered. (regression from the DS dark-chrome refactor; fixed v1.2.1)
+ *   • tailwind.css    (the `@devfellowship/components/tailwind` preset export).
+ *
+ * `@theme inline` is additive and idempotent — importing it from both a /styles
+ * consumer and a /tailwind consumer in the same app is a harmless no-op.
+ */
+
+@theme inline {
+  /* ─── Colours ──────────────────────────────────────────────────────────── */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Brand shortcuts */
+  --color-brand: var(--brand-orange);
+  --color-brand-accent: var(--brand-accent);
+  --color-brand-dark: var(--brand-dark);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* ─── Border radius ────────────────────────────────────────────────────── */
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-full: var(--radius-full);
+
+  /* ─── Fonts ────────────────────────────────────────────────────────────── */
+  --font-sans: var(--font-sans);
+  --font-condensed: var(--font-condensed);
+  --font-mono: var(--font-mono);
+  --font-editorial: var(--font-editorial);
+
+  /* ─── Editorial / paper (light, NOT default — see tokens.css §5.8) ─────── */
+  --color-paper:          var(--paper);
+  --color-paper-2:        var(--paper-2);
+  --color-ink-on-paper:   var(--ink-on-paper);
+  --color-brand-on-light: var(--brand-on-light);
+
+  /* ─── Motion — DS-spec named easings → `ease-*` utilities ─────────────── */
+  --ease-standard: var(--p-ease-standard);
+  --ease-snap:     var(--p-ease-snap);
+  --ease-out-std:  var(--p-ease-out-std);
+  --ease-in-std:   var(--p-ease-in-std);
+
+  /* ─── Z-index scale → `z-*` utilities (z-sticky, z-modal, z-toast, …) ─── */
+  --z-base:        var(--p-z-base);
+  --z-sticky:      var(--p-z-sticky);
+  --z-dropdown:    var(--p-z-dropdown);
+  --z-tooltip:     var(--p-z-tooltip);
+  --z-modal-scrim: var(--p-z-modal-scrim);
+  --z-modal:       var(--p-z-modal);
+  --z-toast:       var(--p-z-toast);
+
+  /* ─── DS v0 component tokens (--c-*) exposed as Tailwind utilities ────── */
+  /* Atoms cluster (Phase 1.1) — Button + Input + Card knobs */
+  --color-c-button-primary-bg:           var(--c-button-primary-bg);
+  --color-c-button-primary-fg:           var(--c-button-primary-fg);
+  --color-c-button-primary-bg-hover:     var(--c-button-primary-bg-hover);
+  --color-c-button-primary-bg-active:    var(--c-button-primary-bg-active);
+  --color-c-button-secondary-bg:         var(--c-button-secondary-bg);
+  --color-c-button-secondary-fg:         var(--c-button-secondary-fg);
+  --color-c-button-secondary-border:     var(--c-button-secondary-border);
+  --color-c-button-secondary-bg-hover:   var(--c-button-secondary-bg-hover);
+  --color-c-button-secondary-border-hover: var(--c-button-secondary-border-hover);
+  --color-c-button-ghost-fg:             var(--c-button-ghost-fg);
+  --color-c-button-ghost-bg-hover:       var(--c-button-ghost-bg-hover);
+  --color-c-button-destructive-fg:       var(--c-button-destructive-fg);
+  --color-c-button-destructive-border:   var(--c-button-destructive-border);
+  --color-c-button-destructive-bg-hover: var(--c-button-destructive-bg-hover);
+  --color-c-button-success-bg:           var(--c-button-success-bg);
+  --color-c-button-success-fg:           var(--c-button-success-fg);
+  --color-c-input-bg:                    var(--c-input-bg);
+  --color-c-input-fg:                    var(--c-input-fg);
+  --color-c-input-placeholder:           var(--c-input-placeholder);
+  --color-c-input-border:                var(--c-input-border);
+  --color-c-input-border-hover:          var(--c-input-border-hover);
+  --color-c-input-border-focus:          var(--c-input-border-focus);
+  --color-c-input-ring-focus:            var(--c-input-ring-focus);
+  --color-c-input-border-error:          var(--c-input-border-error);
+
+  /* Semantic ink as utilities */
+  --color-s-ink-primary:    var(--s-ink-primary);
+  --color-s-ink-secondary:  var(--s-ink-secondary);
+  --color-s-ink-muted:      var(--s-ink-muted);
+  --color-s-ink-disabled:   var(--s-ink-disabled);
+  --color-s-surface-page:   var(--s-surface-page);
+  --color-s-surface-panel:  var(--s-surface-panel);
+  --color-s-surface-raised: var(--s-surface-raised);
+  --color-s-surface-elevated: var(--s-surface-elevated);
+  --color-s-border-subtle:  var(--s-border-subtle);
+  --color-s-border-strong:  var(--s-border-strong);
+  --color-s-border-focus:   var(--s-border-focus);
+  --color-s-brand-solid:    var(--s-brand-solid);
+  --color-s-brand-hover:    var(--s-brand-hover);
+  --color-s-brand-subtle:   var(--s-brand-subtle);
+  --color-s-brand-ring:     var(--s-brand-ring);
+}
+
+/* Dark mode variant — class-based */
+@variant dark (&:is(.dark *));

package/dist/styles/theme.css

@@ -26,6 +26,13 @@
 /* All design tokens live in tokens.css. */
 @import './tokens.css';
 
+/* Tailwind v4 token→utility mappings (--color-popover: var(--popover), etc.).
+ * Importing this here means apps that do `@import 'tailwindcss'` +
+ * `@import '@devfellowship/components/styles'` get the bg-popover / bg-sidebar /
+ * border-sidebar-border / … utilities wired WITHOUT also importing `/tailwind`.
+ * Fixes the transparent-popover / dead-utility regression (v1.2.1). */
+@import './theme-mappings.css';
+
 /* ─── Base resets ────────────────────────────────────────────────────────── */
 *, *::before, *::after {
   border-color: var(--s-border-subtle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devfellowship/components",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "DFL Design System — UI components, hooks, utils and providers",
   "type": "module",
   "sideEffects": [