NEXT: Resolve custom theme and doc errors (#2701)

Author: endigo9740

sites/next.skeleton.dev/src/content/docs/design/themes.mdx

@@ -47,33 +47,33 @@ Optionally you can choose to generate a custom theme to adapt to your app's uniq
 4. Copy the contents of the generated theme in full.
 5. Create a new file in the root of your project called `theme-custom.ts` (any name is fine).
 
-You may import one or more themes at the top of your project's `tailwind.config`, then review the register instructions below.
+You may import each custom theme at the top of your project's `tailwind.config`. Then proceed to the register instructions below.
 
 ```ts title="tailwind.config"
-import { yourThemeNameHere } from './theme-custom.ts';
+import myCustomTheme from './theme-custom.ts';
 ```
 
 ## Register Themes
 
-Once all themes are imported, you can register your theme in the Skeleton plugin settings in `tailwind.config`.
+Register each imported theme within the Skeleton plugin settings in `tailwind.config`. Then proceed to activation below.
 
 ```ts title="tailwind.config" {6-8, 10}
 plugins: [
 	// The Skeleton Tailwind Plugin
 	skeleton({
 		themes: [
-			// Preset Themes
+			// Preset Theme(s)
 			themes.cerberus,
 			themes.pine,
 			themes.rose,
-			// Custom Themes
-			yourThemeNameHere,
+			// Custom Theme(s)
+			myCustomTheme,
 		],
 	}),
 ];
 ```
 
-> TIP: There's no limited to how many themes you can register, but each increases the size of your Tailwind-generated CSS bundle.
+> TIP: There's no limited to how many themes you can register, but each increases the size of your generated CSS bundle.
 
 ## Activate a Theme
 

sites/themes.skeleton.dev/src/lib/components/previews/CodeGen.svelte

@@ -3,17 +3,29 @@
 	import { stateFormCore } from '$lib/state.svelte';
 
 	let theme = $derived(genThemeCode());
+
+	function formatThemeName(e: any) {
+		if (!e.target.value) return;
+		stateFormCore.name = e.target.value.replace(/[^\w]/g, ''); // [A-Za-z0-9_]
+	}
 </script>
 
 <div class="space-y-4 md:space-y-8">
 	<!-- Theme Name -->
 	<label class="label">
 		<span class="label-text">Name Your Theme</span>
-		<input type="text" class="input" placeholder="ex: my-custom-theme" bind:value={stateFormCore.name} />
+		<input
+			type="text"
+			class="input"
+			placeholder="ex: myCustomTheme"
+			bind:value={stateFormCore.name}
+			oninput={formatThemeName}
+		/>
 	</label>
 	<!-- prettier-ignore -->
 	<pre class="pre !bg-neutral-950"><code>{`
-const ${stateFormCore.name} = ${JSON.stringify(theme.properties, null, 2)}\n
+import type { Theme } from '@skeletonlabs/skeleton';\n
+const ${stateFormCore.name} = ${JSON.stringify({name: stateFormCore.name, properties: theme.properties}, null, 2)} satisfies Theme;\n
 export default ${stateFormCore.name};
 	`.trim()}</code></pre>
 </div>

sites/themes.skeleton.dev/src/lib/state.svelte.ts

@@ -12,7 +12,7 @@ export let stateDisplay: any = $state({
 // Form: Core ---
 
 export let stateFormCore: Record<string, string> = $state({
-	name: 'theme'
+	name: 'myCustomTheme'
 });
 
 // Form: Colors ---