@posthog/quill-tokens 0.1.0-alpha.2 → 0.1.0-alpha.4
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.
- package/dist/color-system.css +13 -14
- package/dist/colors.d.ts +13 -6
- package/dist/colors.d.ts.map +1 -1
- package/dist/index.cjs +14 -14
- package/dist/index.js +73 -75
- package/dist/tailwind-lib.css +0 -1
- package/dist/tailwind.css +0 -1
- package/package.json +1 -1
- package/src/colors.ts +34 -28
package/dist/color-system.css
CHANGED
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
--theme-hue: 90;
|
|
15
15
|
--theme-dark-hue: 264;
|
|
16
16
|
--theme-tint: 0.006;
|
|
17
|
-
--primary-
|
|
17
|
+
--primary-light: oklch(0.65 0.21 37.41);
|
|
18
|
+
--primary-dark: oklch(0.83 0.16 84.71);
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
/* Static colors (no theme-var references, safe on :root) */
|
|
@@ -60,7 +61,7 @@
|
|
|
60
61
|
|
|
61
62
|
/*
|
|
62
63
|
* Theme-derived colors — set on * so each element resolves
|
|
63
|
-
* var(--theme-hue) / var(--primary-
|
|
64
|
+
* var(--theme-hue) / var(--primary-light) from its own scope.
|
|
64
65
|
* This enables local overrides like [--theme-hue:200] on a container.
|
|
65
66
|
*/
|
|
66
67
|
* {
|
|
@@ -68,27 +69,25 @@
|
|
|
68
69
|
--card: oklch(0.995 calc(var(--theme-tint) * 0.3) var(--theme-hue));
|
|
69
70
|
--popover: oklch(0.995 calc(var(--theme-tint) * 0.3) var(--theme-hue));
|
|
70
71
|
--muted: oklch(0.94 calc(var(--theme-tint) * 1.5) var(--theme-hue));
|
|
71
|
-
--accent: oklch(0.
|
|
72
|
-
--primary:
|
|
72
|
+
--accent: oklch(0.87 calc(var(--theme-tint) * 0.8) var(--theme-hue));
|
|
73
|
+
--primary: var(--primary-light);
|
|
73
74
|
--border: oklch(0.9 calc(var(--theme-tint) * 0.8) var(--theme-hue));
|
|
74
75
|
--input: oklch(0.81 calc(var(--theme-tint) * 0.5) var(--theme-hue));
|
|
75
|
-
--fill-hover:
|
|
76
|
-
--fill-active: var(--accent);
|
|
76
|
+
--fill-hover: oklch(0.87 0 0 / 40%);
|
|
77
77
|
--fill-expanded: var(--muted);
|
|
78
|
-
--fill-selected:
|
|
78
|
+
--fill-selected: oklch(0.87 0 0 / 20%);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
:is(.dark, .dark *) {
|
|
82
82
|
--background: oklch(0.145 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
|
|
83
|
-
--card: oklch(0.
|
|
83
|
+
--card: oklch(0.2 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
|
|
84
84
|
--popover: oklch(0.21 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
|
|
85
|
-
--muted: oklch(0.
|
|
86
|
-
--accent: oklch(0.
|
|
87
|
-
--primary:
|
|
85
|
+
--muted: oklch(0.27 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
|
|
86
|
+
--accent: oklch(0.35 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
|
|
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:
|
|
91
|
-
--fill-active: var(--accent);
|
|
90
|
+
--fill-hover: oklch(0.55 0 0 / 25%);
|
|
92
91
|
--fill-expanded: var(--muted);
|
|
93
|
-
--fill-selected:
|
|
92
|
+
--fill-selected: oklch(0.55 0 0 / 15%);
|
|
94
93
|
}
|
package/dist/colors.d.ts
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
* PostHog Design System — Color Tokens (hue-based theming)
|
|
3
3
|
*
|
|
4
4
|
* Surface/neutral colors are derived from a shared theme hue + tint.
|
|
5
|
-
* Consumers can override `--theme-hue`, `--primary-
|
|
6
|
-
* `--theme-dark-hue`, `--theme-tint`)
|
|
7
|
-
* at runtime — no rebuild required.
|
|
5
|
+
* Consumers can override `--theme-hue`, `--primary-light`,
|
|
6
|
+
* `--primary-dark` (and optionally `--theme-dark-hue`, `--theme-tint`)
|
|
7
|
+
* on `:root` to shift the palette at runtime — no rebuild required.
|
|
8
8
|
*
|
|
9
9
|
* Status colors (destructive, success, warning, info) are independent
|
|
10
10
|
* of the theme hue.
|
|
@@ -16,10 +16,17 @@ export interface ThemeConfig {
|
|
|
16
16
|
darkHue: number;
|
|
17
17
|
/** Base OKLCH chroma for neutral surface tinting (0 = pure grey) */
|
|
18
18
|
tint: number;
|
|
19
|
-
/**
|
|
20
|
-
|
|
19
|
+
/**
|
|
20
|
+
* Full brand color for light mode — any valid CSS color expression.
|
|
21
|
+
* Consumers typically pass `oklch(L C H)` so L, C, and H are all
|
|
22
|
+
* tunable per mode (not just hue). Override at runtime by setting
|
|
23
|
+
* `--primary-light` on `:root` or any subtree.
|
|
24
|
+
*/
|
|
25
|
+
primaryLight: string;
|
|
26
|
+
/** Full brand color for dark mode. See `primaryLight`. */
|
|
27
|
+
primaryDark: string;
|
|
21
28
|
}
|
|
22
|
-
/** PostHog
|
|
29
|
+
/** PostHog default — warm yellowish-grey surfaces + orange/amber brand */
|
|
23
30
|
export declare const DEFAULT_THEME: ThemeConfig;
|
|
24
31
|
export type SemanticColorKey = string;
|
|
25
32
|
export type ColorTuple = readonly [light: string, dark: string, tailwindClass: string];
|
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,
|
|
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"}
|
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,
|
|
2
|
-
`)}function
|
|
3
|
-
`)}function x(r){return/\s/.test(r)?`"${r}"`:r}function
|
|
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(`
|
|
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};
|
|
4
4
|
--text-${r}--line-height: ${e};`).join(`
|
|
5
|
-
`)}function
|
|
6
|
-
`)}const $={hue:90,darkHue:264,tint:.006,
|
|
7
|
-
`),e=
|
|
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 */
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
10
|
color-scheme: light;
|
|
@@ -22,25 +22,25 @@ ${o()}
|
|
|
22
22
|
|
|
23
23
|
/* Static colors (no theme-var references, safe on :root) */
|
|
24
24
|
:root {
|
|
25
|
-
${
|
|
25
|
+
${c(s.staticVars)}
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.dark {
|
|
29
|
-
${
|
|
29
|
+
${c(u.staticVars)}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
/*
|
|
33
33
|
* Theme-derived colors — set on * so each element resolves
|
|
34
|
-
* var(--theme-hue) / var(--primary-
|
|
34
|
+
* var(--theme-hue) / var(--primary-light) from its own scope.
|
|
35
35
|
* This enables local overrides like [--theme-hue:200] on a container.
|
|
36
36
|
*/
|
|
37
37
|
* {
|
|
38
|
-
${
|
|
38
|
+
${c(s.dynamicVars)}
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
:is(.dark, .dark *) {
|
|
42
|
-
${
|
|
42
|
+
${c(u.dynamicVars)}
|
|
43
43
|
}
|
|
44
|
-
`}function
|
|
45
|
-
`)}function
|
|
46
|
-
`)}const
|
|
44
|
+
`}function I(){return Object.keys(p).map(r=>` --color-${r}: var(--${r});`).join(`
|
|
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=_;
|
package/dist/index.js
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
1
|
function x(r, o, e = " ") {
|
|
2
|
-
return Object.entries(r).map(([
|
|
2
|
+
return Object.entries(r).map(([s, u]) => `${e}--${o}-${s}: ${u};`).join(`
|
|
3
3
|
`);
|
|
4
4
|
}
|
|
5
|
-
function
|
|
6
|
-
return Object.entries(r).map(([e,
|
|
5
|
+
function c(r, o = " ") {
|
|
6
|
+
return Object.entries(r).map(([e, s]) => `${o}--${e}: ${s};`).join(`
|
|
7
7
|
`);
|
|
8
8
|
}
|
|
9
|
-
function
|
|
9
|
+
function k(r) {
|
|
10
10
|
return /\s/.test(r) ? `"${r}"` : r;
|
|
11
11
|
}
|
|
12
12
|
function b(r) {
|
|
13
|
-
return r.map(
|
|
13
|
+
return r.map(k).join(", ");
|
|
14
14
|
}
|
|
15
|
-
const
|
|
15
|
+
const v = {
|
|
16
16
|
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
|
|
17
17
|
md: "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",
|
|
18
18
|
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)"
|
|
19
19
|
};
|
|
20
20
|
function y() {
|
|
21
|
-
return x(
|
|
21
|
+
return x(v, "shadow");
|
|
22
22
|
}
|
|
23
23
|
const d = 0.25, $ = `${d}rem`, S = 16;
|
|
24
24
|
function A(r) {
|
|
25
25
|
return `${d * r}rem`;
|
|
26
26
|
}
|
|
27
|
-
function
|
|
27
|
+
function D(r) {
|
|
28
28
|
return d * r * S;
|
|
29
29
|
}
|
|
30
30
|
function E() {
|
|
31
31
|
return ` --spacing: ${$};`;
|
|
32
32
|
}
|
|
33
33
|
const T = 16;
|
|
34
|
-
function
|
|
34
|
+
function n(r) {
|
|
35
35
|
return `${r / T}rem`;
|
|
36
36
|
}
|
|
37
37
|
const w = {
|
|
38
|
-
xxs: [
|
|
38
|
+
xxs: [n(10), { lineHeight: n(12) }],
|
|
39
39
|
// 0.625rem (10px), 0.75rem (12px)
|
|
40
|
-
xs: [
|
|
40
|
+
xs: [n(12), { lineHeight: n(16) }],
|
|
41
41
|
// 0.75rem (12px), 1rem (16px)
|
|
42
|
-
sm: [
|
|
42
|
+
sm: [n(14), { lineHeight: n(20) }],
|
|
43
43
|
// 0.875rem (14px), 1.25rem (20px)
|
|
44
|
-
base: [
|
|
44
|
+
base: [n(16), { lineHeight: n(24) }],
|
|
45
45
|
// 1rem (16px), 1.5rem (24px)
|
|
46
|
-
lg: [
|
|
46
|
+
lg: [n(18), { lineHeight: n(28) }],
|
|
47
47
|
// 1.125rem (18px), 1.75rem (28px)
|
|
48
|
-
xl: [
|
|
48
|
+
xl: [n(20), { lineHeight: n(28) }],
|
|
49
49
|
// 1.25rem (20px), 1.75rem (28px)
|
|
50
|
-
"2xl": [
|
|
50
|
+
"2xl": [n(24), { lineHeight: n(32) }]
|
|
51
51
|
// 1.5rem (24px), 2rem (32px)
|
|
52
52
|
}, j = {
|
|
53
53
|
sans: ["-apple-system", "BlinkMacSystemFont", "Inter", "Segoe UI", "Roboto", "Helvetica Neue", "sans-serif"],
|
|
@@ -62,38 +62,35 @@ function O() {
|
|
|
62
62
|
return Object.entries(j).map(([r, o]) => ` --font-${r}: ${b(o)};`).join(`
|
|
63
63
|
`);
|
|
64
64
|
}
|
|
65
|
-
const
|
|
65
|
+
const V = {
|
|
66
66
|
hue: 90,
|
|
67
67
|
darkHue: 264,
|
|
68
68
|
tint: 6e-3,
|
|
69
|
-
|
|
69
|
+
primaryLight: "oklch(0.65 0.21 37.41)",
|
|
70
|
+
primaryDark: "oklch(0.83 0.16 84.71)"
|
|
70
71
|
};
|
|
71
|
-
function a(r, o, e) {
|
|
72
|
-
const
|
|
73
|
-
return `oklch(${r} ${i} ${
|
|
72
|
+
function a(r, o, e, s) {
|
|
73
|
+
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})`;
|
|
74
|
+
return `oklch(${r} ${i} ${u})`;
|
|
74
75
|
}
|
|
75
|
-
function t(r, o, e,
|
|
76
|
-
return
|
|
76
|
+
function t(r, o, e, s) {
|
|
77
|
+
return s !== void 0 ? `oklch(${r} ${o} ${e} / ${s * 100}%)` : `oklch(${r} ${o} ${e})`;
|
|
77
78
|
}
|
|
78
|
-
function
|
|
79
|
+
function _() {
|
|
79
80
|
return {
|
|
80
81
|
// ── Surfaces (theme-derived) ──────────────────
|
|
81
82
|
background: [a(0.97, 1, "light"), a(0.145, 1.5, "dark"), "bg-background"],
|
|
82
83
|
foreground: [t(0.13, 0.028, 262), t(0.967, 3e-3, 265), "text-foreground"],
|
|
83
|
-
card: [a(0.995, 0.3, "light"), a(0.
|
|
84
|
+
card: [a(0.995, 0.3, "light"), a(0.2, 1.2, "dark"), "bg-card"],
|
|
84
85
|
"card-foreground": [t(0.13, 0.028, 262), t(0.967, 3e-3, 265), "text-card-foreground"],
|
|
85
86
|
popover: [a(0.995, 0.3, "light"), a(0.21, 1.2, "dark"), "bg-popover"],
|
|
86
87
|
"popover-foreground": [t(0.13, 0.028, 262), t(0.967, 3e-3, 265), "text-popover-foreground"],
|
|
87
|
-
muted: [a(0.94, 1.5, "light"), a(0.
|
|
88
|
+
muted: [a(0.94, 1.5, "light"), a(0.27, 1.5, "dark"), "bg-muted"],
|
|
88
89
|
"muted-foreground": [t(0.446, 0.03, 257), t(0.709, 0, 0), "text-muted-foreground"],
|
|
89
|
-
accent: [a(0.
|
|
90
|
+
accent: [a(0.87, 0.8, "light"), a(0.35, 1.2, "dark"), "bg-accent"],
|
|
90
91
|
"accent-foreground": [t(0.13, 0.028, 262), t(0.967, 3e-3, 265), "text-accent-foreground"],
|
|
91
|
-
// ── Brand (driven by --primary-
|
|
92
|
-
primary: [
|
|
93
|
-
"oklch(0.6514 0.2137 var(--primary-hue))",
|
|
94
|
-
"oklch(0.8325 0.1611 var(--primary-hue))",
|
|
95
|
-
"bg-primary"
|
|
96
|
-
],
|
|
92
|
+
// ── Brand (driven by --primary-light / --primary-dark) ─
|
|
93
|
+
primary: ["var(--primary-light)", "var(--primary-dark)", "bg-primary"],
|
|
97
94
|
"primary-foreground": [t(1, 0, 0), t(0.13, 0.028, 262), "text-primary-foreground"],
|
|
98
95
|
secondary: [t(0.31, 0, 0), t(0.86, 0, 0), "bg-secondary"],
|
|
99
96
|
"secondary-foreground": [t(1, 0, 0), t(0.13, 0.028, 262), "text-secondary-foreground"],
|
|
@@ -120,23 +117,22 @@ function V() {
|
|
|
120
117
|
ring: [t(0.446, 0.03, 257), t(0.709, 0, 0), "border-ring"],
|
|
121
118
|
// ── Interactive fills (reference other tokens) ─
|
|
122
119
|
"fill-hover": [
|
|
123
|
-
"
|
|
124
|
-
"
|
|
120
|
+
"oklch(0.87 0 0 / 40%)",
|
|
121
|
+
"oklch(0.55 0 0 / 25%)",
|
|
125
122
|
"bg-fill-hover"
|
|
126
123
|
],
|
|
127
|
-
"fill-active": ["var(--accent)", "var(--accent)", "bg-fill-active"],
|
|
128
124
|
"fill-expanded": ["var(--muted)", "var(--muted)", "bg-fill-expanded"],
|
|
129
125
|
"fill-selected": [
|
|
130
|
-
"
|
|
131
|
-
"
|
|
126
|
+
"oklch(0.87 0 0 / 20%)",
|
|
127
|
+
"oklch(0.55 0 0 / 15%)",
|
|
132
128
|
"bg-fill-selected"
|
|
133
129
|
]
|
|
134
130
|
};
|
|
135
131
|
}
|
|
136
|
-
const
|
|
137
|
-
function
|
|
132
|
+
const l = _();
|
|
133
|
+
function R(r) {
|
|
138
134
|
const o = r === "light" ? 0 : 1;
|
|
139
|
-
return Object.fromEntries(Object.entries(
|
|
135
|
+
return Object.fromEntries(Object.entries(l).map(([e, s]) => [e, s[o]]));
|
|
140
136
|
}
|
|
141
137
|
const m = /* @__PURE__ */ new Set([
|
|
142
138
|
"background",
|
|
@@ -154,33 +150,35 @@ const m = /* @__PURE__ */ new Set([
|
|
|
154
150
|
"fill-expanded",
|
|
155
151
|
"fill-selected"
|
|
156
152
|
]);
|
|
157
|
-
function
|
|
153
|
+
function F(r) {
|
|
158
154
|
const o = [
|
|
159
155
|
"var(--theme-hue)",
|
|
160
156
|
"var(--theme-dark-hue)",
|
|
161
157
|
"var(--theme-tint)",
|
|
162
|
-
"var(--primary-
|
|
158
|
+
"var(--primary-light)",
|
|
159
|
+
"var(--primary-dark)"
|
|
163
160
|
];
|
|
164
|
-
for (const [e, [
|
|
165
|
-
if (o.some((
|
|
161
|
+
for (const [e, [s, u]] of Object.entries(r))
|
|
162
|
+
if (o.some((p) => s.includes(p) || u.includes(p)) && !m.has(e))
|
|
166
163
|
throw new Error(
|
|
167
164
|
`[@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.`
|
|
168
165
|
);
|
|
169
166
|
}
|
|
170
|
-
|
|
171
|
-
function
|
|
172
|
-
const o = (
|
|
173
|
-
`${
|
|
174
|
-
`${
|
|
175
|
-
`${
|
|
176
|
-
`${
|
|
167
|
+
F(l);
|
|
168
|
+
function I(r = V) {
|
|
169
|
+
const o = (i = " ") => [
|
|
170
|
+
`${i}--theme-hue: ${r.hue};`,
|
|
171
|
+
`${i}--theme-dark-hue: ${r.darkHue};`,
|
|
172
|
+
`${i}--theme-tint: ${r.tint};`,
|
|
173
|
+
`${i}--primary-light: ${r.primaryLight};`,
|
|
174
|
+
`${i}--primary-dark: ${r.primaryDark};`
|
|
177
175
|
].join(`
|
|
178
|
-
`), e = (
|
|
179
|
-
const
|
|
180
|
-
for (const [h, f] of Object.entries(
|
|
181
|
-
m.has(h) ? g[h] = f[
|
|
182
|
-
return { staticVars:
|
|
183
|
-
},
|
|
176
|
+
`), e = (i) => {
|
|
177
|
+
const p = {}, g = {};
|
|
178
|
+
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 };
|
|
181
|
+
}, s = e(0), u = e(1);
|
|
184
182
|
return `/* Auto-generated by @posthog/quill-tokens — do not edit manually */
|
|
185
183
|
|
|
186
184
|
:root {
|
|
@@ -199,29 +197,29 @@ ${o()}
|
|
|
199
197
|
|
|
200
198
|
/* Static colors (no theme-var references, safe on :root) */
|
|
201
199
|
:root {
|
|
202
|
-
${
|
|
200
|
+
${c(s.staticVars)}
|
|
203
201
|
}
|
|
204
202
|
|
|
205
203
|
.dark {
|
|
206
|
-
${
|
|
204
|
+
${c(u.staticVars)}
|
|
207
205
|
}
|
|
208
206
|
|
|
209
207
|
/*
|
|
210
208
|
* Theme-derived colors — set on * so each element resolves
|
|
211
|
-
* var(--theme-hue) / var(--primary-
|
|
209
|
+
* var(--theme-hue) / var(--primary-light) from its own scope.
|
|
212
210
|
* This enables local overrides like [--theme-hue:200] on a container.
|
|
213
211
|
*/
|
|
214
212
|
* {
|
|
215
|
-
${
|
|
213
|
+
${c(s.dynamicVars)}
|
|
216
214
|
}
|
|
217
215
|
|
|
218
216
|
:is(.dark, .dark *) {
|
|
219
|
-
${
|
|
217
|
+
${c(u.dynamicVars)}
|
|
220
218
|
}
|
|
221
219
|
`;
|
|
222
220
|
}
|
|
223
|
-
function
|
|
224
|
-
return Object.keys(
|
|
221
|
+
function H() {
|
|
222
|
+
return Object.keys(l).map((r) => ` --color-${r}: var(--${r});`).join(`
|
|
225
223
|
`);
|
|
226
224
|
}
|
|
227
225
|
function M(r = {}) {
|
|
@@ -230,7 +228,7 @@ function M(r = {}) {
|
|
|
230
228
|
"",
|
|
231
229
|
"@custom-variant dark (&:is(.dark, .dark *));"
|
|
232
230
|
];
|
|
233
|
-
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(
|
|
231
|
+
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(`
|
|
234
232
|
`);
|
|
235
233
|
}
|
|
236
234
|
const N = {
|
|
@@ -242,22 +240,22 @@ const N = {
|
|
|
242
240
|
full: "9999px"
|
|
243
241
|
};
|
|
244
242
|
export {
|
|
245
|
-
|
|
243
|
+
V as DEFAULT_THEME,
|
|
246
244
|
$ as SPACING_BASE,
|
|
247
245
|
d as SPACING_BASE_REM,
|
|
248
246
|
N as borderRadius,
|
|
249
|
-
|
|
247
|
+
_ as buildSemanticColors,
|
|
250
248
|
x as cssVars,
|
|
251
|
-
|
|
249
|
+
c as cssVarsFlat,
|
|
252
250
|
j as fontFamily,
|
|
253
251
|
b as fontFamilyValue,
|
|
254
252
|
w as fontSize,
|
|
255
|
-
|
|
253
|
+
I as generateColorSystemCSS,
|
|
256
254
|
M as generateStylesCSS,
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
255
|
+
k as quoteFontName,
|
|
256
|
+
R as resolveTheme,
|
|
257
|
+
l as semanticColors,
|
|
258
|
+
v as shadow,
|
|
261
259
|
A as spacing,
|
|
262
|
-
|
|
260
|
+
D as spacingPx
|
|
263
261
|
};
|
package/dist/tailwind-lib.css
CHANGED
package/dist/tailwind.css
CHANGED
package/package.json
CHANGED
package/src/colors.ts
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
* PostHog Design System — Color Tokens (hue-based theming)
|
|
3
3
|
*
|
|
4
4
|
* Surface/neutral colors are derived from a shared theme hue + tint.
|
|
5
|
-
* Consumers can override `--theme-hue`, `--primary-
|
|
6
|
-
* `--theme-dark-hue`, `--theme-tint`)
|
|
7
|
-
* at runtime — no rebuild required.
|
|
5
|
+
* Consumers can override `--theme-hue`, `--primary-light`,
|
|
6
|
+
* `--primary-dark` (and optionally `--theme-dark-hue`, `--theme-tint`)
|
|
7
|
+
* on `:root` to shift the palette at runtime — no rebuild required.
|
|
8
8
|
*
|
|
9
9
|
* Status colors (destructive, success, warning, info) are independent
|
|
10
10
|
* of the theme hue.
|
|
@@ -24,16 +24,24 @@ export interface ThemeConfig {
|
|
|
24
24
|
darkHue: number
|
|
25
25
|
/** Base OKLCH chroma for neutral surface tinting (0 = pure grey) */
|
|
26
26
|
tint: number
|
|
27
|
-
/**
|
|
28
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Full brand color for light mode — any valid CSS color expression.
|
|
29
|
+
* Consumers typically pass `oklch(L C H)` so L, C, and H are all
|
|
30
|
+
* tunable per mode (not just hue). Override at runtime by setting
|
|
31
|
+
* `--primary-light` on `:root` or any subtree.
|
|
32
|
+
*/
|
|
33
|
+
primaryLight: string
|
|
34
|
+
/** Full brand color for dark mode. See `primaryLight`. */
|
|
35
|
+
primaryDark: string
|
|
29
36
|
}
|
|
30
37
|
|
|
31
|
-
/** PostHog
|
|
38
|
+
/** PostHog default — warm yellowish-grey surfaces + orange/amber brand */
|
|
32
39
|
export const DEFAULT_THEME: ThemeConfig = {
|
|
33
40
|
hue: 90,
|
|
34
41
|
darkHue: 264,
|
|
35
42
|
tint: 0.006,
|
|
36
|
-
|
|
43
|
+
primaryLight: 'oklch(0.65 0.21 37.41)',
|
|
44
|
+
primaryDark: 'oklch(0.83 0.16 84.71)',
|
|
37
45
|
}
|
|
38
46
|
|
|
39
47
|
// ── Types ─────────────────────────────────────────────
|
|
@@ -50,7 +58,7 @@ export type ColorTuple = readonly [light: string, dark: string, tailwindClass: s
|
|
|
50
58
|
* When chromaScale is 1, emits `var(--theme-tint)` directly.
|
|
51
59
|
* Otherwise wraps in `calc(var(--theme-tint) * scale)`.
|
|
52
60
|
*/
|
|
53
|
-
function surface(lightness: number, chromaScale: number, mode: 'light' | 'dark'): string {
|
|
61
|
+
function surface(lightness: number, chromaScale: number, mode: 'light' | 'dark', alpha?: number): string {
|
|
54
62
|
const hueVar = mode === 'light' ? 'var(--theme-hue)' : 'var(--theme-dark-hue)'
|
|
55
63
|
const chromaExpr =
|
|
56
64
|
chromaScale === 1
|
|
@@ -58,7 +66,8 @@ function surface(lightness: number, chromaScale: number, mode: 'light' | 'dark')
|
|
|
58
66
|
: chromaScale === 0
|
|
59
67
|
? '0'
|
|
60
68
|
: `calc(var(--theme-tint) * ${chromaScale})`
|
|
61
|
-
|
|
69
|
+
const alphaSuffix = alpha !== undefined ? ` / ${alpha * 100}%` : ''
|
|
70
|
+
return `oklch(${lightness} ${chromaExpr} ${hueVar}${alphaSuffix})`
|
|
62
71
|
}
|
|
63
72
|
|
|
64
73
|
/** Static oklch value (not theme-derived). `alpha` is a fraction in [0, 1]. */
|
|
@@ -81,24 +90,20 @@ export function buildSemanticColors(): Record<string, ColorTuple> {
|
|
|
81
90
|
background: [surface(0.97, 1, 'light'), surface(0.145, 1.5, 'dark'), 'bg-background'],
|
|
82
91
|
foreground: [oklch(0.13, 0.028, 262), oklch(0.967, 0.003, 265), 'text-foreground'],
|
|
83
92
|
|
|
84
|
-
card: [surface(0.995, 0.3, 'light'), surface(0.
|
|
93
|
+
card: [surface(0.995, 0.3, 'light'), surface(0.2, 1.2, 'dark'), 'bg-card'],
|
|
85
94
|
'card-foreground': [oklch(0.13, 0.028, 262), oklch(0.967, 0.003, 265), 'text-card-foreground'],
|
|
86
95
|
|
|
87
96
|
popover: [surface(0.995, 0.3, 'light'), surface(0.21, 1.2, 'dark'), 'bg-popover'],
|
|
88
97
|
'popover-foreground': [oklch(0.13, 0.028, 262), oklch(0.967, 0.003, 265), 'text-popover-foreground'],
|
|
89
98
|
|
|
90
|
-
muted: [surface(0.94, 1.5, 'light'), surface(0.
|
|
99
|
+
muted: [surface(0.94, 1.5, 'light'), surface(0.27, 1.5, 'dark'), 'bg-muted'],
|
|
91
100
|
'muted-foreground': [oklch(0.446, 0.03, 257), oklch(0.709, 0, 0), 'text-muted-foreground'],
|
|
92
101
|
|
|
93
|
-
accent: [surface(0.
|
|
102
|
+
accent: [surface(0.87, 0.8, 'light'), surface(0.35, 1.2, 'dark'), 'bg-accent'],
|
|
94
103
|
'accent-foreground': [oklch(0.13, 0.028, 262), oklch(0.967, 0.003, 265), 'text-accent-foreground'],
|
|
95
104
|
|
|
96
|
-
// ── Brand (driven by --primary-
|
|
97
|
-
primary: [
|
|
98
|
-
'oklch(0.6514 0.2137 var(--primary-hue))',
|
|
99
|
-
'oklch(0.8325 0.1611 var(--primary-hue))',
|
|
100
|
-
'bg-primary',
|
|
101
|
-
],
|
|
105
|
+
// ── Brand (driven by --primary-light / --primary-dark) ─
|
|
106
|
+
primary: ['var(--primary-light)', 'var(--primary-dark)', 'bg-primary'],
|
|
102
107
|
'primary-foreground': [oklch(1, 0, 0), oklch(0.13, 0.028, 262), 'text-primary-foreground'],
|
|
103
108
|
|
|
104
109
|
secondary: [oklch(0.31, 0, 0), oklch(0.86, 0, 0), 'bg-secondary'],
|
|
@@ -132,15 +137,14 @@ export function buildSemanticColors(): Record<string, ColorTuple> {
|
|
|
132
137
|
|
|
133
138
|
// ── Interactive fills (reference other tokens) ─
|
|
134
139
|
'fill-hover': [
|
|
135
|
-
'
|
|
136
|
-
'
|
|
140
|
+
'oklch(0.87 0 0 / 40%)',
|
|
141
|
+
'oklch(0.55 0 0 / 25%)',
|
|
137
142
|
'bg-fill-hover',
|
|
138
143
|
],
|
|
139
|
-
'fill-active': ['var(--accent)', 'var(--accent)', 'bg-fill-active'],
|
|
140
144
|
'fill-expanded': ['var(--muted)', 'var(--muted)', 'bg-fill-expanded'],
|
|
141
145
|
'fill-selected': [
|
|
142
|
-
'
|
|
143
|
-
'
|
|
146
|
+
'oklch(0.87 0 0 / 20%)',
|
|
147
|
+
'oklch(0.55 0 0 / 15%)',
|
|
144
148
|
'bg-fill-selected',
|
|
145
149
|
],
|
|
146
150
|
} as const
|
|
@@ -168,8 +172,8 @@ export function resolveTheme(mode: 'light' | 'dark'): Record<string, string> {
|
|
|
168
172
|
* `:root`) so local `[--theme-hue:X]` overrides re-evaluate per-element.
|
|
169
173
|
*
|
|
170
174
|
* Direct references to `--theme-hue`, `--theme-dark-hue`, `--theme-tint`,
|
|
171
|
-
* or `--primary-
|
|
172
|
-
* below). The `fill-*` tokens are transitive — they reference
|
|
175
|
+
* or `--primary-light` / `--primary-dark` are validated at module load
|
|
176
|
+
* (see `assertThemeDerivedSyncedWithColors` below). The `fill-*` tokens are transitive — they reference
|
|
173
177
|
* `var(--accent)` / `var(--muted)` rather than a theme var directly, so
|
|
174
178
|
* they can't be auto-detected and must be listed explicitly.
|
|
175
179
|
*/
|
|
@@ -205,7 +209,8 @@ function assertThemeDerivedSyncedWithColors(colors: Record<string, ColorTuple>):
|
|
|
205
209
|
'var(--theme-hue)',
|
|
206
210
|
'var(--theme-dark-hue)',
|
|
207
211
|
'var(--theme-tint)',
|
|
208
|
-
'var(--primary-
|
|
212
|
+
'var(--primary-light)',
|
|
213
|
+
'var(--primary-dark)',
|
|
209
214
|
]
|
|
210
215
|
for (const [key, [light, dark]] of Object.entries(colors)) {
|
|
211
216
|
const refsThemeVar = DIRECT_THEME_VARS.some((v) => light.includes(v) || dark.includes(v))
|
|
@@ -228,7 +233,8 @@ export function generateColorSystemCSS(theme: ThemeConfig = DEFAULT_THEME): stri
|
|
|
228
233
|
`${indent}--theme-hue: ${theme.hue};`,
|
|
229
234
|
`${indent}--theme-dark-hue: ${theme.darkHue};`,
|
|
230
235
|
`${indent}--theme-tint: ${theme.tint};`,
|
|
231
|
-
`${indent}--primary-
|
|
236
|
+
`${indent}--primary-light: ${theme.primaryLight};`,
|
|
237
|
+
`${indent}--primary-dark: ${theme.primaryDark};`,
|
|
232
238
|
].join('\n')
|
|
233
239
|
|
|
234
240
|
// Split colors into static (safe on :root) vs theme-derived (need * for local overrides)
|
|
@@ -275,7 +281,7 @@ ${cssVarsFlat(dark.staticVars)}
|
|
|
275
281
|
|
|
276
282
|
/*
|
|
277
283
|
* Theme-derived colors — set on * so each element resolves
|
|
278
|
-
* var(--theme-hue) / var(--primary-
|
|
284
|
+
* var(--theme-hue) / var(--primary-light) from its own scope.
|
|
279
285
|
* This enables local overrides like [--theme-hue:200] on a container.
|
|
280
286
|
*/
|
|
281
287
|
* {
|