@posthog/quill-tokens 0.1.0-alpha.4 → 0.1.0-alpha.7

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 (8) hide show
  1. package/dist/color-system.css +6 -6
  2. package/dist/colors.d.ts.map +1 -1
  3. package/dist/index.cjs +6 -6
  4. package/dist/index.js +23 -16
  5. package/dist/tailwind-lib.css +1 -1
  6. package/dist/tailwind.css +1 -1
  7. package/package.json +1 -1
  8. package/src/colors.ts +13 -6
package/dist/color-system.css CHANGED
@@ -73,9 +73,9 @@
73
73
  --primary: var(--primary-light);
74
74
  --border: oklch(0.9 calc(var(--theme-tint) * 0.8) var(--theme-hue));
75
75
  --input: oklch(0.81 calc(var(--theme-tint) * 0.5) var(--theme-hue));
76
- --fill-hover: oklch(0.87 0 0 / 40%);
77
- --fill-expanded: var(--muted);
78
- --fill-selected: oklch(0.87 0 0 / 20%);
76
+ --fill-expanded: oklch(0.87 0 0 / 60%);
77
+ --fill-selected: oklch(0.87 0 0 / 40%);
78
+ --fill-hover: oklch(0.87 0 0 / 20%);
79
79
  }
80
80
 
81
81
  :is(.dark, .dark *) {
@@ -87,7 +87,7 @@
87
87
  --primary: var(--primary-dark);
88
88
  --border: oklch(0.27 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
89
89
  --input: oklch(0.3 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
90
- --fill-hover: oklch(0.55 0 0 / 25%);
91
- --fill-expanded: var(--muted);
92
- --fill-selected: oklch(0.55 0 0 / 15%);
90
+ --fill-expanded: oklch(0.55 0 0 / 35%);
91
+ --fill-selected: oklch(0.55 0 0 / 25%);
92
+ --fill-hover: oklch(0.55 0 0 / 15%);
93
93
  }
package/dist/colors.d.ts.map CHANGED
@@ -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,CAgEhE;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;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"}
package/dist/index.cjs CHANGED
@@ -1,10 +1,10 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function f(r,o,e=" "){return Object.entries(r).map(([s,u])=>`${e}--${o}-${s}: ${u};`).join(`
1
+ "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(`
2
2
  `)}function c(r,o=" "){return Object.entries(r).map(([e,s])=>`${o}--${e}: ${s};`).join(`
3
- `)}function x(r){return/\s/.test(r)?`"${r}"`:r}function b(r){return r.map(x).join(", ")}const k={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 f(k,"shadow")}const h=.25,v=`${h}rem`,w=16;function F(r){return`${h*r}rem`}function _(r){return h*r*w}function V(){return` --spacing: ${v};`}const j=16;function a(r){return`${r/j}rem`}const y={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)}]},S={sans:["-apple-system","BlinkMacSystemFont","Inter","Segoe UI","Roboto","Helvetica Neue","sans-serif"],mono:["JetBrains Mono","Fira Code","monospace"]};function O(){return Object.entries(y).map(([r,[o,{lineHeight:e}]])=>` --text-${r}: ${o};
3
+ `)}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};
4
4
  --text-${r}--line-height: ${e};`).join(`
5
- `)}function A(){return Object.entries(S).map(([r,o])=>` --font-${r}: ${b(o)};`).join(`
6
- `)}const $={hue:90,darkHue:264,tint:.006,primaryLight:"oklch(0.65 0.21 37.41)",primaryDark:"oklch(0.83 0.16 84.71)"};function n(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:[n(.97,1,"light"),n(.145,1.5,"dark"),"bg-background"],foreground:[t(.13,.028,262),t(.967,.003,265),"text-foreground"],card:[n(.995,.3,"light"),n(.2,1.2,"dark"),"bg-card"],"card-foreground":[t(.13,.028,262),t(.967,.003,265),"text-card-foreground"],popover:[n(.995,.3,"light"),n(.21,1.2,"dark"),"bg-popover"],"popover-foreground":[t(.13,.028,262),t(.967,.003,265),"text-popover-foreground"],muted:[n(.94,1.5,"light"),n(.27,1.5,"dark"),"bg-muted"],"muted-foreground":[t(.446,.03,257),t(.709,0,0),"text-muted-foreground"],accent:[n(.87,.8,"light"),n(.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:[n(.9,.8,"light"),n(.27,1.2,"dark"),"border-border"],input:[n(.81,.5,"light"),n(.3,1.5,"dark"),"border-input"],ring:[t(.446,.03,257),t(.709,0,0),"border-ring"],"fill-hover":["oklch(0.87 0 0 / 40%)","oklch(0.55 0 0 / 25%)","bg-fill-hover"],"fill-expanded":["var(--muted)","var(--muted)","bg-fill-expanded"],"fill-selected":["oklch(0.87 0 0 / 20%)","oklch(0.55 0 0 / 15%)","bg-fill-selected"]}}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(`
7
- `),e=i=>{const l={},g={};for(const[d,m]of Object.entries(p))T.has(d)?g[d]=m[i]:l[d]=m[i];return{staticVars:l,dynamicVars:g}},s=e(0),u=e(1);return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
5
+ `)}function A(){return Object.entries(S).map(([r,o])=>` --font-${r}: ${k(o)};`).join(`
6
+ `)}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(`
7
+ `),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 */
8
8
 
9
9
  :root {
10
10
  color-scheme: light;
@@ -43,4 +43,4 @@ ${c(u.dynamicVars)}
43
43
  }
44
44
  `}function I(){return Object.keys(p).map(r=>` --color-${r}: var(--${r});`).join(`
45
45
  `)}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(`
46
- `)}const N={none:"0px",sm:"4px",md:"6px",lg:"8px",xl:"12px",full:"9999px"};exports.DEFAULT_THEME=$;exports.SPACING_BASE=v;exports.SPACING_BASE_REM=h;exports.borderRadius=N;exports.buildSemanticColors=E;exports.cssVars=f;exports.cssVarsFlat=c;exports.fontFamily=S;exports.fontFamilyValue=b;exports.fontSize=y;exports.generateColorSystemCSS=D;exports.generateStylesCSS=M;exports.quoteFontName=x;exports.resolveTheme=H;exports.semanticColors=p;exports.shadow=k;exports.spacing=F;exports.spacingPx=_;
46
+ `)}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=_;
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ function x(r, o, e = " ") {
2
2
  return Object.entries(r).map(([s, u]) => `${e}--${o}-${s}: ${u};`).join(`
3
3
  `);
4
4
  }
5
- function c(r, o = " ") {
5
+ function p(r, o = " ") {
6
6
  return Object.entries(r).map(([e, s]) => `${o}--${e}: ${s};`).join(`
7
7
  `);
8
8
  }
@@ -115,17 +115,24 @@ function _() {
115
115
  border: [a(0.9, 0.8, "light"), a(0.27, 1.2, "dark"), "border-border"],
116
116
  input: [a(0.81, 0.5, "light"), a(0.3, 1.5, "dark"), "border-input"],
117
117
  ring: [t(0.446, 0.03, 257), t(0.709, 0, 0), "border-ring"],
118
- // ── Interactive fills (reference other tokens) ─
119
- "fill-hover": [
118
+ // ── Interactive fills for default button/ interactive elements ───────────
119
+ // Darkest fill in light mode, lightest in dark mode
120
+ "fill-expanded": [
121
+ "oklch(0.87 0 0 / 60%)",
122
+ "oklch(0.55 0 0 / 35%)",
123
+ "bg-fill-expanded"
124
+ ],
125
+ // Medium fill
126
+ "fill-selected": [
120
127
  "oklch(0.87 0 0 / 40%)",
121
128
  "oklch(0.55 0 0 / 25%)",
122
- "bg-fill-hover"
129
+ "bg-fill-selected"
123
130
  ],
124
- "fill-expanded": ["var(--muted)", "var(--muted)", "bg-fill-expanded"],
125
- "fill-selected": [
131
+ // Lightest fill in light mode, darkest in dark mode
132
+ "fill-hover": [
126
133
  "oklch(0.87 0 0 / 20%)",
127
134
  "oklch(0.55 0 0 / 15%)",
128
- "bg-fill-selected"
135
+ "bg-fill-hover"
129
136
  ]
130
137
  };
131
138
  }
@@ -159,7 +166,7 @@ function F(r) {
159
166
  "var(--primary-dark)"
160
167
  ];
161
168
  for (const [e, [s, u]] of Object.entries(r))
162
- if (o.some((p) => s.includes(p) || u.includes(p)) && !m.has(e))
169
+ if (o.some((c) => s.includes(c) || u.includes(c)) && !m.has(e))
163
170
  throw new Error(
164
171
  `[@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.`
165
172
  );
@@ -174,10 +181,10 @@ function I(r = V) {
174
181
  `${i}--primary-dark: ${r.primaryDark};`
175
182
  ].join(`
176
183
  `), e = (i) => {
177
- const p = {}, g = {};
184
+ const c = {}, g = {};
178
185
  for (const [h, f] of Object.entries(l))
179
- m.has(h) ? g[h] = f[i] : p[h] = f[i];
180
- return { staticVars: p, dynamicVars: g };
186
+ m.has(h) ? g[h] = f[i] : c[h] = f[i];
187
+ return { staticVars: c, dynamicVars: g };
181
188
  }, s = e(0), u = e(1);
182
189
  return `/* Auto-generated by @posthog/quill-tokens — do not edit manually */
183
190
 
@@ -197,11 +204,11 @@ ${o()}
197
204
 
198
205
  /* Static colors (no theme-var references, safe on :root) */
199
206
  :root {
200
- ${c(s.staticVars)}
207
+ ${p(s.staticVars)}
201
208
  }
202
209
 
203
210
  .dark {
204
- ${c(u.staticVars)}
211
+ ${p(u.staticVars)}
205
212
  }
206
213
 
207
214
  /*
@@ -210,11 +217,11 @@ ${c(u.staticVars)}
210
217
  * This enables local overrides like [--theme-hue:200] on a container.
211
218
  */
212
219
  * {
213
- ${c(s.dynamicVars)}
220
+ ${p(s.dynamicVars)}
214
221
  }
215
222
 
216
223
  :is(.dark, .dark *) {
217
- ${c(u.dynamicVars)}
224
+ ${p(u.dynamicVars)}
218
225
  }
219
226
  `;
220
227
  }
@@ -246,7 +253,7 @@ export {
246
253
  N as borderRadius,
247
254
  _ as buildSemanticColors,
248
255
  x as cssVars,
249
- c as cssVarsFlat,
256
+ p as cssVarsFlat,
250
257
  j as fontFamily,
251
258
  b as fontFamilyValue,
252
259
  w as fontSize,
package/dist/tailwind-lib.css CHANGED
@@ -34,9 +34,9 @@
34
34
  --color-border: var(--border);
35
35
  --color-input: var(--input);
36
36
  --color-ring: var(--ring);
37
- --color-fill-hover: var(--fill-hover);
38
37
  --color-fill-expanded: var(--fill-expanded);
39
38
  --color-fill-selected: var(--fill-selected);
39
+ --color-fill-hover: var(--fill-hover);
40
40
 
41
41
  /* --- Spacing --- */
42
42
  --spacing: 0.25rem;
package/dist/tailwind.css CHANGED
@@ -34,9 +34,9 @@
34
34
  --color-border: var(--border);
35
35
  --color-input: var(--input);
36
36
  --color-ring: var(--ring);
37
- --color-fill-hover: var(--fill-hover);
38
37
  --color-fill-expanded: var(--fill-expanded);
39
38
  --color-fill-selected: var(--fill-selected);
39
+ --color-fill-hover: var(--fill-hover);
40
40
 
41
41
  /* --- Spacing --- */
42
42
  --spacing: 0.25rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@posthog/quill-tokens",
3
- "version": "0.1.0-alpha.4",
3
+ "version": "0.1.0-alpha.7",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
package/src/colors.ts CHANGED
@@ -135,17 +135,24 @@ export function buildSemanticColors(): Record<string, ColorTuple> {
135
135
  input: [surface(0.81, 0.5, 'light'), surface(0.30, 1.5, 'dark'), 'border-input'],
136
136
  ring: [oklch(0.446, 0.03, 257), oklch(0.709, 0, 0), 'border-ring'],
137
137
 
138
- // ── Interactive fills (reference other tokens) ─
139
- 'fill-hover': [
138
+ // ── Interactive fills for default button/ interactive elements ───────────
139
+ // Darkest fill in light mode, lightest in dark mode
140
+ 'fill-expanded': [
141
+ 'oklch(0.87 0 0 / 60%)',
142
+ 'oklch(0.55 0 0 / 35%)',
143
+ 'bg-fill-expanded',
144
+ ],
145
+ // Medium fill
146
+ 'fill-selected': [
140
147
  'oklch(0.87 0 0 / 40%)',
141
148
  'oklch(0.55 0 0 / 25%)',
142
- 'bg-fill-hover',
149
+ 'bg-fill-selected',
143
150
  ],
144
- 'fill-expanded': ['var(--muted)', 'var(--muted)', 'bg-fill-expanded'],
145
- 'fill-selected': [
151
+ // Lightest fill in light mode, darkest in dark mode
152
+ 'fill-hover': [
146
153
  'oklch(0.87 0 0 / 20%)',
147
154
  'oklch(0.55 0 0 / 15%)',
148
- 'bg-fill-selected',
155
+ 'bg-fill-hover',
149
156
  ],
150
157
  } as const
151
158
  }