@karni/ui 0.3.1 → 0.4.0

package/dist/styles.css

@@ -1,11 +1,37 @@
 /**
  * @karni/ui design tokens.
  *
- * Every color used by @karni/ui components resolves to one of these
- * custom properties (HSL triplets, consumed as `hsl(var(--karni-*) / <alpha>)`
- * by the Tailwind preset). Override any token in your own stylesheet to
- * retheme the whole library; add the `dark` class to <html> (or any ancestor)
- * to switch to the dark palette.
+ * Every visual value a component uses resolves from a custom property in one
+ * of these families:
+ *
+ *   --karni-color-*   colours (any CSS colour: hsl(), oklch(), hex, var())
+ *   --karni-space-*   the spacing scale: --karni-space-unit (0.25rem), and any
+ *                     step --karni-space-<n> (4 = 1rem) to override that step
+ *   --karni-radius-*  corner radii (sm, md, lg, xl, full)
+ *   --karni-font-*    families, sizes, line heights, weights, letter spacing
+ *   --karni-shadow-*  elevation (sm, DEFAULT, md, lg)
+ *   --karni-z-*, --karni-opacity-*, --karni-duration, --karni-ease,
+ *   --karni-border-width*, --karni-ring-*   stacking, opacity, motion, lines
+ *
+ * The Tailwind preset maps its classes to these properties, so `bg-primary`
+ * or `p-4` in a component (or in your own code) reads them. Override any of
+ * them in your own stylesheet to retheme every component; `karni ui detect`
+ * writes karni-theme.css for you from the project's shadcn/ui, Tailwind,
+ * Material UI, Chakra UI or Mantine theme.
+ * Add the `dark` class to <html> (or any ancestor) for the dark palette.
+ *
+ * Both palettes meet WCAG 2.2 AA for every pair the components use (4.5:1
+ * text, 3:1 field boundaries, focus rings, icons and chart series);
+ * tests/contrast.test.ts computes the ratios from the values below. Check
+ * your own overrides against the same pairs.
+ *
+ * The 0.3 HSL-triplet names (--karni-primary, --karni-border, ...) still
+ * work as inputs: each --karni-color-* defaults to its triplet. They are
+ * deprecated in 0.4 and removed in 1.0; set --karni-color-* instead.
+ *
+ * The Django side (the admin, the welcome page) uses this same file: the
+ * karni package ships a byte-for-byte copy as the static file
+ * karni/tokens.css, and a karni test fails until a change here is copied.
  */
 :root {
   color-scheme: light;
@@ -26,24 +52,24 @@
   --karni-secondary-foreground: 220.9 39.3% 11%;
 
   --karni-muted: 220 14.3% 95.9%;
-  --karni-muted-foreground: 220 8.9% 46.1%;
+  --karni-muted-foreground: 220 8.9% 43%;
 
   --karni-accent: 220 14.3% 95.9%;
   --karni-accent-foreground: 220.9 39.3% 11%;
 
-  --karni-destructive: 0 84.2% 60.2%;
+  --karni-destructive: 0 72% 46%;
   --karni-destructive-foreground: 210 20% 98%;
 
   --karni-border: 220 13% 91%;
-  --karni-input: 220 13% 91%;
+  --karni-input: 220 9% 56%;
   --karni-ring: 224 71.4% 4.1%;
 
   --karni-radius: 0.5rem;
 
   /* DataChart series colors (chart-1 .. chart-5). */
   --karni-chart-1: 220 70% 50%;
-  --karni-chart-2: 160 60% 45%;
-  --karni-chart-3: 30 80% 55%;
+  --karni-chart-2: 160 60% 36%;
+  --karni-chart-3: 30 80% 42%;
   --karni-chart-4: 280 65% 60%;
   --karni-chart-5: 340 75% 55%;
 }
@@ -72,11 +98,11 @@
   --karni-accent: 215 27.9% 16.9%;
   --karni-accent-foreground: 210 20% 98%;
 
-  --karni-destructive: 0 62.8% 30.6%;
-  --karni-destructive-foreground: 210 20% 98%;
+  --karni-destructive: 0 84% 67%;
+  --karni-destructive-foreground: 224 71.4% 4.1%;
 
   --karni-border: 215 27.9% 16.9%;
-  --karni-input: 215 27.9% 16.9%;
+  --karni-input: 215 14% 42%;
   --karni-ring: 216 12.2% 83.9%;
 
   --karni-chart-1: 217 91% 60%;
@@ -85,3 +111,138 @@
   --karni-chart-4: 280 65% 60%;
   --karni-chart-5: 340 75% 55%;
 }
+
+/* The colour layer components read. Declared on .dark as well so a dark
+   subtree recomputes them from its own values. */
+:root,
+.dark {
+  --karni-color-background: hsl(var(--karni-background));
+  --karni-color-foreground: hsl(var(--karni-foreground));
+  --karni-color-card: hsl(var(--karni-card));
+  --karni-color-card-foreground: hsl(var(--karni-card-foreground));
+  --karni-color-popover: hsl(var(--karni-popover));
+  --karni-color-popover-foreground: hsl(var(--karni-popover-foreground));
+  --karni-color-primary: hsl(var(--karni-primary));
+  --karni-color-primary-foreground: hsl(var(--karni-primary-foreground));
+  --karni-color-primary-hover: color-mix(in srgb, var(--karni-color-primary) 90%, transparent);
+  --karni-color-secondary: hsl(var(--karni-secondary));
+  --karni-color-secondary-foreground: hsl(var(--karni-secondary-foreground));
+  --karni-color-secondary-hover: color-mix(in srgb, var(--karni-color-secondary) 80%, transparent);
+  --karni-color-muted: hsl(var(--karni-muted));
+  --karni-color-muted-foreground: hsl(var(--karni-muted-foreground));
+  --karni-color-muted-subtle: color-mix(in srgb, var(--karni-color-muted) 50%, transparent);
+  --karni-color-accent: hsl(var(--karni-accent));
+  --karni-color-accent-foreground: hsl(var(--karni-accent-foreground));
+  --karni-color-destructive: hsl(var(--karni-destructive));
+  --karni-color-destructive-foreground: hsl(var(--karni-destructive-foreground));
+  --karni-color-destructive-hover: color-mix(
+    in srgb,
+    var(--karni-color-destructive) 90%,
+    transparent
+  );
+  --karni-color-destructive-subtle: color-mix(
+    in srgb,
+    var(--karni-color-destructive) 10%,
+    transparent
+  );
+  --karni-color-destructive-border: color-mix(
+    in srgb,
+    var(--karni-color-destructive) 50%,
+    transparent
+  );
+  --karni-color-border: hsl(var(--karni-border));
+  --karni-color-input: hsl(var(--karni-input));
+  --karni-color-ring: hsl(var(--karni-ring));
+  --karni-color-overlay: color-mix(in srgb, var(--karni-color-foreground) 40%, transparent);
+  --karni-color-chart-1: hsl(var(--karni-chart-1));
+  --karni-color-chart-2: hsl(var(--karni-chart-2));
+  --karni-color-chart-3: hsl(var(--karni-chart-3));
+  --karni-color-chart-4: hsl(var(--karni-chart-4));
+  --karni-color-chart-5: hsl(var(--karni-chart-5));
+}
+
+/* The scrim behind a modal or the mobile drawer dims the page in both
+   themes: the dark theme's foreground is light, so its scrim is the
+   background colour instead. */
+.dark {
+  --karni-color-overlay: color-mix(in srgb, var(--karni-color-background) 80%, transparent);
+}
+
+/* Size, type, elevation, stacking and motion. The preset falls back to the
+   same values when a property is unset. */
+:root {
+  --karni-space-unit: 0.25rem;
+
+  --karni-radius-sm: calc(var(--karni-radius) - 4px);
+  --karni-radius-md: calc(var(--karni-radius) - 2px);
+  --karni-radius-lg: var(--karni-radius);
+  --karni-radius-xl: calc(var(--karni-radius) + 4px);
+  --karni-radius-full: 9999px;
+
+  --karni-font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --karni-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  --karni-font-size-xs: 0.75rem;
+  --karni-font-size-sm: 0.875rem;
+  --karni-font-size-base: 1rem;
+  --karni-font-size-lg: 1.125rem;
+  --karni-font-size-xl: 1.25rem;
+  --karni-font-size-2xl: 1.5rem;
+  --karni-font-leading-xs: 1rem;
+  --karni-font-leading-sm: 1.25rem;
+  --karni-font-leading-base: 1.5rem;
+  --karni-font-leading-lg: 1.75rem;
+  --karni-font-leading-xl: 1.75rem;
+  --karni-font-leading-2xl: 2rem;
+  --karni-font-leading-none: 1;
+  --karni-font-weight-normal: 400;
+  --karni-font-weight-medium: 500;
+  --karni-font-weight-semibold: 600;
+  --karni-font-weight-bold: 700;
+  --karni-font-tracking-tight: -0.025em;
+  --karni-font-tracking-wide: 0.025em;
+  --karni-font-underline-offset: 4px;
+
+  /* Tailwind 4's scale (its shadow-sm is Tailwind 3's bare shadow). */
+  --karni-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --karni-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --karni-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --karni-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  --karni-border-width: 1px;
+  --karni-border-width-2: 2px;
+  --karni-ring-width: 2px;
+  --karni-ring-width-1: 1px;
+  --karni-ring-offset-width: 2px;
+
+  /* ResourceTable scrolls inside a box this tall (its header sticks); `none`
+     lets the page scroll instead. */
+  --karni-table-max-height: 70vh;
+
+  --karni-z-raised: 10;
+  --karni-z-drawer: 40;
+  --karni-z-popover: 50;
+  --karni-z-modal: 50;
+  --karni-z-toast: 100;
+
+  --karni-opacity-50: 0.5;
+  --karni-opacity-60: 0.6;
+  --karni-opacity-70: 0.7;
+  --karni-opacity-90: 0.9;
+
+  --karni-duration: 150ms;
+  --karni-duration-pulse: 2s;
+  --karni-duration-spin: 1s;
+  --karni-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --karni-duration: 0ms;
+    --karni-duration-pulse: 0s;
+    --karni-duration-spin: 0s;
+  }
+}

package/dist/tailwind-preset.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a={darkMode:"class",theme:{extend:{colors:{background:"hsl(var(--karni-background) / <alpha-value>)",foreground:"hsl(var(--karni-foreground) / <alpha-value>)",card:{DEFAULT:"hsl(var(--karni-card) / <alpha-value>)",foreground:"hsl(var(--karni-card-foreground) / <alpha-value>)"},popover:{DEFAULT:"hsl(var(--karni-popover) / <alpha-value>)",foreground:"hsl(var(--karni-popover-foreground) / <alpha-value>)"},primary:{DEFAULT:"hsl(var(--karni-primary) / <alpha-value>)",foreground:"hsl(var(--karni-primary-foreground) / <alpha-value>)"},secondary:{DEFAULT:"hsl(var(--karni-secondary) / <alpha-value>)",foreground:"hsl(var(--karni-secondary-foreground) / <alpha-value>)"},muted:{DEFAULT:"hsl(var(--karni-muted) / <alpha-value>)",foreground:"hsl(var(--karni-muted-foreground) / <alpha-value>)"},accent:{DEFAULT:"hsl(var(--karni-accent) / <alpha-value>)",foreground:"hsl(var(--karni-accent-foreground) / <alpha-value>)"},destructive:{DEFAULT:"hsl(var(--karni-destructive) / <alpha-value>)",foreground:"hsl(var(--karni-destructive-foreground) / <alpha-value>)"},border:"hsl(var(--karni-border) / <alpha-value>)",input:"hsl(var(--karni-input) / <alpha-value>)",ring:"hsl(var(--karni-ring) / <alpha-value>)",chart:{1:"hsl(var(--karni-chart-1) / <alpha-value>)",2:"hsl(var(--karni-chart-2) / <alpha-value>)",3:"hsl(var(--karni-chart-3) / <alpha-value>)",4:"hsl(var(--karni-chart-4) / <alpha-value>)",5:"hsl(var(--karni-chart-5) / <alpha-value>)"}},borderColor:{DEFAULT:"hsl(var(--karni-border) / <alpha-value>)"},borderRadius:{lg:"var(--karni-radius)",md:"calc(var(--karni-radius) - 2px)",sm:"calc(var(--karni-radius) - 4px)"}}}};exports.default=a;
-//# sourceMappingURL=tailwind-preset.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});function e(e){return`color-mix(in srgb, var(--karni-color-${e}) calc(<alpha-value> * 100%), transparent)`}var t=[.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96,128];function n(){let e={0:`0px`,px:`var(--karni-space-px, 1px)`};for(let n of t){let t=String(n).replace(`.`,`-`);e[String(n)]=`var(--karni-space-${t}, calc(var(--karni-space-unit, 0.25rem) * ${n}))`}return e}var r={xs:[`0.75rem`,`1rem`],sm:[`0.875rem`,`1.25rem`],base:[`1rem`,`1.5rem`],lg:[`1.125rem`,`1.75rem`],xl:[`1.25rem`,`1.75rem`],"2xl":[`1.5rem`,`2rem`]};function i(){return Object.fromEntries(Object.entries(r).map(([e,[t,n]])=>[e,[`var(--karni-font-size-${e}, ${t})`,{lineHeight:`var(--karni-font-leading-${e}, ${n})`}]]))}var a={darkMode:`class`,theme:{extend:{colors:{background:e(`background`),foreground:e(`foreground`),card:{DEFAULT:e(`card`),foreground:e(`card-foreground`)},popover:{DEFAULT:e(`popover`),foreground:e(`popover-foreground`)},primary:{DEFAULT:e(`primary`),foreground:e(`primary-foreground`),hover:e(`primary-hover`)},secondary:{DEFAULT:e(`secondary`),foreground:e(`secondary-foreground`),hover:e(`secondary-hover`)},muted:{DEFAULT:e(`muted`),foreground:e(`muted-foreground`),subtle:e(`muted-subtle`)},accent:{DEFAULT:e(`accent`),foreground:e(`accent-foreground`)},destructive:{DEFAULT:e(`destructive`),foreground:e(`destructive-foreground`),hover:e(`destructive-hover`),subtle:e(`destructive-subtle`),border:e(`destructive-border`)},border:e(`border`),input:e(`input`),ring:e(`ring`),overlay:e(`overlay`),chart:{1:e(`chart-1`),2:e(`chart-2`),3:e(`chart-3`),4:e(`chart-4`),5:e(`chart-5`)}},borderColor:{DEFAULT:e(`border`)},spacing:n(),borderRadius:{DEFAULT:`var(--karni-radius-sm, 0.25rem)`,sm:`var(--karni-radius-sm, 0.25rem)`,md:`var(--karni-radius-md, 0.375rem)`,lg:`var(--karni-radius-lg, 0.5rem)`,xl:`var(--karni-radius-xl, 0.75rem)`,full:`var(--karni-radius-full, 9999px)`},fontFamily:{sans:`var(--karni-font-sans, ui-sans-serif, system-ui, sans-serif)`,mono:`var(--karni-font-mono, ui-monospace, monospace)`},fontSize:i(),fontWeight:{normal:`var(--karni-font-weight-normal, 400)`,medium:`var(--karni-font-weight-medium, 500)`,semibold:`var(--karni-font-weight-semibold, 600)`,bold:`var(--karni-font-weight-bold, 700)`},lineHeight:{none:`var(--karni-font-leading-none, 1)`},textUnderlineOffset:{4:`var(--karni-font-underline-offset, 4px)`},letterSpacing:{tight:`var(--karni-font-tracking-tight, -0.025em)`,wide:`var(--karni-font-tracking-wide, 0.025em)`},boxShadow:{sm:`var(--karni-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1))`,DEFAULT:`var(--karni-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1))`,md:`var(--karni-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))`,lg:`var(--karni-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1))`},borderWidth:{DEFAULT:`var(--karni-border-width, 1px)`,2:`var(--karni-border-width-2, 2px)`},divideWidth:{DEFAULT:`var(--karni-border-width, 1px)`},outlineWidth:{DEFAULT:`var(--karni-border-width, 1px)`},ringWidth:{1:`var(--karni-ring-width-1, 1px)`,2:`var(--karni-ring-width, 2px)`},ringOffsetWidth:{2:`var(--karni-ring-offset-width, 2px)`},zIndex:{raised:`var(--karni-z-raised, 10)`,drawer:`var(--karni-z-drawer, 40)`,popover:`var(--karni-z-popover, 50)`,modal:`var(--karni-z-modal, 50)`,toast:`var(--karni-z-toast, 100)`},opacity:{50:`var(--karni-opacity-50, 0.5)`,60:`var(--karni-opacity-60, 0.6)`,70:`var(--karni-opacity-70, 0.7)`,90:`var(--karni-opacity-90, 0.9)`},transitionDuration:{DEFAULT:`var(--karni-duration, 150ms)`},transitionTimingFunction:{DEFAULT:`var(--karni-ease, cubic-bezier(0.4, 0, 0.2, 1))`},animation:{pulse:`pulse var(--karni-duration-pulse, 2s) cubic-bezier(0.4, 0, 0.6, 1) infinite`,spin:`spin var(--karni-duration-spin, 1s) linear infinite`}}}};exports.SPACE_STEPS=t,exports.default=a;
+//# sourceMappingURL=tailwind-preset.cjs.map

package/dist/tailwind-preset.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-preset.cjs","sources":["../tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind (v3) preset for @karni/ui consumers.\n *\n * Usage (tailwind.config.ts of the consuming app):\n *\n * ```ts\n * import karniPreset from \"@karni/ui/tailwind-preset\";\n *\n * export default {\n *   presets: [karniPreset],\n *   content: [\n *     \"./src/**\\/*.{ts,tsx}\",\n *     \"./node_modules/@karni/ui/dist/**\\/*.js\",\n *   ],\n * };\n * ```\n *\n * Also import \"@karni/ui/styles.css\" once (it defines the --karni-* tokens).\n * Tailwind v4 users: see the README recipe (@source into dist) instead.\n */\nimport type { Config } from \"tailwindcss\";\n\nconst karniPreset = {\n  // `as const` keeps the literal type so the preset stays assignable to\n  // Config[\"presets\"] when consumers spread it into their own config.\n  darkMode: \"class\" as const,\n  theme: {\n    extend: {\n      colors: {\n        background: \"hsl(var(--karni-background) / <alpha-value>)\",\n        foreground: \"hsl(var(--karni-foreground) / <alpha-value>)\",\n        card: {\n          DEFAULT: \"hsl(var(--karni-card) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-card-foreground) / <alpha-value>)\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--karni-popover) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-popover-foreground) / <alpha-value>)\",\n        },\n        primary: {\n          DEFAULT: \"hsl(var(--karni-primary) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-primary-foreground) / <alpha-value>)\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--karni-secondary) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-secondary-foreground) / <alpha-value>)\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--karni-muted) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-muted-foreground) / <alpha-value>)\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--karni-accent) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-accent-foreground) / <alpha-value>)\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--karni-destructive) / <alpha-value>)\",\n          foreground: \"hsl(var(--karni-destructive-foreground) / <alpha-value>)\",\n        },\n        border: \"hsl(var(--karni-border) / <alpha-value>)\",\n        input: \"hsl(var(--karni-input) / <alpha-value>)\",\n        ring: \"hsl(var(--karni-ring) / <alpha-value>)\",\n        chart: {\n          \"1\": \"hsl(var(--karni-chart-1) / <alpha-value>)\",\n          \"2\": \"hsl(var(--karni-chart-2) / <alpha-value>)\",\n          \"3\": \"hsl(var(--karni-chart-3) / <alpha-value>)\",\n          \"4\": \"hsl(var(--karni-chart-4) / <alpha-value>)\",\n          \"5\": \"hsl(var(--karni-chart-5) / <alpha-value>)\",\n        },\n      },\n      borderColor: {\n        // A bare `border` class uses the token, never Tailwind's default gray.\n        DEFAULT: \"hsl(var(--karni-border) / <alpha-value>)\",\n      },\n      borderRadius: {\n        lg: \"var(--karni-radius)\",\n        md: \"calc(var(--karni-radius) - 2px)\",\n        sm: \"calc(var(--karni-radius) - 4px)\",\n      },\n    },\n  },\n} satisfies Omit<Config, \"content\">;\n\nexport default karniPreset;\n"],"names":["karniPreset"],"mappings":"4GAsBA,MAAMA,EAAc,CAGlB,SAAU,QACV,MAAO,CACL,OAAQ,CACN,OAAQ,CACN,WAAY,+CACZ,WAAY,+CACZ,KAAM,CACJ,QAAS,yCACT,WAAY,mDAAA,EAEd,QAAS,CACP,QAAS,4CACT,WAAY,sDAAA,EAEd,QAAS,CACP,QAAS,4CACT,WAAY,sDAAA,EAEd,UAAW,CACT,QAAS,8CACT,WAAY,wDAAA,EAEd,MAAO,CACL,QAAS,0CACT,WAAY,oDAAA,EAEd,OAAQ,CACN,QAAS,2CACT,WAAY,qDAAA,EAEd,YAAa,CACX,QAAS,gDACT,WAAY,0DAAA,EAEd,OAAQ,2CACR,MAAO,0CACP,KAAM,yCACN,MAAO,CACL,EAAK,4CACL,EAAK,4CACL,EAAK,4CACL,EAAK,4CACL,EAAK,2CAAA,CACP,EAEF,YAAa,CAEX,QAAS,0CAAA,EAEX,aAAc,CACZ,GAAI,sBACJ,GAAI,kCACJ,GAAI,iCAAA,CACN,CACF,CAEJ"}
+{"version":3,"file":"tailwind-preset.cjs","names":["color","name","SPACE_STEPS","spacing","scale","step","FONT_SIZES","fontSize","size","leading","karniPreset"],"sources":["../tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind preset for @karni/ui consumers (Tailwind 3, and 4 through @config).\n *\n * Usage (tailwind.config.ts of the consuming app):\n *\n * ```ts\n * import karniPreset from \"@karni/ui/tailwind-preset\";\n *\n * export default {\n *   presets: [karniPreset],\n *   content: [\n *     \"./src/**\\/*.{ts,tsx}\",\n *     \"./node_modules/@karni/ui/dist/**\\/*.js\",\n *   ],\n * };\n * ```\n *\n * Also import \"@karni/ui/styles.css\" once (it defines the --karni-* tokens).\n * Tailwind v4 loads the same config through `@config` in CSS, next to\n * `@import \"@karni/ui/tailwind-v4.css\"` (see the README).\n */\nimport type { Config } from \"tailwindcss\";\n\n/**\n * A colour token as a Tailwind colour. Wrapping it in color-mix with\n * `<alpha-value>` keeps opacity modifiers (`bg-primary/50`) working in\n * Tailwind 3 as well as 4, for any colour format the token holds.\n */\nfunction color(name: string): string {\n  return `color-mix(in srgb, var(--karni-color-${name}) calc(<alpha-value> * 100%), transparent)`;\n}\n\n/** The spacing scale: each step reads --karni-space-<n>, else n × --karni-space-unit. */\nexport const SPACE_STEPS = [\n  0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48,\n  52, 56, 60, 64, 72, 80, 96, 128,\n] as const;\n\nfunction spacing(): Record<string, string> {\n  const scale: Record<string, string> = {\n    0: \"0px\",\n    px: \"var(--karni-space-px, 1px)\",\n  };\n  for (const step of SPACE_STEPS) {\n    const name = String(step).replace(\".\", \"-\");\n    scale[String(step)] =\n      `var(--karni-space-${name}, calc(var(--karni-space-unit, 0.25rem) * ${step}))`;\n  }\n  return scale;\n}\n\nconst FONT_SIZES = {\n  xs: [\"0.75rem\", \"1rem\"],\n  sm: [\"0.875rem\", \"1.25rem\"],\n  base: [\"1rem\", \"1.5rem\"],\n  lg: [\"1.125rem\", \"1.75rem\"],\n  xl: [\"1.25rem\", \"1.75rem\"],\n  \"2xl\": [\"1.5rem\", \"2rem\"],\n} as const;\n\nfunction fontSize(): Record<string, [string, { lineHeight: string }]> {\n  return Object.fromEntries(\n    Object.entries(FONT_SIZES).map(([name, [size, leading]]) => [\n      name,\n      [\n        `var(--karni-font-size-${name}, ${size})`,\n        { lineHeight: `var(--karni-font-leading-${name}, ${leading})` },\n      ],\n    ]),\n  );\n}\n\nconst karniPreset = {\n  // `as const` keeps the literal type so the preset stays assignable to\n  // Config[\"presets\"] when consumers spread it into their own config.\n  darkMode: \"class\" as const,\n  theme: {\n    extend: {\n      colors: {\n        background: color(\"background\"),\n        foreground: color(\"foreground\"),\n        card: { DEFAULT: color(\"card\"), foreground: color(\"card-foreground\") },\n        popover: { DEFAULT: color(\"popover\"), foreground: color(\"popover-foreground\") },\n        primary: {\n          DEFAULT: color(\"primary\"),\n          foreground: color(\"primary-foreground\"),\n          hover: color(\"primary-hover\"),\n        },\n        secondary: {\n          DEFAULT: color(\"secondary\"),\n          foreground: color(\"secondary-foreground\"),\n          hover: color(\"secondary-hover\"),\n        },\n        muted: {\n          DEFAULT: color(\"muted\"),\n          foreground: color(\"muted-foreground\"),\n          subtle: color(\"muted-subtle\"),\n        },\n        accent: { DEFAULT: color(\"accent\"), foreground: color(\"accent-foreground\") },\n        destructive: {\n          DEFAULT: color(\"destructive\"),\n          foreground: color(\"destructive-foreground\"),\n          hover: color(\"destructive-hover\"),\n          subtle: color(\"destructive-subtle\"),\n          border: color(\"destructive-border\"),\n        },\n        border: color(\"border\"),\n        input: color(\"input\"),\n        ring: color(\"ring\"),\n        overlay: color(\"overlay\"),\n        chart: {\n          \"1\": color(\"chart-1\"),\n          \"2\": color(\"chart-2\"),\n          \"3\": color(\"chart-3\"),\n          \"4\": color(\"chart-4\"),\n          \"5\": color(\"chart-5\"),\n        },\n      },\n      borderColor: {\n        // A bare `border` class uses the token, never Tailwind's default gray.\n        DEFAULT: color(\"border\"),\n      },\n      spacing: spacing(),\n      borderRadius: {\n        DEFAULT: \"var(--karni-radius-sm, 0.25rem)\",\n        sm: \"var(--karni-radius-sm, 0.25rem)\",\n        md: \"var(--karni-radius-md, 0.375rem)\",\n        lg: \"var(--karni-radius-lg, 0.5rem)\",\n        xl: \"var(--karni-radius-xl, 0.75rem)\",\n        full: \"var(--karni-radius-full, 9999px)\",\n      },\n      fontFamily: {\n        sans: \"var(--karni-font-sans, ui-sans-serif, system-ui, sans-serif)\",\n        mono: \"var(--karni-font-mono, ui-monospace, monospace)\",\n      },\n      fontSize: fontSize(),\n      fontWeight: {\n        normal: \"var(--karni-font-weight-normal, 400)\",\n        medium: \"var(--karni-font-weight-medium, 500)\",\n        semibold: \"var(--karni-font-weight-semibold, 600)\",\n        bold: \"var(--karni-font-weight-bold, 700)\",\n      },\n      lineHeight: { none: \"var(--karni-font-leading-none, 1)\" },\n      textUnderlineOffset: { \"4\": \"var(--karni-font-underline-offset, 4px)\" },\n      letterSpacing: {\n        tight: \"var(--karni-font-tracking-tight, -0.025em)\",\n        wide: \"var(--karni-font-tracking-wide, 0.025em)\",\n      },\n      boxShadow: {\n        sm: \"var(--karni-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1))\",\n        DEFAULT: \"var(--karni-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1))\",\n        md: \"var(--karni-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))\",\n        lg: \"var(--karni-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1))\",\n      },\n      borderWidth: {\n        DEFAULT: \"var(--karni-border-width, 1px)\",\n        \"2\": \"var(--karni-border-width-2, 2px)\",\n      },\n      divideWidth: { DEFAULT: \"var(--karni-border-width, 1px)\" },\n      outlineWidth: { DEFAULT: \"var(--karni-border-width, 1px)\" },\n      ringWidth: {\n        \"1\": \"var(--karni-ring-width-1, 1px)\",\n        \"2\": \"var(--karni-ring-width, 2px)\",\n      },\n      ringOffsetWidth: { \"2\": \"var(--karni-ring-offset-width, 2px)\" },\n      zIndex: {\n        raised: \"var(--karni-z-raised, 10)\",\n        drawer: \"var(--karni-z-drawer, 40)\",\n        popover: \"var(--karni-z-popover, 50)\",\n        modal: \"var(--karni-z-modal, 50)\",\n        toast: \"var(--karni-z-toast, 100)\",\n      },\n      opacity: {\n        \"50\": \"var(--karni-opacity-50, 0.5)\",\n        \"60\": \"var(--karni-opacity-60, 0.6)\",\n        \"70\": \"var(--karni-opacity-70, 0.7)\",\n        \"90\": \"var(--karni-opacity-90, 0.9)\",\n      },\n      transitionDuration: { DEFAULT: \"var(--karni-duration, 150ms)\" },\n      transitionTimingFunction: { DEFAULT: \"var(--karni-ease, cubic-bezier(0.4, 0, 0.2, 1))\" },\n      animation: {\n        pulse: \"pulse var(--karni-duration-pulse, 2s) cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n        spin: \"spin var(--karni-duration-spin, 1s) linear infinite\",\n      },\n    },\n  },\n} satisfies Omit<Config, \"content\">;\n\nexport default karniPreset;\n"],"mappings":"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"}

package/dist/tailwind-preset.d.ts

@@ -1,3 +1,5 @@
+/** The spacing scale: each step reads --karni-space-<n>, else n × --karni-space-unit. */
+export declare const SPACE_STEPS: readonly [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96, 128];
 declare const karniPreset: {
     darkMode: "class";
     theme: {
@@ -16,14 +18,17 @@ declare const karniPreset: {
                 primary: {
                     DEFAULT: string;
                     foreground: string;
+                    hover: string;
                 };
                 secondary: {
                     DEFAULT: string;
                     foreground: string;
+                    hover: string;
                 };
                 muted: {
                     DEFAULT: string;
                     foreground: string;
+                    subtle: string;
                 };
                 accent: {
                     DEFAULT: string;
@@ -32,10 +37,14 @@ declare const karniPreset: {
                 destructive: {
                     DEFAULT: string;
                     foreground: string;
+                    hover: string;
+                    subtle: string;
+                    border: string;
                 };
                 border: string;
                 input: string;
                 ring: string;
+                overlay: string;
                 chart: {
                     "1": string;
                     "2": string;
@@ -47,10 +56,83 @@ declare const karniPreset: {
             borderColor: {
                 DEFAULT: string;
             };
+            spacing: Record<string, string>;
             borderRadius: {
-                lg: string;
+                DEFAULT: string;
+                sm: string;
                 md: string;
+                lg: string;
+                xl: string;
+                full: string;
+            };
+            fontFamily: {
+                sans: string;
+                mono: string;
+            };
+            fontSize: Record<string, [string, {
+                lineHeight: string;
+            }]>;
+            fontWeight: {
+                normal: string;
+                medium: string;
+                semibold: string;
+                bold: string;
+            };
+            lineHeight: {
+                none: string;
+            };
+            textUnderlineOffset: {
+                "4": string;
+            };
+            letterSpacing: {
+                tight: string;
+                wide: string;
+            };
+            boxShadow: {
                 sm: string;
+                DEFAULT: string;
+                md: string;
+                lg: string;
+            };
+            borderWidth: {
+                DEFAULT: string;
+                "2": string;
+            };
+            divideWidth: {
+                DEFAULT: string;
+            };
+            outlineWidth: {
+                DEFAULT: string;
+            };
+            ringWidth: {
+                "1": string;
+                "2": string;
+            };
+            ringOffsetWidth: {
+                "2": string;
+            };
+            zIndex: {
+                raised: string;
+                drawer: string;
+                popover: string;
+                modal: string;
+                toast: string;
+            };
+            opacity: {
+                "50": string;
+                "60": string;
+                "70": string;
+                "90": string;
+            };
+            transitionDuration: {
+                DEFAULT: string;
+            };
+            transitionTimingFunction: {
+                DEFAULT: string;
+            };
+            animation: {
+                pulse: string;
+                spin: string;
             };
         };
     };

package/dist/tailwind-preset.js

@@ -1,64 +1,183 @@
-const a = {
-  // `as const` keeps the literal type so the preset stays assignable to
-  // Config["presets"] when consumers spread it into their own config.
-  darkMode: "class",
-  theme: {
-    extend: {
-      colors: {
-        background: "hsl(var(--karni-background) / <alpha-value>)",
-        foreground: "hsl(var(--karni-foreground) / <alpha-value>)",
-        card: {
-          DEFAULT: "hsl(var(--karni-card) / <alpha-value>)",
-          foreground: "hsl(var(--karni-card-foreground) / <alpha-value>)"
-        },
-        popover: {
-          DEFAULT: "hsl(var(--karni-popover) / <alpha-value>)",
-          foreground: "hsl(var(--karni-popover-foreground) / <alpha-value>)"
-        },
-        primary: {
-          DEFAULT: "hsl(var(--karni-primary) / <alpha-value>)",
-          foreground: "hsl(var(--karni-primary-foreground) / <alpha-value>)"
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--karni-secondary) / <alpha-value>)",
-          foreground: "hsl(var(--karni-secondary-foreground) / <alpha-value>)"
-        },
-        muted: {
-          DEFAULT: "hsl(var(--karni-muted) / <alpha-value>)",
-          foreground: "hsl(var(--karni-muted-foreground) / <alpha-value>)"
-        },
-        accent: {
-          DEFAULT: "hsl(var(--karni-accent) / <alpha-value>)",
-          foreground: "hsl(var(--karni-accent-foreground) / <alpha-value>)"
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--karni-destructive) / <alpha-value>)",
-          foreground: "hsl(var(--karni-destructive-foreground) / <alpha-value>)"
-        },
-        border: "hsl(var(--karni-border) / <alpha-value>)",
-        input: "hsl(var(--karni-input) / <alpha-value>)",
-        ring: "hsl(var(--karni-ring) / <alpha-value>)",
-        chart: {
-          1: "hsl(var(--karni-chart-1) / <alpha-value>)",
-          2: "hsl(var(--karni-chart-2) / <alpha-value>)",
-          3: "hsl(var(--karni-chart-3) / <alpha-value>)",
-          4: "hsl(var(--karni-chart-4) / <alpha-value>)",
-          5: "hsl(var(--karni-chart-5) / <alpha-value>)"
-        }
-      },
-      borderColor: {
-        // A bare `border` class uses the token, never Tailwind's default gray.
-        DEFAULT: "hsl(var(--karni-border) / <alpha-value>)"
-      },
-      borderRadius: {
-        lg: "var(--karni-radius)",
-        md: "calc(var(--karni-radius) - 2px)",
-        sm: "calc(var(--karni-radius) - 4px)"
-      }
-    }
-  }
+//#region tailwind-preset.ts
+function e(e) {
+	return `color-mix(in srgb, var(--karni-color-${e}) calc(<alpha-value> * 100%), transparent)`;
+}
+var t = [
+	.5,
+	1,
+	1.5,
+	2,
+	2.5,
+	3,
+	3.5,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9,
+	10,
+	11,
+	12,
+	14,
+	16,
+	20,
+	24,
+	28,
+	32,
+	36,
+	40,
+	44,
+	48,
+	52,
+	56,
+	60,
+	64,
+	72,
+	80,
+	96,
+	128
+];
+function n() {
+	let e = {
+		0: "0px",
+		px: "var(--karni-space-px, 1px)"
+	};
+	for (let n of t) {
+		let t = String(n).replace(".", "-");
+		e[String(n)] = `var(--karni-space-${t}, calc(var(--karni-space-unit, 0.25rem) * ${n}))`;
+	}
+	return e;
+}
+var r = {
+	xs: ["0.75rem", "1rem"],
+	sm: ["0.875rem", "1.25rem"],
+	base: ["1rem", "1.5rem"],
+	lg: ["1.125rem", "1.75rem"],
+	xl: ["1.25rem", "1.75rem"],
+	"2xl": ["1.5rem", "2rem"]
 };
-export {
-  a as default
+function i() {
+	return Object.fromEntries(Object.entries(r).map(([e, [t, n]]) => [e, [`var(--karni-font-size-${e}, ${t})`, { lineHeight: `var(--karni-font-leading-${e}, ${n})` }]]));
+}
+var a = {
+	darkMode: "class",
+	theme: { extend: {
+		colors: {
+			background: e("background"),
+			foreground: e("foreground"),
+			card: {
+				DEFAULT: e("card"),
+				foreground: e("card-foreground")
+			},
+			popover: {
+				DEFAULT: e("popover"),
+				foreground: e("popover-foreground")
+			},
+			primary: {
+				DEFAULT: e("primary"),
+				foreground: e("primary-foreground"),
+				hover: e("primary-hover")
+			},
+			secondary: {
+				DEFAULT: e("secondary"),
+				foreground: e("secondary-foreground"),
+				hover: e("secondary-hover")
+			},
+			muted: {
+				DEFAULT: e("muted"),
+				foreground: e("muted-foreground"),
+				subtle: e("muted-subtle")
+			},
+			accent: {
+				DEFAULT: e("accent"),
+				foreground: e("accent-foreground")
+			},
+			destructive: {
+				DEFAULT: e("destructive"),
+				foreground: e("destructive-foreground"),
+				hover: e("destructive-hover"),
+				subtle: e("destructive-subtle"),
+				border: e("destructive-border")
+			},
+			border: e("border"),
+			input: e("input"),
+			ring: e("ring"),
+			overlay: e("overlay"),
+			chart: {
+				1: e("chart-1"),
+				2: e("chart-2"),
+				3: e("chart-3"),
+				4: e("chart-4"),
+				5: e("chart-5")
+			}
+		},
+		borderColor: { DEFAULT: e("border") },
+		spacing: n(),
+		borderRadius: {
+			DEFAULT: "var(--karni-radius-sm, 0.25rem)",
+			sm: "var(--karni-radius-sm, 0.25rem)",
+			md: "var(--karni-radius-md, 0.375rem)",
+			lg: "var(--karni-radius-lg, 0.5rem)",
+			xl: "var(--karni-radius-xl, 0.75rem)",
+			full: "var(--karni-radius-full, 9999px)"
+		},
+		fontFamily: {
+			sans: "var(--karni-font-sans, ui-sans-serif, system-ui, sans-serif)",
+			mono: "var(--karni-font-mono, ui-monospace, monospace)"
+		},
+		fontSize: i(),
+		fontWeight: {
+			normal: "var(--karni-font-weight-normal, 400)",
+			medium: "var(--karni-font-weight-medium, 500)",
+			semibold: "var(--karni-font-weight-semibold, 600)",
+			bold: "var(--karni-font-weight-bold, 700)"
+		},
+		lineHeight: { none: "var(--karni-font-leading-none, 1)" },
+		textUnderlineOffset: { 4: "var(--karni-font-underline-offset, 4px)" },
+		letterSpacing: {
+			tight: "var(--karni-font-tracking-tight, -0.025em)",
+			wide: "var(--karni-font-tracking-wide, 0.025em)"
+		},
+		boxShadow: {
+			sm: "var(--karni-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1))",
+			DEFAULT: "var(--karni-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1))",
+			md: "var(--karni-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))",
+			lg: "var(--karni-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1))"
+		},
+		borderWidth: {
+			DEFAULT: "var(--karni-border-width, 1px)",
+			2: "var(--karni-border-width-2, 2px)"
+		},
+		divideWidth: { DEFAULT: "var(--karni-border-width, 1px)" },
+		outlineWidth: { DEFAULT: "var(--karni-border-width, 1px)" },
+		ringWidth: {
+			1: "var(--karni-ring-width-1, 1px)",
+			2: "var(--karni-ring-width, 2px)"
+		},
+		ringOffsetWidth: { 2: "var(--karni-ring-offset-width, 2px)" },
+		zIndex: {
+			raised: "var(--karni-z-raised, 10)",
+			drawer: "var(--karni-z-drawer, 40)",
+			popover: "var(--karni-z-popover, 50)",
+			modal: "var(--karni-z-modal, 50)",
+			toast: "var(--karni-z-toast, 100)"
+		},
+		opacity: {
+			50: "var(--karni-opacity-50, 0.5)",
+			60: "var(--karni-opacity-60, 0.6)",
+			70: "var(--karni-opacity-70, 0.7)",
+			90: "var(--karni-opacity-90, 0.9)"
+		},
+		transitionDuration: { DEFAULT: "var(--karni-duration, 150ms)" },
+		transitionTimingFunction: { DEFAULT: "var(--karni-ease, cubic-bezier(0.4, 0, 0.2, 1))" },
+		animation: {
+			pulse: "pulse var(--karni-duration-pulse, 2s) cubic-bezier(0.4, 0, 0.6, 1) infinite",
+			spin: "spin var(--karni-duration-spin, 1s) linear infinite"
+		}
+	} }
 };
-//# sourceMappingURL=tailwind-preset.js.map
+//#endregion
+export { t as SPACE_STEPS, a as default };
+
+//# sourceMappingURL=tailwind-preset.js.map