@pie-players/pie-tool-theme 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pie-players/pie-tool-theme",
-	"version": "0.3.3",
+	"version": "0.3.5",
 	"type": "module",
 	"description": "Theme tool for PIE assessment player - provides accessible themes and color schemes",
 	"repository": {
@@ -36,18 +36,14 @@
 		"index.ts",
 		"package.json"
 	],
-	"peerDependencies": {
-		"svelte": "^5.51.0"
-	},
 	"license": "MIT",
 	"unpkg": "./dist/tool-color-scheme.js",
 	"jsdelivr": "./dist/tool-color-scheme.js",
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.3.3",
-		"@pie-players/pie-context": "0.3.3",
-		"@pie-players/pie-players-shared": "0.3.3",
-		"@pie-players/pie-theme": "0.3.3",
-		"daisyui": "^5.5.18"
+		"@pie-players/pie-assessment-toolkit": "0.3.5",
+		"@pie-players/pie-context": "0.3.5",
+		"@pie-players/pie-players-shared": "0.3.5",
+		"@pie-players/pie-theme": "0.3.5"
 	},
 	"types": "./dist/index.d.ts",
 	"scripts": {
@@ -58,11 +54,11 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.10",
-		"@sveltejs/vite-plugin-svelte": "^6.1.4",
-		"svelte": "^5.51.3",
-		"typescript": "^5.7.0",
-		"vite": "^7.0.8",
-		"vite-plugin-dts": "^4.5.3"
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"svelte": "^5.53.7",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1",
+		"vite-plugin-dts": "^4.5.4"
 	},
 	"homepage": "https://github.com/pie-framework/pie-players/tree/master/packages/tool-color-scheme#readme",
 	"bugs": {

package/tool-color-scheme.svelte

@@ -80,79 +80,11 @@
 		description: string;
 		preview: ToolSchemePreview;
 	};
-
-	const DEFAULT_COLOR_SCHEMES: ToolColorSchemeOption[] = [
-		{
-			id: 'default',
-			name: 'Default',
-			description: 'Standard PIE colors',
-			preview: {
-				bg: '#ffffff',
-				text: '#000000',
-				primary: '#3f51b5'
-			}
-		},
-		{
-			id: 'black-on-white',
-			name: 'Black on White',
-			description: 'High contrast for readability',
-			preview: {
-				bg: '#ffffff',
-				text: '#000000',
-				primary: '#0000cc'
-			}
-		},
-		{
-			id: 'white-on-black',
-			name: 'White on Black',
-			description: 'Inverse high contrast',
-			preview: {
-				bg: '#000000',
-				text: '#ffffff',
-				primary: '#ffff00'
-			}
-		},
-		{
-			id: 'rose-on-green',
-			name: 'Rose on Green',
-			description: 'Color blind friendly (protanopia/deuteranopia)',
-			preview: {
-				bg: '#ccffcc',
-				text: '#3d0022',
-				primary: '#660044'
-			}
-		},
-		{
-			id: 'yellow-on-blue',
-			name: 'Yellow on Blue',
-			description: 'Strong contrast scheme',
-			preview: {
-				bg: '#000066',
-				text: '#ffff00',
-				primary: '#ffff66'
-			}
-		},
-		{
-			id: 'black-on-rose',
-			name: 'Black on Rose',
-			description: 'Warm tinted background',
-			preview: {
-				bg: '#ffccdd',
-				text: '#000000',
-				primary: '#880044'
-			}
-		},
-		{
-			id: 'light-gray-on-dark-gray',
-			name: 'Light Gray on Dark Gray',
-			description: 'Reduced brightness for light sensitivity',
-			preview: {
-				bg: '#333333',
-				text: '#e0e0e0',
-				primary: '#aaaaaa'
-			}
-		}
-	];
+	const FALLBACK_PREVIEW: ToolSchemePreview = {
+		bg: '#ffffff',
+		text: '#000000',
+		primary: '#3f51b5'
+	};
 
 	function previewFromVariables(
 		variables: Record<string, string> | undefined,
@@ -189,7 +121,7 @@
 				typeof value.variables === 'object' && value.variables
 					? (value.variables as Record<string, string>)
 					: undefined,
-				{ bg: '#ffffff', text: '#000000', primary: '#3f51b5' }
+				FALLBACK_PREVIEW
 			);
 		return { id, name, description, preview };
 	}
@@ -218,19 +150,12 @@
 
 	function resolveThemeSchemes(): ToolColorSchemeOption[] {
 		const themeSchemes = listPieColorSchemes();
-		const fallbackById = new Map(DEFAULT_COLOR_SCHEMES.map((scheme) => [scheme.id, scheme]));
 		return themeSchemes.map((scheme: PieColorSchemeDefinition) => {
-			const fallback = fallbackById.get(scheme.id) || {
+			return {
 				id: scheme.id,
 				name: scheme.name || scheme.id,
 				description: scheme.description || '',
-				preview: { bg: '#ffffff', text: '#000000', primary: '#3f51b5' }
-			};
-			return {
-				id: scheme.id,
-				name: scheme.name || fallback.name,
-				description: scheme.description || fallback.description || '',
-				preview: scheme.preview || previewFromVariables(scheme.variables, fallback.preview)
+				preview: scheme.preview || previewFromVariables(scheme.variables, FALLBACK_PREVIEW)
 			};
 		});
 	}
@@ -246,7 +171,7 @@
 		if (parsedFromAttribute.length > 0) return parsedFromAttribute;
 		const themeSchemes = resolveThemeSchemes();
 		if (themeSchemes.length > 0) return themeSchemes;
-		return DEFAULT_COLOR_SCHEMES;
+		return [{ id: 'default', name: 'Default', description: '', preview: FALLBACK_PREVIEW }];
 	});
 
 	// Current color scheme
@@ -296,7 +221,7 @@
 	let currentSchemeObj = $derived(
 		availableSchemes.find(s => s.id === currentScheme) ||
 		availableSchemes[0] ||
-		DEFAULT_COLOR_SCHEMES[0]
+		{ id: 'default', name: 'Default', description: '', preview: FALLBACK_PREVIEW }
 	);
 
 	$effect(() => {
@@ -305,20 +230,12 @@
 		}
 	});
 
-	function handleClose() {
-		dropdownOpen = false;
-		coordinator?.hideTool(toolId);
-	}
-
 	// Handle escape key
 	function handleKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			if (dropdownOpen) {
 				// Close dropdown first
 				dropdownOpen = false;
-			} else {
-				// Close the entire tool
-				handleClose();
 			}
 		} else if (dropdownOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
 			// Handle arrow key navigation in dropdown
@@ -399,19 +316,14 @@
 </script>
 
 {#if visible}
-	<div bind:this={containerEl} class="pie-tool-color-scheme" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="color-scheme-title" onkeydown={handleKeyDown}>
-		<div class="pie-tool-color-scheme__header">
-			<h3 id="color-scheme-title" class="pie-tool-color-scheme__title">Theme</h3>
-			<button
-				type="button"
-				class="pie-tool-color-scheme__close"
-				onclick={handleClose}
-				aria-label="Close theme selector"
-			>
-				×
-			</button>
-		</div>
-
+	<div
+		bind:this={containerEl}
+		class="pie-tool-color-scheme"
+		role="dialog"
+		tabindex="-1"
+		aria-label="Theme selector"
+		onkeydown={handleKeyDown}
+	>
 		<div class="pie-tool-color-scheme__content">
 			<p class="pie-tool-color-scheme__description">
 				Select a theme to improve readability and reduce eye strain.
@@ -478,57 +390,23 @@
 
 <style>
 	.pie-tool-color-scheme {
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		width: 90%;
-		max-width: 32rem;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		min-height: 0;
 		background-color: var(--pie-background, white);
-		border: 2px solid var(--pie-border, #ccc);
-		border-radius: 0.5rem;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 		display: flex;
 		flex-direction: column;
 	}
 
-	.pie-tool-color-scheme__header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 1rem;
-		border-bottom: 2px solid var(--pie-border, #ccc);
-	}
-
-	.pie-tool-color-scheme__title {
-		font-size: 1.25rem;
-		font-weight: 700;
-		color: var(--pie-text, black);
-		margin: 0;
-	}
-
-	.pie-tool-color-scheme__close {
-		width: 2rem;
-		height: 2rem;
-		border: none;
-		background: transparent;
-		color: var(--pie-text, black);
-		font-size: 1.5rem;
-		line-height: 1;
-		cursor: pointer;
-		border-radius: 0.25rem;
-	}
-
-	.pie-tool-color-scheme__close:hover {
-		background-color: var(--pie-secondary-background, #f0f0f0);
-	}
-
 	.pie-tool-color-scheme__content {
 		padding: 1rem;
 		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
+		min-height: 0;
+		overflow: auto;
 	}
 
 	.pie-tool-color-scheme__description {
@@ -674,7 +552,6 @@
 	}
 
 	/* Keyboard focus styling */
-	.pie-tool-color-scheme__close:focus-visible,
 	.pie-tool-color-scheme__dropdown-trigger:focus-visible,
 	.pie-tool-color-scheme__option:focus-visible {
 		outline: 2px solid var(--pie-primary, #3f51b5);