@posthog/quill-tokens 0.1.0-alpha.7 → 0.3.0-beta.1
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 +12 -24
- package/dist/color-system.scoped.css +101 -0
- package/dist/colors.d.ts +21 -15
- package/dist/colors.d.ts.map +1 -1
- package/dist/index.cjs +53 -19
- package/dist/index.js +200 -142
- package/dist/shadow.d.ts +4 -3
- package/dist/shadow.d.ts.map +1 -1
- package/dist/tailwind-lib.css +24 -13
- package/dist/tailwind-lib.scoped.css +112 -0
- package/dist/tailwind.css +24 -13
- package/dist/tailwind.scoped.css +118 -0
- package/package.json +5 -2
- package/src/build.ts +17 -0
- package/src/colors.ts +160 -53
- package/src/shadow.ts +4 -3
package/dist/color-system.css
CHANGED
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
color-scheme: light;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.dark {
|
|
7
|
+
:is(.dark, [theme="dark"]) {
|
|
8
8
|
color-scheme: dark;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
/* Theme knobs — override these to shift the palette */
|
|
12
12
|
:root {
|
|
13
|
-
--radius: 0.
|
|
13
|
+
--radius: 0.58rem;
|
|
14
14
|
--theme-hue: 90;
|
|
15
15
|
--theme-dark-hue: 264;
|
|
16
16
|
--theme-tint: 0.006;
|
|
@@ -21,13 +21,9 @@
|
|
|
21
21
|
/* Static colors (no theme-var references, safe on :root) */
|
|
22
22
|
:root {
|
|
23
23
|
--foreground: oklch(0.13 0.028 262);
|
|
24
|
-
--card-foreground:
|
|
25
|
-
--popover-foreground: oklch(0.13 0.028 262);
|
|
24
|
+
--card-foreground: var(--foreground);
|
|
26
25
|
--muted-foreground: oklch(0.446 0.03 257);
|
|
27
|
-
--accent-foreground: oklch(0.13 0.028 262);
|
|
28
26
|
--primary-foreground: oklch(1 0 0);
|
|
29
|
-
--secondary: oklch(0.31 0 0);
|
|
30
|
-
--secondary-foreground: oklch(1 0 0);
|
|
31
27
|
--destructive: oklch(0.92 0.03 32.22);
|
|
32
28
|
--destructive-foreground: oklch(0.59 0.2 23.61);
|
|
33
29
|
--success: oklch(0.94 0.06 154.03);
|
|
@@ -39,15 +35,11 @@
|
|
|
39
35
|
--ring: oklch(0.446 0.03 257);
|
|
40
36
|
}
|
|
41
37
|
|
|
42
|
-
.dark {
|
|
38
|
+
:is(.dark, [theme="dark"]) {
|
|
43
39
|
--foreground: oklch(0.967 0.003 265);
|
|
44
|
-
--card-foreground:
|
|
45
|
-
--popover-foreground: oklch(0.967 0.003 265);
|
|
40
|
+
--card-foreground: var(--foreground);
|
|
46
41
|
--muted-foreground: oklch(0.709 0 0);
|
|
47
|
-
--accent-foreground: oklch(0.967 0.003 265);
|
|
48
42
|
--primary-foreground: oklch(0.13 0.028 262);
|
|
49
|
-
--secondary: oklch(0.86 0 0);
|
|
50
|
-
--secondary-foreground: oklch(0.13 0.028 262);
|
|
51
43
|
--destructive: oklch(0.24 0.03 2.79);
|
|
52
44
|
--destructive-foreground: oklch(0.6316 0.1927 24.53);
|
|
53
45
|
--success: oklch(0.27 0.04 157.6);
|
|
@@ -67,27 +59,23 @@
|
|
|
67
59
|
* {
|
|
68
60
|
--background: oklch(0.97 var(--theme-tint) var(--theme-hue));
|
|
69
61
|
--card: oklch(0.995 calc(var(--theme-tint) * 0.3) var(--theme-hue));
|
|
70
|
-
--popover: oklch(0.995 calc(var(--theme-tint) * 0.3) var(--theme-hue));
|
|
71
62
|
--muted: oklch(0.94 calc(var(--theme-tint) * 1.5) var(--theme-hue));
|
|
72
|
-
--accent: oklch(0.87 calc(var(--theme-tint) * 0.8) var(--theme-hue));
|
|
73
63
|
--primary: var(--primary-light);
|
|
74
64
|
--border: oklch(0.9 calc(var(--theme-tint) * 0.8) var(--theme-hue));
|
|
75
65
|
--input: oklch(0.81 calc(var(--theme-tint) * 0.5) var(--theme-hue));
|
|
76
|
-
--fill-expanded:
|
|
77
|
-
--fill-selected:
|
|
78
|
-
--fill-hover:
|
|
66
|
+
--fill-expanded: color-mix(in oklab, var(--foreground) 6%, transparent);
|
|
67
|
+
--fill-selected: color-mix(in oklab, var(--foreground) 6%, transparent);
|
|
68
|
+
--fill-hover: color-mix(in oklab, var(--foreground) 4%, transparent);
|
|
79
69
|
}
|
|
80
70
|
|
|
81
|
-
:is(.dark, .dark *) {
|
|
71
|
+
:is(:is(.dark, [theme="dark"]), :is(.dark, [theme="dark"]) *) {
|
|
82
72
|
--background: oklch(0.145 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
|
|
83
73
|
--card: oklch(0.2 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
|
|
84
|
-
--popover: oklch(0.21 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
|
|
85
74
|
--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
75
|
--primary: var(--primary-dark);
|
|
88
76
|
--border: oklch(0.27 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
|
|
89
77
|
--input: oklch(0.3 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
|
|
90
|
-
--fill-expanded:
|
|
91
|
-
--fill-selected:
|
|
92
|
-
--fill-hover:
|
|
78
|
+
--fill-expanded: color-mix(in oklab, var(--foreground) 14%, transparent);
|
|
79
|
+
--fill-selected: color-mix(in oklab, var(--foreground) 10%, transparent);
|
|
80
|
+
--fill-hover: color-mix(in oklab, var(--foreground) 7%, transparent);
|
|
93
81
|
}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
/* Auto-generated by @posthog/quill-tokens — do not edit manually */
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* Scoped output — all token vars are gated behind `[data-quill]` so they
|
|
5
|
+
* do not clash with the consumer's existing CSS custom properties.
|
|
6
|
+
* Add the `data-quill` attribute to wrapper elements
|
|
7
|
+
* where quill components are rendered.
|
|
8
|
+
*
|
|
9
|
+
* Dark mode: works when the dark selector is on an ancestor of the scope
|
|
10
|
+
* element (.dark > [data-quill]) OR on the scope element itself
|
|
11
|
+
* ([data-quill].dark).
|
|
12
|
+
*/
|
|
13
|
+
[data-quill] {
|
|
14
|
+
color-scheme: light;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:is(:is(.dark, [theme="dark"]) [data-quill], [data-quill]:is(.dark, [theme="dark"])) {
|
|
18
|
+
color-scheme: dark;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
:is([data-quill], [data-quill] *) {
|
|
22
|
+
--radius: 0.58rem;
|
|
23
|
+
--theme-hue: 90;
|
|
24
|
+
--theme-dark-hue: 264;
|
|
25
|
+
--theme-tint: 0.006;
|
|
26
|
+
--primary-light: oklch(0.65 0.21 37.41);
|
|
27
|
+
--primary-dark: oklch(0.83 0.16 84.71);
|
|
28
|
+
--foreground: oklch(0.13 0.028 262);
|
|
29
|
+
--card-foreground: var(--foreground);
|
|
30
|
+
--muted-foreground: oklch(0.446 0.03 257);
|
|
31
|
+
--primary-foreground: oklch(1 0 0);
|
|
32
|
+
--destructive: oklch(0.92 0.03 32.22);
|
|
33
|
+
--destructive-foreground: oklch(0.59 0.2 23.61);
|
|
34
|
+
--success: oklch(0.94 0.06 154.03);
|
|
35
|
+
--success-foreground: oklch(0.448 0.119 151.328);
|
|
36
|
+
--warning: oklch(0.93 0.04 74.41);
|
|
37
|
+
--warning-foreground: oklch(0.476 0.114 61.907);
|
|
38
|
+
--info: oklch(0.882 0.059 254.128);
|
|
39
|
+
--info-foreground: oklch(0.49 0.02 254);
|
|
40
|
+
--ring: oklch(0.446 0.03 257);
|
|
41
|
+
--background: oklch(0.97 var(--theme-tint) var(--theme-hue));
|
|
42
|
+
--card: oklch(0.995 calc(var(--theme-tint) * 0.3) var(--theme-hue));
|
|
43
|
+
--muted: oklch(0.94 calc(var(--theme-tint) * 1.5) var(--theme-hue));
|
|
44
|
+
--primary: var(--primary-light);
|
|
45
|
+
--border: oklch(0.9 calc(var(--theme-tint) * 0.8) var(--theme-hue));
|
|
46
|
+
--input: oklch(0.81 calc(var(--theme-tint) * 0.5) var(--theme-hue));
|
|
47
|
+
--fill-expanded: color-mix(in oklab, var(--foreground) 6%, transparent);
|
|
48
|
+
--fill-selected: color-mix(in oklab, var(--foreground) 6%, transparent);
|
|
49
|
+
--fill-hover: color-mix(in oklab, var(--foreground) 4%, transparent);
|
|
50
|
+
|
|
51
|
+
/* Override Tailwind --color-* theme tokens within scope so utilities
|
|
52
|
+
* like bg-card, text-foreground, border-border resolve to quill's
|
|
53
|
+
* values instead of the consumer's global theme. */
|
|
54
|
+
--color-background: var(--background);
|
|
55
|
+
--color-foreground: var(--foreground);
|
|
56
|
+
--color-card: var(--card);
|
|
57
|
+
--color-card-foreground: var(--card-foreground);
|
|
58
|
+
--color-muted: var(--muted);
|
|
59
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
60
|
+
--color-primary: var(--primary);
|
|
61
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
62
|
+
--color-destructive: var(--destructive);
|
|
63
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
64
|
+
--color-success: var(--success);
|
|
65
|
+
--color-success-foreground: var(--success-foreground);
|
|
66
|
+
--color-warning: var(--warning);
|
|
67
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
68
|
+
--color-info: var(--info);
|
|
69
|
+
--color-info-foreground: var(--info-foreground);
|
|
70
|
+
--color-border: var(--border);
|
|
71
|
+
--color-input: var(--input);
|
|
72
|
+
--color-ring: var(--ring);
|
|
73
|
+
--color-fill-expanded: var(--fill-expanded);
|
|
74
|
+
--color-fill-selected: var(--fill-selected);
|
|
75
|
+
--color-fill-hover: var(--fill-hover);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
: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"]) *) {
|
|
79
|
+
--foreground: oklch(0.967 0.003 265);
|
|
80
|
+
--card-foreground: var(--foreground);
|
|
81
|
+
--muted-foreground: oklch(0.709 0 0);
|
|
82
|
+
--primary-foreground: oklch(0.13 0.028 262);
|
|
83
|
+
--destructive: oklch(0.24 0.03 2.79);
|
|
84
|
+
--destructive-foreground: oklch(0.6316 0.1927 24.53);
|
|
85
|
+
--success: oklch(0.27 0.04 157.6);
|
|
86
|
+
--success-foreground: oklch(0.925 0.084 155.995);
|
|
87
|
+
--warning: oklch(0.29 0.03 75);
|
|
88
|
+
--warning-foreground: oklch(0.77 0.14 99.29);
|
|
89
|
+
--info: oklch(0.4242 0.1982 265.5 / 40%);
|
|
90
|
+
--info-foreground: oklch(0.882 0.059 254.128);
|
|
91
|
+
--ring: oklch(0.709 0 0);
|
|
92
|
+
--background: oklch(0.145 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
|
|
93
|
+
--card: oklch(0.2 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
|
|
94
|
+
--muted: oklch(0.27 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
|
|
95
|
+
--primary: var(--primary-dark);
|
|
96
|
+
--border: oklch(0.27 calc(var(--theme-tint) * 1.2) var(--theme-dark-hue));
|
|
97
|
+
--input: oklch(0.3 calc(var(--theme-tint) * 1.5) var(--theme-dark-hue));
|
|
98
|
+
--fill-expanded: color-mix(in oklab, var(--foreground) 14%, transparent);
|
|
99
|
+
--fill-selected: color-mix(in oklab, var(--foreground) 10%, transparent);
|
|
100
|
+
--fill-hover: color-mix(in oklab, var(--foreground) 7%, transparent);
|
|
101
|
+
}
|
package/dist/colors.d.ts
CHANGED
|
@@ -42,24 +42,30 @@ export declare const semanticColors: Record<string, ColorTuple>;
|
|
|
42
42
|
export interface StylesConfig {
|
|
43
43
|
/** Include @layer base reset rules (apps only) */
|
|
44
44
|
includeBaseLayer?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* CSS selector to scope all token CSS vars to. When set, vars are only
|
|
47
|
+
* defined inside elements matching this selector, preventing clashes
|
|
48
|
+
* with the consumer's existing CSS custom properties.
|
|
49
|
+
*
|
|
50
|
+
* Example: `'[data-quill]'` — consumer adds `data-quill` to wrapper
|
|
51
|
+
* elements. During migration the attribute moves up the DOM tree;
|
|
52
|
+
* when it reaches `<html>` the scope is effectively global and can
|
|
53
|
+
* be removed.
|
|
54
|
+
*/
|
|
55
|
+
scope?: string;
|
|
56
|
+
/**
|
|
57
|
+
* CSS selector(s) for dark mode. Accepts a single selector or an
|
|
58
|
+
* array — when multiple are given they are combined with `:is()`
|
|
59
|
+
* so any of them activates dark mode.
|
|
60
|
+
*
|
|
61
|
+
* Default: `['.dark', '[theme="dark"]']` (both `.dark` class and
|
|
62
|
+
* `theme="dark"` attribute work out of the box).
|
|
63
|
+
*/
|
|
64
|
+
darkSelector?: string | string[];
|
|
45
65
|
}
|
|
46
66
|
/** Flat object for one theme */
|
|
47
67
|
export declare function resolveTheme(mode: 'light' | 'dark'): Record<string, string>;
|
|
48
68
|
/** Generate color-system.css (:root light + .dark overrides) */
|
|
49
|
-
export declare function generateColorSystemCSS(theme?: ThemeConfig): string;
|
|
50
|
-
/**
|
|
51
|
-
* Generate Tailwind v4 @theme + @custom-variant + optional @layer base.
|
|
52
|
-
*
|
|
53
|
-
* Does NOT include `@import "tailwindcss"` or `@import "color-system.css"` —
|
|
54
|
-
* those are the consuming app's responsibility (they must resolve from the
|
|
55
|
-
* app's node_modules, not from tokens/dist/).
|
|
56
|
-
*
|
|
57
|
-
* Two modes:
|
|
58
|
-
* - **Library** (includeBaseLayer: false): Just the @theme inline block
|
|
59
|
-
* so Tailwind can generate utility classes. Used by packages.
|
|
60
|
-
*
|
|
61
|
-
* - **App** (includeBaseLayer: true): @theme + base layer resets.
|
|
62
|
-
* Used by apps/web, apps/storybook.
|
|
63
|
-
*/
|
|
69
|
+
export declare function generateColorSystemCSS(theme?: ThemeConfig, opts?: Pick<StylesConfig, 'scope' | 'darkSelector'>): string;
|
|
64
70
|
export declare function generateStylesCSS(config?: StylesConfig): string;
|
|
65
71
|
//# sourceMappingURL=colors.d.ts.map
|
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,
|
|
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,CAiEhE;AAED,eAAO,MAAM,cAAc,4BAAwB,CAAA;AAInD,MAAM,WAAW,YAAY;IACzB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CACnC;AAID,gCAAgC;AAChC,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAG3E;AAiED,gEAAgE;AAChE,wBAAgB,sBAAsB,CAClC,KAAK,GAAE,WAA2B,EAClC,IAAI,GAAE,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,cAAc,CAAM,GACxD,MAAM,CAqHR;AAuCD,wBAAgB,iBAAiB,CAAC,MAAM,GAAE,YAAiB,GAAG,MAAM,CAkGnE"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,32 +1,66 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function
|
|
2
|
-
`)}function
|
|
3
|
-
`)}function
|
|
4
|
-
--text-${r}--line-height: ${
|
|
5
|
-
`)}function
|
|
6
|
-
`)}const
|
|
7
|
-
`),e=
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function v(r,s,o=" "){return Object.entries(r).map(([t,d])=>`${o}--${s}-${t}: ${d};`).join(`
|
|
2
|
+
`)}function p(r,s=" "){return Object.entries(r).map(([o,t])=>`${s}--${o}: ${t};`).join(`
|
|
3
|
+
`)}function S(r){return/\s/.test(r)?`"${r}"`:r}function y(r){return r.map(S).join(", ")}const $={sm:"0 2px 0 color-mix(in oklab, var(--border), transparent 10%)",md:"0 3px 0 color-mix(in oklab, var(--border), transparent 10%)",lg:"0 6px 0 color-mix(in oklab, var(--border), transparent 10%)",line:"0 -1px 0px 0px color-mix(in oklab, var(--border), transparent 10%)"};function F(){return v($,"shadow")}const f=.25,E=`${f}rem`,A=16;function H(r){return`${f*r}rem`}function R(r){return f*r*A}function D(){return` --spacing: ${E};`}const I=16;function i(r){return`${r/I}rem`}const w={xxs:[i(10),{lineHeight:i(12)}],xs:[i(12),{lineHeight:i(16)}],sm:[i(14),{lineHeight:i(20)}],base:[i(16),{lineHeight:i(24)}],lg:[i(18),{lineHeight:i(28)}],xl:[i(20),{lineHeight:i(28)}],"2xl":[i(24),{lineHeight:i(32)}]},T={sans:["-apple-system","BlinkMacSystemFont","Inter","Segoe UI","Roboto","Helvetica Neue","sans-serif"],mono:["JetBrains Mono","Fira Code","monospace"]};function M(){return Object.entries(w).map(([r,[s,{lineHeight:o}]])=>` --text-${r}: ${s};
|
|
4
|
+
--text-${r}--line-height: ${o};`).join(`
|
|
5
|
+
`)}function N(){return Object.entries(T).map(([r,s])=>` --font-${r}: ${y(s)};`).join(`
|
|
6
|
+
`)}const C={hue:90,darkHue:264,tint:.006,primaryLight:"oklch(0.65 0.21 37.41)",primaryDark:"oklch(0.83 0.16 84.71)"};function c(r,s,o,t){const d=o==="light"?"var(--theme-hue)":"var(--theme-dark-hue)",e=s===1?"var(--theme-tint)":s===0?"0":`calc(var(--theme-tint) * ${s})`;return`oklch(${r} ${e} ${d})`}function a(r,s,o,t){return t!==void 0?`oklch(${r} ${s} ${o} / ${t*100}%)`:`oklch(${r} ${s} ${o})`}function V(){return{background:[c(.97,1,"light"),c(.145,1.5,"dark"),"bg-background"],foreground:[a(.13,.028,262),a(.967,.003,265),"text-foreground"],card:[c(.995,.3,"light"),c(.2,1.2,"dark"),"bg-card"],"card-foreground":["var(--foreground)","var(--foreground)","text-card-foreground"],muted:[c(.94,1.5,"light"),c(.27,1.5,"dark"),"bg-muted"],"muted-foreground":[a(.446,.03,257),a(.709,0,0),"text-muted-foreground"],primary:["var(--primary-light)","var(--primary-dark)","bg-primary"],"primary-foreground":[a(1,0,0),a(.13,.028,262),"text-primary-foreground"],destructive:[a(.92,.03,32.22),a(.24,.03,2.79),"bg-destructive"],"destructive-foreground":[a(.59,.2,23.61),a(.6316,.1927,24.53),"text-destructive-foreground"],success:[a(.94,.06,154.03),a(.27,.04,157.6),"bg-success"],"success-foreground":[a(.448,.119,151.328),a(.925,.084,155.995),"text-success-foreground"],warning:[a(.93,.04,74.41),a(.29,.03,75),"bg-warning"],"warning-foreground":[a(.476,.114,61.907),a(.77,.14,99.29),"text-warning-foreground"],info:[a(.882,.059,254.128),a(.4242,.1982,265.5,.4),"bg-info"],"info-foreground":[a(.49,.02,254),a(.882,.059,254.128),"text-info-foreground"],border:[c(.9,.8,"light"),c(.27,1.2,"dark"),"border-border"],input:[c(.81,.5,"light"),c(.3,1.5,"dark"),"border-input"],ring:[a(.446,.03,257),a(.709,0,0),"border-ring"],"fill-expanded":["color-mix(in oklab, var(--foreground) 6%, transparent)","color-mix(in oklab, var(--foreground) 14%, transparent)","bg-fill-expanded"],"fill-selected":["color-mix(in oklab, var(--foreground) 6%, transparent)","color-mix(in oklab, var(--foreground) 10%, transparent)","bg-fill-selected"],"fill-hover":["color-mix(in oklab, var(--foreground) 4%, transparent)","color-mix(in oklab, var(--foreground) 7%, transparent)","bg-fill-hover"]}}const h=V();function q(r){const s=r==="light"?0:1;return Object.fromEntries(Object.entries(h).map(([o,t])=>[o,t[s]]))}const O=new Set(["background","card","muted","primary","border","input","fill-hover","fill-expanded","fill-selected"]);function B(r){const s=["var(--theme-hue)","var(--theme-dark-hue)","var(--theme-tint)","var(--primary-light)","var(--primary-dark)"];for(const[o,[t,d]]of Object.entries(r))if(s.some(u=>t.includes(u)||d.includes(u))&&!O.has(o))throw new Error(`[@posthog/quill-tokens] Token "${o}" references a theme variable but is missing from THEME_DERIVED_TOKENS. Add it to the set in colors.ts or local [--theme-hue:X] overrides will silently fail for this token.`)}B(h);function _(r){const o=r===void 0?[".dark",'[theme="dark"]']:typeof r=="string"?[r]:r;return o.length===1?o[0]:`:is(${o.join(", ")})`}function P(r=C,s={}){const{scope:o}=s,t=_(s.darkSelector),d=(n=" ")=>[`${n}--radius: 0.58rem;`,`${n}--theme-hue: ${r.hue};`,`${n}--theme-dark-hue: ${r.darkHue};`,`${n}--theme-tint: ${r.tint};`,`${n}--primary-light: ${r.primaryLight};`,`${n}--primary-dark: ${r.primaryDark};`].join(`
|
|
7
|
+
`),e=n=>{const m={},k={};for(const[g,b]of Object.entries(h))O.has(g)?k[g]=b[n]:m[g]=b[n];return{staticVars:m,dynamicVars:k}},u=e(0),l=e(1);if(o){const n=`:is(${o}, ${o} *)`,m=`:is(${t} ${o}, ${o}${t}, ${t} ${o} *, ${o}${t} *)`;return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
|
|
8
|
+
|
|
9
|
+
/*
|
|
10
|
+
* Scoped output — all token vars are gated behind \`${o}\` so they
|
|
11
|
+
* do not clash with the consumer's existing CSS custom properties.
|
|
12
|
+
* Add the \`${o.replace(/[[\]]/g,"")}\` attribute to wrapper elements
|
|
13
|
+
* where quill components are rendered.
|
|
14
|
+
*
|
|
15
|
+
* Dark mode: works when the dark selector is on an ancestor of the scope
|
|
16
|
+
* element (.dark > [data-quill]) OR on the scope element itself
|
|
17
|
+
* ([data-quill].dark).
|
|
18
|
+
*/
|
|
19
|
+
${o} {
|
|
20
|
+
color-scheme: light;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:is(${t} ${o}, ${o}${t}) {
|
|
24
|
+
color-scheme: dark;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
${n} {
|
|
28
|
+
${d()}
|
|
29
|
+
${p(u.staticVars)}
|
|
30
|
+
${p(u.dynamicVars)}
|
|
31
|
+
|
|
32
|
+
/* Override Tailwind --color-* theme tokens within scope so utilities
|
|
33
|
+
* like bg-card, text-foreground, border-border resolve to quill's
|
|
34
|
+
* values instead of the consumer's global theme. */
|
|
35
|
+
${j()}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
${m} {
|
|
39
|
+
${p(l.staticVars)}
|
|
40
|
+
${p(l.dynamicVars)}
|
|
41
|
+
}
|
|
42
|
+
`}return`/* Auto-generated by @posthog/quill-tokens — do not edit manually */
|
|
8
43
|
|
|
9
44
|
:root {
|
|
10
45
|
color-scheme: light;
|
|
11
46
|
}
|
|
12
47
|
|
|
13
|
-
|
|
48
|
+
${t} {
|
|
14
49
|
color-scheme: dark;
|
|
15
50
|
}
|
|
16
51
|
|
|
17
52
|
/* Theme knobs — override these to shift the palette */
|
|
18
53
|
:root {
|
|
19
|
-
|
|
20
|
-
${o()}
|
|
54
|
+
${d()}
|
|
21
55
|
}
|
|
22
56
|
|
|
23
57
|
/* Static colors (no theme-var references, safe on :root) */
|
|
24
58
|
:root {
|
|
25
|
-
${
|
|
59
|
+
${p(u.staticVars)}
|
|
26
60
|
}
|
|
27
61
|
|
|
28
|
-
|
|
29
|
-
${
|
|
62
|
+
${t} {
|
|
63
|
+
${p(l.staticVars)}
|
|
30
64
|
}
|
|
31
65
|
|
|
32
66
|
/*
|
|
@@ -35,12 +69,12 @@ ${c(u.staticVars)}
|
|
|
35
69
|
* This enables local overrides like [--theme-hue:200] on a container.
|
|
36
70
|
*/
|
|
37
71
|
* {
|
|
38
|
-
${
|
|
72
|
+
${p(u.dynamicVars)}
|
|
39
73
|
}
|
|
40
74
|
|
|
41
|
-
:is(
|
|
42
|
-
${
|
|
75
|
+
:is(${t}, ${t} *) {
|
|
76
|
+
${p(l.dynamicVars)}
|
|
43
77
|
}
|
|
44
|
-
`}function
|
|
45
|
-
`)}function
|
|
46
|
-
`)}const
|
|
78
|
+
`}function j(){return Object.keys(h).map(r=>` --color-${r}: var(--${r});`).join(`
|
|
79
|
+
`)}const x=[["--radius-xs","calc(var(--radius) - 7px)"],["--radius-sm","calc(var(--radius) - 5px)"],["--radius-md","calc(var(--radius) - 2px)"],["--radius-lg","var(--radius)"],["--radius-xl","calc(var(--radius) + 4px)"],["--radius-2xl","calc(var(--radius) + 8px)"],["--radius-3xl","calc(var(--radius) + 12px)"],["--radius-4xl","calc(var(--radius) + 16px)"]];function z(r={}){const{includeBaseLayer:s=!1,scope:o}=r,t=_(r.darkSelector),e=["/* Auto-generated by @posthog/quill-tokens — do not edit manually */","",`@custom-variant dark (${`&:is(${t}, ${t} *)`});`];e.push(""),e.push("@theme inline {"),e.push(" --animate-skeleton: skeleton 2s -1s infinite linear;"),e.push(" --animate-pulse-glow: pulse-glow 2s -1s infinite linear;"),e.push(" --animate-horizontal-shake: horizontal-shake 0.3s ease-out;"),e.push(" --animate-radar: radar 2s ease-out infinite;"),e.push(""),e.push(" /* --- Colors --- */"),e.push(j()),e.push(""),e.push(" /* --- Spacing --- */"),e.push(D()),e.push(""),e.push(" /* --- Font sizes --- */"),e.push(M()),e.push(""),e.push(" /* --- Font families --- */"),e.push(N()),e.push(""),e.push(" /* --- Shadows --- */"),e.push(F()),e.push(""),e.push(" /* --- Radius (derived from --radius base) --- */");for(const[l,n]of x)e.push(` ${l}: ${n};`);e.push(""),e.push(" @keyframes skeleton {"),e.push(" to {"),e.push(" background-position: -200% 0;"),e.push(" }"),e.push(" }"),e.push(""),e.push(" @keyframes pulse-glow {"),e.push(" 0%, 100% { box-shadow: 0 0 2px 1px var(--pulse-glow-color, var(--color-primary)) }"),e.push(" 50% { box-shadow: 0 0 6px 2px var(--pulse-glow-color, var(--color-primary)) }"),e.push(" }"),e.push(""),e.push(" @keyframes horizontal-shake {"),e.push(" 0% { transform: translateX(0); }"),e.push(" 25% { transform: translateX(5px); }"),e.push(" 50% { transform: translateX(-5px); }"),e.push(" 75% { transform: translateX(2px); }"),e.push(" 100% { transform: translateX(0); }"),e.push(" }"),e.push(""),e.push(" @keyframes radar {"),e.push(" 0% { transform: scale(1); opacity: 0.5; }"),e.push(" 100% { transform: scale(1.5); opacity: 0; }"),e.push(" }"),e.push("}"),e.push("");const u=o??":root";e.push(`${u} {`);for(const[l,n]of x)e.push(` ${l}: ${n};`);for(const[l,n]of Object.entries($))e.push(` --shadow-${l}: ${n};`);return e.push("}"),s&&(e.push(""),e.push("@layer base {"),o?(e.push(` ${o}, ${o} * {`),e.push(" @apply border-border outline-ring/50;"),e.push(" }")):(e.push(" * {"),e.push(" @apply border-border outline-ring/50;"),e.push(" }"),e.push(" body {"),e.push(" @apply bg-background text-foreground;"),e.push(" }")),e.push("}")),e.push(""),e.join(`
|
|
80
|
+
`)}const X={none:"0px",sm:"4px",md:"6px",lg:"8px",xl:"12px",full:"9999px"};exports.DEFAULT_THEME=C;exports.SPACING_BASE=E;exports.SPACING_BASE_REM=f;exports.borderRadius=X;exports.buildSemanticColors=V;exports.cssVars=v;exports.cssVarsFlat=p;exports.fontFamily=T;exports.fontFamilyValue=y;exports.fontSize=w;exports.generateColorSystemCSS=P;exports.generateStylesCSS=z;exports.quoteFontName=S;exports.resolveTheme=q;exports.semanticColors=h;exports.shadow=$;exports.spacing=H;exports.spacingPx=R;
|