@pie-players/pie-theme 0.3.64 → 0.3.66

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 (29) hide show
  1. package/README.md +165 -18
  2. package/dist/color-schemes.css +386 -441
  3. package/dist/color-schemes.d.ts +12 -21
  4. package/dist/color-schemes.js +507 -385
  5. package/dist/components.css +216 -66
  6. package/dist/contrast.d.ts +67 -0
  7. package/dist/contrast.js +151 -0
  8. package/dist/daisyui-mapping.d.ts +58 -0
  9. package/dist/daisyui-mapping.js +168 -0
  10. package/dist/index.d.ts +6 -4
  11. package/dist/index.js +4 -3
  12. package/dist/providers.d.ts +16 -0
  13. package/dist/providers.js +68 -91
  14. package/dist/scheme-participation.d.ts +88 -0
  15. package/dist/scheme-participation.js +89 -0
  16. package/dist/theme-css.d.ts +5 -0
  17. package/dist/theme-css.js +26 -0
  18. package/dist/theme-definitions.d.ts +21 -0
  19. package/dist/theme-definitions.js +1081 -0
  20. package/dist/theme-element.d.ts +5 -0
  21. package/dist/theme-element.js +154 -36
  22. package/dist/theme-types.d.ts +54 -0
  23. package/dist/token-registry-types.d.ts +57 -0
  24. package/dist/token-registry-types.js +15 -0
  25. package/dist/token-registry.json +1311 -0
  26. package/dist/tokens.css +84 -76
  27. package/package.json +8 -4
  28. package/dist/theme-defaults.d.ts +0 -3
  29. package/dist/theme-defaults.js +0 -100
package/dist/tokens.css CHANGED
@@ -1,108 +1,116 @@
1
+ /* Generated by @pie-players/pie-theme. Run `bun run generate:css`; do not edit. */
2
+
1
3
  :root,
2
4
  [data-theme="light"],
3
- pie-theme[theme="light"] {
4
- --pie-text: black;
5
+ :where(pie-theme[theme="light"]) {
6
+ --pie-annotation-underline: #4221d5;
7
+ --pie-annotation-underline-dark: #9c89ec;
8
+ --pie-background: rgba(255, 255, 255, 0);
9
+ --pie-background-dark: #ecedf1;
10
+ --pie-black: #000000;
11
+ --pie-blue-grey-100: #f3f5f7;
12
+ --pie-blue-grey-300: #c0c3cf;
13
+ --pie-blue-grey-600: #7e8494;
14
+ --pie-blue-grey-900: #152452;
15
+ --pie-border: #8f8f8f;
16
+ --pie-border-dark: #646464;
17
+ --pie-border-gray: #7e8494;
18
+ --pie-border-light: #d1d1d1;
19
+ --pie-button-active-bg: #f3f4f6;
20
+ --pie-button-bg: #ffffff;
21
+ --pie-button-border: #8f8f8f;
22
+ --pie-button-color: #374151;
23
+ --pie-button-focus-outline: #3b82f6;
24
+ --pie-button-hover-bg: #f9fafb;
25
+ --pie-button-hover-border: #8b919c;
26
+ --pie-button-hover-color: #111827;
27
+ --pie-content-emphasis: #b00000;
28
+ --pie-correct: #208537;
29
+ --pie-correct-icon: #087d38;
30
+ --pie-correct-secondary: #e8f5e9;
31
+ --pie-correct-tertiary: #087d38;
5
32
  --pie-disabled: grey;
6
33
  --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;
34
+ --pie-dropdown-background: #e0e1e6;
35
+ --pie-faded-primary: #dcdafb;
36
+ --pie-fixed-hue-collapse: 0%;
37
+ --pie-focus-checked: #bbdefb;
38
+ --pie-focus-checked-border: #1565c0;
39
+ --pie-focus-unchecked: #e0e0e0;
40
+ --pie-focus-unchecked-border: #757575;
41
+ --pie-font-scale: 1;
42
+ --pie-incorrect: #a65f00;
13
43
  --pie-incorrect-icon: #bf0d00;
44
+ --pie-incorrect-secondary: #ffebee;
14
45
  --pie-missing: #d32f2f;
15
46
  --pie-missing-icon: #6a78a1;
16
47
  --pie-primary: #3f51b5;
17
- --pie-primary-light: #9fa8da;
18
48
  --pie-primary-dark: #283593;
19
- --pie-faded-primary: #dcdafb;
49
+ --pie-primary-light: #9fa8da;
20
50
  --pie-secondary: #f50057;
21
- --pie-secondary-light: #f48fb1;
51
+ --pie-secondary-background: rgba(241, 241, 241, 1);
22
52
  --pie-secondary-dark: #880e4f;
53
+ --pie-secondary-light: #f48fb1;
23
54
  --pie-tertiary: #146eb3;
24
55
  --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;
56
+ --pie-text: black;
57
+ --pie-tool-annotation-toolbar-border: #5c5c5c;
34
58
  --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
59
  }
55
60
 
56
61
  [data-theme="dark"],
57
- pie-theme[theme="dark"] {
58
- --pie-text: #ffffff;
59
- --pie-disabled: #999999;
60
- --pie-disabled-secondary: #777777;
62
+ :where(pie-theme[theme="dark"]) {
63
+ --pie-annotation-underline: #9c89ec;
64
+ --pie-annotation-underline-dark: #9c89ec;
65
+ --pie-background: #000000;
66
+ --pie-background-dark: #1a1a1a;
67
+ --pie-black: #ffffff;
68
+ --pie-blue-grey-100: #2a2a2a;
69
+ --pie-blue-grey-300: #555555;
70
+ --pie-blue-grey-600: #999999;
71
+ --pie-blue-grey-900: #ffffff;
72
+ --pie-border: #ffffff;
73
+ --pie-border-dark: #ffffff;
74
+ --pie-border-gray: #aaaaaa;
75
+ --pie-border-light: #cccccc;
76
+ --pie-button-active-bg: #4b5563;
77
+ --pie-button-bg: #1f2937;
78
+ --pie-button-border: #535e6d;
79
+ --pie-button-color: #f9fafb;
80
+ --pie-button-focus-outline: #93c5fd;
81
+ --pie-button-hover-bg: #374151;
82
+ --pie-button-hover-border: #6b7280;
83
+ --pie-button-hover-color: #ffffff;
84
+ --pie-content-emphasis: #ff6666;
61
85
  --pie-correct: #00ff00;
86
+ --pie-correct-icon: #00ff00;
62
87
  --pie-correct-secondary: #003300;
63
88
  --pie-correct-tertiary: #00cc00;
64
- --pie-correct-icon: #00ff00;
89
+ --pie-disabled: #999999;
90
+ --pie-disabled-secondary: #777777;
91
+ --pie-dropdown-background: #2a2a2a;
92
+ --pie-faded-primary: #666600;
93
+ --pie-fixed-hue-collapse: 0%;
94
+ --pie-focus-checked: #ffff00;
95
+ --pie-focus-checked-border: #ffff00;
96
+ --pie-focus-unchecked: #666666;
97
+ --pie-focus-unchecked-border: #ffffff;
98
+ --pie-font-scale: 1;
65
99
  --pie-incorrect: #ff3333;
66
- --pie-incorrect-secondary: #330000;
67
100
  --pie-incorrect-icon: #ff0000;
101
+ --pie-incorrect-secondary: #330000;
68
102
  --pie-missing: #ff6666;
69
103
  --pie-missing-icon: #6666ff;
70
104
  --pie-primary: #ffff00;
71
- --pie-primary-light: #ffff99;
72
105
  --pie-primary-dark: #cccc00;
73
- --pie-faded-primary: #666600;
106
+ --pie-primary-light: #ffff99;
74
107
  --pie-secondary: #ff00ff;
75
- --pie-secondary-light: #ff99ff;
108
+ --pie-secondary-background: #222222;
76
109
  --pie-secondary-dark: #cc00cc;
110
+ --pie-secondary-light: #ff99ff;
77
111
  --pie-tertiary: #00ffff;
78
112
  --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;
113
+ --pie-text: #ffffff;
114
+ --pie-tool-annotation-toolbar-border: #949494;
88
115
  --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
- --pie-font-scale: 1;
98
-
99
- /* Toolkit/tool primitives */
100
- --pie-button-bg: #1f2937;
101
- --pie-button-border: #4b5563;
102
- --pie-button-color: #f9fafb;
103
- --pie-button-hover-bg: #374151;
104
- --pie-button-hover-border: #6b7280;
105
- --pie-button-hover-color: #ffffff;
106
- --pie-button-active-bg: #4b5563;
107
- --pie-button-focus-outline: #93c5fd;
108
116
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-players/pie-theme",
3
- "version": "0.3.64",
3
+ "version": "0.3.66",
4
4
  "type": "module",
5
5
  "description": "Shared PIE theme tokens, css variables, and theme custom element",
6
6
  "license": "MIT",
@@ -25,6 +25,7 @@
25
25
  "types": "./dist/theme-element.d.ts",
26
26
  "import": "./dist/theme-element.js"
27
27
  },
28
+ "./token-registry.json": "./dist/token-registry.json",
28
29
  "./tokens.css": "./dist/tokens.css",
29
30
  "./color-schemes.css": "./dist/color-schemes.css",
30
31
  "./font-sizes.css": "./dist/font-sizes.css",
@@ -35,15 +36,18 @@
35
36
  "README.md"
36
37
  ],
37
38
  "scripts": {
38
- "build": "tsc -p tsconfig.json && cp src/*.css dist/",
39
- "dev": "tsc -p tsconfig.json --watch",
39
+ "build": "bun run check:generated-css && tsc -p tsconfig.json && cp src/*.css dist/ && cp src/token-registry.json dist/",
40
+ "dev": "bun ./scripts/dev-theme.ts",
41
+ "generate:css": "bun ./scripts/generate-theme-css.ts --write",
42
+ "check:generated-css": "bun ./scripts/generate-theme-css.ts --check",
40
43
  "typecheck": "tsc -p tsconfig.json --noEmit",
41
44
  "lint": "biome check .",
42
45
  "check": "tsc -p tsconfig.json --noEmit",
43
46
  "test": "bun test --dom tests"
44
47
  },
45
48
  "devDependencies": {
46
- "@biomejs/biome": "^2.5.6",
49
+ "@biomejs/biome": "^2.5.7",
50
+ "@happy-dom/global-registrator": "^20.11.1",
47
51
  "typescript": "^5.9.3"
48
52
  },
49
53
  "homepage": "https://github.com/pie-framework/pie-players/tree/master/packages/theme#readme",
package/dist/theme-defaults.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import type { ThemeVariables } from "./theme-types.js";
2
- export declare const LIGHT_THEME_VARS: ThemeVariables;
3
- export declare const DARK_THEME_VARS: ThemeVariables;
package/dist/theme-defaults.js DELETED
@@ -1,100 +0,0 @@
1
- export const LIGHT_THEME_VARS = {
2
- "--pie-text": "black",
3
- "--pie-disabled": "grey",
4
- "--pie-disabled-secondary": "#ababab",
5
- "--pie-correct": "#4caf50",
6
- "--pie-correct-secondary": "#e8f5e9",
7
- "--pie-correct-tertiary": "#0ea449",
8
- "--pie-correct-icon": "#087d38",
9
- "--pie-incorrect": "#ff9800",
10
- "--pie-incorrect-secondary": "#ffebee",
11
- "--pie-incorrect-icon": "#bf0d00",
12
- "--pie-missing": "#d32f2f",
13
- "--pie-missing-icon": "#6a78a1",
14
- "--pie-primary": "#3f51b5",
15
- "--pie-primary-light": "#9fa8da",
16
- "--pie-primary-dark": "#283593",
17
- "--pie-faded-primary": "#dcdafb",
18
- "--pie-secondary": "#f50057",
19
- "--pie-secondary-light": "#f48fb1",
20
- "--pie-secondary-dark": "#880e4f",
21
- "--pie-tertiary": "#146eb3",
22
- "--pie-tertiary-light": "#d0e2f0",
23
- "--pie-background": "rgba(255, 255, 255, 0)",
24
- "--pie-background-dark": "#ecedf1",
25
- "--pie-secondary-background": "rgba(241, 241, 241, 1)",
26
- "--pie-dropdown-background": "#e0e1e6",
27
- "--pie-border": "#9a9a9a",
28
- "--pie-border-light": "#d1d1d1",
29
- "--pie-border-dark": "#646464",
30
- "--pie-border-gray": "#7e8494",
31
- "--pie-black": "#000000",
32
- "--pie-white": "#ffffff",
33
- "--pie-focus-checked": "#bbdefb",
34
- "--pie-focus-checked-border": "#1565c0",
35
- "--pie-focus-unchecked": "#e0e0e0",
36
- "--pie-focus-unchecked-border": "#757575",
37
- "--pie-blue-grey-100": "#f3f5f7",
38
- "--pie-blue-grey-300": "#c0c3cf",
39
- "--pie-blue-grey-600": "#7e8494",
40
- "--pie-blue-grey-900": "#152452",
41
- "--pie-font-scale": "1",
42
- "--pie-button-bg": "#ffffff",
43
- "--pie-button-border": "#d1d5db",
44
- "--pie-button-color": "#374151",
45
- "--pie-button-hover-bg": "#f9fafb",
46
- "--pie-button-hover-border": "#9ca3af",
47
- "--pie-button-hover-color": "#111827",
48
- "--pie-button-active-bg": "#f3f4f6",
49
- "--pie-button-focus-outline": "#3b82f6",
50
- };
51
- export const DARK_THEME_VARS = {
52
- "--pie-text": "#ffffff",
53
- "--pie-disabled": "#999999",
54
- "--pie-disabled-secondary": "#777777",
55
- "--pie-correct": "#00ff00",
56
- "--pie-correct-secondary": "#003300",
57
- "--pie-correct-tertiary": "#00cc00",
58
- "--pie-correct-icon": "#00ff00",
59
- "--pie-incorrect": "#ff3333",
60
- "--pie-incorrect-secondary": "#330000",
61
- "--pie-incorrect-icon": "#ff0000",
62
- "--pie-missing": "#ff6666",
63
- "--pie-missing-icon": "#6666ff",
64
- "--pie-primary": "#ffff00",
65
- "--pie-primary-light": "#ffff99",
66
- "--pie-primary-dark": "#cccc00",
67
- "--pie-faded-primary": "#666600",
68
- "--pie-secondary": "#ff00ff",
69
- "--pie-secondary-light": "#ff99ff",
70
- "--pie-secondary-dark": "#cc00cc",
71
- "--pie-tertiary": "#00ffff",
72
- "--pie-tertiary-light": "#99ffff",
73
- "--pie-background": "#000000",
74
- "--pie-background-dark": "#1a1a1a",
75
- "--pie-secondary-background": "#222222",
76
- "--pie-dropdown-background": "#2a2a2a",
77
- "--pie-border": "#ffffff",
78
- "--pie-border-light": "#cccccc",
79
- "--pie-border-dark": "#ffffff",
80
- "--pie-border-gray": "#aaaaaa",
81
- "--pie-black": "#ffffff",
82
- "--pie-white": "#000000",
83
- "--pie-focus-checked": "#ffff00",
84
- "--pie-focus-checked-border": "#ffff00",
85
- "--pie-focus-unchecked": "#666666",
86
- "--pie-focus-unchecked-border": "#ffffff",
87
- "--pie-blue-grey-100": "#2a2a2a",
88
- "--pie-blue-grey-300": "#555555",
89
- "--pie-blue-grey-600": "#999999",
90
- "--pie-blue-grey-900": "#ffffff",
91
- "--pie-font-scale": "1",
92
- "--pie-button-bg": "#1f2937",
93
- "--pie-button-border": "#4b5563",
94
- "--pie-button-color": "#f9fafb",
95
- "--pie-button-hover-bg": "#374151",
96
- "--pie-button-hover-border": "#6b7280",
97
- "--pie-button-hover-color": "#ffffff",
98
- "--pie-button-active-bg": "#4b5563",
99
- "--pie-button-focus-outline": "#93c5fd",
100
- };