npm - @posthog/quill-tokens - Versions diffs - 0.1.0-alpha.7 → 0.1.2-alpha.0 - Mend

@posthog/quill-tokens 0.1.0-alpha.7 → 0.1.2-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/color-system.css +3 -3
package/dist/color-system.scoped.css +119 -0
package/dist/colors.d.ts +21 -1
package/dist/colors.d.ts.map +1 -1
package/dist/index.cjs +53 -19
package/dist/index.js +168 -126
package/dist/tailwind-lib.css +1 -1
package/dist/tailwind-lib.scoped.css +101 -0
package/dist/tailwind.css +1 -1
package/dist/tailwind.scoped.css +107 -0
package/package.json +5 -2
package/src/build.ts +17 -0
package/src/colors.ts +105 -16

package/dist/color-system.css CHANGED Viewed

@@ -4,7 +4,7 @@
   color-scheme: light;
 }
-.dark {
+:is(.dark, [theme="dark"]) {
   color-scheme: dark;
 }
@@ -39,7 +39,7 @@
   --ring: oklch(0.446 0.03 257);
 }
-.dark {
+:is(.dark, [theme="dark"]) {
   --foreground: oklch(0.967 0.003 265);
   --card-foreground: oklch(0.967 0.003 265);
   --popover-foreground: oklch(0.967 0.003 265);
@@ -78,7 +78,7 @@
   --fill-hover: oklch(0.87 0 0 / 20%);
 }
-:is(.dark, .dark *) {
+:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) *) {
   --background: oklch(0.145 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
   --card: oklch(0.2 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
   --popover: oklch(0.21 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));

package/dist/color-system.scoped.css ADDED Viewed

@@ -0,0 +1,119 @@
+/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+/*
+ * Scoped output — all token vars are gated behind `[data-quill]` so they
+ * do not clash with the consumer's existing CSS custom properties.
+ * Add the `data-quill` attribute to wrapper elements
+ * where quill components are rendered.
+ *
+ * Dark mode: works when the dark selector is on an ancestor of the scope
+ * element (.dark > [data-quill]) OR on the scope element itself
+ * ([data-quill].dark).
+ */
+[data-quill] {
+  color-scheme: light;
+}
+:is(:is(.dark, [theme="dark"]) [data-quill], [data-quill]:is(.dark, [theme="dark"])) {
+  color-scheme: dark;
+}
+:is([data-quill], [data-quill] *) {
+  --radius: 0.625rem;
+  --theme-hue: 90;
+  --theme-dark-hue: 264;
+  --theme-tint: 0.006;
+  --primary-light: oklch(0.65 0.21 37.41);
+  --primary-dark: oklch(0.83 0.16 84.71);
+  --foreground: oklch(0.13 0.028 262);
+  --card-foreground: oklch(0.13 0.028 262);
+  --popover-foreground: oklch(0.13 0.028 262);
+  --muted-foreground: oklch(0.446 0.03 257);
+  --accent-foreground: oklch(0.13 0.028 262);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.31 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --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: oklch(0.49 0.02 254);
+  --ring: oklch(0.446 0.03 257);
+  --background: oklch(0.97 var(--theme-tint) var(--theme-hue));
+  --card: oklch(0.995 calc(var(--theme-tint) * 0.3) var(--theme-hue));
+  --popover: 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));
+  --accent: oklch(0.87 calc(var(--theme-tint) * 0.8) 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));
+  --fill-expanded: oklch(0.87 0 0 / 60%);
+  --fill-selected: oklch(0.87 0 0 / 40%);
+  --fill-hover: oklch(0.87 0 0 / 20%);
+  /* Override Tailwind --color-* theme tokens within scope so utilities
+   * like bg-accent, text-foreground, border-border resolve to quill's
+   * values instead of the consumer's global theme. */
+  --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-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-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-expanded: var(--fill-expanded);
+  --color-fill-selected: var(--fill-selected);
+  --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"]) *) {
+  --foreground: oklch(0.967 0.003 265);
+  --card-foreground: oklch(0.967 0.003 265);
+  --popover-foreground: oklch(0.967 0.003 265);
+  --muted-foreground: oklch(0.709 0 0);
+  --accent-foreground: oklch(0.967 0.003 265);
+  --primary-foreground: oklch(0.13 0.028 262);
+  --secondary: oklch(0.86 0 0);
+  --secondary-foreground: oklch(0.13 0.028 262);
+  --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: oklch(0.29 0.03 75);
+  --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);
+  --ring: oklch(0.709 0 0);
+  --background: oklch(0.145 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
+  --card: oklch(0.2 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
+  --popover: oklch(0.21 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
+  --muted: oklch(0.27 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
+  --accent: oklch(0.35 calc(var(--theme-tint) * 1.2) 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));
+  --fill-expanded: oklch(0.55 0 0 / 35%);
+  --fill-selected: oklch(0.55 0 0 / 25%);
+  --fill-hover: oklch(0.55 0 0 / 15%);
+}

package/dist/colors.d.ts CHANGED Viewed

@@ -42,11 +42,31 @@ export declare const semanticColors: Record<string, ColorTuple>;
 export interface StylesConfig {
     /** Include @layer base reset rules (apps only) */
     includeBaseLayer?: boolean;
+    /**
+     * CSS selector to scope all token CSS vars to. When set, vars are only
+     * defined inside elements matching this selector, preventing clashes
+     * with the consumer's existing CSS custom properties.
+     *
+     * Example: `'[data-quill]'` — consumer adds `data-quill` to wrapper
+     * elements. During migration the attribute moves up the DOM tree;
+     * when it reaches `<html>` the scope is effectively global and can
+     * be removed.
+     */
+    scope?: string;
+    /**
+     * CSS selector(s) for dark mode. Accepts a single selector or an
+     * 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).
+     */
+    darkSelector?: string | string[];
 }
 /** Flat object for one theme */
 export declare function resolveTheme(mode: 'light' | 'dark'): Record<string, string>;
 /** Generate color-system.css (:root light + .dark overrides) */
-export declare function generateColorSystemCSS(theme?: ThemeConfig): string;
+export declare function generateColorSystemCSS(theme?: ThemeConfig, opts?: Pick<StylesConfig, 'scope' | 'darkSelector'>): string;
 /**
  * Generate Tailwind v4 @theme + @custom-variant + optional @layer base.
  *

package/dist/colors.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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,CAuEhE;AAED,eAAO,MAAM,cAAc,4BAAwB,CAAA;AAInD,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,MAAM,EAAE,MAAM,CAAC,CAG3E;~~AA6DD~~,gEAAgE;AAChE,wBAAgB,sBAAsB,~~CAAC~~,KAAK,GAAE,WAA2B,GAAG,MAAM,~~CAiEjF~~;AASD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,GAAE,YAAiB,GAAG,MAAM,~~CAgFnE~~"}
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,CAuEhE;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;AAmED,gEAAgE;AAChE,wBAAgB,sBAAsB,CAClC,KAAK,GAAE,WAA2B,EAClC,IAAI,GAAE,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,cAAc,CAAM,GACxD,MAAM,CAqHR;AASD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,GAAE,YAAiB,GAAG,MAAM,CAwFnE"}

package/dist/index.cjs CHANGED Viewed

@@ -1,32 +1,66 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function m(r,o,e="  "){return Object.entries(r).map(([s,u])=>`${e}--${o}-${s}: ${u};`).join(`
-`)}function c(r,o="  "){return Object.entries(r).map(([e,s])=>`${o}--${e}: ${s};`).join(`
-`)}function x(r){return/\s/.test(r)?`"${r}"`:r}function k(r){return r.map(x).join(", ")}const b={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 C(){return m(b,"shadow")}const h=.25,y=`${h}rem`,w=16;function F(r){return`${h*r}rem`}function _(r){return h*r*w}function V(){return`  --spacing: ${y};`}const j=16;function n(r){return`${r/j}rem`}const v={xxs:[n(10),{lineHeight:n(12)}],xs:[n(12),{lineHeight:n(16)}],sm:[n(14),{lineHeight:n(20)}],base:[n(16),{lineHeight:n(24)}],lg:[n(18),{lineHeight:n(28)}],xl:[n(20),{lineHeight:n(28)}],"2xl":[n(24),{lineHeight:n(32)}]},S={sans:["-apple-system","BlinkMacSystemFont","Inter","Segoe UI","Roboto","Helvetica Neue","sans-serif"],mono:["JetBrains Mono","Fira Code","monospace"]};function O(){return Object.entries(v).map(([r,[o,{lineHeight:e}]])=>`  --text-${r}: ${o};
-  --text-${r}--line-height: ${e};`).join(`
-`)}function A(){return Object.entries(S).map(([r,o])=>`  --font-${r}: ${k(o)};`).join(`
-`)}const $={hue:90,darkHue:264,tint:.006,primaryLight:"oklch(0.65 0.21 37.41)",primaryDark:"oklch(0.83 0.16 84.71)"};function a(r,o,e,s){const u=e==="light"?"var(--theme-hue)":"var(--theme-dark-hue)",i=o===1?"var(--theme-tint)":o===0?"0":`calc(var(--theme-tint) * ${o})`;return`oklch(${r} ${i} ${u})`}function t(r,o,e,s){return s!==void 0?`oklch(${r} ${o} ${e} / ${s*100}%)`:`oklch(${r} ${o} ${e})`}function E(){return{background:[a(.97,1,"light"),a(.145,1.5,"dark"),"bg-background"],foreground:[t(.13,.028,262),t(.967,.003,265),"text-foreground"],card:[a(.995,.3,"light"),a(.2,1.2,"dark"),"bg-card"],"card-foreground":[t(.13,.028,262),t(.967,.003,265),"text-card-foreground"],popover:[a(.995,.3,"light"),a(.21,1.2,"dark"),"bg-popover"],"popover-foreground":[t(.13,.028,262),t(.967,.003,265),"text-popover-foreground"],muted:[a(.94,1.5,"light"),a(.27,1.5,"dark"),"bg-muted"],"muted-foreground":[t(.446,.03,257),t(.709,0,0),"text-muted-foreground"],accent:[a(.87,.8,"light"),a(.35,1.2,"dark"),"bg-accent"],"accent-foreground":[t(.13,.028,262),t(.967,.003,265),"text-accent-foreground"],primary:["var(--primary-light)","var(--primary-dark)","bg-primary"],"primary-foreground":[t(1,0,0),t(.13,.028,262),"text-primary-foreground"],secondary:[t(.31,0,0),t(.86,0,0),"bg-secondary"],"secondary-foreground":[t(1,0,0),t(.13,.028,262),"text-secondary-foreground"],destructive:[t(.92,.03,32.22),t(.24,.03,2.79),"bg-destructive"],"destructive-foreground":[t(.59,.2,23.61),t(.6316,.1927,24.53),"text-destructive-foreground"],success:[t(.94,.06,154.03),t(.27,.04,157.6),"bg-success"],"success-foreground":[t(.448,.119,151.328),t(.925,.084,155.995),"text-success-foreground"],warning:[t(.93,.04,74.41),t(.29,.03,75),"bg-warning"],"warning-foreground":[t(.476,.114,61.907),t(.77,.14,99.29),"text-warning-foreground"],info:[t(.882,.059,254.128),t(.4242,.1982,265.5,.4),"bg-info"],"info-foreground":[t(.49,.02,254),t(.882,.059,254.128),"text-info-foreground"],border:[a(.9,.8,"light"),a(.27,1.2,"dark"),"border-border"],input:[a(.81,.5,"light"),a(.3,1.5,"dark"),"border-input"],ring:[t(.446,.03,257),t(.709,0,0),"border-ring"],"fill-expanded":["oklch(0.87 0 0 / 60%)","oklch(0.55 0 0 / 35%)","bg-fill-expanded"],"fill-selected":["oklch(0.87 0 0 / 40%)","oklch(0.55 0 0 / 25%)","bg-fill-selected"],"fill-hover":["oklch(0.87 0 0 / 20%)","oklch(0.55 0 0 / 15%)","bg-fill-hover"]}}const p=E();function H(r){const o=r==="light"?0:1;return Object.fromEntries(Object.entries(p).map(([e,s])=>[e,s[o]]))}const T=new Set(["background","card","popover","muted","accent","primary","border","input","fill-hover","fill-active","fill-expanded","fill-selected"]);function R(r){const o=["var(--theme-hue)","var(--theme-dark-hue)","var(--theme-tint)","var(--primary-light)","var(--primary-dark)"];for(const[e,[s,u]]of Object.entries(r))if(o.some(l=>s.includes(l)||u.includes(l))&&!T.has(e))throw new Error(`[@posthog/quill-tokens] Token "${e}" 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.`)}R(p);function D(r=$){const o=(i="  ")=>[`${i}--theme-hue: ${r.hue};`,`${i}--theme-dark-hue: ${r.darkHue};`,`${i}--theme-tint: ${r.tint};`,`${i}--primary-light: ${r.primaryLight};`,`${i}--primary-dark: ${r.primaryDark};`].join(`
-`),e=i=>{const l={},g={};for(const[d,f]of Object.entries(p))T.has(d)?g[d]=f[i]:l[d]=f[i];return{staticVars:l,dynamicVars:g}},s=e(0),u=e(1);return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function b(r,n,t="  "){return Object.entries(r).map(([s,l])=>`${t}--${n}-${s}: ${l};`).join(`
+`)}function c(r,n="  "){return Object.entries(r).map(([t,s])=>`${n}--${t}: ${s};`).join(`
+`)}function x(r){return/\s/.test(r)?`"${r}"`:r}function y(r){return r.map(x).join(", ")}const S={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 _(){return b(S,"shadow")}const m=.25,v=`${m}rem`,j=16;function A(r){return`${m*r}rem`}function H(r){return m*r*j}function D(){return`  --spacing: ${v};`}const R=16;function a(r){return`${r/R}rem`}const E={xxs:[a(10),{lineHeight:a(12)}],xs:[a(12),{lineHeight:a(16)}],sm:[a(14),{lineHeight:a(20)}],base:[a(16),{lineHeight:a(24)}],lg:[a(18),{lineHeight:a(28)}],xl:[a(20),{lineHeight:a(28)}],"2xl":[a(24),{lineHeight:a(32)}]},T={sans:["-apple-system","BlinkMacSystemFont","Inter","Segoe UI","Roboto","Helvetica Neue","sans-serif"],mono:["JetBrains Mono","Fira Code","monospace"]};function I(){return Object.entries(E).map(([r,[n,{lineHeight:t}]])=>`  --text-${r}: ${n};
+  --text-${r}--line-height: ${t};`).join(`
+`)}function M(){return Object.entries(T).map(([r,n])=>`  --font-${r}: ${y(n)};`).join(`
+`)}const w={hue:90,darkHue:264,tint:.006,primaryLight:"oklch(0.65 0.21 37.41)",primaryDark:"oklch(0.83 0.16 84.71)"};function i(r,n,t,s){const l=t==="light"?"var(--theme-hue)":"var(--theme-dark-hue)",e=n===1?"var(--theme-tint)":n===0?"0":`calc(var(--theme-tint) * ${n})`;return`oklch(${r} ${e} ${l})`}function o(r,n,t,s){return s!==void 0?`oklch(${r} ${n} ${t} / ${s*100}%)`:`oklch(${r} ${n} ${t})`}function C(){return{background:[i(.97,1,"light"),i(.145,1.5,"dark"),"bg-background"],foreground:[o(.13,.028,262),o(.967,.003,265),"text-foreground"],card:[i(.995,.3,"light"),i(.2,1.2,"dark"),"bg-card"],"card-foreground":[o(.13,.028,262),o(.967,.003,265),"text-card-foreground"],popover:[i(.995,.3,"light"),i(.21,1.2,"dark"),"bg-popover"],"popover-foreground":[o(.13,.028,262),o(.967,.003,265),"text-popover-foreground"],muted:[i(.94,1.5,"light"),i(.27,1.5,"dark"),"bg-muted"],"muted-foreground":[o(.446,.03,257),o(.709,0,0),"text-muted-foreground"],accent:[i(.87,.8,"light"),i(.35,1.2,"dark"),"bg-accent"],"accent-foreground":[o(.13,.028,262),o(.967,.003,265),"text-accent-foreground"],primary:["var(--primary-light)","var(--primary-dark)","bg-primary"],"primary-foreground":[o(1,0,0),o(.13,.028,262),"text-primary-foreground"],secondary:[o(.31,0,0),o(.86,0,0),"bg-secondary"],"secondary-foreground":[o(1,0,0),o(.13,.028,262),"text-secondary-foreground"],destructive:[o(.92,.03,32.22),o(.24,.03,2.79),"bg-destructive"],"destructive-foreground":[o(.59,.2,23.61),o(.6316,.1927,24.53),"text-destructive-foreground"],success:[o(.94,.06,154.03),o(.27,.04,157.6),"bg-success"],"success-foreground":[o(.448,.119,151.328),o(.925,.084,155.995),"text-success-foreground"],warning:[o(.93,.04,74.41),o(.29,.03,75),"bg-warning"],"warning-foreground":[o(.476,.114,61.907),o(.77,.14,99.29),"text-warning-foreground"],info:[o(.882,.059,254.128),o(.4242,.1982,265.5,.4),"bg-info"],"info-foreground":[o(.49,.02,254),o(.882,.059,254.128),"text-info-foreground"],border:[i(.9,.8,"light"),i(.27,1.2,"dark"),"border-border"],input:[i(.81,.5,"light"),i(.3,1.5,"dark"),"border-input"],ring:[o(.446,.03,257),o(.709,0,0),"border-ring"],"fill-expanded":["oklch(0.87 0 0 / 60%)","oklch(0.55 0 0 / 35%)","bg-fill-expanded"],"fill-selected":["oklch(0.87 0 0 / 40%)","oklch(0.55 0 0 / 25%)","bg-fill-selected"],"fill-hover":["oklch(0.87 0 0 / 20%)","oklch(0.55 0 0 / 15%)","bg-fill-hover"]}}const p=C();function N(r){const n=r==="light"?0:1;return Object.fromEntries(Object.entries(p).map(([t,s])=>[t,s[n]]))}const V=new Set(["background","card","popover","muted","accent","primary","border","input","fill-hover","fill-expanded","fill-selected"]);function q(r){const n=["var(--theme-hue)","var(--theme-dark-hue)","var(--theme-tint)","var(--primary-light)","var(--primary-dark)"];for(const[t,[s,l]]of Object.entries(r))if(n.some(h=>s.includes(h)||l.includes(h))&&!V.has(t))throw new Error(`[@posthog/quill-tokens] Token "${t}" 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(p);function F(r){const t=r===void 0?[".dark",'[theme="dark"]']:typeof r=="string"?[r]:r;return t.length===1?t[0]:`:is(${t.join(", ")})`}function B(r=w,n={}){const{scope:t}=n,s=F(n.darkSelector),l=(u="  ")=>[`${u}--radius: 0.625rem;`,`${u}--theme-hue: ${r.hue};`,`${u}--theme-dark-hue: ${r.darkHue};`,`${u}--theme-tint: ${r.tint};`,`${u}--primary-light: ${r.primaryLight};`,`${u}--primary-dark: ${r.primaryDark};`].join(`
+`),e=u=>{const g={},$={};for(const[f,k]of Object.entries(p))V.has(f)?$[f]=k[u]:g[f]=k[u];return{staticVars:g,dynamicVars:$}},h=e(0),d=e(1);if(t){const u=`:is(${t}, ${t} *)`,g=`:is(${s} ${t}, ${t}${s}, ${s} ${t} *, ${t}${s} *)`;return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+/*
+ * Scoped output — all token vars are gated behind \`${t}\` so they
+ * do not clash with the consumer's existing CSS custom properties.
+ * Add the \`${t.replace(/[[\]]/g,"")}\` attribute to wrapper elements
+ * where quill components are rendered.
+ *
+ * Dark mode: works when the dark selector is on an ancestor of the scope
+ * element (.dark > [data-quill]) OR on the scope element itself
+ * ([data-quill].dark).
+ */
+${t} {
+  color-scheme: light;
+}
+:is(${s} ${t}, ${t}${s}) {
+  color-scheme: dark;
+}
+${u} {
+${l()}
+${c(h.staticVars)}
+${c(h.dynamicVars)}
+  /* Override Tailwind --color-* theme tokens within scope so utilities
+   * like bg-accent, text-foreground, border-border resolve to quill's
+   * values instead of the consumer's global theme. */
+${O()}
+}
+${g} {
+${c(d.staticVars)}
+${c(d.dynamicVars)}
+}
+`}return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
 :root {
   color-scheme: light;
 }
-.dark {
+${s} {
   color-scheme: dark;
 }
 /* Theme knobs — override these to shift the palette */
 :root {
-  --radius: 0.625rem;
-${o()}
+${l()}
 }
 /* Static colors (no theme-var references, safe on :root) */
 :root {
-${c(s.staticVars)}
+${c(h.staticVars)}
 }
-.dark {
-${c(u.staticVars)}
+${s} {
+${c(d.staticVars)}
 }
 /*
@@ -35,12 +69,12 @@ ${c(u.staticVars)}
  * This enables local overrides like [--theme-hue:200] on a container.
  */
 * {
-${c(s.dynamicVars)}
+${c(h.dynamicVars)}
 }
-:is(.dark, .dark *) {
-${c(u.dynamicVars)}
+:is(${s}, ${s} *) {
+${c(d.dynamicVars)}
 }
-`}function I(){return Object.keys(p).map(r=>`  --color-${r}: var(--${r});`).join(`
-`)}function M(r={}){const{includeBaseLayer:o=!1}=r,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(I()),e.push(""),e.push("  /* --- Spacing --- */"),e.push(V()),e.push(""),e.push("  /* --- Font sizes --- */"),e.push(O()),e.push(""),e.push("  /* --- Font families --- */"),e.push(A()),e.push(""),e.push("  /* --- Shadows --- */"),e.push(C()),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("}"),o&&(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 N={none:"0px",sm:"4px",md:"6px",lg:"8px",xl:"12px",full:"9999px"};exports.DEFAULT_THEME=$;exports.SPACING_BASE=y;exports.SPACING_BASE_REM=h;exports.borderRadius=N;exports.buildSemanticColors=E;exports.cssVars=m;exports.cssVarsFlat=c;exports.fontFamily=S;exports.fontFamilyValue=k;exports.fontSize=v;exports.generateColorSystemCSS=D;exports.generateStylesCSS=M;exports.quoteFontName=x;exports.resolveTheme=H;exports.semanticColors=p;exports.shadow=b;exports.spacing=F;exports.spacingPx=_;
+`}function O(){return Object.keys(p).map(r=>`  --color-${r}: var(--${r});`).join(`
+`)}function P(r={}){const{includeBaseLayer:n=!1,scope:t}=r,s=F(r.darkSelector),e=["/* Auto-generated by @posthog/quill-tokens — do not edit manually */","",`@custom-variant dark (${`&:is(${s}, ${s} *)`});`];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(O()),e.push(""),e.push("  /* --- Spacing --- */"),e.push(D()),e.push(""),e.push("  /* --- Font sizes --- */"),e.push(I()),e.push(""),e.push("  /* --- Font families --- */"),e.push(M()),e.push(""),e.push("  /* --- Shadows --- */"),e.push(_()),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 {"),t?(e.push(`  ${t}, ${t} * {`),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 z={none:"0px",sm:"4px",md:"6px",lg:"8px",xl:"12px",full:"9999px"};exports.DEFAULT_THEME=w;exports.SPACING_BASE=v;exports.SPACING_BASE_REM=m;exports.borderRadius=z;exports.buildSemanticColors=C;exports.cssVars=b;exports.cssVarsFlat=c;exports.fontFamily=T;exports.fontFamilyValue=y;exports.fontSize=E;exports.generateColorSystemCSS=B;exports.generateStylesCSS=P;exports.quoteFontName=x;exports.resolveTheme=N;exports.semanticColors=p;exports.shadow=S;exports.spacing=A;exports.spacingPx=H;

package/dist/index.js CHANGED Viewed

@@ -1,120 +1,120 @@
-function x(r, o, e = "  ") {
-  return Object.entries(r).map(([s, u]) => `${e}--${o}-${s}: ${u};`).join(`
+function v(r, n, t = "  ") {
+  return Object.entries(r).map(([s, l]) => `${t}--${n}-${s}: ${l};`).join(`
 `);
 }
-function p(r, o = "  ") {
-  return Object.entries(r).map(([e, s]) => `${o}--${e}: ${s};`).join(`
+function h(r, n = "  ") {
+  return Object.entries(r).map(([t, s]) => `${n}--${t}: ${s};`).join(`
 `);
 }
-function k(r) {
+function S(r) {
   return /\s/.test(r) ? `"${r}"` : r;
 }
-function b(r) {
-  return r.map(k).join(", ");
+function E(r) {
+  return r.map(S).join(", ");
 }
-const v = {
+const w = {
   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 y() {
-  return x(v, "shadow");
+function T() {
+  return v(w, "shadow");
 }
-const d = 0.25, $ = `${d}rem`, S = 16;
-function A(r) {
-  return `${d * r}rem`;
+const f = 0.25, V = `${f}rem`, O = 16;
+function I(r) {
+  return `${f * r}rem`;
 }
-function D(r) {
-  return d * r * S;
+function M(r) {
+  return f * r * O;
 }
-function E() {
-  return `  --spacing: ${$};`;
+function j() {
+  return `  --spacing: ${V};`;
 }
-const T = 16;
-function n(r) {
-  return `${r / T}rem`;
+const C = 16;
+function a(r) {
+  return `${r / C}rem`;
 }
-const w = {
-  xxs: [n(10), { lineHeight: n(12) }],
+const _ = {
+  xxs: [a(10), { lineHeight: a(12) }],
   // 0.625rem (10px), 0.75rem (12px)
-  xs: [n(12), { lineHeight: n(16) }],
+  xs: [a(12), { lineHeight: a(16) }],
   // 0.75rem (12px), 1rem (16px)
-  sm: [n(14), { lineHeight: n(20) }],
+  sm: [a(14), { lineHeight: a(20) }],
   // 0.875rem (14px), 1.25rem (20px)
-  base: [n(16), { lineHeight: n(24) }],
+  base: [a(16), { lineHeight: a(24) }],
   // 1rem (16px), 1.5rem (24px)
-  lg: [n(18), { lineHeight: n(28) }],
+  lg: [a(18), { lineHeight: a(28) }],
   // 1.125rem (18px), 1.75rem (28px)
-  xl: [n(20), { lineHeight: n(28) }],
+  xl: [a(20), { lineHeight: a(28) }],
   // 1.25rem (20px), 1.75rem (28px)
-  "2xl": [n(24), { lineHeight: n(32) }]
+  "2xl": [a(24), { lineHeight: a(32) }]
   // 1.5rem (24px), 2rem (32px)
-}, j = {
+}, F = {
   sans: ["-apple-system", "BlinkMacSystemFont", "Inter", "Segoe UI", "Roboto", "Helvetica Neue", "sans-serif"],
   mono: ["JetBrains Mono", "Fira Code", "monospace"]
 };
-function C() {
-  return Object.entries(w).map(([r, [o, { lineHeight: e }]]) => `  --text-${r}: ${o};
-  --text-${r}--line-height: ${e};`).join(`
+function H() {
+  return Object.entries(_).map(([r, [n, { lineHeight: t }]]) => `  --text-${r}: ${n};
+  --text-${r}--line-height: ${t};`).join(`
 `);
 }
-function O() {
-  return Object.entries(j).map(([r, o]) => `  --font-${r}: ${b(o)};`).join(`
+function A() {
+  return Object.entries(F).map(([r, n]) => `  --font-${r}: ${E(n)};`).join(`
 `);
 }
-const V = {
+const D = {
   hue: 90,
   darkHue: 264,
   tint: 6e-3,
   primaryLight: "oklch(0.65 0.21 37.41)",
   primaryDark: "oklch(0.83 0.16 84.71)"
 };
-function a(r, o, e, s) {
-  const u = e === "light" ? "var(--theme-hue)" : "var(--theme-dark-hue)", i = o === 1 ? "var(--theme-tint)" : o === 0 ? "0" : `calc(var(--theme-tint) * ${o})`;
-  return `oklch(${r} ${i} ${u})`;
+function i(r, n, t, s) {
+  const l = t === "light" ? "var(--theme-hue)" : "var(--theme-dark-hue)", e = n === 1 ? "var(--theme-tint)" : n === 0 ? "0" : `calc(var(--theme-tint) * ${n})`;
+  return `oklch(${r} ${e} ${l})`;
 }
-function t(r, o, e, s) {
-  return s !== void 0 ? `oklch(${r} ${o} ${e} / ${s * 100}%)` : `oklch(${r} ${o} ${e})`;
+function o(r, n, t, s) {
+  return s !== void 0 ? `oklch(${r} ${n} ${t} / ${s * 100}%)` : `oklch(${r} ${n} ${t})`;
 }
-function _() {
+function R() {
   return {
     // ── Surfaces (theme-derived) ──────────────────
-    background: [a(0.97, 1, "light"), a(0.145, 1.5, "dark"), "bg-background"],
-    foreground: [t(0.13, 0.028, 262), t(0.967, 3e-3, 265), "text-foreground"],
-    card: [a(0.995, 0.3, "light"), a(0.2, 1.2, "dark"), "bg-card"],
-    "card-foreground": [t(0.13, 0.028, 262), t(0.967, 3e-3, 265), "text-card-foreground"],
-    popover: [a(0.995, 0.3, "light"), a(0.21, 1.2, "dark"), "bg-popover"],
-    "popover-foreground": [t(0.13, 0.028, 262), t(0.967, 3e-3, 265), "text-popover-foreground"],
-    muted: [a(0.94, 1.5, "light"), a(0.27, 1.5, "dark"), "bg-muted"],
-    "muted-foreground": [t(0.446, 0.03, 257), t(0.709, 0, 0), "text-muted-foreground"],
-    accent: [a(0.87, 0.8, "light"), a(0.35, 1.2, "dark"), "bg-accent"],
-    "accent-foreground": [t(0.13, 0.028, 262), t(0.967, 3e-3, 265), "text-accent-foreground"],
+    background: [i(0.97, 1, "light"), i(0.145, 1.5, "dark"), "bg-background"],
+    foreground: [o(0.13, 0.028, 262), o(0.967, 3e-3, 265), "text-foreground"],
+    card: [i(0.995, 0.3, "light"), i(0.2, 1.2, "dark"), "bg-card"],
+    "card-foreground": [o(0.13, 0.028, 262), o(0.967, 3e-3, 265), "text-card-foreground"],
+    popover: [i(0.995, 0.3, "light"), i(0.21, 1.2, "dark"), "bg-popover"],
+    "popover-foreground": [o(0.13, 0.028, 262), o(0.967, 3e-3, 265), "text-popover-foreground"],
+    muted: [i(0.94, 1.5, "light"), i(0.27, 1.5, "dark"), "bg-muted"],
+    "muted-foreground": [o(0.446, 0.03, 257), o(0.709, 0, 0), "text-muted-foreground"],
+    accent: [i(0.87, 0.8, "light"), i(0.35, 1.2, "dark"), "bg-accent"],
+    "accent-foreground": [o(0.13, 0.028, 262), o(0.967, 3e-3, 265), "text-accent-foreground"],
     // ── Brand (driven by --primary-light / --primary-dark) ─
     primary: ["var(--primary-light)", "var(--primary-dark)", "bg-primary"],
-    "primary-foreground": [t(1, 0, 0), t(0.13, 0.028, 262), "text-primary-foreground"],
-    secondary: [t(0.31, 0, 0), t(0.86, 0, 0), "bg-secondary"],
-    "secondary-foreground": [t(1, 0, 0), t(0.13, 0.028, 262), "text-secondary-foreground"],
+    "primary-foreground": [o(1, 0, 0), o(0.13, 0.028, 262), "text-primary-foreground"],
+    secondary: [o(0.31, 0, 0), o(0.86, 0, 0), "bg-secondary"],
+    "secondary-foreground": [o(1, 0, 0), o(0.13, 0.028, 262), "text-secondary-foreground"],
     // ── Status (independent of theme hue) ─────────
-    destructive: [t(0.92, 0.03, 32.22), t(0.24, 0.03, 2.79), "bg-destructive"],
+    destructive: [o(0.92, 0.03, 32.22), o(0.24, 0.03, 2.79), "bg-destructive"],
     "destructive-foreground": [
-      t(0.59, 0.2, 23.61),
-      t(0.6316, 0.1927, 24.53),
+      o(0.59, 0.2, 23.61),
+      o(0.6316, 0.1927, 24.53),
       "text-destructive-foreground"
     ],
-    success: [t(0.94, 0.06, 154.03), t(0.27, 0.04, 157.6), "bg-success"],
+    success: [o(0.94, 0.06, 154.03), o(0.27, 0.04, 157.6), "bg-success"],
     "success-foreground": [
-      t(0.448, 0.119, 151.328),
-      t(0.925, 0.084, 155.995),
+      o(0.448, 0.119, 151.328),
+      o(0.925, 0.084, 155.995),
       "text-success-foreground"
     ],
-    warning: [t(0.93, 0.04, 74.41), t(0.29, 0.03, 75), "bg-warning"],
-    "warning-foreground": [t(0.476, 0.114, 61.907), t(0.77, 0.14, 99.29), "text-warning-foreground"],
-    info: [t(0.882, 0.059, 254.128), t(0.4242, 0.1982, 265.5, 0.4), "bg-info"],
-    "info-foreground": [t(0.49, 0.02, 254), t(0.882, 0.059, 254.128), "text-info-foreground"],
+    warning: [o(0.93, 0.04, 74.41), o(0.29, 0.03, 75), "bg-warning"],
+    "warning-foreground": [o(0.476, 0.114, 61.907), o(0.77, 0.14, 99.29), "text-warning-foreground"],
+    info: [o(0.882, 0.059, 254.128), o(0.4242, 0.1982, 265.5, 0.4), "bg-info"],
+    "info-foreground": [o(0.49, 0.02, 254), o(0.882, 0.059, 254.128), "text-info-foreground"],
     // ── Borders & rings (theme-derived) ───────────
-    border: [a(0.9, 0.8, "light"), a(0.27, 1.2, "dark"), "border-border"],
-    input: [a(0.81, 0.5, "light"), a(0.3, 1.5, "dark"), "border-input"],
-    ring: [t(0.446, 0.03, 257), t(0.709, 0, 0), "border-ring"],
+    border: [i(0.9, 0.8, "light"), i(0.27, 1.2, "dark"), "border-border"],
+    input: [i(0.81, 0.5, "light"), i(0.3, 1.5, "dark"), "border-input"],
+    ring: [o(0.446, 0.03, 257), o(0.709, 0, 0), "border-ring"],
     // ── Interactive fills for default button/ interactive elements ───────────
     // Darkest fill in light mode, lightest in dark mode
     "fill-expanded": [
@@ -136,12 +136,12 @@ function _() {
     ]
   };
 }
-const l = _();
-function R(r) {
-  const o = r === "light" ? 0 : 1;
-  return Object.fromEntries(Object.entries(l).map(([e, s]) => [e, s[o]]));
+const g = R();
+function N(r) {
+  const n = r === "light" ? 0 : 1;
+  return Object.fromEntries(Object.entries(g).map(([t, s]) => [t, s[n]]));
 }
-const m = /* @__PURE__ */ new Set([
+const x = /* @__PURE__ */ new Set([
   "background",
   "card",
   "popover",
@@ -153,62 +153,104 @@ const m = /* @__PURE__ */ new Set([
   // Transitive: reference var(--accent) / var(--muted) — must also live
   // on `*` to re-evaluate on local overrides.
   "fill-hover",
-  "fill-active",
   "fill-expanded",
   "fill-selected"
 ]);
-function F(r) {
-  const o = [
+function q(r) {
+  const n = [
     "var(--theme-hue)",
     "var(--theme-dark-hue)",
     "var(--theme-tint)",
     "var(--primary-light)",
     "var(--primary-dark)"
   ];
-  for (const [e, [s, u]] of Object.entries(r))
-    if (o.some((c) => s.includes(c) || u.includes(c)) && !m.has(e))
+  for (const [t, [s, l]] of Object.entries(r))
+    if (n.some((c) => s.includes(c) || l.includes(c)) && !x.has(t))
       throw new Error(
-        `[@posthog/quill-tokens] Token "${e}" 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.`
+        `[@posthog/quill-tokens] Token "${t}" 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.`
       );
 }
-F(l);
-function I(r = V) {
-  const o = (i = "  ") => [
-    `${i}--theme-hue: ${r.hue};`,
-    `${i}--theme-dark-hue: ${r.darkHue};`,
-    `${i}--theme-tint: ${r.tint};`,
-    `${i}--primary-light: ${r.primaryLight};`,
-    `${i}--primary-dark: ${r.primaryDark};`
+q(g);
+function b(r) {
+  const t = r === void 0 ? [".dark", '[theme="dark"]'] : typeof r == "string" ? [r] : r;
+  return t.length === 1 ? t[0] : `:is(${t.join(", ")})`;
+}
+function B(r = D, n = {}) {
+  const { scope: t } = n, s = b(n.darkSelector), l = (u = "  ") => [
+    `${u}--radius: 0.625rem;`,
+    `${u}--theme-hue: ${r.hue};`,
+    `${u}--theme-dark-hue: ${r.darkHue};`,
+    `${u}--theme-tint: ${r.tint};`,
+    `${u}--primary-light: ${r.primaryLight};`,
+    `${u}--primary-dark: ${r.primaryDark};`
   ].join(`
-`), e = (i) => {
-    const c = {}, g = {};
-    for (const [h, f] of Object.entries(l))
-      m.has(h) ? g[h] = f[i] : c[h] = f[i];
-    return { staticVars: c, dynamicVars: g };
-  }, s = e(0), u = e(1);
+`), e = (u) => {
+    const d = {}, $ = {};
+    for (const [m, k] of Object.entries(g))
+      x.has(m) ? $[m] = k[u] : d[m] = k[u];
+    return { staticVars: d, dynamicVars: $ };
+  }, c = e(0), p = e(1);
+  if (t) {
+    const u = `:is(${t}, ${t} *)`, d = `:is(${s} ${t}, ${t}${s}, ${s} ${t} *, ${t}${s} *)`;
+    return `/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+/*
+ * Scoped output — all token vars are gated behind \`${t}\` so they
+ * do not clash with the consumer's existing CSS custom properties.
+ * Add the \`${t.replace(/[[\]]/g, "")}\` attribute to wrapper elements
+ * where quill components are rendered.
+ *
+ * Dark mode: works when the dark selector is on an ancestor of the scope
+ * element (.dark > [data-quill]) OR on the scope element itself
+ * ([data-quill].dark).
+ */
+${t} {
+  color-scheme: light;
+}
+:is(${s} ${t}, ${t}${s}) {
+  color-scheme: dark;
+}
+${u} {
+${l()}
+${h(c.staticVars)}
+${h(c.dynamicVars)}
+  /* Override Tailwind --color-* theme tokens within scope so utilities
+   * like bg-accent, text-foreground, border-border resolve to quill's
+   * values instead of the consumer's global theme. */
+${y()}
+}
+${d} {
+${h(p.staticVars)}
+${h(p.dynamicVars)}
+}
+`;
+  }
   return `/* Auto-generated by @posthog/quill-tokens — do not edit manually */
 :root {
   color-scheme: light;
 }
-.dark {
+${s} {
   color-scheme: dark;
 }
 /* Theme knobs — override these to shift the palette */
 :root {
-  --radius: 0.625rem;
-${o()}
+${l()}
 }
 /* Static colors (no theme-var references, safe on :root) */
 :root {
-${p(s.staticVars)}
+${h(c.staticVars)}
 }
-.dark {
-${p(u.staticVars)}
+${s} {
+${h(p.staticVars)}
 }
 /*
@@ -217,28 +259,28 @@ ${p(u.staticVars)}
  * This enables local overrides like [--theme-hue:200] on a container.
  */
 * {
-${p(s.dynamicVars)}
+${h(c.dynamicVars)}
 }
-:is(.dark, .dark *) {
-${p(u.dynamicVars)}
+:is(${s}, ${s} *) {
+${h(p.dynamicVars)}
 }
 `;
 }
-function H() {
-  return Object.keys(l).map((r) => `  --color-${r}: var(--${r});`).join(`
+function y() {
+  return Object.keys(g).map((r) => `  --color-${r}: var(--${r});`).join(`
 `);
 }
-function M(r = {}) {
-  const { includeBaseLayer: o = !1 } = r, e = [
+function X(r = {}) {
+  const { includeBaseLayer: n = !1, scope: t } = r, s = b(r.darkSelector), e = [
     "/* Auto-generated by @posthog/quill-tokens — do not edit manually */",
     "",
-    "@custom-variant dark (&:is(.dark, .dark *));"
+    `@custom-variant dark (${`&:is(${s}, ${s} *)`});`
   ];
-  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(H()), e.push(""), e.push("  /* --- Spacing --- */"), e.push(E()), e.push(""), e.push("  /* --- Font sizes --- */"), e.push(C()), e.push(""), e.push("  /* --- Font families --- */"), e.push(O()), e.push(""), e.push("  /* --- Shadows --- */"), e.push(y()), 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("}"), o && (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(`
+  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(j()), e.push(""), e.push("  /* --- Font sizes --- */"), e.push(H()), e.push(""), e.push("  /* --- Font families --- */"), e.push(A()), e.push(""), e.push("  /* --- Shadows --- */"), e.push(T()), 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 {"), t ? (e.push(`  ${t}, ${t} * {`), 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 N = {
+const z = {
   none: "0px",
   sm: "4px",
   md: "6px",
@@ -247,22 +289,22 @@ const N = {
   full: "9999px"
 };
 export {
-  V as DEFAULT_THEME,
-  $ as SPACING_BASE,
-  d as SPACING_BASE_REM,
-  N as borderRadius,
-  _ as buildSemanticColors,
-  x as cssVars,
-  p as cssVarsFlat,
-  j as fontFamily,
-  b as fontFamilyValue,
-  w as fontSize,
-  I as generateColorSystemCSS,
-  M as generateStylesCSS,
-  k as quoteFontName,
-  R as resolveTheme,
-  l as semanticColors,
-  v as shadow,
-  A as spacing,
-  D as spacingPx
+  D as DEFAULT_THEME,
+  V as SPACING_BASE,
+  f as SPACING_BASE_REM,
+  z as borderRadius,
+  R as buildSemanticColors,
+  v as cssVars,
+  h as cssVarsFlat,
+  F as fontFamily,
+  E as fontFamilyValue,
+  _ as fontSize,
+  B as generateColorSystemCSS,
+  X as generateStylesCSS,
+  S as quoteFontName,
+  N as resolveTheme,
+  g as semanticColors,
+  w as shadow,
+  I as spacing,
+  M as spacingPx
 };

package/dist/tailwind-lib.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /* Auto-generated by @posthog/quill-tokens — do not edit manually */
-@custom-variant dark (&:is(.dark, .dark *));
+@custom-variant dark (&:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) *));
 @theme inline {
   --animate-skeleton: skeleton 2s -1s infinite linear;

package/dist/tailwind-lib.scoped.css ADDED Viewed

@@ -0,0 +1,101 @@
+/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+@custom-variant dark (&:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="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-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-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-expanded: var(--fill-expanded);
+  --color-fill-selected: var(--fill-selected);
+  --color-fill-hover: var(--fill-hover);
+  /* --- Spacing --- */
+  --spacing: 0.25rem;
+  /* --- 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 /* Auto-generated by @posthog/quill-tokens — do not edit manually */
-@custom-variant dark (&:is(.dark, .dark *));
+@custom-variant dark (&:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) *));
 @theme inline {
   --animate-skeleton: skeleton 2s -1s infinite linear;

package/dist/tailwind.scoped.css ADDED Viewed

@@ -0,0 +1,107 @@
+/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+@custom-variant dark (&:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="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-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-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-expanded: var(--fill-expanded);
+  --color-fill-selected: var(--fill-selected);
+  --color-fill-hover: var(--fill-hover);
+  /* --- Spacing --- */
+  --spacing: 0.25rem;
+  /* --- 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 {
+  [data-quill], [data-quill] * {
+    @apply border-border outline-ring/50;
+  }
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@posthog/quill-tokens",
-    "version": "0.1.0-alpha.7",
+    "version": "0.1.2-alpha.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -24,7 +24,10 @@
         },
         "./tailwind.css": "./dist/tailwind.css",
         "./tailwind-lib.css": "./dist/tailwind-lib.css",
-        "./color-system.css": "./dist/color-system.css"
+        "./color-system.css": "./dist/color-system.css",
+        "./tailwind.scoped.css": "./dist/tailwind.scoped.css",
+        "./tailwind-lib.scoped.css": "./dist/tailwind-lib.scoped.css",
+        "./color-system.scoped.css": "./dist/color-system.scoped.css"
     },
     "publishConfig": {
         "access": "public"

package/src/build.ts CHANGED Viewed

@@ -30,3 +30,20 @@ writeFileSync(resolve(distDir, 'tailwind.css'), generateStylesCSS({ includeBaseL
 // 3. Library stylesheet (@theme only, no base layer)
 writeFileSync(resolve(distDir, 'tailwind-lib.css'), generateStylesCSS({ includeBaseLayer: false }))
+// 4. Scoped variants for consumers with existing design systems.
+//    Vars are gated behind [data-quill] so they don't clash with
+//    the consumer's CSS custom properties (e.g. --border, --accent).
+const scopedOpts = { scope: '[data-quill]' }
+writeFileSync(resolve(distDir, 'color-system.scoped.css'), generateColorSystemCSS(undefined, scopedOpts))
+writeFileSync(
+    resolve(distDir, 'tailwind.scoped.css'),
+    generateStylesCSS({ includeBaseLayer: true, ...scopedOpts })
+)
+writeFileSync(
+    resolve(distDir, 'tailwind-lib.scoped.css'),
+    generateStylesCSS({ includeBaseLayer: false, ...scopedOpts })
+)

package/src/colors.ts CHANGED Viewed

@@ -164,6 +164,26 @@ export const semanticColors = buildSemanticColors()
 export interface StylesConfig {
     /** Include @layer base reset rules (apps only) */
     includeBaseLayer?: boolean
+    /**
+     * CSS selector to scope all token CSS vars to. When set, vars are only
+     * defined inside elements matching this selector, preventing clashes
+     * with the consumer's existing CSS custom properties.
+     *
+     * Example: `'[data-quill]'` — consumer adds `data-quill` to wrapper
+     * elements. During migration the attribute moves up the DOM tree;
+     * when it reaches `<html>` the scope is effectively global and can
+     * be removed.
+     */
+    scope?: string
+    /**
+     * CSS selector(s) for dark mode. Accepts a single selector or an
+     * 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).
+     */
+    darkSelector?: string | string[]
 }
 // ── Helpers ───────────────────────────────────────────
@@ -196,7 +216,6 @@ const THEME_DERIVED_TOKENS: ReadonlySet<string> = new Set([
     // Transitive: reference var(--accent) / var(--muted) — must also live
     // on `*` to re-evaluate on local overrides.
     'fill-hover',
-    'fill-active',
     'fill-expanded',
     'fill-selected',
 ])
@@ -233,10 +252,24 @@ function assertThemeDerivedSyncedWithColors(colors: Record<string, ColorTuple>):
 assertThemeDerivedSyncedWithColors(semanticColors)
+/** Normalize darkSelector option into a single CSS selector string. */
+function resolveDarkSelector(raw?: string | string[]): string {
+    const defaults = ['.dark', '[theme="dark"]']
+    const selectors = raw === undefined ? defaults : typeof raw === 'string' ? [raw] : raw
+    return selectors.length === 1 ? selectors[0] : `:is(${selectors.join(', ')})`
+}
 /** Generate color-system.css (:root light + .dark overrides) */
-export function generateColorSystemCSS(theme: ThemeConfig = DEFAULT_THEME): string {
-    const themeVars = (indent = '  '): string =>
+export function generateColorSystemCSS(
+    theme: ThemeConfig = DEFAULT_THEME,
+    opts: Pick<StylesConfig, 'scope' | 'darkSelector'> = {}
+): string {
+    const { scope } = opts
+    const darkSelector = resolveDarkSelector(opts.darkSelector)
+    const themeKnobs = (indent = '  '): string =>
         [
+            `${indent}--radius: 0.625rem;`,
             `${indent}--theme-hue: ${theme.hue};`,
             `${indent}--theme-dark-hue: ${theme.darkHue};`,
             `${indent}--theme-tint: ${theme.tint};`,
@@ -261,20 +294,68 @@ export function generateColorSystemCSS(theme: ThemeConfig = DEFAULT_THEME): stri
     const light = partition(0)
     const dark = partition(1)
+    // ── Scoped mode ─────────────────────────────────────
+    // All vars gated behind the scope selector to avoid clashing
+    // with the consumer's existing CSS custom properties.
+    if (scope) {
+        const scopeSel = `:is(${scope}, ${scope} *)`
+        // Handle both ancestor-dark (`.dark [data-quill]`) and same-element
+        // dark (`[data-quill].dark`) so dark mode works regardless of where
+        // the dark selector lives relative to the scope element.
+        const darkScopeSel = `:is(${darkSelector} ${scope}, ${scope}${darkSelector}, ${darkSelector} ${scope} *, ${scope}${darkSelector} *)`
+        return `/* Auto-generated by @posthog/quill-tokens — do not edit manually */
+/*
+ * Scoped output — all token vars are gated behind \`${scope}\` so they
+ * do not clash with the consumer's existing CSS custom properties.
+ * Add the \`${scope.replace(/[[\]]/g, '')}\` attribute to wrapper elements
+ * where quill components are rendered.
+ *
+ * Dark mode: works when the dark selector is on an ancestor of the scope
+ * element (.dark > [data-quill]) OR on the scope element itself
+ * ([data-quill].dark).
+ */
+${scope} {
+  color-scheme: light;
+}
+:is(${darkSelector} ${scope}, ${scope}${darkSelector}) {
+  color-scheme: dark;
+}
+${scopeSel} {
+${themeKnobs()}
+${cssVarsFlat(light.staticVars)}
+${cssVarsFlat(light.dynamicVars)}
+  /* Override Tailwind --color-* theme tokens within scope so utilities
+   * like bg-accent, text-foreground, border-border resolve to quill's
+   * values instead of the consumer's global theme. */
+${generateColorMappingsCSS()}
+}
+${darkScopeSel} {
+${cssVarsFlat(dark.staticVars)}
+${cssVarsFlat(dark.dynamicVars)}
+}
+`
+    }
+    // ── Unscoped mode (default) ─────────────────────────
     return `/* Auto-generated by @posthog/quill-tokens — do not edit manually */
 :root {
   color-scheme: light;
 }
-.dark {
+${darkSelector} {
   color-scheme: dark;
 }
 /* Theme knobs — override these to shift the palette */
 :root {
-  --radius: 0.625rem;
-${themeVars()}
+${themeKnobs()}
 }
 /* Static colors (no theme-var references, safe on :root) */
@@ -282,7 +363,7 @@ ${themeVars()}
 ${cssVarsFlat(light.staticVars)}
 }
-.dark {
+${darkSelector} {
 ${cssVarsFlat(dark.staticVars)}
 }
@@ -295,7 +376,7 @@ ${cssVarsFlat(dark.staticVars)}
 ${cssVarsFlat(light.dynamicVars)}
 }
-:is(.dark, .dark *) {
+:is(${darkSelector}, ${darkSelector} *) {
 ${cssVarsFlat(dark.dynamicVars)}
 }
 `
@@ -323,12 +404,14 @@ function generateColorMappingsCSS(): string {
  *    Used by apps/web, apps/storybook.
  */
 export function generateStylesCSS(config: StylesConfig = {}): string {
-    const { includeBaseLayer = false } = config
+    const { includeBaseLayer = false, scope } = config
+    const darkSelector = resolveDarkSelector(config.darkSelector)
+    const darkVariantBody = `&:is(${darkSelector}, ${darkSelector} *)`
     const lines: string[] = [
         '/* Auto-generated by @posthog/quill-tokens — do not edit manually */',
         '',
-        '@custom-variant dark (&:is(.dark, .dark *));',
+        `@custom-variant dark (${darkVariantBody});`,
     ]
     lines.push('')
@@ -391,12 +474,18 @@ export function generateStylesCSS(config: StylesConfig = {}): string {
     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('  }')
+        if (scope) {
+            lines.push(`  ${scope}, ${scope} * {`)
+            lines.push('    @apply border-border outline-ring/50;')
+            lines.push('  }')
+        } else {
+            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('}')
     }