@devalok/shilp-sutra 0.36.1 → 0.37.0-next.1

package/dist/tokens/shilp-sutra.css

@@ -0,0 +1,54 @@
+/* ═══════════════════════════════════════════════════════════════════
+   @devalok/shilp-sutra — TW4-native consumer entry point
+
+   Consumers import this ONCE in their global stylesheet:
+
+     // app/globals.css
+     @import "tailwindcss";
+     @import "@devalok/shilp-sutra/css";
+
+   That's the whole setup. No `tailwind.config.ts`, no `@config`, no
+   JS preset. TW4 reads the @theme, @utility, @custom-variant, and
+   @source directives in this file and auto-generates the design
+   system's utility surface.
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* Token layer — matches the internal `./tokens` export order.
+   If you add files here, also update `./tokens/index.css` for the
+   legacy subpath. */
+@import "./primitives.css";
+@import "./semantic.css";
+@import "./typography.css";
+@import "./typography-semantic.css";
+@import "./base.css";
+@import "./animations.css";
+@import "./utilities.css";
+@import "./variants.css";
+
+/* tw-animate-css — TW4-native rewrite of tailwindcss-animate. Provides the
+   `animate-in`, `animate-out`, `fade-in-*`, `zoom-in-*`, `slide-in-from-*`
+   utility set that Radix primitives and our composed components (Dialog,
+   Popover, Avatar, etc.) rely on for enter/exit animations.
+
+   Imported as CSS (not a JS `@plugin`) because tw-animate-css ships a
+   pre-compiled stylesheet via its `"style"` export condition. Declared
+   in our `dependencies` so pnpm installs it transitively for consumers.
+
+   Without this, every `animate-*` class used by the DS silently emits
+   zero CSS → Avatar + motion-using components render without animation. */
+@import "tw-animate-css";
+
+/* TW4 content detection — scan our shipped dist JS for utility classes
+   so consumers don't have to configure "content" for us.
+
+   Priority order is deliberate:
+     1. Relative-path form: from dist/tokens/shilp-sutra.css up to dist/.
+        Under pnpm strict-hoist this always lands on the real (non-symlinked)
+        dist directory, so TW4 can read our compiled JS no matter how the
+        consumer package manager laid things out.
+     2. Package-name form: fallback via Node package resolution. Works on
+        npm/yarn and on pnpm with shamefully-hoist, but can miss under
+        strict-hoist depending on the TW4 resolver version. */
+@source "../../dist";
+@source "@devalok/shilp-sutra";
+

package/dist/tokens/typography-semantic.css

@@ -1,5 +1,5 @@
 /* ═══════════════════════════════════════════════════════════════════
-   SEMANTIC TYPOGRAPHY VARIANTS
+   SEMANTIC TYPOGRAPHY VARIANTS (TW4 native)
    Maps raw type scale tokens → meaningful component names.
 
    Migration guide from legacy classes:
@@ -11,113 +11,120 @@
      B3-Reg  → body-sm        B4-Reg  → body-xs
      L1      → label-lg       L2      → label-md
      L3      → label-sm       L4      → label-xs
+
+   The `--typo-*` tokens below are INTERNAL composite values — they
+   group (size, weight, leading, tracking) per semantic variant so the
+   `@utility text-heading-xl { ... }` rules in utilities.css can inject
+   all four properties in one class. They stay in `:root`, NOT `@theme`,
+   because they don't map to a TW4 utility namespace directly — they're
+   read by our custom `@utility` rules.
    ═══════════════════════════════════════════════════════════════════ */
 
 :root {
   /* ── Heading Variants ──────────────────────── */
-  --typo-heading-2xl-size:     var(--font-size-6xl);
+  --typo-heading-2xl-size:     var(--text-ds-6xl);
   --typo-heading-2xl-weight:   var(--font-weight-regular);
-  --typo-heading-2xl-leading:  var(--line-height-tight);
+  --typo-heading-2xl-leading:  var(--leading-ds-tight);
   --typo-heading-2xl-tracking: -0.025em;
 
-  --typo-heading-xl-size:      var(--font-size-5xl);
+  --typo-heading-xl-size:      var(--text-ds-5xl);
   --typo-heading-xl-weight:    var(--font-weight-regular);
-  --typo-heading-xl-leading:   var(--line-height-tight);
+  --typo-heading-xl-leading:   var(--leading-ds-tight);
   --typo-heading-xl-tracking:  -0.025em;
 
-  --typo-heading-lg-size:      var(--font-size-4xl);
+  --typo-heading-lg-size:      var(--text-ds-4xl);
   --typo-heading-lg-weight:    var(--font-weight-regular);
-  --typo-heading-lg-leading:   var(--line-height-tight);
+  --typo-heading-lg-leading:   var(--leading-ds-tight);
   --typo-heading-lg-tracking:  -0.02em;
 
-  --typo-heading-md-size:      var(--font-size-3xl);
+  --typo-heading-md-size:      var(--text-ds-3xl);
   --typo-heading-md-weight:    var(--font-weight-regular);
-  --typo-heading-md-leading:   var(--line-height-tight);
+  --typo-heading-md-leading:   var(--leading-ds-tight);
   --typo-heading-md-tracking:  -0.02em;
 
-  --typo-heading-sm-size:      var(--font-size-2xl);
+  --typo-heading-sm-size:      var(--text-ds-2xl);
   --typo-heading-sm-weight:    var(--font-weight-regular);
-  --typo-heading-sm-leading:   var(--line-height-snug);
+  --typo-heading-sm-leading:   var(--leading-ds-snug);
   --typo-heading-sm-tracking:  -0.015em;
 
-  --typo-heading-xs-size:      var(--font-size-xl);
+  --typo-heading-xs-size:      var(--text-ds-xl);
   --typo-heading-xs-weight:    var(--font-weight-regular);
-  --typo-heading-xs-leading:   var(--line-height-snug);
+  --typo-heading-xs-leading:   var(--leading-ds-snug);
   --typo-heading-xs-tracking:  0;
 
   /* ── Body Variants ─────────────────────────── */
-  --typo-body-lg-size:         var(--font-size-base);
+  --typo-body-lg-size:         var(--text-ds-base);
   --typo-body-lg-weight:       var(--font-weight-regular);
-  --typo-body-lg-leading:      var(--line-height-relaxed);
+  --typo-body-lg-leading:      var(--leading-ds-relaxed);
   --typo-body-lg-tracking:     -0.01em;  /* was -0.02em; loosened for readability */
 
-  --typo-body-md-size:         var(--font-size-md);
+  --typo-body-md-size:         var(--text-ds-md);
   --typo-body-md-weight:       var(--font-weight-regular);
-  --typo-body-md-leading:      var(--line-height-relaxed);
+  --typo-body-md-leading:      var(--leading-ds-relaxed);
   --typo-body-md-tracking:     0em;     /* was -0.02em; neutral at 14px */
 
-  --typo-body-sm-size:         var(--font-size-sm);
+  --typo-body-sm-size:         var(--text-ds-sm);
   --typo-body-sm-weight:       var(--font-weight-regular);
-  --typo-body-sm-leading:      var(--line-height-relaxed);
+  --typo-body-sm-leading:      var(--leading-ds-relaxed);
   --typo-body-sm-tracking:     0.01em;  /* was -0.02em; positive for small text legibility */
 
-  --typo-body-xs-size:         var(--font-size-xs);
+  --typo-body-xs-size:         var(--text-ds-xs);
   --typo-body-xs-weight:       var(--font-weight-regular);
-  --typo-body-xs-leading:      var(--line-height-relaxed);
+  --typo-body-xs-leading:      var(--leading-ds-relaxed);
   --typo-body-xs-tracking:     0.02em;  /* was -0.02em; positive for tiny text legibility */
 
   /* ── Label Variants (uppercase UI labels) ─── */
-  --typo-label-lg-size:        var(--font-size-base);
+  --typo-label-lg-size:        var(--text-ds-base);
   --typo-label-lg-weight:      var(--font-weight-semibold);
-  --typo-label-lg-leading:     var(--line-height-snug);
+  --typo-label-lg-leading:     var(--leading-ds-snug);
   --typo-label-lg-tracking:    0.06em;
 
-  --typo-label-md-size:        var(--font-size-md);
+  --typo-label-md-size:        var(--text-ds-md);
   --typo-label-md-weight:      var(--font-weight-semibold);
-  --typo-label-md-leading:     var(--line-height-snug);
+  --typo-label-md-leading:     var(--leading-ds-snug);
   --typo-label-md-tracking:    0.06em;
 
-  --typo-label-sm-size:        var(--font-size-sm);
+  --typo-label-sm-size:        var(--text-ds-sm);
   --typo-label-sm-weight:      var(--font-weight-semibold);
-  --typo-label-sm-leading:     var(--line-height-snug);
+  --typo-label-sm-leading:     var(--leading-ds-snug);
   --typo-label-sm-tracking:    0.06em;
 
-  --typo-label-xs-size:        var(--font-size-xs);
+  --typo-label-xs-size:        var(--text-ds-xs);
   --typo-label-xs-weight:      var(--font-weight-semibold);
-  --typo-label-xs-leading:     var(--line-height-snug);
+  --typo-label-xs-leading:     var(--leading-ds-snug);
   --typo-label-xs-tracking:    0.06em;
 
   /* ── Label Plain (mixed-case, no text-transform) ── */
-  --typo-label-plain-lg-size:   var(--font-size-base);
+  --typo-label-plain-lg-size:   var(--text-ds-base);
   --typo-label-plain-lg-weight: var(--font-weight-semibold);
-  --typo-label-plain-lg-leading: var(--line-height-snug);
+  --typo-label-plain-lg-leading: var(--leading-ds-snug);
   --typo-label-plain-lg-tracking: 0em;
 
-  --typo-label-plain-md-size:   var(--font-size-md);
+  --typo-label-plain-md-size:   var(--text-ds-md);
   --typo-label-plain-md-weight: var(--font-weight-semibold);
-  --typo-label-plain-md-leading: var(--line-height-snug);
+  --typo-label-plain-md-leading: var(--leading-ds-snug);
   --typo-label-plain-md-tracking: 0em;
 
-  --typo-label-plain-sm-size:   var(--font-size-sm);
+  --typo-label-plain-sm-size:   var(--text-ds-sm);
   --typo-label-plain-sm-weight: var(--font-weight-semibold);
-  --typo-label-plain-sm-leading: var(--line-height-snug);
+  --typo-label-plain-sm-leading: var(--leading-ds-snug);
   --typo-label-plain-sm-tracking: 0em;
 
   /* ── Caption & Overline ────────────────────── */
-  --typo-caption-size:         var(--font-size-sm);
+  --typo-caption-size:         var(--text-ds-sm);
   --typo-caption-weight:       var(--font-weight-regular);
-  --typo-caption-leading:      var(--line-height-normal);
+  --typo-caption-leading:      var(--leading-ds-normal);
   --typo-caption-tracking:     0.025em;
 
-  --typo-overline-size:        var(--font-size-sm);
+  --typo-overline-size:        var(--text-ds-sm);
   --typo-overline-weight:      var(--font-weight-regular);
-  --typo-overline-leading:     var(--line-height-loose);
+  --typo-overline-leading:     var(--leading-ds-loose);
   --typo-overline-tracking:    0.08em;
 
   /* ── Code (monospace) ──────────────────────── */
-  --typo-code-size:            var(--font-size-sm);
+  --typo-code-size:            var(--text-ds-sm);
   --typo-code-weight:          var(--font-weight-regular);
-  --typo-code-leading:         var(--line-height-normal);
+  --typo-code-leading:         var(--leading-ds-normal);
   --typo-code-tracking:        0em;
   --typo-code-font:            var(--font-mono);
 }

package/dist/tokens/utilities.css

@@ -0,0 +1,328 @@
+/* ═══════════════════════════════════════════════════════════════════
+   CUSTOM UTILITIES (TW4 native)
+
+   `@utility <name>` declares a Tailwind 4 custom utility. Unlike plain
+   CSS classes, @utility participates in TW4's variant system — so you
+   can write `md:text-heading-xl`, `hover:focus-ring`, etc.
+
+   Migrated from the JS preset's `plugin(({ addBase, addUtilities }))`
+   block in 0.37.0.
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* ───────────────────────────────────────────────────────────────────
+   TYPOGRAPHY COMPOSITES
+
+   Each variant sets font-size, font-weight, line-height, letter-spacing
+   in one class. Source of values: typography-semantic.css (--typo-*).
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility text-heading-2xl {
+  font-size:      var(--typo-heading-2xl-size);
+  font-weight:    var(--typo-heading-2xl-weight);
+  line-height:    var(--typo-heading-2xl-leading);
+  letter-spacing: var(--typo-heading-2xl-tracking);
+}
+
+@utility text-heading-xl {
+  font-size:      var(--typo-heading-xl-size);
+  font-weight:    var(--typo-heading-xl-weight);
+  line-height:    var(--typo-heading-xl-leading);
+  letter-spacing: var(--typo-heading-xl-tracking);
+}
+
+@utility text-heading-lg {
+  font-size:      var(--typo-heading-lg-size);
+  font-weight:    var(--typo-heading-lg-weight);
+  line-height:    var(--typo-heading-lg-leading);
+  letter-spacing: var(--typo-heading-lg-tracking);
+}
+
+@utility text-heading-md {
+  font-size:      var(--typo-heading-md-size);
+  font-weight:    var(--typo-heading-md-weight);
+  line-height:    var(--typo-heading-md-leading);
+  letter-spacing: var(--typo-heading-md-tracking);
+}
+
+@utility text-heading-sm {
+  font-size:      var(--typo-heading-sm-size);
+  font-weight:    var(--typo-heading-sm-weight);
+  line-height:    var(--typo-heading-sm-leading);
+  letter-spacing: var(--typo-heading-sm-tracking);
+}
+
+@utility text-heading-xs {
+  font-size:      var(--typo-heading-xs-size);
+  font-weight:    var(--typo-heading-xs-weight);
+  line-height:    var(--typo-heading-xs-leading);
+  letter-spacing: var(--typo-heading-xs-tracking);
+}
+
+@utility text-body-lg {
+  font-size:      var(--typo-body-lg-size);
+  font-weight:    var(--typo-body-lg-weight);
+  line-height:    var(--typo-body-lg-leading);
+  letter-spacing: var(--typo-body-lg-tracking);
+}
+
+@utility text-body-md {
+  font-size:      var(--typo-body-md-size);
+  font-weight:    var(--typo-body-md-weight);
+  line-height:    var(--typo-body-md-leading);
+  letter-spacing: var(--typo-body-md-tracking);
+}
+
+@utility text-body-sm {
+  font-size:      var(--typo-body-sm-size);
+  font-weight:    var(--typo-body-sm-weight);
+  line-height:    var(--typo-body-sm-leading);
+  letter-spacing: var(--typo-body-sm-tracking);
+}
+
+@utility text-body-xs {
+  font-size:      var(--typo-body-xs-size);
+  font-weight:    var(--typo-body-xs-weight);
+  line-height:    var(--typo-body-xs-leading);
+  letter-spacing: var(--typo-body-xs-tracking);
+}
+
+/* UPPERCASE UI labels — uppercase text-transform applied. */
+@utility text-label-lg {
+  font-size:      var(--typo-label-lg-size);
+  font-weight:    var(--typo-label-lg-weight);
+  line-height:    var(--typo-label-lg-leading);
+  letter-spacing: var(--typo-label-lg-tracking);
+  text-transform: uppercase;
+}
+
+@utility text-label-md {
+  font-size:      var(--typo-label-md-size);
+  font-weight:    var(--typo-label-md-weight);
+  line-height:    var(--typo-label-md-leading);
+  letter-spacing: var(--typo-label-md-tracking);
+  text-transform: uppercase;
+}
+
+@utility text-label-sm {
+  font-size:      var(--typo-label-sm-size);
+  font-weight:    var(--typo-label-sm-weight);
+  line-height:    var(--typo-label-sm-leading);
+  letter-spacing: var(--typo-label-sm-tracking);
+  text-transform: uppercase;
+}
+
+@utility text-label-xs {
+  font-size:      var(--typo-label-xs-size);
+  font-weight:    var(--typo-label-xs-weight);
+  line-height:    var(--typo-label-xs-leading);
+  letter-spacing: var(--typo-label-xs-tracking);
+  text-transform: uppercase;
+}
+
+/* Label Plain — mixed case, no text-transform */
+@utility text-label-plain-lg {
+  font-size:      var(--typo-label-plain-lg-size);
+  font-weight:    var(--typo-label-plain-lg-weight);
+  line-height:    var(--typo-label-plain-lg-leading);
+  letter-spacing: var(--typo-label-plain-lg-tracking);
+}
+
+@utility text-label-plain-md {
+  font-size:      var(--typo-label-plain-md-size);
+  font-weight:    var(--typo-label-plain-md-weight);
+  line-height:    var(--typo-label-plain-md-leading);
+  letter-spacing: var(--typo-label-plain-md-tracking);
+}
+
+@utility text-label-plain-sm {
+  font-size:      var(--typo-label-plain-sm-size);
+  font-weight:    var(--typo-label-plain-sm-weight);
+  line-height:    var(--typo-label-plain-sm-leading);
+  letter-spacing: var(--typo-label-plain-sm-tracking);
+}
+
+@utility text-caption {
+  font-size:      var(--typo-caption-size);
+  font-weight:    var(--typo-caption-weight);
+  line-height:    var(--typo-caption-leading);
+  letter-spacing: var(--typo-caption-tracking);
+}
+
+@utility text-overline {
+  font-size:      var(--typo-overline-size);
+  font-weight:    var(--typo-overline-weight);
+  line-height:    var(--typo-overline-leading);
+  letter-spacing: var(--typo-overline-tracking);
+  text-transform: uppercase;
+}
+
+@utility text-code {
+  font-size:      var(--typo-code-size);
+  font-weight:    var(--typo-code-weight);
+  line-height:    var(--typo-code-leading);
+  letter-spacing: var(--typo-code-tracking);
+  font-family:    var(--typo-code-font);
+}
+
+/* ───────────────────────────────────────────────────────────────────
+   NUMBER FORMATTING
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ───────────────────────────────────────────────────────────────────
+   TOUCH TARGET
+   Expands the clickable hit-area to WCAG minimum 44x44 px without
+   affecting visual size. Applied via `::before` pseudo-element.
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility touch-target {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+/* ───────────────────────────────────────────────────────────────────
+   FOCUS RINGS
+   Custom focus-visible ring utilities. Use in place of the default
+   `focus:ring-*` stack when you want the DS-branded ring with offset.
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility focus-ring {
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 var(--border-focus-width) var(--color-surface-base),
+      0 0 0 calc(var(--border-focus-width) + var(--border-focus-offset)) var(--color-accent-9);
+  }
+}
+
+@utility focus-ring-inset {
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--border-focus-width) var(--color-accent-9);
+  }
+}
+
+@utility focus-ring-sm {
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--border-focus-width) var(--color-accent-7);
+  }
+}
+
+/* ───────────────────────────────────────────────────────────────────
+   SAFE AREA INSETS
+   For notched/island devices. `env()` falls back to 0 on browsers
+   without safe-area metadata.
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility pt-safe { padding-top:    env(safe-area-inset-top, 0px); }
+@utility pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
+@utility pl-safe { padding-left:   env(safe-area-inset-left, 0px); }
+@utility pr-safe { padding-right:  env(safe-area-inset-right, 0px); }
+
+@utility p-safe {
+  padding-top:    env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left:   env(safe-area-inset-left, 0px);
+  padding-right:  env(safe-area-inset-right, 0px);
+}
+
+/* ───────────────────────────────────────────────────────────────────
+   Z-INDEX NAMED LAYERS
+
+   TW4 doesn't expose a `--z-*` auto-namespace; built-in z-* utilities
+   (z-10, z-20, ...) are hard-coded from `--default-z-*`. Our named
+   layers are declared here so class-generation picks them up.
+   Consumers still get TW4's default numeric scale alongside these.
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility z-base      { z-index: var(--z-base); }
+@utility z-raised    { z-index: var(--z-raised); }
+@utility z-dropdown  { z-index: var(--z-dropdown); }
+@utility z-sticky    { z-index: var(--z-sticky); }
+@utility z-overlay   { z-index: var(--z-overlay); }
+@utility z-modal     { z-index: var(--z-modal); }
+@utility z-popover   { z-index: var(--z-popover); }
+@utility z-toast     { z-index: var(--z-toast); }
+@utility z-tooltip   { z-index: var(--z-tooltip); }
+
+/* ───────────────────────────────────────────────────────────────────
+   TRANSITION DURATIONS (named scale)
+
+   TW4's built-in `duration-<ms>` utilities (duration-75, duration-100,
+   etc.) still work. These add our named layer on top so consumers can
+   write `duration-fast-01` instead of `duration-70` etc.
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility duration-instant      { transition-duration: var(--duration-instant); }
+@utility duration-fast-01      { transition-duration: var(--duration-fast-01); }
+@utility duration-fast-02      { transition-duration: var(--duration-fast-02); }
+@utility duration-moderate-01  { transition-duration: var(--duration-moderate-01); }
+@utility duration-moderate-01b { transition-duration: var(--duration-moderate-01b); }
+@utility duration-moderate-02  { transition-duration: var(--duration-moderate-02); }
+@utility duration-slow-01      { transition-duration: var(--duration-slow-01); }
+@utility duration-slow-02      { transition-duration: var(--duration-slow-02); }
+
+/* ───────────────────────────────────────────────────────────────────
+   BORDER WIDTH — named DS scale
+
+   TW4 has no `--border-width-*` auto-namespace. The old preset exposed
+   these as `border-ds-{sm,md,lg}` and `border-focus`. Components use
+   `border-focus` for focus-ring thickness; DS-scale border classes are
+   available for consumers that need non-default border widths keyed to
+   our design tokens.
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility border-ds-sm { border-width: var(--border-width-sm); }
+@utility border-ds-md { border-width: var(--border-width-md); }
+@utility border-ds-lg { border-width: var(--border-width-lg); }
+@utility border-focus { border-width: var(--border-focus-width); }
+
+/* ───────────────────────────────────────────────────────────────────
+   OPACITY — action-state opacities
+
+   TW4 has no `--opacity-*` auto-namespace. The old preset mapped
+   `--action-*-opacity` runtime vars to `opacity-action-*` classes.
+   Used for ripple/hover/selection overlays that blend with the
+   underlying surface via opacity rather than a solid color.
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility opacity-action-hover    { opacity: var(--action-hover-opacity); }
+@utility opacity-action-selected { opacity: var(--action-selected-opacity); }
+@utility opacity-action-disabled { opacity: var(--action-disabled-opacity); }
+@utility opacity-action-focus    { opacity: var(--action-focus-opacity); }
+@utility opacity-action-active   { opacity: var(--action-active-opacity); }
+
+/* ───────────────────────────────────────────────────────────────────
+   MAX-WIDTH — named layout widths
+
+   TW4's `max-w-*` utilities come from the `--container-*` or
+   `--spacing-*` namespaces. Our `--max-width` / `--max-width-body`
+   names don't match either, so declare explicit utilities.
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility max-w-layout      { max-width: var(--max-width); }
+@utility max-w-layout-body { max-width: var(--max-width-body); }
+
+/* ───────────────────────────────────────────────────────────────────
+   BACKGROUND IMAGE — brand gradients
+
+   TW4's `bg-*` from `--color-*` wouldn't accept gradient values. The
+   old preset declared these under `backgroundImage` — migrating to
+   explicit utilities here. Consumed by DevalokGrain and brand chrome.
+   ─────────────────────────────────────────────────────────────────── */
+
+@utility bg-gradient-brand      { background-image: var(--gradient-brand-light); }
+@utility bg-gradient-brand-dark { background-image: var(--gradient-brand-dark); }

package/dist/tokens/variants.css

@@ -0,0 +1,14 @@
+/* ═══════════════════════════════════════════════════════════════════
+   CUSTOM VARIANTS (TW4 native)
+
+   `@custom-variant <name> <selector>` registers a Tailwind 4 variant
+   that consumers can use as a prefix, e.g. `dark:bg-surface-raised`.
+
+   Our dark variant matches TW3's classic `darkMode: 'class'` behavior
+   plus one extra: the `.dark` element itself also receives `dark:*`
+   utilities. Matches the official TW4 docs' recommended snippet and
+   removes a footgun where a consumer sets `.dark` on <body> but uses
+   `dark:*` utilities directly on <body>.
+   ═══════════════════════════════════════════════════════════════════ */
+
+@custom-variant dark (&:where(.dark, .dark *));

package/dist/ui/accordion.d.ts

@@ -1,6 +1,6 @@
 "use client";
-import * as React from 'react';
 import * as AccordionPrimitive from '../primitives/react-accordion';
+import * as React from 'react';
 /**
  * Accordion compound component — vertically stacked, collapsible content sections.
  *
@@ -56,5 +56,5 @@ declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPr
 export type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
 export type AccordionTriggerProps = AccordionTriggerExtendedProps;
 export type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
 //# sourceMappingURL=accordion.d.ts.map

package/dist/ui/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,6BAA6B,CAAA;AAQjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,UAAU,6BAA8B,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC/G,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACnC;AAED,QAAA,MAAM,gBAAgB,yGAwBpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAiBpB,CAAA;AAGF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAA;AAC/F,MAAM,MAAM,qBAAqB,GAAG,6BAA6B,CAAA;AACjE,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAA;AAErG,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/ui/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,6BAA6B,CAAA;AAGjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,QAAA,MAAM,SAAS,8JAA0B,CAAA;AAEzC,QAAA,MAAM,aAAa,iKASjB,CAAA;AAGF,UAAU,6BAA8B,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC/G,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACnC;AAED,QAAA,MAAM,gBAAgB,yGAwBpB,CAAA;AAGF,QAAA,MAAM,gBAAgB,oKAiBpB,CAAA;AAGF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAA;AAC/F,MAAM,MAAM,qBAAqB,GAAG,6BAA6B,CAAA;AACjE,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAA;AAErG,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAC,aAAa,EAAE,gBAAgB,EAAE,CAAA"}