1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T9ff,/* ============================================================================= WOOHL DESIGN SYSTEM · CSS ENTRY POINT ----------------------------------------------------------------------------- One import wires the whole system into an app: // app/globals.css @import "tailwindcss"; @import "../design-system/index.css"; @source "../design-system"; `@source` is only needed if the design-system folder sits outside the directory Tailwind scans by default. If the folder is at the repo root alongside app/, Tailwind v4 finds it on its own — but declaring it costs nothing and removes a whole class of "why is this class missing in prod". ORDER MATTERS AND IS NOT ARBITRARY 1 tokens/ primitives register in Tailwind's namespaces 2 themes/ the semantic layer resolves those primitives to roles 3 the bridge maps the semantic layer back into Tailwind colour utilities Product themes come after base so their light blocks sit later in source; the selectors in themes/*.css are written so that ordering is safe either way. ============================================================================ */ /* --- 1. Tokens ------------------------------------------------------------ */ @import "./tokens/color.css"; @import "./tokens/typography.css"; @import "./tokens/spacing.css"; @import "./tokens/radius.css"; @import "./tokens/shadow.css"; @import "./tokens/motion.css"; @import "./tokens/z-index.css"; @import "./tokens/breakpoints.css"; /* --- 2. Themes ------------------------------------------------------------ */ @import "./themes/base.css"; @import "./themes/buyer.css"; @import "./themes/seller.css"; @import "./themes/bulk.css"; @import "./themes/admin.css"; /* --- 3. The semantic → Tailwind bridge ------------------------------------ */ @import "./tokens/themes.css"; /* ----------------------------------------------------------------------------- OPTIONAL: strict mode. tokens/strict.css deletes Tailwind's default colour, radius, shadow, font and font-size scales, so `bg-red-500`, `text-sm` and `shadow-lg` stop existing and the only reachable values are Woohl's. It is NOT imported here, because it has to run between Tailwind and this file: @import "tailwindcss"; @import "../design-system/tokens/strict.css"; @import "../design-system/index.css"; Turn it on once an app has finished migrating — see docs/MIGRATION.md. -------------------------------------------------------------------------- */ 24:T2377,

/* =============================================================================
   WOOHL DESIGN SYSTEM · CSS ENTRY POINT
   -----------------------------------------------------------------------------
   One import wires the whole system into an app:

       // app/globals.css
       @import "tailwindcss";
       @import "../design-system/index.css";
       @source "../design-system";

   `@source` is only needed if the design-system folder sits outside the
   directory Tailwind scans by default. If the folder is at the repo root
   alongside app/, Tailwind v4 finds it on its own — but declaring it costs
   nothing and removes a whole class of "why is this class missing in prod".

   ORDER MATTERS AND IS NOT ARBITRARY
     1  tokens/   primitives register in Tailwind's namespaces
     2  themes/   the semantic layer resolves those primitives to roles
     3  the bridge maps the semantic layer back into Tailwind colour utilities

   Product themes come after base so their light blocks sit later in source; the
   selectors in themes/*.css are written so that ordering is safe either way.
   ============================================================================ */

/* --- 1. Tokens ------------------------------------------------------------ */
@import "./tokens/color.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/radius.css";
@import "./tokens/shadow.css";
@import "./tokens/motion.css";
@import "./tokens/z-index.css";
@import "./tokens/breakpoints.css";

/* --- 2. Themes ------------------------------------------------------------ */
@import "./themes/base.css";
@import "./themes/buyer.css";
@import "./themes/seller.css";
@import "./themes/bulk.css";
@import "./themes/admin.css";

/* --- 3. The semantic → Tailwind bridge ------------------------------------ */
@import "./tokens/themes.css";

/* -----------------------------------------------------------------------------
   OPTIONAL: strict mode.

   tokens/strict.css deletes Tailwind's default colour, radius, shadow, font and
   font-size scales, so `bg-red-500`, `text-sm` and `shadow-lg` stop existing and
   the only reachable values are Woohl's. It is NOT imported here, because it has
   to run between Tailwind and this file:

       @import "tailwindcss";
       @import "../design-system/tokens/strict.css";
       @import "../design-system/index.css";

   Turn it on once an app has finished migrating — see docs/MIGRATION.md.
   -------------------------------------------------------------------------- */

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Tokens & brand"}],["$","$L1e",null,{"children":"Tokens & themes"}],["$","$L1f",null,{"children":"The whole token layer: colour, type, spacing, radius, shadow, motion, z-index and breakpoints, plus the four product themes. Every other item assumes these are present."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"tokens"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/tokens","source":"$23","highlighted":"$24","npm":[],"registry":[],"props":"$undefined"}]}]]}]]}]