@pie-players/pie-tool-theme 0.3.4 → 0.3.5
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/tool-color-scheme.js +560 -598
- package/package.json +5 -5
- package/tool-color-scheme.svelte +10 -85
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-players/pie-tool-theme",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Theme tool for PIE assessment player - provides accessible themes and color schemes",
|
|
6
6
|
"repository": {
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"unpkg": "./dist/tool-color-scheme.js",
|
|
41
41
|
"jsdelivr": "./dist/tool-color-scheme.js",
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@pie-players/pie-assessment-toolkit": "0.3.
|
|
44
|
-
"@pie-players/pie-context": "0.3.
|
|
45
|
-
"@pie-players/pie-players-shared": "0.3.
|
|
46
|
-
"@pie-players/pie-theme": "0.3.
|
|
43
|
+
"@pie-players/pie-assessment-toolkit": "0.3.5",
|
|
44
|
+
"@pie-players/pie-context": "0.3.5",
|
|
45
|
+
"@pie-players/pie-players-shared": "0.3.5",
|
|
46
|
+
"@pie-players/pie-theme": "0.3.5"
|
|
47
47
|
},
|
|
48
48
|
"types": "./dist/index.d.ts",
|
|
49
49
|
"scripts": {
|
package/tool-color-scheme.svelte
CHANGED
|
@@ -80,79 +80,11 @@
|
|
|
80
80
|
description: string;
|
|
81
81
|
preview: ToolSchemePreview;
|
|
82
82
|
};
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
description: 'Standard PIE colors',
|
|
89
|
-
preview: {
|
|
90
|
-
bg: '#ffffff',
|
|
91
|
-
text: '#000000',
|
|
92
|
-
primary: '#3f51b5'
|
|
93
|
-
}
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
id: 'black-on-white',
|
|
97
|
-
name: 'Black on White',
|
|
98
|
-
description: 'High contrast for readability',
|
|
99
|
-
preview: {
|
|
100
|
-
bg: '#ffffff',
|
|
101
|
-
text: '#000000',
|
|
102
|
-
primary: '#0000cc'
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
id: 'white-on-black',
|
|
107
|
-
name: 'White on Black',
|
|
108
|
-
description: 'Inverse high contrast',
|
|
109
|
-
preview: {
|
|
110
|
-
bg: '#000000',
|
|
111
|
-
text: '#ffffff',
|
|
112
|
-
primary: '#ffff00'
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
{
|
|
116
|
-
id: 'rose-on-green',
|
|
117
|
-
name: 'Rose on Green',
|
|
118
|
-
description: 'Color blind friendly (protanopia/deuteranopia)',
|
|
119
|
-
preview: {
|
|
120
|
-
bg: '#ccffcc',
|
|
121
|
-
text: '#3d0022',
|
|
122
|
-
primary: '#660044'
|
|
123
|
-
}
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
id: 'yellow-on-blue',
|
|
127
|
-
name: 'Yellow on Blue',
|
|
128
|
-
description: 'Strong contrast scheme',
|
|
129
|
-
preview: {
|
|
130
|
-
bg: '#000066',
|
|
131
|
-
text: '#ffff00',
|
|
132
|
-
primary: '#ffff66'
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
id: 'black-on-rose',
|
|
137
|
-
name: 'Black on Rose',
|
|
138
|
-
description: 'Warm tinted background',
|
|
139
|
-
preview: {
|
|
140
|
-
bg: '#ffccdd',
|
|
141
|
-
text: '#000000',
|
|
142
|
-
primary: '#880044'
|
|
143
|
-
}
|
|
144
|
-
},
|
|
145
|
-
{
|
|
146
|
-
id: 'light-gray-on-dark-gray',
|
|
147
|
-
name: 'Light Gray on Dark Gray',
|
|
148
|
-
description: 'Reduced brightness for light sensitivity',
|
|
149
|
-
preview: {
|
|
150
|
-
bg: '#333333',
|
|
151
|
-
text: '#e0e0e0',
|
|
152
|
-
primary: '#aaaaaa'
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
];
|
|
83
|
+
const FALLBACK_PREVIEW: ToolSchemePreview = {
|
|
84
|
+
bg: '#ffffff',
|
|
85
|
+
text: '#000000',
|
|
86
|
+
primary: '#3f51b5'
|
|
87
|
+
};
|
|
156
88
|
|
|
157
89
|
function previewFromVariables(
|
|
158
90
|
variables: Record<string, string> | undefined,
|
|
@@ -189,7 +121,7 @@
|
|
|
189
121
|
typeof value.variables === 'object' && value.variables
|
|
190
122
|
? (value.variables as Record<string, string>)
|
|
191
123
|
: undefined,
|
|
192
|
-
|
|
124
|
+
FALLBACK_PREVIEW
|
|
193
125
|
);
|
|
194
126
|
return { id, name, description, preview };
|
|
195
127
|
}
|
|
@@ -218,19 +150,12 @@
|
|
|
218
150
|
|
|
219
151
|
function resolveThemeSchemes(): ToolColorSchemeOption[] {
|
|
220
152
|
const themeSchemes = listPieColorSchemes();
|
|
221
|
-
const fallbackById = new Map(DEFAULT_COLOR_SCHEMES.map((scheme) => [scheme.id, scheme]));
|
|
222
153
|
return themeSchemes.map((scheme: PieColorSchemeDefinition) => {
|
|
223
|
-
|
|
154
|
+
return {
|
|
224
155
|
id: scheme.id,
|
|
225
156
|
name: scheme.name || scheme.id,
|
|
226
157
|
description: scheme.description || '',
|
|
227
|
-
preview:
|
|
228
|
-
};
|
|
229
|
-
return {
|
|
230
|
-
id: scheme.id,
|
|
231
|
-
name: scheme.name || fallback.name,
|
|
232
|
-
description: scheme.description || fallback.description || '',
|
|
233
|
-
preview: scheme.preview || previewFromVariables(scheme.variables, fallback.preview)
|
|
158
|
+
preview: scheme.preview || previewFromVariables(scheme.variables, FALLBACK_PREVIEW)
|
|
234
159
|
};
|
|
235
160
|
});
|
|
236
161
|
}
|
|
@@ -246,7 +171,7 @@
|
|
|
246
171
|
if (parsedFromAttribute.length > 0) return parsedFromAttribute;
|
|
247
172
|
const themeSchemes = resolveThemeSchemes();
|
|
248
173
|
if (themeSchemes.length > 0) return themeSchemes;
|
|
249
|
-
return
|
|
174
|
+
return [{ id: 'default', name: 'Default', description: '', preview: FALLBACK_PREVIEW }];
|
|
250
175
|
});
|
|
251
176
|
|
|
252
177
|
// Current color scheme
|
|
@@ -296,7 +221,7 @@
|
|
|
296
221
|
let currentSchemeObj = $derived(
|
|
297
222
|
availableSchemes.find(s => s.id === currentScheme) ||
|
|
298
223
|
availableSchemes[0] ||
|
|
299
|
-
|
|
224
|
+
{ id: 'default', name: 'Default', description: '', preview: FALLBACK_PREVIEW }
|
|
300
225
|
);
|
|
301
226
|
|
|
302
227
|
$effect(() => {
|