@posthog/quill-tokens 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,25 @@
+Copyright (c) 2020-2025 PostHog Inc.
+
+Portions of this software are licensed as follows:
+
+* All content that resides under the "ee/" directory of this repository, if that directory exists, is licensed under the license defined in "ee/LICENSE".
+* All third party components incorporated into the PostHog Software are licensed under the original license provided by the owner of the applicable component.
+* Content outside of the above mentioned directories or restrictions above is available under the "MIT Expat" license as defined below.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/border-radius.d.ts

@@ -0,0 +1,17 @@
+/**
+ * PostHog Design System — Border Radius Tokens
+ *
+ * Note: Tailwind v4 uses --radius as a base value in color-system.css (0.625rem).
+ * These are the static design-token values for direct use.
+ * The @theme block in styles.css derives --radius-* from the base --radius var.
+ */
+export declare const borderRadius: {
+    readonly none: "0px";
+    readonly sm: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly xl: "12px";
+    readonly full: "9999px";
+};
+export type BorderRadius = typeof borderRadius;
+//# sourceMappingURL=border-radius.d.ts.map

package/dist/border-radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-radius.d.ts","sourceRoot":"","sources":["../src/border-radius.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAA"}

package/dist/color-system.css

@@ -0,0 +1,75 @@
+/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+
+:root {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.97 0.006 106);
+  --foreground: oklch(0.13 0.028 262);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.028 262);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.13 0.028 262);
+  --primary: oklch(0.6514 0.2137 37.89);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.31 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.97 0.006 106);
+  --muted-foreground: oklch(0.446 0.03 257);
+  --accent: oklch(0.923 0.003 49);
+  --accent-foreground: oklch(0.13 0.028 262);
+  --destructive: oklch(0.92 0.03 32.22);
+  --destructive-foreground: oklch(0.59 0.2 23.61);
+  --success: oklch(0.94 0.06 154.03);
+  --success-foreground: oklch(0.448 0.119 151.328);
+  --warning: oklch(0.93 0.04 74.41);
+  --warning-foreground: oklch(0.476 0.114 61.907);
+  --info: oklch(0.882 0.059 254.128);
+  --info-foreground: oklab(0.49 -0.02 -0.24);
+  --border: oklch(0.923 0.003 49);
+  --input: oklch(0.81 0 0 / 1);
+  --ring: oklch(0.446 0.03 257);
+  --fill-hover: color-mix(in oklch, var(--accent) 40%, transparent);
+  --fill-active: var(--accent);
+  --fill-expanded: var(--muted);
+  --fill-selected: color-mix(in oklch, var(--fill-hover) 50%, transparent);
+}
+
+.dark {
+  --radius: 0.625rem;
+  --background: hsl(240 8% 8%);
+  --foreground: oklch(0.967 0.003 265);
+  --card: hsl(235 8% 15%);
+  --card-foreground: oklch(0.967 0.003 265);
+  --popover: hsl(235 8% 15%);
+  --popover-foreground: oklch(0.967 0.003 265);
+  --primary: oklch(0.8325 0.1611 84.54);
+  --primary-foreground: oklch(0.13 0.028 262);
+  --secondary: oklch(0.86 0 0);
+  --secondary-foreground: oklch(0.13 0.028 262);
+  --muted: hsl(240 8% 10%);
+  --muted-foreground: oklch(0.709 0 0);
+  --accent: hsl(230 8% 20%);
+  --accent-foreground: oklch(0.967 0.003 265);
+  --destructive: oklch(0.24 0.03 2.79);
+  --destructive-foreground: oklch(0.6316 0.1927 24.53);
+  --success: oklch(0.27 0.04 157.6);
+  --success-foreground: oklch(0.925 0.084 155.995);
+  --warning: oklab(0.29 0.03 0.05);
+  --warning-foreground: oklch(0.77 0.14 99.29);
+  --info: oklch(0.4242 0.1982 265.5 / 40%);
+  --info-foreground: oklch(0.882 0.059 254.128);
+  --border: hsl(230 8% 20%);
+  --input: oklch(0.46 0.02 279.18);
+  --ring: oklch(0.709 0 0);
+  --fill-hover: color-mix(in oklch, var(--accent) 40%, transparent);
+  --fill-active: var(--accent);
+  --fill-expanded: var(--muted);
+  --fill-selected: color-mix(in oklch, var(--accent) 50%, transparent);
+}

package/dist/colors.d.ts

@@ -0,0 +1,32 @@
+/**
+ * PostHog Design System — Color Tokens (shadcn-aligned)
+ *
+ * Each value is [light, dark]. Index 0 = light, index 1 = dark.
+ */
+export declare const semanticColors: Record<string, ColorTuple>;
+export type SemanticColorKey = keyof typeof semanticColors;
+export type ColorTuple = readonly [light: string, dark: string, tailwindClass: string];
+export interface StylesConfig {
+    /** Include @layer base reset rules (apps only) */
+    includeBaseLayer?: boolean;
+}
+/** Flat object for one theme */
+export declare function resolveTheme(mode: 'light' | 'dark'): Record<SemanticColorKey, string>;
+/** Generate color-system.css (:root light + .dark overrides) */
+export declare function generateColorSystemCSS(): string;
+/**
+ * Generate Tailwind v4 @theme + @custom-variant + optional @layer base.
+ *
+ * Does NOT include `@import "tailwindcss"` or `@import "color-system.css"` —
+ * those are the consuming app's responsibility (they must resolve from the
+ * app's node_modules, not from tokens/dist/).
+ *
+ * Two modes:
+ *  - **Library** (includeBaseLayer: false): Just the @theme inline block
+ *    so Tailwind can generate utility classes. Used by packages.
+ *
+ *  - **App** (includeBaseLayer: true): @theme + base layer resets.
+ *    Used by apps/web, apps/storybook.
+ */
+export declare function generateStylesCSS(config?: StylesConfig): string;
+//# sourceMappingURL=colors.d.ts.map

package/dist/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAsD5C,CAAA;AAIV,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,cAAc,CAAA;AAC1D,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,CAAC,CAAA;AAItF,MAAM,WAAW,YAAY;IACzB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAID,gCAAgC;AAChC,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAMrF;AAED,gEAAgE;AAChE,wBAAgB,sBAAsB,IAAI,MAAM,CAoB/C;AASD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,GAAE,YAAiB,GAAG,MAAM,CAgFnE"}

package/dist/css.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared CSS generation helpers for token files.
+ */
+/** Generate CSS custom property lines from a flat key-value map */
+export declare function cssVars(tokens: Record<string, string>, prefix: string, indent?: string): string;
+/** Generate CSS custom property lines without a prefix */
+export declare function cssVarsFlat(tokens: Record<string, string>, indent?: string): string;
+/** Quote a font name if it contains spaces, otherwise return as-is */
+export declare function quoteFontName(name: string): string;
+/** Format a font family array as a CSS value */
+export declare function fontFamilyValue(fonts: readonly string[]): string;
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,mEAAmE;AACnE,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAO,GAAG,MAAM,CAI7F;AAED,0DAA0D;AAC1D,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,SAAO,GAAG,MAAM,CAIjF;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD;AAED,gDAAgD;AAChD,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,CAEhE"}

package/dist/index.cjs

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function l(o,s,e="  "){return Object.entries(o).map(([n,a])=>`${e}--${s}-${n}: ${a};`).join(`
+`)}function u(o,s="  "){return Object.entries(o).map(([e,n])=>`${s}--${e}: ${n};`).join(`
+`)}function c(o){return/\s/.test(o)?`"${o}"`:o}function i(o){return o.map(c).join(", ")}const p={sm:"0 1px 2px 0 rgba(0, 0, 0, 0.3)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)"};function x(){return l(p,"shadow")}const h={0:"0px",1:"4px",2:"8px",3:"12px",4:"16px",5:"20px",6:"24px",8:"32px",10:"40px",12:"48px",16:"64px"};function m(){return l(h,"spacing")}const k=16;function r(o){return`${o/k}rem`}const d={xxs:[r(10),{lineHeight:r(12)}],xs:[r(12),{lineHeight:r(16)}],sm:[r(14),{lineHeight:r(20)}],base:[r(16),{lineHeight:r(24)}],lg:[r(18),{lineHeight:r(28)}],xl:[r(20),{lineHeight:r(28)}],"2xl":[r(24),{lineHeight:r(32)}]},g={sans:["-apple-system","BlinkMacSystemFont","Inter","Segoe UI","Roboto","Helvetica Neue","sans-serif"],mono:["JetBrains Mono","Fira Code","monospace"]};function b(){return Object.entries(d).map(([o,[s,{lineHeight:e}]])=>`  --text-${o}: ${s};
+  --text-${o}--line-height: ${e};`).join(`
+`)}function v(){return Object.entries(g).map(([o,s])=>`  --font-${o}: ${i(s)};`).join(`
+`)}const t={background:["oklch(0.97 0.006 106)","hsl(240 8% 8%)","bg-background"],foreground:["oklch(0.13 0.028 262)","oklch(0.967 0.003 265)","text-foreground"],card:["oklch(1 0 0)","hsl(235 8% 15%)","bg-card"],"card-foreground":["oklch(0.13 0.028 262)","oklch(0.967 0.003 265)","text-card-foreground"],popover:["oklch(1 0 0)","hsl(235 8% 15%)","bg-popover"],"popover-foreground":["oklch(0.13 0.028 262)","oklch(0.967 0.003 265)","text-popover-foreground"],primary:["oklch(0.6514 0.2137 37.89)","oklch(0.8325 0.1611 84.54)","bg-primary"],"primary-foreground":["oklch(1 0 0)","oklch(0.13 0.028 262)","text-primary-foreground"],secondary:["oklch(0.31 0 0)","oklch(0.86 0 0)","bg-secondary"],"secondary-foreground":["oklch(1 0 0)","oklch(0.13 0.028 262)","text-secondary-foreground"],muted:["oklch(0.97 0.006 106)","hsl(240 8% 10%)","bg-muted"],"muted-foreground":["oklch(0.446 0.03 257)","oklch(0.709 0 0)","text-muted-foreground"],accent:["oklch(0.923 0.003 49)","hsl(230 8% 20%)","bg-accent"],"accent-foreground":["oklch(0.13 0.028 262)","oklch(0.967 0.003 265)","text-accent-foreground"],destructive:["oklch(0.92 0.03 32.22)","oklch(0.24 0.03 2.79)","bg-destructive"],"destructive-foreground":["oklch(0.59 0.2 23.61)","oklch(0.6316 0.1927 24.53)","text-destructive-foreground"],success:["oklch(0.94 0.06 154.03)","oklch(0.27 0.04 157.6)","bg-success"],"success-foreground":["oklch(0.448 0.119 151.328)","oklch(0.925 0.084 155.995)","text-success-foreground"],warning:["oklch(0.93 0.04 74.41)","oklab(0.29 0.03 0.05)","bg-warning"],"warning-foreground":["oklch(0.476 0.114 61.907)","oklch(0.77 0.14 99.29)","text-warning-foreground"],info:["oklch(0.882 0.059 254.128)","oklch(0.4242 0.1982 265.5 / 40%)","bg-info"],"info-foreground":["oklab(0.49 -0.02 -0.24)","oklch(0.882 0.059 254.128)","text-info-foreground"],border:["oklch(0.923 0.003 49)","hsl(230 8% 20%)","border-border"],input:["oklch(0.81 0 0 / 1)","oklch(0.46 0.02 279.18)","border-input"],ring:["oklch(0.446 0.03 257)","oklch(0.709 0 0)","border-ring"],"fill-hover":["color-mix(in oklch, var(--accent) 40%, transparent)","color-mix(in oklch, var(--accent) 40%, transparent)","bg-fill-hover"],"fill-active":["var(--accent)","var(--accent)","bg-fill-active"],"fill-expanded":["var(--muted)","var(--muted)","bg-fill-expanded"],"fill-selected":["color-mix(in oklch, var(--fill-hover) 50%, transparent)","color-mix(in oklch, var(--accent) 50%, transparent)","bg-fill-selected"]};function y(o){const s=o==="light"?0:1;return Object.fromEntries(Object.entries(t).map(([e,n])=>[e,n[s]]))}function S(){const o=(s,e)=>{const n=Object.fromEntries(Object.entries(t).map(([a,f])=>[a,f[e]]));return`${s} {
+  --radius: 0.625rem;
+${u(n)}
+}`};return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+
+:root {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+${o(":root",0)}
+
+${o(".dark",1)}
+`}function $(){return Object.keys(t).map(o=>`  --color-${o}: var(--${o});`).join(`
+`)}function j(o={}){const{includeBaseLayer:s=!1}=o,e=["/* Auto-generated by @posthog/quill-tokens — do not edit manually */","","@custom-variant dark (&:is(.dark, .dark *));"];return e.push(""),e.push("@theme inline {"),e.push("  --animate-skeleton: skeleton 2s -1s infinite linear;"),e.push("  --animate-pulse-glow: pulse-glow 2s -1s infinite linear;"),e.push("  --animate-horizontal-shake: horizontal-shake 0.3s ease-out;"),e.push("  --animate-radar: radar 2s ease-out infinite;"),e.push(""),e.push("  /* --- Colors --- */"),e.push($()),e.push(""),e.push("  /* --- Spacing --- */"),e.push(m()),e.push(""),e.push("  /* --- Font sizes --- */"),e.push(b()),e.push(""),e.push("  /* --- Font families --- */"),e.push(v()),e.push(""),e.push("  /* --- Shadows --- */"),e.push(x()),e.push(""),e.push("  /* --- Radius (derived from --radius base) --- */"),e.push("  --radius-sm: calc(var(--radius) - 4px);"),e.push("  --radius-md: calc(var(--radius) - 2px);"),e.push("  --radius-lg: var(--radius);"),e.push("  --radius-xl: calc(var(--radius) + 4px);"),e.push("  --radius-2xl: calc(var(--radius) + 8px);"),e.push("  --radius-3xl: calc(var(--radius) + 12px);"),e.push("  --radius-4xl: calc(var(--radius) + 16px);"),e.push(""),e.push("  @keyframes skeleton {"),e.push("    to {"),e.push("      background-position: -200% 0;"),e.push("    }"),e.push("  }"),e.push(""),e.push("  @keyframes pulse-glow {"),e.push("    0%, 100% { box-shadow: 0 0 2px 1px var(--pulse-glow-color, var(--color-accent)) }"),e.push("    50% { box-shadow: 0 0 6px 2px var(--pulse-glow-color, var(--color-accent)) }"),e.push("  }"),e.push(""),e.push("  @keyframes horizontal-shake {"),e.push("    0% { transform: translateX(0); }"),e.push("    25% { transform: translateX(5px); }"),e.push("    50% { transform: translateX(-5px); }"),e.push("    75% { transform: translateX(2px); }"),e.push("    100% { transform: translateX(0); }"),e.push("  }"),e.push(""),e.push("  @keyframes radar {"),e.push("    0% { transform: scale(1); opacity: 0.5; }"),e.push("    100% { transform: scale(1.5); opacity: 0; }"),e.push("  }"),e.push("}"),s&&(e.push(""),e.push("@layer base {"),e.push("  * {"),e.push("    @apply border-border outline-ring/50;"),e.push("  }"),e.push("  body {"),e.push("    @apply bg-background text-foreground;"),e.push("  }"),e.push("}")),e.push(""),e.join(`
+`)}const w={none:"0px",sm:"4px",md:"6px",lg:"8px",xl:"12px",full:"9999px"};exports.borderRadius=w;exports.cssVars=l;exports.cssVarsFlat=u;exports.fontFamily=g;exports.fontFamilyValue=i;exports.fontSize=d;exports.generateColorSystemCSS=S;exports.generateStylesCSS=j;exports.quoteFontName=c;exports.resolveTheme=y;exports.semanticColors=t;exports.shadow=p;exports.spacing=h;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { semanticColors, resolveTheme, generateColorSystemCSS, generateStylesCSS } from './colors';
+export type { SemanticColorKey, ColorTuple, StylesConfig } from './colors';
+export { spacing } from './spacing';
+export type { Spacing } from './spacing';
+export { fontSize, fontFamily } from './typography';
+export type { FontSize, FontFamily } from './typography';
+export { borderRadius } from './border-radius';
+export type { BorderRadius } from './border-radius';
+export { shadow } from './shadow';
+export type { Shadow } from './shadow';
+export { cssVars, cssVarsFlat, quoteFontName, fontFamilyValue } from './css';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAClG,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG1E,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAGxC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACnD,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGxD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGtC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA"}

package/dist/index.js

@@ -0,0 +1,176 @@
+function u(o, n, e = "  ") {
+  return Object.entries(o).map(([s, t]) => `${e}--${n}-${s}: ${t};`).join(`
+`);
+}
+function l(o, n = "  ") {
+  return Object.entries(o).map(([e, s]) => `${n}--${e}: ${s};`).join(`
+`);
+}
+function p(o) {
+  return /\s/.test(o) ? `"${o}"` : o;
+}
+function i(o) {
+  return o.map(p).join(", ");
+}
+const h = {
+  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)"
+};
+function d() {
+  return u(h, "shadow");
+}
+const g = {
+  0: "0px",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  8: "32px",
+  10: "40px",
+  12: "48px",
+  16: "64px"
+};
+function x() {
+  return u(g, "spacing");
+}
+const f = 16;
+function r(o) {
+  return `${o / f}rem`;
+}
+const k = {
+  xxs: [r(10), { lineHeight: r(12) }],
+  // 0.625rem (10px), 0.75rem (12px)
+  xs: [r(12), { lineHeight: r(16) }],
+  // 0.75rem (12px), 1rem (16px)
+  sm: [r(14), { lineHeight: r(20) }],
+  // 0.875rem (14px), 1.25rem (20px)
+  base: [r(16), { lineHeight: r(24) }],
+  // 1rem (16px), 1.5rem (24px)
+  lg: [r(18), { lineHeight: r(28) }],
+  // 1.125rem (18px), 1.75rem (28px)
+  xl: [r(20), { lineHeight: r(28) }],
+  // 1.25rem (20px), 1.75rem (28px)
+  "2xl": [r(24), { lineHeight: r(32) }]
+  // 1.5rem (24px), 2rem (32px)
+}, m = {
+  sans: ["-apple-system", "BlinkMacSystemFont", "Inter", "Segoe UI", "Roboto", "Helvetica Neue", "sans-serif"],
+  mono: ["JetBrains Mono", "Fira Code", "monospace"]
+};
+function b() {
+  return Object.entries(k).map(([o, [n, { lineHeight: e }]]) => `  --text-${o}: ${n};
+  --text-${o}--line-height: ${e};`).join(`
+`);
+}
+function v() {
+  return Object.entries(m).map(([o, n]) => `  --font-${o}: ${i(n)};`).join(`
+`);
+}
+const a = {
+  background: ["oklch(0.97 0.006 106)", "hsl(240 8% 8%)", "bg-background"],
+  foreground: ["oklch(0.13 0.028 262)", "oklch(0.967 0.003 265)", "text-foreground"],
+  card: ["oklch(1 0 0)", "hsl(235 8% 15%)", "bg-card"],
+  "card-foreground": ["oklch(0.13 0.028 262)", "oklch(0.967 0.003 265)", "text-card-foreground"],
+  popover: ["oklch(1 0 0)", "hsl(235 8% 15%)", "bg-popover"],
+  "popover-foreground": ["oklch(0.13 0.028 262)", "oklch(0.967 0.003 265)", "text-popover-foreground"],
+  primary: ["oklch(0.6514 0.2137 37.89)", "oklch(0.8325 0.1611 84.54)", "bg-primary"],
+  "primary-foreground": ["oklch(1 0 0)", "oklch(0.13 0.028 262)", "text-primary-foreground"],
+  secondary: ["oklch(0.31 0 0)", "oklch(0.86 0 0)", "bg-secondary"],
+  "secondary-foreground": ["oklch(1 0 0)", "oklch(0.13 0.028 262)", "text-secondary-foreground"],
+  muted: ["oklch(0.97 0.006 106)", "hsl(240 8% 10%)", "bg-muted"],
+  "muted-foreground": ["oklch(0.446 0.03 257)", "oklch(0.709 0 0)", "text-muted-foreground"],
+  accent: ["oklch(0.923 0.003 49)", "hsl(230 8% 20%)", "bg-accent"],
+  "accent-foreground": ["oklch(0.13 0.028 262)", "oklch(0.967 0.003 265)", "text-accent-foreground"],
+  destructive: ["oklch(0.92 0.03 32.22)", "oklch(0.24 0.03 2.79)", "bg-destructive"],
+  "destructive-foreground": ["oklch(0.59 0.2 23.61)", "oklch(0.6316 0.1927 24.53)", "text-destructive-foreground"],
+  success: ["oklch(0.94 0.06 154.03)", "oklch(0.27 0.04 157.6)", "bg-success"],
+  "success-foreground": ["oklch(0.448 0.119 151.328)", "oklch(0.925 0.084 155.995)", "text-success-foreground"],
+  warning: ["oklch(0.93 0.04 74.41)", "oklab(0.29 0.03 0.05)", "bg-warning"],
+  "warning-foreground": ["oklch(0.476 0.114 61.907)", "oklch(0.77 0.14 99.29)", "text-warning-foreground"],
+  info: ["oklch(0.882 0.059 254.128)", "oklch(0.4242 0.1982 265.5 / 40%)", "bg-info"],
+  "info-foreground": ["oklab(0.49 -0.02 -0.24)", "oklch(0.882 0.059 254.128)", "text-info-foreground"],
+  border: ["oklch(0.923 0.003 49)", "hsl(230 8% 20%)", "border-border"],
+  input: ["oklch(0.81 0 0 / 1)", "oklch(0.46 0.02 279.18)", "border-input"],
+  ring: ["oklch(0.446 0.03 257)", "oklch(0.709 0 0)", "border-ring"],
+  // Hovering default button
+  "fill-hover": [
+    "color-mix(in oklch, var(--accent) 40%, transparent)",
+    "color-mix(in oklch, var(--accent) 40%, transparent)",
+    "bg-fill-hover"
+  ],
+  // Active default button
+  "fill-active": ["var(--accent)", "var(--accent)", "bg-fill-active"],
+  // Expanded default button
+  "fill-expanded": ["var(--muted)", "var(--muted)", "bg-fill-expanded"],
+  // Selected default button (checked or selected)
+  "fill-selected": [
+    "color-mix(in oklch, var(--fill-hover) 50%, transparent)",
+    "color-mix(in oklch, var(--accent) 50%, transparent)",
+    "bg-fill-selected"
+  ]
+};
+function S(o) {
+  const n = o === "light" ? 0 : 1;
+  return Object.fromEntries(Object.entries(a).map(([e, s]) => [e, s[n]]));
+}
+function $() {
+  const o = (n, e) => {
+    const s = Object.fromEntries(Object.entries(a).map(([t, c]) => [t, c[e]]));
+    return `${n} {
+  --radius: 0.625rem;
+${l(s)}
+}`;
+  };
+  return `/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+
+:root {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+${o(":root", 0)}
+
+${o(".dark", 1)}
+`;
+}
+function y() {
+  return Object.keys(a).map((o) => `  --color-${o}: var(--${o});`).join(`
+`);
+}
+function j(o = {}) {
+  const { includeBaseLayer: n = !1 } = o, e = [
+    "/* Auto-generated by @posthog/quill-tokens — do not edit manually */",
+    "",
+    "@custom-variant dark (&:is(.dark, .dark *));"
+  ];
+  return e.push(""), e.push("@theme inline {"), e.push("  --animate-skeleton: skeleton 2s -1s infinite linear;"), e.push("  --animate-pulse-glow: pulse-glow 2s -1s infinite linear;"), e.push("  --animate-horizontal-shake: horizontal-shake 0.3s ease-out;"), e.push("  --animate-radar: radar 2s ease-out infinite;"), e.push(""), e.push("  /* --- Colors --- */"), e.push(y()), e.push(""), e.push("  /* --- Spacing --- */"), e.push(x()), e.push(""), e.push("  /* --- Font sizes --- */"), e.push(b()), e.push(""), e.push("  /* --- Font families --- */"), e.push(v()), e.push(""), e.push("  /* --- Shadows --- */"), e.push(d()), e.push(""), e.push("  /* --- Radius (derived from --radius base) --- */"), e.push("  --radius-sm: calc(var(--radius) - 4px);"), e.push("  --radius-md: calc(var(--radius) - 2px);"), e.push("  --radius-lg: var(--radius);"), e.push("  --radius-xl: calc(var(--radius) + 4px);"), e.push("  --radius-2xl: calc(var(--radius) + 8px);"), e.push("  --radius-3xl: calc(var(--radius) + 12px);"), e.push("  --radius-4xl: calc(var(--radius) + 16px);"), e.push(""), e.push("  @keyframes skeleton {"), e.push("    to {"), e.push("      background-position: -200% 0;"), e.push("    }"), e.push("  }"), e.push(""), e.push("  @keyframes pulse-glow {"), e.push("    0%, 100% { box-shadow: 0 0 2px 1px var(--pulse-glow-color, var(--color-accent)) }"), e.push("    50% { box-shadow: 0 0 6px 2px var(--pulse-glow-color, var(--color-accent)) }"), e.push("  }"), e.push(""), e.push("  @keyframes horizontal-shake {"), e.push("    0% { transform: translateX(0); }"), e.push("    25% { transform: translateX(5px); }"), e.push("    50% { transform: translateX(-5px); }"), e.push("    75% { transform: translateX(2px); }"), e.push("    100% { transform: translateX(0); }"), e.push("  }"), e.push(""), e.push("  @keyframes radar {"), e.push("    0% { transform: scale(1); opacity: 0.5; }"), e.push("    100% { transform: scale(1.5); opacity: 0; }"), e.push("  }"), e.push("}"), n && (e.push(""), e.push("@layer base {"), e.push("  * {"), e.push("    @apply border-border outline-ring/50;"), e.push("  }"), e.push("  body {"), e.push("    @apply bg-background text-foreground;"), e.push("  }"), e.push("}")), e.push(""), e.join(`
+`);
+}
+const w = {
+  none: "0px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  full: "9999px"
+};
+export {
+  w as borderRadius,
+  u as cssVars,
+  l as cssVarsFlat,
+  m as fontFamily,
+  i as fontFamilyValue,
+  k as fontSize,
+  $ as generateColorSystemCSS,
+  j as generateStylesCSS,
+  p as quoteFontName,
+  S as resolveTheme,
+  a as semanticColors,
+  h as shadow,
+  g as spacing
+};

package/dist/shadow.d.ts

@@ -0,0 +1,12 @@
+/**
+ * PostHog Design System — Shadow Tokens
+ */
+export declare const shadow: {
+    readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)";
+    readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)";
+    readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)";
+};
+export type Shadow = typeof shadow;
+/** Generate Tailwind v4 @theme shadow vars (--shadow-*) */
+export declare function generateShadowCSS(): string;
+//# sourceMappingURL=shadow.d.ts.map

package/dist/shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../src/shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,MAAM;;;;CAIT,CAAA;AAEV,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAA;AAElC,2DAA2D;AAC3D,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C"}

package/dist/spacing.d.ts

@@ -0,0 +1,20 @@
+/**
+ * PostHog Design System — Spacing Tokens
+ */
+export declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 16: "64px";
+};
+export type Spacing = typeof spacing;
+/** Generate Tailwind v4 @theme spacing vars */
+export declare function generateSpacingCSS(): string;
+//# sourceMappingURL=spacing.d.ts.map

package/dist/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAA;AAEV,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA;AAEpC,+CAA+C;AAC/C,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}

package/dist/tailwind-lib.css

@@ -0,0 +1,112 @@
+/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+
+@custom-variant dark (&:is(.dark, .dark *));
+
+@theme inline {
+  --animate-skeleton: skeleton 2s -1s infinite linear;
+  --animate-pulse-glow: pulse-glow 2s -1s infinite linear;
+  --animate-horizontal-shake: horizontal-shake 0.3s ease-out;
+  --animate-radar: radar 2s ease-out infinite;
+
+  /* --- Colors --- */
+  --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-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-fill-hover: var(--fill-hover);
+  --color-fill-active: var(--fill-active);
+  --color-fill-expanded: var(--fill-expanded);
+  --color-fill-selected: var(--fill-selected);
+
+  /* --- Spacing --- */
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+
+  /* --- Font sizes --- */
+  --text-xxs: 0.625rem;
+  --text-xxs--line-height: 0.75rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+
+  /* --- Font families --- */
+  --font-sans: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
+
+  /* --- Shadows --- */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+
+  /* --- Radius (derived from --radius base) --- */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+
+  @keyframes skeleton {
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 2px 1px var(--pulse-glow-color, var(--color-accent)) }
+    50% { box-shadow: 0 0 6px 2px var(--pulse-glow-color, var(--color-accent)) }
+  }
+
+  @keyframes horizontal-shake {
+    0% { transform: translateX(0); }
+    25% { transform: translateX(5px); }
+    50% { transform: translateX(-5px); }
+    75% { transform: translateX(2px); }
+    100% { transform: translateX(0); }
+  }
+
+  @keyframes radar {
+    0% { transform: scale(1); opacity: 0.5; }
+    100% { transform: scale(1.5); opacity: 0; }
+  }
+}

package/dist/tailwind.css

@@ -0,0 +1,121 @@
+/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+
+@custom-variant dark (&:is(.dark, .dark *));
+
+@theme inline {
+  --animate-skeleton: skeleton 2s -1s infinite linear;
+  --animate-pulse-glow: pulse-glow 2s -1s infinite linear;
+  --animate-horizontal-shake: horizontal-shake 0.3s ease-out;
+  --animate-radar: radar 2s ease-out infinite;
+
+  /* --- Colors --- */
+  --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-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-fill-hover: var(--fill-hover);
+  --color-fill-active: var(--fill-active);
+  --color-fill-expanded: var(--fill-expanded);
+  --color-fill-selected: var(--fill-selected);
+
+  /* --- Spacing --- */
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+
+  /* --- Font sizes --- */
+  --text-xxs: 0.625rem;
+  --text-xxs--line-height: 0.75rem;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+
+  /* --- Font families --- */
+  --font-sans: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
+
+  /* --- Shadows --- */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+
+  /* --- Radius (derived from --radius base) --- */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+
+  @keyframes skeleton {
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 2px 1px var(--pulse-glow-color, var(--color-accent)) }
+    50% { box-shadow: 0 0 6px 2px var(--pulse-glow-color, var(--color-accent)) }
+  }
+
+  @keyframes horizontal-shake {
+    0% { transform: translateX(0); }
+    25% { transform: translateX(5px); }
+    50% { transform: translateX(-5px); }
+    75% { transform: translateX(2px); }
+    100% { transform: translateX(0); }
+  }
+
+  @keyframes radar {
+    0% { transform: scale(1); opacity: 0.5; }
+    100% { transform: scale(1.5); opacity: 0; }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/typography.d.ts

@@ -0,0 +1,37 @@
+/**
+ * PostHog Design System — Typography Tokens
+ */
+export declare const fontSize: {
+    readonly xxs: readonly [string, {
+        readonly lineHeight: string;
+    }];
+    readonly xs: readonly [string, {
+        readonly lineHeight: string;
+    }];
+    readonly sm: readonly [string, {
+        readonly lineHeight: string;
+    }];
+    readonly base: readonly [string, {
+        readonly lineHeight: string;
+    }];
+    readonly lg: readonly [string, {
+        readonly lineHeight: string;
+    }];
+    readonly xl: readonly [string, {
+        readonly lineHeight: string;
+    }];
+    readonly '2xl': readonly [string, {
+        readonly lineHeight: string;
+    }];
+};
+export declare const fontFamily: {
+    readonly sans: readonly ["-apple-system", "BlinkMacSystemFont", "Inter", "Segoe UI", "Roboto", "Helvetica Neue", "sans-serif"];
+    readonly mono: readonly ["JetBrains Mono", "Fira Code", "monospace"];
+};
+export type FontSize = typeof fontSize;
+export type FontFamily = typeof fontFamily;
+/** Generate Tailwind v4 @theme font-size vars (--text-* + --text-*--line-height) */
+export declare function generateFontSizeCSS(): string;
+/** Generate Tailwind v4 @theme font-family vars (--font-*) */
+export declare function generateFontFamilyCSS(): string;
+//# sourceMappingURL=typography.d.ts.map

package/dist/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAAA;;GAEG;AAUH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;CAQX,CAAA;AAEV,eAAO,MAAM,UAAU;;;CAGb,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAA;AACtC,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAA;AAE1C,oFAAoF;AACpF,wBAAgB,mBAAmB,IAAI,MAAM,CAI5C;AAED,8DAA8D;AAC9D,wBAAgB,qBAAqB,IAAI,MAAM,CAI9C"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@posthog/quill-tokens",
+  "version": "0.1.0-alpha.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PostHog/posthog.git",
+    "directory": "packages/quill/packages/tokens"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./tailwind.css": "./dist/tailwind.css",
+    "./tailwind-lib.css": "./dist/tailwind-lib.css",
+    "./color-system.css": "./dist/color-system.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "tsx": "^4.19.0",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "tsx src/build.ts && vite build",
+    "build:watch": "tsx watch src/build.ts"
+  }
+}

package/src/border-radius.ts

@@ -0,0 +1,18 @@
+/**
+ * PostHog Design System — Border Radius Tokens
+ *
+ * Note: Tailwind v4 uses --radius as a base value in color-system.css (0.625rem).
+ * These are the static design-token values for direct use.
+ * The @theme block in styles.css derives --radius-* from the base --radius var.
+ */
+
+export const borderRadius = {
+    none: '0px',
+    sm: '4px',
+    md: '6px',
+    lg: '8px',
+    xl: '12px',
+    full: '9999px',
+} as const
+
+export type BorderRadius = typeof borderRadius

package/src/build.ts

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+/**
+ * Generates CSS files from design tokens.
+ *
+ * Output:
+ *   dist/color-system.css  — :root + .dark CSS custom properties
+ *   dist/tailwind.css       — @theme + @custom-variant + @layer base (for apps)
+ *   dist/tailwind-lib.css   — @theme + @custom-variant only (for library packages)
+ *
+ * Note: Neither tailwind.css nor tailwind-lib.css include `@import "tailwindcss"`.
+ * The consuming app/package must import tailwindcss itself.
+ */
+
+import { writeFileSync, mkdirSync } from 'node:fs'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { generateColorSystemCSS, generateStylesCSS } from './colors.js'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const distDir = resolve(__dirname, '..', 'dist')
+
+mkdirSync(distDir, { recursive: true })
+
+// 1. Color system (CSS custom properties for light/dark)
+writeFileSync(resolve(distDir, 'color-system.css'), generateColorSystemCSS())
+
+// 2. App stylesheet (@theme + base layer, no @import "tailwindcss")
+writeFileSync(resolve(distDir, 'tailwind.css'), generateStylesCSS({ includeBaseLayer: true }))
+
+// 3. Library stylesheet (@theme only, no base layer)
+writeFileSync(resolve(distDir, 'tailwind-lib.css'), generateStylesCSS({ includeBaseLayer: false }))

package/src/colors.ts

@@ -0,0 +1,215 @@
+/**
+ * PostHog Design System — Color Tokens (shadcn-aligned)
+ *
+ * Each value is [light, dark]. Index 0 = light, index 1 = dark.
+ */
+
+import { cssVarsFlat } from './css'
+import { generateShadowCSS } from './shadow'
+import { generateSpacingCSS } from './spacing'
+import { generateFontSizeCSS, generateFontFamilyCSS } from './typography'
+
+export const semanticColors: Record<string, ColorTuple> = {
+    background: ['oklch(0.97 0.006 106)', 'hsl(240 8% 8%)', 'bg-background'],
+    foreground: ['oklch(0.13 0.028 262)', 'oklch(0.967 0.003 265)', 'text-foreground'],
+
+    card: ['oklch(1 0 0)', 'hsl(235 8% 15%)', 'bg-card'],
+    'card-foreground': ['oklch(0.13 0.028 262)', 'oklch(0.967 0.003 265)', 'text-card-foreground'],
+
+    popover: ['oklch(1 0 0)', 'hsl(235 8% 15%)', 'bg-popover'],
+    'popover-foreground': ['oklch(0.13 0.028 262)', 'oklch(0.967 0.003 265)', 'text-popover-foreground'],
+
+    primary: ['oklch(0.6514 0.2137 37.89)', 'oklch(0.8325 0.1611 84.54)', 'bg-primary'],
+    'primary-foreground': ['oklch(1 0 0)', 'oklch(0.13 0.028 262)', 'text-primary-foreground'],
+
+    secondary: ['oklch(0.31 0 0)', 'oklch(0.86 0 0)', 'bg-secondary'],
+    'secondary-foreground': ['oklch(1 0 0)', 'oklch(0.13 0.028 262)', 'text-secondary-foreground'],
+
+    muted: ['oklch(0.97 0.006 106)', 'hsl(240 8% 10%)', 'bg-muted'],
+    'muted-foreground': ['oklch(0.446 0.03 257)', 'oklch(0.709 0 0)', 'text-muted-foreground'],
+
+    accent: ['oklch(0.923 0.003 49)', 'hsl(230 8% 20%)', 'bg-accent'],
+    'accent-foreground': ['oklch(0.13 0.028 262)', 'oklch(0.967 0.003 265)', 'text-accent-foreground'],
+
+    destructive: ['oklch(0.92 0.03 32.22)', 'oklch(0.24 0.03 2.79)', 'bg-destructive'],
+    'destructive-foreground': ['oklch(0.59 0.2 23.61)', 'oklch(0.6316 0.1927 24.53)', 'text-destructive-foreground'],
+
+    success: ['oklch(0.94 0.06 154.03)', 'oklch(0.27 0.04 157.6)', 'bg-success'],
+    'success-foreground': ['oklch(0.448 0.119 151.328)', 'oklch(0.925 0.084 155.995)', 'text-success-foreground'],
+
+    warning: ['oklch(0.93 0.04 74.41)', 'oklab(0.29 0.03 0.05)', 'bg-warning'],
+    'warning-foreground': ['oklch(0.476 0.114 61.907)', 'oklch(0.77 0.14 99.29)', 'text-warning-foreground'],
+
+    info: ['oklch(0.882 0.059 254.128)', 'oklch(0.4242 0.1982 265.5 / 40%)', 'bg-info'],
+    'info-foreground': ['oklab(0.49 -0.02 -0.24)', 'oklch(0.882 0.059 254.128)', 'text-info-foreground'],
+
+    border: ['oklch(0.923 0.003 49)', 'hsl(230 8% 20%)', 'border-border'],
+    input: ['oklch(0.81 0 0 / 1)', 'oklch(0.46 0.02 279.18)', 'border-input'],
+    ring: ['oklch(0.446 0.03 257)', 'oklch(0.709 0 0)', 'border-ring'],
+
+    // Hovering default button
+    'fill-hover': [
+        'color-mix(in oklch, var(--accent) 40%, transparent)',
+        'color-mix(in oklch, var(--accent) 40%, transparent)',
+        'bg-fill-hover',
+    ],
+    // Active default button
+    'fill-active': ['var(--accent)', 'var(--accent)', 'bg-fill-active'],
+    // Expanded default button
+    'fill-expanded': ['var(--muted)', 'var(--muted)', 'bg-fill-expanded'],
+    // Selected default button (checked or selected)
+    'fill-selected': [
+        'color-mix(in oklch, var(--fill-hover) 50%, transparent)',
+        'color-mix(in oklch, var(--accent) 50%, transparent)',
+        'bg-fill-selected',
+    ],
+} as const
+
+// ── Types ──────────────────────────────────────────────
+
+export type SemanticColorKey = keyof typeof semanticColors
+export type ColorTuple = readonly [light: string, dark: string, tailwindClass: string]
+
+// ── Style generation config ────────────────────────────
+
+export interface StylesConfig {
+    /** Include @layer base reset rules (apps only) */
+    includeBaseLayer?: boolean
+}
+
+// ── Helpers ────────────────────────────────────────────
+
+/** Flat object for one theme */
+export function resolveTheme(mode: 'light' | 'dark'): Record<SemanticColorKey, string> {
+    const i = mode === 'light' ? 0 : 1
+    return Object.fromEntries(Object.entries(semanticColors).map(([k, v]) => [k, v[i]])) as Record<
+        SemanticColorKey,
+        string
+    >
+}
+
+/** Generate color-system.css (:root light + .dark overrides) */
+export function generateColorSystemCSS(): string {
+    const varsBlock = (selector: string, i: number): string => {
+        const lightDark = Object.fromEntries(Object.entries(semanticColors).map(([k, v]) => [k, v[i]]))
+        return `${selector} {\n  --radius: 0.625rem;\n${cssVarsFlat(lightDark)}\n}`
+    }
+
+    return `/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+
+:root {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+${varsBlock(':root', 0)}
+
+${varsBlock('.dark', 1)}
+`
+}
+
+/** Generate Tailwind v4 @theme color mappings (--color-* → var(--*)) */
+function generateColorMappingsCSS(): string {
+    return Object.keys(semanticColors)
+        .map((k) => `  --color-${k}: var(--${k});`)
+        .join('\n')
+}
+
+/**
+ * Generate Tailwind v4 @theme + @custom-variant + optional @layer base.
+ *
+ * Does NOT include `@import "tailwindcss"` or `@import "color-system.css"` —
+ * those are the consuming app's responsibility (they must resolve from the
+ * app's node_modules, not from tokens/dist/).
+ *
+ * Two modes:
+ *  - **Library** (includeBaseLayer: false): Just the @theme inline block
+ *    so Tailwind can generate utility classes. Used by packages.
+ *
+ *  - **App** (includeBaseLayer: true): @theme + base layer resets.
+ *    Used by apps/web, apps/storybook.
+ */
+export function generateStylesCSS(config: StylesConfig = {}): string {
+    const { includeBaseLayer = false } = config
+
+    const lines: string[] = [
+        '/* Auto-generated by @posthog/quill-tokens — do not edit manually */',
+        '',
+        '@custom-variant dark (&:is(.dark, .dark *));',
+    ]
+    lines.push('')
+
+    // ── @theme inline ──────────────────────────────────
+    lines.push('@theme inline {')
+    lines.push('  --animate-skeleton: skeleton 2s -1s infinite linear;')
+    lines.push('  --animate-pulse-glow: pulse-glow 2s -1s infinite linear;')
+    lines.push('  --animate-horizontal-shake: horizontal-shake 0.3s ease-out;')
+    lines.push('  --animate-radar: radar 2s ease-out infinite;')
+    lines.push('')
+    lines.push('  /* --- Colors --- */')
+    lines.push(generateColorMappingsCSS())
+    lines.push('')
+    lines.push('  /* --- Spacing --- */')
+    lines.push(generateSpacingCSS())
+    lines.push('')
+    lines.push('  /* --- Font sizes --- */')
+    lines.push(generateFontSizeCSS())
+    lines.push('')
+    lines.push('  /* --- Font families --- */')
+    lines.push(generateFontFamilyCSS())
+    lines.push('')
+    lines.push('  /* --- Shadows --- */')
+    lines.push(generateShadowCSS())
+    lines.push('')
+    lines.push('  /* --- Radius (derived from --radius base) --- */')
+    lines.push('  --radius-sm: calc(var(--radius) - 4px);')
+    lines.push('  --radius-md: calc(var(--radius) - 2px);')
+    lines.push('  --radius-lg: var(--radius);')
+    lines.push('  --radius-xl: calc(var(--radius) + 4px);')
+    lines.push('  --radius-2xl: calc(var(--radius) + 8px);')
+    lines.push('  --radius-3xl: calc(var(--radius) + 12px);')
+    lines.push('  --radius-4xl: calc(var(--radius) + 16px);')
+    lines.push('')
+    lines.push('  @keyframes skeleton {')
+    lines.push('    to {')
+    lines.push('      background-position: -200% 0;')
+    lines.push('    }')
+    lines.push('  }')
+    lines.push('')
+    lines.push('  @keyframes pulse-glow {')
+    lines.push('    0%, 100% { box-shadow: 0 0 2px 1px var(--pulse-glow-color, var(--color-accent)) }')
+    lines.push('    50% { box-shadow: 0 0 6px 2px var(--pulse-glow-color, var(--color-accent)) }')
+    lines.push('  }')
+    lines.push('')
+    lines.push('  @keyframes horizontal-shake {')
+    lines.push('    0% { transform: translateX(0); }')
+    lines.push('    25% { transform: translateX(5px); }')
+    lines.push('    50% { transform: translateX(-5px); }')
+    lines.push('    75% { transform: translateX(2px); }')
+    lines.push('    100% { transform: translateX(0); }')
+    lines.push('  }')
+    lines.push('')
+    lines.push('  @keyframes radar {')
+    lines.push('    0% { transform: scale(1); opacity: 0.5; }')
+    lines.push('    100% { transform: scale(1.5); opacity: 0; }')
+    lines.push('  }')
+    lines.push('}')
+
+    if (includeBaseLayer) {
+        lines.push('')
+        lines.push('@layer base {')
+        lines.push('  * {')
+        lines.push('    @apply border-border outline-ring/50;')
+        lines.push('  }')
+        lines.push('  body {')
+        lines.push('    @apply bg-background text-foreground;')
+        lines.push('  }')
+        lines.push('}')
+    }
+
+    lines.push('')
+    return lines.join('\n')
+}

package/src/css.ts

@@ -0,0 +1,27 @@
+/**
+ * Shared CSS generation helpers for token files.
+ */
+
+/** Generate CSS custom property lines from a flat key-value map */
+export function cssVars(tokens: Record<string, string>, prefix: string, indent = '  '): string {
+    return Object.entries(tokens)
+        .map(([k, v]) => `${indent}--${prefix}-${k}: ${v};`)
+        .join('\n')
+}
+
+/** Generate CSS custom property lines without a prefix */
+export function cssVarsFlat(tokens: Record<string, string>, indent = '  '): string {
+    return Object.entries(tokens)
+        .map(([k, v]) => `${indent}--${k}: ${v};`)
+        .join('\n')
+}
+
+/** Quote a font name if it contains spaces, otherwise return as-is */
+export function quoteFontName(name: string): string {
+    return /\s/.test(name) ? `"${name}"` : name
+}
+
+/** Format a font family array as a CSS value */
+export function fontFamilyValue(fonts: readonly string[]): string {
+    return fonts.map(quoteFontName).join(', ')
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+// Colors
+export { semanticColors, resolveTheme, generateColorSystemCSS, generateStylesCSS } from './colors'
+export type { SemanticColorKey, ColorTuple, StylesConfig } from './colors'
+
+// Spacing
+export { spacing } from './spacing'
+export type { Spacing } from './spacing'
+
+// Typography
+export { fontSize, fontFamily } from './typography'
+export type { FontSize, FontFamily } from './typography'
+
+// Border Radius
+export { borderRadius } from './border-radius'
+export type { BorderRadius } from './border-radius'
+
+// Shadows
+export { shadow } from './shadow'
+export type { Shadow } from './shadow'
+
+// CSS utilities
+export { cssVars, cssVarsFlat, quoteFontName, fontFamilyValue } from './css'

package/src/shadow.ts

@@ -0,0 +1,18 @@
+/**
+ * PostHog Design System — Shadow Tokens
+ */
+
+import { cssVars } from './css'
+
+export const shadow = {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.3)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)',
+} as const
+
+export type Shadow = typeof shadow
+
+/** Generate Tailwind v4 @theme shadow vars (--shadow-*) */
+export function generateShadowCSS(): string {
+    return cssVars(shadow as unknown as Record<string, string>, 'shadow')
+}

package/src/spacing.ts

@@ -0,0 +1,26 @@
+/**
+ * PostHog Design System — Spacing Tokens
+ */
+
+import { cssVars } from './css'
+
+export const spacing = {
+    0: '0px',
+    1: '4px',
+    2: '8px',
+    3: '12px',
+    4: '16px',
+    5: '20px',
+    6: '24px',
+    8: '32px',
+    10: '40px',
+    12: '48px',
+    16: '64px',
+} as const
+
+export type Spacing = typeof spacing
+
+/** Generate Tailwind v4 @theme spacing vars */
+export function generateSpacingCSS(): string {
+    return cssVars(spacing as unknown as Record<string, string>, 'spacing')
+}

package/src/typography.ts

@@ -0,0 +1,43 @@
+/**
+ * PostHog Design System — Typography Tokens
+ */
+
+import { fontFamilyValue } from './css'
+
+const ROOT_FONT_SIZE = 16
+
+function rem(px: number): string {
+    return `${px / ROOT_FONT_SIZE}rem`
+}
+
+export const fontSize = {
+    xxs: [rem(10), { lineHeight: rem(12) }],   // 0.625rem (10px), 0.75rem (12px)
+    xs: [rem(12), { lineHeight: rem(16) }],    // 0.75rem (12px), 1rem (16px)
+    sm: [rem(14), { lineHeight: rem(20) }],    // 0.875rem (14px), 1.25rem (20px)
+    base: [rem(16), { lineHeight: rem(24) }],  // 1rem (16px), 1.5rem (24px)
+    lg: [rem(18), { lineHeight: rem(28) }],    // 1.125rem (18px), 1.75rem (28px)
+    xl: [rem(20), { lineHeight: rem(28) }],    // 1.25rem (20px), 1.75rem (28px)
+    '2xl': [rem(24), { lineHeight: rem(32) }], // 1.5rem (24px), 2rem (32px)
+} as const
+
+export const fontFamily = {
+    sans: ['-apple-system', 'BlinkMacSystemFont', 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'sans-serif'],
+    mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+} as const
+
+export type FontSize = typeof fontSize
+export type FontFamily = typeof fontFamily
+
+/** Generate Tailwind v4 @theme font-size vars (--text-* + --text-*--line-height) */
+export function generateFontSizeCSS(): string {
+    return Object.entries(fontSize)
+        .map(([k, [size, { lineHeight }]]) => `  --text-${k}: ${size};\n  --text-${k}--line-height: ${lineHeight};`)
+        .join('\n')
+}
+
+/** Generate Tailwind v4 @theme font-family vars (--font-*) */
+export function generateFontFamilyCSS(): string {
+    return Object.entries(fontFamily)
+        .map(([k, fonts]) => `  --font-${k}: ${fontFamilyValue(fonts)};`)
+        .join('\n')
+}