QA items addressed

sites/themes.skeleton.dev/src/lib/components/common/CodeBlock/CodeBlock.svelte

@@ -78,7 +78,7 @@
 	.codeblock :global {
 		.shiki {
 			@apply py-6 text-xs rounded-md whitespace-pre-wrap;
-			@apply !bg-surface-900; /* set code block bg color */
+			@apply !bg-black; /* set code block bg color */
 		}
 		.line {
 			/**

sites/themes.skeleton.dev/src/lib/components/generator/Controls/ControlsColors.svelte

@@ -37,9 +37,15 @@
 	let showAllShades = $state(false);
 	const rxShadeArray = $derived(showAllShades ? shadesAll : shades3x);
 
+	function onClearPalette() {
+		if (confirm('This will reset all theme colors to a neutral tone. Are you sure you wish to continue?')) {
+			constants.colorNames.forEach((colorName) => seedColor(colorName, '#CCCCCC'));
+		}
+	}
+
 	function promptColorSeed(colorName: string) {
-		const seed = prompt(`Provide a color value to generate a palette for ${colorName}.`);
-		if (seed) seedColor(colorName, seed);
+		const promptSeed = prompt(`Provide a color value to generate a palette for ${colorName}.`);
+		if (promptSeed) seedColor(colorName, promptSeed);
 	}
 
 	function promptRandomColor(colorName: string) {
@@ -51,6 +57,10 @@
 
 <div class="space-y-4">
 	<p class="opacity-60">Define the color palette per each available theme color.</p>
+	<!-- Button: Clear Palette -->
+	<button type="button" class="btn preset-outlined-surface-200-800 hover:preset-tonal w-full" onclick={onClearPalette}
+		>Clear Theme Palette</button
+	>
 	<!-- Color Tabs -->
 	<Tabs bind:value={globals.activeColor} fluid>
 		{#snippet list()}

sites/themes.skeleton.dev/src/lib/components/generator/Preview/PreviewComponents.svelte

@@ -186,7 +186,7 @@
 			style="background: url(https://picsum.photos/640/640) center center; backround-size: cover;"
 		>
 			<div class="absolute bottom-4 left-4 z-[2] flex justify-center items-center">
-				<p class="text-4xl text-balance max-w-[250px] font-bold inline-block text-primary-contrast-500 dark:text-primary-contrast-500">
+				<p class="text-4xl text-balance max-w-[250px] font-bold inline-block {currentPresets.contrast}">
 					Example text over a static image.
 				</p>
 			</div>

sites/themes.skeleton.dev/src/lib/components/generator/Preview/PreviewPalette.svelte

@@ -223,13 +223,13 @@
 	<section class="space-y-5">
 		<h2 class="h4">Tonal</h2>
 		<div class="w-full grid grid-cols-11 gap-4">
-			<div class="aspect-square rounded-full flex justify-center items-center preset-tonal"><IconCenter size={32} /></div>
 			<div class="aspect-square rounded-full flex justify-center items-center preset-tonal-primary"><IconCenter size={32} /></div>
 			<div class="aspect-square rounded-full flex justify-center items-center preset-tonal-secondary"><IconCenter size={32} /></div>
 			<div class="aspect-square rounded-full flex justify-center items-center preset-tonal-tertiary"><IconCenter size={32} /></div>
 			<div class="aspect-square rounded-full flex justify-center items-center preset-tonal-success"><IconCenter size={32} /></div>
 			<div class="aspect-square rounded-full flex justify-center items-center preset-tonal-warning"><IconCenter size={32} /></div>
 			<div class="aspect-square rounded-full flex justify-center items-center preset-tonal-error"><IconCenter size={32} /></div>
+			<div class="aspect-square rounded-full flex justify-center items-center preset-tonal"><IconCenter size={32} /></div>
 		</div>
 	</section>
 </div>

sites/themes.skeleton.dev/src/lib/components/generator/Preview/PreviewTypography.svelte

@@ -3,7 +3,7 @@
 	<div class="space-y-10">
 		<!-- Headings -->
 		<div>
-			<div class="space-y-2">
+			<div class="space-y-5">
 				<h1 class="h1">Heading 1</h1>
 				<h2 class="h2">Heading 2</h2>
 				<h3 class="h3">Heading 3</h3>

sites/themes.skeleton.dev/src/lib/constants/generator.ts

@@ -17,7 +17,8 @@ export const previewPresets: Record<string, Record<string, string>> = {
 		ring: 'ring-primary-500 dark:border-primary-500',
 		anchor: 'text-primary-500 dark:text-primary-500',
 		hover: 'hover:preset-tonal-primary',
-		gradient: 'to-primary-500'
+		gradient: 'to-primary-500',
+		contrast: 'text-primary-contrast-500 dark:text-primary-contrast-500'
 	},
 	secondary: {
 		prop: '--color-secondary-500',
@@ -27,7 +28,8 @@ export const previewPresets: Record<string, Record<string, string>> = {
 		input: 'focus:ring-secondary-500 focus:dark:ring-secondary-500',
 		anchor: 'text-secondary-500 dark:text-secondary-500',
 		hover: 'hover:preset-tonal-secondary',
-		gradient: 'to-secondary-500'
+		gradient: 'to-secondary-500',
+		contrast: 'text-secondary-contrast-500 dark:text-secondary-contrast-500'
 	},
 	tertiary: {
 		prop: '--color-tertiary-500',
@@ -37,7 +39,8 @@ export const previewPresets: Record<string, Record<string, string>> = {
 		input: 'focus:ring-tertiary-500 focus:dark:ring-tertiary-500',
 		anchor: 'text-tertiary-500 dark:text-tertiary-500',
 		hover: 'hover:preset-tonal-tertiary',
-		gradient: 'to-tertiary-500'
+		gradient: 'to-tertiary-500',
+		contrast: 'text-tertiary-contrast-500 dark:text-tertiary-contrast-500'
 	},
 	success: {
 		prop: '--color-success-500',
@@ -47,7 +50,8 @@ export const previewPresets: Record<string, Record<string, string>> = {
 		input: 'focus:ring-success-500 focus:dark:ring-success-500',
 		anchor: 'text-success-500 dark:text-success-500',
 		hover: 'hover:preset-tonal-success',
-		gradient: 'to-success-500'
+		gradient: 'to-success-500',
+		contrast: 'text-success-contrast-500 dark:text-success-contrast-500'
 	},
 	warning: {
 		prop: '--color-warning-500',
@@ -57,7 +61,8 @@ export const previewPresets: Record<string, Record<string, string>> = {
 		input: 'focus:ring-warning-500 focus:dark:ring-warning-500',
 		anchor: 'text-warning-500 dark:text-warning-500',
 		hover: 'hover:preset-tonal-warning',
-		gradient: 'to-warning-500'
+		gradient: 'to-warning-500',
+		contrast: 'text-warning-contrast-500 dark:text-warning-contrast-500'
 	},
 	error: {
 		prop: '--color-error-500',
@@ -67,7 +72,8 @@ export const previewPresets: Record<string, Record<string, string>> = {
 		input: 'focus:ring-error-500 focus:dark:ring-error-500',
 		anchor: 'text-error-500 dark:text-error-500',
 		hover: 'hover:preset-tonal-error',
-		gradient: 'to-error-500'
+		gradient: 'to-error-500',
+		contrast: 'text-error-contrast-500 dark:text-error-contrast-500'
 	},
 	surface: {
 		prop: '--color-surface-500',
@@ -77,7 +83,8 @@ export const previewPresets: Record<string, Record<string, string>> = {
 		input: 'focus:border-surface-500 focus:dark:ring-surface-500',
 		anchor: 'text-surface-500 dark:text-surface-500',
 		hover: 'hover:preset-tonal-surface',
-		gradient: 'to-surface-500'
+		gradient: 'to-surface-500',
+		contrast: 'text-surface-contrast-500 dark:text-surface-contrast-500'
 	}
 };
 

sites/themes.skeleton.dev/src/routes/(app)/+page.svelte

@@ -1,4 +1,12 @@
-<!-- <script lang="ts"></script> -->
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		// NOTE: Redirect to Generator page
+		goto('/themes/create');
+	});
+</script>
 
 <div class="card preset-tonal-warning p-4 text-center">
 	<p>Future home of the <u>browse</u> page.</p>