From 90262941451a015ab261e6e2d7976c24754e18e5 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Thu, 22 Sep 2022 17:03:03 -0500
Subject: [PATCH 01/11] Create generator page, update docs, build new generator

---
 src/docs/DocsThemer/DocsThemer.svelte         | 143 +++++
 src/docs/DocsThemer/DocsThemerHex.svelte      | 151 -----
 src/docs/DocsThemer/DocsThemerTailwind.svelte | 111 ----
 src/docs/DocsThemer/Swatches.svelte           |  13 +-
 src/docs/DocsThemer/colors.ts                 | 555 ++++++++++--------
 src/docs/DocsThemer/helpers.ts                |  54 ++
 src/lib/utilities/CodeBlock/CodeBlock.svelte  |   2 +-
 src/routes/(inner)/guides/themes/+page.svelte | 174 ++----
 .../guides/themes/generator/+page.svelte      |  57 ++
 9 files changed, 636 insertions(+), 624 deletions(-)
 create mode 100644 src/docs/DocsThemer/DocsThemer.svelte
 delete mode 100644 src/docs/DocsThemer/DocsThemerHex.svelte
 delete mode 100644 src/docs/DocsThemer/DocsThemerTailwind.svelte
 create mode 100644 src/docs/DocsThemer/helpers.ts
 create mode 100644 src/routes/(inner)/guides/themes/generator/+page.svelte

diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
new file mode 100644
index 0000000000..5854ce725d
--- /dev/null
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { writable, type Writable } from 'svelte/store';
+
+	// Helpers
+	import { findColor, genHexPalette, generateCssCode } from './helpers';
+	import { colorsTailwind } from './colors';
+
+	// Components
+	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
+	import RadioGroup from '$lib/components/Radio/RadioGroup.svelte';
+	import RadioItem from '$lib/components/Radio/RadioItem.svelte';
+	import Swatches from './Swatches.svelte';
+
+	// Stores
+	const storeMode: Writable<boolean> = writable(true); // T: Tailwind | F: Custom
+
+	// Local
+	const regexHexColor = new RegExp(/^#[0-9a-f]{6}$/i);
+	const paletteTailwind: any = {
+		primary: findColor('emerald'),
+		accent: findColor('indigo'),
+		warning: findColor('rose'),
+		surface: findColor('gray')
+	};
+	const formDataHex: any = {
+		primary: findColor('emerald').shades['500'].hex,
+		accent: findColor('indigo').shades['500'].hex,
+		warning: findColor('rose').shades['500'].hex,
+		surface: findColor('gray').shades['500'].hex
+	};
+	let paletteHex: any = {
+		primary: genHexPalette('primary', formDataHex.primary),
+		accent: genHexPalette('accent', formDataHex.accent),
+		warning: genHexPalette('warning', formDataHex.warning),
+		surface: genHexPalette('surface', formDataHex.surface)
+	};
+	let cssSnippet: string = '';
+
+	// Handle hex color input by user
+	function onHexInput(key: string, hexColor: string): void {
+		if (regexHexColor.test(hexColor)) {
+			paletteHex[key] = genHexPalette(key, hexColor);
+			genCssSnippet();
+		}
+	}
+
+	// Generate CSS Snippet
+	function genCssSnippet(): void {
+		cssSnippet = generateCssCode($storeMode, currentPalette);
+	}
+
+	// Reactive
+	$: currentPalette = $storeMode === true ? paletteTailwind : paletteHex;
+	$: if (currentPalette) genCssSnippet();
+</script>
+
+<div class="themer space-y-4">
+	<section class="flex justify-between items-center">
+		<RadioGroup selected={storeMode}>
+			<RadioItem value={true}>Tailwind</RadioItem>
+			<RadioItem value={false}>Custom</RadioItem>
+		</RadioGroup>
+		{#if $storeMode}
+			<a class="btn btn-sm" href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Reference</a>
+		{:else}
+			<a class="btn btn-sm" href="https://coolors.co/" target="_blank">Get Inspired</a>
+		{/if}
+	</section>
+
+	<!-- Color Pickers -->
+	<!-- prettier-ignore -->
+	<section class="card card-body !bg-[#141517] !ring-0 space-y-4">
+		<!-- Select Tailwind Colors -->
+		<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
+			<label class="w-full">
+				<span class="text-white">Primary</span>
+				{#if $storeMode}
+					<select name="primary" id="primary" class="capitalize" bind:value={paletteTailwind.primary} on:change={()=>{genCssSnippet()}}>
+						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+					</select>
+				{:else}
+					<input
+						type="text" placeholder="#FFFFFF" bind:value={formDataHex.primary}
+						on:input={() => { onHexInput('primary', formDataHex.primary); }}
+					/>
+				{/if}
+			</label>
+			<Swatches palette={currentPalette.primary.shades} />
+		</div>
+		<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
+			<label class="w-full">
+				<span class="text-white">Accent</span>
+				{#if $storeMode}
+					<select name="accent" id="accent" class="capitalize" bind:value={paletteTailwind.accent} on:change={()=>{genCssSnippet()}}>
+						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+					</select>
+				{:else}
+					<input
+						type="text" placeholder="#FFFFFF" bind:value={formDataHex.accent}
+						on:input={() => { onHexInput('accent', formDataHex.accent); }}
+					/>
+				{/if}
+			</label>
+			<Swatches palette={currentPalette.accent.shades} />
+		</div>
+		<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
+			<label class="w-full">
+				<span class="text-white">Warning</span>
+				{#if $storeMode}
+					<select name="warning" id="warning" class="capitalize" bind:value={paletteTailwind.warning} on:change={()=>{genCssSnippet()}}>
+						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+					</select>
+				{:else}
+					<input
+						type="text" placeholder="#FFFFFF" bind:value={formDataHex.warning}
+						on:input={() => { onHexInput('warning', formDataHex.warning); }}
+					/>
+				{/if}
+			</label>
+			<Swatches palette={currentPalette.warning.shades} />
+		</div>
+		<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
+			<label class="w-full">
+				<span class="text-white">Surface</span>
+				{#if $storeMode}
+					<select name="surface" id="surface" class="capitalize" bind:value={paletteTailwind.surface} on:change={()=>{genCssSnippet()}}>
+						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+					</select>
+				{:else}
+					<input
+						type="text" placeholder="#FFFFFF" bind:value={formDataHex.surface}
+						on:input={() => { onHexInput('surface', formDataHex.surface); }}
+					/>
+				{/if}
+			</label>
+			<Swatches palette={currentPalette.surface.shades} />
+		</div>
+        <p class="text-sm text-center">Each color you {$storeMode ? 'select' : 'input'} represents swatch 500 (ex: <code>bg-primary-500</code>).</p>
+	</section>
+
+	<!-- CSS Snipnpet -->
+	<CodeBlock language="css" code={cssSnippet} />
+</div>
diff --git a/src/docs/DocsThemer/DocsThemerHex.svelte b/src/docs/DocsThemer/DocsThemerHex.svelte
deleted file mode 100644
index b2d9d4fb60..0000000000
--- a/src/docs/DocsThemer/DocsThemerHex.svelte
+++ /dev/null
@@ -1,151 +0,0 @@
-<script lang="ts">
-	// https://github.com/bobthered/tailwindcss-palette-generator
-	// @ts-ignore
-	import paletteGenerator from '@bobthered/tailwindcss-palette-generator';
-
-	// Components
-	import Swatches from './Swatches.svelte';
-	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
-
-	const regexHexColor = new RegExp(/^#[0-9a-f]{6}$/i);
-	const formValues: any = {
-		primary: '#10b981',
-		accent: '#6366F1',
-		warning: '#f43f5e',
-		surface: '#6b7280'
-	};
-	const hexShades: any = { primary: {}, accent: {}, warning: {}, surface: {} };
-	const rgbShades: any = { primary: {}, accent: {}, warning: {}, surface: {} };
-	let cssSnippet: string = ``;
-
-	// Helpers ---
-
-	function pruneHash(v: string): string {
-		return v.replace('#', '');
-	}
-
-	// Hex -> RGB
-	// Source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
-	function hexToRgb(hex: any): string {
-		hex = pruneHash(hex);
-		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-		if (result) {
-			const color = {
-				r: parseInt(result[1], 16),
-				g: parseInt(result[2], 16),
-				b: parseInt(result[3], 16)
-			};
-			return `${color.r} ${color.g} ${color.b}`;
-		}
-		return '(invalid)';
-	}
-
-	// Process
-
-	// Process each input individually if valid hex color string
-	function processPrimary(): void {
-		if (regexHexColor.test(formValues.primary)) {
-			generateHexShades('primary');
-		}
-	}
-	function processAccent(): void {
-		if (regexHexColor.test(formValues.accent)) {
-			generateHexShades('accent');
-		}
-	}
-	function processWarning(): void {
-		if (regexHexColor.test(formValues.warning)) {
-			generateHexShades('warning');
-		}
-	}
-	function processSurface(): void {
-		if (regexHexColor.test(formValues.surface)) {
-			generateHexShades('surface');
-		}
-	}
-
-	// Creates a hex shade palette from a singular hex value
-	function generateHexShades(key: string): void {
-		// Use paletteGenerator
-		const p: any = paletteGenerator({ names: [key], colors: [formValues[key]] });
-		delete p[key][950]; // drop swatch 950
-		hexShades[key] = p[key];
-		// Generate RGB shades
-		generateRgbShades(key);
-	}
-
-	// Generate a set of RGB shades from Hex shades
-	function generateRgbShades(key: string): void {
-		Object.entries(hexShades[key]).forEach((hexShade: any) => {
-			const [hexKey, hexValue] = hexShade;
-			rgbShades[key][hexKey] = hexToRgb(hexValue);
-		});
-		// Update CSS
-		generateCssSnippet(key);
-	}
-
-	// Generates the CSS snippet
-	function generateCssSnippet(key: string): void {
-		let css: string = '';
-		Object.entries(rgbShades).forEach((set: any, i: number) => {
-			const [colorName, shades] = set;
-			// Add Comment Row
-			css += `${i === 0 ? `\t/* --- Custom Hex Theme --- */\n` : '\n'}\t/* ${colorName} (${formValues[colorName]}) */`;
-			// Per each entry, add custom property key/value row
-			Object.entries(shades).forEach((shade) => {
-				const [shadeKey, shadeValue] = shade;
-				css += `\n\t--color-${colorName}-${shadeKey}: ${shadeValue};`;
-			});
-		});
-		// Wrap snippet with `:root{}`
-		cssSnippet = `:root {\n${css}\n}`;
-	}
-
-	// On Init ---
-
-	function onInit(): void {
-		processPrimary();
-		processAccent();
-		processWarning();
-		processSurface();
-	}
-	onInit();
-</script>
-
-<form class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-	<!-- Color Inputs -->
-	<fieldset class="space-y-4">
-		<!-- Primary -->
-		<label class="flex-1" for="primary">
-			<span>Primary</span>
-			<input type="text" placeholder="#FFFFFF" bind:value={formValues.primary} on:keyup={processPrimary} />
-			<Swatches palette={hexShades.primary} />
-		</label>
-
-		<!-- Accent -->
-		<label class="flex-1" for="accent">
-			<span>Accent</span>
-			<input type="text" placeholder="#FFFFFF" bind:value={formValues.accent} on:keyup={processAccent} />
-			<Swatches palette={hexShades.accent} />
-		</label>
-
-		<!-- Warning -->
-		<label class="flex-1" for="warning">
-			<span>Warning</span>
-			<input type="text" placeholder="#FFFFFF" bind:value={formValues.warning} on:keyup={processWarning} />
-			<Swatches palette={hexShades.warning} />
-		</label>
-
-		<!-- Surface -->
-		<label class="flex-1" for="surface">
-			<span>Surface</span>
-			<input type="text" placeholder="#FFFFFF" bind:value={formValues.surface} on:keyup={processSurface} />
-			<Swatches palette={hexShades.surface} />
-		</label>
-	</fieldset>
-
-	<!-- Codeblock -->
-	<fieldset class="space-y-4">
-		<CodeBlock language="css" code={`${cssSnippet}`} class="max-h-[440px] overflow-y-auto border border-white/10" />
-	</fieldset>
-</form>
diff --git a/src/docs/DocsThemer/DocsThemerTailwind.svelte b/src/docs/DocsThemer/DocsThemerTailwind.svelte
deleted file mode 100644
index 865f562e6d..0000000000
--- a/src/docs/DocsThemer/DocsThemerTailwind.svelte
+++ /dev/null
@@ -1,111 +0,0 @@
-<script lang="ts">
-	import { tailwindColors } from './colors';
-
-	import Swatches from './Swatches.svelte';
-	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
-
-	const twColors: any = tailwindColors;
-	const colorLabels: any[] = Object.keys(tailwindColors);
-	const formValues: any = {
-		primary: 'emerald',
-		accent: 'indigo',
-		warning: 'rose',
-		surface: 'gray'
-	};
-	const rgbShades: any = { primary: {}, accent: {}, warning: {}, surface: {} };
-	let cssSnippet: string = ``;
-
-	// Process ---
-
-	function processPrimary(): void {
-		setRgbShades('primary', formValues.primary);
-	}
-	function processAccent(): void {
-		setRgbShades('accent', formValues.accent);
-	}
-	function processWarning(): void {
-		setRgbShades('warning', formValues.warning);
-	}
-	function processSurface(): void {
-		setRgbShades('surface', formValues.surface);
-	}
-
-	// Set rgb shades based on selection
-	function setRgbShades(key: string, selectionKey: string): void {
-		rgbShades[key] = twColors[selectionKey];
-		generateCssSnippet();
-	}
-
-	// Generates the CSS snippet
-	function generateCssSnippet(): void {
-		let css: string = '';
-		Object.entries(rgbShades).forEach((set: any, i: number) => {
-			const [colorName, shades] = set;
-			// Add Comment Row
-			css += `${i === 0 ? `\t/* --- Custom Tailwind Theme --- */\n` : '\n'}\t/* ${colorName} (${formValues[colorName]}) */`;
-			// Per each entry, add custom property key/value row
-			Object.entries(shades).forEach((shade: any) => {
-				const [shadeKey, shadeValue] = shade;
-				css += `\n\t--color-${colorName}-${shadeKey}: ${shadeValue['rgb']};`;
-			});
-		});
-		// Wrap snippet with `:root{}`
-		cssSnippet = `:root {\n${css}\n}`;
-	}
-
-	// On Init ---
-
-	function onInit(): void {
-		processPrimary();
-		processAccent();
-		processWarning();
-		processSurface();
-	}
-	onInit();
-</script>
-
-<form class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-	<!-- Color Selection -->
-	<fieldset class="space-y-4">
-		<!-- Primary -->
-		<label>
-			<span>Primary</span>
-			<select name="primary" id="primary" bind:value={formValues.primary} on:change={processPrimary}>
-				{#each colorLabels as l}<option value={l}>{l}</option>{/each}
-			</select>
-			<Swatches palette={rgbShades.primary} />
-		</label>
-
-		<!-- Accent -->
-		<label>
-			<span>Accent</span>
-			<select name="accent" id="accent" bind:value={formValues.accent} on:change={processAccent}>
-				{#each colorLabels as l}<option value={l}>{l}</option>{/each}
-			</select>
-			<Swatches palette={rgbShades.accent} />
-		</label>
-
-		<!-- Warning -->
-		<label>
-			<span>Warning</span>
-			<select name="warning" id="warning" bind:value={formValues.warning} on:change={processWarning}>
-				{#each colorLabels as l}<option value={l}>{l}</option>{/each}
-			</select>
-			<Swatches palette={rgbShades.warning} />
-		</label>
-
-		<!-- Surface -->
-		<label>
-			<span>Surface</span>
-			<select name="surface" id="surface" bind:value={formValues.surface} on:change={processSurface}>
-				{#each colorLabels as l}<option value={l}>{l}</option>{/each}
-			</select>
-			<Swatches palette={rgbShades.surface} />
-		</label>
-	</fieldset>
-
-	<!-- Codeblock -->
-	<fieldset class="space-y-4">
-		<CodeBlock language="css" code={`${cssSnippet}`} class="max-h-[440px] overflow-y-auto border border-white/10" />
-	</fieldset>
-</form>
diff --git a/src/docs/DocsThemer/Swatches.svelte b/src/docs/DocsThemer/Swatches.svelte
index 8527ddf018..ce928ab117 100644
--- a/src/docs/DocsThemer/Swatches.svelte
+++ b/src/docs/DocsThemer/Swatches.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
 	export let palette: string;
 	const labels: number[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-	function objValuesToArry(obj: any): any[] {
+	function objectValues(obj: any): any[] {
 		return Object.values(obj);
 	}
 </script>
 
-<div class="mt-2 grid grid-cols-10 gap-[1px]">
-	{#each objValuesToArry(palette) as shade, i}
-		<div class="border border-gray-500/30 flex justify-center items-center" style:background={shade.hex ? shade.hex : shade}>
-			<div class="text-black font-bold text-[8px] md:text-xs">{labels[i]}</div>
+<div class="mt-2 grid grid-cols-10 w-full">
+	{#each objectValues(palette) as shade, i}
+		<div class="flex flex-col-reverse xl:flex-col">
+			<!-- Label -->
+			<div class="block text-white text-xs mt-2 xl:mb-2 text-center" class:underline={i === 5}>{labels[i]}</div>
+			<!-- Color -->
+			<div class="h-[40px]" style:background={shade.hex ? shade.hex : shade} />
 		</div>
 	{/each}
 </div>
diff --git a/src/docs/DocsThemer/colors.ts b/src/docs/DocsThemer/colors.ts
index f146b59cc6..0e2d886152 100644
--- a/src/docs/DocsThemer/colors.ts
+++ b/src/docs/DocsThemer/colors.ts
@@ -1,267 +1,334 @@
 // https://tailwindcss.com/docs/customizing-colors#default-color-palette
-export const tailwindColors = {
-	slate: {
-		'50': { hex: '#f8fafc', rgb: '248 250 252' },
-		'100': { hex: '#f1f5f9', rgb: '241 245 249' },
-		'200': { hex: '#e2e8f0', rgb: '226 232 240' },
-		'300': { hex: '#cbd5e1', rgb: '203 213 225' },
-		'400': { hex: '#94a3b8', rgb: '148 163 184' },
-		'500': { hex: '#64748b', rgb: '100 116 139' },
-		'600': { hex: '#475569', rgb: '71 85 105' },
-		'700': { hex: '#334155', rgb: '51 65 85' },
-		'800': { hex: '#1e293b', rgb: '30 41 59' },
-		'900': { hex: '#0f172a', rgb: '15 23 42' }
+
+export const colorsTailwind: any[] = [
+	{
+		label: 'slate',
+		shades: {
+			'50': { hex: '#f8fafc', rgb: '248 250 252' },
+			'100': { hex: '#f1f5f9', rgb: '241 245 249' },
+			'200': { hex: '#e2e8f0', rgb: '226 232 240' },
+			'300': { hex: '#cbd5e1', rgb: '203 213 225' },
+			'400': { hex: '#94a3b8', rgb: '148 163 184' },
+			'500': { hex: '#64748b', rgb: '100 116 139' },
+			'600': { hex: '#475569', rgb: '71 85 105' },
+			'700': { hex: '#334155', rgb: '51 65 85' },
+			'800': { hex: '#1e293b', rgb: '30 41 59' },
+			'900': { hex: '#0f172a', rgb: '15 23 42' }
+		}
 	},
-	gray: {
-		'50': { hex: '#f9fafb', rgb: '249 250 251' },
-		'100': { hex: '#f3f4f6', rgb: '243 244 246' },
-		'200': { hex: '#e5e7eb', rgb: '229 231 235' },
-		'300': { hex: '#d1d5db', rgb: '209 213 219' },
-		'400': { hex: '#9ca3af', rgb: '156 163 175' },
-		'500': { hex: '#6b7280', rgb: '107 114 128' },
-		'600': { hex: '#4b5563', rgb: '75 85 99' },
-		'700': { hex: '#374151', rgb: '55 65 81' },
-		'800': { hex: '#1f2937', rgb: '31 41 55' },
-		'900': { hex: '#111827', rgb: '17 24 39' }
+	{
+		label: 'gray',
+		shades: {
+			'50': { hex: '#f9fafb', rgb: '249 250 251' },
+			'100': { hex: '#f3f4f6', rgb: '243 244 246' },
+			'200': { hex: '#e5e7eb', rgb: '229 231 235' },
+			'300': { hex: '#d1d5db', rgb: '209 213 219' },
+			'400': { hex: '#9ca3af', rgb: '156 163 175' },
+			'500': { hex: '#6b7280', rgb: '107 114 128' },
+			'600': { hex: '#4b5563', rgb: '75 85 99' },
+			'700': { hex: '#374151', rgb: '55 65 81' },
+			'800': { hex: '#1f2937', rgb: '31 41 55' },
+			'900': { hex: '#111827', rgb: '17 24 39' }
+		}
 	},
-	zinc: {
-		'50': { hex: '#fafafa', rgb: '250 250 250' },
-		'100': { hex: '#f4f4f5', rgb: '244 244 245' },
-		'200': { hex: '#e4e4e7', rgb: '228 228 231' },
-		'300': { hex: '#d4d4d8', rgb: '212 212 216' },
-		'400': { hex: '#a1a1aa', rgb: '161 161 170' },
-		'500': { hex: '#71717a', rgb: '113 113 122' },
-		'600': { hex: '#52525b', rgb: '82 82 91' },
-		'700': { hex: '#3f3f46', rgb: '63 63 70' },
-		'800': { hex: '#27272a', rgb: '39 39 42' },
-		'900': { hex: '#18181b', rgb: '24 24 27' }
+	{
+		label: 'zinc',
+		shades: {
+			'50': { hex: '#fafafa', rgb: '250 250 250' },
+			'100': { hex: '#f4f4f5', rgb: '244 244 245' },
+			'200': { hex: '#e4e4e7', rgb: '228 228 231' },
+			'300': { hex: '#d4d4d8', rgb: '212 212 216' },
+			'400': { hex: '#a1a1aa', rgb: '161 161 170' },
+			'500': { hex: '#71717a', rgb: '113 113 122' },
+			'600': { hex: '#52525b', rgb: '82 82 91' },
+			'700': { hex: '#3f3f46', rgb: '63 63 70' },
+			'800': { hex: '#27272a', rgb: '39 39 42' },
+			'900': { hex: '#18181b', rgb: '24 24 27' }
+		}
 	},
-	neutral: {
-		'50': { hex: '#fafafa', rgb: '250 250 250' },
-		'100': { hex: '#f5f5f5', rgb: '245 245 245' },
-		'200': { hex: '#e5e5e5', rgb: '229 229 229' },
-		'300': { hex: '#d4d4d4', rgb: '212 212 212' },
-		'400': { hex: '#a3a3a3', rgb: '163 163 163' },
-		'500': { hex: '#737373', rgb: '115 115 115' },
-		'600': { hex: '#525252', rgb: '82 82 82' },
-		'700': { hex: '#404040', rgb: '64 64 64' },
-		'800': { hex: '#262626', rgb: '38 38 38' },
-		'900': { hex: '#171717', rgb: '23 23 23' }
+	{
+		label: 'neutral',
+		shades: {
+			'50': { hex: '#fafafa', rgb: '250 250 250' },
+			'100': { hex: '#f5f5f5', rgb: '245 245 245' },
+			'200': { hex: '#e5e5e5', rgb: '229 229 229' },
+			'300': { hex: '#d4d4d4', rgb: '212 212 212' },
+			'400': { hex: '#a3a3a3', rgb: '163 163 163' },
+			'500': { hex: '#737373', rgb: '115 115 115' },
+			'600': { hex: '#525252', rgb: '82 82 82' },
+			'700': { hex: '#404040', rgb: '64 64 64' },
+			'800': { hex: '#262626', rgb: '38 38 38' },
+			'900': { hex: '#171717', rgb: '23 23 23' }
+		}
 	},
-	stone: {
-		'50': { hex: '#fafaf9', rgb: '250 250 249' },
-		'100': { hex: '#f5f5f4', rgb: '245 245 244' },
-		'200': { hex: '#e7e5e4', rgb: '231 229 228' },
-		'300': { hex: '#d6d3d1', rgb: '214 211 209' },
-		'400': { hex: '#a8a29e', rgb: '168 162 158' },
-		'500': { hex: '#78716c', rgb: '120 113 108' },
-		'600': { hex: '#57534e', rgb: '87 83 78' },
-		'700': { hex: '#44403c', rgb: '68 64 60' },
-		'800': { hex: '#292524', rgb: '41 37 36' },
-		'900': { hex: '#1c1917', rgb: '28 25 23' }
+	{
+		label: 'stone',
+		shades: {
+			'50': { hex: '#fafaf9', rgb: '250 250 249' },
+			'100': { hex: '#f5f5f4', rgb: '245 245 244' },
+			'200': { hex: '#e7e5e4', rgb: '231 229 228' },
+			'300': { hex: '#d6d3d1', rgb: '214 211 209' },
+			'400': { hex: '#a8a29e', rgb: '168 162 158' },
+			'500': { hex: '#78716c', rgb: '120 113 108' },
+			'600': { hex: '#57534e', rgb: '87 83 78' },
+			'700': { hex: '#44403c', rgb: '68 64 60' },
+			'800': { hex: '#292524', rgb: '41 37 36' },
+			'900': { hex: '#1c1917', rgb: '28 25 23' }
+		}
 	},
-	red: {
-		'50': { hex: '#fef2f2', rgb: '254 242 242' },
-		'100': { hex: '#fee2e2', rgb: '254 226 226' },
-		'200': { hex: '#fecaca', rgb: '254 202 202' },
-		'300': { hex: '#fca5a5', rgb: '252 165 165' },
-		'400': { hex: '#f87171', rgb: '248 113 113' },
-		'500': { hex: '#ef4444', rgb: '239 68 68' },
-		'600': { hex: '#dc2626', rgb: '220 38 38' },
-		'700': { hex: '#b91c1c', rgb: '185 28 28' },
-		'800': { hex: '#991b1b', rgb: '153 27 27' },
-		'900': { hex: '#7f1d1d', rgb: '127 29 29' }
+	{
+		label: 'red',
+		shades: {
+			'50': { hex: '#fef2f2', rgb: '254 242 242' },
+			'100': { hex: '#fee2e2', rgb: '254 226 226' },
+			'200': { hex: '#fecaca', rgb: '254 202 202' },
+			'300': { hex: '#fca5a5', rgb: '252 165 165' },
+			'400': { hex: '#f87171', rgb: '248 113 113' },
+			'500': { hex: '#ef4444', rgb: '239 68 68' },
+			'600': { hex: '#dc2626', rgb: '220 38 38' },
+			'700': { hex: '#b91c1c', rgb: '185 28 28' },
+			'800': { hex: '#991b1b', rgb: '153 27 27' },
+			'900': { hex: '#7f1d1d', rgb: '127 29 29' }
+		}
 	},
-	orange: {
-		'50': { hex: '#fff7ed', rgb: '255 247 237' },
-		'100': { hex: '#ffedd5', rgb: '255 237 213' },
-		'200': { hex: '#fed7aa', rgb: '254 215 170' },
-		'300': { hex: '#fdba74', rgb: '253 186 116' },
-		'400': { hex: '#fb923c', rgb: '251 146 60' },
-		'500': { hex: '#f97316', rgb: '249 115 22' },
-		'600': { hex: '#ea580c', rgb: '234 88 12' },
-		'700': { hex: '#c2410c', rgb: '194 65 12' },
-		'800': { hex: '#9a3412', rgb: '154 52 18' },
-		'900': { hex: '#7c2d12', rgb: '124 45 18' }
+	{
+		label: 'orange',
+		shades: {
+			'50': { hex: '#fff7ed', rgb: '255 247 237' },
+			'100': { hex: '#ffedd5', rgb: '255 237 213' },
+			'200': { hex: '#fed7aa', rgb: '254 215 170' },
+			'300': { hex: '#fdba74', rgb: '253 186 116' },
+			'400': { hex: '#fb923c', rgb: '251 146 60' },
+			'500': { hex: '#f97316', rgb: '249 115 22' },
+			'600': { hex: '#ea580c', rgb: '234 88 12' },
+			'700': { hex: '#c2410c', rgb: '194 65 12' },
+			'800': { hex: '#9a3412', rgb: '154 52 18' },
+			'900': { hex: '#7c2d12', rgb: '124 45 18' }
+		}
 	},
-	amber: {
-		'50': { hex: '#fffbeb', rgb: '255 251 235' },
-		'100': { hex: '#fef3c7', rgb: '254 243 199' },
-		'200': { hex: '#fde68a', rgb: '253 230 138' },
-		'300': { hex: '#fcd34d', rgb: '252 211 77' },
-		'400': { hex: '#fbbf24', rgb: '251 191 36' },
-		'500': { hex: '#f59e0b', rgb: '245 158 11' },
-		'600': { hex: '#d97706', rgb: '217 119 6' },
-		'700': { hex: '#b45309', rgb: '180 83 9' },
-		'800': { hex: '#92400e', rgb: '146 64 14' },
-		'900': { hex: '#78350f', rgb: '120 53 15' }
+	{
+		label: 'amber',
+		shades: {
+			'50': { hex: '#fffbeb', rgb: '255 251 235' },
+			'100': { hex: '#fef3c7', rgb: '254 243 199' },
+			'200': { hex: '#fde68a', rgb: '253 230 138' },
+			'300': { hex: '#fcd34d', rgb: '252 211 77' },
+			'400': { hex: '#fbbf24', rgb: '251 191 36' },
+			'500': { hex: '#f59e0b', rgb: '245 158 11' },
+			'600': { hex: '#d97706', rgb: '217 119 6' },
+			'700': { hex: '#b45309', rgb: '180 83 9' },
+			'800': { hex: '#92400e', rgb: '146 64 14' },
+			'900': { hex: '#78350f', rgb: '120 53 15' }
+		}
 	},
-	yellow: {
-		'50': { hex: '#fefce8', rgb: '254 252 232' },
-		'100': { hex: '#fef9c3', rgb: '254 249 195' },
-		'200': { hex: '#fef08a', rgb: '254 240 138' },
-		'300': { hex: '#fde047', rgb: '253 224 71' },
-		'400': { hex: '#facc15', rgb: '250 204 21' },
-		'500': { hex: '#eab308', rgb: '234 179 8' },
-		'600': { hex: '#ca8a04', rgb: '202 138 4' },
-		'700': { hex: '#a16207', rgb: '161 98 7' },
-		'800': { hex: '#854d0e', rgb: '133 77 14' },
-		'900': { hex: '#713f12', rgb: '113 63 18' }
+	{
+		label: 'yellow',
+		shades: {
+			'50': { hex: '#fefce8', rgb: '254 252 232' },
+			'100': { hex: '#fef9c3', rgb: '254 249 195' },
+			'200': { hex: '#fef08a', rgb: '254 240 138' },
+			'300': { hex: '#fde047', rgb: '253 224 71' },
+			'400': { hex: '#facc15', rgb: '250 204 21' },
+			'500': { hex: '#eab308', rgb: '234 179 8' },
+			'600': { hex: '#ca8a04', rgb: '202 138 4' },
+			'700': { hex: '#a16207', rgb: '161 98 7' },
+			'800': { hex: '#854d0e', rgb: '133 77 14' },
+			'900': { hex: '#713f12', rgb: '113 63 18' }
+		}
 	},
-	lime: {
-		'50': { hex: '#f7fee7', rgb: '247 254 231' },
-		'100': { hex: '#ecfccb', rgb: '236 252 203' },
-		'200': { hex: '#d9f99d', rgb: '217 249 157' },
-		'300': { hex: '#bef264', rgb: '190 242 100' },
-		'400': { hex: '#a3e635', rgb: '163 230 53' },
-		'500': { hex: '#84cc16', rgb: '132 204 22' },
-		'600': { hex: '#65a30d', rgb: '101 163 13' },
-		'700': { hex: '#4d7c0f', rgb: '77 124 15' },
-		'800': { hex: '#3f6212', rgb: '63 98 18' },
-		'900': { hex: '#365314', rgb: '54 83 20' }
+	{
+		label: 'lime',
+		shades: {
+			'50': { hex: '#f7fee7', rgb: '247 254 231' },
+			'100': { hex: '#ecfccb', rgb: '236 252 203' },
+			'200': { hex: '#d9f99d', rgb: '217 249 157' },
+			'300': { hex: '#bef264', rgb: '190 242 100' },
+			'400': { hex: '#a3e635', rgb: '163 230 53' },
+			'500': { hex: '#84cc16', rgb: '132 204 22' },
+			'600': { hex: '#65a30d', rgb: '101 163 13' },
+			'700': { hex: '#4d7c0f', rgb: '77 124 15' },
+			'800': { hex: '#3f6212', rgb: '63 98 18' },
+			'900': { hex: '#365314', rgb: '54 83 20' }
+		}
 	},
-	green: {
-		'50': { hex: '#f0fdf4', rgb: '240 253 244' },
-		'100': { hex: '#dcfce7', rgb: '220 252 231' },
-		'200': { hex: '#bbf7d0', rgb: '187 247 208' },
-		'300': { hex: '#86efac', rgb: '134 239 172' },
-		'400': { hex: '#4ade80', rgb: '74 222 128' },
-		'500': { hex: '#22c55e', rgb: '34 197 94' },
-		'600': { hex: '#16a34a', rgb: '22 163 74' },
-		'700': { hex: '#15803d', rgb: '21 128 61' },
-		'800': { hex: '#166534', rgb: '22 101 52' },
-		'900': { hex: '#14532d', rgb: '20 83 45' }
+	{
+		label: 'green',
+		shades: {
+			'50': { hex: '#f0fdf4', rgb: '240 253 244' },
+			'100': { hex: '#dcfce7', rgb: '220 252 231' },
+			'200': { hex: '#bbf7d0', rgb: '187 247 208' },
+			'300': { hex: '#86efac', rgb: '134 239 172' },
+			'400': { hex: '#4ade80', rgb: '74 222 128' },
+			'500': { hex: '#22c55e', rgb: '34 197 94' },
+			'600': { hex: '#16a34a', rgb: '22 163 74' },
+			'700': { hex: '#15803d', rgb: '21 128 61' },
+			'800': { hex: '#166534', rgb: '22 101 52' },
+			'900': { hex: '#14532d', rgb: '20 83 45' }
+		}
 	},
-	emerald: {
-		'50': { hex: '#ecfdf5', rgb: '236 253 245' },
-		'100': { hex: '#d1fae5', rgb: '209 250 229' },
-		'200': { hex: '#a7f3d0', rgb: '167 243 208' },
-		'300': { hex: '#6ee7b7', rgb: '110 231 183' },
-		'400': { hex: '#34d399', rgb: '52 211 153' },
-		'500': { hex: '#10b981', rgb: '16 185 129' },
-		'600': { hex: '#059669', rgb: '5 150 105' },
-		'700': { hex: '#047857', rgb: '4 120 87' },
-		'800': { hex: '#065f46', rgb: '6 95 70' },
-		'900': { hex: '#064e3b', rgb: '6 78 59' }
+	{
+		label: 'emerald',
+		shades: {
+			'50': { hex: '#ecfdf5', rgb: '236 253 245' },
+			'100': { hex: '#d1fae5', rgb: '209 250 229' },
+			'200': { hex: '#a7f3d0', rgb: '167 243 208' },
+			'300': { hex: '#6ee7b7', rgb: '110 231 183' },
+			'400': { hex: '#34d399', rgb: '52 211 153' },
+			'500': { hex: '#10b981', rgb: '16 185 129' },
+			'600': { hex: '#059669', rgb: '5 150 105' },
+			'700': { hex: '#047857', rgb: '4 120 87' },
+			'800': { hex: '#065f46', rgb: '6 95 70' },
+			'900': { hex: '#064e3b', rgb: '6 78 59' }
+		}
 	},
-	teal: {
-		'50': { hex: '#f0fdfa', rgb: '240 253 250' },
-		'100': { hex: '#ccfbf1', rgb: '204 251 241' },
-		'200': { hex: '#99f6e4', rgb: '153 246 228' },
-		'300': { hex: '#5eead4', rgb: '94 234 212' },
-		'400': { hex: '#2dd4bf', rgb: '45 212 191' },
-		'500': { hex: '#14b8a6', rgb: '20 184 166' },
-		'600': { hex: '#0d9488', rgb: '13 148 136' },
-		'700': { hex: '#0f766e', rgb: '15 118 110' },
-		'800': { hex: '#115e59', rgb: '17 94 89' },
-		'900': { hex: '#134e4a', rgb: '19 78 74' }
+	{
+		label: 'teal',
+		shades: {
+			'50': { hex: '#f0fdfa', rgb: '240 253 250' },
+			'100': { hex: '#ccfbf1', rgb: '204 251 241' },
+			'200': { hex: '#99f6e4', rgb: '153 246 228' },
+			'300': { hex: '#5eead4', rgb: '94 234 212' },
+			'400': { hex: '#2dd4bf', rgb: '45 212 191' },
+			'500': { hex: '#14b8a6', rgb: '20 184 166' },
+			'600': { hex: '#0d9488', rgb: '13 148 136' },
+			'700': { hex: '#0f766e', rgb: '15 118 110' },
+			'800': { hex: '#115e59', rgb: '17 94 89' },
+			'900': { hex: '#134e4a', rgb: '19 78 74' }
+		}
 	},
-	cyan: {
-		'50': { hex: '#ecfeff', rgb: '236 254 255' },
-		'100': { hex: '#cffafe', rgb: '207 250 254' },
-		'200': { hex: '#a5f3fc', rgb: '165 243 252' },
-		'300': { hex: '#67e8f9', rgb: '103 232 249' },
-		'400': { hex: '#22d3ee', rgb: '34 211 238' },
-		'500': { hex: '#06b6d4', rgb: '6 182 212' },
-		'600': { hex: '#0891b2', rgb: '8 145 178' },
-		'700': { hex: '#0e7490', rgb: '14 116 144' },
-		'800': { hex: '#155e75', rgb: '21 94 117' },
-		'900': { hex: '#164e63', rgb: '22 78 99' }
+	{
+		label: 'cyan',
+		shades: {
+			'50': { hex: '#ecfeff', rgb: '236 254 255' },
+			'100': { hex: '#cffafe', rgb: '207 250 254' },
+			'200': { hex: '#a5f3fc', rgb: '165 243 252' },
+			'300': { hex: '#67e8f9', rgb: '103 232 249' },
+			'400': { hex: '#22d3ee', rgb: '34 211 238' },
+			'500': { hex: '#06b6d4', rgb: '6 182 212' },
+			'600': { hex: '#0891b2', rgb: '8 145 178' },
+			'700': { hex: '#0e7490', rgb: '14 116 144' },
+			'800': { hex: '#155e75', rgb: '21 94 117' },
+			'900': { hex: '#164e63', rgb: '22 78 99' }
+		}
 	},
-	sky: {
-		'50': { hex: '#f0f9ff', rgb: '240 249 255' },
-		'100': { hex: '#e0f2fe', rgb: '224 242 254' },
-		'200': { hex: '#bae6fd', rgb: '186 230 253' },
-		'300': { hex: '#7dd3fc', rgb: '125 211 252' },
-		'400': { hex: '#38bdf8', rgb: '56 189 248' },
-		'500': { hex: '#0ea5e9', rgb: '14 165 233' },
-		'600': { hex: '#0284c7', rgb: '2 132 199' },
-		'700': { hex: '#0369a1', rgb: '3 105 161' },
-		'800': { hex: '#075985', rgb: '7 89 133' },
-		'900': { hex: '#0c4a6e', rgb: '12 74 110' }
+	{
+		label: 'sky',
+		shades: {
+			'50': { hex: '#f0f9ff', rgb: '240 249 255' },
+			'100': { hex: '#e0f2fe', rgb: '224 242 254' },
+			'200': { hex: '#bae6fd', rgb: '186 230 253' },
+			'300': { hex: '#7dd3fc', rgb: '125 211 252' },
+			'400': { hex: '#38bdf8', rgb: '56 189 248' },
+			'500': { hex: '#0ea5e9', rgb: '14 165 233' },
+			'600': { hex: '#0284c7', rgb: '2 132 199' },
+			'700': { hex: '#0369a1', rgb: '3 105 161' },
+			'800': { hex: '#075985', rgb: '7 89 133' },
+			'900': { hex: '#0c4a6e', rgb: '12 74 110' }
+		}
 	},
-	blue: {
-		'50': { hex: '#eff6ff', rgb: '239 246 255' },
-		'100': { hex: '#dbeafe', rgb: '219 234 254' },
-		'200': { hex: '#bfdbfe', rgb: '191 219 254' },
-		'300': { hex: '#93c5fd', rgb: '147 197 253' },
-		'400': { hex: '#60a5fa', rgb: '96 165 250' },
-		'500': { hex: '#3b82f6', rgb: '59 130 246' },
-		'600': { hex: '#2563eb', rgb: '37 99 235' },
-		'700': { hex: '#1d4ed8', rgb: '29 78 216' },
-		'800': { hex: '#1e40af', rgb: '30 64 175' },
-		'900': { hex: '#1e3a8a', rgb: '30 58 138' }
+	{
+		label: 'blue',
+		shades: {
+			'50': { hex: '#eff6ff', rgb: '239 246 255' },
+			'100': { hex: '#dbeafe', rgb: '219 234 254' },
+			'200': { hex: '#bfdbfe', rgb: '191 219 254' },
+			'300': { hex: '#93c5fd', rgb: '147 197 253' },
+			'400': { hex: '#60a5fa', rgb: '96 165 250' },
+			'500': { hex: '#3b82f6', rgb: '59 130 246' },
+			'600': { hex: '#2563eb', rgb: '37 99 235' },
+			'700': { hex: '#1d4ed8', rgb: '29 78 216' },
+			'800': { hex: '#1e40af', rgb: '30 64 175' },
+			'900': { hex: '#1e3a8a', rgb: '30 58 138' }
+		}
 	},
-	indigo: {
-		'50': { hex: '#eef2ff', rgb: '238 242 255' },
-		'100': { hex: '#e0e7ff', rgb: '224 231 255' },
-		'200': { hex: '#c7d2fe', rgb: '199 210 254' },
-		'300': { hex: '#a5b4fc', rgb: '165 180 252' },
-		'400': { hex: '#818cf8', rgb: '129 140 248' },
-		'500': { hex: '#6366f1', rgb: '99 102 241' },
-		'600': { hex: '#4f46e5', rgb: '79 70 229' },
-		'700': { hex: '#4338ca', rgb: '67 56 202' },
-		'800': { hex: '#3730a3', rgb: '55 48 163' },
-		'900': { hex: '#312e81', rgb: '49 46 129' }
+	{
+		label: 'indigo',
+		shades: {
+			'50': { hex: '#eef2ff', rgb: '238 242 255' },
+			'100': { hex: '#e0e7ff', rgb: '224 231 255' },
+			'200': { hex: '#c7d2fe', rgb: '199 210 254' },
+			'300': { hex: '#a5b4fc', rgb: '165 180 252' },
+			'400': { hex: '#818cf8', rgb: '129 140 248' },
+			'500': { hex: '#6366f1', rgb: '99 102 241' },
+			'600': { hex: '#4f46e5', rgb: '79 70 229' },
+			'700': { hex: '#4338ca', rgb: '67 56 202' },
+			'800': { hex: '#3730a3', rgb: '55 48 163' },
+			'900': { hex: '#312e81', rgb: '49 46 129' }
+		}
 	},
-	violet: {
-		'50': { hex: '#f5f3ff', rgb: '245 243 255' },
-		'100': { hex: '#ede9fe', rgb: '237 233 254' },
-		'200': { hex: '#ddd6fe', rgb: '221 214 254' },
-		'300': { hex: '#c4b5fd', rgb: '196 181 253' },
-		'400': { hex: '#a78bfa', rgb: '167 139 250' },
-		'500': { hex: '#8b5cf6', rgb: '139 92 246' },
-		'600': { hex: '#7c3aed', rgb: '124 58 237' },
-		'700': { hex: '#6d28d9', rgb: '109 40 217' },
-		'800': { hex: '#5b21b6', rgb: '91 33 182' },
-		'900': { hex: '#4c1d95', rgb: '76 29 149' }
+	{
+		label: 'violet',
+		shades: {
+			'50': { hex: '#f5f3ff', rgb: '245 243 255' },
+			'100': { hex: '#ede9fe', rgb: '237 233 254' },
+			'200': { hex: '#ddd6fe', rgb: '221 214 254' },
+			'300': { hex: '#c4b5fd', rgb: '196 181 253' },
+			'400': { hex: '#a78bfa', rgb: '167 139 250' },
+			'500': { hex: '#8b5cf6', rgb: '139 92 246' },
+			'600': { hex: '#7c3aed', rgb: '124 58 237' },
+			'700': { hex: '#6d28d9', rgb: '109 40 217' },
+			'800': { hex: '#5b21b6', rgb: '91 33 182' },
+			'900': { hex: '#4c1d95', rgb: '76 29 149' }
+		}
 	},
-	purple: {
-		'50': { hex: '#faf5ff', rgb: '250 245 255' },
-		'100': { hex: '#f3e8ff', rgb: '243 232 255' },
-		'200': { hex: '#e9d5ff', rgb: '233 213 255' },
-		'300': { hex: '#d8b4fe', rgb: '216 180 254' },
-		'400': { hex: '#c084fc', rgb: '192 132 252' },
-		'500': { hex: '#a855f7', rgb: '168 85 247' },
-		'600': { hex: '#9333ea', rgb: '147 51 234' },
-		'700': { hex: '#7e22ce', rgb: '126 34 206' },
-		'800': { hex: '#6b21a8', rgb: '107 33 168' },
-		'900': { hex: '#581c87', rgb: '88 28 135' }
+	{
+		label: 'purple',
+		shades: {
+			'50': { hex: '#faf5ff', rgb: '250 245 255' },
+			'100': { hex: '#f3e8ff', rgb: '243 232 255' },
+			'200': { hex: '#e9d5ff', rgb: '233 213 255' },
+			'300': { hex: '#d8b4fe', rgb: '216 180 254' },
+			'400': { hex: '#c084fc', rgb: '192 132 252' },
+			'500': { hex: '#a855f7', rgb: '168 85 247' },
+			'600': { hex: '#9333ea', rgb: '147 51 234' },
+			'700': { hex: '#7e22ce', rgb: '126 34 206' },
+			'800': { hex: '#6b21a8', rgb: '107 33 168' },
+			'900': { hex: '#581c87', rgb: '88 28 135' }
+		}
 	},
-	fuchsia: {
-		'50': { hex: '#fdf4ff', rgb: '253 244 255' },
-		'100': { hex: '#fae8ff', rgb: '250 232 255' },
-		'200': { hex: '#f5d0fe', rgb: '245 208 254' },
-		'300': { hex: '#f0abfc', rgb: '240 171 252' },
-		'400': { hex: '#e879f9', rgb: '232 121 249' },
-		'500': { hex: '#d946ef', rgb: '217 70 239' },
-		'600': { hex: '#c026d3', rgb: '192 38 211' },
-		'700': { hex: '#a21caf', rgb: '162 28 175' },
-		'800': { hex: '#86198f', rgb: '134 25 143' },
-		'900': { hex: '#701a75', rgb: '112 26 117' }
+	{
+		label: 'fuchsia',
+		shades: {
+			'50': { hex: '#fdf4ff', rgb: '253 244 255' },
+			'100': { hex: '#fae8ff', rgb: '250 232 255' },
+			'200': { hex: '#f5d0fe', rgb: '245 208 254' },
+			'300': { hex: '#f0abfc', rgb: '240 171 252' },
+			'400': { hex: '#e879f9', rgb: '232 121 249' },
+			'500': { hex: '#d946ef', rgb: '217 70 239' },
+			'600': { hex: '#c026d3', rgb: '192 38 211' },
+			'700': { hex: '#a21caf', rgb: '162 28 175' },
+			'800': { hex: '#86198f', rgb: '134 25 143' },
+			'900': { hex: '#701a75', rgb: '112 26 117' }
+		}
 	},
-	pink: {
-		'50': { hex: '#fdf2f8', rgb: '253 242 248' },
-		'100': { hex: '#fce7f3', rgb: '252 231 243' },
-		'200': { hex: '#fbcfe8', rgb: '251 207 232' },
-		'300': { hex: '#f9a8d4', rgb: '249 168 212' },
-		'400': { hex: '#f472b6', rgb: '244 114 182' },
-		'500': { hex: '#ec4899', rgb: '236 72 153' },
-		'600': { hex: '#db2777', rgb: '219 39 119' },
-		'700': { hex: '#be185d', rgb: '190 24 93' },
-		'800': { hex: '#9d174d', rgb: '157 23 77' },
-		'900': { hex: '#831843', rgb: '131 24 67' }
+	{
+		label: 'pink',
+		shades: {
+			'50': { hex: '#fdf2f8', rgb: '253 242 248' },
+			'100': { hex: '#fce7f3', rgb: '252 231 243' },
+			'200': { hex: '#fbcfe8', rgb: '251 207 232' },
+			'300': { hex: '#f9a8d4', rgb: '249 168 212' },
+			'400': { hex: '#f472b6', rgb: '244 114 182' },
+			'500': { hex: '#ec4899', rgb: '236 72 153' },
+			'600': { hex: '#db2777', rgb: '219 39 119' },
+			'700': { hex: '#be185d', rgb: '190 24 93' },
+			'800': { hex: '#9d174d', rgb: '157 23 77' },
+			'900': { hex: '#831843', rgb: '131 24 67' }
+		}
 	},
-	rose: {
-		'50': { hex: '#fff1f2', rgb: '255 241 242' },
-		'100': { hex: '#ffe4e6', rgb: '255 228 230' },
-		'200': { hex: '#fecdd3', rgb: '254 205 211' },
-		'300': { hex: '#fda4af', rgb: '253 164 175' },
-		'400': { hex: '#fb7185', rgb: '251 113 133' },
-		'500': { hex: '#f43f5e', rgb: '244 63 94' },
-		'600': { hex: '#e11d48', rgb: '225 29 72' },
-		'700': { hex: '#be123c', rgb: '190 18 60' },
-		'800': { hex: '#9f1239', rgb: '159 18 57' },
-		'900': { hex: '#881337', rgb: '136 19 55' }
+	{
+		label: 'rose',
+		shades: {
+			'50': { hex: '#fff1f2', rgb: '255 241 242' },
+			'100': { hex: '#ffe4e6', rgb: '255 228 230' },
+			'200': { hex: '#fecdd3', rgb: '254 205 211' },
+			'300': { hex: '#fda4af', rgb: '253 164 175' },
+			'400': { hex: '#fb7185', rgb: '251 113 133' },
+			'500': { hex: '#f43f5e', rgb: '244 63 94' },
+			'600': { hex: '#e11d48', rgb: '225 29 72' },
+			'700': { hex: '#be123c', rgb: '190 18 60' },
+			'800': { hex: '#9f1239', rgb: '159 18 57' },
+			'900': { hex: '#881337', rgb: '136 19 55' }
+		}
 	}
-};
+];
diff --git a/src/docs/DocsThemer/helpers.ts b/src/docs/DocsThemer/helpers.ts
new file mode 100644
index 0000000000..6900edcad1
--- /dev/null
+++ b/src/docs/DocsThemer/helpers.ts
@@ -0,0 +1,54 @@
+// Doc Themer Helper Functions
+
+// @ts-ignore
+import paletteGenerator from '@bobthered/tailwindcss-palette-generator';
+import { colorsTailwind } from './colors';
+
+// Find Color
+export function findColor(colorName: string): any {
+	return colorsTailwind.find((c) => c.label === colorName);
+}
+
+// Source: https://github.com/bobthered/tailwindcss-palette-generator
+export function genHexPalette(key: string, hexColor: string): any {
+	// Generate base palette
+	const hexShades: any = paletteGenerator({ names: [key], colors: [hexColor] });
+	delete hexShades[key][950]; // drop swatch 950
+	// Generate RGB values and map data structure
+	let hexRgbShades: any = {};
+	let shadeValues: string[] = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
+	Object.values(hexShades[key]).forEach((hexColor, i) => {
+		hexRgbShades[shadeValues[i]] = { hex: hexColor, rgb: hexToRgb(hexColor) };
+	});
+	// Update Hex Palette
+	return { label: key, shades: hexRgbShades, source: hexColor };
+}
+
+// Source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+export function hexToRgb(hex: any): string {
+	hex = hex.replace('#', '');
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+	if (result) {
+		const color = { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) };
+		return `${color.r} ${color.g} ${color.b}`;
+	}
+	return '(invalid)';
+}
+
+// Generates the CSS snippet
+export function generateCssCode(isTailwind: boolean, currentPalette: any): string {
+	let css: string = '';
+	Object.entries(currentPalette).forEach((set: any, i: number) => {
+		const [key, v] = set;
+		// Generate label
+		const generatedLabel: string = v.source ? v.source : v.label + ' | ' + v.shades['500'].hex;
+		// Set First Row of Set
+		css += `${i === 0 ? `\t/* =~= Skeleton Theme | ${isTailwind ? 'Tailwind' : 'Custom'} =~= */\n` : '\n'}\t/* ~ ${key} (${generatedLabel}) ~ */`;
+		// Per each entry, add custom property key/value row
+		Object.entries(v.shades).forEach((shade: any) => {
+			const [shadeKey, shadeValue] = shade;
+			css += `\n\t--color-${key}-${shadeKey}: ${shadeValue['rgb']}; /* ⬅ ${shadeValue['hex']} */`;
+		});
+	});
+	return `:root {\n${css}\n}`;
+}
diff --git a/src/lib/utilities/CodeBlock/CodeBlock.svelte b/src/lib/utilities/CodeBlock/CodeBlock.svelte
index bc1b6b46b1..78b05b1e02 100644
--- a/src/lib/utilities/CodeBlock/CodeBlock.svelte
+++ b/src/lib/utilities/CodeBlock/CodeBlock.svelte
@@ -50,7 +50,7 @@
 {#if language && code}
 <div class="code-block {classesBase}" data-testid="code-block">
 	<!-- Header -->
-	<header class="cb-header {cHeader}">
+	<header class="cb-header {cHeader} {background} sticky top-0">
 		<!-- Language -->
 		<span class="text-white/60">{languageFormatter(language)}</span>
 		<!-- Copy Button -->
diff --git a/src/routes/(inner)/guides/themes/+page.svelte b/src/routes/(inner)/guides/themes/+page.svelte
index cd47db7a08..5ba19a9b6e 100644
--- a/src/routes/(inner)/guides/themes/+page.svelte
+++ b/src/routes/(inner)/guides/themes/+page.svelte
@@ -1,16 +1,12 @@
 <script lang="ts">
-	import { writable, type Writable } from 'svelte/store';
 	import { storeFramework } from '$docs/stores';
 
-	import { DataTable, Divider, RadioGroup, RadioItem, TabGroup, Tab } from '@brainandbones/skeleton';
-	import { toastStore, type ToastMessage } from '$lib/utilities/Toast/stores';
-
+	// Components
+	import { DataTable, Divider, TabGroup, Tab } from '@brainandbones/skeleton';
 	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
-	import DocsThemerTailwind from '$docs/DocsThemer/DocsThemerTailwind.svelte';
-	import DocsThemerHex from '$docs/DocsThemer/DocsThemerHex.svelte';
 
 	// Stores
-	const storeGenerator: Writable<string> = writable('tailwind'); // tailwind | hex
+	import { toastStore, type ToastMessage } from '$lib/utilities/Toast/stores';
 
 	// Presets
 	const presetUrl: string = 'https://github.com/Brain-Bones/skeleton/blob/master/src/themes';
@@ -41,16 +37,15 @@
 	}
 
 	// Tables
-	// prettier-ignore
 	const tableProps: any = {
-        headings: ['Name', 'Class', 'Description'],
-        source: [
-            {n: 'Primary', c:'[x]-primary-[50-900]', d:'Typically your primary brand color.'},
-            {n: 'Accent', c:'[x]-accent-[50-900]', d:'An accent for offsets or supplementary values.'},
-            {n: 'Warning', c:'[x]-warning-[50-900]', d:'May be used for warnings, alerts, and invalid inputs.'},
-            {n: 'Surface', c:'[x]-surface-[50-900]', d:'May be used for backgrounds, card elements, and some typography.'},
-        ],
-    };
+		headings: ['Name', 'Class', 'Description'],
+		source: [
+			['Primary', '[x]-primary-[50-900]', 'Typically your primary brand color.'],
+			['Accent', '[x]-accent-[50-900]', 'An accent for offsets or supplementary values.'],
+			['Warning', '[x]-warning-[50-900]', 'May be used for warnings, alerts, and invalid inputs.'],
+			['Surface', '[x]-surface-[50-900]', 'May be used for backgrounds, card elements, and some typography.']
+		]
+	};
 </script>
 
 <div class="space-y-8">
@@ -60,110 +55,65 @@
 		<p>
 			Skeleton themes integrate with Tailwind using <a href="https://tailwindcss.com/docs/customizing-colors#using-css-variables" target="_blank">CSS custom properties</a> converted to RGB values.
 			This enables the use of <a href="https://tailwindcss.com/docs/background-color#changing-the-opacity" target="_blank">background opacity</a> as well as support for
-			<a href="https://tailwindcss.com/docs/dark-mode" target="_blank">dark mode</a>. Components intelligently implement each color from the theme's palette.
+			<a href="https://tailwindcss.com/docs/dark-mode" target="_blank">dark mode</a>. Components intelligently adapt to your theme color palette.
 		</p>
 	</header>
 
 	<Divider />
 
-	<!-- Presets -->
+	<!-- Select Theme -->
 	<section class="space-y-4">
-		<h2>Preset Themes</h2>
-		<p>A handful of curated preset themes are available below.</p>
-		<TabGroup selected={storeFramework}>
-			<Tab value="sveltekit">SvelteKit</Tab>
-			<Tab value="vite">Vite (Svelte)</Tab>
-			<Tab value="astro">Astro</Tab>
-		</TabGroup>
-		<!-- Framework: SvelteKit -->
-		{#if $storeFramework === 'sveltekit'}
-			<p>Import your desired preset into <code>src/routes/+layout.svelte</code>.</p>
-			<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--\nimport '../app.postcss';\n`} />
-			<!-- Framework: Vite (Svelte) -->
-		{:else if $storeFramework === 'vite'}
-			<p>Import your desired preset into <code>/src/main.js</code>.</p>
-			<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--\nimport '../app.css';\n`} />
-			<!-- Framework: Astro -->
-		{:else if $storeFramework === 'astro'}
-			<p>Import your desired preset into <code>/src/layouts/LayoutBasic.astro</code>.</p>
-			<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--\nimport '../styles/base.css';`} />
-		{/if}
-		<!-- Preset Previews -->
-		<p>Tap any theme below to automatically copy the import statement to your clipboard.</p>
-		<nav class="grid grid-cols-1 md:grid-cols-3 gap-4">
-			{#each presets as preset}
-				<div
-					on:click={() => {
-						copyThemeToClipboard(preset.name);
-					}}
-					class="theme-set"
-					style:background={preset.surface}
-					target="_blank"
-				>
-					<span class="text-sm">{preset.name}</span>
-					<ul class="grid grid-cols-3 gap-2">
-						{#each preset.colors as color}
-							<li class="aspect-square w-4 rounded-full" style:background={color} />
-						{/each}
-					</ul>
-				</div>
-			{/each}
-		</nav>
-	</section>
-
-	<Divider />
-
-	<!-- Theme Generator -->
-	<section class="space-y-4">
-		<h2>Theme Generator</h2>
-		<p>Use the form below to craft a custom theme. Each color represents swatch 500 (ex: <code>bg-primary-500</code>).</p>
-		<!-- Card -->
-		<div class="card">
-			<header class="card-header flex flex-col md:items-center space-y-4">
-				<RadioGroup selected={storeGenerator} display="flex md:inline-flex">
-					<RadioItem value="tailwind">Tailwind Mode</RadioItem>
-					<RadioItem value="hex">Hex Mode</RadioItem>
-				</RadioGroup>
-				<!-- Messaging -->
-				{#if $storeGenerator === 'tailwind'}
-					<span class="block text-center">
-						Create a theme using <a href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Tailwind's color palette</a>. This typically provides the best results.
-					</span>
-				{/if}
-				{#if $storeGenerator === 'hex'}
-					<span class="block text-center"> For advanced users. Enter hex color values to generate a completely unique theme. </span>
-				{/if}
-			</header>
-			<div class="card-body">
-				<!-- Generator Components -->
-				{#if $storeGenerator === 'tailwind'}<DocsThemerTailwind />{/if}
-				{#if $storeGenerator === 'hex'}<DocsThemerHex />{/if}
+		<h2>Select a Theme</h2>
+		<p>Select from any of our curated preset themes, or use the theme generator to create your own custom theme.</p>
+		<div class="card card-body space-y-4">
+			<!-- Presets -->
+			<p>Tap any theme below to automatically copy the import statement to your clipboard.</p>
+			<nav class="grid grid-cols-1 md:grid-cols-3 gap-4">
+				{#each presets as preset}
+					<div
+						on:click={() => {
+							copyThemeToClipboard(preset.name);
+						}}
+						class="theme-set"
+						style:background={preset.surface}
+						target="_blank"
+					>
+						<span class="text-sm">{preset.name}</span>
+						<ul class="grid grid-cols-3 gap-2">
+							{#each preset.colors as color}
+								<li class="aspect-square w-4 rounded-full" style:background={color} />
+							{/each}
+						</ul>
+					</div>
+				{/each}
+			</nav>
+			<!-- Implement -->
+			<TabGroup selected={storeFramework}>
+				<Tab value="sveltekit">SvelteKit</Tab>
+				<Tab value="vite">Vite (Svelte)</Tab>
+				<Tab value="astro">Astro</Tab>
+			</TabGroup>
+			<!-- Framework: SvelteKit -->
+			{#if $storeFramework === 'sveltekit'}
+				<p>Import your desired preset into <code>src/routes/+layout.svelte</code>.</p>
+				<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--\nimport '../app.postcss';\n`} />
+				<!-- Framework: Vite (Svelte) -->
+			{:else if $storeFramework === 'vite'}
+				<p>Import your desired preset into <code>/src/main.js</code>.</p>
+				<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--\nimport '../app.css';\n`} />
+				<!-- Framework: Astro -->
+			{:else if $storeFramework === 'astro'}
+				<p>Import your desired preset into <code>/src/layouts/LayoutBasic.astro</code>.</p>
+				<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--\nimport '../styles/base.css';`} />
+			{/if}
+		</div>
+		<!-- Generator -->
+		<div class="card card-body flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
+			<div class="space-y-2">
+				<p>Create your own custom theme.</p>
 			</div>
+			<a class="btn btn-filled-accent" href="/guides/themes/generator">Themes Generator &rarr;</a>
 		</div>
-		<p class="block">
-			TIP: Use <a href="https://tailwind.simeongriggs.dev/blue/3B82F6" target="_blank">Palette Generator</a> to complete custom palette curation. The
-			<a href="https://marketplace.visualstudio.com/items?itemName=dakshmiglani.hex-to-rgba" target="_blank">Hex-To-RGB extension</a>
-			can convert colors from <strong>Hex &rarr; RGB</strong> in bulk within <strong>VS Code</strong>.
-		</p>
-		<!-- Instructions -->
-		<TabGroup selected={storeFramework}>
-			<Tab value="sveltekit">SvelteKit</Tab>
-			<Tab value="vite">Vite (Svelte)</Tab>
-			<Tab value="astro">Astro</Tab>
-		</TabGroup>
-		<!-- Framework: SvelteKit -->
-		{#if $storeFramework === 'sveltekit'}
-			<p>Add your custom theme to <code>/src/theme.postcss</code>, then import this file into <code>/src/routes/+layout.svelte</code>.</p>
-			<CodeBlock language="typescript" code={`import '../theme.postcss'; // <--\nimport '../app.postcss';\n`} />
-			<!-- Framework. Vite (Svelte) -->
-		{:else if $storeFramework === 'vite'}
-			<p>Add your custom theme to <code>/src/theme.css</code>, then import this file into <code>/src/main.js</code>:</p>
-			<CodeBlock language="typescript" code={`import '../theme.css'; // <--\nimport '../app.css';\n`} />
-			<!-- Framework: Astro -->
-		{:else if $storeFramework === 'astro'}
-			<p>Add your custom theme to <code>/src/styles/theme.css</code>, then import this file into <code>/src/layouts/LayoutBasic.astro</code>.</p>
-			<CodeBlock language="typescript" code={`import '../styles/theme.css'; // <--\nimport '../styles/base.css';`} />
-		{/if}
 	</section>
 
 	<Divider />
diff --git a/src/routes/(inner)/guides/themes/generator/+page.svelte b/src/routes/(inner)/guides/themes/generator/+page.svelte
new file mode 100644
index 0000000000..22d6a9e9f2
--- /dev/null
+++ b/src/routes/(inner)/guides/themes/generator/+page.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { storeFramework } from '$docs/stores';
+
+	// Components
+	import Alert from '$lib/components/Alert/Alert.svelte';
+	import Breadcrumb from '$lib/components/Breadcrumb/Breadcrumb.svelte';
+	import Crumb from '$lib/components/Breadcrumb/Crumb.svelte';
+	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
+	import TabGroup from '$lib/components/Tab/TabGroup.svelte';
+	import Tab from '$lib/components/Tab/Tab.svelte';
+
+	// Docs
+	import DocsThemer from '$docs/DocsThemer/DocsThemer.svelte';
+</script>
+
+<div class="space-y-8">
+	<!-- Breadcrumbs -->
+	<Breadcrumb>
+		<Crumb href="/guides/themes">Themes</Crumb>
+		<Crumb>Generator</Crumb>
+	</Breadcrumb>
+
+	<!-- Header -->
+	<header class="space-y-4">
+		<h1>Theme Generator</h1>
+		<TabGroup selected={storeFramework}>
+			<Tab value="sveltekit">SvelteKit</Tab>
+			<Tab value="vite">Vite (Svelte)</Tab>
+			<Tab value="astro">Astro</Tab>
+		</TabGroup>
+		{#if $storeFramework === 'sveltekit'}
+			<p>Add your custom theme to <code>/src/theme.postcss</code>, then import this file into <code>/src/routes/+layout.svelte</code>.</p>
+			<CodeBlock language="typescript" code={`import '../theme.postcss'; // <--\nimport '../app.postcss';\n`} />
+		{:else if $storeFramework === 'vite'}
+			<p>Add your custom theme to <code>/src/theme.css</code>, then import this file into <code>/src/main.js</code>:</p>
+			<CodeBlock language="typescript" code={`import '../theme.css'; // <--\nimport '../app.css';\n`} />
+		{:else if $storeFramework === 'astro'}
+			<p>Add your custom theme to <code>/src/styles/theme.css</code>, then import this file into <code>/src/layouts/LayoutBasic.astro</code>.</p>
+			<CodeBlock language="typescript" code={`import '../styles/theme.css'; // <--\nimport '../styles/base.css';`} />
+		{/if}
+	</header>
+
+	<hr />
+
+	<!-- Generator (new) -->
+	<section>
+		<DocsThemer />
+	</section>
+
+	<!-- Extras -->
+	<Alert>
+		<svelte:fragment slot="title">Pro Tip</svelte:fragment>
+		Use <a href="https://tailwind.simeongriggs.dev/blue/3B82F6" target="_blank">Palette Generator</a> to curate a theme from scratch, then pair with the
+		<a href="https://marketplace.visualstudio.com/items?itemName=dakshmiglani.hex-to-rgba" target="_blank">Hex-To-RGB extension</a>
+		to convert colors to RGB in bulk with VS Code.
+	</Alert>
+</div>

From 6e8a31f8abd9a996ce5f810717ac0195cfc82a6d Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Thu, 22 Sep 2022 17:45:04 -0500
Subject: [PATCH 02/11] Transitions and cleanup

---
 src/docs/DocsThemer/DocsThemer.svelte         | 12 +--
 src/docs/DocsThemer/Swatches.svelte           |  8 +-
 src/lib/themes/theme-test.css                 | 90 +++++++++----------
 .../guides/themes/generator/+page.svelte      |  6 +-
 4 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
index 5854ce725d..3f3c6f73a3 100644
--- a/src/docs/DocsThemer/DocsThemer.svelte
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -23,10 +23,10 @@
 		surface: findColor('gray')
 	};
 	const formDataHex: any = {
-		primary: findColor('emerald').shades['500'].hex,
-		accent: findColor('indigo').shades['500'].hex,
-		warning: findColor('rose').shades['500'].hex,
-		surface: findColor('gray').shades['500'].hex
+		primary: findColor('sky').shades['500'].hex,
+		accent: findColor('violet').shades['500'].hex,
+		warning: findColor('pink').shades['500'].hex,
+		surface: findColor('neutral').shades['500'].hex
 	};
 	let paletteHex: any = {
 		primary: genHexPalette('primary', formDataHex.primary),
@@ -61,7 +61,7 @@
 			<RadioItem value={false}>Custom</RadioItem>
 		</RadioGroup>
 		{#if $storeMode}
-			<a class="btn btn-sm" href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Reference</a>
+			<a class="btn btn-sm" href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Color Reference</a>
 		{:else}
 			<a class="btn btn-sm" href="https://coolors.co/" target="_blank">Get Inspired</a>
 		{/if}
@@ -135,7 +135,7 @@
 			</label>
 			<Swatches palette={currentPalette.surface.shades} />
 		</div>
-        <p class="text-sm text-center">Each color you {$storeMode ? 'select' : 'input'} represents swatch 500 (ex: <code>bg-primary-500</code>).</p>
+        <p class="text-xs text-center">Each color {$storeMode ? 'selected' : 'input'} represents swatch 500.</p>
 	</section>
 
 	<!-- CSS Snipnpet -->
diff --git a/src/docs/DocsThemer/Swatches.svelte b/src/docs/DocsThemer/Swatches.svelte
index ce928ab117..696ae1593a 100644
--- a/src/docs/DocsThemer/Swatches.svelte
+++ b/src/docs/DocsThemer/Swatches.svelte
@@ -6,13 +6,13 @@
 	}
 </script>
 
-<div class="mt-2 grid grid-cols-10 w-full">
+<div class="swatches mt-2 grid grid-cols-10 w-full">
 	{#each objectValues(palette) as shade, i}
-		<div class="flex flex-col-reverse xl:flex-col">
+		<div class="swatch flex flex-col-reverse xl:flex-col">
 			<!-- Label -->
-			<div class="block text-white text-xs mt-2 xl:mb-2 text-center" class:underline={i === 5}>{labels[i]}</div>
+			<div class="swatch-label text-white text-xs mt-2 xl:mb-2 text-center" class:underline={i === 5}>{labels[i]}</div>
 			<!-- Color -->
-			<div class="h-[40px]" style:background={shade.hex ? shade.hex : shade} />
+			<div class="swatch-color h-[40px] transition-colors duration-200" style:background={shade.hex ? shade.hex : shade} />
 		</div>
 	{/each}
 </div>
diff --git a/src/lib/themes/theme-test.css b/src/lib/themes/theme-test.css
index 82091883c3..138804410f 100644
--- a/src/lib/themes/theme-test.css
+++ b/src/lib/themes/theme-test.css
@@ -1,47 +1,47 @@
 :root {
-	/* --- Tailwind Theme --- */
-	/* primary (yellow) */
-	--color-primary-50: 254 252 232;
-	--color-primary-100: 254 249 195;
-	--color-primary-200: 254 240 138;
-	--color-primary-300: 253 224 71;
-	--color-primary-400: 250 204 21;
-	--color-primary-500: 234 179 8;
-	--color-primary-600: 202 138 4;
-	--color-primary-700: 161 98 7;
-	--color-primary-800: 133 77 14;
-	--color-primary-900: 113 63 18;
-	/* accent (orange) */
-	--color-accent-50: 255 247 237;
-	--color-accent-100: 255 237 213;
-	--color-accent-200: 254 215 170;
-	--color-accent-300: 253 186 116;
-	--color-accent-400: 251 146 60;
-	--color-accent-500: 249 115 22;
-	--color-accent-600: 234 88 12;
-	--color-accent-700: 194 65 12;
-	--color-accent-800: 154 52 18;
-	--color-accent-900: 124 45 18;
-	/* warning (teal) */
-	--color-warning-50: 240 253 250;
-	--color-warning-100: 204 251 241;
-	--color-warning-200: 153 246 228;
-	--color-warning-300: 94 234 212;
-	--color-warning-400: 45 212 191;
-	--color-warning-500: 20 184 166;
-	--color-warning-600: 13 148 136;
-	--color-warning-700: 15 118 110;
-	--color-warning-800: 17 94 89;
-	--color-warning-900: 19 78 74;
-	/* surface (rose) */
-	--color-surface-50: 255 241 242;
-	--color-surface-100: 255 228 230;
-	--color-surface-200: 254 205 211;
-	--color-surface-300: 253 164 175;
-	--color-surface-400: 251 113 133;
-	--color-surface-500: 244 63 94;
-	--color-surface-600: 225 29 72;
-	--color-surface-700: 190 18 60;
-	--color-surface-800: 159 18 57;
-	--color-surface-900: 136 19 55;
+	/* =~= Skeleton Theme | Custom =~= */
+	/* ~ primary (#0ea5e9) ~ */
+	--color-primary-50: 245 252 254; /* ⬅ #f5fcfe */
+	--color-primary-100: 231 246 254; /* ⬅ #e7f6fe */
+	--color-primary-200: 207 238 252; /* ⬅ #cfeefc */
+	--color-primary-300: 168 224 250; /* ⬅ #a8e0fa */
+	--color-primary-400: 81 193 245; /* ⬅ #51c1f5 */
+	--color-primary-500: 13 156 222; /* ⬅ #0d9cde */
+	--color-primary-600: 9 112 159; /* ⬅ #09709f */
+	--color-primary-700: 7 81 116; /* ⬅ #075174 */
+	--color-primary-800: 4 47 67; /* ⬅ #042f43 */
+	--color-primary-900: 2 24 34; /* ⬅ #021822 */
+	/* ~ accent (#8b5cf6) ~ */
+	--color-accent-50: 248 245 254; /* ⬅ #f8f5fe */
+	--color-accent-100: 238 231 254; /* ⬅ #eee7fe */
+	--color-accent-200: 220 207 252; /* ⬅ #dccffc */
+	--color-accent-300: 193 168 250; /* ⬅ #c1a8fa */
+	--color-accent-400: 130 81 246; /* ⬅ #8251f6 */
+	--color-accent-500: 75 12 223; /* ⬅ #4b0cdf */
+	--color-accent-600: 54 8 160; /* ⬅ #3608a0 */
+	--color-accent-700: 39 6 116; /* ⬅ #270674 */
+	--color-accent-800: 23 4 68; /* ⬅ #170444 */
+	--color-accent-900: 11 2 34; /* ⬅ #0b0222 */
+	/* ~ warning (#ec4899) ~ */
+	--color-warning-50: 254 246 250; /* ⬅ #fef6fa */
+	--color-warning-100: 253 232 242; /* ⬅ #fde8f2 */
+	--color-warning-200: 250 209 230; /* ⬅ #fad1e6 */
+	--color-warning-300: 246 172 209; /* ⬅ #f6acd1 */
+	--color-warning-400: 238 89 163; /* ⬅ #ee59a3 */
+	--color-warning-500: 212 22 117; /* ⬅ #d41675 */
+	--color-warning-600: 152 16 84; /* ⬅ #981054 */
+	--color-warning-700: 111 12 61; /* ⬅ #6f0c3d */
+	--color-warning-800: 65 7 36; /* ⬅ #410724 */
+	--color-warning-900: 32 3 18; /* ⬅ #200312 */
+	/* ~ surface (#737373) ~ */
+	--color-surface-50: 250 250 250; /* ⬅ #fafafa */
+	--color-surface-100: 242 242 242; /* ⬅ #f2f2f2 */
+	--color-surface-200: 230 230 230; /* ⬅ #e6e6e6 */
+	--color-surface-300: 209 209 209; /* ⬅ #d1d1d1 */
+	--color-surface-400: 163 163 163; /* ⬅ #a3a3a3 */
+	--color-surface-500: 117 117 117; /* ⬅ #757575 */
+	--color-surface-600: 84 84 84; /* ⬅ #545454 */
+	--color-surface-700: 61 61 61; /* ⬅ #3d3d3d */
+	--color-surface-800: 36 36 36; /* ⬅ #242424 */
+	--color-surface-900: 18 18 18; /* ⬅ #121212 */
 }
diff --git a/src/routes/(inner)/guides/themes/generator/+page.svelte b/src/routes/(inner)/guides/themes/generator/+page.svelte
index 22d6a9e9f2..32f07cb14a 100644
--- a/src/routes/(inner)/guides/themes/generator/+page.svelte
+++ b/src/routes/(inner)/guides/themes/generator/+page.svelte
@@ -43,9 +43,9 @@
 	<hr />
 
 	<!-- Generator (new) -->
-	<section>
-		<DocsThemer />
-	</section>
+	<DocsThemer />
+
+	<hr />
 
 	<!-- Extras -->
 	<Alert>

From c623d8ad6728fa91be7e2a4a2fd3d8b2f9a12d68 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 23 Sep 2022 11:16:52 -0500
Subject: [PATCH 03/11] Current progress

---
 src/docs/DocsThemer/DocsThemer.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
index 3f3c6f73a3..049e8cfeb0 100644
--- a/src/docs/DocsThemer/DocsThemer.svelte
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { writable, type Writable } from 'svelte/store';
 
 	// Helpers
@@ -52,8 +53,12 @@
 	// Reactive
 	$: currentPalette = $storeMode === true ? paletteTailwind : paletteHex;
 	$: if (currentPalette) genCssSnippet();
+	// $: liveThemePreview = `\<style\>${cssSnippet}\</style\>`;
 </script>
 
+<!-- Trigger Live Theme Preview -->
+<!-- <svelte:head>{@html liveThemePreview}</svelte:head> -->
+
 <div class="themer space-y-4">
 	<section class="flex justify-between items-center">
 		<RadioGroup selected={storeMode}>
@@ -75,7 +80,7 @@
 			<label class="w-full">
 				<span class="text-white">Primary</span>
 				{#if $storeMode}
-					<select name="primary" id="primary" class="capitalize" bind:value={paletteTailwind.primary} on:change={()=>{genCssSnippet()}}>
+					<select class="capitalize" bind:value={paletteTailwind.primary} on:change={()=>{genCssSnippet()}}>
 						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
 					</select>
 				{:else}
@@ -91,7 +96,7 @@
 			<label class="w-full">
 				<span class="text-white">Accent</span>
 				{#if $storeMode}
-					<select name="accent" id="accent" class="capitalize" bind:value={paletteTailwind.accent} on:change={()=>{genCssSnippet()}}>
+					<select class="capitalize" bind:value={paletteTailwind.accent} on:change={()=>{genCssSnippet()}}>
 						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
 					</select>
 				{:else}
@@ -107,7 +112,7 @@
 			<label class="w-full">
 				<span class="text-white">Warning</span>
 				{#if $storeMode}
-					<select name="warning" id="warning" class="capitalize" bind:value={paletteTailwind.warning} on:change={()=>{genCssSnippet()}}>
+					<select class="capitalize" bind:value={paletteTailwind.warning} on:change={()=>{genCssSnippet()}}>
 						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
 					</select>
 				{:else}
@@ -123,7 +128,7 @@
 			<label class="w-full">
 				<span class="text-white">Surface</span>
 				{#if $storeMode}
-					<select name="surface" id="surface" class="capitalize" bind:value={paletteTailwind.surface} on:change={()=>{genCssSnippet()}}>
+					<select class="capitalize" bind:value={paletteTailwind.surface} on:change={()=>{genCssSnippet()}}>
 						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
 					</select>
 				{:else}

From 90cffa304272d7db6f7e61278e56c5871577e03a Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 23 Sep 2022 13:58:11 -0500
Subject: [PATCH 04/11] Added TW themer randomize

---
 src/docs/DocsThemer/DocsThemer.svelte | 191 ++++++++++++++------------
 src/docs/DocsThemer/helpers.ts        |  15 +-
 2 files changed, 114 insertions(+), 92 deletions(-)

diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
index 049e8cfeb0..60793d6b77 100644
--- a/src/docs/DocsThemer/DocsThemer.svelte
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { writable, type Writable } from 'svelte/store';
 
 	// Helpers
-	import { findColor, genHexPalette, generateCssCode } from './helpers';
+	import { getTailwindColor, randomTailwindColor, genHexPalette, generateCssCode } from './helpers';
 	import { colorsTailwind } from './colors';
 
 	// Components
@@ -17,17 +16,17 @@
 
 	// Local
 	const regexHexColor = new RegExp(/^#[0-9a-f]{6}$/i);
-	const paletteTailwind: any = {
-		primary: findColor('emerald'),
-		accent: findColor('indigo'),
-		warning: findColor('rose'),
-		surface: findColor('gray')
+	let paletteTailwind: any = {
+		primary: getTailwindColor('emerald'),
+		accent: getTailwindColor('indigo'),
+		warning: getTailwindColor('rose'),
+		surface: getTailwindColor('gray')
 	};
 	const formDataHex: any = {
-		primary: findColor('sky').shades['500'].hex,
-		accent: findColor('violet').shades['500'].hex,
-		warning: findColor('pink').shades['500'].hex,
-		surface: findColor('neutral').shades['500'].hex
+		primary: getTailwindColor('sky').shades['500'].hex,
+		accent: getTailwindColor('violet').shades['500'].hex,
+		warning: getTailwindColor('pink').shades['500'].hex,
+		surface: getTailwindColor('neutral').shades['500'].hex
 	};
 	let paletteHex: any = {
 		primary: genHexPalette('primary', formDataHex.primary),
@@ -50,6 +49,16 @@
 		cssSnippet = generateCssCode($storeMode, currentPalette);
 	}
 
+	// Randomize Tailwind Colors
+	function onRandomize(): void {
+		paletteTailwind = {
+			primary: randomTailwindColor(),
+			accent: randomTailwindColor(),
+			warning: randomTailwindColor(),
+			surface: randomTailwindColor()
+		};
+	}
+
 	// Reactive
 	$: currentPalette = $storeMode === true ? paletteTailwind : paletteHex;
 	$: if (currentPalette) genCssSnippet();
@@ -60,87 +69,95 @@
 <!-- <svelte:head>{@html liveThemePreview}</svelte:head> -->
 
 <div class="themer space-y-4">
-	<section class="flex justify-between items-center">
-		<RadioGroup selected={storeMode}>
-			<RadioItem value={true}>Tailwind</RadioItem>
-			<RadioItem value={false}>Custom</RadioItem>
-		</RadioGroup>
-		{#if $storeMode}
-			<a class="btn btn-sm" href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Color Reference</a>
-		{:else}
-			<a class="btn btn-sm" href="https://coolors.co/" target="_blank">Get Inspired</a>
-		{/if}
-	</section>
-
 	<!-- Color Pickers -->
 	<!-- prettier-ignore -->
-	<section class="card card-body !bg-[#141517] !ring-0 space-y-4">
-		<!-- Select Tailwind Colors -->
-		<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
-			<label class="w-full">
-				<span class="text-white">Primary</span>
-				{#if $storeMode}
-					<select class="capitalize" bind:value={paletteTailwind.primary} on:change={()=>{genCssSnippet()}}>
-						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
-					</select>
-				{:else}
-					<input
-						type="text" placeholder="#FFFFFF" bind:value={formDataHex.primary}
-						on:input={() => { onHexInput('primary', formDataHex.primary); }}
-					/>
-				{/if}
-			</label>
-			<Swatches palette={currentPalette.primary.shades} />
-		</div>
-		<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
-			<label class="w-full">
-				<span class="text-white">Accent</span>
-				{#if $storeMode}
-					<select class="capitalize" bind:value={paletteTailwind.accent} on:change={()=>{genCssSnippet()}}>
-						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
-					</select>
-				{:else}
-					<input
-						type="text" placeholder="#FFFFFF" bind:value={formDataHex.accent}
-						on:input={() => { onHexInput('accent', formDataHex.accent); }}
-					/>
-				{/if}
-			</label>
-			<Swatches palette={currentPalette.accent.shades} />
+	<section class="card !bg-[#141517] !ring-0 space-y-4">
+		<!-- Header -->
+		<div class="card-header lg:flex justify-between items-center">
+			<RadioGroup selected={storeMode} display="flex">
+				<RadioItem value={true}>Tailwind</RadioItem>
+				<RadioItem value={false}>Custom</RadioItem>
+			</RadioGroup>
+			<div class="hidden lg:flex items-center space-x-2">
+			{#if $storeMode}
+				<a class="btn btn-sm text-white" href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Reference</a>
+				<button class="btn btn-sm text-white" on:click={onRandomize}>Randomize</button>
+			{:else}
+				<a class="btn btn-sm" href="https://coolors.co/" target="_blank">Get Inspired</a>
+			{/if}
+			</div>
 		</div>
-		<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
-			<label class="w-full">
-				<span class="text-white">Warning</span>
-				{#if $storeMode}
-					<select class="capitalize" bind:value={paletteTailwind.warning} on:change={()=>{genCssSnippet()}}>
-						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
-					</select>
-				{:else}
-					<input
-						type="text" placeholder="#FFFFFF" bind:value={formDataHex.warning}
-						on:input={() => { onHexInput('warning', formDataHex.warning); }}
-					/>
-				{/if}
-			</label>
-			<Swatches palette={currentPalette.warning.shades} />
+		<!-- Settings -->
+		<div class="card-body">
+			<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
+				<label class="w-full">
+					<span class="text-white">Primary</span>
+					{#if $storeMode}
+						<select class="capitalize" bind:value={paletteTailwind.primary} on:change={()=>{genCssSnippet()}}>
+							{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+						</select>
+					{:else}
+						<input
+							type="text" placeholder="#FFFFFF" bind:value={formDataHex.primary}
+							on:input={() => { onHexInput('primary', formDataHex.primary); }}
+						/>
+					{/if}
+				</label>
+				<Swatches palette={currentPalette.primary.shades} />
+			</div>
+			<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
+				<label class="w-full">
+					<span class="text-white">Accent</span>
+					{#if $storeMode}
+						<select class="capitalize" bind:value={paletteTailwind.accent} on:change={()=>{genCssSnippet()}}>
+							{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+						</select>
+					{:else}
+						<input
+							type="text" placeholder="#FFFFFF" bind:value={formDataHex.accent}
+							on:input={() => { onHexInput('accent', formDataHex.accent); }}
+						/>
+					{/if}
+				</label>
+				<Swatches palette={currentPalette.accent.shades} />
+			</div>
+			<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
+				<label class="w-full">
+					<span class="text-white">Warning</span>
+					{#if $storeMode}
+						<select class="capitalize" bind:value={paletteTailwind.warning} on:change={()=>{genCssSnippet()}}>
+							{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+						</select>
+					{:else}
+						<input
+							type="text" placeholder="#FFFFFF" bind:value={formDataHex.warning}
+							on:input={() => { onHexInput('warning', formDataHex.warning); }}
+						/>
+					{/if}
+				</label>
+				<Swatches palette={currentPalette.warning.shades} />
+			</div>
+			<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
+				<label class="w-full">
+					<span class="text-white">Surface</span>
+					{#if $storeMode}
+						<select class="capitalize" bind:value={paletteTailwind.surface} on:change={()=>{genCssSnippet()}}>
+							{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+						</select>
+					{:else}
+						<input
+							type="text" placeholder="#FFFFFF" bind:value={formDataHex.surface}
+							on:input={() => { onHexInput('surface', formDataHex.surface); }}
+						/>
+					{/if}
+				</label>
+				<Swatches palette={currentPalette.surface.shades} />
+			</div>
 		</div>
-		<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
-			<label class="w-full">
-				<span class="text-white">Surface</span>
-				{#if $storeMode}
-					<select class="capitalize" bind:value={paletteTailwind.surface} on:change={()=>{genCssSnippet()}}>
-						{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
-					</select>
-				{:else}
-					<input
-						type="text" placeholder="#FFFFFF" bind:value={formDataHex.surface}
-						on:input={() => { onHexInput('surface', formDataHex.surface); }}
-					/>
-				{/if}
-			</label>
-			<Swatches palette={currentPalette.surface.shades} />
+        <!-- Footer -->
+		<div class="card-footer">
+			<p class="text-xs text-center">Each color {$storeMode ? 'selected' : 'input'} represents swatch 500.</p>
 		</div>
-        <p class="text-xs text-center">Each color {$storeMode ? 'selected' : 'input'} represents swatch 500.</p>
 	</section>
 
 	<!-- CSS Snipnpet -->
diff --git a/src/docs/DocsThemer/helpers.ts b/src/docs/DocsThemer/helpers.ts
index 6900edcad1..9227b8a4ef 100644
--- a/src/docs/DocsThemer/helpers.ts
+++ b/src/docs/DocsThemer/helpers.ts
@@ -4,12 +4,17 @@
 import paletteGenerator from '@bobthered/tailwindcss-palette-generator';
 import { colorsTailwind } from './colors';
 
-// Find Color
-export function findColor(colorName: string): any {
+// Talwind: Find Color
+export function getTailwindColor(colorName: string): any {
 	return colorsTailwind.find((c) => c.label === colorName);
 }
 
-// Source: https://github.com/bobthered/tailwindcss-palette-generator
+// Tailwind: Pick Random Color
+export function randomTailwindColor(): any {
+	return colorsTailwind[(Math.random() * colorsTailwind.length) | 0];
+}
+
+// Hex: Source: https://github.com/bobthered/tailwindcss-palette-generator
 export function genHexPalette(key: string, hexColor: string): any {
 	// Generate base palette
 	const hexShades: any = paletteGenerator({ names: [key], colors: [hexColor] });
@@ -24,7 +29,7 @@ export function genHexPalette(key: string, hexColor: string): any {
 	return { label: key, shades: hexRgbShades, source: hexColor };
 }
 
-// Source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+// Hex: Source: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 export function hexToRgb(hex: any): string {
 	hex = hex.replace('#', '');
 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -35,7 +40,7 @@ export function hexToRgb(hex: any): string {
 	return '(invalid)';
 }
 
-// Generates the CSS snippet
+// Shared: Generates the CSS snippet
 export function generateCssCode(isTailwind: boolean, currentPalette: any): string {
 	let css: string = '';
 	Object.entries(currentPalette).forEach((set: any, i: number) => {

From 1cd1eb67c52e98cdb8940b453431f0f988ed527d Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 23 Sep 2022 14:33:32 -0500
Subject: [PATCH 05/11] Added ternary slot, refactor template

---
 src/docs/DocsThemer/DocsThemer.svelte | 115 +++++++++-----------------
 src/docs/DocsThemer/helpers.ts        |   2 +-
 2 files changed, 40 insertions(+), 77 deletions(-)

diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
index 60793d6b77..e4135b7c96 100644
--- a/src/docs/DocsThemer/DocsThemer.svelte
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -19,18 +19,21 @@
 	let paletteTailwind: any = {
 		primary: getTailwindColor('emerald'),
 		accent: getTailwindColor('indigo'),
+		ternary: getTailwindColor('yellow'),
 		warning: getTailwindColor('rose'),
 		surface: getTailwindColor('gray')
 	};
 	const formDataHex: any = {
 		primary: getTailwindColor('sky').shades['500'].hex,
 		accent: getTailwindColor('violet').shades['500'].hex,
+		ternary: getTailwindColor('yellow').shades['500'].hex,
 		warning: getTailwindColor('pink').shades['500'].hex,
 		surface: getTailwindColor('neutral').shades['500'].hex
 	};
 	let paletteHex: any = {
 		primary: genHexPalette('primary', formDataHex.primary),
 		accent: genHexPalette('accent', formDataHex.accent),
+		ternary: genHexPalette('ternary', formDataHex.ternary),
 		warning: genHexPalette('warning', formDataHex.warning),
 		surface: genHexPalette('surface', formDataHex.surface)
 	};
@@ -55,6 +58,7 @@
 			primary: randomTailwindColor(),
 			accent: randomTailwindColor(),
 			warning: randomTailwindColor(),
+			ternary: randomTailwindColor(),
 			surface: randomTailwindColor()
 		};
 	}
@@ -68,96 +72,55 @@
 <!-- Trigger Live Theme Preview -->
 <!-- <svelte:head>{@html liveThemePreview}</svelte:head> -->
 
+<!-- prettier-ignore -->
 <div class="themer space-y-4">
+
 	<!-- Color Pickers -->
-	<!-- prettier-ignore -->
 	<section class="card !bg-[#141517] !ring-0 space-y-4">
+
 		<!-- Header -->
 		<div class="card-header lg:flex justify-between items-center">
 			<RadioGroup selected={storeMode} display="flex">
-				<RadioItem value={true}>Tailwind</RadioItem>
-				<RadioItem value={false}>Custom</RadioItem>
+				<RadioItem value={true}>Tailwind Colors</RadioItem>
+				<RadioItem value={false}>Hex Colors</RadioItem>
 			</RadioGroup>
 			<div class="hidden lg:flex items-center space-x-2">
-			{#if $storeMode}
-				<a class="btn btn-sm text-white" href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Reference</a>
-				<button class="btn btn-sm text-white" on:click={onRandomize}>Randomize</button>
-			{:else}
-				<a class="btn btn-sm" href="https://coolors.co/" target="_blank">Get Inspired</a>
-			{/if}
+				{#if $storeMode}
+					<a class="btn btn-sm text-white" href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Reference</a>
+					<button class="btn btn-sm text-white" on:click={onRandomize}>Randomize</button>
+				{:else}
+					<a class="btn btn-sm" href="https://coolors.co/" target="_blank">Get Inspired</a>
+				{/if}
 			</div>
 		</div>
-		<!-- Settings -->
-		<div class="card-body">
-			<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
-				<label class="w-full">
-					<span class="text-white">Primary</span>
-					{#if $storeMode}
-						<select class="capitalize" bind:value={paletteTailwind.primary} on:change={()=>{genCssSnippet()}}>
-							{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
-						</select>
-					{:else}
-						<input
-							type="text" placeholder="#FFFFFF" bind:value={formDataHex.primary}
-							on:input={() => { onHexInput('primary', formDataHex.primary); }}
-						/>
-					{/if}
-				</label>
-				<Swatches palette={currentPalette.primary.shades} />
-			</div>
-			<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
-				<label class="w-full">
-					<span class="text-white">Accent</span>
-					{#if $storeMode}
-						<select class="capitalize" bind:value={paletteTailwind.accent} on:change={()=>{genCssSnippet()}}>
-							{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
-						</select>
-					{:else}
-						<input
-							type="text" placeholder="#FFFFFF" bind:value={formDataHex.accent}
-							on:input={() => { onHexInput('accent', formDataHex.accent); }}
-						/>
-					{/if}
-				</label>
-				<Swatches palette={currentPalette.accent.shades} />
-			</div>
-			<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
-				<label class="w-full">
-					<span class="text-white">Warning</span>
-					{#if $storeMode}
-						<select class="capitalize" bind:value={paletteTailwind.warning} on:change={()=>{genCssSnippet()}}>
-							{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
-						</select>
-					{:else}
-						<input
-							type="text" placeholder="#FFFFFF" bind:value={formDataHex.warning}
-							on:input={() => { onHexInput('warning', formDataHex.warning); }}
-						/>
-					{/if}
-				</label>
-				<Swatches palette={currentPalette.warning.shades} />
-			</div>
-			<div class="grid grid-cols-1 xl:grid-cols-[150px_1fr] gap-2 xl:gap-4 xl:place-items-end">
-				<label class="w-full">
-					<span class="text-white">Surface</span>
-					{#if $storeMode}
-						<select class="capitalize" bind:value={paletteTailwind.surface} on:change={()=>{genCssSnippet()}}>
-							{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
-						</select>
-					{:else}
-						<input
-							type="text" placeholder="#FFFFFF" bind:value={formDataHex.surface}
-							on:input={() => { onHexInput('surface', formDataHex.surface); }}
-						/>
-					{/if}
-				</label>
-				<Swatches palette={currentPalette.surface.shades} />
-			</div>
+
+		<!-- Body -->
+		<div class="card-body space-y-2">
+			{#each ['primary', 'accent', 'ternary', 'warning', 'surface'] as colorKey}
+				<div class="grid grid-cols-1 xl:grid-cols-[140px_1fr] gap-2 xl:gap-4 xl:place-items-end">
+					<label class="w-full">
+						<span class="text-white capitalize">{colorKey}</span>
+						{#if $storeMode}
+							<select class="capitalize" bind:value={paletteTailwind[colorKey]} on:change={()=>{genCssSnippet()}}>
+								{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+							</select>
+						{:else}
+							<input
+								type="text" placeholder="#FFFFFF" bind:value={formDataHex[colorKey]}
+								on:input={() => { onHexInput(colorKey, formDataHex[colorKey]); }}
+							/>
+						{/if}
+					</label>
+					<Swatches palette={currentPalette[colorKey].shades} />
+				</div>
+			{/each}
 		</div>
-        <!-- Footer -->
+
+		<!-- Footer -->
 		<div class="card-footer">
 			<p class="text-xs text-center">Each color {$storeMode ? 'selected' : 'input'} represents swatch 500.</p>
 		</div>
+
 	</section>
 
 	<!-- CSS Snipnpet -->
diff --git a/src/docs/DocsThemer/helpers.ts b/src/docs/DocsThemer/helpers.ts
index 9227b8a4ef..e0b0043b24 100644
--- a/src/docs/DocsThemer/helpers.ts
+++ b/src/docs/DocsThemer/helpers.ts
@@ -4,7 +4,7 @@
 import paletteGenerator from '@bobthered/tailwindcss-palette-generator';
 import { colorsTailwind } from './colors';
 
-// Talwind: Find Color
+// Talwind: Get a Particular Color
 export function getTailwindColor(colorName: string): any {
 	return colorsTailwind.find((c) => c.label === colorName);
 }

From f2b0cedfbaa73cd057f8c67c48be7a033e9ecfc9 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 23 Sep 2022 17:22:22 -0500
Subject: [PATCH 06/11] Cleanup and live preview flushed out

---
 src/app.html                                  |  64 ++++++-----
 src/app.postcss                               |   6 +-
 src/docs/DocsThemer/DocsThemer.svelte         | 101 +++++++++++-------
 src/docs/DocsThemer/helpers.ts                |   2 +-
 .../components/SlideToggle/SlideToggle.svelte |   2 +-
 5 files changed, 103 insertions(+), 72 deletions(-)

diff --git a/src/app.html b/src/app.html
index bdabf22679..9c3715f512 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,35 +1,41 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
-	<head>
-		<title>Skeleton — A Component Library for Svelte + Tailwind</title>
 
-		<!-- Meta Tags -->
-		<meta charset="utf-8" />
-		<meta name="description" content="Skeleton is a fully featured Svelte UI component library that allows you to build fast and reactive web UI using Svelte + Tailwind." />
-		<meta name="keywords" content="svelte, components, svelte components, ui components, sveltekit, vite, astro, framework" />
-		<meta name="theme-color" content="#22c55e" />
+<head>
+	<title>Skeleton — A Component Library for Svelte + Tailwind</title>
 
-		<!-- Open Graph - https://ogp.me/ -->
-		<meta content="Skeleton" property="og:site_name" />
-		<meta content="website" property="og:type" />
-		<meta name="og:description" content="Skeleton is a fully featured Svelte UI component library that allows you to build fast and reactive web UI using Svelte + Tailwind." />
+	<!-- Meta Tags -->
+	<meta charset="utf-8" />
+	<meta name="description"
+		content="Skeleton is a fully featured Svelte UI component library that allows you to build fast and reactive web UI using Svelte + Tailwind." />
+	<meta name="keywords"
+		content="svelte, components, svelte components, ui components, sveltekit, vite, astro, framework" />
+	<meta name="theme-color" content="#22c55e" />
 
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body>
-		%sveltekit.body%
-	</body>
+	<!-- Open Graph - https://ogp.me/ -->
+	<meta content="Skeleton" property="og:site_name" />
+	<meta content="website" property="og:type" />
+	<meta name="og:description"
+		content="Skeleton is a fully featured Svelte UI component library that allows you to build fast and reactive web UI using Svelte + Tailwind." />
 
-	<!-- Google Analytics -->
-	<script async src="https://www.googletagmanager.com/gtag/js?id=G-FVKTKV7HDL"></script>
-	<script>
-		window.dataLayer = window.dataLayer || [];
-		function gtag() {
-			dataLayer.push(arguments);
-		}
-		gtag('js', new Date());
-		gtag('config', 'G-FVKTKV7HDL');
-	</script>
-</html>
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body class="bg-mesh">
+	%sveltekit.body%
+</body>
+
+<!-- Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-FVKTKV7HDL"></script>
+<script>
+	window.dataLayer = window.dataLayer || [];
+	function gtag() {
+		dataLayer.push(arguments);
+	}
+	gtag('js', new Date());
+	gtag('config', 'G-FVKTKV7HDL');
+</script>
+
+</html>
\ No newline at end of file
diff --git a/src/app.postcss b/src/app.postcss
index 4a357d2abb..09cdf0eda2 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -8,8 +8,8 @@ body {
 	@apply h-full overflow-hidden;
 }
 
-/* Gradient Background, via: https://csshero.org/mesher/ */
-body {
+/* Background Mesh Gradient, via: https://csshero.org/mesher/ */
+.bg-mesh {
 	/* prettier-ignore */
 	background-image:
 		radial-gradient(at 35% 35%, hsla(160,84%,39%,0.12) 0px, transparent 35%),
@@ -17,7 +17,7 @@ body {
 	background-size: cover;
 	background-attachment: fixed;
 }
-.dark body {
+.dark .bg-mesh {
 	/* prettier-ignore */
 	background-image:
 		radial-gradient(at 35% 35%, hsla(160,84%,39%,0.18) 0px, transparent 50%),
diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
index e4135b7c96..f5255dd7d4 100644
--- a/src/docs/DocsThemer/DocsThemer.svelte
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -1,21 +1,27 @@
 <script lang="ts">
 	import { writable, type Writable } from 'svelte/store';
-
-	// Helpers
-	import { getTailwindColor, randomTailwindColor, genHexPalette, generateCssCode } from './helpers';
-	import { colorsTailwind } from './colors';
+	import { browser } from '$app/environment';
 
 	// Components
 	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
 	import RadioGroup from '$lib/components/Radio/RadioGroup.svelte';
 	import RadioItem from '$lib/components/Radio/RadioItem.svelte';
+	import SlideToggle from '$lib/components/SlideToggle/SlideToggle.svelte';
 	import Swatches from './Swatches.svelte';
 
+	// Helpers
+	import { getTailwindColor, randomTailwindColor, genHexPalette, generateThemeCss } from './helpers';
+	import { colorsTailwind } from './colors';
+
 	// Stores
 	const storeMode: Writable<boolean> = writable(true); // T: Tailwind | F: Custom
 
 	// Local
-	const regexHexColor = new RegExp(/^#[0-9a-f]{6}$/i);
+	const regexValidHexCode = new RegExp(/^#[0-9a-f]{6}$/i);
+	let themePreviewEnabled: boolean = false;
+	let themeCss: string = '';
+
+	// Palette: Tailwind
 	let paletteTailwind: any = {
 		primary: getTailwindColor('emerald'),
 		accent: getTailwindColor('indigo'),
@@ -23,7 +29,9 @@
 		warning: getTailwindColor('rose'),
 		surface: getTailwindColor('gray')
 	};
-	const formDataHex: any = {
+
+	// Palette: Hex
+	let formHex: any = {
 		primary: getTailwindColor('sky').shades['500'].hex,
 		accent: getTailwindColor('violet').shades['500'].hex,
 		ternary: getTailwindColor('yellow').shades['500'].hex,
@@ -31,28 +39,21 @@
 		surface: getTailwindColor('neutral').shades['500'].hex
 	};
 	let paletteHex: any = {
-		primary: genHexPalette('primary', formDataHex.primary),
-		accent: genHexPalette('accent', formDataHex.accent),
-		ternary: genHexPalette('ternary', formDataHex.ternary),
-		warning: genHexPalette('warning', formDataHex.warning),
-		surface: genHexPalette('surface', formDataHex.surface)
+		primary: genHexPalette('primary', getTailwindColor('sky').shades['500'].hex),
+		accent: genHexPalette('accent', getTailwindColor('violet').shades['500'].hex),
+		ternary: genHexPalette('ternary', getTailwindColor('yellow').shades['500'].hex),
+		warning: genHexPalette('warning', getTailwindColor('pink').shades['500'].hex),
+		surface: genHexPalette('surface', getTailwindColor('neutral').shades['500'].hex)
 	};
-	let cssSnippet: string = '';
 
-	// Handle hex color input by user
-	function onHexInput(key: string, hexColor: string): void {
-		if (regexHexColor.test(hexColor)) {
-			paletteHex[key] = genHexPalette(key, hexColor);
-			genCssSnippet();
-		}
-	}
+	// Functions ---
 
-	// Generate CSS Snippet
-	function genCssSnippet(): void {
-		cssSnippet = generateCssCode($storeMode, currentPalette);
+	// Tailwind: on selection change
+	function onTailwindSelect(): void {
+		setThemeCss();
 	}
 
-	// Randomize Tailwind Colors
+	// Tailwind: on randomize button click
 	function onRandomize(): void {
 		paletteTailwind = {
 			primary: randomTailwindColor(),
@@ -63,14 +64,37 @@
 		};
 	}
 
-	// Reactive
+	// Hex: on input change
+	function onHexInput(key: string, hexColor: string): void {
+		if (regexValidHexCode.test(hexColor)) {
+			// Generate Palette
+			paletteHex[key] = genHexPalette(key, hexColor);
+			// Update CSS Snipet
+			setThemeCss();
+		}
+	}
+
+	// Shared: Generate CSS Snippet
+	function setThemeCss(): void {
+		themeCss = generateThemeCss($storeMode, currentPalette);
+	}
+
+	// Reactive ---
+
+	// Set the current palette based on Tailwind/Hex mode
 	$: currentPalette = $storeMode === true ? paletteTailwind : paletteHex;
-	$: if (currentPalette) genCssSnippet();
-	// $: liveThemePreview = `\<style\>${cssSnippet}\</style\>`;
+
+	// Update the CSS snippet on current palette change
+	$: if (currentPalette) setThemeCss();
+
+	// Toggle `.bg-mesh` on body when preview mobile ON
+	$: if (browser) document.body.classList.toggle('bg-mesh', !themePreviewEnabled);
 </script>
 
-<!-- Trigger Live Theme Preview -->
-<!-- <svelte:head>{@html liveThemePreview}</svelte:head> -->
+<!-- Insert live theme into page head -->
+<svelte:head>
+	{@html themePreviewEnabled ? `\<style\>${themeCss}\</style\>` : ''}
+</svelte:head>
 
 <!-- prettier-ignore -->
 <div class="themer space-y-4">
@@ -78,13 +102,14 @@
 	<!-- Color Pickers -->
 	<section class="card !bg-[#141517] !ring-0 space-y-4">
 
-		<!-- Header -->
-		<div class="card-header lg:flex justify-between items-center">
-			<RadioGroup selected={storeMode} display="flex">
+		<!-- Header: Controls -->
+		<div class="card-header flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y0 space-x-4">
+			<RadioGroup selected={storeMode}>
 				<RadioItem value={true}>Tailwind Colors</RadioItem>
 				<RadioItem value={false}>Hex Colors</RadioItem>
 			</RadioGroup>
-			<div class="hidden lg:flex items-center space-x-2">
+			<SlideToggle bind:checked={themePreviewEnabled} class="text-white">Live Preview</SlideToggle>
+			<div class="flex items-center space-x-2">
 				{#if $storeMode}
 					<a class="btn btn-sm text-white" href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Reference</a>
 					<button class="btn btn-sm text-white" on:click={onRandomize}>Randomize</button>
@@ -94,20 +119,20 @@
 			</div>
 		</div>
 
-		<!-- Body -->
+		<!-- Body: Form -->
 		<div class="card-body space-y-2">
 			{#each ['primary', 'accent', 'ternary', 'warning', 'surface'] as colorKey}
 				<div class="grid grid-cols-1 xl:grid-cols-[140px_1fr] gap-2 xl:gap-4 xl:place-items-end">
 					<label class="w-full">
 						<span class="text-white capitalize">{colorKey}</span>
 						{#if $storeMode}
-							<select class="capitalize" bind:value={paletteTailwind[colorKey]} on:change={()=>{genCssSnippet()}}>
+							<select class="capitalize" bind:value={paletteTailwind[colorKey]} on:change={()=>{onTailwindSelect()}}>
 								{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
 							</select>
 						{:else}
 							<input
-								type="text" placeholder="#FFFFFF" bind:value={formDataHex[colorKey]}
-								on:input={() => { onHexInput(colorKey, formDataHex[colorKey]); }}
+								type="text" placeholder="#FFFFFF" bind:value={formHex[colorKey]}
+								on:input={() => { onHexInput(colorKey, formHex[colorKey]); }}
 							/>
 						{/if}
 					</label>
@@ -116,7 +141,7 @@
 			{/each}
 		</div>
 
-		<!-- Footer -->
+		<!-- Footer: Note -->
 		<div class="card-footer">
 			<p class="text-xs text-center">Each color {$storeMode ? 'selected' : 'input'} represents swatch 500.</p>
 		</div>
@@ -124,5 +149,5 @@
 	</section>
 
 	<!-- CSS Snipnpet -->
-	<CodeBlock language="css" code={cssSnippet} />
+	<CodeBlock language="css" code={themeCss} />
 </div>
diff --git a/src/docs/DocsThemer/helpers.ts b/src/docs/DocsThemer/helpers.ts
index e0b0043b24..65cb7132db 100644
--- a/src/docs/DocsThemer/helpers.ts
+++ b/src/docs/DocsThemer/helpers.ts
@@ -41,7 +41,7 @@ export function hexToRgb(hex: any): string {
 }
 
 // Shared: Generates the CSS snippet
-export function generateCssCode(isTailwind: boolean, currentPalette: any): string {
+export function generateThemeCss(isTailwind: boolean, currentPalette: any): string {
 	let css: string = '';
 	Object.entries(currentPalette).forEach((set: any, i: number) => {
 		const [key, v] = set;
diff --git a/src/lib/components/SlideToggle/SlideToggle.svelte b/src/lib/components/SlideToggle/SlideToggle.svelte
index 5d41d9d471..3975356c3f 100644
--- a/src/lib/components/SlideToggle/SlideToggle.svelte
+++ b/src/lib/components/SlideToggle/SlideToggle.svelte
@@ -67,7 +67,7 @@
 >
 	<label class="slide-toggle-label {classesLabel}">
 		<!-- Hidden Input -->
-		<input type="checkbox" class="hidden" bind:checked on:click on:mouseover on:focus on:blur {...prunedRestProps()} disabled={$$props.disabled} />
+		<input type="checkbox" class="hidden" bind:checked on:click on:change on:mouseover on:focus on:blur {...prunedRestProps()} disabled={$$props.disabled} />
 		<!-- Slider Track/Thumb -->
 		<div class="slide-toggle-track {classesTrack}" class:cursor-not-allowed={$$props.disabled}>
 			<div class="slide-toggle-humb {classesThumb}" class:cursor-not-allowed={$$props.disabled} />

From 63eefa096535cde6af91c362978f151b32ea84f1 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Fri, 23 Sep 2022 17:49:23 -0500
Subject: [PATCH 07/11] Progress

---
 src/app.postcss                       |  5 ++++-
 src/docs/DocsThemer/DocsThemer.svelte | 26 +++++++++++++++++---------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app.postcss b/src/app.postcss
index 09cdf0eda2..60590292ca 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -8,7 +8,10 @@ body {
 	@apply h-full overflow-hidden;
 }
 
-/* Background Mesh Gradient, via: https://csshero.org/mesher/ */
+/*
+Background Mesh Gradient - this is applied to the <body> element in app.html
+https://csshero.org/mesher/
+*/
 .bg-mesh {
 	/* prettier-ignore */
 	background-image:
diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
index f5255dd7d4..bea5086d76 100644
--- a/src/docs/DocsThemer/DocsThemer.svelte
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -12,6 +12,7 @@
 	// Helpers
 	import { getTailwindColor, randomTailwindColor, genHexPalette, generateThemeCss } from './helpers';
 	import { colorsTailwind } from './colors';
+	import { onMount } from 'svelte';
 
 	// Stores
 	const storeMode: Writable<boolean> = writable(true); // T: Tailwind | F: Custom
@@ -32,18 +33,18 @@
 
 	// Palette: Hex
 	let formHex: any = {
-		primary: getTailwindColor('sky').shades['500'].hex,
-		accent: getTailwindColor('violet').shades['500'].hex,
+		primary: getTailwindColor('emerald').shades['500'].hex,
+		accent: getTailwindColor('sky').shades['500'].hex,
 		ternary: getTailwindColor('yellow').shades['500'].hex,
-		warning: getTailwindColor('pink').shades['500'].hex,
-		surface: getTailwindColor('neutral').shades['500'].hex
+		warning: getTailwindColor('rose').shades['500'].hex,
+		surface: getTailwindColor('gray').shades['500'].hex
 	};
 	let paletteHex: any = {
-		primary: genHexPalette('primary', getTailwindColor('sky').shades['500'].hex),
-		accent: genHexPalette('accent', getTailwindColor('violet').shades['500'].hex),
-		ternary: genHexPalette('ternary', getTailwindColor('yellow').shades['500'].hex),
-		warning: genHexPalette('warning', getTailwindColor('pink').shades['500'].hex),
-		surface: genHexPalette('surface', getTailwindColor('neutral').shades['500'].hex)
+		primary: genHexPalette('primary', formHex.primary),
+		accent: genHexPalette('accent', formHex.accent),
+		ternary: genHexPalette('ternary', formHex.ternary),
+		warning: genHexPalette('warning', formHex.warning),
+		surface: genHexPalette('surface', formHex.surface)
 	};
 
 	// Functions ---
@@ -63,6 +64,7 @@
 			surface: randomTailwindColor()
 		};
 	}
+	// setInterval(() => { onRandomize(); }, 250); // party mode
 
 	// Hex: on input change
 	function onHexInput(key: string, hexColor: string): void {
@@ -89,6 +91,12 @@
 
 	// Toggle `.bg-mesh` on body when preview mobile ON
 	$: if (browser) document.body.classList.toggle('bg-mesh', !themePreviewEnabled);
+
+	// Lifecycle
+	onMount(() => {
+		// Bugfix: keeps the bg mesh off when returning to this page
+		themePreviewEnabled = false;
+	});
 </script>
 
 <!-- Insert live theme into page head -->

From 330a2c982a0481431a41751357cad028257e31da Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Sat, 24 Sep 2022 15:44:49 -0500
Subject: [PATCH 08/11] Data persist generated theme via localstorage

---
 src/docs/DocsThemer/DocsThemer.svelte | 161 ++++++++++++++++++--------
 1 file changed, 111 insertions(+), 50 deletions(-)

diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
index bea5086d76..b7ad802fb3 100644
--- a/src/docs/DocsThemer/DocsThemer.svelte
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { writable, type Writable } from 'svelte/store';
 	import { browser } from '$app/environment';
+	import { writable, type Writable } from 'svelte/store';
 
 	// Components
 	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
@@ -12,57 +12,120 @@
 	// Helpers
 	import { getTailwindColor, randomTailwindColor, genHexPalette, generateThemeCss } from './helpers';
 	import { colorsTailwind } from './colors';
-	import { onMount } from 'svelte';
-
-	// Stores
-	const storeMode: Writable<boolean> = writable(true); // T: Tailwind | F: Custom
 
 	// Local
 	const regexValidHexCode = new RegExp(/^#[0-9a-f]{6}$/i);
-	let themePreviewEnabled: boolean = false;
 	let themeCss: string = '';
 
-	// Palette: Tailwind
-	let paletteTailwind: any = {
-		primary: getTailwindColor('emerald'),
-		accent: getTailwindColor('indigo'),
-		ternary: getTailwindColor('yellow'),
-		warning: getTailwindColor('rose'),
-		surface: getTailwindColor('gray')
-	};
-
-	// Palette: Hex
-	let formHex: any = {
+	// Stores
+	let storeMode: Writable<boolean> = writable(true); // T: Tailwind | F: Custom
+	let storePreview: Writable<boolean> = writable(false);
+	let storeTailwindForm: Writable<any> = writable({
+		primary: 'emerald',
+		accent: 'indigo',
+		ternary: 'yellow',
+		warning: 'rose',
+		surface: 'gray'
+	});
+	let storeTailwindPalette: Writable<any> = writable({
+		primary: getTailwindColor($storeTailwindForm.primary),
+		accent: getTailwindColor($storeTailwindForm.accent),
+		ternary: getTailwindColor($storeTailwindForm.ternary),
+		warning: getTailwindColor($storeTailwindForm.warning),
+		surface: getTailwindColor($storeTailwindForm.surface)
+	});
+	let storeHexForm: Writable<any> = writable({
 		primary: getTailwindColor('emerald').shades['500'].hex,
 		accent: getTailwindColor('sky').shades['500'].hex,
 		ternary: getTailwindColor('yellow').shades['500'].hex,
 		warning: getTailwindColor('rose').shades['500'].hex,
 		surface: getTailwindColor('gray').shades['500'].hex
-	};
-	let paletteHex: any = {
-		primary: genHexPalette('primary', formHex.primary),
-		accent: genHexPalette('accent', formHex.accent),
-		ternary: genHexPalette('ternary', formHex.ternary),
-		warning: genHexPalette('warning', formHex.warning),
-		surface: genHexPalette('surface', formHex.surface)
-	};
+	});
+	let storeHexPalette: Writable<any> = writable({
+		primary: genHexPalette('primary', $storeHexForm.primary),
+		accent: genHexPalette('accent', $storeHexForm.accent),
+		ternary: genHexPalette('ternary', $storeHexForm.ternary),
+		warning: genHexPalette('warning', $storeHexForm.warning),
+		surface: genHexPalette('surface', $storeHexForm.surface)
+	});
+
+	// Local Storage
+
+	let loaded = false;
+	if (browser) {
+		// LocalStorage Values ---
+		const lsMode: string = localStorage['storeMode'];
+		const lsPreview: string = localStorage['storePreview'];
+		const lsTailwindForm: string = localStorage['storeTailwindForm'];
+		const lsTailwindPalette: string = localStorage['storeTailwindPalette'];
+		const lsHexForm: string = localStorage['storeHexForm'];
+		const lsHexPalette: string = localStorage['storeHexPalette'];
+		// Getters ---
+		if (lsMode !== undefined) {
+			storeMode = writable(lsMode === 'true');
+		}
+		if (lsPreview !== undefined) {
+			storePreview = writable(lsPreview === 'true');
+		}
+		if (lsTailwindForm !== undefined) {
+			storeTailwindForm = writable(JSON.parse(lsTailwindForm));
+		}
+		if (lsTailwindPalette !== undefined) {
+			storeTailwindPalette = writable(JSON.parse(lsTailwindPalette));
+		}
+		if (lsHexForm !== undefined) {
+			storeHexForm = writable(JSON.parse(lsHexForm));
+		}
+		if (lsHexPalette !== undefined) {
+			storeHexPalette = writable(JSON.parse(lsHexPalette));
+		}
+		// Settter ---
+		storeMode.subscribe((v) => (localStorage.storeMode = String(v)));
+		storePreview.subscribe((v) => (localStorage.storePreview = String(v)));
+		storeTailwindForm.subscribe((v) => (localStorage.storeTailwindForm = JSON.stringify(v)));
+		storeTailwindPalette.subscribe((v) => (localStorage.storeTailwindPalette = JSON.stringify(v)));
+		storeHexForm.subscribe((v) => (localStorage.storeHexForm = JSON.stringify(v)));
+		storeHexPalette.subscribe((v) => (localStorage.storeHexPalette = JSON.stringify(v)));
+		// Loaind Completed ---
+		loaded = true;
+	}
+
+	function resetSettings(): void {
+		// Clear Local Storage Values
+		localStorage.removeItem('storeMode');
+		localStorage.removeItem('storePreview');
+		localStorage.removeItem('storeTailwindForm');
+		localStorage.removeItem('storeTailwindPalette');
+		localStorage.removeItem('storeHexForm');
+		localStorage.removeItem('storeHexPalette');
+		// Reload Window
+		location.reload();
+	}
 
 	// Functions ---
 
 	// Tailwind: on selection change
 	function onTailwindSelect(): void {
+		storeTailwindPalette.set({
+			primary: getTailwindColor($storeTailwindForm.primary),
+			accent: getTailwindColor($storeTailwindForm.accent),
+			ternary: getTailwindColor($storeTailwindForm.ternary),
+			warning: getTailwindColor($storeTailwindForm.warning),
+			surface: getTailwindColor($storeTailwindForm.surface)
+		});
+		// Generate CSS
 		setThemeCss();
 	}
 
 	// Tailwind: on randomize button click
 	function onRandomize(): void {
-		paletteTailwind = {
+		storeTailwindPalette.set({
 			primary: randomTailwindColor(),
 			accent: randomTailwindColor(),
 			warning: randomTailwindColor(),
 			ternary: randomTailwindColor(),
 			surface: randomTailwindColor()
-		};
+		});
 	}
 	// setInterval(() => { onRandomize(); }, 250); // party mode
 
@@ -70,7 +133,7 @@
 	function onHexInput(key: string, hexColor: string): void {
 		if (regexValidHexCode.test(hexColor)) {
 			// Generate Palette
-			paletteHex[key] = genHexPalette(key, hexColor);
+			$storeHexPalette[key] = genHexPalette(key, hexColor);
 			// Update CSS Snipet
 			setThemeCss();
 		}
@@ -84,46 +147,41 @@
 	// Reactive ---
 
 	// Set the current palette based on Tailwind/Hex mode
-	$: currentPalette = $storeMode === true ? paletteTailwind : paletteHex;
+	$: currentPalette = $storeMode === true ? $storeTailwindPalette : $storeHexPalette;
 
 	// Update the CSS snippet on current palette change
 	$: if (currentPalette) setThemeCss();
 
 	// Toggle `.bg-mesh` on body when preview mobile ON
-	$: if (browser) document.body.classList.toggle('bg-mesh', !themePreviewEnabled);
-
-	// Lifecycle
-	onMount(() => {
-		// Bugfix: keeps the bg mesh off when returning to this page
-		themePreviewEnabled = false;
-	});
+	$: if (browser) document.body.classList.toggle('bg-mesh', !$storePreview);
 </script>
 
 <!-- Insert live theme into page head -->
 <svelte:head>
-	{@html themePreviewEnabled ? `\<style\>${themeCss}\</style\>` : ''}
+	{@html $storePreview ? `\<style\>${themeCss}\</style\>` : ''}
 </svelte:head>
 
 <!-- prettier-ignore -->
+{#if loaded}
 <div class="themer space-y-4">
-
+	
 	<!-- Color Pickers -->
 	<section class="card !bg-[#141517] !ring-0 space-y-4">
-
 		<!-- Header: Controls -->
-		<div class="card-header flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y0 space-x-4">
+		<div class="card-body flex flex-col lg:flex-row lg:justify-between items-center space-y-4 lg:space-y-0 lg:space-x-4">
+			<!-- Mode -->
 			<RadioGroup selected={storeMode}>
 				<RadioItem value={true}>Tailwind Colors</RadioItem>
 				<RadioItem value={false}>Hex Colors</RadioItem>
 			</RadioGroup>
-			<SlideToggle bind:checked={themePreviewEnabled} class="text-white">Live Preview</SlideToggle>
-			<div class="flex items-center space-x-2">
+			<div class="flex items-center space-x-4">
+				<!-- Actions -->
 				{#if $storeMode}
-					<a class="btn btn-sm text-white" href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Reference</a>
-					<button class="btn btn-sm text-white" on:click={onRandomize}>Randomize</button>
-				{:else}
-					<a class="btn btn-sm" href="https://coolors.co/" target="_blank">Get Inspired</a>
+					<button class="btn btn-sm btn-ghost" on:click={onRandomize}>Random</button>
+					<button class="btn btn-sm btn-ghost" on:click={resetSettings}>Reset</button>
 				{/if}
+				<!-- Preview -->
+				<SlideToggle bind:checked={$storePreview} class="text-white">Live</SlideToggle>
 			</div>
 		</div>
 
@@ -134,13 +192,13 @@
 					<label class="w-full">
 						<span class="text-white capitalize">{colorKey}</span>
 						{#if $storeMode}
-							<select class="capitalize" bind:value={paletteTailwind[colorKey]} on:change={()=>{onTailwindSelect()}}>
-								{#each colorsTailwind as c}<option value={c}>{c.label}</option>{/each}
+							<select class="capitalize" bind:value={$storeTailwindForm[colorKey]} on:change={()=>{onTailwindSelect()}}>
+								{#each colorsTailwind as c}<option value={c.label}>{c.label}</option>{/each}
 							</select>
 						{:else}
 							<input
-								type="text" placeholder="#FFFFFF" bind:value={formHex[colorKey]}
-								on:input={() => { onHexInput(colorKey, formHex[colorKey]); }}
+								type="text" placeholder="#FFFFFF" bind:value={$storeHexForm[colorKey]}
+								on:input={() => { onHexInput(colorKey, $storeHexForm[colorKey]); }}
 							/>
 						{/if}
 					</label>
@@ -159,3 +217,6 @@
 	<!-- CSS Snipnpet -->
 	<CodeBlock language="css" code={themeCss} />
 </div>
+{:else}
+	<section class="card card-body !bg-[#141517] !ring-0 space-y-4 text-center"><p>Loading Theme Generator...</p></section>
+{/if}

From aa74e48543c23bb98298381449765ab959c1ef85 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Sat, 24 Sep 2022 16:12:44 -0500
Subject: [PATCH 09/11] Minor cleanup on themer

---
 src/docs/DocsThemer/DocsThemer.svelte | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
index b7ad802fb3..9f9363e7db 100644
--- a/src/docs/DocsThemer/DocsThemer.svelte
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -16,6 +16,7 @@
 	// Local
 	const regexValidHexCode = new RegExp(/^#[0-9a-f]{6}$/i);
 	let themeCss: string = '';
+	let loaded = false;
 
 	// Stores
 	let storeMode: Writable<boolean> = writable(true); // T: Tailwind | F: Custom
@@ -36,7 +37,7 @@
 	});
 	let storeHexForm: Writable<any> = writable({
 		primary: getTailwindColor('emerald').shades['500'].hex,
-		accent: getTailwindColor('sky').shades['500'].hex,
+		accent: getTailwindColor('indigo').shades['500'].hex,
 		ternary: getTailwindColor('yellow').shades['500'].hex,
 		warning: getTailwindColor('rose').shades['500'].hex,
 		surface: getTailwindColor('gray').shades['500'].hex
@@ -51,7 +52,6 @@
 
 	// Local Storage
 
-	let loaded = false;
 	if (browser) {
 		// LocalStorage Values ---
 		const lsMode: string = localStorage['storeMode'];
@@ -79,14 +79,14 @@
 		if (lsHexPalette !== undefined) {
 			storeHexPalette = writable(JSON.parse(lsHexPalette));
 		}
-		// Settter ---
+		// Setters ---
 		storeMode.subscribe((v) => (localStorage.storeMode = String(v)));
 		storePreview.subscribe((v) => (localStorage.storePreview = String(v)));
 		storeTailwindForm.subscribe((v) => (localStorage.storeTailwindForm = JSON.stringify(v)));
 		storeTailwindPalette.subscribe((v) => (localStorage.storeTailwindPalette = JSON.stringify(v)));
 		storeHexForm.subscribe((v) => (localStorage.storeHexForm = JSON.stringify(v)));
 		storeHexPalette.subscribe((v) => (localStorage.storeHexPalette = JSON.stringify(v)));
-		// Loaind Completed ---
+		// Loading Completed ---
 		loaded = true;
 	}
 
@@ -127,7 +127,6 @@
 			surface: randomTailwindColor()
 		});
 	}
-	// setInterval(() => { onRandomize(); }, 250); // party mode
 
 	// Hex: on input change
 	function onHexInput(key: string, hexColor: string): void {
@@ -176,10 +175,8 @@
 			</RadioGroup>
 			<div class="flex items-center space-x-4">
 				<!-- Actions -->
-				{#if $storeMode}
-					<button class="btn btn-sm btn-ghost" on:click={onRandomize}>Random</button>
-					<button class="btn btn-sm btn-ghost" on:click={resetSettings}>Reset</button>
-				{/if}
+				{#if $storeMode}<button class="btn btn-sm btn-ghost" on:click={onRandomize}>Random</button>{/if}
+				<button class="btn btn-sm btn-ghost" on:click={resetSettings}>Reset</button>
 				<!-- Preview -->
 				<SlideToggle bind:checked={$storePreview} class="text-white">Live</SlideToggle>
 			</div>

From 544d1f17c1c560520d6cedc3889308156e361a75 Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Mon, 26 Sep 2022 13:32:16 -0500
Subject: [PATCH 10/11] Utility Local Storage Store added

---
 src/docs/DocsNavigation/links.ts              |   9 +-
 src/lib/index.ts                              |   8 +-
 .../LocalStorageStore.test.ts                 | 202 ++++++++++++++++++
 .../LocalStorageStore/LocalStorageStore.ts    |  68 ++++++
 .../local-storage-stores/+page.svelte         |  67 ++++++
 5 files changed, 342 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/utilities/LocalStorageStore/LocalStorageStore.test.ts
 create mode 100644 src/lib/utilities/LocalStorageStore/LocalStorageStore.ts
 create mode 100644 src/routes/(inner)/utilities/local-storage-stores/+page.svelte

diff --git a/src/docs/DocsNavigation/links.ts b/src/docs/DocsNavigation/links.ts
index b062e15143..6bfc6ca45b 100644
--- a/src/docs/DocsNavigation/links.ts
+++ b/src/docs/DocsNavigation/links.ts
@@ -64,12 +64,6 @@ export const menuNavLinks: any = [
 			// Work in Progress
 			// {href: '/components/conic-gradients', label: 'Conic Gradients'}, // keep disabled until further notice
 			// { href: '/components/svg-icons', label: 'SVG Icons' }, // keep disabled until further notice
-			// Depricated
-			// { href: '/components/badges', label: 'Badges', badge: 'Depricated' },
-			// { href: '/components/buttons', label: 'Buttons', badge: 'Depricated' },
-			// { href: '/components/cards', label: 'Cards', badge: 'Depricated' },
-			// { href: '/components/logo-clouds', label: 'Logo Clouds', badge: 'Depricated' },
-			// { href: '/components/placeholders', label: 'Placeholders', badge: 'Depricated' }
 		]
 	},
 	{
@@ -88,7 +82,8 @@ export const menuNavLinks: any = [
 			{ href: '/utilities/drawers', label: 'Drawers' },
 			{ href: '/utilities/dialogs', label: 'Dialogs' },
 			{ href: '/utilities/toasts', label: 'Toasts' },
-			{ href: '/utilities/lightswitches', label: 'Lightswitch' }
+			{ href: '/utilities/lightswitches', label: 'Lightswitch' },
+			{ href: '/utilities/local-storage-stores', label: 'Local Storage Stores' }
 		]
 	}
 ];
diff --git a/src/lib/index.ts b/src/lib/index.ts
index efed60b656..1a7af1a075 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -8,17 +8,12 @@ export { default as AppBar } from './components/AppBar/AppBar.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
-export { default as Badge } from './components/Badge/Badge.svelte';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.svelte';
 export { default as Crumb } from './components/Breadcrumb/Crumb.svelte';
-export { default as Button } from './components/Button/Button.svelte';
-export { default as Card } from './components/Card/Card.svelte';
 export { default as Divider } from './components/Divider/Divider.svelte';
 export { default as GradientHeading } from './components/GradientHeading/GradientHeading.svelte';
 export { default as ListBox } from './components/ListBox/ListBox.svelte';
 export { default as ListBoxItem } from './components/ListBox/ListBoxItem.svelte';
-export { default as LogoCloud } from './components/LogoCloud/LogoCloud.svelte';
-export { default as Logo } from './components/LogoCloud/Logo.svelte';
 export { default as Menu } from './components/Menu/Menu.svelte';
 export { default as Paginator } from './components/Paginator/Paginator.svelte';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.svelte';
@@ -57,6 +52,9 @@ export { default as Toast } from './utilities/Toast/Toast.svelte';
 // LightSwitch
 export { default as LightSwitch } from './utilities/LightSwitch/LightSwitch.svelte';
 
+// LightSwitch
+export { localStorageStore } from './utilities/LocalStorageStore/LocalStorageStore';
+
 // Actions ---
 
 // Filters
diff --git a/src/lib/utilities/LocalStorageStore/LocalStorageStore.test.ts b/src/lib/utilities/LocalStorageStore/LocalStorageStore.test.ts
new file mode 100644
index 0000000000..c2dfb7de1d
--- /dev/null
+++ b/src/lib/utilities/LocalStorageStore/LocalStorageStore.test.ts
@@ -0,0 +1,202 @@
+// Source: https://github.com/joshnuss/svelte-local-storage-store
+// https://github.com/joshnuss/svelte-local-storage-store/blob/master/test/localStorageStore.test.ts
+// Represents version v0.3.1 (2022-08-21)
+
+import { describe, it, expect } from 'vitest';
+import { get } from 'svelte/store';
+
+import { localStorageStore } from '$lib/utilities/LocalStorageStore/LocalStorageStore';
+
+describe('LocalStorageStore.ts', () => {
+	it('uses initial value if nothing in local storage', () => {
+		const store = localStorageStore('myKey', 123);
+		const value = get(store);
+
+		expect(value).toEqual(123);
+	});
+
+	it('uses existing value if data already in local storage', () => {
+		localStorage.setItem('myKey2', '"existing"');
+
+		const store = localStorageStore('myKey2', 'initial');
+		const value = get(store);
+
+		expect(value).toEqual('existing');
+	});
+
+	describe('set()', () => {
+		it('replaces old value', () => {
+			localStorage.setItem('myKey3', '"existing"');
+
+			const store = localStorageStore('myKey3', '');
+			store.set('new-value');
+			const value = get(store);
+
+			expect(localStorage.myKey3).toEqual('"new-value"');
+			expect(value).toEqual('new-value');
+		});
+
+		it('adds new value', () => {
+			const store = localStorageStore('myKey4', '');
+			store.set('new-value');
+			const value = get(store);
+
+			expect(localStorage.myKey4).toEqual('"new-value"');
+			expect(value).toEqual('new-value');
+		});
+	});
+
+	describe('update()', () => {
+		it('replaces old value', () => {
+			localStorage.setItem('myKey5', '123');
+
+			const store = localStorageStore('myKey5', 0);
+			store.update((n) => n + 1);
+			const value = get(store);
+
+			expect(localStorage.myKey5).toEqual('124');
+			expect(value).toEqual(124);
+		});
+
+		it('adds new value', () => {
+			const store = localStorageStore('myKey6', 123);
+			store.update((n) => n + 1);
+			const value = get(store);
+
+			expect(localStorage.myKey6).toEqual('124');
+			expect(value).toEqual(124);
+		});
+	});
+
+	describe('subscribe()', () => {
+		it('publishes updates', () => {
+			const store = localStorageStore('myKey7', 123);
+			const values: number[] = [];
+			const unsub = store.subscribe((value: number) => {
+				if (value !== undefined) values.push(value);
+			});
+			store.set(456);
+			store.set(999);
+
+			expect(values).toEqual([123, 456, 999]);
+
+			unsub();
+		});
+	});
+
+	it('handles duplicate stores with the same key', () => {
+		const store1 = localStorageStore('same-key', 1);
+		const values1: number[] = [];
+
+		const unsub1 = store1.subscribe((value) => {
+			values1.push(value);
+		});
+
+		store1.set(2);
+
+		const store2 = localStorageStore('same-key', 99);
+		const values2: number[] = [];
+
+		const unsub2 = store2.subscribe((value) => {
+			values2.push(value);
+		});
+
+		store1.set(3);
+		store2.set(4);
+
+		expect(values1).toEqual([1, 2, 3, 4]);
+		expect(values2).toEqual([2, 3, 4]);
+		expect(get(store1)).toEqual(get(store2));
+
+		expect(store1).toEqual(store2);
+
+		unsub1();
+		unsub2();
+	});
+
+	describe('handles window.storage event', () => {
+		type NumberDict = { [key: string]: number };
+
+		it('sets storage when key matches', () => {
+			const store = localStorageStore('myKey8', { a: 1 });
+			const values: NumberDict[] = [];
+
+			const unsub = store.subscribe((value: NumberDict) => {
+				values.push(value);
+			});
+
+			const event = new StorageEvent('storage', { key: 'myKey8', newValue: '{"a": 1, "b": 2}' });
+			window.dispatchEvent(event);
+
+			expect(values).toEqual([{ a: 1 }, { a: 1, b: 2 }]);
+
+			unsub();
+		});
+
+		it('sets store to null when value is null', () => {
+			const store = localStorageStore('myKey9', { a: 1 });
+			const values: NumberDict[] = [];
+
+			const unsub = store.subscribe((value: NumberDict) => {
+				values.push(value);
+			});
+
+			const event = new StorageEvent('storage', { key: 'myKey9', newValue: null });
+			window.dispatchEvent(event);
+
+			expect(values).toEqual([{ a: 1 }, null]);
+
+			unsub();
+		});
+
+		it("doesn't update store when key doesn't match", () => {
+			const store = localStorageStore('myKey10', 1);
+			const values: number[] = [];
+
+			const unsub = store.subscribe((value: number) => {
+				values.push(value);
+			});
+
+			const event = new StorageEvent('storage', { key: 'unknownKey', newValue: '2' });
+			window.dispatchEvent(event);
+
+			expect(values).toEqual([1]);
+
+			unsub();
+		});
+
+		it("doesn't update store when there are no subscribers", () => {
+			const store = localStorageStore('myKey', 1);
+			const values: number[] = [];
+
+			const event = new StorageEvent('storage', { key: 'myKey', newValue: '2' });
+			window.dispatchEvent(event);
+			localStorage.setItem('myKey', '2');
+
+			const unsub = store.subscribe((value: number) => {
+				values.push(value);
+			});
+
+			expect(values).toEqual([2]);
+
+			unsub();
+		});
+	});
+
+	it('allows custom serialize/deserialize functions', () => {
+		const serializer = {
+			stringify: (set: Set<number>) => JSON.stringify(Array.from(set)),
+			parse: (json: string) => new Set(JSON.parse(json))
+		};
+
+		const testSet = new Set([1, 2, 3]);
+
+		const store = localStorageStore('myKey11', testSet, { serializer });
+		const value = get(store);
+
+		store.update((d) => d.add(4));
+
+		expect(value).toEqual(testSet);
+		expect(localStorage.myKey11).toEqual(serializer.stringify(testSet));
+	});
+});
diff --git a/src/lib/utilities/LocalStorageStore/LocalStorageStore.ts b/src/lib/utilities/LocalStorageStore/LocalStorageStore.ts
new file mode 100644
index 0000000000..49030746f1
--- /dev/null
+++ b/src/lib/utilities/LocalStorageStore/LocalStorageStore.ts
@@ -0,0 +1,68 @@
+// Source: https://github.com/joshnuss/svelte-local-storage-store
+// https://github.com/joshnuss/svelte-local-storage-store/blob/master/index.ts
+// Represents version v0.3.1 (2022-08-21)
+
+import { writable as internal, get, type Writable } from 'svelte/store';
+
+declare type Updater<T> = (value: T) => T;
+declare type StoreDict<T> = { [key: string]: Writable<T> };
+
+const stores: StoreDict<any> = {};
+
+interface Serializer<T> {
+	parse(text: string): T;
+	stringify(object: T): string;
+}
+
+interface Options<T> {
+	serializer: Serializer<T>;
+}
+
+export function localStorageStore<T>(key: string, initialValue: T, options?: Options<T>): Writable<T> {
+	const browser = typeof localStorage != 'undefined' && typeof window != 'undefined';
+	const serializer = options?.serializer || JSON;
+
+	function updateStorage(key: string, value: T) {
+		if (!browser) return;
+
+		localStorage.setItem(key, serializer.stringify(value));
+	}
+
+	if (!stores[key]) {
+		const store = internal(initialValue, (set) => {
+			const json = browser ? localStorage.getItem(key) : null;
+
+			if (json) {
+				set(<T>serializer.parse(json));
+			}
+
+			if (browser) {
+				const handleStorage = (event: StorageEvent) => {
+					if (event.key === key) set(event.newValue ? serializer.parse(event.newValue) : null);
+				};
+
+				window.addEventListener('storage', handleStorage);
+
+				return () => window.removeEventListener('storage', handleStorage);
+			}
+		});
+
+		const { subscribe, set } = store;
+
+		stores[key] = {
+			set(value: T) {
+				updateStorage(key, value);
+				set(value);
+			},
+			update(updater: Updater<T>) {
+				const value = updater(get(store));
+
+				updateStorage(key, value);
+				set(value);
+			},
+			subscribe
+		};
+	}
+
+	return stores[key];
+}
diff --git a/src/routes/(inner)/utilities/local-storage-stores/+page.svelte b/src/routes/(inner)/utilities/local-storage-stores/+page.svelte
new file mode 100644
index 0000000000..cefa7da280
--- /dev/null
+++ b/src/routes/(inner)/utilities/local-storage-stores/+page.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
+</script>
+
+<div class="space-y-8">
+	<!-- Header -->
+	<header class="space-y-4">
+		<h1>Local Storage Store</h1>
+		<p>An extended version of the <a href="https://svelte.dev/tutorial/writable-stores" target="_blank">Svelte writable store</a> that includes pub/sub to local storage.</p>
+		<CodeBlock
+			language="javascript"
+			code={`import { localStorageStore } from '@brainandbones/skeleton';
+        `}
+		/>
+	</header>
+
+	<!-- Usage -->
+	<section class="space-y-4">
+		<h2>Usage</h2>
+		<p>The first parameter <code>storeExample</code> is the local storage key name. The second parameter is the initial value of the store.</p>
+		<CodeBlock
+			language="ts"
+			code={`
+import type { Writable } from 'svelte/store';
+
+const storeExample: Writable<string> = localStorageStore('storeExample', 'initialValueHere')
+`}
+		/>
+		<p>
+			This operates exactly like a standard Svelte writable store, just with the added benefit of automatic persistence via <a
+				href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"
+				target="_blank">Local Storage</a
+			>.
+		</p>
+		<CodeBlock
+			language="ts"
+			code={`
+import { get } from 'svelte/store';
+
+// Subscribe to the store
+storeExample.subscribe(() => {});
+
+// Update the value
+storeExample.update(() => {});
+
+// Set the value
+storeExample.set(() => {});
+
+// Read the value
+get(storeExample);
+
+// Read value with automatic subscription
+$storeExample
+        `}
+		/>
+	</section>
+
+	<!-- Attribution -->
+	<section class="space-y-4">
+		<h2>Attribution</h2>
+		<p>
+			<a href="https://github.com/joshnuss/svelte-local-storage-store" target="_blank">Source code</a> provided courtesy of <a href="https://github.com/joshnuss" target="_blank">Joshua Nussbaum</a>.
+			Please consider
+			<a href="https://github.com/sponsors/joshnuss" target="_blank">sponsoring his work</a>.
+		</p>
+	</section>
+</div>

From 0c36c885f9d706ef9297a6bf98afe51f10c2726c Mon Sep 17 00:00:00 2001
From: endigo9740 <gundamx9740@gmail.com>
Date: Mon, 26 Sep 2022 14:24:30 -0500
Subject: [PATCH 11/11] Implemented local storage store, themer UI improved

---
 src/docs/DocsAppBar/DocsAppBar.svelte |   6 +-
 src/docs/DocsThemer/DocsThemer.svelte | 109 +++++++++-----------------
 2 files changed, 38 insertions(+), 77 deletions(-)

diff --git a/src/docs/DocsAppBar/DocsAppBar.svelte b/src/docs/DocsAppBar/DocsAppBar.svelte
index 7d46e1ca00..bdc00f4b8e 100644
--- a/src/docs/DocsAppBar/DocsAppBar.svelte
+++ b/src/docs/DocsAppBar/DocsAppBar.svelte
@@ -30,9 +30,9 @@
 	<!-- Branding -->
 	<svelte:fragment slot="lead">
 		<!-- Drawer Menu -->
-		<div on:click={drawerOpen} class="lg:hidden mr-2 p-1 cursor-pointer">
-			<SvgIcon name="bars" width="w-6" height="h-6" fill="fill-black dark:fill-white" on:click={drawerOpen} />
-		</div>
+		<button on:click={drawerOpen} class="lg:hidden mr-2 p-1 cursor-pointer">
+			<SvgIcon name="bars" width="w-6" height="h-6" fill="fill-black dark:fill-white" />
+		</button>
 		<!-- Skeleton -->
 		<a href="/" class="text-sm sm:text-lg md:text-3xl font-bold uppercase mr-4" title="Return to Homepage">Skeleton</a>
 		<!-- Badge -->
diff --git a/src/docs/DocsThemer/DocsThemer.svelte b/src/docs/DocsThemer/DocsThemer.svelte
index 9f9363e7db..33ae59ab83 100644
--- a/src/docs/DocsThemer/DocsThemer.svelte
+++ b/src/docs/DocsThemer/DocsThemer.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { writable, type Writable } from 'svelte/store';
+	import type { Writable } from 'svelte/store';
+
+	// Utilities
+	import { localStorageStore } from '$lib/utilities/LocalStorageStore/LocalStorageStore';
 
 	// Components
 	import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
@@ -16,33 +19,32 @@
 	// Local
 	const regexValidHexCode = new RegExp(/^#[0-9a-f]{6}$/i);
 	let themeCss: string = '';
-	let loaded = false;
 
 	// Stores
-	let storeMode: Writable<boolean> = writable(true); // T: Tailwind | F: Custom
-	let storePreview: Writable<boolean> = writable(false);
-	let storeTailwindForm: Writable<any> = writable({
+	let storeMode: Writable<boolean> = localStorageStore('storeMode', true); // T: Tailwind | F: Custom
+	let storePreview: Writable<boolean> = localStorageStore('storePreview', false);
+	let storeTailwindForm: Writable<any> = localStorageStore('storeTailwindForm', {
 		primary: 'emerald',
 		accent: 'indigo',
 		ternary: 'yellow',
 		warning: 'rose',
 		surface: 'gray'
 	});
-	let storeTailwindPalette: Writable<any> = writable({
+	let storeTailwindPalette: Writable<any> = localStorageStore('storeTailwindPalette', {
 		primary: getTailwindColor($storeTailwindForm.primary),
 		accent: getTailwindColor($storeTailwindForm.accent),
 		ternary: getTailwindColor($storeTailwindForm.ternary),
 		warning: getTailwindColor($storeTailwindForm.warning),
 		surface: getTailwindColor($storeTailwindForm.surface)
 	});
-	let storeHexForm: Writable<any> = writable({
+	let storeHexForm: Writable<any> = localStorageStore('storeHexForm', {
 		primary: getTailwindColor('emerald').shades['500'].hex,
 		accent: getTailwindColor('indigo').shades['500'].hex,
 		ternary: getTailwindColor('yellow').shades['500'].hex,
 		warning: getTailwindColor('rose').shades['500'].hex,
 		surface: getTailwindColor('gray').shades['500'].hex
 	});
-	let storeHexPalette: Writable<any> = writable({
+	let storeHexPalette: Writable<any> = localStorageStore('storeHexPalette', {
 		primary: genHexPalette('primary', $storeHexForm.primary),
 		accent: genHexPalette('accent', $storeHexForm.accent),
 		ternary: genHexPalette('ternary', $storeHexForm.ternary),
@@ -52,54 +54,18 @@
 
 	// Local Storage
 
-	if (browser) {
-		// LocalStorage Values ---
-		const lsMode: string = localStorage['storeMode'];
-		const lsPreview: string = localStorage['storePreview'];
-		const lsTailwindForm: string = localStorage['storeTailwindForm'];
-		const lsTailwindPalette: string = localStorage['storeTailwindPalette'];
-		const lsHexForm: string = localStorage['storeHexForm'];
-		const lsHexPalette: string = localStorage['storeHexPalette'];
-		// Getters ---
-		if (lsMode !== undefined) {
-			storeMode = writable(lsMode === 'true');
-		}
-		if (lsPreview !== undefined) {
-			storePreview = writable(lsPreview === 'true');
-		}
-		if (lsTailwindForm !== undefined) {
-			storeTailwindForm = writable(JSON.parse(lsTailwindForm));
-		}
-		if (lsTailwindPalette !== undefined) {
-			storeTailwindPalette = writable(JSON.parse(lsTailwindPalette));
-		}
-		if (lsHexForm !== undefined) {
-			storeHexForm = writable(JSON.parse(lsHexForm));
-		}
-		if (lsHexPalette !== undefined) {
-			storeHexPalette = writable(JSON.parse(lsHexPalette));
-		}
-		// Setters ---
-		storeMode.subscribe((v) => (localStorage.storeMode = String(v)));
-		storePreview.subscribe((v) => (localStorage.storePreview = String(v)));
-		storeTailwindForm.subscribe((v) => (localStorage.storeTailwindForm = JSON.stringify(v)));
-		storeTailwindPalette.subscribe((v) => (localStorage.storeTailwindPalette = JSON.stringify(v)));
-		storeHexForm.subscribe((v) => (localStorage.storeHexForm = JSON.stringify(v)));
-		storeHexPalette.subscribe((v) => (localStorage.storeHexPalette = JSON.stringify(v)));
-		// Loading Completed ---
-		loaded = true;
-	}
-
 	function resetSettings(): void {
-		// Clear Local Storage Values
-		localStorage.removeItem('storeMode');
-		localStorage.removeItem('storePreview');
-		localStorage.removeItem('storeTailwindForm');
-		localStorage.removeItem('storeTailwindPalette');
-		localStorage.removeItem('storeHexForm');
-		localStorage.removeItem('storeHexPalette');
-		// Reload Window
-		location.reload();
+		if (confirm('Clear all theme settings and restore the site back to the default settings?')) {
+			// Clear Local Storage Values
+			localStorage.removeItem('storeMode');
+			localStorage.removeItem('storePreview');
+			localStorage.removeItem('storeTailwindForm');
+			localStorage.removeItem('storeTailwindPalette');
+			localStorage.removeItem('storeHexForm');
+			localStorage.removeItem('storeHexPalette');
+			// Reload Window
+			location.reload();
+		}
 	}
 
 	// Functions ---
@@ -161,29 +127,26 @@
 </svelte:head>
 
 <!-- prettier-ignore -->
-{#if loaded}
 <div class="themer space-y-4">
+
+	
 	
 	<!-- Color Pickers -->
-	<section class="card !bg-[#141517] !ring-0 space-y-4">
+	<section class="card !bg-[#141517] !ring-0">
+
 		<!-- Header: Controls -->
-		<div class="card-body flex flex-col lg:flex-row lg:justify-between items-center space-y-4 lg:space-y-0 lg:space-x-4">
+		<div class="card-header flex justify-between items-center space-x-4">
 			<!-- Mode -->
 			<RadioGroup selected={storeMode}>
-				<RadioItem value={true}>Tailwind Colors</RadioItem>
-				<RadioItem value={false}>Hex Colors</RadioItem>
+				<RadioItem value={true}>Tailwind</RadioItem>
+				<RadioItem value={false}>Hex</RadioItem>
 			</RadioGroup>
-			<div class="flex items-center space-x-4">
-				<!-- Actions -->
-				{#if $storeMode}<button class="btn btn-sm btn-ghost" on:click={onRandomize}>Random</button>{/if}
-				<button class="btn btn-sm btn-ghost" on:click={resetSettings}>Reset</button>
-				<!-- Preview -->
-				<SlideToggle bind:checked={$storePreview} class="text-white">Live</SlideToggle>
-			</div>
+			{#if $storeMode}<button class="btn btn-filled" on:click={onRandomize}>Randomize</button>{/if}
+			{#if !$storeMode}<a class="btn btn-filled" href="https://coolors.co/" target="_blank">Inspiration</a>{/if}
 		</div>
 
 		<!-- Body: Form -->
-		<div class="card-body space-y-2">
+		<div class="card-body !pt-2 space-y-4 lg:space-y-2">
 			{#each ['primary', 'accent', 'ternary', 'warning', 'surface'] as colorKey}
 				<div class="grid grid-cols-1 xl:grid-cols-[140px_1fr] gap-2 xl:gap-4 xl:place-items-end">
 					<label class="w-full">
@@ -204,9 +167,10 @@
 			{/each}
 		</div>
 
-		<!-- Footer: Note -->
-		<div class="card-footer">
-			<p class="text-xs text-center">Each color {$storeMode ? 'selected' : 'input'} represents swatch 500.</p>
+		<!-- Live Preview -->
+		<div class="card-footer !pt-4 {$storePreview ? 'bg-green-500/30' : 'bg-red-500/10'} flex justify-between items-center">
+			<SlideToggle bind:checked={$storePreview} class="text-white">Enable Live Preview</SlideToggle>
+			<button class="btn bg-white/5 text-white" on:click={resetSettings}>Reset Theme</button>
 		</div>
 
 	</section>
@@ -214,6 +178,3 @@
 	<!-- CSS Snipnpet -->
 	<CodeBlock language="css" code={themeCss} />
 </div>
-{:else}
-	<section class="card card-body !bg-[#141517] !ring-0 space-y-4 text-center"><p>Loading Theme Generator...</p></section>
-{/if}