@posthog/quill-tokens 0.3.0-beta.1 → 0.3.0-beta.9

package/dist/color-system.css

@@ -4,7 +4,7 @@
   color-scheme: light;
 }
 
-:is(.dark, [theme="dark"]) {
+:is(.dark, [theme="dark"], [data-theme="dark"]) {
   color-scheme: dark;
 }
 
@@ -35,7 +35,7 @@
   --ring: oklch(0.446 0.03 257);
 }
 
-:is(.dark, [theme="dark"]) {
+:is(.dark, [theme="dark"], [data-theme="dark"]) {
   --foreground: oklch(0.967 0.003 265);
   --card-foreground: var(--foreground);
   --muted-foreground: oklch(0.709 0 0);
@@ -57,9 +57,10 @@
  * This enables local overrides like [--theme-hue:200] on a container.
  */
 * {
-  --background: oklch(0.97 var(--theme-tint) var(--theme-hue));
+  --background: oklch(0.966 calc(var(--theme-tint) * 0.79) var(--theme-hue));
   --card: oklch(0.995 calc(var(--theme-tint) * 0.3) var(--theme-hue));
-  --muted: oklch(0.94 calc(var(--theme-tint) * 1.5) var(--theme-hue));
+  --muted: oklch(0.953 calc(var(--theme-tint) * 1.28) var(--theme-hue));
+  --chrome: oklch(0.923 calc(var(--theme-tint) * 1.67) var(--theme-hue));
   --primary: var(--primary-light);
   --border: oklch(0.9 calc(var(--theme-tint) * 0.8) var(--theme-hue));
   --input: oklch(0.81 calc(var(--theme-tint) * 0.5) var(--theme-hue));
@@ -68,10 +69,11 @@
   --fill-hover: color-mix(in oklab, var(--foreground) 4%, transparent);
 }
 
-:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) *) {
-  --background: oklch(0.145 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
+:is(:is(.dark, [theme="dark"], [data-theme="dark"]), :is(.dark, [theme="dark"], [data-theme="dark"]) *) {
+  --background: oklch(0.187 calc(var(--theme-tint) * 1.1) var(--theme-dark-hue));
   --card: oklch(0.2 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
-  --muted: oklch(0.27 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
+  --muted: oklch(0.209 calc(var(--theme-tint) * 1.33) var(--theme-dark-hue));
+  --chrome: oklch(0.187 calc(var(--theme-tint) * 1.1) var(--theme-dark-hue));
   --primary: var(--primary-dark);
   --border: oklch(0.27 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
   --input: oklch(0.3 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));

package/dist/color-system.scoped.css

@@ -14,7 +14,7 @@
   color-scheme: light;
 }
 
-:is(:is(.dark, [theme="dark"]) [data-quill], [data-quill]:is(.dark, [theme="dark"])) {
+:is(:is(.dark, [theme="dark"], [data-theme="dark"]) [data-quill], [data-quill]:is(.dark, [theme="dark"], [data-theme="dark"])) {
   color-scheme: dark;
 }
 
@@ -38,9 +38,10 @@
   --info: oklch(0.882 0.059 254.128);
   --info-foreground: oklch(0.49 0.02 254);
   --ring: oklch(0.446 0.03 257);
-  --background: oklch(0.97 var(--theme-tint) var(--theme-hue));
+  --background: oklch(0.966 calc(var(--theme-tint) * 0.79) var(--theme-hue));
   --card: oklch(0.995 calc(var(--theme-tint) * 0.3) var(--theme-hue));
-  --muted: oklch(0.94 calc(var(--theme-tint) * 1.5) var(--theme-hue));
+  --muted: oklch(0.953 calc(var(--theme-tint) * 1.28) var(--theme-hue));
+  --chrome: oklch(0.923 calc(var(--theme-tint) * 1.67) var(--theme-hue));
   --primary: var(--primary-light);
   --border: oklch(0.9 calc(var(--theme-tint) * 0.8) var(--theme-hue));
   --input: oklch(0.81 calc(var(--theme-tint) * 0.5) var(--theme-hue));
@@ -57,6 +58,7 @@
   --color-card-foreground: var(--card-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-chrome: var(--chrome);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-destructive: var(--destructive);
@@ -75,7 +77,7 @@
   --color-fill-hover: var(--fill-hover);
 }
 
-:is(:is(.dark, [theme="dark"]) [data-quill], [data-quill]:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) [data-quill] *, [data-quill]:is(.dark, [theme="dark"]) *) {
+:is(:is(.dark, [theme="dark"], [data-theme="dark"]) [data-quill], [data-quill]:is(.dark, [theme="dark"], [data-theme="dark"]), :is(.dark, [theme="dark"], [data-theme="dark"]) [data-quill] *, [data-quill]:is(.dark, [theme="dark"], [data-theme="dark"]) *) {
   --foreground: oklch(0.967 0.003 265);
   --card-foreground: var(--foreground);
   --muted-foreground: oklch(0.709 0 0);
@@ -89,9 +91,10 @@
   --info: oklch(0.4242 0.1982 265.5 / 40%);
   --info-foreground: oklch(0.882 0.059 254.128);
   --ring: oklch(0.709 0 0);
-  --background: oklch(0.145 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
+  --background: oklch(0.187 calc(var(--theme-tint) * 1.1) var(--theme-dark-hue));
   --card: oklch(0.2 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
-  --muted: oklch(0.27 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
+  --muted: oklch(0.209 calc(var(--theme-tint) * 1.33) var(--theme-dark-hue));
+  --chrome: oklch(0.187 calc(var(--theme-tint) * 1.1) var(--theme-dark-hue));
   --primary: var(--primary-dark);
   --border: oklch(0.27 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
   --input: oklch(0.3 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));

package/dist/index.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function v(r,s,o="  "){return Object.entries(r).map(([t,d])=>`${o}--${s}-${t}: ${d};`).join(`
-`)}function p(r,s="  "){return Object.entries(r).map(([o,t])=>`${s}--${o}: ${t};`).join(`
+`)}function h(r,s="  "){return Object.entries(r).map(([o,t])=>`${s}--${o}: ${t};`).join(`
 `)}function S(r){return/\s/.test(r)?`"${r}"`:r}function y(r){return r.map(S).join(", ")}const $={sm:"0 2px 0 color-mix(in oklab, var(--border), transparent 10%)",md:"0 3px 0 color-mix(in oklab, var(--border), transparent 10%)",lg:"0 6px 0 color-mix(in oklab, var(--border), transparent 10%)",line:"0 -1px 0px 0px color-mix(in oklab, var(--border), transparent 10%)"};function F(){return v($,"shadow")}const f=.25,E=`${f}rem`,A=16;function H(r){return`${f*r}rem`}function R(r){return f*r*A}function D(){return`  --spacing: ${E};`}const I=16;function i(r){return`${r/I}rem`}const w={xxs:[i(10),{lineHeight:i(12)}],xs:[i(12),{lineHeight:i(16)}],sm:[i(14),{lineHeight:i(20)}],base:[i(16),{lineHeight:i(24)}],lg:[i(18),{lineHeight:i(28)}],xl:[i(20),{lineHeight:i(28)}],"2xl":[i(24),{lineHeight:i(32)}]},T={sans:["-apple-system","BlinkMacSystemFont","Inter","Segoe UI","Roboto","Helvetica Neue","sans-serif"],mono:["JetBrains Mono","Fira Code","monospace"]};function M(){return Object.entries(w).map(([r,[s,{lineHeight:o}]])=>`  --text-${r}: ${s};
   --text-${r}--line-height: ${o};`).join(`
 `)}function N(){return Object.entries(T).map(([r,s])=>`  --font-${r}: ${y(s)};`).join(`
-`)}const C={hue:90,darkHue:264,tint:.006,primaryLight:"oklch(0.65 0.21 37.41)",primaryDark:"oklch(0.83 0.16 84.71)"};function c(r,s,o,t){const d=o==="light"?"var(--theme-hue)":"var(--theme-dark-hue)",e=s===1?"var(--theme-tint)":s===0?"0":`calc(var(--theme-tint) * ${s})`;return`oklch(${r} ${e} ${d})`}function a(r,s,o,t){return t!==void 0?`oklch(${r} ${s} ${o} / ${t*100}%)`:`oklch(${r} ${s} ${o})`}function V(){return{background:[c(.97,1,"light"),c(.145,1.5,"dark"),"bg-background"],foreground:[a(.13,.028,262),a(.967,.003,265),"text-foreground"],card:[c(.995,.3,"light"),c(.2,1.2,"dark"),"bg-card"],"card-foreground":["var(--foreground)","var(--foreground)","text-card-foreground"],muted:[c(.94,1.5,"light"),c(.27,1.5,"dark"),"bg-muted"],"muted-foreground":[a(.446,.03,257),a(.709,0,0),"text-muted-foreground"],primary:["var(--primary-light)","var(--primary-dark)","bg-primary"],"primary-foreground":[a(1,0,0),a(.13,.028,262),"text-primary-foreground"],destructive:[a(.92,.03,32.22),a(.24,.03,2.79),"bg-destructive"],"destructive-foreground":[a(.59,.2,23.61),a(.6316,.1927,24.53),"text-destructive-foreground"],success:[a(.94,.06,154.03),a(.27,.04,157.6),"bg-success"],"success-foreground":[a(.448,.119,151.328),a(.925,.084,155.995),"text-success-foreground"],warning:[a(.93,.04,74.41),a(.29,.03,75),"bg-warning"],"warning-foreground":[a(.476,.114,61.907),a(.77,.14,99.29),"text-warning-foreground"],info:[a(.882,.059,254.128),a(.4242,.1982,265.5,.4),"bg-info"],"info-foreground":[a(.49,.02,254),a(.882,.059,254.128),"text-info-foreground"],border:[c(.9,.8,"light"),c(.27,1.2,"dark"),"border-border"],input:[c(.81,.5,"light"),c(.3,1.5,"dark"),"border-input"],ring:[a(.446,.03,257),a(.709,0,0),"border-ring"],"fill-expanded":["color-mix(in oklab, var(--foreground) 6%, transparent)","color-mix(in oklab, var(--foreground) 14%, transparent)","bg-fill-expanded"],"fill-selected":["color-mix(in oklab, var(--foreground) 6%, transparent)","color-mix(in oklab, var(--foreground) 10%, transparent)","bg-fill-selected"],"fill-hover":["color-mix(in oklab, var(--foreground) 4%, transparent)","color-mix(in oklab, var(--foreground) 7%, transparent)","bg-fill-hover"]}}const h=V();function q(r){const s=r==="light"?0:1;return Object.fromEntries(Object.entries(h).map(([o,t])=>[o,t[s]]))}const O=new Set(["background","card","muted","primary","border","input","fill-hover","fill-expanded","fill-selected"]);function B(r){const s=["var(--theme-hue)","var(--theme-dark-hue)","var(--theme-tint)","var(--primary-light)","var(--primary-dark)"];for(const[o,[t,d]]of Object.entries(r))if(s.some(u=>t.includes(u)||d.includes(u))&&!O.has(o))throw new Error(`[@posthog/quill-tokens] Token "${o}" references a theme variable but is missing from THEME_DERIVED_TOKENS. Add it to the set in colors.ts or local [--theme-hue:X] overrides will silently fail for this token.`)}B(h);function _(r){const o=r===void 0?[".dark",'[theme="dark"]']:typeof r=="string"?[r]:r;return o.length===1?o[0]:`:is(${o.join(", ")})`}function P(r=C,s={}){const{scope:o}=s,t=_(s.darkSelector),d=(n="  ")=>[`${n}--radius: 0.58rem;`,`${n}--theme-hue: ${r.hue};`,`${n}--theme-dark-hue: ${r.darkHue};`,`${n}--theme-tint: ${r.tint};`,`${n}--primary-light: ${r.primaryLight};`,`${n}--primary-dark: ${r.primaryDark};`].join(`
-`),e=n=>{const m={},k={};for(const[g,b]of Object.entries(h))O.has(g)?k[g]=b[n]:m[g]=b[n];return{staticVars:m,dynamicVars:k}},u=e(0),l=e(1);if(o){const n=`:is(${o}, ${o} *)`,m=`:is(${t} ${o}, ${o}${t}, ${t} ${o} *, ${o}${t} *)`;return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+`)}const C={hue:90,darkHue:264,tint:.006,primaryLight:"oklch(0.65 0.21 37.41)",primaryDark:"oklch(0.83 0.16 84.71)"};function u(r,s,o,t){const d=o==="light"?"var(--theme-hue)":"var(--theme-dark-hue)",e=s===1?"var(--theme-tint)":s===0?"0":`calc(var(--theme-tint) * ${s})`;return`oklch(${r} ${e} ${d})`}function a(r,s,o,t){return t!==void 0?`oklch(${r} ${s} ${o} / ${t*100}%)`:`oklch(${r} ${s} ${o})`}function V(){return{background:[u(.966,.79,"light"),u(.187,1.1,"dark"),"bg-background"],foreground:[a(.13,.028,262),a(.967,.003,265),"text-foreground"],card:[u(.995,.3,"light"),u(.2,1.2,"dark"),"bg-card"],"card-foreground":["var(--foreground)","var(--foreground)","text-card-foreground"],muted:[u(.953,1.28,"light"),u(.209,1.33,"dark"),"bg-muted"],"muted-foreground":[a(.446,.03,257),a(.709,0,0),"text-muted-foreground"],chrome:[u(.923,1.67,"light"),u(.187,1.1,"dark"),"bg-chrome"],primary:["var(--primary-light)","var(--primary-dark)","bg-primary"],"primary-foreground":[a(1,0,0),a(.13,.028,262),"text-primary-foreground"],destructive:[a(.92,.03,32.22),a(.24,.03,2.79),"bg-destructive"],"destructive-foreground":[a(.59,.2,23.61),a(.6316,.1927,24.53),"text-destructive-foreground"],success:[a(.94,.06,154.03),a(.27,.04,157.6),"bg-success"],"success-foreground":[a(.448,.119,151.328),a(.925,.084,155.995),"text-success-foreground"],warning:[a(.93,.04,74.41),a(.29,.03,75),"bg-warning"],"warning-foreground":[a(.476,.114,61.907),a(.77,.14,99.29),"text-warning-foreground"],info:[a(.882,.059,254.128),a(.4242,.1982,265.5,.4),"bg-info"],"info-foreground":[a(.49,.02,254),a(.882,.059,254.128),"text-info-foreground"],border:[u(.9,.8,"light"),u(.27,1.2,"dark"),"border-border"],input:[u(.81,.5,"light"),u(.3,1.5,"dark"),"border-input"],ring:[a(.446,.03,257),a(.709,0,0),"border-ring"],"fill-expanded":["color-mix(in oklab, var(--foreground) 6%, transparent)","color-mix(in oklab, var(--foreground) 14%, transparent)","bg-fill-expanded"],"fill-selected":["color-mix(in oklab, var(--foreground) 6%, transparent)","color-mix(in oklab, var(--foreground) 10%, transparent)","bg-fill-selected"],"fill-hover":["color-mix(in oklab, var(--foreground) 4%, transparent)","color-mix(in oklab, var(--foreground) 7%, transparent)","bg-fill-hover"]}}const p=V();function q(r){const s=r==="light"?0:1;return Object.fromEntries(Object.entries(p).map(([o,t])=>[o,t[s]]))}const O=new Set(["background","card","muted","chrome","primary","border","input","fill-hover","fill-expanded","fill-selected"]);function B(r){const s=["var(--theme-hue)","var(--theme-dark-hue)","var(--theme-tint)","var(--primary-light)","var(--primary-dark)"];for(const[o,[t,d]]of Object.entries(r))if(s.some(l=>t.includes(l)||d.includes(l))&&!O.has(o))throw new Error(`[@posthog/quill-tokens] Token "${o}" references a theme variable but is missing from THEME_DERIVED_TOKENS. Add it to the set in colors.ts or local [--theme-hue:X] overrides will silently fail for this token.`)}B(p);function _(r){const o=r===void 0?[".dark",'[theme="dark"]','[data-theme="dark"]']:typeof r=="string"?[r]:r;return o.length===1?o[0]:`:is(${o.join(", ")})`}function P(r=C,s={}){const{scope:o}=s,t=_(s.darkSelector),d=(n="  ")=>[`${n}--radius: 0.58rem;`,`${n}--theme-hue: ${r.hue};`,`${n}--theme-dark-hue: ${r.darkHue};`,`${n}--theme-tint: ${r.tint};`,`${n}--primary-light: ${r.primaryLight};`,`${n}--primary-dark: ${r.primaryDark};`].join(`
+`),e=n=>{const m={},k={};for(const[g,b]of Object.entries(p))O.has(g)?k[g]=b[n]:m[g]=b[n];return{staticVars:m,dynamicVars:k}},l=e(0),c=e(1);if(o){const n=`:is(${o}, ${o} *)`,m=`:is(${t} ${o}, ${o}${t}, ${t} ${o} *, ${o}${t} *)`;return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
 
 /*
  * Scoped output — all token vars are gated behind \`${o}\` so they
@@ -26,8 +26,8 @@ ${o} {
 
 ${n} {
 ${d()}
-${p(u.staticVars)}
-${p(u.dynamicVars)}
+${h(l.staticVars)}
+${h(l.dynamicVars)}
 
   /* Override Tailwind --color-* theme tokens within scope so utilities
    * like bg-card, text-foreground, border-border resolve to quill's
@@ -36,8 +36,8 @@ ${j()}
 }
 
 ${m} {
-${p(l.staticVars)}
-${p(l.dynamicVars)}
+${h(c.staticVars)}
+${h(c.dynamicVars)}
 }
 `}return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
 
@@ -56,11 +56,11 @@ ${d()}
 
 /* Static colors (no theme-var references, safe on :root) */
 :root {
-${p(u.staticVars)}
+${h(l.staticVars)}
 }
 
 ${t} {
-${p(l.staticVars)}
+${h(c.staticVars)}
 }
 
 /*
@@ -69,12 +69,12 @@ ${p(l.staticVars)}
  * This enables local overrides like [--theme-hue:200] on a container.
  */
 * {
-${p(u.dynamicVars)}
+${h(l.dynamicVars)}
 }
 
 :is(${t}, ${t} *) {
-${p(l.dynamicVars)}
+${h(c.dynamicVars)}
 }
-`}function j(){return Object.keys(h).map(r=>`  --color-${r}: var(--${r});`).join(`
-`)}const x=[["--radius-xs","calc(var(--radius) - 7px)"],["--radius-sm","calc(var(--radius) - 5px)"],["--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)"]];function z(r={}){const{includeBaseLayer:s=!1,scope:o}=r,t=_(r.darkSelector),e=["/* Auto-generated by @posthog/quill-tokens — do not edit manually */","",`@custom-variant dark (${`&:is(${t}, ${t} *)`});`];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(j()),e.push(""),e.push("  /* --- Spacing --- */"),e.push(D()),e.push(""),e.push("  /* --- Font sizes --- */"),e.push(M()),e.push(""),e.push("  /* --- Font families --- */"),e.push(N()),e.push(""),e.push("  /* --- Shadows --- */"),e.push(F()),e.push(""),e.push("  /* --- Radius (derived from --radius base) --- */");for(const[l,n]of x)e.push(`  ${l}: ${n};`);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-primary)) }"),e.push("    50% { box-shadow: 0 0 6px 2px var(--pulse-glow-color, var(--color-primary)) }"),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("}"),e.push("");const u=o??":root";e.push(`${u} {`);for(const[l,n]of x)e.push(`  ${l}: ${n};`);for(const[l,n]of Object.entries($))e.push(`  --shadow-${l}: ${n};`);return e.push("}"),s&&(e.push(""),e.push("@layer base {"),o?(e.push(`  ${o}, ${o} * {`),e.push("    @apply border-border outline-ring/50;"),e.push("  }")):(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 X={none:"0px",sm:"4px",md:"6px",lg:"8px",xl:"12px",full:"9999px"};exports.DEFAULT_THEME=C;exports.SPACING_BASE=E;exports.SPACING_BASE_REM=f;exports.borderRadius=X;exports.buildSemanticColors=V;exports.cssVars=v;exports.cssVarsFlat=p;exports.fontFamily=T;exports.fontFamilyValue=y;exports.fontSize=w;exports.generateColorSystemCSS=P;exports.generateStylesCSS=z;exports.quoteFontName=S;exports.resolveTheme=q;exports.semanticColors=h;exports.shadow=$;exports.spacing=H;exports.spacingPx=R;
+`}function j(){return Object.keys(p).map(r=>`  --color-${r}: var(--${r});`).join(`
+`)}const x=[["--radius-xs","calc(var(--radius) - 7px)"],["--radius-sm","calc(var(--radius) - 5px)"],["--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)"]];function z(r={}){const{includeBaseLayer:s=!1,scope:o}=r,t=_(r.darkSelector),e=["/* Auto-generated by @posthog/quill-tokens — do not edit manually */","",`@custom-variant dark (${`&:is(${t}, ${t} *)`});`];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(j()),e.push(""),e.push("  /* --- Spacing --- */"),e.push(D()),e.push(""),e.push("  /* --- Font sizes --- */"),e.push(M()),e.push(""),e.push("  /* --- Font families --- */"),e.push(N()),e.push(""),e.push("  /* --- Shadows --- */"),e.push(F()),e.push(""),e.push("  /* --- Radius (derived from --radius base) --- */");for(const[c,n]of x)e.push(`  ${c}: ${n};`);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-primary)) }"),e.push("    50% { box-shadow: 0 0 6px 2px var(--pulse-glow-color, var(--color-primary)) }"),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("}"),e.push("");const l=o??":root";e.push(`${l} {`);for(const[c,n]of x)e.push(`  ${c}: ${n};`);for(const[c,n]of Object.entries($))e.push(`  --shadow-${c}: ${n};`);return e.push("}"),s&&(e.push(""),e.push("@layer base {"),o?(e.push(`  ${o}, ${o} * {`),e.push("    @apply border-border outline-ring/50;"),e.push("  }")):(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 X={none:"0px",sm:"4px",md:"6px",lg:"8px",xl:"12px",full:"9999px"};exports.DEFAULT_THEME=C;exports.SPACING_BASE=E;exports.SPACING_BASE_REM=f;exports.borderRadius=X;exports.buildSemanticColors=V;exports.cssVars=v;exports.cssVarsFlat=h;exports.fontFamily=T;exports.fontFamilyValue=y;exports.fontSize=w;exports.generateColorSystemCSS=P;exports.generateStylesCSS=z;exports.quoteFontName=S;exports.resolveTheme=q;exports.semanticColors=p;exports.shadow=$;exports.spacing=H;exports.spacingPx=R;

package/dist/index.js

@@ -1,8 +1,8 @@
 function w(r, s, o = "  ") {
-  return Object.entries(r).map(([t, p]) => `${o}--${s}-${t}: ${p};`).join(`
+  return Object.entries(r).map(([t, h]) => `${o}--${s}-${t}: ${h};`).join(`
 `);
 }
-function h(r, s = "  ") {
+function d(r, s = "  ") {
   return Object.entries(r).map(([o, t]) => `${s}--${o}: ${t};`).join(`
 `);
 }
@@ -70,48 +70,59 @@ const R = {
   primaryLight: "oklch(0.65 0.21 37.41)",
   primaryDark: "oklch(0.83 0.16 84.71)"
 };
-function c(r, s, o, t) {
-  const p = o === "light" ? "var(--theme-hue)" : "var(--theme-dark-hue)", e = s === 1 ? "var(--theme-tint)" : s === 0 ? "0" : `calc(var(--theme-tint) * ${s})`;
-  return `oklch(${r} ${e} ${p})`;
+function u(r, s, o, t) {
+  const h = o === "light" ? "var(--theme-hue)" : "var(--theme-dark-hue)", e = s === 1 ? "var(--theme-tint)" : s === 0 ? "0" : `calc(var(--theme-tint) * ${s})`;
+  return `oklch(${r} ${e} ${h})`;
 }
-function n(r, s, o, t) {
+function a(r, s, o, t) {
   return t !== void 0 ? `oklch(${r} ${s} ${o} / ${t * 100}%)` : `oklch(${r} ${s} ${o})`;
 }
 function I() {
   return {
     // ── Surfaces (theme-derived) ──────────────────
-    background: [c(0.97, 1, "light"), c(0.145, 1.5, "dark"), "bg-background"],
-    foreground: [n(0.13, 0.028, 262), n(0.967, 3e-3, 265), "text-foreground"],
-    card: [c(0.995, 0.3, "light"), c(0.2, 1.2, "dark"), "bg-card"],
+    // Matched to PostHog app's --color-bg-primary so quill panels blend
+    // with the surrounding app: light hsl(75 14% 95%), dark hsl(240 8% 8%),
+    // converted to OKLCH. Dark equals `muted` — PostHog uses one token for
+    // both; surfaces separate via `card` / borders, not background tone.
+    background: [u(0.966, 0.79, "light"), u(0.187, 1.1, "dark"), "bg-background"],
+    foreground: [a(0.13, 0.028, 262), a(0.967, 3e-3, 265), "text-foreground"],
+    card: [u(0.995, 0.3, "light"), u(0.2, 1.2, "dark"), "bg-card"],
     // Aliases `foreground` — kept for shadcn API compatibility. Drop once
     // primitives migrate to plain `text-foreground`.
     "card-foreground": ["var(--foreground)", "var(--foreground)", "text-card-foreground"],
-    muted: [c(0.94, 1.5, "light"), c(0.27, 1.5, "dark"), "bg-muted"],
-    "muted-foreground": [n(0.446, 0.03, 257), n(0.709, 0, 0), "text-muted-foreground"],
+    // Matched to PostHog app's --color-bg-surface-secondary (subdued cards,
+    // list rows): light hsl(70 16% 93%), dark hsl(240 8% 10%), in OKLCH.
+    muted: [u(0.953, 1.28, "light"), u(0.209, 1.33, "dark"), "bg-muted"],
+    "muted-foreground": [a(0.446, 0.03, 257), a(0.709, 0, 0), "text-muted-foreground"],
+    // Chrome — UI furniture surface (toolbars, menubars, nav). Matched to
+    // PostHog app's --color-bg-surface-tertiary: light hsl(77 13% 89%),
+    // dark hsl(240 8% 8%), in OKLCH. Hue stays theme-derived; chroma is
+    // near-zero so the hue offset is imperceptible.
+    chrome: [u(0.923, 1.67, "light"), u(0.187, 1.1, "dark"), "bg-chrome"],
     // ── Brand (driven by --primary-light / --primary-dark) ─
     primary: ["var(--primary-light)", "var(--primary-dark)", "bg-primary"],
-    "primary-foreground": [n(1, 0, 0), n(0.13, 0.028, 262), "text-primary-foreground"],
+    "primary-foreground": [a(1, 0, 0), a(0.13, 0.028, 262), "text-primary-foreground"],
     // ── Status (independent of theme hue) ─────────
-    destructive: [n(0.92, 0.03, 32.22), n(0.24, 0.03, 2.79), "bg-destructive"],
+    destructive: [a(0.92, 0.03, 32.22), a(0.24, 0.03, 2.79), "bg-destructive"],
     "destructive-foreground": [
-      n(0.59, 0.2, 23.61),
-      n(0.6316, 0.1927, 24.53),
+      a(0.59, 0.2, 23.61),
+      a(0.6316, 0.1927, 24.53),
       "text-destructive-foreground"
     ],
-    success: [n(0.94, 0.06, 154.03), n(0.27, 0.04, 157.6), "bg-success"],
+    success: [a(0.94, 0.06, 154.03), a(0.27, 0.04, 157.6), "bg-success"],
     "success-foreground": [
-      n(0.448, 0.119, 151.328),
-      n(0.925, 0.084, 155.995),
+      a(0.448, 0.119, 151.328),
+      a(0.925, 0.084, 155.995),
       "text-success-foreground"
     ],
-    warning: [n(0.93, 0.04, 74.41), n(0.29, 0.03, 75), "bg-warning"],
-    "warning-foreground": [n(0.476, 0.114, 61.907), n(0.77, 0.14, 99.29), "text-warning-foreground"],
-    info: [n(0.882, 0.059, 254.128), n(0.4242, 0.1982, 265.5, 0.4), "bg-info"],
-    "info-foreground": [n(0.49, 0.02, 254), n(0.882, 0.059, 254.128), "text-info-foreground"],
+    warning: [a(0.93, 0.04, 74.41), a(0.29, 0.03, 75), "bg-warning"],
+    "warning-foreground": [a(0.476, 0.114, 61.907), a(0.77, 0.14, 99.29), "text-warning-foreground"],
+    info: [a(0.882, 0.059, 254.128), a(0.4242, 0.1982, 265.5, 0.4), "bg-info"],
+    "info-foreground": [a(0.49, 0.02, 254), a(0.882, 0.059, 254.128), "text-info-foreground"],
     // ── Borders & rings (theme-derived) ───────────
-    border: [c(0.9, 0.8, "light"), c(0.27, 1.2, "dark"), "border-border"],
-    input: [c(0.81, 0.5, "light"), c(0.3, 1.5, "dark"), "border-input"],
-    ring: [n(0.446, 0.03, 257), n(0.709, 0, 0), "border-ring"],
+    border: [u(0.9, 0.8, "light"), u(0.27, 1.2, "dark"), "border-border"],
+    input: [u(0.81, 0.5, "light"), u(0.3, 1.5, "dark"), "border-input"],
+    ring: [a(0.446, 0.03, 257), a(0.709, 0, 0), "border-ring"],
     // ── Interactive fills for default button / interactive elements ───────────
     // Relative overlays on `--foreground` so hover/selected/expanded keep
     // the same contrast against any surface (background, muted, card, etc.).
@@ -143,6 +154,7 @@ const v = /* @__PURE__ */ new Set([
   "background",
   "card",
   "muted",
+  "chrome",
   "primary",
   "border",
   "input",
@@ -160,34 +172,34 @@ function q(r) {
     "var(--primary-light)",
     "var(--primary-dark)"
   ];
-  for (const [o, [t, p]] of Object.entries(r))
-    if (s.some((u) => t.includes(u) || p.includes(u)) && !v.has(o))
+  for (const [o, [t, h]] of Object.entries(r))
+    if (s.some((l) => t.includes(l) || h.includes(l)) && !v.has(o))
       throw new Error(
         `[@posthog/quill-tokens] Token "${o}" references a theme variable but is missing from THEME_DERIVED_TOKENS. Add it to the set in colors.ts or local [--theme-hue:X] overrides will silently fail for this token.`
       );
 }
 q(m);
 function y(r) {
-  const o = r === void 0 ? [".dark", '[theme="dark"]'] : typeof r == "string" ? [r] : r;
+  const o = r === void 0 ? [".dark", '[theme="dark"]', '[data-theme="dark"]'] : typeof r == "string" ? [r] : r;
   return o.length === 1 ? o[0] : `:is(${o.join(", ")})`;
 }
 function X(r = R, s = {}) {
-  const { scope: o } = s, t = y(s.darkSelector), p = (a = "  ") => [
-    `${a}--radius: 0.58rem;`,
-    `${a}--theme-hue: ${r.hue};`,
-    `${a}--theme-dark-hue: ${r.darkHue};`,
-    `${a}--theme-tint: ${r.tint};`,
-    `${a}--primary-light: ${r.primaryLight};`,
-    `${a}--primary-dark: ${r.primaryDark};`
+  const { scope: o } = s, t = y(s.darkSelector), h = (n = "  ") => [
+    `${n}--radius: 0.58rem;`,
+    `${n}--theme-hue: ${r.hue};`,
+    `${n}--theme-dark-hue: ${r.darkHue};`,
+    `${n}--theme-tint: ${r.tint};`,
+    `${n}--primary-light: ${r.primaryLight};`,
+    `${n}--primary-dark: ${r.primaryDark};`
   ].join(`
-`), e = (a) => {
-    const d = {}, $ = {};
+`), e = (n) => {
+    const p = {}, $ = {};
     for (const [f, k] of Object.entries(m))
-      v.has(f) ? $[f] = k[a] : d[f] = k[a];
-    return { staticVars: d, dynamicVars: $ };
-  }, u = e(0), l = e(1);
+      v.has(f) ? $[f] = k[n] : p[f] = k[n];
+    return { staticVars: p, dynamicVars: $ };
+  }, l = e(0), c = e(1);
   if (o) {
-    const a = `:is(${o}, ${o} *)`, d = `:is(${t} ${o}, ${o}${t}, ${t} ${o} *, ${o}${t} *)`;
+    const n = `:is(${o}, ${o} *)`, p = `:is(${t} ${o}, ${o}${t}, ${t} ${o} *, ${o}${t} *)`;
     return `/* Auto-generated by @posthog/quill-tokens — do not edit manually */
 
 /*
@@ -208,10 +220,10 @@ ${o} {
   color-scheme: dark;
 }
 
-${a} {
-${p()}
-${h(u.staticVars)}
-${h(u.dynamicVars)}
+${n} {
+${h()}
+${d(l.staticVars)}
+${d(l.dynamicVars)}
 
   /* Override Tailwind --color-* theme tokens within scope so utilities
    * like bg-card, text-foreground, border-border resolve to quill's
@@ -219,9 +231,9 @@ ${h(u.dynamicVars)}
 ${S()}
 }
 
-${d} {
-${h(l.staticVars)}
-${h(l.dynamicVars)}
+${p} {
+${d(c.staticVars)}
+${d(c.dynamicVars)}
 }
 `;
   }
@@ -237,16 +249,16 @@ ${t} {
 
 /* Theme knobs — override these to shift the palette */
 :root {
-${p()}
+${h()}
 }
 
 /* Static colors (no theme-var references, safe on :root) */
 :root {
-${h(u.staticVars)}
+${d(l.staticVars)}
 }
 
 ${t} {
-${h(l.staticVars)}
+${d(c.staticVars)}
 }
 
 /*
@@ -255,11 +267,11 @@ ${h(l.staticVars)}
  * This enables local overrides like [--theme-hue:200] on a container.
  */
 * {
-${h(u.dynamicVars)}
+${d(l.dynamicVars)}
 }
 
 :is(${t}, ${t} *) {
-${h(l.dynamicVars)}
+${d(c.dynamicVars)}
 }
 `;
 }
@@ -284,15 +296,15 @@ function z(r = {}) {
     `@custom-variant dark (${`&:is(${t}, ${t} *)`});`
   ];
   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(S()), e.push(""), e.push("  /* --- Spacing --- */"), e.push(C()), e.push(""), e.push("  /* --- Font sizes --- */"), e.push(H()), e.push(""), e.push("  /* --- Font families --- */"), e.push(D()), e.push(""), e.push("  /* --- Shadows --- */"), e.push(V()), e.push(""), e.push("  /* --- Radius (derived from --radius base) --- */");
-  for (const [l, a] of b)
-    e.push(`  ${l}: ${a};`);
+  for (const [c, n] of b)
+    e.push(`  ${c}: ${n};`);
   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-primary)) }"), e.push("    50% { box-shadow: 0 0 6px 2px var(--pulse-glow-color, var(--color-primary)) }"), 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("}"), e.push("");
-  const u = o ?? ":root";
-  e.push(`${u} {`);
-  for (const [l, a] of b)
-    e.push(`  ${l}: ${a};`);
-  for (const [l, a] of Object.entries(x))
-    e.push(`  --shadow-${l}: ${a};`);
+  const l = o ?? ":root";
+  e.push(`${l} {`);
+  for (const [c, n] of b)
+    e.push(`  ${c}: ${n};`);
+  for (const [c, n] of Object.entries(x))
+    e.push(`  --shadow-${c}: ${n};`);
   return e.push("}"), s && (e.push(""), e.push("@layer base {"), o ? (e.push(`  ${o}, ${o} * {`), e.push("    @apply border-border outline-ring/50;"), e.push("  }")) : (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(`
 `);
 }
@@ -311,7 +323,7 @@ export {
   L as borderRadius,
   I as buildSemanticColors,
   w as cssVars,
-  h as cssVarsFlat,
+  d as cssVarsFlat,
   A as fontFamily,
   T as fontFamilyValue,
   F as fontSize,

package/dist/src/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/{colors.d.ts → src/colors.d.ts}

@@ -58,8 +58,11 @@ export interface StylesConfig {
      * array — when multiple are given they are combined with `:is()`
      * so any of them activates dark mode.
      *
-     * Default: `['.dark', '[theme="dark"]']` (both `.dark` class and
-     * `theme="dark"` attribute work out of the box).
+     * Default: `['.dark', '[theme="dark"]', '[data-theme="dark"]']`. The
+     * three flavours cover Tailwind's `.dark` class convention, the bare
+     * `theme="dark"` attribute, and the `data-theme="dark"` attribute used
+     * by libraries that follow the HTML `data-*` convention (notably
+     * `@modelcontextprotocol/ext-apps` SDK's `applyDocumentTheme()`).
      */
     darkSelector?: string | string[];
 }

package/dist/src/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AASH,MAAM,WAAW,WAAW;IACxB,sDAAsD;IACtD,GAAG,EAAE,MAAM,CAAA;IACX,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB,0DAA0D;IAC1D,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,WAM3B,CAAA;AAID,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAA;AACrC,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,CAAC,CAAA;AA8BtF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CA6EhE;AAED,eAAO,MAAM,cAAc,4BAAwB,CAAA;AAInD,MAAM,WAAW,YAAY;IACzB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CACnC;AAID,gCAAgC;AAChC,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAG3E;AAkED,gEAAgE;AAChE,wBAAgB,sBAAsB,CAClC,KAAK,GAAE,WAA2B,EAClC,IAAI,GAAE,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,cAAc,CAAM,GACxD,MAAM,CAqHR;AAuCD,wBAAgB,iBAAiB,CAAC,MAAM,GAAE,YAAiB,GAAG,MAAM,CAkGnE"}

package/dist/src/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/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACH,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,GAChB,MAAM,UAAU,CAAA;AACjB,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGvF,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG9E,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/src/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;;;;;CAKT,CAAA;AAEV,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAA;AAElC,2DAA2D;AAC3D,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C"}

package/dist/src/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/spacing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,wEAAwE;AACxE,eAAO,MAAM,gBAAgB,OAAO,CAAA;AAEpC,gDAAgD;AAChD,eAAO,MAAM,YAAY,YAA2B,CAAA;AAKpD;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}

package/dist/src/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/dist/tailwind-lib.css

@@ -1,6 +1,6 @@
 /* Auto-generated by @posthog/quill-tokens — do not edit manually */
 
-@custom-variant dark (&:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) *));
+@custom-variant dark (&:is(:is(.dark, [theme="dark"], [data-theme="dark"]), :is(.dark, [theme="dark"], [data-theme="dark"]) *));
 
 @theme inline {
   --animate-skeleton: skeleton 2s -1s infinite linear;
@@ -15,6 +15,7 @@
   --color-card-foreground: var(--card-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-chrome: var(--chrome);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-destructive: var(--destructive);

package/dist/tailwind-lib.scoped.css

@@ -1,6 +1,6 @@
 /* Auto-generated by @posthog/quill-tokens — do not edit manually */
 
-@custom-variant dark (&:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) *));
+@custom-variant dark (&:is(:is(.dark, [theme="dark"], [data-theme="dark"]), :is(.dark, [theme="dark"], [data-theme="dark"]) *));
 
 @theme inline {
   --animate-skeleton: skeleton 2s -1s infinite linear;
@@ -15,6 +15,7 @@
   --color-card-foreground: var(--card-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-chrome: var(--chrome);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-destructive: var(--destructive);

package/dist/tailwind.css

@@ -1,6 +1,6 @@
 /* Auto-generated by @posthog/quill-tokens — do not edit manually */
 
-@custom-variant dark (&:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) *));
+@custom-variant dark (&:is(:is(.dark, [theme="dark"], [data-theme="dark"]), :is(.dark, [theme="dark"], [data-theme="dark"]) *));
 
 @theme inline {
   --animate-skeleton: skeleton 2s -1s infinite linear;
@@ -15,6 +15,7 @@
   --color-card-foreground: var(--card-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-chrome: var(--chrome);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-destructive: var(--destructive);

package/dist/tailwind.scoped.css

@@ -1,6 +1,6 @@
 /* Auto-generated by @posthog/quill-tokens — do not edit manually */
 
-@custom-variant dark (&:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) *));
+@custom-variant dark (&:is(:is(.dark, [theme="dark"], [data-theme="dark"]), :is(.dark, [theme="dark"], [data-theme="dark"]) *));
 
 @theme inline {
   --animate-skeleton: skeleton 2s -1s infinite linear;
@@ -15,6 +15,7 @@
   --color-card-foreground: var(--card-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-chrome: var(--chrome);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-destructive: var(--destructive);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@posthog/quill-tokens",
-    "version": "0.3.0-beta.1",
+    "version": "0.3.0-beta.9",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/colors.ts

@@ -87,7 +87,11 @@ function oklch(l: number, c: number, h: number, alpha?: number): string {
 export function buildSemanticColors(): Record<string, ColorTuple> {
     return {
         // ── Surfaces (theme-derived) ──────────────────
-        background: [surface(0.97, 1, 'light'), surface(0.145, 1.5, 'dark'), 'bg-background'],
+        // Matched to PostHog app's --color-bg-primary so quill panels blend
+        // with the surrounding app: light hsl(75 14% 95%), dark hsl(240 8% 8%),
+        // converted to OKLCH. Dark equals `muted` — PostHog uses one token for
+        // both; surfaces separate via `card` / borders, not background tone.
+        background: [surface(0.966, 0.79, 'light'), surface(0.187, 1.1, 'dark'), 'bg-background'],
         foreground: [oklch(0.13, 0.028, 262), oklch(0.967, 0.003, 265), 'text-foreground'],
 
         card: [surface(0.995, 0.3, 'light'), surface(0.2, 1.2, 'dark'), 'bg-card'],
@@ -95,9 +99,17 @@ export function buildSemanticColors(): Record<string, ColorTuple> {
         // primitives migrate to plain `text-foreground`.
         'card-foreground': ['var(--foreground)', 'var(--foreground)', 'text-card-foreground'],
 
-        muted: [surface(0.94, 1.5, 'light'), surface(0.27, 1.5, 'dark'), 'bg-muted'],
+        // Matched to PostHog app's --color-bg-surface-secondary (subdued cards,
+        // list rows): light hsl(70 16% 93%), dark hsl(240 8% 10%), in OKLCH.
+        muted: [surface(0.953, 1.28, 'light'), surface(0.209, 1.33, 'dark'), 'bg-muted'],
         'muted-foreground': [oklch(0.446, 0.03, 257), oklch(0.709, 0, 0), 'text-muted-foreground'],
 
+        // Chrome — UI furniture surface (toolbars, menubars, nav). Matched to
+        // PostHog app's --color-bg-surface-tertiary: light hsl(77 13% 89%),
+        // dark hsl(240 8% 8%), in OKLCH. Hue stays theme-derived; chroma is
+        // near-zero so the hue offset is imperceptible.
+        chrome: [surface(0.923, 1.67, 'light'), surface(0.187, 1.1, 'dark'), 'bg-chrome'],
+
         // ── Brand (driven by --primary-light / --primary-dark) ─
         primary: ['var(--primary-light)', 'var(--primary-dark)', 'bg-primary'],
         'primary-foreground': [oklch(1, 0, 0), oklch(0.13, 0.028, 262), 'text-primary-foreground'],
@@ -174,8 +186,11 @@ export interface StylesConfig {
      * array — when multiple are given they are combined with `:is()`
      * so any of them activates dark mode.
      *
-     * Default: `['.dark', '[theme="dark"]']` (both `.dark` class and
-     * `theme="dark"` attribute work out of the box).
+     * Default: `['.dark', '[theme="dark"]', '[data-theme="dark"]']`. The
+     * three flavours cover Tailwind's `.dark` class convention, the bare
+     * `theme="dark"` attribute, and the `data-theme="dark"` attribute used
+     * by libraries that follow the HTML `data-*` convention (notably
+     * `@modelcontextprotocol/ext-apps` SDK's `applyDocumentTheme()`).
      */
     darkSelector?: string | string[]
 }
@@ -202,6 +217,7 @@ const THEME_DERIVED_TOKENS: ReadonlySet<string> = new Set([
     'background',
     'card',
     'muted',
+    'chrome',
     'primary',
     'border',
     'input',
@@ -246,7 +262,7 @@ assertThemeDerivedSyncedWithColors(semanticColors)
 
 /** Normalize darkSelector option into a single CSS selector string. */
 function resolveDarkSelector(raw?: string | string[]): string {
-    const defaults = ['.dark', '[theme="dark"]']
+    const defaults = ['.dark', '[theme="dark"]', '[data-theme="dark"]']
     const selectors = raw === undefined ? defaults : typeof raw === 'string' ? [raw] : raw
     return selectors.length === 1 ? selectors[0] : `:is(${selectors.join(', ')})`
 }

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

@@ -1 +0,0 @@
-{"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/colors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AASH,MAAM,WAAW,WAAW;IACxB,sDAAsD;IACtD,GAAG,EAAE,MAAM,CAAA;IACX,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB,0DAA0D;IAC1D,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,WAM3B,CAAA;AAID,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAA;AACrC,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,CAAC,CAAA;AA8BtF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAiEhE;AAED,eAAO,MAAM,cAAc,4BAAwB,CAAA;AAInD,MAAM,WAAW,YAAY;IACzB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CACnC;AAID,gCAAgC;AAChC,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAG3E;AAiED,gEAAgE;AAChE,wBAAgB,sBAAsB,CAClC,KAAK,GAAE,WAA2B,EAClC,IAAI,GAAE,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,cAAc,CAAM,GACxD,MAAM,CAqHR;AAuCD,wBAAgB,iBAAiB,CAAC,MAAM,GAAE,YAAiB,GAAG,MAAM,CAkGnE"}

package/dist/css.d.ts.map

@@ -1 +0,0 @@
-{"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.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACH,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,GAChB,MAAM,UAAU,CAAA;AACjB,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAGvF,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG9E,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/shadow.d.ts.map

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

package/dist/spacing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,wEAAwE;AACxE,eAAO,MAAM,gBAAgB,OAAO,CAAA;AAEpC,gDAAgD;AAChD,eAAO,MAAM,YAAY,YAA2B,CAAA;AAKpD;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}

package/dist/typography.d.ts.map

@@ -1 +0,0 @@
-{"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"}