v2: Implement Wintry Preset Theme (#1902)

Co-authored-by: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
2025-12-06 04:21:15 +00:00 · 2023-08-18 12:51:08 -05:00
parent 158d029eb0
commit 58b0c78489
28 changed files with 173 additions and 1374 deletions
--- a/.changeset/silent-games-drop.md
+++ b/.changeset/silent-games-drop.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/tw-plugin": minor
+---
+
+feat: Added a new `wintry` preset theme
--- a/packages/plugin/scripts/convert-theme.ts
+++ b/packages/plugin/scripts/convert-theme.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'fs';
 import { writeFile } from 'fs/promises';
 import postcss from 'postcss';
 import postcssJs from 'postcss-js';
-import type { Theme } from '../src/tailwind/themes';
+import type { PresetTheme } from '../src/tailwind/themes';

 // Converts a theme's .css file into a .ts file.
 export async function convertTheme(name: string) {
@@ -17,9 +17,11 @@ export async function convertTheme(name: string) {
 	delete cssInJs[':root'];

 	const theme = {
+		name,
 		properties: properties,
-		enhancements: { ...cssInJs }
-	} satisfies Theme;
+		enhancements: { ...cssInJs },
+		properties_dark: {}
+	} satisfies PresetTheme;

 	// Creates the generated CSS-in-JS file
 	await writeFile(
--- a/packages/plugin/src/tailwind/themes/crimson.ts
+++ b/packages/plugin/src/tailwind/themes/crimson.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';

 const crimson = {
+	name: 'crimson',
 	properties: {
 		'--theme-font-family-base':
 			"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\t'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
@@ -90,6 +91,6 @@ const crimson = {
 	},
 	properties_dark: {},
 	enhancements: {}
-} satisfies Theme;
+} satisfies PresetTheme;

 export default crimson;
--- a/packages/plugin/src/tailwind/themes/gold-nouveau.ts
+++ b/packages/plugin/src/tailwind/themes/gold-nouveau.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';

 const goldNouveau = {
+	name: 'gold-nouveau',
 	properties: {
 		'--theme-font-family-base': 'system-ui, sans-serif',
 		'--theme-font-family-heading': "'Quicksand', sans-serif",
@@ -112,6 +113,6 @@ const goldNouveau = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;

 export default goldNouveau;
--- a/packages/plugin/src/tailwind/themes/hamlindigo.ts
+++ b/packages/plugin/src/tailwind/themes/hamlindigo.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';

 const hamlindigo = {
+	name: 'hamlindigo',
 	properties: {
 		'--theme-font-family-base':
 			"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\t'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
@@ -99,6 +100,6 @@ const hamlindigo = {
 				"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%233b4762' fill-opacity='0.2'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")"
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;

 export default hamlindigo;
--- a/packages/plugin/src/tailwind/themes/index.ts
+++ b/packages/plugin/src/tailwind/themes/index.ts
@@ -7,22 +7,27 @@ import sahara from './sahara.js';
 import seafoam from './seafoam.js';
 import skeleton from './skeleton.js';
 import vintage from './vintage.js';
+import wintry from './wintry.js';
 import type { CSSRuleObject } from 'tailwindcss/types/config.js';

-export const themes = { crimson, 'gold-nouveau': goldNouveau, hamlindigo, modern, rocket, sahara, seafoam, skeleton, vintage };
+export const themes = { crimson, 'gold-nouveau': goldNouveau, hamlindigo, modern, rocket, sahara, seafoam, skeleton, vintage, wintry };

-export type PresetTheme = ObjectKeys<typeof themes>;
+export type PresetThemeName = ObjectKeys<typeof themes>;

-export function getThemeProperties(themeName: PresetTheme) {
+export function getThemeProperties(themeName: PresetThemeName) {
 	return themes[themeName].properties;
 }

 export type ObjectValues<T> = T[keyof T];
 export type ObjectKeys<T> = keyof T;

-export type Theme = {
+export type BaseTheme = {
+	name: string;
 	properties: ThemeProperties;
 	properties_dark: Partial<ThemeProperties>;
+};
+
+export type PresetTheme = BaseTheme & {
 	enhancements: CSSRuleObject;
 };

--- a/packages/plugin/src/tailwind/themes/modern.ts
+++ b/packages/plugin/src/tailwind/themes/modern.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';

 const modern = {
+	name: 'modern',
 	properties: {
 		'--theme-font-family-base': "'Quicksand', sans-serif",
 		'--theme-font-family-heading': "'Quicksand', sans-serif",
@@ -108,6 +109,6 @@ const modern = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;

 export default modern;
--- a/packages/plugin/src/tailwind/themes/rocket.ts
+++ b/packages/plugin/src/tailwind/themes/rocket.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';

 const rocket = {
+	name: 'rocket',
 	properties: {
 		'--theme-font-family-base': 'system-ui',
 		'--theme-font-family-heading': "'Space Grotesk', sans-serif",
@@ -100,6 +101,6 @@ const rocket = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;

 export default rocket;
--- a/packages/plugin/src/tailwind/themes/sahara.ts
+++ b/packages/plugin/src/tailwind/themes/sahara.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';

 const sahara = {
+	name: 'sahara',
 	properties: {
 		'--theme-font-family-base':
 			"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\t'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
@@ -111,6 +112,6 @@ const sahara = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;

 export default sahara;
--- a/packages/plugin/src/tailwind/themes/seafoam.ts
+++ b/packages/plugin/src/tailwind/themes/seafoam.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';

 const seafoam = {
+	name: 'seafoam',
 	properties: {
 		'--theme-font-family-base':
 			"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\t'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
@@ -107,6 +108,6 @@ const seafoam = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;

 export default seafoam;
--- a/packages/plugin/src/tailwind/themes/skeleton.ts
+++ b/packages/plugin/src/tailwind/themes/skeleton.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';

 const skeleton = {
+	name: 'skeleton',
 	properties: {
 		'--theme-font-family-base': 'system-ui',
 		'--theme-font-family-heading': 'system-ui',
@@ -100,6 +101,6 @@ const skeleton = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;

 export default skeleton;
--- a/packages/plugin/src/tailwind/themes/vintage.ts
+++ b/packages/plugin/src/tailwind/themes/vintage.ts
@@ -1,6 +1,7 @@
-import type { Theme } from './index.js';
+import type { PresetTheme } from './index.js';

 const vintage = {
+	name: 'vintage',
 	properties: {
 		'--theme-font-family-base':
 			"Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\t'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
@@ -109,6 +110,6 @@ const vintage = {
 			backgroundSize: 'cover'
 		}
 	}
-} satisfies Theme;
+} satisfies PresetTheme;

 export default vintage;
--- a/packages/plugin/src/tailwind/themes/wintry.ts
+++ b/packages/plugin/src/tailwind/themes/wintry.ts
@@ -0,0 +1,110 @@
+import type { PresetTheme } from './index.js';
+
+const wintry = {
+	name: 'wintry',
+	properties: {
+		'--theme-font-family-heading': 'Inter, system-ui, sans-serif',
+		'--theme-font-family-base': 'system-ui',
+		'--theme-font-color-base': '23 37 84',
+		'--theme-font-color-dark': '255 255 255',
+		'--theme-rounded-base': '9999px',
+		'--theme-rounded-container': '6px',
+		'--theme-border-base': '1px',
+		'--on-primary': '255 255 255',
+		'--on-secondary': '255 255 255',
+		'--on-tertiary': '255 255 255',
+		'--on-success': '0 0 0',
+		'--on-warning': '0 0 0',
+		'--on-error': '255 255 255',
+		'--on-surface': '255 255 255',
+		'--color-primary-50': '239 246 255',
+		'--color-primary-100': '219 234 254',
+		'--color-primary-200': '191 219 254',
+		'--color-primary-300': '147 197 253',
+		'--color-primary-400': '96 165 250',
+		'--color-primary-500': '59 130 246',
+		'--color-primary-600': '37 99 235',
+		'--color-primary-700': '29 78 216',
+		'--color-primary-800': '30 64 175',
+		'--color-primary-900': '30 58 138',
+		'--color-secondary-50': '240 249 255',
+		'--color-secondary-100': '224 242 254',
+		'--color-secondary-200': '186 230 253',
+		'--color-secondary-300': '125 211 252',
+		'--color-secondary-400': '56 189 248',
+		'--color-secondary-500': '14 165 233',
+		'--color-secondary-600': '2 132 199',
+		'--color-secondary-700': '3 105 161',
+		'--color-secondary-800': '7 89 133',
+		'--color-secondary-900': '12 74 110',
+		'--color-tertiary-50': '238 242 255',
+		'--color-tertiary-100': '224 231 255',
+		'--color-tertiary-200': '199 210 254',
+		'--color-tertiary-300': '165 180 252',
+		'--color-tertiary-400': '129 140 248',
+		'--color-tertiary-500': '99 102 241',
+		'--color-tertiary-600': '79 70 229',
+		'--color-tertiary-700': '67 56 202',
+		'--color-tertiary-800': '55 48 163',
+		'--color-tertiary-900': '49 46 129',
+		'--color-success-50': '237 247 220',
+		'--color-success-100': '230 245 208',
+		'--color-success-200': '224 242 197',
+		'--color-success-300': '206 235 162',
+		'--color-success-400': '169 219 92',
+		'--color-success-500': '132 204 22',
+		'--color-success-600': '119 184 20',
+		'--color-success-700': '99 153 17',
+		'--color-success-800': '79 122 13',
+		'--color-success-900': '65 100 11',
+		'--color-warning-50': '252 244 218',
+		'--color-warning-100': '251 240 206',
+		'--color-warning-200': '250 236 193',
+		'--color-warning-300': '247 225 156',
+		'--color-warning-400': '240 202 82',
+		'--color-warning-500': '234 179 8',
+		'--color-warning-600': '211 161 7',
+		'--color-warning-700': '176 134 6',
+		'--color-warning-800': '140 107 5',
+		'--color-warning-900': '115 88 4',
+		'--color-error-50': '249 221 234',
+		'--color-error-100': '246 209 228',
+		'--color-error-200': '244 198 221',
+		'--color-error-300': '238 163 200',
+		'--color-error-400': '225 94 159',
+		'--color-error-500': '212 25 118',
+		'--color-error-600': '191 23 106',
+		'--color-error-700': '159 19 89',
+		'--color-error-800': '127 15 71',
+		'--color-error-900': '104 12 58',
+		'--color-surface-50': '249 250 251',
+		'--color-surface-100': '243 244 246',
+		'--color-surface-200': '229 231 235',
+		'--color-surface-300': '209 213 219',
+		'--color-surface-400': '156 163 175',
+		'--color-surface-500': '107 114 128',
+		'--color-surface-600': '75 85 99',
+		'--color-surface-700': '55 65 81',
+		'--color-surface-800': '31 41 55',
+		'--color-surface-900': '17 24 39'
+	},
+	properties_dark: {},
+	enhancements: {
+		"[data-theme='wintry'] h1,\n[data-theme='wintry'] h2,\n[data-theme='wintry'] h3,\n[data-theme='wintry'] h4,\n[data-theme='wintry'] h5,\n[data-theme='wintry'] h6":
+			{ fontWeight: 'bold' },
+		"[data-theme='wintry']": {
+			backgroundImage:
+				'radial-gradient(at 50% 0%, rgba(var(--color-secondary-500) / 0.50) 0px, transparent 75%), radial-gradient(at 100% 0%, rgba(var(--color-tertiary-500) / 0.40) 0px, transparent 50%)',
+			backgroundAttachment: 'fixed',
+			backgroundPosition: 'center',
+			backgroundRepeat: 'no-repeat',
+			backgroundSize: 'cover'
+		},
+		".dark [data-theme='wintry']": {
+			backgroundImage:
+				'radial-gradient(at 50% 0%, rgba(var(--color-secondary-500) / 0.18) 0px, transparent 75%), radial-gradient(at 100% 0%, rgba(var(--color-tertiary-500) / 0.18) 0px, transparent 50%)'
+		}
+	}
+} satisfies PresetTheme;
+
+export default wintry;
--- a/packages/plugin/src/themes/theme-crimson.css
+++ b/packages/plugin/src/themes/theme-crimson.css
@@ -1,100 +0,0 @@
-/* =~= Crimson Theme - made by GitHub user @ak4zh for the Skeleton community theme contest.  =~= */
-/* https://github.com/skeletonlabs/skeleton/discussions/401 */
-
-:root {
-	/* =~= Theme Styles =~= */
-	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-	--theme-font-family-heading: system-ui;
-	--theme-font-color-base: var(--color-surface-900);
-	--theme-font-color-dark: var(--color-surface-50);
-	--theme-rounded-base: 24px;
-	--theme-rounded-container: 24px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 255 255 255;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 0 0 0;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #d4163c */
-	--color-primary-50: 249 220 226; /* ⬅ #f9dce2 */
-	--color-primary-100: 246 208 216; /* ⬅ #f6d0d8 */
-	--color-primary-200: 244 197 206; /* ⬅ #f4c5ce */
-	--color-primary-300: 238 162 177; /* ⬅ #eea2b1 */
-	--color-primary-400: 225 92 119; /* ⬅ #e15c77 */
-	--color-primary-500: 212 22 60; /* ⬅ #d4163c */
-	--color-primary-600: 191 20 54; /* ⬅ #bf1436 */
-	--color-primary-700: 159 17 45; /* ⬅ #9f112d */
-	--color-primary-800: 127 13 36; /* ⬅ #7f0d24 */
-	--color-primary-900: 104 11 29; /* ⬅ #680b1d */
-	/* secondary | #4685af */
-	--color-secondary-50: 227 237 243; /* ⬅ #e3edf3 */
-	--color-secondary-100: 218 231 239; /* ⬅ #dae7ef */
-	--color-secondary-200: 209 225 235; /* ⬅ #d1e1eb */
-	--color-secondary-300: 181 206 223; /* ⬅ #b5cedf */
-	--color-secondary-400: 126 170 199; /* ⬅ #7eaac7 */
-	--color-secondary-500: 70 133 175; /* ⬅ #4685af */
-	--color-secondary-600: 63 120 158; /* ⬅ #3f789e */
-	--color-secondary-700: 53 100 131; /* ⬅ #356483 */
-	--color-secondary-800: 42 80 105; /* ⬅ #2a5069 */
-	--color-secondary-900: 34 65 86; /* ⬅ #224156 */
-	/* tertiary | #c0b6b4 */
-	--color-tertiary-50: 246 244 244; /* ⬅ #f6f4f4 */
-	--color-tertiary-100: 242 240 240; /* ⬅ #f2f0f0 */
-	--color-tertiary-200: 239 237 236; /* ⬅ #efedec */
-	--color-tertiary-300: 230 226 225; /* ⬅ #e6e2e1 */
-	--color-tertiary-400: 211 204 203; /* ⬅ #d3cccb */
-	--color-tertiary-500: 192 182 180; /* ⬅ #c0b6b4 */
-	--color-tertiary-600: 173 164 162; /* ⬅ #ada4a2 */
-	--color-tertiary-700: 144 137 135; /* ⬅ #908987 */
-	--color-tertiary-800: 115 109 108; /* ⬅ #736d6c */
-	--color-tertiary-900: 94 89 88; /* ⬅ #5e5958 */
-	/* success | #c1dd97 */
-	--color-success-50: 246 250 239; /* ⬅ #f6faef */
-	--color-success-100: 243 248 234; /* ⬅ #f3f8ea */
-	--color-success-200: 240 247 229; /* ⬅ #f0f7e5 */
-	--color-success-300: 230 241 213; /* ⬅ #e6f1d5 */
-	--color-success-400: 212 231 182; /* ⬅ #d4e7b6 */
-	--color-success-500: 193 221 151; /* ⬅ #c1dd97 */
-	--color-success-600: 174 199 136; /* ⬅ #aec788 */
-	--color-success-700: 145 166 113; /* ⬅ #91a671 */
-	--color-success-800: 116 133 91; /* ⬅ #74855b */
-	--color-success-900: 95 108 74; /* ⬅ #5f6c4a */
-	/* warning | #e4c25e */
-	--color-warning-50: 251 246 231; /* ⬅ #fbf6e7 */
-	--color-warning-100: 250 243 223; /* ⬅ #faf3df */
-	--color-warning-200: 248 240 215; /* ⬅ #f8f0d7 */
-	--color-warning-300: 244 231 191; /* ⬅ #f4e7bf */
-	--color-warning-400: 236 212 142; /* ⬅ #ecd48e */
-	--color-warning-500: 228 194 94; /* ⬅ #e4c25e */
-	--color-warning-600: 205 175 85; /* ⬅ #cdaf55 */
-	--color-warning-700: 171 146 71; /* ⬅ #ab9247 */
-	--color-warning-800: 137 116 56; /* ⬅ #897438 */
-	--color-warning-900: 112 95 46; /* ⬅ #705f2e */
-	/* error | #d27f81 */
-	--color-error-50: 248 236 236; /* ⬅ #f8ecec */
-	--color-error-100: 246 229 230; /* ⬅ #f6e5e6 */
-	--color-error-200: 244 223 224; /* ⬅ #f4dfe0 */
-	--color-error-300: 237 204 205; /* ⬅ #edcccd */
-	--color-error-400: 224 165 167; /* ⬅ #e0a5a7 */
-	--color-error-500: 210 127 129; /* ⬅ #d27f81 */
-	--color-error-600: 189 114 116; /* ⬅ #bd7274 */
-	--color-error-700: 158 95 97; /* ⬅ #9e5f61 */
-	--color-error-800: 126 76 77; /* ⬅ #7e4c4d */
-	--color-error-900: 103 62 63; /* ⬅ #673e3f */
-	/* surface | #2b2e40 */
-	--color-surface-50: 223 224 226; /* ⬅ #dfe0e2 */
-	--color-surface-100: 213 213 217; /* ⬅ #d5d5d9 */
-	--color-surface-200: 202 203 207; /* ⬅ #cacbcf */
-	--color-surface-300: 170 171 179; /* ⬅ #aaabb3 */
-	--color-surface-400: 107 109 121; /* ⬅ #6b6d79 */
-	--color-surface-500: 43 46 64; /* ⬅ #2b2e40 */
-	--color-surface-600: 39 41 58; /* ⬅ #27293a */
-	--color-surface-700: 32 35 48; /* ⬅ #202330 */
-	--color-surface-800: 26 28 38; /* ⬅ #1a1c26 */
-	--color-surface-900: 21 23 31; /* ⬅ #15171f */
-}
--- a/packages/plugin/src/themes/theme-gold-nouveau.css
+++ b/packages/plugin/src/themes/theme-gold-nouveau.css
@@ -1,143 +0,0 @@
-/* =~= Gold Nouveau - made by GitHub user @Sarenor for the Skeleton community theme contest.  =~= */
-/* https://github.com/skeletonlabs/skeleton/discussions/401 */
-
-/* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
-
-/* =~= Gold Nouveau =~= */
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui, sans-serif;
-	--theme-font-family-heading: 'Quicksand', sans-serif;
-	--theme-font-color-base: var(--color-surface-900);
-	--theme-font-color-dark: var(--color-surface-50);
-	--theme-rounded-base: 4px;
-	--theme-rounded-container: 4px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 255 255 255;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 255 255 255;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #744aa1 */
-	--color-primary-50: 250 248 252; /* ⬅ #faf8fc */
-	--color-primary-100: 242 238 247; /* ⬅ #f2eef7 */
-	--color-primary-200: 229 220 239; /* ⬅ #e5dcef */
-	--color-primary-300: 209 192 226; /* ⬅ #d1c0e2 */
-	--color-primary-400: 162 129 197; /* ⬅ #a281c5 */
-	--color-primary-500: 116 74 161; /* ⬅ #744aa1 */
-	--color-primary-600: 83 53 115; /* ⬅ #533573 */
-	--color-primary-700: 60 39 84; /* ⬅ #3c2754 */
-	--color-primary-800: 35 22 49; /* ⬅ #231631 */
-	--color-primary-900: 18 11 24; /* ⬅ #120b18 */
-	/* secondary | #0672e5 */
-	--color-secondary-50: 218 234 251; /* ⬅ #daeafb */
-	--color-secondary-100: 205 227 250; /* ⬅ #cde3fa */
-	--color-secondary-200: 193 220 249; /* ⬅ #c1dcf9 */
-	--color-secondary-300: 155 199 245; /* ⬅ #9bc7f5 */
-	--color-secondary-400: 81 156 237; /* ⬅ #519ced */
-	--color-secondary-500: 6 114 229; /* ⬅ #0672e5 */
-	--color-secondary-600: 5 103 206; /* ⬅ #0567ce */
-	--color-secondary-700: 5 86 172; /* ⬅ #0556ac */
-	--color-secondary-800: 4 68 137; /* ⬅ #044489 */
-	--color-secondary-900: 3 56 112; /* ⬅ #033870 */
-	/* tertiary | #7f78dd */
-	--color-tertiary-50: 236 235 250; /* ⬅ #ecebfa */
-	--color-tertiary-100: 229 228 248; /* ⬅ #e5e4f8 */
-	--color-tertiary-200: 223 221 247; /* ⬅ #dfddf7 */
-	--color-tertiary-300: 204 201 241; /* ⬅ #ccc9f1 */
-	--color-tertiary-400: 165 161 231; /* ⬅ #a5a1e7 */
-	--color-tertiary-500: 127 120 221; /* ⬅ #7f78dd */
-	--color-tertiary-600: 114 108 199; /* ⬅ #726cc7 */
-	--color-tertiary-700: 95 90 166; /* ⬅ #5f5aa6 */
-	--color-tertiary-800: 76 72 133; /* ⬅ #4c4885 */
-	--color-tertiary-900: 62 59 108; /* ⬅ #3e3b6c */
-	/* success | #72c585 */
-	--color-success-50: 234 246 237; /* ⬅ #eaf6ed */
-	--color-success-100: 227 243 231; /* ⬅ #e3f3e7 */
-	--color-success-200: 220 241 225; /* ⬅ #dcf1e1 */
-	--color-success-300: 199 232 206; /* ⬅ #c7e8ce */
-	--color-success-400: 156 214 170; /* ⬅ #9cd6aa */
-	--color-success-500: 114 197 133; /* ⬅ #72c585 */
-	--color-success-600: 103 177 120; /* ⬅ #67b178 */
-	--color-success-700: 86 148 100; /* ⬅ #569464 */
-	--color-success-800: 68 118 80; /* ⬅ #447650 */
-	--color-success-900: 56 97 65; /* ⬅ #386141 */
-	/* warning | #e77f08 */
-	--color-warning-50: 251 236 218; /* ⬅ #fbecda */
-	--color-warning-100: 250 229 206; /* ⬅ #fae5ce */
-	--color-warning-200: 249 223 193; /* ⬅ #f9dfc1 */
-	--color-warning-300: 245 204 156; /* ⬅ #f5cc9c */
-	--color-warning-400: 238 165 82; /* ⬅ #eea552 */
-	--color-warning-500: 231 127 8; /* ⬅ #e77f08 */
-	--color-warning-600: 208 114 7; /* ⬅ #d07207 */
-	--color-warning-700: 173 95 6; /* ⬅ #ad5f06 */
-	--color-warning-800: 139 76 5; /* ⬅ #8b4c05 */
-	--color-warning-900: 113 62 4; /* ⬅ #713e04 */
-	/* error | #8f0f22 */
-	--color-error-50: 238 219 222; /* ⬅ #eedbde */
-	--color-error-100: 233 207 211; /* ⬅ #e9cfd3 */
-	--color-error-200: 227 195 200; /* ⬅ #e3c3c8 */
-	--color-error-300: 210 159 167; /* ⬅ #d29fa7 */
-	--color-error-400: 177 87 100; /* ⬅ #b15764 */
-	--color-error-500: 143 15 34; /* ⬅ #8f0f22 */
-	--color-error-600: 129 14 31; /* ⬅ #810e1f */
-	--color-error-700: 107 11 26; /* ⬅ #6b0b1a */
-	--color-error-800: 86 9 20; /* ⬅ #560914 */
-	--color-error-900: 70 7 17; /* ⬅ #460711 */
-	/* surface | #744aa1 */
-	--color-surface-50: 250 248 252; /* ⬅ #faf8fc */
-	--color-surface-100: 242 238 247; /* ⬅ #f2eef7 */
-	--color-surface-200: 229 220 239; /* ⬅ #e5dcef */
-	--color-surface-300: 209 192 226; /* ⬅ #d1c0e2 */
-	--color-surface-400: 162 129 197; /* ⬅ #a281c5 */
-	--color-surface-500: 116 74 161; /* ⬅ #744aa1 */
-	--color-surface-600: 83 53 115; /* ⬅ #533573 */
-	--color-surface-700: 60 39 84; /* ⬅ #3c2754 */
-	--color-surface-800: 35 22 49; /* ⬅ #231631 */
-	--color-surface-900: 18 11 24; /* ⬅ #120b18 */
-}
-
-/* =~= Gold Nouveau (dark mode overrides) =~= */
-.dark [data-theme='gold-nouveau'] {
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	/* =~= Theme Colors  =~= */
-	/* primary | #e6c833 */
-	--color-primary-50: 251 247 224; /* ⬅ #fbf7e0 */
-	--color-primary-100: 250 244 214; /* ⬅ #faf4d6 */
-	--color-primary-200: 249 241 204; /* ⬅ #f9f1cc */
-	--color-primary-300: 245 233 173; /* ⬅ #f5e9ad */
-	--color-primary-400: 238 217 112; /* ⬅ #eed970 */
-	--color-primary-500: 230 200 51; /* ⬅ #e6c833 */
-	--color-primary-600: 207 180 46; /* ⬅ #cfb42e */
-	--color-primary-700: 173 150 38; /* ⬅ #ad9626 */
-	--color-primary-800: 138 120 31; /* ⬅ #8a781f */
-	--color-primary-900: 113 98 25; /* ⬅ #716219 */
-}
-
-/* Headings */
-[data-theme='gold-nouveau'] h1,
-[data-theme='gold-nouveau'] h2,
-[data-theme='gold-nouveau'] h3,
-[data-theme='gold-nouveau'] h4,
-[data-theme='gold-nouveau'] h5,
-[data-theme='gold-nouveau'] h6 {
-	font-weight: bold;
-}
-
-/* Applied to body with `<body data-theme="gold-nouveau">` */
-/* Created with: https://csshero.org/mesher/ */
-/* prettier-ignore */
-[data-theme='gold-nouveau'] {
-	background-image:
-		radial-gradient(at 0% 100%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
-		radial-gradient(at 98% 100%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
--- a/packages/plugin/src/themes/theme-hamlindigo.css
+++ b/packages/plugin/src/themes/theme-hamlindigo.css
@@ -1,109 +0,0 @@
-/* =~= Hamlindigo Theme - made by GitHub user @rcgy for the Skeleton community. Go watch Better Call Saul.  =~= */
-/* https://github.com/skeletonlabs/skeleton/discussions/401 */
-
-:root {
-	/* =~= Hamlindigo Theme | Custom =~= */
-	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-	--theme-font-family-heading: serif;
-	--theme-font-color-base: 0 0 0;
-	--theme-font-color-dark: 255 255 255;
-	--theme-rounded-base: 2px;
-	--theme-rounded-container: 2px;
-	--theme-border-base: 2px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 255 255 255;
-	--on-success: 255 255 255;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #a8bef1 */
-	--color-primary-50: 242 245 253; /* ⬅ #f2f5fd */
-	--color-primary-100: 238 242 252; /* ⬅ #eef2fc */
-	--color-primary-200: 233 239 252; /* ⬅ #e9effc */
-	--color-primary-300: 220 229 249; /* ⬅ #dce5f9 */
-	--color-primary-400: 194 210 245; /* ⬅ #c2d2f5 */
-	--color-primary-500: 168 190 241; /* ⬅ #a8bef1 */
-	--color-primary-600: 151 171 217; /* ⬅ #97abd9 */
-	--color-primary-700: 126 143 181; /* ⬅ #7e8fb5 */
-	--color-primary-800: 101 114 145; /* ⬅ #657291 */
-	--color-primary-900: 82 93 118; /* ⬅ #525d76 */
-	/* secondary | #a48e5b */
-	--color-secondary-50: 241 238 230; /* ⬅ #f1eee6 */
-	--color-secondary-100: 237 232 222; /* ⬅ #ede8de */
-	--color-secondary-200: 232 227 214; /* ⬅ #e8e3d6 */
-	--color-secondary-300: 219 210 189; /* ⬅ #dbd2bd */
-	--color-secondary-400: 191 176 140; /* ⬅ #bfb08c */
-	--color-secondary-500: 164 142 91; /* ⬅ #a48e5b */
-	--color-secondary-600: 148 128 82; /* ⬅ #948052 */
-	--color-secondary-700: 123 107 68; /* ⬅ #7b6b44 */
-	--color-secondary-800: 98 85 55; /* ⬅ #625537 */
-	--color-secondary-900: 80 70 45; /* ⬅ #50462d */
-	/* tertiary | #6197a3 */
-	--color-tertiary-50: 231 239 241; /* ⬅ #e7eff1 */
-	--color-tertiary-100: 223 234 237; /* ⬅ #dfeaed */
-	--color-tertiary-200: 216 229 232; /* ⬅ #d8e5e8 */
-	--color-tertiary-300: 192 213 218; /* ⬅ #c0d5da */
-	--color-tertiary-400: 144 182 191; /* ⬅ #90b6bf */
-	--color-tertiary-500: 97 151 163; /* ⬅ #6197a3 */
-	--color-tertiary-600: 87 136 147; /* ⬅ #578893 */
-	--color-tertiary-700: 73 113 122; /* ⬅ #49717a */
-	--color-tertiary-800: 58 91 98; /* ⬅ #3a5b62 */
-	--color-tertiary-900: 48 74 80; /* ⬅ #304a50 */
-	/* success | #47947d */
-	--color-success-50: 227 239 236; /* ⬅ #e3efec */
-	--color-success-100: 218 234 229; /* ⬅ #daeae5 */
-	--color-success-200: 209 228 223; /* ⬅ #d1e4df */
-	--color-success-300: 181 212 203; /* ⬅ #b5d4cb */
-	--color-success-400: 126 180 164; /* ⬅ #7eb4a4 */
-	--color-success-500: 71 148 125; /* ⬅ #47947d */
-	--color-success-600: 64 133 113; /* ⬅ #408571 */
-	--color-success-700: 53 111 94; /* ⬅ #356f5e */
-	--color-success-800: 43 89 75; /* ⬅ #2b594b */
-	--color-success-900: 35 73 61; /* ⬅ #23493d */
-	/* warning | #daa93e */
-	--color-warning-50: 249 242 226; /* ⬅ #f9f2e2 */
-	--color-warning-100: 248 238 216; /* ⬅ #f8eed8 */
-	--color-warning-200: 246 234 207; /* ⬅ #f6eacf */
-	--color-warning-300: 240 221 178; /* ⬅ #f0ddb2 */
-	--color-warning-400: 229 195 120; /* ⬅ #e5c378 */
-	--color-warning-500: 218 169 62; /* ⬅ #daa93e */
-	--color-warning-600: 196 152 56; /* ⬅ #c49838 */
-	--color-warning-700: 164 127 47; /* ⬅ #a47f2f */
-	--color-warning-800: 131 101 37; /* ⬅ #836525 */
-	--color-warning-900: 107 83 30; /* ⬅ #6b531e */
-	/* error | #a26175 */
-	--color-error-50: 241 231 234; /* ⬅ #f1e7ea */
-	--color-error-100: 236 223 227; /* ⬅ #ecdfe3 */
-	--color-error-200: 232 216 221; /* ⬅ #e8d8dd */
-	--color-error-300: 218 192 200; /* ⬅ #dac0c8 */
-	--color-error-400: 190 144 158; /* ⬅ #be909e */
-	--color-error-500: 162 97 117; /* ⬅ #a26175 */
-	--color-error-600: 146 87 105; /* ⬅ #925769 */
-	--color-error-700: 122 73 88; /* ⬅ #7a4958 */
-	--color-error-800: 97 58 70; /* ⬅ #613a46 */
-	--color-error-900: 79 48 57; /* ⬅ #4f3039 */
-	/* surface | #6376a3 */
-	--color-surface-50: 232 234 241; /* ⬅ #e8eaf1 */
-	--color-surface-100: 224 228 237; /* ⬅ #e0e4ed */
-	--color-surface-200: 216 221 232; /* ⬅ #d8dde8 */
-	--color-surface-300: 193 200 218; /* ⬅ #c1c8da */
-	--color-surface-400: 146 159 191; /* ⬅ #929fbf */
-	--color-surface-500: 99 118 163; /* ⬅ #6376a3 */
-	--color-surface-600: 89 106 147; /* ⬅ #596a93 */
-	--color-surface-700: 74 89 122; /* ⬅ #4a597a */
-	--color-surface-800: 59 71 98; /* ⬅ #3b4762 */
-	--color-surface-900: 49 58 80; /* ⬅ #313a50 */
-}
-
-/* Applied to body with `<body data-theme="hamlindigo">` */
-/* Generated via: https://heropatterns.com/ */
-[data-theme='hamlindigo'] {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23e0e4ed' fill-opacity='0.5'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
-}
-.dark [data-theme='hamlindigo'] {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%233b4762' fill-opacity='0.2'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
-}
--- a/packages/plugin/src/themes/theme-modern.css
+++ b/packages/plugin/src/themes/theme-modern.css
@@ -1,134 +0,0 @@
-/* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
-
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: 'Quicksand', sans-serif;
-	--theme-font-family-heading: 'Quicksand', sans-serif;
-	--theme-font-color-base: var(--color-surface-900);
-	--theme-font-color-dark: var(--color-tertiary-50);
-	--theme-rounded-base: 9999px;
-	--theme-rounded-container: 24px;
-	--theme-border-base: 3px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 255 255 255;
-	--on-secondary: 0 0 0;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #ec4899 */
-	--color-primary-50: 252 228 240; /* ⬅ #fce4f0 */
-	--color-primary-100: 251 218 235; /* ⬅ #fbdaeb */
-	--color-primary-200: 250 209 230; /* ⬅ #fad1e6 */
-	--color-primary-300: 247 182 214; /* ⬅ #f7b6d6 */
-	--color-primary-400: 242 127 184; /* ⬅ #f27fb8 */
-	--color-primary-500: 236 72 153; /* ⬅ #ec4899 */
-	--color-primary-600: 212 65 138; /* ⬅ #d4418a */
-	--color-primary-700: 177 54 115; /* ⬅ #b13673 */
-	--color-primary-800: 142 43 92; /* ⬅ #8e2b5c */
-	--color-primary-900: 116 35 75; /* ⬅ #74234b */
-	/* secondary | #06b6d4 */
-	--color-secondary-50: 218 244 249; /* ⬅ #daf4f9 */
-	--color-secondary-100: 205 240 246; /* ⬅ #cdf0f6 */
-	--color-secondary-200: 193 237 244; /* ⬅ #c1edf4 */
-	--color-secondary-300: 155 226 238; /* ⬅ #9be2ee */
-	--color-secondary-400: 81 204 225; /* ⬅ #51cce1 */
-	--color-secondary-500: 6 182 212; /* ⬅ #06b6d4 */
-	--color-secondary-600: 5 164 191; /* ⬅ #05a4bf */
-	--color-secondary-700: 5 137 159; /* ⬅ #05899f */
-	--color-secondary-800: 4 109 127; /* ⬅ #046d7f */
-	--color-secondary-900: 3 89 104; /* ⬅ #035968 */
-	/* tertiary | #14b8a6 */
-	--color-tertiary-50: 220 244 242; /* ⬅ #dcf4f2 */
-	--color-tertiary-100: 208 241 237; /* ⬅ #d0f1ed */
-	--color-tertiary-200: 196 237 233; /* ⬅ #c4ede9 */
-	--color-tertiary-300: 161 227 219; /* ⬅ #a1e3db */
-	--color-tertiary-400: 91 205 193; /* ⬅ #5bcdc1 */
-	--color-tertiary-500: 20 184 166; /* ⬅ #14b8a6 */
-	--color-tertiary-600: 18 166 149; /* ⬅ #12a695 */
-	--color-tertiary-700: 15 138 125; /* ⬅ #0f8a7d */
-	--color-tertiary-800: 12 110 100; /* ⬅ #0c6e64 */
-	--color-tertiary-900: 10 90 81; /* ⬅ #0a5a51 */
-	/* success | #84cc16 */
-	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
-	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
-	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
-	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
-	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
-	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
-	--color-success-600: 119 184 20; /* ⬅ #77b814 */
-	--color-success-700: 99 153 17; /* ⬅ #639911 */
-	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
-	--color-success-900: 65 100 11; /* ⬅ #41640b */
-	/* warning | #eab308 */
-	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
-	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
-	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
-	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
-	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
-	--color-warning-500: 234 179 8; /* ⬅ #eab308 */
-	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
-	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
-	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
-	--color-warning-900: 115 88 4; /* ⬅ #735804 */
-	/* error | #ef4444 */
-	--color-error-50: 253 227 227; /* ⬅ #fde3e3 */
-	--color-error-100: 252 218 218; /* ⬅ #fcdada */
-	--color-error-200: 251 208 208; /* ⬅ #fbd0d0 */
-	--color-error-300: 249 180 180; /* ⬅ #f9b4b4 */
-	--color-error-400: 244 124 124; /* ⬅ #f47c7c */
-	--color-error-500: 239 68 68; /* ⬅ #ef4444 */
-	--color-error-600: 215 61 61; /* ⬅ #d73d3d */
-	--color-error-700: 179 51 51; /* ⬅ #b33333 */
-	--color-error-800: 143 41 41; /* ⬅ #8f2929 */
-	--color-error-900: 117 33 33; /* ⬅ #752121 */
-	/* surface | #6366f1 */
-	--color-surface-50: 232 232 253; /* ⬅ #e8e8fd */
-	--color-surface-100: 224 224 252; /* ⬅ #e0e0fc */
-	--color-surface-200: 216 217 252; /* ⬅ #d8d9fc */
-	--color-surface-300: 193 194 249; /* ⬅ #c1c2f9 */
-	--color-surface-400: 146 148 245; /* ⬅ #9294f5 */
-	--color-surface-500: 99 102 241; /* ⬅ #6366f1 */
-	--color-surface-600: 89 92 217; /* ⬅ #595cd9 */
-	--color-surface-700: 74 77 181; /* ⬅ #4a4db5 */
-	--color-surface-800: 59 61 145; /* ⬅ #3b3d91 */
-	--color-surface-900: 49 50 118; /* ⬅ #313276 */
-}
-
-[data-theme='modern'] h1,
-[data-theme='modern'] h2,
-[data-theme='modern'] h3,
-[data-theme='modern'] h4,
-[data-theme='modern'] h5,
-[data-theme='modern'] h6,
-[data-theme='modern'] a,
-[data-theme='modern'] button {
-	font-weight: bold;
-}
-
-/* Applied to body with `<body data-theme="modern">` */
-/* Created with: https://csshero.org/mesher/ */
-[data-theme='modern'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%),
-		radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%),
-		radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
-.dark [data-theme='modern'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%),
-		radial-gradient(at 1% 0%, hsla(340,100%,76%,0.15) 0px, transparent 50%),
-		radial-gradient(at 20% 100%, hsla(241,100%,70%,0.30) 0px, transparent 50%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
--- a/packages/plugin/src/themes/theme-rocket.css
+++ b/packages/plugin/src/themes/theme-rocket.css
@@ -1,120 +0,0 @@
-/* https://fonts.google.com/specimen/Space+Grotesk */
-
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui;
-	--theme-font-family-heading: 'Space Grotesk', sans-serif;
-	--theme-font-color-base: var(--color-primary-900);
-	--theme-font-color-dark: var(--color-primary-100);
-	--theme-rounded-base: 0px;
-	--theme-rounded-container: 0px;
-	--theme-border-base: 0px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 255 255 255;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #06b6d4 */
-	--color-primary-50: 218 244 249; /* ⬅ #daf4f9 */
-	--color-primary-100: 205 240 246; /* ⬅ #cdf0f6 */
-	--color-primary-200: 193 237 244; /* ⬅ #c1edf4 */
-	--color-primary-300: 155 226 238; /* ⬅ #9be2ee */
-	--color-primary-400: 81 204 225; /* ⬅ #51cce1 */
-	--color-primary-500: 6 182 212; /* ⬅ #06b6d4 */
-	--color-primary-600: 5 164 191; /* ⬅ #05a4bf */
-	--color-primary-700: 5 137 159; /* ⬅ #05899f */
-	--color-primary-800: 4 109 127; /* ⬅ #046d7f */
-	--color-primary-900: 3 89 104; /* ⬅ #035968 */
-	/* secondary | #3b82f6 */
-	--color-secondary-50: 226 236 254; /* ⬅ #e2ecfe */
-	--color-secondary-100: 216 230 253; /* ⬅ #d8e6fd */
-	--color-secondary-200: 206 224 253; /* ⬅ #cee0fd */
-	--color-secondary-300: 177 205 251; /* ⬅ #b1cdfb */
-	--color-secondary-400: 118 168 249; /* ⬅ #76a8f9 */
-	--color-secondary-500: 59 130 246; /* ⬅ #3b82f6 */
-	--color-secondary-600: 53 117 221; /* ⬅ #3575dd */
-	--color-secondary-700: 44 98 185; /* ⬅ #2c62b9 */
-	--color-secondary-800: 35 78 148; /* ⬅ #234e94 */
-	--color-secondary-900: 29 64 121; /* ⬅ #1d4079 */
-	/* tertiary | #a855f7 */
-	--color-tertiary-50: 242 230 254; /* ⬅ #f2e6fe */
-	--color-tertiary-100: 238 221 253; /* ⬅ #eeddfd */
-	--color-tertiary-200: 233 213 253; /* ⬅ #e9d5fd */
-	--color-tertiary-300: 220 187 252; /* ⬅ #dcbbfc */
-	--color-tertiary-400: 194 136 249; /* ⬅ #c288f9 */
-	--color-tertiary-500: 168 85 247; /* ⬅ #a855f7 */
-	--color-tertiary-600: 151 77 222; /* ⬅ #974dde */
-	--color-tertiary-700: 126 64 185; /* ⬅ #7e40b9 */
-	--color-tertiary-800: 101 51 148; /* ⬅ #653394 */
-	--color-tertiary-900: 82 42 121; /* ⬅ #522a79 */
-	/* success | #4ccb15 */
-	--color-success-50: 228 247 220; /* ⬅ #e4f7dc */
-	--color-success-100: 219 245 208; /* ⬅ #dbf5d0 */
-	--color-success-200: 210 242 197; /* ⬅ #d2f2c5 */
-	--color-success-300: 183 234 161; /* ⬅ #b7eaa1 */
-	--color-success-400: 130 219 91; /* ⬅ #82db5b */
-	--color-success-500: 76 203 21; /* ⬅ #4ccb15 */
-	--color-success-600: 68 183 19; /* ⬅ #44b713 */
-	--color-success-700: 57 152 16; /* ⬅ #399810 */
-	--color-success-800: 46 122 13; /* ⬅ #2e7a0d */
-	--color-success-900: 37 99 10; /* ⬅ #25630a */
-	/* warning | #f4c12a */
-	--color-warning-50: 253 246 223; /* ⬅ #fdf6df */
-	--color-warning-100: 253 243 212; /* ⬅ #fdf3d4 */
-	--color-warning-200: 252 240 202; /* ⬅ #fcf0ca */
-	--color-warning-300: 251 230 170; /* ⬅ #fbe6aa */
-	--color-warning-400: 247 212 106; /* ⬅ #f7d46a */
-	--color-warning-500: 244 193 42; /* ⬅ #f4c12a */
-	--color-warning-600: 220 174 38; /* ⬅ #dcae26 */
-	--color-warning-700: 183 145 32; /* ⬅ #b79120 */
-	--color-warning-800: 146 116 25; /* ⬅ #927419 */
-	--color-warning-900: 120 95 21; /* ⬅ #785f15 */
-	/* error | #b52c55 */
-	--color-error-50: 244 223 230; /* ⬅ #f4dfe6 */
-	--color-error-100: 240 213 221; /* ⬅ #f0d5dd */
-	--color-error-200: 237 202 213; /* ⬅ #edcad5 */
-	--color-error-300: 225 171 187; /* ⬅ #e1abbb */
-	--color-error-400: 203 107 136; /* ⬅ #cb6b88 */
-	--color-error-500: 181 44 85; /* ⬅ #b52c55 */
-	--color-error-600: 163 40 77; /* ⬅ #a3284d */
-	--color-error-700: 136 33 64; /* ⬅ #882140 */
-	--color-error-800: 109 26 51; /* ⬅ #6d1a33 */
-	--color-error-900: 89 22 42; /* ⬅ #59162a */
-	/* surface | #64748b */
-	--color-surface-50: 232 234 238; /* ⬅ #e8eaee */
-	--color-surface-100: 224 227 232; /* ⬅ #e0e3e8 */
-	--color-surface-200: 216 220 226; /* ⬅ #d8dce2 */
-	--color-surface-300: 193 199 209; /* ⬅ #c1c7d1 */
-	--color-surface-400: 147 158 174; /* ⬅ #939eae */
-	--color-surface-500: 100 116 139; /* ⬅ #64748b */
-	--color-surface-600: 90 104 125; /* ⬅ #5a687d */
-	--color-surface-700: 75 87 104; /* ⬅ #4b5768 */
-	--color-surface-800: 60 70 83; /* ⬅ #3c4653 */
-	--color-surface-900: 49 57 68; /* ⬅ #313944 */
-}
-
-[data-theme='rocket'] h1,
-[data-theme='rocket'] h2,
-[data-theme='rocket'] h3,
-[data-theme='rocket'] h4,
-[data-theme='rocket'] h5,
-[data-theme='rocket'] h6 {
-	font-weight: bold;
-}
-
-/* Applied to body with `<body data-theme="rocket">` */
-/* Created with: https://csshero.org/mesher/ */
-/* prettier-ignore */
-[data-theme='rocket'] {
-	background-image:
-			radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
-			radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
--- a/packages/plugin/src/themes/theme-sahara.css
+++ b/packages/plugin/src/themes/theme-sahara.css
@@ -1,133 +0,0 @@
-:root {
-	/* =~= Theme Styles =~= */
-	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-	--theme-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-		Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-	--theme-font-color-base: var(--color-secondary-900);
-	--theme-font-color-dark: var(--color-primary-100);
-	--theme-rounded-base: 9999px;
-	--theme-rounded-container: 24px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 0 0 0;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #ecaa36 */
-	--color-primary-50: 252 242 225; /* ⬅ #fcf2e1 */
-	--color-primary-100: 251 238 215; /* ⬅ #fbeed7 */
-	--color-primary-200: 250 234 205; /* ⬅ #faeacd */
-	--color-primary-300: 247 221 175; /* ⬅ #f7ddaf */
-	--color-primary-400: 242 196 114; /* ⬅ #f2c472 */
-	--color-primary-500: 236 170 54; /* ⬅ #ecaa36 */
-	--color-primary-600: 212 153 49; /* ⬅ #d49931 */
-	--color-primary-700: 177 128 41; /* ⬅ #b18029 */
-	--color-primary-800: 142 102 32; /* ⬅ #8e6620 */
-	--color-primary-900: 116 83 26; /* ⬅ #74531a */
-	/* secondary | #3acbba */
-	--color-secondary-50: 225 247 245; /* ⬅ #e1f7f5 */
-	--color-secondary-100: 216 245 241; /* ⬅ #d8f5f1 */
-	--color-secondary-200: 206 242 238; /* ⬅ #cef2ee */
-	--color-secondary-300: 176 234 227; /* ⬅ #b0eae3 */
-	--color-secondary-400: 117 219 207; /* ⬅ #75dbcf */
-	--color-secondary-500: 58 203 186; /* ⬅ #3acbba */
-	--color-secondary-600: 52 183 167; /* ⬅ #34b7a7 */
-	--color-secondary-700: 44 152 140; /* ⬅ #2c988c */
-	--color-secondary-800: 35 122 112; /* ⬅ #237a70 */
-	--color-secondary-900: 28 99 91; /* ⬅ #1c635b */
-	/* tertiary | #bbdf86 */
-	--color-tertiary-50: 245 250 237; /* ⬅ #f5faed */
-	--color-tertiary-100: 241 249 231; /* ⬅ #f1f9e7 */
-	--color-tertiary-200: 238 247 225; /* ⬅ #eef7e1 */
-	--color-tertiary-300: 228 242 207; /* ⬅ #e4f2cf */
-	--color-tertiary-400: 207 233 170; /* ⬅ #cfe9aa */
-	--color-tertiary-500: 187 223 134; /* ⬅ #bbdf86 */
-	--color-tertiary-600: 168 201 121; /* ⬅ #a8c979 */
-	--color-tertiary-700: 140 167 101; /* ⬅ #8ca765 */
-	--color-tertiary-800: 112 134 80; /* ⬅ #708650 */
-	--color-tertiary-900: 92 109 66; /* ⬅ #5c6d42 */
-	/* success | #84cc16 */
-	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
-	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
-	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
-	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
-	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
-	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
-	--color-success-600: 119 184 20; /* ⬅ #77b814 */
-	--color-success-700: 99 153 17; /* ⬅ #639911 */
-	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
-	--color-success-900: 65 100 11; /* ⬅ #41640b */
-	/* warning | #e5c157 */
-	--color-warning-50: 251 246 230; /* ⬅ #fbf6e6 */
-	--color-warning-100: 250 243 221; /* ⬅ #faf3dd */
-	--color-warning-200: 249 240 213; /* ⬅ #f9f0d5 */
-	--color-warning-300: 245 230 188; /* ⬅ #f5e6bc */
-	--color-warning-400: 237 212 137; /* ⬅ #edd489 */
-	--color-warning-500: 229 193 87; /* ⬅ #e5c157 */
-	--color-warning-600: 206 174 78; /* ⬅ #ceae4e */
-	--color-warning-700: 172 145 65; /* ⬅ #ac9141 */
-	--color-warning-800: 137 116 52; /* ⬅ #897434 */
-	--color-warning-900: 112 95 43; /* ⬅ #705f2b */
-	/* error | #db5c9c */
-	--color-error-50: 250 231 240; /* ⬅ #fae7f0 */
-	--color-error-100: 248 222 235; /* ⬅ #f8deeb */
-	--color-error-200: 246 214 230; /* ⬅ #f6d6e6 */
-	--color-error-300: 241 190 215; /* ⬅ #f1bed7 */
-	--color-error-400: 230 141 186; /* ⬅ #e68dba */
-	--color-error-500: 219 92 156; /* ⬅ #db5c9c */
-	--color-error-600: 197 83 140; /* ⬅ #c5538c */
-	--color-error-700: 164 69 117; /* ⬅ #a44575 */
-	--color-error-800: 131 55 94; /* ⬅ #83375e */
-	--color-error-900: 107 45 76; /* ⬅ #6b2d4c */
-	/* surface | #da4e65 */
-	--color-surface-50: 249 228 232; /* ⬅ #f9e4e8 */
-	--color-surface-100: 248 220 224; /* ⬅ #f8dce0 */
-	--color-surface-200: 246 211 217; /* ⬅ #f6d3d9 */
-	--color-surface-300: 240 184 193; /* ⬅ #f0b8c1 */
-	--color-surface-400: 229 131 147; /* ⬅ #e58393 */
-	--color-surface-500: 218 78 101; /* ⬅ #da4e65 */
-	--color-surface-600: 196 70 91; /* ⬅ #c4465b */
-	--color-surface-700: 164 59 76; /* ⬅ #a43b4c */
-	--color-surface-800: 131 47 61; /* ⬅ #832f3d */
-	--color-surface-900: 107 38 49; /* ⬅ #6b2631 */
-}
-
-[data-theme='sahara'] h1,
-[data-theme='sahara'] h2,
-[data-theme='sahara'] h3,
-[data-theme='sahara'] h4,
-[data-theme='sahara'] h5,
-[data-theme='sahara'] h6 {
-	font-weight: 600;
-}
-[data-theme='sahara'] p {
-	font-weight: 400;
-}
-
-/* Applied to body with `<body data-theme="sahara">` */
-/* Created with: https://csshero.org/mesher/ */
-[data-theme='sahara'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
-		radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
-.dark [data-theme='sahara'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
-		radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
--- a/packages/plugin/src/themes/theme-seafoam.css
+++ b/packages/plugin/src/themes/theme-seafoam.css
@@ -1,128 +0,0 @@
-/* https://fonts.google.com/specimen/Playfair+Display?query=playfair */
-
-:root {
-	/* =~= Theme Styles =~= */
-	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-	--theme-font-family-heading: 'Playfair Display', serif;
-	--theme-font-color-base: var(--color-surface-900);
-	--theme-font-color-dark: var(--color-secondary-100);
-	--theme-rounded-base: 16px;
-	--theme-rounded-container: 16px;
-	--theme-border-base: 3px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 255 255 255;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 0 0 0;
-	/* =~= Theme Colors  =~= */
-	/* primary | #86d0cb */
-	--color-primary-50: 237 248 247; /* ⬅ #edf8f7 */
-	--color-primary-100: 231 246 245; /* ⬅ #e7f6f5 */
-	--color-primary-200: 225 243 242; /* ⬅ #e1f3f2 */
-	--color-primary-300: 207 236 234; /* ⬅ #cfecea */
-	--color-primary-400: 170 222 219; /* ⬅ #aadedb */
-	--color-primary-500: 134 208 203; /* ⬅ #86d0cb */
-	--color-primary-600: 121 187 183; /* ⬅ #79bbb7 */
-	--color-primary-700: 101 156 152; /* ⬅ #659c98 */
-	--color-primary-800: 80 125 122; /* ⬅ #507d7a */
-	--color-primary-900: 66 102 99; /* ⬅ #426663 */
-	/* secondary | #213355 */
-	--color-secondary-50: 222 224 230; /* ⬅ #dee0e6 */
-	--color-secondary-100: 211 214 221; /* ⬅ #d3d6dd */
-	--color-secondary-200: 200 204 213; /* ⬅ #c8ccd5 */
-	--color-secondary-300: 166 173 187; /* ⬅ #a6adbb */
-	--color-secondary-400: 100 112 136; /* ⬅ #647088 */
-	--color-secondary-500: 33 51 85; /* ⬅ #213355 */
-	--color-secondary-600: 30 46 77; /* ⬅ #1e2e4d */
-	--color-secondary-700: 25 38 64; /* ⬅ #192640 */
-	--color-secondary-800: 20 31 51; /* ⬅ #141f33 */
-	--color-secondary-900: 16 25 42; /* ⬅ #10192a */
-	/* tertiary | #ff3d00 */
-	--color-tertiary-50: 255 226 217; /* ⬅ #ffe2d9 */
-	--color-tertiary-100: 255 216 204; /* ⬅ #ffd8cc */
-	--color-tertiary-200: 255 207 191; /* ⬅ #ffcfbf */
-	--color-tertiary-300: 255 177 153; /* ⬅ #ffb199 */
-	--color-tertiary-400: 255 119 77; /* ⬅ #ff774d */
-	--color-tertiary-500: 255 61 0; /* ⬅ #ff3d00 */
-	--color-tertiary-600: 230 55 0; /* ⬅ #e63700 */
-	--color-tertiary-700: 191 46 0; /* ⬅ #bf2e00 */
-	--color-tertiary-800: 153 37 0; /* ⬅ #992500 */
-	--color-tertiary-900: 125 30 0; /* ⬅ #7d1e00 */
-	/* success | #06e5a2 */
-	--color-success-50: 218 251 241; /* ⬅ #dafbf1 */
-	--color-success-100: 205 250 236; /* ⬅ #cdfaec */
-	--color-success-200: 193 249 232; /* ⬅ #c1f9e8 */
-	--color-success-300: 155 245 218; /* ⬅ #9bf5da */
-	--color-success-400: 81 237 190; /* ⬅ #51edbe */
-	--color-success-500: 6 229 162; /* ⬅ #06e5a2 */
-	--color-success-600: 5 206 146; /* ⬅ #05ce92 */
-	--color-success-700: 5 172 122; /* ⬅ #05ac7a */
-	--color-success-800: 4 137 97; /* ⬅ #048961 */
-	--color-success-900: 3 112 79; /* ⬅ #03704f */
-	/* warning | #eae557 */
-	--color-warning-50: 252 251 230; /* ⬅ #fcfbe6 */
-	--color-warning-100: 251 250 221; /* ⬅ #fbfadd */
-	--color-warning-200: 250 249 213; /* ⬅ #faf9d5 */
-	--color-warning-300: 247 245 188; /* ⬅ #f7f5bc */
-	--color-warning-400: 240 237 137; /* ⬅ #f0ed89 */
-	--color-warning-500: 234 229 87; /* ⬅ #eae557 */
-	--color-warning-600: 211 206 78; /* ⬅ #d3ce4e */
-	--color-warning-700: 176 172 65; /* ⬅ #b0ac41 */
-	--color-warning-800: 140 137 52; /* ⬅ #8c8934 */
-	--color-warning-900: 115 112 43; /* ⬅ #73702b */
-	/* error | #d24646 */
-	--color-error-50: 248 227 227; /* ⬅ #f8e3e3 */
-	--color-error-100: 246 218 218; /* ⬅ #f6dada */
-	--color-error-200: 244 209 209; /* ⬅ #f4d1d1 */
-	--color-error-300: 237 181 181; /* ⬅ #edb5b5 */
-	--color-error-400: 224 126 126; /* ⬅ #e07e7e */
-	--color-error-500: 210 70 70; /* ⬅ #d24646 */
-	--color-error-600: 189 63 63; /* ⬅ #bd3f3f */
-	--color-error-700: 158 53 53; /* ⬅ #9e3535 */
-	--color-error-800: 126 42 42; /* ⬅ #7e2a2a */
-	--color-error-900: 103 34 34; /* ⬅ #672222 */
-	/* surface | #25d1d4 */
-	--color-surface-50: 222 248 249; /* ⬅ #def8f9 */
-	--color-surface-100: 211 246 246; /* ⬅ #d3f6f6 */
-	--color-surface-200: 201 244 244; /* ⬅ #c9f4f4 */
-	--color-surface-300: 168 237 238; /* ⬅ #a8edee */
-	--color-surface-400: 102 223 225; /* ⬅ #66dfe1 */
-	--color-surface-500: 37 209 212; /* ⬅ #25d1d4 */
-	--color-surface-600: 33 188 191; /* ⬅ #21bcbf */
-	--color-surface-700: 28 157 159; /* ⬅ #1c9d9f */
-	--color-surface-800: 22 125 127; /* ⬅ #167d7f */
-	--color-surface-900: 18 102 104; /* ⬅ #126668 */
-}
-
-[data-theme='seafoam'] h1,
-[data-theme='seafoam'] h2,
-[data-theme='seafoam'] h3,
-[data-theme='seafoam'] h4,
-[data-theme='seafoam'] h5,
-[data-theme='seafoam'] h6 {
-	font-weight: bold;
-	font-style: italic;
-	letter-spacing: 1px;
-}
-
-/* #213253 | #08847c */
-/* Applied to body with `<body data-theme="seafoam">` */
-/* Created with: https://csshero.org/mesher/ */
-[data-theme='seafoam'] {
-	background: linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
-.dark [data-theme='seafoam'] {
-	background: linear-gradient(0deg, rgba(33, 50, 83, 1) 0%, rgba(8, 132, 124, 1) 100%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
--- a/packages/plugin/src/themes/theme-seasonal.css
+++ b/packages/plugin/src/themes/theme-seasonal.css
@@ -1,114 +0,0 @@
-/* A New Years inspired theme. */
-
-/* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
-
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui;
-	--theme-font-family-heading: 'Quicksand', sans-serif;
-	--theme-font-color-base: var(--color-surface-500);
-	--theme-font-color-dark: var(--color-surface-200);
-	--theme-rounded-base: 12px;
-	--theme-rounded-container: 12px;
-	--theme-border-base: 0px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 255 255 255;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #40b09d */
-	--color-primary-50: 226 243 240; /* ⬅ #e2f3f0 */
-	--color-primary-100: 217 239 235; /* ⬅ #d9efeb */
-	--color-primary-200: 207 235 231; /* ⬅ #cfebe7 */
-	--color-primary-300: 179 223 216; /* ⬅ #b3dfd8 */
-	--color-primary-400: 121 200 186; /* ⬅ #79c8ba */
-	--color-primary-500: 64 176 157; /* ⬅ #40b09d */
-	--color-primary-600: 58 158 141; /* ⬅ #3a9e8d */
-	--color-primary-700: 48 132 118; /* ⬅ #308476 */
-	--color-primary-800: 38 106 94; /* ⬅ #266a5e */
-	--color-primary-900: 31 86 77; /* ⬅ #1f564d */
-	/* secondary | #d7a12d */
-	--color-secondary-50: 249 241 224; /* ⬅ #f9f1e0 */
-	--color-secondary-100: 247 236 213; /* ⬅ #f7ecd5 */
-	--color-secondary-200: 245 232 203; /* ⬅ #f5e8cb */
-	--color-secondary-300: 239 217 171; /* ⬅ #efd9ab */
-	--color-secondary-400: 227 189 108; /* ⬅ #e3bd6c */
-	--color-secondary-500: 215 161 45; /* ⬅ #d7a12d */
-	--color-secondary-600: 194 145 41; /* ⬅ #c29129 */
-	--color-secondary-700: 161 121 34; /* ⬅ #a17922 */
-	--color-secondary-800: 129 97 27; /* ⬅ #81611b */
-	--color-secondary-900: 105 79 22; /* ⬅ #694f16 */
-	/* tertiary | #411d96 */
-	--color-tertiary-50: 227 221 239; /* ⬅ #e3ddef */
-	--color-tertiary-100: 217 210 234; /* ⬅ #d9d2ea */
-	--color-tertiary-200: 208 199 229; /* ⬅ #d0c7e5 */
-	--color-tertiary-300: 179 165 213; /* ⬅ #b3a5d5 */
-	--color-tertiary-400: 122 97 182; /* ⬅ #7a61b6 */
-	--color-tertiary-500: 65 29 150; /* ⬅ #411d96 */
-	--color-tertiary-600: 59 26 135; /* ⬅ #3b1a87 */
-	--color-tertiary-700: 49 22 113; /* ⬅ #311671 */
-	--color-tertiary-800: 39 17 90; /* ⬅ #27115a */
-	--color-tertiary-900: 32 14 74; /* ⬅ #200e4a */
-	/* success | #aad765 */
-	--color-success-50: 242 249 232; /* ⬅ #f2f9e8 */
-	--color-success-100: 238 247 224; /* ⬅ #eef7e0 */
-	--color-success-200: 234 245 217; /* ⬅ #eaf5d9 */
-	--color-success-300: 221 239 193; /* ⬅ #ddefc1 */
-	--color-success-400: 196 227 147; /* ⬅ #c4e393 */
-	--color-success-500: 170 215 101; /* ⬅ #aad765 */
-	--color-success-600: 153 194 91; /* ⬅ #99c25b */
-	--color-success-700: 128 161 76; /* ⬅ #80a14c */
-	--color-success-800: 102 129 61; /* ⬅ #66813d */
-	--color-success-900: 83 105 49; /* ⬅ #536931 */
-	/* warning | #e1ca84 */
-	--color-warning-50: 251 247 237; /* ⬅ #fbf7ed */
-	--color-warning-100: 249 244 230; /* ⬅ #f9f4e6 */
-	--color-warning-200: 248 242 224; /* ⬅ #f8f2e0 */
-	--color-warning-300: 243 234 206; /* ⬅ #f3eace */
-	--color-warning-400: 234 218 169; /* ⬅ #eadaa9 */
-	--color-warning-500: 225 202 132; /* ⬅ #e1ca84 */
-	--color-warning-600: 203 182 119; /* ⬅ #cbb677 */
-	--color-warning-700: 169 152 99; /* ⬅ #a99863 */
-	--color-warning-800: 135 121 79; /* ⬅ #87794f */
-	--color-warning-900: 110 99 65; /* ⬅ #6e6341 */
-	/* error | #e1565d */
-	--color-error-50: 251 230 231; /* ⬅ #fbe6e7 */
-	--color-error-100: 249 221 223; /* ⬅ #f9dddf */
-	--color-error-200: 248 213 215; /* ⬅ #f8d5d7 */
-	--color-error-300: 243 187 190; /* ⬅ #f3bbbe */
-	--color-error-400: 234 137 142; /* ⬅ #ea898e */
-	--color-error-500: 225 86 93; /* ⬅ #e1565d */
-	--color-error-600: 203 77 84; /* ⬅ #cb4d54 */
-	--color-error-700: 169 65 70; /* ⬅ #a94146 */
-	--color-error-800: 135 52 56; /* ⬅ #873438 */
-	--color-error-900: 110 42 46; /* ⬅ #6e2a2e */
-	/* surface | #0f233e */
-	--color-surface-50: 219 222 226; /* ⬅ #dbdee2 */
-	--color-surface-100: 207 211 216; /* ⬅ #cfd3d8 */
-	--color-surface-200: 195 200 207; /* ⬅ #c3c8cf */
-	--color-surface-300: 159 167 178; /* ⬅ #9fa7b2 */
-	--color-surface-400: 87 101 120; /* ⬅ #576578 */
-	--color-surface-500: 15 35 62; /* ⬅ #0f233e */
-	--color-surface-600: 14 32 56; /* ⬅ #0e2038 */
-	--color-surface-700: 11 26 47; /* ⬅ #0b1a2f */
-	--color-surface-800: 9 21 37; /* ⬅ #091525 */
-	--color-surface-900: 7 17 30; /* ⬅ #07111e */
-}
-
-/* Applied to body with `<body data-theme="seasonal">` */
-[data-theme='seasonal'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 22% 100%, hsla(39,68%,50%,0.23) 0px, transparent 50%),
-		radial-gradient(at 80% 100%, hsla(189,100%,56%,0.33) 0px, transparent 50%);
-}
-.dark [data-theme='seasonal'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 22% 0%, hsla(39,68%,50%,0.15) 0px, transparent 50%),
-		radial-gradient(at 80% 0%, hsla(189,100%,56%,0.15) 0px, transparent 50%);
-}
--- a/packages/plugin/src/themes/theme-skeleton.css
+++ b/packages/plugin/src/themes/theme-skeleton.css
@@ -1,119 +0,0 @@
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui;
-	--theme-font-family-heading: system-ui;
-	--theme-font-color-base: 0 0 0;
-	--theme-font-color-dark: 255 255 255;
-	--theme-rounded-base: 9999px;
-	--theme-rounded-container: 8px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #0FBA81 */
-	--color-primary-50: 219 245 236; /* ⬅ #dbf5ec */
-	--color-primary-100: 207 241 230; /* ⬅ #cff1e6 */
-	--color-primary-200: 195 238 224; /* ⬅ #c3eee0 */
-	--color-primary-300: 159 227 205; /* ⬅ #9fe3cd */
-	--color-primary-400: 87 207 167; /* ⬅ #57cfa7 */
-	--color-primary-500: 15 186 129; /* ⬅ #0FBA81 */
-	--color-primary-600: 14 167 116; /* ⬅ #0ea774 */
-	--color-primary-700: 11 140 97; /* ⬅ #0b8c61 */
-	--color-primary-800: 9 112 77; /* ⬅ #09704d */
-	--color-primary-900: 7 91 63; /* ⬅ #075b3f */
-	/* secondary | #4F46E5 */
-	--color-secondary-50: 229 227 251; /* ⬅ #e5e3fb */
-	--color-secondary-100: 220 218 250; /* ⬅ #dcdafa */
-	--color-secondary-200: 211 209 249; /* ⬅ #d3d1f9 */
-	--color-secondary-300: 185 181 245; /* ⬅ #b9b5f5 */
-	--color-secondary-400: 132 126 237; /* ⬅ #847eed */
-	--color-secondary-500: 79 70 229; /* ⬅ #4F46E5 */
-	--color-secondary-600: 71 63 206; /* ⬅ #473fce */
-	--color-secondary-700: 59 53 172; /* ⬅ #3b35ac */
-	--color-secondary-800: 47 42 137; /* ⬅ #2f2a89 */
-	--color-secondary-900: 39 34 112; /* ⬅ #272270 */
-	/* tertiary | #0EA5E9 */
-	--color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */
-	--color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */
-	--color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */
-	--color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */
-	--color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */
-	--color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */
-	--color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */
-	--color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */
-	--color-tertiary-800: 8 99 140; /* ⬅ #08638c */
-	--color-tertiary-900: 7 81 114; /* ⬅ #075172 */
-	/* success | #84cc16 */
-	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
-	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
-	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
-	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
-	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
-	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
-	--color-success-600: 119 184 20; /* ⬅ #77b814 */
-	--color-success-700: 99 153 17; /* ⬅ #639911 */
-	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
-	--color-success-900: 65 100 11; /* ⬅ #41640b */
-	/* warning | #EAB308 */
-	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
-	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
-	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
-	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
-	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
-	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
-	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
-	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
-	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
-	--color-warning-900: 115 88 4; /* ⬅ #735804 */
-	/* error | #D41976 */
-	--color-error-50: 249 221 234; /* ⬅ #f9ddea */
-	--color-error-100: 246 209 228; /* ⬅ #f6d1e4 */
-	--color-error-200: 244 198 221; /* ⬅ #f4c6dd */
-	--color-error-300: 238 163 200; /* ⬅ #eea3c8 */
-	--color-error-400: 225 94 159; /* ⬅ #e15e9f */
-	--color-error-500: 212 25 118; /* ⬅ #D41976 */
-	--color-error-600: 191 23 106; /* ⬅ #bf176a */
-	--color-error-700: 159 19 89; /* ⬅ #9f1359 */
-	--color-error-800: 127 15 71; /* ⬅ #7f0f47 */
-	--color-error-900: 104 12 58; /* ⬅ #680c3a */
-	/* surface | #495a8f */
-	--color-surface-50: 228 230 238; /* ⬅ #e4e6ee */
-	--color-surface-100: 219 222 233; /* ⬅ #dbdee9 */
-	--color-surface-200: 210 214 227; /* ⬅ #d2d6e3 */
-	--color-surface-300: 182 189 210; /* ⬅ #b6bdd2 */
-	--color-surface-400: 128 140 177; /* ⬅ #808cb1 */
-	--color-surface-500: 73 90 143; /* ⬅ #495a8f */
-	--color-surface-600: 66 81 129; /* ⬅ #425181 */
-	--color-surface-700: 55 68 107; /* ⬅ #37446b */
-	--color-surface-800: 44 54 86; /* ⬅ #2c3656 */
-	--color-surface-900: 36 44 70; /* ⬅ #242c46 */
-}
-
-/* Headings */
-[data-theme='skeleton'] h1,
-[data-theme='skeleton'] h2,
-[data-theme='skeleton'] h3,
-[data-theme='skeleton'] h4,
-[data-theme='skeleton'] h5,
-[data-theme='skeleton'] h6 {
-	font-weight: bold;
-}
-
-/* Applied to body with `<body data-theme="skeleton">` */
-/* Created with: https://csshero.org/mesher/ */
-/* prettier-ignore */
-[data-theme='skeleton'] {
-	background-image:
-			radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
-			radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
--- a/packages/plugin/src/themes/theme-test.css
+++ b/packages/plugin/src/themes/theme-test.css
@@ -1,96 +0,0 @@
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui;
-	--theme-font-family-heading: system-ui;
-	--theme-font-color-base: 0 0 0;
-	--theme-font-color-dark: 255 255 255;
-	--theme-rounded-base: 9999px;
-	--theme-rounded-container: 8px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 255 255 255;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #0FBA81 */
-	--color-primary-50: 219 245 236; /* ⬅ #dbf5ec */
-	--color-primary-100: 207 241 230; /* ⬅ #cff1e6 */
-	--color-primary-200: 195 238 224; /* ⬅ #c3eee0 */
-	--color-primary-300: 159 227 205; /* ⬅ #9fe3cd */
-	--color-primary-400: 87 207 167; /* ⬅ #57cfa7 */
-	--color-primary-500: 15 186 129; /* ⬅ #0FBA81 */
-	--color-primary-600: 14 167 116; /* ⬅ #0ea774 */
-	--color-primary-700: 11 140 97; /* ⬅ #0b8c61 */
-	--color-primary-800: 9 112 77; /* ⬅ #09704d */
-	--color-primary-900: 7 91 63; /* ⬅ #075b3f */
-	/* secondary | #4F46E5 */
-	--color-secondary-50: 229 227 251; /* ⬅ #e5e3fb */
-	--color-secondary-100: 220 218 250; /* ⬅ #dcdafa */
-	--color-secondary-200: 211 209 249; /* ⬅ #d3d1f9 */
-	--color-secondary-300: 185 181 245; /* ⬅ #b9b5f5 */
-	--color-secondary-400: 132 126 237; /* ⬅ #847eed */
-	--color-secondary-500: 79 70 229; /* ⬅ #4F46E5 */
-	--color-secondary-600: 71 63 206; /* ⬅ #473fce */
-	--color-secondary-700: 59 53 172; /* ⬅ #3b35ac */
-	--color-secondary-800: 47 42 137; /* ⬅ #2f2a89 */
-	--color-secondary-900: 39 34 112; /* ⬅ #272270 */
-	/* tertiary | #0EA5E9 */
-	--color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */
-	--color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */
-	--color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */
-	--color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */
-	--color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */
-	--color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */
-	--color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */
-	--color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */
-	--color-tertiary-800: 8 99 140; /* ⬅ #08638c */
-	--color-tertiary-900: 7 81 114; /* ⬅ #075172 */
-	/* success | #84cc16 */
-	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
-	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
-	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
-	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
-	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
-	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
-	--color-success-600: 119 184 20; /* ⬅ #77b814 */
-	--color-success-700: 99 153 17; /* ⬅ #639911 */
-	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
-	--color-success-900: 65 100 11; /* ⬅ #41640b */
-	/* warning | #EAB308 */
-	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
-	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
-	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
-	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
-	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
-	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
-	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
-	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
-	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
-	--color-warning-900: 115 88 4; /* ⬅ #735804 */
-	/* error | #D41976 */
-	--color-error-50: 249 221 234; /* ⬅ #f9ddea */
-	--color-error-100: 246 209 228; /* ⬅ #f6d1e4 */
-	--color-error-200: 244 198 221; /* ⬅ #f4c6dd */
-	--color-error-300: 238 163 200; /* ⬅ #eea3c8 */
-	--color-error-400: 225 94 159; /* ⬅ #e15e9f */
-	--color-error-500: 212 25 118; /* ⬅ #D41976 */
-	--color-error-600: 191 23 106; /* ⬅ #bf176a */
-	--color-error-700: 159 19 89; /* ⬅ #9f1359 */
-	--color-error-800: 127 15 71; /* ⬅ #7f0f47 */
-	--color-error-900: 104 12 58; /* ⬅ #680c3a */
-	/* surface | #495a8f */
-	--color-surface-50: 228 230 238; /* ⬅ #e4e6ee */
-	--color-surface-100: 219 222 233; /* ⬅ #dbdee9 */
-	--color-surface-200: 210 214 227; /* ⬅ #d2d6e3 */
-	--color-surface-300: 182 189 210; /* ⬅ #b6bdd2 */
-	--color-surface-400: 128 140 177; /* ⬅ #808cb1 */
-	--color-surface-500: 73 90 143; /* ⬅ #495a8f */
-	--color-surface-600: 66 81 129; /* ⬅ #425181 */
-	--color-surface-700: 55 68 107; /* ⬅ #37446b */
-	--color-surface-800: 44 54 86; /* ⬅ #2c3656 */
-	--color-surface-900: 36 44 70; /* ⬅ #242c46 */
-}
--- a/packages/plugin/src/themes/theme-vintage.css
+++ b/packages/plugin/src/themes/theme-vintage.css
@@ -1,131 +0,0 @@
-/* https://fonts.google.com/specimen/Abril+Fatface?query=Abril+Fatface&noto.query=Abril */
-
-:root {
-	/* =~= Theme Styles =~= */
-	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-	--theme-font-family-heading: 'Abril Fatface', cursive;
-	--theme-font-color-base: var(--color-primary-900);
-	--theme-font-color-dark: var(--color-primary-100);
-	--theme-rounded-base: 2px;
-	--theme-rounded-container: 4px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 0 0 0;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 0 0 0;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #ea861a */
-	--color-primary-50: 252 237 221; /* ⬅ #fceddd */
-	--color-primary-100: 251 231 209; /* ⬅ #fbe7d1 */
-	--color-primary-200: 250 225 198; /* ⬅ #fae1c6 */
-	--color-primary-300: 247 207 163; /* ⬅ #f7cfa3 */
-	--color-primary-400: 240 170 95; /* ⬅ #f0aa5f */
-	--color-primary-500: 234 134 26; /* ⬅ #ea861a */
-	--color-primary-600: 211 121 23; /* ⬅ #d37917 */
-	--color-primary-700: 176 101 20; /* ⬅ #b06514 */
-	--color-primary-800: 140 80 16; /* ⬅ #8c5010 */
-	--color-primary-900: 115 66 13; /* ⬅ #73420d */
-	/* secondary | #97cea5 */
-	--color-secondary-50: 239 248 242; /* ⬅ #eff8f2 */
-	--color-secondary-100: 234 245 237; /* ⬅ #eaf5ed */
-	--color-secondary-200: 229 243 233; /* ⬅ #e5f3e9 */
-	--color-secondary-300: 213 235 219; /* ⬅ #d5ebdb */
-	--color-secondary-400: 182 221 192; /* ⬅ #b6ddc0 */
-	--color-secondary-500: 151 206 165; /* ⬅ #97cea5 */
-	--color-secondary-600: 136 185 149; /* ⬅ #88b995 */
-	--color-secondary-700: 113 155 124; /* ⬅ #719b7c */
-	--color-secondary-800: 91 124 99; /* ⬅ #5b7c63 */
-	--color-secondary-900: 74 101 81; /* ⬅ #4a6551 */
-	/* tertiary | #06b6d4 */
-	--color-tertiary-50: 218 244 249; /* ⬅ #daf4f9 */
-	--color-tertiary-100: 205 240 246; /* ⬅ #cdf0f6 */
-	--color-tertiary-200: 193 237 244; /* ⬅ #c1edf4 */
-	--color-tertiary-300: 155 226 238; /* ⬅ #9be2ee */
-	--color-tertiary-400: 81 204 225; /* ⬅ #51cce1 */
-	--color-tertiary-500: 6 182 212; /* ⬅ #06b6d4 */
-	--color-tertiary-600: 5 164 191; /* ⬅ #05a4bf */
-	--color-tertiary-700: 5 137 159; /* ⬅ #05899f */
-	--color-tertiary-800: 4 109 127; /* ⬅ #046d7f */
-	--color-tertiary-900: 3 89 104; /* ⬅ #035968 */
-	/* success | #84cb5d */
-	--color-success-50: 237 247 231; /* ⬅ #edf7e7 */
-	--color-success-100: 230 245 223; /* ⬅ #e6f5df */
-	--color-success-200: 224 242 215; /* ⬅ #e0f2d7 */
-	--color-success-300: 206 234 190; /* ⬅ #ceeabe */
-	--color-success-400: 169 219 142; /* ⬅ #a9db8e */
-	--color-success-500: 132 203 93; /* ⬅ #84cb5d */
-	--color-success-600: 119 183 84; /* ⬅ #77b754 */
-	--color-success-700: 99 152 70; /* ⬅ #639846 */
-	--color-success-800: 79 122 56; /* ⬅ #4f7a38 */
-	--color-success-900: 65 99 46; /* ⬅ #41632e */
-	/* warning | #f2ac23 */
-	--color-warning-50: 253 243 222; /* ⬅ #fdf3de */
-	--color-warning-100: 252 238 211; /* ⬅ #fceed3 */
-	--color-warning-200: 252 234 200; /* ⬅ #fceac8 */
-	--color-warning-300: 250 222 167; /* ⬅ #fadea7 */
-	--color-warning-400: 246 197 101; /* ⬅ #f6c565 */
-	--color-warning-500: 242 172 35; /* ⬅ #f2ac23 */
-	--color-warning-600: 218 155 32; /* ⬅ #da9b20 */
-	--color-warning-700: 182 129 26; /* ⬅ #b6811a */
-	--color-warning-800: 145 103 21; /* ⬅ #916715 */
-	--color-warning-900: 119 84 17; /* ⬅ #775411 */
-	/* error | #d57e78 */
-	--color-error-50: 249 236 235; /* ⬅ #f9eceb */
-	--color-error-100: 247 229 228; /* ⬅ #f7e5e4 */
-	--color-error-200: 245 223 221; /* ⬅ #f5dfdd */
-	--color-error-300: 238 203 201; /* ⬅ #eecbc9 */
-	--color-error-400: 226 165 161; /* ⬅ #e2a5a1 */
-	--color-error-500: 213 126 120; /* ⬅ #d57e78 */
-	--color-error-600: 192 113 108; /* ⬅ #c0716c */
-	--color-error-700: 160 95 90; /* ⬅ #a05f5a */
-	--color-error-800: 128 76 72; /* ⬅ #804c48 */
-	--color-error-900: 104 62 59; /* ⬅ #683e3b */
-	/* surface | #3f3731 */
-	--color-surface-50: 226 225 224; /* ⬅ #e2e1e0 */
-	--color-surface-100: 217 215 214; /* ⬅ #d9d7d6 */
-	--color-surface-200: 207 205 204; /* ⬅ #cfcdcc */
-	--color-surface-300: 178 175 173; /* ⬅ #b2afad */
-	--color-surface-400: 121 115 111; /* ⬅ #79736f */
-	--color-surface-500: 63 55 49; /* ⬅ #3f3731 */
-	--color-surface-600: 57 50 44; /* ⬅ #39322c */
-	--color-surface-700: 47 41 37; /* ⬅ #2f2925 */
-	--color-surface-800: 38 33 29; /* ⬅ #26211d */
-	--color-surface-900: 31 27 24; /* ⬅ #1f1b18 */
-}
-
-[data-theme='vintage'] h1,
-[data-theme='vintage'] h2,
-[data-theme='vintage'] h3,
-[data-theme='vintage'] h4,
-[data-theme='vintage'] h5,
-[data-theme='vintage'] h6 {
-	letter-spacing: 1px;
-}
-
-/* Applied to body with `<body data-theme="vintage">` */
-/* Created with: https://csshero.org/mesher/ */
-[data-theme='vintage'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.20) 0px, transparent 50%),
-		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.20) 0px, transparent 50%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
-.dark [data-theme='vintage'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.14) 0px, transparent 50%),
-		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.14) 0px, transparent 50%);
-	background-attachment: fixed;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
--- a/packages/plugin/src/types.ts
+++ b/packages/plugin/src/types.ts
@@ -1,4 +1,4 @@
-import type { PresetTheme, ThemeProperties } from './tailwind/themes';
+import type { BaseTheme, PresetThemeName, ThemeProperties } from './tailwind/themes';

 export type ConfigOptions = {
 	/**
@@ -71,10 +71,10 @@ export type ThemeConfig = {
 	 * ]
 	 *
 	 */
-	preset?: Array<PresetThemeConfig | PresetTheme>;
+	preset?: Array<PresetThemeConfig | PresetThemeName>;
 };

-export type CustomThemeConfig = {
+export type CustomThemeConfig = BaseTheme & {
 	/**
 	 * The name of your custom theme.
 	 *
@@ -131,7 +131,7 @@ export type PresetThemeConfig = {
 	/**
 	 * Name of one of our provided theme presets.
 	 */
-	name: PresetTheme;
+	name: PresetThemeName;
 	/**
 	 * Whether to include the preset theme enhancements. Disabled by default.
 	 *
--- a/sites/skeleton.dev/src/lib/components/DocsAppBar/DocsAppBar.svelte
+++ b/sites/skeleton.dev/src/lib/components/DocsAppBar/DocsAppBar.svelte
@@ -56,6 +56,7 @@

 	const themes = [
 		{ type: 'skeleton', name: 'Skeleton', icon: '💀' },
+		{ type: 'wintry', name: 'Wintry', icon: '🌨️', badge: 'New' },
 		{ type: 'modern', name: 'Modern', icon: '🤖' },
 		{ type: 'rocket', name: 'Rocket', icon: '🚀' },
 		{ type: 'seafoam', name: 'Seafoam', icon: '🧜‍♀️' },
@@ -174,7 +175,7 @@
 					<nav class="list-nav p-4 -m-4 max-h-64 lg:max-h-[500px] overflow-y-auto">
 						<form action="/?/setTheme" method="POST" use:enhance={setTheme}>
 							<ul>
-								{#each themes as { icon, name, type }}
+								{#each themes as { icon, name, type, badge }}
 									<li>
 										<button
 											class="option w-full h-full"
@@ -184,7 +185,8 @@
 											class:bg-primary-active-token={$storeTheme === type}
 										>
 											<span>{icon}</span>
-											<span>{name}</span>
+											<span class="flex-auto text-left">{name}</span>
+											{#if badge}<span class="badge variant-filled-secondary">{badge}</span>{/if}
 										</button>
 									</li>
 								{/each}
--- a/sites/skeleton.dev/src/lib/themes.ts
+++ b/sites/skeleton.dev/src/lib/themes.ts
@@ -11,7 +11,6 @@ export const themes: any[] = [
 		fonts: [
 			{
 				source: 'Google Fonts',
-				url: 'https://fonts.google.com/specimen/Inter?query=inter',
 				name: 'Inter',
 				file: 'Inter-VariableFont_slnt,wght.ttf',
 				import:
@@ -25,7 +24,13 @@ export const themes: any[] = [
 		name: '💀 Skeleton',
 		colors: ['#0FBA81', '#4F46E5', '#0EA5E9', '#84cc16', '#EAB308', '#D41976'],
 		surface: '#242c46',
-		url: `${ghPath}/theme-skeleton.css`,
+		fonts: []
+	},
+	{
+		file: 'wintry',
+		name: '🌨️ Wintry',
+		colors: ['#3b82f6', '#4F46E5', '#0EA5E9', '#84cc16', '#EAB308', '#D41976'],
+		surface: '#111827',
 		fonts: []
 	},
 	{
@@ -33,11 +38,9 @@ export const themes: any[] = [
 		name: '🤖 Modern',
 		colors: ['#ec4899', '#06b6d4', '#14b8a6', '#84cc16', '#eab308', '#ef4444'],
 		surface: '#313276',
-		url: `${ghPath}/theme-modern.css`,
 		fonts: [
 			{
 				source: 'Google Fonts',
-				url: 'https://fonts.google.com/specimen/Quicksand?query=Quicksand',
 				name: 'Quicksand',
 				file: 'Quicksand-VariableFont_wght.ttf',
 				import: 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'
@@ -49,11 +52,9 @@ export const themes: any[] = [
 		name: '🚀 Rocket',
 		colors: ['#06b6d4', '#3b82f6', '#a855f7', '#4ccb15', '#f4c12a', '#b52c55'],
 		surface: '#313944',
-		url: `${ghPath}/theme-rocket.css`,
 		fonts: [
 			{
 				source: 'Google Fonts',
-				url: 'https://fonts.google.com/specimen/Space+Grotesk',
 				name: 'Space Grotesk',
 				file: 'SpaceGrotesk-VariableFont_wght.ttf',
 				import: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'
@@ -65,11 +66,9 @@ export const themes: any[] = [
 		name: '🧜‍♀️ Seafoam',
 		colors: ['#86d0cb', '#213355', '#ff3d00', '#06e5a2', '#eae557', '#d24646'],
 		surface: '#126668',
-		url: `${ghPath}/theme-seafoam.css`,
 		fonts: [
 			{
 				source: 'Google Fonts',
-				url: 'https://fonts.google.com/specimen/Playfair+Display?query=playfair',
 				name: 'Playfair Display',
 				file: 'PlayfairDisplay-Italic-VariableFont_wght.ttf',
 				import:
@@ -82,11 +81,9 @@ export const themes: any[] = [
 		name: '📺 Vintage',
 		colors: ['#ea861a', '#97cea5', '#06b6d4', '#84cb5d', '#f2ac23', '#d57e78'],
 		surface: '#1f1b18',
-		url: `${ghPath}/theme-vintage.css`,
 		fonts: [
 			{
 				source: 'Google Fonts',
-				url: 'https://fonts.google.com/specimen/Abril+Fatface?query=Abril+Fatface&noto.query=Abril',
 				name: 'Abril Fatface',
 				file: 'AbrilFatface-Regular.ttf',
 				import: 'https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap'
@@ -98,7 +95,6 @@ export const themes: any[] = [
 		name: '🏜️ Sahara',
 		colors: ['#ecaa36', '#3acbba', '#bbdf86', '#84cc16', '#e5c157', '#db5c9c'],
 		surface: '#6b2631',
-		url: `${ghPath}/theme-sahara.css`,
 		fonts: []
 	},
 	// Community Contest Themes
@@ -107,7 +103,6 @@ export const themes: any[] = [
 		name: '👔 Hamlindigo',
 		colors: ['#a8bef1', '#a48e5b', '#6197a3', '#47947d', '#daa93e', '#a26175'],
 		surface: '#313a50',
-		url: `${ghPath}/theme-hamlindigo.css`,
 		fonts: []
 	},
 	{
@@ -115,11 +110,9 @@ export const themes: any[] = [
 		name: '💫 Gold Nouveau',
 		colors: ['#744aa1', '#0672e5', '#7f78dd', '#72c585', '#e77f08', '#8f0f22'],
 		surface: '#120b18',
-		url: `${ghPath}/theme-gold-nouveau.css`,
 		fonts: [
 			{
 				source: 'Google Fonts',
-				url: 'https://fonts.google.com/specimen/Quicksand?query=Quicksand',
 				name: 'Quicksand',
 				file: 'Quicksand-VariableFont_wght.ttf',
 				import: 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'
@@ -131,7 +124,6 @@ export const themes: any[] = [
 		name: '⭕ Crimson',
 		colors: ['#d4163c', '#4685af', '#c0b6b4', '#c1dd97', '#e4c25e', '#d27f81'],
 		surface: '#15171f',
-		url: `${ghPath}/theme-crimson.css`,
 		fonts: []
 	}
 ];
--- a/sites/skeleton.dev/tailwind.config.js
+++ b/sites/skeleton.dev/tailwind.config.js
@@ -32,7 +32,8 @@ export default {
 					{ name: 'sahara', enhancements: true },
 					{ name: 'seafoam', enhancements: true },
 					{ name: 'skeleton', enhancements: true },
-					{ name: 'vintage', enhancements: true }
+					{ name: 'vintage', enhancements: true },
+					{ name: 'wintry', enhancements: true }
 				]
 			}
 		})