@pie-players/pie-theme 0.1.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.
Files changed (14) hide show
  1. package/README.md +31 -0
  2. package/dist/color-schemes.css +333 -0
  3. package/dist/components.css +624 -0
  4. package/dist/font-sizes.css +141 -0
  5. package/dist/index.d.ts +3 -0
  6. package/dist/index.d.ts.map +1 -0
  7. package/dist/index.js +4 -0
  8. package/dist/index.js.map +1 -0
  9. package/dist/theme-element.d.ts +32 -0
  10. package/dist/theme-element.d.ts.map +1 -0
  11. package/dist/theme-element.js +332 -0
  12. package/dist/theme-element.js.map +1 -0
  13. package/dist/tokens.css +97 -0
  14. package/package.json +59 -0
package/dist/font-sizes.css ADDED
@@ -0,0 +1,141 @@
1
+ /* PIE Font Size System - Learnosity-compatible font scaling for K-12 assessments
2
+ *
3
+ * Based on Learnosity's font size accommodation feature which provides 4 preset sizes:
4
+ * - Normal (100% - default)
5
+ * - Large (125% - 1.25x scale)
6
+ * - Extra Large (150% - 1.5x scale)
7
+ * - Extra Extra Large (175% - 1.75x scale)
8
+ *
9
+ * All sizes meet WCAG 2.2 Level AA requirements for text sizing:
10
+ * - Users can scale text up to 200% without assistive technology
11
+ * - Text remains readable and functional at all scale levels
12
+ * - No horizontal scrolling required in scaled states
13
+ *
14
+ * Usage: Apply data-font-size attribute to document root or pie-player element
15
+ * Example: <html data-font-size="large">
16
+ *
17
+ * Implementation Note: Uses CSS custom property (--pie-font-scale) to scale all
18
+ * typography consistently. Base font sizes are defined in the PIE player components.
19
+ */
20
+
21
+ /* Default font size (100% - no scaling) */
22
+ :root {
23
+ --pie-font-scale: 1;
24
+ }
25
+
26
+ /* Normal (100% - explicit setting) */
27
+ [data-font-size="normal"] {
28
+ --pie-font-scale: 1;
29
+ }
30
+
31
+ /* Large (125%) - Learnosity "large" preset */
32
+ [data-font-size="large"] {
33
+ --pie-font-scale: 1.25;
34
+ }
35
+
36
+ /* Extra Large (150%) - Learnosity "xlarge" preset */
37
+ [data-font-size="xlarge"] {
38
+ --pie-font-scale: 1.5;
39
+ }
40
+
41
+ /* Extra Extra Large (175%) - Learnosity "xxlarge" preset */
42
+ [data-font-size="xxlarge"] {
43
+ --pie-font-scale: 1.75;
44
+ }
45
+
46
+ /* Apply font scaling to assessment content
47
+ * Target PIE player elements and assessment content
48
+ * Exclude tool UIs (calculator, graph, etc.) which should remain at normal size
49
+ *
50
+ * Using !important to override PIE's inline styles and component-specific styles
51
+ */
52
+
53
+ /* Apply to pie-player root element */
54
+ pie-player[data-font-size] {
55
+ font-size: calc(1rem * var(--pie-font-scale)) !important;
56
+ }
57
+
58
+ /* Apply to all text elements within pie-player - using inherit to cascade from root */
59
+ pie-player[data-font-size] *,
60
+ pie-player[data-font-size] p,
61
+ pie-player[data-font-size] span,
62
+ pie-player[data-font-size] div,
63
+ pie-player[data-font-size] li,
64
+ pie-player[data-font-size] label,
65
+ pie-player[data-font-size] input,
66
+ pie-player[data-font-size] textarea,
67
+ pie-player[data-font-size] select,
68
+ pie-player[data-font-size] button,
69
+ pie-player[data-font-size] h1,
70
+ pie-player[data-font-size] h2,
71
+ pie-player[data-font-size] h3,
72
+ pie-player[data-font-size] h4,
73
+ pie-player[data-font-size] h5,
74
+ pie-player[data-font-size] h6,
75
+ pie-player[data-font-size] td,
76
+ pie-player[data-font-size] th,
77
+ pie-player[data-font-size] option {
78
+ font-size: inherit !important;
79
+ }
80
+
81
+ /* Also apply to parent container if data-font-size is on document root */
82
+ [data-font-size] pie-player {
83
+ font-size: calc(1rem * var(--pie-font-scale)) !important;
84
+ }
85
+
86
+ [data-font-size] pie-player *,
87
+ [data-font-size] pie-player p,
88
+ [data-font-size] pie-player span,
89
+ [data-font-size] pie-player div,
90
+ [data-font-size] pie-player li,
91
+ [data-font-size] pie-player label,
92
+ [data-font-size] pie-player input,
93
+ [data-font-size] pie-player textarea,
94
+ [data-font-size] pie-player select,
95
+ [data-font-size] pie-player button,
96
+ [data-font-size] pie-player h1,
97
+ [data-font-size] pie-player h2,
98
+ [data-font-size] pie-player h3,
99
+ [data-font-size] pie-player h4,
100
+ [data-font-size] pie-player h5,
101
+ [data-font-size] pie-player h6,
102
+ [data-font-size] pie-player td,
103
+ [data-font-size] pie-player th,
104
+ [data-font-size] pie-player option {
105
+ font-size: inherit !important;
106
+ }
107
+
108
+ /* Preserve normal size for tool UIs and controls */
109
+ [data-font-size] .pie-tool-toolbar,
110
+ [data-font-size] .pie-tool-toolbar *,
111
+ [data-font-size] .pie-tool-calculator,
112
+ [data-font-size] .pie-tool-calculator *,
113
+ [data-font-size] .tool-settings-panel,
114
+ [data-font-size] .tool-settings-panel *,
115
+ [data-font-size] [class*="pie-tool-"],
116
+ [data-font-size] [class*="pie-tool-"] *,
117
+ [data-font-size] header,
118
+ [data-font-size] header *,
119
+ [data-font-size] footer,
120
+ [data-font-size] footer *,
121
+ [data-font-size] nav,
122
+ [data-font-size] nav *,
123
+ [data-font-size] button:not(.pie-button),
124
+ [data-font-size] .btn,
125
+ [data-font-size] .btn * {
126
+ font-size: 1rem !important;
127
+ }
128
+
129
+ /* Ensure proper line-height scaling for readability */
130
+ [data-font-size="large"] pie-player,
131
+ [data-font-size="xlarge"] pie-player,
132
+ [data-font-size="xxlarge"] pie-player {
133
+ line-height: 1.6;
134
+ }
135
+
136
+ /* Prevent layout issues with scaled text */
137
+ [data-font-size] pie-player {
138
+ overflow-wrap: break-word;
139
+ word-wrap: break-word;
140
+ hyphens: auto;
141
+ }
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { PieThemeElement, definePieTheme } from "./theme-element.js";
2
+ export { PieThemeElement, definePieTheme };
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAErE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import { PieThemeElement, definePieTheme } from "./theme-element.js";
2
+ export { PieThemeElement, definePieTheme };
3
+ definePieTheme();
4
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAErE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AAE3C,cAAc,EAAE,CAAC"}
package/dist/theme-element.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ type ThemeMode = "light" | "dark" | "auto";
2
+ type ThemeScope = "self" | "document";
3
+ type ThemeVariables = Record<string, string>;
4
+ declare const HTMLElementBase: {
5
+ new (): HTMLElement;
6
+ prototype: HTMLElement;
7
+ };
8
+ export declare class PieThemeElement extends HTMLElementBase {
9
+ static get observedAttributes(): string[];
10
+ private mediaQuery;
11
+ private readonly onMediaChange;
12
+ private previousKeys;
13
+ private variablesOverride;
14
+ get theme(): ThemeMode;
15
+ set theme(value: ThemeMode);
16
+ get scope(): ThemeScope;
17
+ set scope(value: ThemeScope);
18
+ get variables(): ThemeVariables;
19
+ set variables(value: ThemeVariables);
20
+ connectedCallback(): void;
21
+ disconnectedCallback(): void;
22
+ attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
23
+ protected getTarget(): HTMLElement;
24
+ protected applyTheme(): void;
25
+ private resolveDaisyVariables;
26
+ private resolveEffectiveTheme;
27
+ private clearPreviousKeys;
28
+ private setupAutoThemeListener;
29
+ }
30
+ export declare function definePieTheme(tagName?: string): void;
31
+ export {};
32
+ //# sourceMappingURL=theme-element.d.ts.map
package/dist/theme-element.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-element.d.ts","sourceRoot":"","sources":["../src/theme-element.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3C,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACtC,KAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE7C,QAAA,MAAM,eAAe;;;CAGN,CAAC;AAgJhB,qBAAa,eAAgB,SAAQ,eAAe;IACnD,MAAM,KAAK,kBAAkB,aAE5B;IAED,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA2B;IACzD,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,iBAAiB,CAAsB;IAE/C,IAAI,KAAK,IAAI,SAAS,CAGrB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,SAAS,EAEzB;IAED,IAAI,KAAK,IAAI,UAAU,CAGtB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,UAAU,EAE1B;IAED,IAAI,SAAS,IAAI,cAAc,CAE9B;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,cAAc,EAIlC;IAED,iBAAiB;IAQjB,oBAAoB;IAYpB,wBAAwB,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI;IAiBxB,SAAS,CAAC,SAAS,IAAI,WAAW;IAOlC,SAAS,CAAC,UAAU;IAyBpB,OAAO,CAAC,qBAAqB;IAoF7B,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,sBAAsB;CAe9B;AAED,wBAAgB,cAAc,CAAC,OAAO,SAAc,QAQnD"}
package/dist/theme-element.js ADDED
@@ -0,0 +1,332 @@
1
+ const HTMLElementBase = typeof HTMLElement === "undefined"
2
+ ? class {
3
+ }
4
+ : HTMLElement;
5
+ const LIGHT_THEME_VARS = {
6
+ "--pie-text": "black",
7
+ "--pie-disabled": "grey",
8
+ "--pie-disabled-secondary": "#ababab",
9
+ "--pie-correct": "#4caf50",
10
+ "--pie-correct-secondary": "#e8f5e9",
11
+ "--pie-correct-tertiary": "#0ea449",
12
+ "--pie-correct-icon": "#087d38",
13
+ "--pie-incorrect": "#ff9800",
14
+ "--pie-incorrect-secondary": "#ffebee",
15
+ "--pie-incorrect-icon": "#bf0d00",
16
+ "--pie-missing": "#d32f2f",
17
+ "--pie-missing-icon": "#6a78a1",
18
+ "--pie-primary": "#3f51b5",
19
+ "--pie-primary-light": "#9fa8da",
20
+ "--pie-primary-dark": "#283593",
21
+ "--pie-faded-primary": "#dcdafb",
22
+ "--pie-secondary": "#f50057",
23
+ "--pie-secondary-light": "#f48fb1",
24
+ "--pie-secondary-dark": "#880e4f",
25
+ "--pie-tertiary": "#146eb3",
26
+ "--pie-tertiary-light": "#d0e2f0",
27
+ "--pie-background": "rgba(255, 255, 255, 0)",
28
+ "--pie-background-dark": "#ecedf1",
29
+ "--pie-secondary-background": "rgba(241, 241, 241, 1)",
30
+ "--pie-dropdown-background": "#e0e1e6",
31
+ "--pie-border": "#9a9a9a",
32
+ "--pie-border-light": "#d1d1d1",
33
+ "--pie-border-dark": "#646464",
34
+ "--pie-border-gray": "#7e8494",
35
+ "--pie-black": "#000000",
36
+ "--pie-white": "#ffffff",
37
+ "--pie-focus-checked": "#bbdefb",
38
+ "--pie-focus-checked-border": "#1565c0",
39
+ "--pie-focus-unchecked": "#e0e0e0",
40
+ "--pie-focus-unchecked-border": "#757575",
41
+ "--pie-blue-grey-100": "#f3f5f7",
42
+ "--pie-blue-grey-300": "#c0c3cf",
43
+ "--pie-blue-grey-600": "#7e8494",
44
+ "--pie-blue-grey-900": "#152452",
45
+ "--pie-button-bg": "#ffffff",
46
+ "--pie-button-border": "#d1d5db",
47
+ "--pie-button-color": "#374151",
48
+ "--pie-button-hover-bg": "#f9fafb",
49
+ "--pie-button-hover-border": "#9ca3af",
50
+ "--pie-button-hover-color": "#111827",
51
+ "--pie-button-active-bg": "#f3f4f6",
52
+ "--pie-button-focus-outline": "#3b82f6",
53
+ };
54
+ const DARK_THEME_VARS = {
55
+ "--pie-text": "#ffffff",
56
+ "--pie-disabled": "#999999",
57
+ "--pie-disabled-secondary": "#777777",
58
+ "--pie-correct": "#00ff00",
59
+ "--pie-correct-secondary": "#003300",
60
+ "--pie-correct-tertiary": "#00cc00",
61
+ "--pie-correct-icon": "#00ff00",
62
+ "--pie-incorrect": "#ff3333",
63
+ "--pie-incorrect-secondary": "#330000",
64
+ "--pie-incorrect-icon": "#ff0000",
65
+ "--pie-missing": "#ff6666",
66
+ "--pie-missing-icon": "#6666ff",
67
+ "--pie-primary": "#ffff00",
68
+ "--pie-primary-light": "#ffff99",
69
+ "--pie-primary-dark": "#cccc00",
70
+ "--pie-faded-primary": "#666600",
71
+ "--pie-secondary": "#ff00ff",
72
+ "--pie-secondary-light": "#ff99ff",
73
+ "--pie-secondary-dark": "#cc00cc",
74
+ "--pie-tertiary": "#00ffff",
75
+ "--pie-tertiary-light": "#99ffff",
76
+ "--pie-background": "#000000",
77
+ "--pie-background-dark": "#1a1a1a",
78
+ "--pie-secondary-background": "#222222",
79
+ "--pie-dropdown-background": "#2a2a2a",
80
+ "--pie-border": "#ffffff",
81
+ "--pie-border-light": "#cccccc",
82
+ "--pie-border-dark": "#ffffff",
83
+ "--pie-border-gray": "#aaaaaa",
84
+ "--pie-black": "#ffffff",
85
+ "--pie-white": "#000000",
86
+ "--pie-focus-checked": "#ffff00",
87
+ "--pie-focus-checked-border": "#ffff00",
88
+ "--pie-focus-unchecked": "#666666",
89
+ "--pie-focus-unchecked-border": "#ffffff",
90
+ "--pie-blue-grey-100": "#2a2a2a",
91
+ "--pie-blue-grey-300": "#555555",
92
+ "--pie-blue-grey-600": "#999999",
93
+ "--pie-blue-grey-900": "#ffffff",
94
+ "--pie-button-bg": "#1f2937",
95
+ "--pie-button-border": "#4b5563",
96
+ "--pie-button-color": "#f9fafb",
97
+ "--pie-button-hover-bg": "#374151",
98
+ "--pie-button-hover-border": "#6b7280",
99
+ "--pie-button-hover-color": "#ffffff",
100
+ "--pie-button-active-bg": "#4b5563",
101
+ "--pie-button-focus-outline": "#93c5fd",
102
+ };
103
+ function isThemeMode(value) {
104
+ return value === "light" || value === "dark" || value === "auto";
105
+ }
106
+ function isThemeScope(value) {
107
+ return value === "self" || value === "document";
108
+ }
109
+ function parseVariableOverrides(value) {
110
+ if (!value) {
111
+ return {};
112
+ }
113
+ if (typeof value === "string") {
114
+ try {
115
+ return parseVariableOverrides(JSON.parse(value));
116
+ }
117
+ catch {
118
+ return {};
119
+ }
120
+ }
121
+ if (typeof value !== "object") {
122
+ return {};
123
+ }
124
+ const output = {};
125
+ for (const [key, rawValue] of Object.entries(value)) {
126
+ if (!key.startsWith("--")) {
127
+ continue;
128
+ }
129
+ if (typeof rawValue === "string") {
130
+ output[key] = rawValue;
131
+ }
132
+ else if (typeof rawValue === "number") {
133
+ output[key] = String(rawValue);
134
+ }
135
+ }
136
+ return output;
137
+ }
138
+ export class PieThemeElement extends HTMLElementBase {
139
+ static get observedAttributes() {
140
+ return ["theme", "scope", "variables"];
141
+ }
142
+ mediaQuery = null;
143
+ onMediaChange = () => this.applyTheme();
144
+ previousKeys = new Set();
145
+ variablesOverride = {};
146
+ get theme() {
147
+ const value = this.getAttribute("theme");
148
+ return isThemeMode(value) ? value : "light";
149
+ }
150
+ set theme(value) {
151
+ this.setAttribute("theme", value);
152
+ }
153
+ get scope() {
154
+ const value = this.getAttribute("scope");
155
+ return isThemeScope(value) ? value : "self";
156
+ }
157
+ set scope(value) {
158
+ this.setAttribute("scope", value);
159
+ }
160
+ get variables() {
161
+ return { ...this.variablesOverride };
162
+ }
163
+ set variables(value) {
164
+ this.variablesOverride = parseVariableOverrides(value);
165
+ this.setAttribute("variables", JSON.stringify(this.variablesOverride));
166
+ this.applyTheme();
167
+ }
168
+ connectedCallback() {
169
+ if (!this.style.display) {
170
+ this.style.display = "contents";
171
+ }
172
+ this.setupAutoThemeListener();
173
+ this.applyTheme();
174
+ }
175
+ disconnectedCallback() {
176
+ if (this.mediaQuery) {
177
+ this.mediaQuery.removeEventListener("change", this.onMediaChange);
178
+ }
179
+ this.mediaQuery = null;
180
+ if (this.scope === "self") {
181
+ this.clearPreviousKeys(this);
182
+ this.removeAttribute("data-theme");
183
+ }
184
+ }
185
+ attributeChangedCallback(name, oldValue, newValue) {
186
+ if (oldValue === newValue) {
187
+ return;
188
+ }
189
+ if (name === "variables") {
190
+ this.variablesOverride = parseVariableOverrides(newValue);
191
+ }
192
+ if (name === "theme") {
193
+ this.setupAutoThemeListener();
194
+ }
195
+ this.applyTheme();
196
+ }
197
+ getTarget() {
198
+ if (this.scope === "document") {
199
+ return document.documentElement;
200
+ }
201
+ return this;
202
+ }
203
+ applyTheme() {
204
+ if (typeof document === "undefined" || typeof window === "undefined") {
205
+ return;
206
+ }
207
+ const effectiveTheme = this.resolveEffectiveTheme();
208
+ const target = this.getTarget();
209
+ target.setAttribute("data-theme", effectiveTheme);
210
+ const themeVars = effectiveTheme === "dark" ? DARK_THEME_VARS : LIGHT_THEME_VARS;
211
+ const daisyVars = this.resolveDaisyVariables(target);
212
+ const vars = {
213
+ ...themeVars,
214
+ ...daisyVars,
215
+ ...this.variablesOverride,
216
+ };
217
+ this.clearPreviousKeys(target);
218
+ for (const [key, value] of Object.entries(vars)) {
219
+ target.style.setProperty(key, value);
220
+ }
221
+ this.previousKeys = new Set(Object.keys(vars));
222
+ }
223
+ resolveDaisyVariables(target) {
224
+ const resolve = (el) => {
225
+ const computed = getComputedStyle(el);
226
+ const value = (key) => computed.getPropertyValue(key).trim() || undefined;
227
+ const base100 = value("--color-base-100");
228
+ const base200 = value("--color-base-200");
229
+ const base300 = value("--color-base-300");
230
+ const baseContent = value("--color-base-content");
231
+ const primary = value("--color-primary");
232
+ const secondary = value("--color-secondary");
233
+ const accent = value("--color-accent");
234
+ const neutral = value("--color-neutral");
235
+ const neutralContent = value("--color-neutral-content");
236
+ const success = value("--color-success");
237
+ const successContent = value("--color-success-content");
238
+ const warning = value("--color-warning");
239
+ const error = value("--color-error");
240
+ const errorContent = value("--color-error-content");
241
+ if (!base100 && !baseContent && !primary) {
242
+ return null;
243
+ }
244
+ return Object.fromEntries(Object.entries({
245
+ "--pie-background": base100,
246
+ "--pie-background-dark": base200,
247
+ "--pie-secondary-background": base200,
248
+ "--pie-dropdown-background": base300,
249
+ "--pie-text": baseContent,
250
+ "--pie-primary": primary,
251
+ "--pie-primary-light": primary,
252
+ "--pie-primary-dark": primary,
253
+ "--pie-secondary": secondary,
254
+ "--pie-secondary-light": secondary,
255
+ "--pie-secondary-dark": secondary,
256
+ "--pie-tertiary": accent,
257
+ "--pie-tertiary-light": accent,
258
+ "--pie-border": base300,
259
+ "--pie-border-light": base200,
260
+ "--pie-border-dark": neutral,
261
+ "--pie-border-gray": base300,
262
+ "--pie-correct": success,
263
+ "--pie-correct-secondary": successContent,
264
+ "--pie-correct-tertiary": success,
265
+ "--pie-correct-icon": success,
266
+ "--pie-incorrect": error,
267
+ "--pie-incorrect-secondary": errorContent,
268
+ "--pie-incorrect-icon": error,
269
+ "--pie-missing": warning,
270
+ "--pie-missing-icon": warning,
271
+ "--pie-disabled": base300,
272
+ "--pie-disabled-secondary": base200,
273
+ "--pie-focus-checked": primary,
274
+ "--pie-focus-checked-border": primary,
275
+ "--pie-focus-unchecked": base200,
276
+ "--pie-focus-unchecked-border": base300,
277
+ "--pie-blue-grey-100": base100,
278
+ "--pie-blue-grey-300": base200,
279
+ "--pie-blue-grey-600": base300,
280
+ "--pie-blue-grey-900": baseContent,
281
+ "--pie-black": neutralContent,
282
+ "--pie-white": base100,
283
+ "--pie-button-bg": base100,
284
+ "--pie-button-border": base300,
285
+ "--pie-button-color": baseContent,
286
+ "--pie-button-hover-bg": base200,
287
+ "--pie-button-hover-border": base300,
288
+ "--pie-button-hover-color": baseContent,
289
+ "--pie-button-active-bg": base300,
290
+ "--pie-button-focus-outline": primary,
291
+ }).filter((entry) => Boolean(entry[1])));
292
+ };
293
+ return (resolve(target) ??
294
+ (target !== document.documentElement
295
+ ? (resolve(document.documentElement) ?? {})
296
+ : {}));
297
+ }
298
+ resolveEffectiveTheme() {
299
+ if (this.theme === "auto") {
300
+ const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
301
+ return prefersDark ? "dark" : "light";
302
+ }
303
+ return this.theme;
304
+ }
305
+ clearPreviousKeys(target) {
306
+ for (const key of this.previousKeys) {
307
+ target.style.removeProperty(key);
308
+ }
309
+ }
310
+ setupAutoThemeListener() {
311
+ if (typeof window === "undefined") {
312
+ return;
313
+ }
314
+ if (this.mediaQuery) {
315
+ this.mediaQuery.removeEventListener("change", this.onMediaChange);
316
+ this.mediaQuery = null;
317
+ }
318
+ if (this.theme === "auto") {
319
+ this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
320
+ this.mediaQuery.addEventListener("change", this.onMediaChange);
321
+ }
322
+ }
323
+ }
324
+ export function definePieTheme(tagName = "pie-theme") {
325
+ if (typeof customElements === "undefined") {
326
+ return;
327
+ }
328
+ if (!customElements.get(tagName)) {
329
+ customElements.define(tagName, PieThemeElement);
330
+ }
331
+ }
332
+ //# sourceMappingURL=theme-element.js.map
package/dist/theme-element.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-element.js","sourceRoot":"","sources":["../src/theme-element.ts"],"names":[],"mappings":"AAIA,MAAM,eAAe,GACpB,OAAO,WAAW,KAAK,WAAW;IACjC,CAAC,CAAE;KAA0C;IAC7C,CAAC,CAAC,WAAW,CAAC;AAEhB,MAAM,gBAAgB,GAAmB;IACxC,YAAY,EAAE,OAAO;IACrB,gBAAgB,EAAE,MAAM;IACxB,0BAA0B,EAAE,SAAS;IACrC,eAAe,EAAE,SAAS;IAC1B,yBAAyB,EAAE,SAAS;IACpC,wBAAwB,EAAE,SAAS;IACnC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,2BAA2B,EAAE,SAAS;IACtC,sBAAsB,EAAE,SAAS;IACjC,eAAe,EAAE,SAAS;IAC1B,oBAAoB,EAAE,SAAS;IAC/B,eAAe,EAAE,SAAS;IAC1B,qBAAqB,EAAE,SAAS;IAChC,oBAAoB,EAAE,SAAS;IAC/B,qBAAqB,EAAE,SAAS;IAChC,iBAAiB,EAAE,SAAS;IAC5B,uBAAuB,EAAE,SAAS;IAClC,sBAAsB,EAAE,SAAS;IACjC,gBAAgB,EAAE,SAAS;IAC3B,sBAAsB,EAAE,SAAS;IACjC,kBAAkB,EAAE,wBAAwB;IAC5C,uBAAuB,EAAE,SAAS;IAClC,4BAA4B,EAAE,wBAAwB;IACtD,2BAA2B,EAAE,SAAS;IACtC,cAAc,EAAE,SAAS;IACzB,oBAAoB,EAAE,SAAS;IAC/B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,qBAAqB,EAAE,SAAS;IAChC,4BAA4B,EAAE,SAAS;IACvC,uBAAuB,EAAE,SAAS;IAClC,8BAA8B,EAAE,SAAS;IACzC,qBAAqB,EAAE,SAAS;IAChC,qBAAqB,EAAE,SAAS;IAChC,qBAAqB,EAAE,SAAS;IAChC,qBAAqB,EAAE,SAAS;IAChC,iBAAiB,EAAE,SAAS;IAC5B,qBAAqB,EAAE,SAAS;IAChC,oBAAoB,EAAE,SAAS;IAC/B,uBAAuB,EAAE,SAAS;IAClC,2BAA2B,EAAE,SAAS;IACtC,0BAA0B,EAAE,SAAS;IACrC,wBAAwB,EAAE,SAAS;IACnC,4BAA4B,EAAE,SAAS;CACvC,CAAC;AAEF,MAAM,eAAe,GAAmB;IACvC,YAAY,EAAE,SAAS;IACvB,gBAAgB,EAAE,SAAS;IAC3B,0BAA0B,EAAE,SAAS;IACrC,eAAe,EAAE,SAAS;IAC1B,yBAAyB,EAAE,SAAS;IACpC,wBAAwB,EAAE,SAAS;IACnC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,2BAA2B,EAAE,SAAS;IACtC,sBAAsB,EAAE,SAAS;IACjC,eAAe,EAAE,SAAS;IAC1B,oBAAoB,EAAE,SAAS;IAC/B,eAAe,EAAE,SAAS;IAC1B,qBAAqB,EAAE,SAAS;IAChC,oBAAoB,EAAE,SAAS;IAC/B,qBAAqB,EAAE,SAAS;IAChC,iBAAiB,EAAE,SAAS;IAC5B,uBAAuB,EAAE,SAAS;IAClC,sBAAsB,EAAE,SAAS;IACjC,gBAAgB,EAAE,SAAS;IAC3B,sBAAsB,EAAE,SAAS;IACjC,kBAAkB,EAAE,SAAS;IAC7B,uBAAuB,EAAE,SAAS;IAClC,4BAA4B,EAAE,SAAS;IACvC,2BAA2B,EAAE,SAAS;IACtC,cAAc,EAAE,SAAS;IACzB,oBAAoB,EAAE,SAAS;IAC/B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,qBAAqB,EAAE,SAAS;IAChC,4BAA4B,EAAE,SAAS;IACvC,uBAAuB,EAAE,SAAS;IAClC,8BAA8B,EAAE,SAAS;IACzC,qBAAqB,EAAE,SAAS;IAChC,qBAAqB,EAAE,SAAS;IAChC,qBAAqB,EAAE,SAAS;IAChC,qBAAqB,EAAE,SAAS;IAChC,iBAAiB,EAAE,SAAS;IAC5B,qBAAqB,EAAE,SAAS;IAChC,oBAAoB,EAAE,SAAS;IAC/B,uBAAuB,EAAE,SAAS;IAClC,2BAA2B,EAAE,SAAS;IACtC,0BAA0B,EAAE,SAAS;IACrC,wBAAwB,EAAE,SAAS;IACnC,4BAA4B,EAAE,SAAS;CACvC,CAAC;AAEF,SAAS,WAAW,CAAC,KAAoB;IACxC,OAAO,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,MAAM,CAAC;AAClE,CAAC;AAED,SAAS,YAAY,CAAC,KAAoB;IACzC,OAAO,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,UAAU,CAAC;AACjD,CAAC;AAED,SAAS,sBAAsB,CAAC,KAAc;IAC7C,IAAI,CAAC,KAAK,EAAE,CAAC;QACZ,OAAO,EAAE,CAAC;IACX,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC/B,IAAI,CAAC;YACJ,OAAO,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAY,CAAC,CAAC;QAC7D,CAAC;QAAC,MAAM,CAAC;YACR,OAAO,EAAE,CAAC;QACX,CAAC;IACF,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO,EAAE,CAAC;IACX,CAAC;IAED,MAAM,MAAM,GAAmB,EAAE,CAAC;IAClC,KAAK,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,OAAO,CAC3C,KAAgC,CAChC,EAAE,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3B,SAAS;QACV,CAAC;QAED,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAClC,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;QACxB,CAAC;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACzC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC;IACF,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC;AAED,MAAM,OAAO,eAAgB,SAAQ,eAAe;IACnD,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC;IACxC,CAAC;IAEO,UAAU,GAA0B,IAAI,CAAC;IAChC,aAAa,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;IACjD,YAAY,GAAG,IAAI,GAAG,EAAU,CAAC;IACjC,iBAAiB,GAAmB,EAAE,CAAC;IAE/C,IAAI,KAAK;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzC,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7C,CAAC;IAED,IAAI,KAAK,CAAC,KAAgB;QACzB,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,KAAK;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzC,OAAO,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7C,CAAC;IAED,IAAI,KAAK,CAAC,KAAiB;QAC1B,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACtC,CAAC;IAED,IAAI,SAAS,CAAC,KAAqB;QAClC,IAAI,CAAC,iBAAiB,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;QACvD,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;QACvE,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC;QACjC,CAAC;QACD,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,oBAAoB;QACnB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACnE,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAEvB,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACpC,CAAC;IACF,CAAC;IAED,wBAAwB,CACvB,IAAY,EACZ,QAAuB,EACvB,QAAuB;QAEvB,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC3B,OAAO;QACR,CAAC;QAED,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;YAC1B,IAAI,CAAC,iBAAiB,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;QAC3D,CAAC;QAED,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACtB,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC/B,CAAC;QAED,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAES,SAAS;QAClB,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YAC/B,OAAO,QAAQ,CAAC,eAAe,CAAC;QACjC,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC;IAES,UAAU;QACnB,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YACtE,OAAO;QACR,CAAC;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACpD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;QAElD,MAAM,SAAS,GACd,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;QAChE,MAAM,SAAS,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;QACrD,MAAM,IAAI,GAAG;YACZ,GAAG,SAAS;YACZ,GAAG,SAAS;YACZ,GAAG,IAAI,CAAC,iBAAiB;SACzB,CAAC;QAEF,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC/B,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACjD,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACtC,CAAC;QACD,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC;IAEO,qBAAqB,CAAC,MAAmB;QAChD,MAAM,OAAO,GAAG,CAAC,EAAe,EAAE,EAAE;YACnC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;YACtC,MAAM,KAAK,GAAG,CAAC,GAAW,EAAE,EAAE,CAC7B,QAAQ,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,SAAS,CAAC;YACpD,MAAM,OAAO,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC;YAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC;YAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC;YAC1C,MAAM,WAAW,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC;YAClD,MAAM,OAAO,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;YACzC,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;YAC7C,MAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;YACvC,MAAM,OAAO,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;YACzC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACxD,MAAM,OAAO,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;YACzC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACxD,MAAM,OAAO,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;YACzC,MAAM,KAAK,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;YACrC,MAAM,YAAY,GAAG,KAAK,CAAC,uBAAuB,CAAC,CAAC;YAEpD,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC1C,OAAO,IAAI,CAAC;YACb,CAAC;YAED,OAAO,MAAM,CAAC,WAAW,CACxB,MAAM,CAAC,OAAO,CAAC;gBACd,kBAAkB,EAAE,OAAO;gBAC3B,uBAAuB,EAAE,OAAO;gBAChC,4BAA4B,EAAE,OAAO;gBACrC,2BAA2B,EAAE,OAAO;gBACpC,YAAY,EAAE,WAAW;gBACzB,eAAe,EAAE,OAAO;gBACxB,qBAAqB,EAAE,OAAO;gBAC9B,oBAAoB,EAAE,OAAO;gBAC7B,iBAAiB,EAAE,SAAS;gBAC5B,uBAAuB,EAAE,SAAS;gBAClC,sBAAsB,EAAE,SAAS;gBACjC,gBAAgB,EAAE,MAAM;gBACxB,sBAAsB,EAAE,MAAM;gBAC9B,cAAc,EAAE,OAAO;gBACvB,oBAAoB,EAAE,OAAO;gBAC7B,mBAAmB,EAAE,OAAO;gBAC5B,mBAAmB,EAAE,OAAO;gBAC5B,eAAe,EAAE,OAAO;gBACxB,yBAAyB,EAAE,cAAc;gBACzC,wBAAwB,EAAE,OAAO;gBACjC,oBAAoB,EAAE,OAAO;gBAC7B,iBAAiB,EAAE,KAAK;gBACxB,2BAA2B,EAAE,YAAY;gBACzC,sBAAsB,EAAE,KAAK;gBAC7B,eAAe,EAAE,OAAO;gBACxB,oBAAoB,EAAE,OAAO;gBAC7B,gBAAgB,EAAE,OAAO;gBACzB,0BAA0B,EAAE,OAAO;gBACnC,qBAAqB,EAAE,OAAO;gBAC9B,4BAA4B,EAAE,OAAO;gBACrC,uBAAuB,EAAE,OAAO;gBAChC,8BAA8B,EAAE,OAAO;gBACvC,qBAAqB,EAAE,OAAO;gBAC9B,qBAAqB,EAAE,OAAO;gBAC9B,qBAAqB,EAAE,OAAO;gBAC9B,qBAAqB,EAAE,WAAW;gBAClC,aAAa,EAAE,cAAc;gBAC7B,aAAa,EAAE,OAAO;gBACtB,iBAAiB,EAAE,OAAO;gBAC1B,qBAAqB,EAAE,OAAO;gBAC9B,oBAAoB,EAAE,WAAW;gBACjC,uBAAuB,EAAE,OAAO;gBAChC,2BAA2B,EAAE,OAAO;gBACpC,0BAA0B,EAAE,WAAW;gBACvC,wBAAwB,EAAE,OAAO;gBACjC,4BAA4B,EAAE,OAAO;aACrC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAA6B,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAChD,CAAC;QACrB,CAAC,CAAC;QAEF,OAAO,CACN,OAAO,CAAC,MAAM,CAAC;YACf,CAAC,MAAM,KAAK,QAAQ,CAAC,eAAe;gBACnC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;gBAC3C,CAAC,CAAC,EAAE,CAAC,CACN,CAAC;IACH,CAAC;IAEO,qBAAqB;QAC5B,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,CAAC;YAC3B,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CACpC,8BAA8B,CAC9B,CAAC,OAAO,CAAC;YACV,OAAO,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACvC,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC;IACnB,CAAC;IAEO,iBAAiB,CAAC,MAAmB;QAC5C,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACrC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;IACF,CAAC;IAEO,sBAAsB;QAC7B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YACnC,OAAO;QACR,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YAClE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACxB,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;YACpE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAChE,CAAC;IACF,CAAC;CACD;AAED,MAAM,UAAU,cAAc,CAAC,OAAO,GAAG,WAAW;IACnD,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE,CAAC;QAC3C,OAAO;IACR,CAAC;IAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QAClC,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACjD,CAAC;AACF,CAAC"}
package/dist/tokens.css ADDED
@@ -0,0 +1,97 @@
1
+ :root,
2
+ [data-theme="light"],
3
+ pie-theme[theme="light"] {
4
+ --pie-text: black;
5
+ --pie-disabled: grey;
6
+ --pie-disabled-secondary: #ababab;
7
+ --pie-correct: #4caf50;
8
+ --pie-correct-secondary: #e8f5e9;
9
+ --pie-correct-tertiary: #0ea449;
10
+ --pie-correct-icon: #087d38;
11
+ --pie-incorrect: #ff9800;
12
+ --pie-incorrect-secondary: #ffebee;
13
+ --pie-incorrect-icon: #bf0d00;
14
+ --pie-missing: #d32f2f;
15
+ --pie-missing-icon: #6a78a1;
16
+ --pie-primary: #3f51b5;
17
+ --pie-primary-light: #9fa8da;
18
+ --pie-primary-dark: #283593;
19
+ --pie-faded-primary: #dcdafb;
20
+ --pie-secondary: #f50057;
21
+ --pie-secondary-light: #f48fb1;
22
+ --pie-secondary-dark: #880e4f;
23
+ --pie-tertiary: #146eb3;
24
+ --pie-tertiary-light: #d0e2f0;
25
+ --pie-background: rgba(255, 255, 255, 0);
26
+ --pie-background-dark: #ecedf1;
27
+ --pie-secondary-background: rgba(241, 241, 241, 1);
28
+ --pie-dropdown-background: #e0e1e6;
29
+ --pie-border: #9a9a9a;
30
+ --pie-border-light: #d1d1d1;
31
+ --pie-border-dark: #646464;
32
+ --pie-border-gray: #7e8494;
33
+ --pie-black: #000000;
34
+ --pie-white: #ffffff;
35
+ --pie-focus-checked: #bbdefb;
36
+ --pie-focus-checked-border: #1565c0;
37
+ --pie-focus-unchecked: #e0e0e0;
38
+ --pie-focus-unchecked-border: #757575;
39
+ --pie-blue-grey-100: #f3f5f7;
40
+ --pie-blue-grey-300: #c0c3cf;
41
+ --pie-blue-grey-600: #7e8494;
42
+ --pie-blue-grey-900: #152452;
43
+ --pie-font-scale: 1;
44
+
45
+ /* Toolkit/tool primitives */
46
+ --pie-button-bg: #ffffff;
47
+ --pie-button-border: #d1d5db;
48
+ --pie-button-color: #374151;
49
+ --pie-button-hover-bg: #f9fafb;
50
+ --pie-button-hover-border: #9ca3af;
51
+ --pie-button-hover-color: #111827;
52
+ --pie-button-active-bg: #f3f4f6;
53
+ --pie-button-focus-outline: #3b82f6;
54
+ }
55
+
56
+ [data-theme="dark"],
57
+ pie-theme[theme="dark"] {
58
+ --pie-text: #ffffff;
59
+ --pie-disabled: #999999;
60
+ --pie-disabled-secondary: #777777;
61
+ --pie-correct: #00ff00;
62
+ --pie-correct-secondary: #003300;
63
+ --pie-correct-tertiary: #00cc00;
64
+ --pie-correct-icon: #00ff00;
65
+ --pie-incorrect: #ff3333;
66
+ --pie-incorrect-secondary: #330000;
67
+ --pie-incorrect-icon: #ff0000;
68
+ --pie-missing: #ff6666;
69
+ --pie-missing-icon: #6666ff;
70
+ --pie-primary: #ffff00;
71
+ --pie-primary-light: #ffff99;
72
+ --pie-primary-dark: #cccc00;
73
+ --pie-faded-primary: #666600;
74
+ --pie-secondary: #ff00ff;
75
+ --pie-secondary-light: #ff99ff;
76
+ --pie-secondary-dark: #cc00cc;
77
+ --pie-tertiary: #00ffff;
78
+ --pie-tertiary-light: #99ffff;
79
+ --pie-background: #000000;
80
+ --pie-background-dark: #1a1a1a;
81
+ --pie-secondary-background: #222222;
82
+ --pie-dropdown-background: #2a2a2a;
83
+ --pie-border: #ffffff;
84
+ --pie-border-light: #cccccc;
85
+ --pie-border-dark: #ffffff;
86
+ --pie-border-gray: #aaaaaa;
87
+ --pie-black: #ffffff;
88
+ --pie-white: #000000;
89
+ --pie-focus-checked: #ffff00;
90
+ --pie-focus-checked-border: #ffff00;
91
+ --pie-focus-unchecked: #666666;
92
+ --pie-focus-unchecked-border: #ffffff;
93
+ --pie-blue-grey-100: #2a2a2a;
94
+ --pie-blue-grey-300: #555555;
95
+ --pie-blue-grey-600: #999999;
96
+ --pie-blue-grey-900: #ffffff;
97
+ }