@devfellowship/components 1.1.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/shadcn.css

@@ -0,0 +1,84 @@
+/*
+ * @devfellowship/components — shadcn HSL-channel bridge (DS v0, dark-only)
+ *
+ * WHY THIS FILE EXISTS
+ * --------------------
+ * The DS ships its semantic vars (`--background`, `--primary`, …) as **hex**
+ * values in tokens.css (see the "Compatibility aliases" block). That's what the
+ * DS's own Tailwind v4 preset (`@dfl/components/tailwind`) consumes via
+ * `@theme inline { --color-background: var(--background); … }` — utilities like
+ * `bg-background` resolve correctly because Tailwind reads a raw color.
+ *
+ * But most fleet apps are **shadcn-slate**: their Tailwind theme wraps the same
+ * var names as `hsl(var(--background))`, `hsl(var(--primary))`, … — the standard
+ * shadcn convention where each var holds bare **HSL CHANNELS** (e.g.
+ * `--background: 222 47% 11%`, NO `hsl()` wrapper). If such an app imports the
+ * DS hex layer wholesale, hex lands inside `hsl()` → `hsl(#0a0908)` → invalid
+ * CSS → broken render.
+ *
+ * This bridge re-declares the STANDARD shadcn semantic vars as HSL CHANNELS
+ * mapped to the DS v0 dark palette, so a shadcn-slate app's existing
+ * `hsl(var(--background))` resolves to DS dark on import — zero hand-mirroring.
+ *
+ * IMPORTANT — this is ADDITIVE and OPT-IN. It is a SEPARATE export. It does NOT
+ * change the hex layer (`@dfl/components/styles` / `tokens.css`), so existing
+ * v1.1.0 hex-var consumers keep working untouched. The channels below are
+ * dark-only (DS v0 is a dark design system); scope under `.dark` is provided so
+ * apps that gate on `<html class="dark">` (shadcn default) also resolve.
+ *
+ * WHICH IMPORT DO I USE?
+ * ----------------------
+ *   • DS-native app (uses `bg-background` via @dfl/components/tailwind, or reads
+ *     the hex `--*` vars directly):
+ *         @import '@devfellowship/components/styles';
+ *
+ *   • shadcn-slate app (Tailwind theme uses `hsl(var(--background))` etc.):
+ *         @import '@devfellowship/components/shadcn';
+ *     then set dark mode (e.g. <html class="dark"> or default).
+ *     No need to hand-mirror the DS palette anymore.
+ *
+ * Channels were converted from the canonical DS v0 hex palette (tokens.css):
+ *   sand-950 #0A0908  →  30 11% 4%    sand-900 #141210 →  30 11% 7%
+ *   sand-850 #1A1714  →  30 13% 9%    sand-800 #1F1C18 →  34 13% 11%
+ *   sand-700 #2A2622  →  30 11% 15%   sand-400 #7D7568 →  37 9% 45%
+ *   sand-200 #C9C0B4  →  34 16% 75%   sand-50  #F6F1E7 →  40 45% 94%
+ *   amber-500 #E07A4A →  19 71% 58%   red-500  #E07A7A →  0 62% 68%
+ *
+ * Override any channel in your own CSS to retheme.
+ */
+
+:root,
+.dark {
+  /* Surfaces / ink */
+  --background: 30 11% 4%;      /* surface-page   — sand-950 #0A0908 */
+  --foreground: 40 45% 94%;     /* ink-primary    — sand-50  #F6F1E7 */
+
+  --card: 30 11% 7%;            /* surface-panel  — sand-900 #141210 */
+  --card-foreground: 40 45% 94%;
+
+  --popover: 30 13% 9%;         /* surface-raised — sand-850 #1A1714 */
+  --popover-foreground: 40 45% 94%;
+
+  /* Brand */
+  --primary: 19 71% 58%;        /* brand          — amber-500 #E07A4A */
+  --primary-foreground: 30 11% 4%;  /* ink-inverse — sand-950 #0A0908 */
+
+  --secondary: 30 11% 7%;       /* surface-panel  — sand-900 #141210 */
+  --secondary-foreground: 34 16% 75%;  /* ink-secondary — sand-200 #C9C0B4 */
+
+  --muted: 30 13% 9%;           /* surface-raised — sand-850 #1A1714 */
+  --muted-foreground: 37 9% 45%;       /* ink-muted   — sand-400 #7D7568 */
+
+  --accent: 34 13% 11%;         /* surface-elevated — sand-800 #1F1C18 */
+  --accent-foreground: 40 45% 94%;     /* ink-primary  — sand-50 #F6F1E7 */
+
+  --destructive: 0 62% 68%;     /* danger         — red-500 #E07A7A */
+  --destructive-foreground: 40 45% 94%;
+
+  /* Lines */
+  --border: 30 11% 15%;         /* border-subtle  — sand-700 #2A2622 */
+  --input: 30 11% 15%;          /* border-subtle  — sand-700 #2A2622 */
+  --ring: 19 71% 58%;           /* brand          — amber-500 #E07A4A */
+
+  --radius: 0.375rem;           /* 6px — matches DS --p-radius-md */
+}

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.1.0",
+  "version": "1.2.1",
   "description": "DFL Design System — UI components, hooks, utils and providers",
   "type": "module",
   "sideEffects": [
@@ -28,6 +28,7 @@
       "require": "./dist/providers.cjs"
     },
     "./styles": "./dist/styles/theme.css",
+    "./shadcn": "./dist/styles/shadcn.css",
     "./tokens": "./dist/styles/tokens.css",
     "./tailwind": "./dist/styles/tailwind.css"
   },