From 757daf086cdf131480807713b5d6a2852d4effca Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 9 Jan 2024 21:04:18 -0500
Subject: [PATCH] Theme generator (#192)

* Rename `cssVars` action to `styleVars` and do not prefix properties with `--` by default (more flexible)

* [SelectField] Fix toggling display of options menu using toggleIcon. Ignore toggling when clicking on SelectField border.  Support hiding toggleIcon (`<SelectField toggleIcon={null} />

* [SelectField] Add `stepper` prop to iterate through options (like `MenuField`)

* [MenuField] Expose `selected` option via prop (similar to `SelectField`)

* [SelectField Add stepper example

* Move `processThemeColors()` from tailwind plugin to $lib/styles/theme to allow calling at runtime (theme generator frontend).  Add types

* Update skeleton.ts to match skeleton.cjs (to be removed)

* Beginning work of theme generator

* Read themes from `themes.json` file for both tailwind config and theme selector.  Remove daisy/skeleton commonjs modules.  Add `getThemeNames` to split based on `color-scheme`.  Ultimately simplifies a lot

* Add "Copy all" daisy and skeleton options

* Use <ThemeSelect> or <ThemeSwitch> based on more than 1 light/dark theme

* Fix skeleton dark themes after refactor

* Add explicit daisy themeName list to hopefully fix build (similar to skeleton)

* Set initial theme selections (fix reactivity infinite loop)

* [SelectField] Use `selectValue(...)` instead of `value = ...` so `change` is dispatched (and other consistent updating)

* Change light/dark preview based on which input was last changed

* Support overriding doc themes wtih generator (custom) themes

* Fix setting `prefers-color-scheme: dark` override

* Use a local copy of Skeleton themes to fix Cloudflare build (work around Node.js runtime issue)

* Improve handling of `-50` shade when `-100` exists (ex. Skeleton)

* Update site dark/light mode with preview for better experience (previewing and applying)

* Support custom Ior exisitng) theme editing

* Add state colors and support showing/hiding optoinal colors

* Add "Copy all themes" menu item

* [ColorField] Support `hex` entry

* Register all themes (daisy + skeleton)

* Format files (fix lint error)

* Add changeset
---
 .changeset/cool-hotels-own.md                 |    5 +
 .changeset/fair-trees-sparkle.md              |    5 +
 .changeset/quick-carrots-grab.md              |    5 +
 .changeset/selfish-hounds-dance.md            |    5 +
 .changeset/yellow-nails-vanish.md             |    5 +
 packages/svelte-ux/package.json               |    1 +
 packages/svelte-ux/src/lib/actions/index.ts   |    2 +-
 .../lib/actions/{cssVars.ts => styleProps.ts} |   10 +-
 .../svelte-ux/src/lib/components/Grid.svelte  |   27 +-
 .../src/lib/components/MenuField.svelte       |    1 +
 .../src/lib/components/SelectField.svelte     |   72 +-
 .../svelte-ux/src/lib/components/Steps.svelte |   17 +-
 .../src/lib/plugins/tailwind/theme.cjs        |  188 +-
 packages/svelte-ux/src/lib/styles/daisy.cjs   |   47 -
 packages/svelte-ux/src/lib/styles/daisy.ts    |   54 +-
 .../svelte-ux/src/lib/styles/skeleton.cjs     |  100 -
 packages/svelte-ux/src/lib/styles/skeleton.ts |  102 +-
 .../src/lib/styles/skeleton/crimson.ts        |   96 +
 .../src/lib/styles/skeleton/gold-nouveau.ts   |  118 ++
 .../src/lib/styles/skeleton/hamlindigo.ts     |  105 +
 .../src/lib/styles/skeleton/index.ts          |  143 ++
 .../src/lib/styles/skeleton/modern.ts         |  114 ++
 .../src/lib/styles/skeleton/rocket.ts         |  106 +
 .../src/lib/styles/skeleton/sahara.ts         |  117 ++
 .../src/lib/styles/skeleton/seafoam.ts        |  114 ++
 .../src/lib/styles/skeleton/skeleton.ts       |  106 +
 .../src/lib/styles/skeleton/vintage.ts        |  115 ++
 .../src/lib/styles/skeleton/wintry.ts         |  110 +
 packages/svelte-ux/src/lib/styles/theme.ts    |  220 ++
 .../svelte-ux/src/routes/+layout.server.ts    |    9 +-
 packages/svelte-ux/src/routes/+layout.svelte  |   14 +-
 packages/svelte-ux/src/routes/_NavMenu.svelte |    2 +-
 .../routes/docs/actions/cssVars/+page.svelte  |   47 -
 .../src/routes/docs/actions/cssVars/+page.ts  |   13 -
 .../docs/actions/styleProps/+page.svelte      |   29 +
 .../routes/docs/actions/styleProps/+page.ts   |   12 +
 .../docs/components/SelectField/+page.svelte  |   24 +-
 .../src/routes/theme/+page.server.ts          |   11 +
 .../svelte-ux/src/routes/theme/+page.svelte   |  738 +++++--
 .../src/routes/theme/ColorField.svelte        |   58 +
 packages/svelte-ux/tailwind.config.cjs        |    6 +-
 packages/svelte-ux/themes.json                | 1798 +++++++++++++++++
 pnpm-lock.yaml                                |    7 +
 43 files changed, 4286 insertions(+), 592 deletions(-)
 create mode 100644 .changeset/cool-hotels-own.md
 create mode 100644 .changeset/fair-trees-sparkle.md
 create mode 100644 .changeset/quick-carrots-grab.md
 create mode 100644 .changeset/selfish-hounds-dance.md
 create mode 100644 .changeset/yellow-nails-vanish.md
 rename packages/svelte-ux/src/lib/actions/{cssVars.ts => styleProps.ts} (70%)
 delete mode 100644 packages/svelte-ux/src/lib/styles/daisy.cjs
 delete mode 100644 packages/svelte-ux/src/lib/styles/skeleton.cjs
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/crimson.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/gold-nouveau.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/hamlindigo.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/index.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/modern.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/rocket.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/sahara.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/seafoam.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/skeleton.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/vintage.ts
 create mode 100644 packages/svelte-ux/src/lib/styles/skeleton/wintry.ts
 delete mode 100644 packages/svelte-ux/src/routes/docs/actions/cssVars/+page.svelte
 delete mode 100644 packages/svelte-ux/src/routes/docs/actions/cssVars/+page.ts
 create mode 100644 packages/svelte-ux/src/routes/docs/actions/styleProps/+page.svelte
 create mode 100644 packages/svelte-ux/src/routes/docs/actions/styleProps/+page.ts
 create mode 100644 packages/svelte-ux/src/routes/theme/+page.server.ts
 create mode 100644 packages/svelte-ux/src/routes/theme/ColorField.svelte
 create mode 100644 packages/svelte-ux/themes.json

diff --git a/.changeset/cool-hotels-own.md b/.changeset/cool-hotels-own.md
new file mode 100644
index 000000000..bc91528f8
--- /dev/null
+++ b/.changeset/cool-hotels-own.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[SelectField] Add `stepper` prop to iterate through options (like `MenuField`)
diff --git a/.changeset/fair-trees-sparkle.md b/.changeset/fair-trees-sparkle.md
new file mode 100644
index 000000000..3b3d7d390
--- /dev/null
+++ b/.changeset/fair-trees-sparkle.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[MenuField] Expose `selected` option via prop (similar to `SelectField`)
diff --git a/.changeset/quick-carrots-grab.md b/.changeset/quick-carrots-grab.md
new file mode 100644
index 000000000..e59206ed5
--- /dev/null
+++ b/.changeset/quick-carrots-grab.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": minor
+---
+
+Add theme selection/creation page and simplify loading themes
diff --git a/.changeset/selfish-hounds-dance.md b/.changeset/selfish-hounds-dance.md
new file mode 100644
index 000000000..467dc5b31
--- /dev/null
+++ b/.changeset/selfish-hounds-dance.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[SelectField] Fix toggling display of options menu using toggleIcon. Support hiding toggleIcon (`<SelectField toggleIcon={null} />
diff --git a/.changeset/yellow-nails-vanish.md b/.changeset/yellow-nails-vanish.md
new file mode 100644
index 000000000..863f8fdcb
--- /dev/null
+++ b/.changeset/yellow-nails-vanish.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Rename `cssVars` action to `styleVars` and do not prefix properties with `--` by default (more flexible)
diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json
index 7c44add91..d3e5d4748 100644
--- a/packages/svelte-ux/package.json
+++ b/packages/svelte-ux/package.json
@@ -27,6 +27,7 @@
     "@sveltejs/kit": "^1.30.3",
     "@sveltejs/package": "^2.2.5",
     "@tailwindcss/typography": "^0.5.10",
+    "@types/culori": "^2.0.4",
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.8",
     "@types/lodash-es": "^4.17.12",
diff --git a/packages/svelte-ux/src/lib/actions/index.ts b/packages/svelte-ux/src/lib/actions/index.ts
index f698df4b2..ff4bb0486 100644
--- a/packages/svelte-ux/src/lib/actions/index.ts
+++ b/packages/svelte-ux/src/lib/actions/index.ts
@@ -1,4 +1,3 @@
-export * from './cssVars';
 export * from './dataBackground';
 export * from './input';
 export * from './layout';
@@ -9,4 +8,5 @@ export * from './portal';
 export * from './scroll';
 export * from './spotlight';
 export * from './sticky';
+export * from './styleProps';
 export * from './table';
diff --git a/packages/svelte-ux/src/lib/actions/cssVars.ts b/packages/svelte-ux/src/lib/actions/styleProps.ts
similarity index 70%
rename from packages/svelte-ux/src/lib/actions/cssVars.ts
rename to packages/svelte-ux/src/lib/actions/styleProps.ts
index f2f698b87..539ea95cc 100644
--- a/packages/svelte-ux/src/lib/actions/cssVars.ts
+++ b/packages/svelte-ux/src/lib/actions/styleProps.ts
@@ -2,12 +2,12 @@ import type { Action } from 'svelte/action';
 
 type CSSProps = { [key: string]: string | number | boolean | null | undefined };
 
-export const cssVars: Action<HTMLElement, CSSProps> = (node, props) => {
+export const styleProps: Action<HTMLElement, CSSProps> = (node, props) => {
   Object.entries(props ?? {}).forEach(([key, value]) => {
     // Ignore if null or undefined
     if (value != null) {
       value = typeof value === 'boolean' ? (value ? 1 : 0) : value;
-      node.style.setProperty(`--${key}`, `${value}`);
+      node.style.setProperty(key, `${value}`);
     }
   });
 
@@ -17,13 +17,13 @@ export const cssVars: Action<HTMLElement, CSSProps> = (node, props) => {
     update(newProps: CSSProps) {
       const newKeys = Object.keys(newProps);
       Object.keys(lastProps)
-        .filter((name) => !newKeys.includes(name))
-        .forEach((name) => node.style.removeProperty(`--${name}`));
+        .filter((key) => !newKeys.includes(key))
+        .forEach((key) => node.style.removeProperty(key));
 
       Object.entries(newProps).forEach(([key, value]) => {
         // Ignore if null or undefined
         if (value != null) {
-          node.style.setProperty(`--${key}`, `${value}`);
+          node.style.setProperty(key, `${value}`);
         }
         if (props) {
           delete props[key];
diff --git a/packages/svelte-ux/src/lib/components/Grid.svelte b/packages/svelte-ux/src/lib/components/Grid.svelte
index 6ce3c11bf..c1b37168d 100644
--- a/packages/svelte-ux/src/lib/components/Grid.svelte
+++ b/packages/svelte-ux/src/lib/components/Grid.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { cssVars } from '../actions/cssVars';
-
   export let columns = 0;
   export let gap = 0;
   export let columnGap = gap;
@@ -38,28 +36,23 @@
     templateColumns ??
     template ??
     (autoColumns ? `repeat(auto-fill, minmax(${autoColumns}, 1fr))` : `repeat(${columns}, 1fr)`);
-
-  $: styleVars = {
-    templateColumns: templateColumnsResolved,
-    templateRows,
-    gap,
-    columnGap,
-    rowGap,
-    autoFlow,
-    items, // TODO: Map start: flex-start?, end: flex-end?
-    justify, // TODO: Map start: flex-start?, end: flex-end?, between: space-between, around: space-around, evenly: space-evenly
-    justifyItems, // TODO: Map start: flex-start?, end: flex-end?, between: space-between, around: space-around, evenly: space-evenly
-    content, // TODO: Map start: flex-start?, end: flex-end?, between: space-between, around: space-around, evenly: space-evenly
-    // place, // TODO: Map start: flex-start?, end: flex-end?, between: space-between, around: space-around, evenly: space-evenly
-  };
 </script>
 
 <div
-  use:cssVars={styleVars}
   class="Grid"
   class:grid={!inline}
   class:inline-grid={inline}
   class:stack
+  style:--templateColumns={templateColumnsResolved}
+  style:--templateRows={templateRows}
+  style:--gap={gap}
+  style:--columnGap={columnGap}
+  style:--rowGap={rowGap}
+  style:--autoFlow={autoFlow}
+  style:--items={items}
+  style:--justify={justify}
+  style:--justifyItems={justifyItems}
+  style:--content={content}
   on:click
   {...$$restProps}
 >
diff --git a/packages/svelte-ux/src/lib/components/MenuField.svelte b/packages/svelte-ux/src/lib/components/MenuField.svelte
index 7ffb749a8..df0d66212 100644
--- a/packages/svelte-ux/src/lib/components/MenuField.svelte
+++ b/packages/svelte-ux/src/lib/components/MenuField.svelte
@@ -32,6 +32,7 @@
   const settingsClasses = getComponentClasses('MenuField');
 
   let open = false;
+  export let selected: any = undefined;
   $: selected = options?.find((x) => x.value === value);
 
   $: previous = () => {
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
index b5b7ae9c0..e5017f132 100644
--- a/packages/svelte-ux/src/lib/components/SelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -2,7 +2,7 @@
   import { createEventDispatcher, type ComponentProps, type ComponentEvents } from 'svelte';
   import type { Placement } from '@floating-ui/dom';
 
-  import { mdiChevronDown, mdiClose } from '@mdi/js';
+  import { mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiClose } from '@mdi/js';
 
   import Logger from '../utils/logger';
   import { autoFocus, selectOnFocus } from '$lib/actions';
@@ -36,7 +36,8 @@
   export let disabled: boolean = false;
   export let readonly: boolean = false;
   export let icon: IconInput = undefined;
-  export let toggleIcon: IconInput = mdiChevronDown;
+  export let inlineOptions = false;
+  export let toggleIcon: IconInput = !inlineOptions ? mdiChevronDown : null;
   export let closeIcon: IconInput = mdiClose;
   export let activeOptionIcon: boolean = false;
   export let clearable = true;
@@ -53,6 +54,9 @@
       ]
     : undefined;
 
+  /** If true, show left/right buttons to step through options */
+  export let stepper = false;
+
   let originalIcon = icon;
 
   export let scrollIntoView: Partial<ScrollIntoViewOptions> = {};
@@ -78,7 +82,6 @@
   export let resize = true;
   export let disableTransition = false;
   export let menuProps: ComponentProps<Menu> | undefined = undefined;
-  export let inlineOptions = false;
 
   $: filteredOptions = options ?? [];
   let searchText = '';
@@ -157,6 +160,7 @@
   // Elements
   let inputEl: HTMLInputElement | null = null;
   let menuOptionsEl: HTMLDivElement;
+  let selectFieldEl: HTMLButtonElement;
 
   // UI state
   export let open = false;
@@ -219,7 +223,9 @@
       fe.relatedTarget instanceof HTMLElement &&
       !menuOptionsEl?.contains(fe.relatedTarget) && // TODO: Oddly Safari does not set `relatedTarget` to the clicked on menu option (like Chrome and Firefox) but instead appears to take `tabindex` into consideration.  Currently resolves to `.options` after setting `tabindex="-1"
       fe.relatedTarget !== menuOptionsEl?.offsetParent && // click on scroll bar
-      !fe.relatedTarget.closest('menu > [slot=actions]') // click on action item
+      !fe.relatedTarget.closest('menu > [slot=actions]') && // click on action item
+      !selectFieldEl?.contains(fe.relatedTarget) && // click within <SelectField> (ex. toggleIcon)
+      fe.relatedTarget !== selectFieldEl // click on SelectField itself
     ) {
       hide('blur');
     } else {
@@ -358,6 +364,28 @@
     return option;
   }
 
+  $: previous = () => {
+    const index = options.findIndex((o) => o.value === value);
+    if (index === 0 || index === -1) {
+      // If first item, or no selected value yet, return last item
+      return options[options.length - 1].value;
+    } else {
+      // Previous item
+      return options[index - 1].value;
+    }
+  };
+
+  $: next = () => {
+    const index = options.findIndex((x) => x.value === value);
+    if (index === options.length - 1) {
+      // First value
+      return options[0].value;
+    } else {
+      // Next value
+      return options[index + 1].value;
+    }
+  };
+
   function clear() {
     logger.info('clear');
     selectOption(null);
@@ -375,6 +403,7 @@
     classes.root,
     $$props.class
   )}
+  bind:this={selectFieldEl}
   on:click={onClick}
 >
   <TextField
@@ -404,7 +433,21 @@
     aria-autocomplete={!inlineOptions ? 'list' : undefined}
     {...$$restProps}
   >
-    <slot slot="prepend" name="prepend" />
+    <span slot="prepend">
+      {#if stepper}
+        <Button
+          icon={mdiChevronLeft}
+          on:click={(e) => {
+            e.stopPropagation();
+            logger.debug('step left clicked');
+            selectValue(previous());
+          }}
+          class="mr-2"
+          size="sm"
+        />
+      {/if}
+      <slot name="prepend" />
+    </span>
 
     <span slot="append" class="flex items-center">
       <slot name="append" />
@@ -425,14 +468,29 @@
             clear();
           }}
         />
-      {:else if !inlineOptions}
+      {:else if toggleIcon}
         <Button
           icon={toggleIcon}
           class="text-surface-content/50 p-1 transform {open ? 'rotate-180' : ''}"
           tabindex="-1"
-          on:click={() => {
+          on:click={(e) => {
+            e.stopPropagation();
             logger.debug('toggleIcon clicked');
+            open ? hide() : show();
+          }}
+        />
+      {/if}
+
+      {#if stepper}
+        <Button
+          icon={mdiChevronRight}
+          on:click={(e) => {
+            e.stopPropagation();
+            logger.debug('step right clicked');
+            selectValue(next());
           }}
+          class="mr-2"
+          size="sm"
         />
       {/if}
     </span>
diff --git a/packages/svelte-ux/src/lib/components/Steps.svelte b/packages/svelte-ux/src/lib/components/Steps.svelte
index 9ec7c5646..add45b624 100644
--- a/packages/svelte-ux/src/lib/components/Steps.svelte
+++ b/packages/svelte-ux/src/lib/components/Steps.svelte
@@ -1,22 +1,17 @@
 <script lang="ts">
-  import { cssVars } from '../actions/cssVars';
-
   export let items: any[];
-
   export let lineGap = 4;
 
   // binded
   let circleSize = 0;
-
-  $: styleVars = {
-    circleSize,
-    lineTop: `${circleSize + lineGap}px`,
-    lineBottom: `${lineGap}px`,
-    lineOffset: `${circleSize / 2}px`,
-  };
 </script>
 
-<ol use:cssVars={styleVars}>
+<ol
+  style:--circleSize={circleSize}
+  style:--lineTop="{circleSize + lineGap}px"
+  style:--lineBottom="{lineGap}px"
+  style:--lineOffset="{circleSize / 2}px"
+>
   {#each items as item, index}
     <li class="step relative flex gap-4 pb-10">
       <div bind:clientWidth={circleSize}>
diff --git a/packages/svelte-ux/src/lib/plugins/tailwind/theme.cjs b/packages/svelte-ux/src/lib/plugins/tailwind/theme.cjs
index a3b942d65..de9ab225f 100644
--- a/packages/svelte-ux/src/lib/plugins/tailwind/theme.cjs
+++ b/packages/svelte-ux/src/lib/plugins/tailwind/theme.cjs
@@ -1,24 +1,4 @@
-const {
-  rgb,
-  hsl,
-  oklch,
-  clampRgb,
-  interpolate,
-  wcagContrast,
-  formatCss,
-} = require('culori/require');
-
-const { semanticColors, stateColors, colorNames, shades } = require('../../styles/theme');
-
-/**
- * Generate theme colors (ex. { primary: hsl(var(--color-primary) / <alpha-value>), ... })
- * @param {'rgb' | 'hsl' | 'oklch'} colorSpace
- */
-function createThemeColors(colorSpace) {
-  return Object.fromEntries(
-    colorNames.map((color) => [color, `${colorSpace}(var(--color-${color}) / <alpha-value>)`])
-  );
-}
+const { createThemeColors, processThemeColors } = require('../../styles/theme');
 
 /**
  * Inject all Tailwind config themes (`{ ux: { themes: [] }}`) into base CSS
@@ -28,181 +8,31 @@ function injectThemes(colorSpace, addBase, config) {
   const themes = config('ux.themes');
   const themeRoot = config('ux.themeRoot') ?? ':root';
 
-  /**
-   * Convert names to CSS variables and color values common color space (hsl, oklch, etc) and space separated
-   */
-  function processThemeColors(themeColors) {
-    const colors = { ...themeColors };
-
-    // Generate optional semanatic colors
-    if (!('neutral' in colors) && !('neutral-500' in colors)) {
-      colors['neutral'] = 'oklch(.355192 .032071 262.988584)';
-    }
-
-    // Generate optional state colors
-    if (!('info' in colors) && !('info-500' in colors)) {
-      colors['info'] = 'oklch(0.7206 0.191 231.6)';
-    }
-    if (!('success' in colors) && !('success-500' in colors)) {
-      colors['success'] = 'oklch(64.8% 0.150 160)';
-    }
-    if (!('warning' in colors) && !('warning-500' in colors)) {
-      colors['warning'] = 'oklch(0.8471 0.199 83.87)';
-    }
-    if (!('danger' in colors) && !('danger-500' in colors)) {
-      colors['danger'] = 'oklch(0.7176 0.221 22.18)';
-    }
-
-    // Generate optional content colors
-    for (const color of [...semanticColors, ...stateColors]) {
-      // Add `primary` from `primary-500` if not defined in theme (ex. Skeleton)
-      if (!(color in colors) && `${color}-500` in themeColors) {
-        colors[color] = themeColors[`${color}-500`];
-      }
-
-      if (!(`${color}-content` in colors)) {
-        colors[`${color}-content`] = foregroundColor(colors[color]);
-      }
-
-      // Generate color shades (ex. `primary-500`) if not defined.  Useful for Daisy but not Skeleton themes, for example
-      for (const shade of shades) {
-        const shadeColorName = `${color}-${shade}`;
-        if (!(shadeColorName in colors)) {
-          const newColor =
-            shade < 500
-              ? lightenColor(colors[color], (500 - shade) / 1000) // 100 == 0.1
-              : shade > 500
-                ? darkenColor(colors[color], (shade - 500) / 1000) // 100 == 0.1
-                : colors[color];
-          colors[shadeColorName] = newColor;
-        }
-      }
-    }
-
-    // Generate optional surface colors
-    if (!('surface-100' in colors)) {
-      colors['surface-100'] = 'oklch(100 0 0)';
-    }
-
-    if (!('surface-200' in colors)) {
-      colors['surface-200'] = darkenColor(colors['surface-100'], 0.07);
-    }
-
-    if (!('surface-300' in colors)) {
-      if ('surface-200' in themeColors) {
-        colors['surface-300'] = darkenColor(colors['surface-200'], 0.07);
-      } else {
-        colors['surface-300'] = darkenColor(colors['surface-100'], 0.14);
-      }
-    }
-
-    if (!('surface-content' in colors)) {
-      colors['surface-content'] = foregroundColor(colors['surface-100']);
-    }
-
-    const result = Object.fromEntries(
-      Object.entries(colors).map(([name, value]) => {
-        if (colorNames.includes(name)) {
-          // Add space separated color variables for each color
-          return [`--color-${name}`, colorVariableValue(value, colorSpace)];
-        } else {
-          // Additional properties such as `color-scheme` or CSS variable
-          return [name, value];
-        }
-      })
-    );
-
-    return result;
-  }
-
   const cssThemes = {};
   let rootThemeName = null;
   Object.entries(themes).map(([themeName, themeColors], index) => {
     if (index === 0) {
       // Root / default theme
-      cssThemes[themeRoot] = processThemeColors(themeColors);
+      cssThemes[themeRoot] = processThemeColors(themeColors, colorSpace);
       rootThemeName = themeName;
     } else if (index === 1) {
       // Dark theme
       cssThemes['@media (prefers-color-scheme: dark)'] = {
-        [themeRoot]: processThemeColors(themeColors),
+        [themeRoot]: processThemeColors(themeColors, colorSpace),
       };
 
       // Also register first and second them by name AFTER @media for precedence
-      cssThemes[`[data-theme=${rootThemeName}]`] = processThemeColors(themes[rootThemeName]);
-      cssThemes[`[data-theme=${themeName}]`] = processThemeColors(themeColors);
+      cssThemes[`[data-theme=${rootThemeName}]`] = processThemeColors(
+        themes[rootThemeName],
+        colorSpace
+      );
+      cssThemes[`[data-theme=${themeName}]`] = processThemeColors(themeColors, colorSpace);
     } else {
-      cssThemes[`[data-theme=${themeName}]`] = processThemeColors(themeColors);
+      cssThemes[`[data-theme=${themeName}]`] = processThemeColors(themeColors, colorSpace);
     }
   });
 
   addBase(cssThemes);
 }
 
-function round(value, decimals) {
-  if (value) {
-    return Number(value.toFixed(decimals));
-  } else {
-    return 0;
-  }
-}
-
-function isDark(color) {
-  try {
-    if (wcagContrast(color, 'black') < wcagContrast(color, 'white')) {
-      return true;
-    }
-    return false;
-  } catch (e) {
-    return false;
-  }
-}
-
-/** Lighten or darken color based on contrast of input */
-function foregroundColor(color, percentage = 0.8) {
-  try {
-    return isDark(color) ? lightenColor(color, percentage) : darkenColor(color, percentage);
-  } catch (e) {
-    // console.error('Unable to generate foreground color', color);
-  }
-}
-
-function lightenColor(color, percentage) {
-  try {
-    return formatCss(interpolate([color, 'white'], 'oklch')(percentage));
-  } catch (e) {
-    // console.error('Unable to generate lighten color', color);
-  }
-}
-
-function darkenColor(color, percentage) {
-  try {
-    return formatCss(interpolate([color, 'black'], 'oklch')(percentage));
-  } catch (e) {
-    // console.error('Unable to generate darken color', color);
-  }
-}
-
-/**
- * Convert color to space separated components string
- * @param {'rgb' | 'hsl' | 'oklch'} colorSpace
- */
-function colorVariableValue(color, colorSpace) {
-  try {
-    if (colorSpace === 'rgb') {
-      const { r, g, b } = rgb(color);
-      return `${round(r * 255, 6)} ${round(g * 255, 6)} ${round(b * 255, 6)}`;
-    } else if (colorSpace === 'hsl') {
-      const { h, s, l } = hsl(clampRgb(color));
-      return `${round(h, 6)} ${round(s * 100, 6)}% ${round(l * 100, 6)}%`;
-      // return `${round(h, 6)} ${round(Math.min(s * 100, 100), 6)}% ${round(Math.min(l * 100, 100), 6)}%`;
-    } else if (colorSpace === 'oklch') {
-      const { l, c, h } = oklch(color);
-      return `${round(l, 6)} ${round(c, 6)} ${round(h, 6)}`;
-    }
-  } catch (e) {
-    // console.error('Unable to convert color object to string', color);
-  }
-}
-
 module.exports = { createThemeColors, injectThemes };
diff --git a/packages/svelte-ux/src/lib/styles/daisy.cjs b/packages/svelte-ux/src/lib/styles/daisy.cjs
deleted file mode 100644
index 656755b98..000000000
--- a/packages/svelte-ux/src/lib/styles/daisy.cjs
+++ /dev/null
@@ -1,47 +0,0 @@
-const daisyThemes = require('daisyui/src/theming/themes');
-const { themeOrder } = require('daisyui/src/theming/themeDefaults');
-const { sortFunc } = require('../utils/sort');
-
-const daisyColorMap = {
-  'base-100': 'surface-100',
-  'base-200': 'surface-200',
-  'base-300': 'surface-300',
-  'base-content': 'surface-content',
-  error: 'danger',
-  'error-content': 'danger-content',
-};
-
-/**
- *  Map Daisy UI color names to Svelte UX names, and sort themes
- */
-function mapColorsName(themes, colorMap) {
-  return Object.fromEntries(
-    Object.entries(themes)
-      .map(([themeName, colors]) => {
-        return [
-          themeName,
-          Object.fromEntries(
-            Object.entries(colors).map(([key, value]) => {
-              return [colorMap[key] ?? key, value];
-            })
-          ),
-        ];
-      })
-      .sort(sortFunc(([themeName]) => themeOrder.indexOf(themeName)))
-  );
-}
-
-const themes = mapColorsName(daisyThemes, daisyColorMap);
-
-let lightThemes = [];
-let darkThemes = [];
-
-Object.entries(themes).forEach(([themeName, colors]) => {
-  if (colors['color-scheme'] === 'dark') {
-    darkThemes.push(themeName);
-  } else {
-    lightThemes.push(themeName);
-  }
-});
-
-module.exports = { themes, lightThemes, darkThemes };
diff --git a/packages/svelte-ux/src/lib/styles/daisy.ts b/packages/svelte-ux/src/lib/styles/daisy.ts
index 0edec235f..b27741f80 100644
--- a/packages/svelte-ux/src/lib/styles/daisy.ts
+++ b/packages/svelte-ux/src/lib/styles/daisy.ts
@@ -1,7 +1,42 @@
 import daisyThemes from 'daisyui/src/theming/themes';
-import { themeOrder } from 'daisyui/src/theming/themeDefaults';
+// import { themeOrder } from 'daisyui/src/theming/themeDefaults'; // breaks build
 import { sortFunc } from '../utils/sort';
 
+const themeNames = [
+  'light',
+  'dark',
+  'cupcake',
+  'bumblebee',
+  'emerald',
+  'corporate',
+  'synthwave',
+  'retro',
+  'cyberpunk',
+  'valentine',
+  'halloween',
+  'garden',
+  'forest',
+  'aqua',
+  'lofi',
+  'pastel',
+  'fantasy',
+  'wireframe',
+  'black',
+  'luxury',
+  'dracula',
+  'cmyk',
+  'autumn',
+  'business',
+  'acid',
+  'lemonade',
+  'night',
+  'coffee',
+  'winter',
+  'dim',
+  'nord',
+  'sunset',
+];
+
 const daisyColorMap = {
   'base-100': 'surface-100',
   'base-200': 'surface-200',
@@ -14,7 +49,7 @@ const daisyColorMap = {
 /**
  *  Map Daisy UI color names to Svelte UX names, and sort themes
  */
-function mapColorsName(themes, colorMap) {
+function mapColorsName(themes: typeof daisyThemes, colorMap: typeof daisyColorMap) {
   return Object.fromEntries(
     Object.entries(themes)
       .map(([themeName, colors]) => {
@@ -27,21 +62,10 @@ function mapColorsName(themes, colorMap) {
           ),
         ];
       })
-      .sort(sortFunc(([themeName]) => themeOrder.indexOf(themeName)))
+      .sort(sortFunc(([themeName]) => themeNames.indexOf(themeName)))
   );
 }
 
 const themes = mapColorsName(daisyThemes, daisyColorMap);
 
-let lightThemes: string[] = [];
-let darkThemes: string[] = [];
-
-Object.entries(themes).forEach(([themeName, colors]) => {
-  if (colors['color-scheme'] === 'dark') {
-    darkThemes.push(themeName);
-  } else {
-    lightThemes.push(themeName);
-  }
-});
-
-export { themes, lightThemes, darkThemes };
+export { themes };
diff --git a/packages/svelte-ux/src/lib/styles/skeleton.cjs b/packages/svelte-ux/src/lib/styles/skeleton.cjs
deleted file mode 100644
index 85f5ac385..000000000
--- a/packages/svelte-ux/src/lib/styles/skeleton.cjs
+++ /dev/null
@@ -1,100 +0,0 @@
-const { getThemeProperties } = require('@skeletonlabs/tw-plugin');
-
-const themeNames = [
-  'skeleton',
-  'wintry',
-  'modern',
-  'rocket',
-  'seafoam',
-  'vintage',
-  'sahara',
-  'hamlindigo',
-  'gold-nouveau',
-];
-
-// Map Skeleton to Svelte UX theme colors
-const skeletonColorMap = {
-  // Semantic
-  primary: 'primary',
-  secondary: 'secondary',
-  tertiary: 'accent',
-  // '': 'neutral',
-  // State
-  success: 'success',
-  warning: 'warning',
-  error: 'danger',
-  // Surface
-  surface: 'surface',
-};
-
-function processTheme(themeName, scheme) {
-  const properties = getThemeProperties(themeName);
-
-  let mappedThemeProperties = Object.entries(properties)
-    .map(([key, value]) => {
-      if (key.startsWith('--color')) {
-        // `--color-primary-500` => `primary-500`
-        // `--color-primary-500` => `primary`
-        const matches = key.match(/--color-(\w*)-([0-9]{3})/);
-        const skeletonColorName = matches?.[1];
-        const skeletonColorShade = matches?.[2];
-        const themeColorName = skeletonColorMap[skeletonColorName];
-        if (themeColorName) {
-          return [`${themeColorName}-${skeletonColorShade}`, `rgb(${value})`];
-        }
-      } else if (key.startsWith('--on-')) {
-        // `--on-primary` => `primary-content`
-        const matches = key.match(/--on-(\w*)/);
-        const skeletonColorName = matches?.[1];
-        const themeColorName = skeletonColorMap[skeletonColorName];
-        if (themeColorName) {
-          return [`${themeColorName}-content`, `rgb(${value})`];
-        }
-      } else {
-        // consider mapping additional 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',
-      }
-    })
-    .filter((d) => d);
-
-  mappedThemeProperties =
-    scheme === 'light'
-      ? [
-          ...mappedThemeProperties,
-          ['color-scheme', 'light'],
-          ['surface-100', `rgb(${properties['--color-surface-50']})`],
-          ['surface-200', `rgb(${properties['--color-surface-100']})`],
-          ['surface-300', `rgb(${properties['--color-surface-200']})`],
-          ['surface-content', `rgb(0 0 0)`],
-        ]
-      : [
-          ...mappedThemeProperties,
-          ['color-scheme', 'dark'],
-          ['surface-100', `rgb(${properties['--color-surface-700']})`],
-          ['surface-200', `rgb(${properties['--color-surface-800']})`],
-          ['surface-300', `rgb(${properties['--color-surface-900']})`],
-          ['surface-content', `rgb(255 255 255)`],
-        ];
-
-  return [
-    themeName === 'skeleton' ? scheme : scheme === 'dark' ? themeName + '-dark' : themeName,
-    Object.fromEntries(mappedThemeProperties),
-  ];
-}
-
-const themes = Object.fromEntries(
-  themeNames.flatMap((themeName) => {
-    return [processTheme(themeName, 'light'), processTheme(themeName, 'dark')];
-  })
-);
-
-const lightThemes = Object.keys(themes).filter((themeName) => !themeName.endsWith('dark'));
-const darkThemes = Object.keys(themes).filter((themeName) => themeName.endsWith('dark'));
-
-module.exports = { themes, lightThemes, darkThemes };
diff --git a/packages/svelte-ux/src/lib/styles/skeleton.ts b/packages/svelte-ux/src/lib/styles/skeleton.ts
index 1ab01365a..c7c6da5d8 100644
--- a/packages/svelte-ux/src/lib/styles/skeleton.ts
+++ b/packages/svelte-ux/src/lib/styles/skeleton.ts
@@ -1,3 +1,18 @@
+/*
+ * Use local copy of Skeleton themes/getThemeProperties() due to:
+ *   - Skeleton themse only available in `@skeletonlabs/tw-plugin` package, which
+ *     - Does not publish the `src` directly
+ *     - Requires the Node.js runtime (fs, path, tty, url, util)
+ *   - Cloudflare not support Node.js runtime (unless using `require('node:...'))
+ *     - https://developers.cloudflare.com/workers/runtime-apis/nodejs/
+ *     - Builds work on Vercel (since they support the Node.js runtime)
+ *   - See: https://github.com/techniq/svelte-ux/pull/192
+ */
+//
+// https://github.com/skeletonlabs/skeleton/blob/dev/packages/plugin/src/tailwind/themes/index.ts#L17-L19
+// import { getThemeProperties } from '@skeletonlabs/tw-plugin';
+import { getThemeProperties } from './skeleton/index';
+
 const themeNames = [
   'skeleton',
   'wintry',
@@ -8,11 +23,88 @@ const themeNames = [
   'sahara',
   'hamlindigo',
   'gold-nouveau',
-];
+] as const;
+
+// Map Skeleton to Svelte UX theme colors
+const skeletonColorMap = {
+  // Semantic
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'accent',
+  // '': 'neutral',
+  // State
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+  // Surface
+  surface: 'surface',
+};
+
+function processTheme(themeName: (typeof themeNames)[number], scheme: 'light' | 'dark') {
+  const properties = getThemeProperties(themeName);
+
+  let mappedThemeProperties = Object.entries(properties)
+    .map(([key, value]) => {
+      if (key.startsWith('--color')) {
+        // `--color-primary-500` => `primary-500`
+        // `--color-primary-500` => `primary`
+        const matches = key.match(/--color-(\w*)-([0-9]{3})/);
+        const skeletonColorName = matches?.[1];
+        const skeletonColorShade = matches?.[2];
+        const themeColorName = skeletonColorMap[skeletonColorName];
+        if (themeColorName) {
+          return [`${themeColorName}-${skeletonColorShade}`, `rgb(${value})`];
+        }
+      } else if (key.startsWith('--on-')) {
+        // `--on-primary` => `primary-content`
+        const matches = key.match(/--on-(\w*)/);
+        const skeletonColorName = matches?.[1];
+        const themeColorName = skeletonColorMap[skeletonColorName];
+        if (themeColorName) {
+          return [`${themeColorName}-content`, `rgb(${value})`];
+        }
+      } else {
+        // consider mapping additional 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',
+      }
+    })
+    .filter((d) => d);
+
+  mappedThemeProperties =
+    scheme === 'light'
+      ? [
+          ...mappedThemeProperties,
+          ['color-scheme', 'light'],
+          ['surface-100', `rgb(${properties['--color-surface-50']})`],
+          ['surface-200', `rgb(${properties['--color-surface-100']})`],
+          ['surface-300', `rgb(${properties['--color-surface-200']})`],
+          ['surface-content', `rgb(0 0 0)`],
+        ]
+      : [
+          ...mappedThemeProperties,
+          ['color-scheme', 'dark'],
+          ['surface-100', `rgb(${properties['--color-surface-700']})`],
+          ['surface-200', `rgb(${properties['--color-surface-800']})`],
+          ['surface-300', `rgb(${properties['--color-surface-900']})`],
+          ['surface-content', `rgb(255 255 255)`],
+        ];
+
+  return [
+    themeName === 'skeleton' ? scheme : scheme === 'dark' ? themeName + '-dark' : themeName,
+    Object.fromEntries(mappedThemeProperties),
+  ];
+}
 
-const lightThemes = themeNames.map((themeName) => (themeName === 'skeleton' ? 'light' : themeName));
-const darkThemes = themeNames.map((themeName) =>
-  themeName === 'skeleton' ? 'dark' : themeName + '-dark'
+const themes = Object.fromEntries(
+  themeNames.flatMap((themeName) => {
+    return [processTheme(themeName, 'light'), processTheme(themeName, 'dark')];
+  })
 );
 
-export { lightThemes, darkThemes };
+export { themes };
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/crimson.ts b/packages/svelte-ux/src/lib/styles/skeleton/crimson.ts
new file mode 100644
index 000000000..411459640
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/crimson.ts
@@ -0,0 +1,96 @@
+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'",
+    '--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',
+    '--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',
+    '--color-primary-50': '249 220 226',
+    '--color-primary-100': '246 208 216',
+    '--color-primary-200': '244 197 206',
+    '--color-primary-300': '238 162 177',
+    '--color-primary-400': '225 92 119',
+    '--color-primary-500': '212 22 60',
+    '--color-primary-600': '191 20 54',
+    '--color-primary-700': '159 17 45',
+    '--color-primary-800': '127 13 36',
+    '--color-primary-900': '104 11 29',
+    '--color-secondary-50': '227 237 243',
+    '--color-secondary-100': '218 231 239',
+    '--color-secondary-200': '209 225 235',
+    '--color-secondary-300': '181 206 223',
+    '--color-secondary-400': '126 170 199',
+    '--color-secondary-500': '70 133 175',
+    '--color-secondary-600': '63 120 158',
+    '--color-secondary-700': '53 100 131',
+    '--color-secondary-800': '42 80 105',
+    '--color-secondary-900': '34 65 86',
+    '--color-tertiary-50': '246 244 244',
+    '--color-tertiary-100': '242 240 240',
+    '--color-tertiary-200': '239 237 236',
+    '--color-tertiary-300': '230 226 225',
+    '--color-tertiary-400': '211 204 203',
+    '--color-tertiary-500': '192 182 180',
+    '--color-tertiary-600': '173 164 162',
+    '--color-tertiary-700': '144 137 135',
+    '--color-tertiary-800': '115 109 108',
+    '--color-tertiary-900': '94 89 88',
+    '--color-success-50': '246 250 239',
+    '--color-success-100': '243 248 234',
+    '--color-success-200': '240 247 229',
+    '--color-success-300': '230 241 213',
+    '--color-success-400': '212 231 182',
+    '--color-success-500': '193 221 151',
+    '--color-success-600': '174 199 136',
+    '--color-success-700': '145 166 113',
+    '--color-success-800': '116 133 91',
+    '--color-success-900': '95 108 74',
+    '--color-warning-50': '251 246 231',
+    '--color-warning-100': '250 243 223',
+    '--color-warning-200': '248 240 215',
+    '--color-warning-300': '244 231 191',
+    '--color-warning-400': '236 212 142',
+    '--color-warning-500': '228 194 94',
+    '--color-warning-600': '205 175 85',
+    '--color-warning-700': '171 146 71',
+    '--color-warning-800': '137 116 56',
+    '--color-warning-900': '112 95 46',
+    '--color-error-50': '248 236 236',
+    '--color-error-100': '246 229 230',
+    '--color-error-200': '244 223 224',
+    '--color-error-300': '237 204 205',
+    '--color-error-400': '224 165 167',
+    '--color-error-500': '210 127 129',
+    '--color-error-600': '189 114 116',
+    '--color-error-700': '158 95 97',
+    '--color-error-800': '126 76 77',
+    '--color-error-900': '103 62 63',
+    '--color-surface-50': '223 224 226',
+    '--color-surface-100': '213 213 217',
+    '--color-surface-200': '202 203 207',
+    '--color-surface-300': '170 171 179',
+    '--color-surface-400': '107 109 121',
+    '--color-surface-500': '43 46 64',
+    '--color-surface-600': '39 41 58',
+    '--color-surface-700': '32 35 48',
+    '--color-surface-800': '26 28 38',
+    '--color-surface-900': '21 23 31',
+  },
+  properties_dark: {},
+  enhancements: {},
+} satisfies PresetTheme;
+
+export default crimson;
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/gold-nouveau.ts b/packages/svelte-ux/src/lib/styles/skeleton/gold-nouveau.ts
new file mode 100644
index 000000000..42ac99259
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/gold-nouveau.ts
@@ -0,0 +1,118 @@
+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",
+    '--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',
+    '--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': '250 248 252',
+    '--color-primary-100': '242 238 247',
+    '--color-primary-200': '229 220 239',
+    '--color-primary-300': '209 192 226',
+    '--color-primary-400': '162 129 197',
+    '--color-primary-500': '116 74 161',
+    '--color-primary-600': '83 53 115',
+    '--color-primary-700': '60 39 84',
+    '--color-primary-800': '35 22 49',
+    '--color-primary-900': '18 11 24',
+    '--color-secondary-50': '218 234 251',
+    '--color-secondary-100': '205 227 250',
+    '--color-secondary-200': '193 220 249',
+    '--color-secondary-300': '155 199 245',
+    '--color-secondary-400': '81 156 237',
+    '--color-secondary-500': '6 114 229',
+    '--color-secondary-600': '5 103 206',
+    '--color-secondary-700': '5 86 172',
+    '--color-secondary-800': '4 68 137',
+    '--color-secondary-900': '3 56 112',
+    '--color-tertiary-50': '236 235 250',
+    '--color-tertiary-100': '229 228 248',
+    '--color-tertiary-200': '223 221 247',
+    '--color-tertiary-300': '204 201 241',
+    '--color-tertiary-400': '165 161 231',
+    '--color-tertiary-500': '127 120 221',
+    '--color-tertiary-600': '114 108 199',
+    '--color-tertiary-700': '95 90 166',
+    '--color-tertiary-800': '76 72 133',
+    '--color-tertiary-900': '62 59 108',
+    '--color-success-50': '234 246 237',
+    '--color-success-100': '227 243 231',
+    '--color-success-200': '220 241 225',
+    '--color-success-300': '199 232 206',
+    '--color-success-400': '156 214 170',
+    '--color-success-500': '114 197 133',
+    '--color-success-600': '103 177 120',
+    '--color-success-700': '86 148 100',
+    '--color-success-800': '68 118 80',
+    '--color-success-900': '56 97 65',
+    '--color-warning-50': '251 236 218',
+    '--color-warning-100': '250 229 206',
+    '--color-warning-200': '249 223 193',
+    '--color-warning-300': '245 204 156',
+    '--color-warning-400': '238 165 82',
+    '--color-warning-500': '231 127 8',
+    '--color-warning-600': '208 114 7',
+    '--color-warning-700': '173 95 6',
+    '--color-warning-800': '139 76 5',
+    '--color-warning-900': '113 62 4',
+    '--color-error-50': '238 219 222',
+    '--color-error-100': '233 207 211',
+    '--color-error-200': '227 195 200',
+    '--color-error-300': '210 159 167',
+    '--color-error-400': '177 87 100',
+    '--color-error-500': '143 15 34',
+    '--color-error-600': '129 14 31',
+    '--color-error-700': '107 11 26',
+    '--color-error-800': '86 9 20',
+    '--color-error-900': '70 7 17',
+    '--color-surface-50': '250 248 252',
+    '--color-surface-100': '242 238 247',
+    '--color-surface-200': '229 220 239',
+    '--color-surface-300': '209 192 226',
+    '--color-surface-400': '162 129 197',
+    '--color-surface-500': '116 74 161',
+    '--color-surface-600': '83 53 115',
+    '--color-surface-700': '60 39 84',
+    '--color-surface-800': '35 22 49',
+    '--color-surface-900': '18 11 24',
+  },
+  properties_dark: {
+    '--on-primary': '0 0 0',
+    '--color-primary-50': '251 247 224',
+    '--color-primary-100': '250 244 214',
+    '--color-primary-200': '249 241 204',
+    '--color-primary-300': '245 233 173',
+    '--color-primary-400': '238 217 112',
+    '--color-primary-500': '230 200 51',
+    '--color-primary-600': '207 180 46',
+    '--color-primary-700': '173 150 38',
+    '--color-primary-800': '138 120 31',
+    '--color-primary-900': '113 98 25',
+  },
+  enhancements: {
+    "[data-theme='gold-nouveau'] h1,\n[data-theme='gold-nouveau'] h2,\n[data-theme='gold-nouveau'] h3,\n[data-theme='gold-nouveau'] h4,\n[data-theme='gold-nouveau'] h5,\n[data-theme='gold-nouveau'] h6":
+      { fontWeight: 'bold' },
+    "[data-theme='gold-nouveau']": {
+      backgroundImage:
+        'radial-gradient(at 0% 100%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),\n\t\tradial-gradient(at 98% 100%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+  },
+} satisfies PresetTheme;
+
+export default goldNouveau;
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/hamlindigo.ts b/packages/svelte-ux/src/lib/styles/skeleton/hamlindigo.ts
new file mode 100644
index 000000000..6272a6cad
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/hamlindigo.ts
@@ -0,0 +1,105 @@
+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'",
+    '--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',
+    '--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',
+    '--color-primary-50': '242 245 253',
+    '--color-primary-100': '238 242 252',
+    '--color-primary-200': '233 239 252',
+    '--color-primary-300': '220 229 249',
+    '--color-primary-400': '194 210 245',
+    '--color-primary-500': '168 190 241',
+    '--color-primary-600': '151 171 217',
+    '--color-primary-700': '126 143 181',
+    '--color-primary-800': '101 114 145',
+    '--color-primary-900': '82 93 118',
+    '--color-secondary-50': '241 238 230',
+    '--color-secondary-100': '237 232 222',
+    '--color-secondary-200': '232 227 214',
+    '--color-secondary-300': '219 210 189',
+    '--color-secondary-400': '191 176 140',
+    '--color-secondary-500': '164 142 91',
+    '--color-secondary-600': '148 128 82',
+    '--color-secondary-700': '123 107 68',
+    '--color-secondary-800': '98 85 55',
+    '--color-secondary-900': '80 70 45',
+    '--color-tertiary-50': '231 239 241',
+    '--color-tertiary-100': '223 234 237',
+    '--color-tertiary-200': '216 229 232',
+    '--color-tertiary-300': '192 213 218',
+    '--color-tertiary-400': '144 182 191',
+    '--color-tertiary-500': '97 151 163',
+    '--color-tertiary-600': '87 136 147',
+    '--color-tertiary-700': '73 113 122',
+    '--color-tertiary-800': '58 91 98',
+    '--color-tertiary-900': '48 74 80',
+    '--color-success-50': '227 239 236',
+    '--color-success-100': '218 234 229',
+    '--color-success-200': '209 228 223',
+    '--color-success-300': '181 212 203',
+    '--color-success-400': '126 180 164',
+    '--color-success-500': '71 148 125',
+    '--color-success-600': '64 133 113',
+    '--color-success-700': '53 111 94',
+    '--color-success-800': '43 89 75',
+    '--color-success-900': '35 73 61',
+    '--color-warning-50': '249 242 226',
+    '--color-warning-100': '248 238 216',
+    '--color-warning-200': '246 234 207',
+    '--color-warning-300': '240 221 178',
+    '--color-warning-400': '229 195 120',
+    '--color-warning-500': '218 169 62',
+    '--color-warning-600': '196 152 56',
+    '--color-warning-700': '164 127 47',
+    '--color-warning-800': '131 101 37',
+    '--color-warning-900': '107 83 30',
+    '--color-error-50': '241 231 234',
+    '--color-error-100': '236 223 227',
+    '--color-error-200': '232 216 221',
+    '--color-error-300': '218 192 200',
+    '--color-error-400': '190 144 158',
+    '--color-error-500': '162 97 117',
+    '--color-error-600': '146 87 105',
+    '--color-error-700': '122 73 88',
+    '--color-error-800': '97 58 70',
+    '--color-error-900': '79 48 57',
+    '--color-surface-50': '232 234 241',
+    '--color-surface-100': '224 228 237',
+    '--color-surface-200': '216 221 232',
+    '--color-surface-300': '193 200 218',
+    '--color-surface-400': '146 159 191',
+    '--color-surface-500': '99 118 163',
+    '--color-surface-600': '89 106 147',
+    '--color-surface-700': '74 89 122',
+    '--color-surface-800': '59 71 98',
+    '--color-surface-900': '49 58 80',
+  },
+  properties_dark: {},
+  enhancements: {
+    "[data-theme='hamlindigo']": {
+      backgroundImage:
+        "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']": {
+      backgroundImage:
+        "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 PresetTheme;
+
+export default hamlindigo;
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/index.ts b/packages/svelte-ux/src/lib/styles/skeleton/index.ts
new file mode 100644
index 000000000..81a1f9f4b
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/index.ts
@@ -0,0 +1,143 @@
+import crimson from './crimson';
+import goldNouveau from './gold-nouveau';
+import hamlindigo from './hamlindigo';
+import modern from './modern';
+import rocket from './rocket';
+import sahara from './sahara';
+import seafoam from './seafoam';
+import skeleton from './skeleton';
+import vintage from './vintage';
+import wintry from './wintry';
+import type { CSSRuleObject } from 'tailwindcss/types/config.js';
+
+export const themes = {
+  crimson,
+  'gold-nouveau': goldNouveau,
+  hamlindigo,
+  modern,
+  rocket,
+  sahara,
+  seafoam,
+  skeleton,
+  vintage,
+  wintry,
+};
+
+export type PresetThemeName = ObjectKeys<typeof themes>;
+
+export function getThemeProperties(themeName: PresetThemeName) {
+  return themes[themeName].properties;
+}
+
+export type ObjectValues<T> = T[keyof T];
+export type ObjectKeys<T> = keyof T;
+
+/* Allows for arbitrary properties to be defined */
+type ArbitraryProps = Record<string, string>;
+
+export type BaseTheme = {
+  name: string;
+  properties: ThemeProperties & ArbitraryProps;
+  properties_dark: Partial<ThemeProperties & ArbitraryProps>;
+};
+
+export type PresetTheme = BaseTheme & {
+  enhancements: CSSRuleObject;
+};
+
+export type ThemeProperties = {
+  /* =~= Theme Properties =~= */
+  '--theme-font-family-base': string;
+  '--theme-font-family-heading': string;
+  '--theme-font-color-base': string;
+  '--theme-font-color-dark': string;
+  '--theme-rounded-base': string;
+  '--theme-rounded-container': string;
+  '--theme-border-base': string;
+  /* =~= Theme On-X Colors =~= */
+  '--on-primary': string;
+  '--on-secondary': string;
+  '--on-tertiary': string;
+  '--on-success': string;
+  '--on-warning': string;
+  '--on-error': string;
+  '--on-surface': string;
+  /* =~= Theme Colors  =~= */
+  /* primary */
+  '--color-primary-50': string;
+  '--color-primary-100': string;
+  '--color-primary-200': string;
+  '--color-primary-300': string;
+  '--color-primary-400': string;
+  '--color-primary-500': string;
+  '--color-primary-600': string;
+  '--color-primary-700': string;
+  '--color-primary-800': string;
+  '--color-primary-900': string;
+  /* secondary */
+  '--color-secondary-50': string;
+  '--color-secondary-100': string;
+  '--color-secondary-200': string;
+  '--color-secondary-300': string;
+  '--color-secondary-400': string;
+  '--color-secondary-500': string;
+  '--color-secondary-600': string;
+  '--color-secondary-700': string;
+  '--color-secondary-800': string;
+  '--color-secondary-900': string;
+  /* tertiary */
+  '--color-tertiary-50': string;
+  '--color-tertiary-100': string;
+  '--color-tertiary-200': string;
+  '--color-tertiary-300': string;
+  '--color-tertiary-400': string;
+  '--color-tertiary-500': string;
+  '--color-tertiary-600': string;
+  '--color-tertiary-700': string;
+  '--color-tertiary-800': string;
+  '--color-tertiary-900': string;
+  /* success */
+  '--color-success-50': string;
+  '--color-success-100': string;
+  '--color-success-200': string;
+  '--color-success-300': string;
+  '--color-success-400': string;
+  '--color-success-500': string;
+  '--color-success-600': string;
+  '--color-success-700': string;
+  '--color-success-800': string;
+  '--color-success-900': string;
+  /* warning */
+  '--color-warning-50': string;
+  '--color-warning-100': string;
+  '--color-warning-200': string;
+  '--color-warning-300': string;
+  '--color-warning-400': string;
+  '--color-warning-500': string;
+  '--color-warning-600': string;
+  '--color-warning-700': string;
+  '--color-warning-800': string;
+  '--color-warning-900': string;
+  /* error */
+  '--color-error-50': string;
+  '--color-error-100': string;
+  '--color-error-200': string;
+  '--color-error-300': string;
+  '--color-error-400': string;
+  '--color-error-500': string;
+  '--color-error-600': string;
+  '--color-error-700': string;
+  '--color-error-800': string;
+  '--color-error-900': string;
+  /* surface */
+  '--color-surface-50': string;
+  '--color-surface-100': string;
+  '--color-surface-200': string;
+  '--color-surface-300': string;
+  '--color-surface-400': string;
+  '--color-surface-500': string;
+  '--color-surface-600': string;
+  '--color-surface-700': string;
+  '--color-surface-800': string;
+  '--color-surface-900': string;
+};
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/modern.ts b/packages/svelte-ux/src/lib/styles/skeleton/modern.ts
new file mode 100644
index 000000000..71a4448a0
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/modern.ts
@@ -0,0 +1,114 @@
+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",
+    '--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',
+    '--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',
+    '--color-primary-50': '252 228 240',
+    '--color-primary-100': '251 218 235',
+    '--color-primary-200': '250 209 230',
+    '--color-primary-300': '247 182 214',
+    '--color-primary-400': '242 127 184',
+    '--color-primary-500': '236 72 153',
+    '--color-primary-600': '212 65 138',
+    '--color-primary-700': '177 54 115',
+    '--color-primary-800': '142 43 92',
+    '--color-primary-900': '116 35 75',
+    '--color-secondary-50': '218 244 249',
+    '--color-secondary-100': '205 240 246',
+    '--color-secondary-200': '193 237 244',
+    '--color-secondary-300': '155 226 238',
+    '--color-secondary-400': '81 204 225',
+    '--color-secondary-500': '6 182 212',
+    '--color-secondary-600': '5 164 191',
+    '--color-secondary-700': '5 137 159',
+    '--color-secondary-800': '4 109 127',
+    '--color-secondary-900': '3 89 104',
+    '--color-tertiary-50': '220 244 242',
+    '--color-tertiary-100': '208 241 237',
+    '--color-tertiary-200': '196 237 233',
+    '--color-tertiary-300': '161 227 219',
+    '--color-tertiary-400': '91 205 193',
+    '--color-tertiary-500': '20 184 166',
+    '--color-tertiary-600': '18 166 149',
+    '--color-tertiary-700': '15 138 125',
+    '--color-tertiary-800': '12 110 100',
+    '--color-tertiary-900': '10 90 81',
+    '--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': '253 227 227',
+    '--color-error-100': '252 218 218',
+    '--color-error-200': '251 208 208',
+    '--color-error-300': '249 180 180',
+    '--color-error-400': '244 124 124',
+    '--color-error-500': '239 68 68',
+    '--color-error-600': '215 61 61',
+    '--color-error-700': '179 51 51',
+    '--color-error-800': '143 41 41',
+    '--color-error-900': '117 33 33',
+    '--color-surface-50': '232 232 253',
+    '--color-surface-100': '224 224 252',
+    '--color-surface-200': '216 217 252',
+    '--color-surface-300': '193 194 249',
+    '--color-surface-400': '146 148 245',
+    '--color-surface-500': '99 102 241',
+    '--color-surface-600': '89 92 217',
+    '--color-surface-700': '74 77 181',
+    '--color-surface-800': '59 61 145',
+    '--color-surface-900': '49 50 118',
+  },
+  properties_dark: {},
+  enhancements: {
+    "[data-theme='modern'] h1,\n[data-theme='modern'] h2,\n[data-theme='modern'] h3,\n[data-theme='modern'] h4,\n[data-theme='modern'] h5,\n[data-theme='modern'] h6,\n[data-theme='modern'] a,\n[data-theme='modern'] button":
+      { fontWeight: 'bold' },
+    "[data-theme='modern']": {
+      backgroundImage:
+        'radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%),\n\t\tradial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%),\n\t\tradial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+    ".dark [data-theme='modern']": {
+      backgroundImage:
+        'radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%),\n\t\tradial-gradient(at 1% 0%, hsla(340,100%,76%,0.15) 0px, transparent 50%),\n\t\tradial-gradient(at 20% 100%, hsla(241,100%,70%,0.30) 0px, transparent 50%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+  },
+} satisfies PresetTheme;
+
+export default modern;
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/rocket.ts b/packages/svelte-ux/src/lib/styles/skeleton/rocket.ts
new file mode 100644
index 000000000..27fcef659
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/rocket.ts
@@ -0,0 +1,106 @@
+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",
+    '--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',
+    '--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',
+    '--color-primary-50': '218 244 249',
+    '--color-primary-100': '205 240 246',
+    '--color-primary-200': '193 237 244',
+    '--color-primary-300': '155 226 238',
+    '--color-primary-400': '81 204 225',
+    '--color-primary-500': '6 182 212',
+    '--color-primary-600': '5 164 191',
+    '--color-primary-700': '5 137 159',
+    '--color-primary-800': '4 109 127',
+    '--color-primary-900': '3 89 104',
+    '--color-secondary-50': '226 236 254',
+    '--color-secondary-100': '216 230 253',
+    '--color-secondary-200': '206 224 253',
+    '--color-secondary-300': '177 205 251',
+    '--color-secondary-400': '118 168 249',
+    '--color-secondary-500': '59 130 246',
+    '--color-secondary-600': '53 117 221',
+    '--color-secondary-700': '44 98 185',
+    '--color-secondary-800': '35 78 148',
+    '--color-secondary-900': '29 64 121',
+    '--color-tertiary-50': '242 230 254',
+    '--color-tertiary-100': '238 221 253',
+    '--color-tertiary-200': '233 213 253',
+    '--color-tertiary-300': '220 187 252',
+    '--color-tertiary-400': '194 136 249',
+    '--color-tertiary-500': '168 85 247',
+    '--color-tertiary-600': '151 77 222',
+    '--color-tertiary-700': '126 64 185',
+    '--color-tertiary-800': '101 51 148',
+    '--color-tertiary-900': '82 42 121',
+    '--color-success-50': '228 247 220',
+    '--color-success-100': '219 245 208',
+    '--color-success-200': '210 242 197',
+    '--color-success-300': '183 234 161',
+    '--color-success-400': '130 219 91',
+    '--color-success-500': '76 203 21',
+    '--color-success-600': '68 183 19',
+    '--color-success-700': '57 152 16',
+    '--color-success-800': '46 122 13',
+    '--color-success-900': '37 99 10',
+    '--color-warning-50': '253 246 223',
+    '--color-warning-100': '253 243 212',
+    '--color-warning-200': '252 240 202',
+    '--color-warning-300': '251 230 170',
+    '--color-warning-400': '247 212 106',
+    '--color-warning-500': '244 193 42',
+    '--color-warning-600': '220 174 38',
+    '--color-warning-700': '183 145 32',
+    '--color-warning-800': '146 116 25',
+    '--color-warning-900': '120 95 21',
+    '--color-error-50': '244 223 230',
+    '--color-error-100': '240 213 221',
+    '--color-error-200': '237 202 213',
+    '--color-error-300': '225 171 187',
+    '--color-error-400': '203 107 136',
+    '--color-error-500': '181 44 85',
+    '--color-error-600': '163 40 77',
+    '--color-error-700': '136 33 64',
+    '--color-error-800': '109 26 51',
+    '--color-error-900': '89 22 42',
+    '--color-surface-50': '232 234 238',
+    '--color-surface-100': '224 227 232',
+    '--color-surface-200': '216 220 226',
+    '--color-surface-300': '193 199 209',
+    '--color-surface-400': '147 158 174',
+    '--color-surface-500': '100 116 139',
+    '--color-surface-600': '90 104 125',
+    '--color-surface-700': '75 87 104',
+    '--color-surface-800': '60 70 83',
+    '--color-surface-900': '49 57 68',
+  },
+  properties_dark: {},
+  enhancements: {
+    "[data-theme='rocket'] h1,\n[data-theme='rocket'] h2,\n[data-theme='rocket'] h3,\n[data-theme='rocket'] h4,\n[data-theme='rocket'] h5,\n[data-theme='rocket'] h6":
+      { fontWeight: 'bold' },
+    "[data-theme='rocket']": {
+      backgroundImage:
+        'radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),\n\t\t\tradial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+  },
+} satisfies PresetTheme;
+
+export default rocket;
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/sahara.ts b/packages/svelte-ux/src/lib/styles/skeleton/sahara.ts
new file mode 100644
index 000000000..5599229c0
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/sahara.ts
@@ -0,0 +1,117 @@
+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'",
+    '--theme-font-family-heading':
+      "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n\t\tArial, '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',
+    '--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',
+    '--color-primary-50': '252 242 225',
+    '--color-primary-100': '251 238 215',
+    '--color-primary-200': '250 234 205',
+    '--color-primary-300': '247 221 175',
+    '--color-primary-400': '242 196 114',
+    '--color-primary-500': '236 170 54',
+    '--color-primary-600': '212 153 49',
+    '--color-primary-700': '177 128 41',
+    '--color-primary-800': '142 102 32',
+    '--color-primary-900': '116 83 26',
+    '--color-secondary-50': '225 247 245',
+    '--color-secondary-100': '216 245 241',
+    '--color-secondary-200': '206 242 238',
+    '--color-secondary-300': '176 234 227',
+    '--color-secondary-400': '117 219 207',
+    '--color-secondary-500': '58 203 186',
+    '--color-secondary-600': '52 183 167',
+    '--color-secondary-700': '44 152 140',
+    '--color-secondary-800': '35 122 112',
+    '--color-secondary-900': '28 99 91',
+    '--color-tertiary-50': '245 250 237',
+    '--color-tertiary-100': '241 249 231',
+    '--color-tertiary-200': '238 247 225',
+    '--color-tertiary-300': '228 242 207',
+    '--color-tertiary-400': '207 233 170',
+    '--color-tertiary-500': '187 223 134',
+    '--color-tertiary-600': '168 201 121',
+    '--color-tertiary-700': '140 167 101',
+    '--color-tertiary-800': '112 134 80',
+    '--color-tertiary-900': '92 109 66',
+    '--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': '251 246 230',
+    '--color-warning-100': '250 243 221',
+    '--color-warning-200': '249 240 213',
+    '--color-warning-300': '245 230 188',
+    '--color-warning-400': '237 212 137',
+    '--color-warning-500': '229 193 87',
+    '--color-warning-600': '206 174 78',
+    '--color-warning-700': '172 145 65',
+    '--color-warning-800': '137 116 52',
+    '--color-warning-900': '112 95 43',
+    '--color-error-50': '250 231 240',
+    '--color-error-100': '248 222 235',
+    '--color-error-200': '246 214 230',
+    '--color-error-300': '241 190 215',
+    '--color-error-400': '230 141 186',
+    '--color-error-500': '219 92 156',
+    '--color-error-600': '197 83 140',
+    '--color-error-700': '164 69 117',
+    '--color-error-800': '131 55 94',
+    '--color-error-900': '107 45 76',
+    '--color-surface-50': '249 228 232',
+    '--color-surface-100': '248 220 224',
+    '--color-surface-200': '246 211 217',
+    '--color-surface-300': '240 184 193',
+    '--color-surface-400': '229 131 147',
+    '--color-surface-500': '218 78 101',
+    '--color-surface-600': '196 70 91',
+    '--color-surface-700': '164 59 76',
+    '--color-surface-800': '131 47 61',
+    '--color-surface-900': '107 38 49',
+  },
+  properties_dark: {},
+  enhancements: {
+    "[data-theme='sahara'] h1,\n[data-theme='sahara'] h2,\n[data-theme='sahara'] h3,\n[data-theme='sahara'] h4,\n[data-theme='sahara'] h5,\n[data-theme='sahara'] h6":
+      { fontWeight: '600' },
+    "[data-theme='sahara'] p": { fontWeight: '400' },
+    "[data-theme='sahara']": {
+      backgroundImage:
+        'radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),\n\t\tradial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+    ".dark [data-theme='sahara']": {
+      backgroundImage:
+        'radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),\n\t\tradial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+  },
+} satisfies PresetTheme;
+
+export default sahara;
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/seafoam.ts b/packages/svelte-ux/src/lib/styles/skeleton/seafoam.ts
new file mode 100644
index 000000000..1ab017156
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/seafoam.ts
@@ -0,0 +1,114 @@
+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'",
+    '--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',
+    '--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',
+    '--color-primary-50': '237 248 247',
+    '--color-primary-100': '231 246 245',
+    '--color-primary-200': '225 243 242',
+    '--color-primary-300': '207 236 234',
+    '--color-primary-400': '170 222 219',
+    '--color-primary-500': '134 208 203',
+    '--color-primary-600': '121 187 183',
+    '--color-primary-700': '101 156 152',
+    '--color-primary-800': '80 125 122',
+    '--color-primary-900': '66 102 99',
+    '--color-secondary-50': '222 224 230',
+    '--color-secondary-100': '211 214 221',
+    '--color-secondary-200': '200 204 213',
+    '--color-secondary-300': '166 173 187',
+    '--color-secondary-400': '100 112 136',
+    '--color-secondary-500': '33 51 85',
+    '--color-secondary-600': '30 46 77',
+    '--color-secondary-700': '25 38 64',
+    '--color-secondary-800': '20 31 51',
+    '--color-secondary-900': '16 25 42',
+    '--color-tertiary-50': '255 226 217',
+    '--color-tertiary-100': '255 216 204',
+    '--color-tertiary-200': '255 207 191',
+    '--color-tertiary-300': '255 177 153',
+    '--color-tertiary-400': '255 119 77',
+    '--color-tertiary-500': '255 61 0',
+    '--color-tertiary-600': '230 55 0',
+    '--color-tertiary-700': '191 46 0',
+    '--color-tertiary-800': '153 37 0',
+    '--color-tertiary-900': '125 30 0',
+    '--color-success-50': '218 251 241',
+    '--color-success-100': '205 250 236',
+    '--color-success-200': '193 249 232',
+    '--color-success-300': '155 245 218',
+    '--color-success-400': '81 237 190',
+    '--color-success-500': '6 229 162',
+    '--color-success-600': '5 206 146',
+    '--color-success-700': '5 172 122',
+    '--color-success-800': '4 137 97',
+    '--color-success-900': '3 112 79',
+    '--color-warning-50': '252 251 230',
+    '--color-warning-100': '251 250 221',
+    '--color-warning-200': '250 249 213',
+    '--color-warning-300': '247 245 188',
+    '--color-warning-400': '240 237 137',
+    '--color-warning-500': '234 229 87',
+    '--color-warning-600': '211 206 78',
+    '--color-warning-700': '176 172 65',
+    '--color-warning-800': '140 137 52',
+    '--color-warning-900': '115 112 43',
+    '--color-error-50': '248 227 227',
+    '--color-error-100': '246 218 218',
+    '--color-error-200': '244 209 209',
+    '--color-error-300': '237 181 181',
+    '--color-error-400': '224 126 126',
+    '--color-error-500': '210 70 70',
+    '--color-error-600': '189 63 63',
+    '--color-error-700': '158 53 53',
+    '--color-error-800': '126 42 42',
+    '--color-error-900': '103 34 34',
+    '--color-surface-50': '222 248 249',
+    '--color-surface-100': '211 246 246',
+    '--color-surface-200': '201 244 244',
+    '--color-surface-300': '168 237 238',
+    '--color-surface-400': '102 223 225',
+    '--color-surface-500': '37 209 212',
+    '--color-surface-600': '33 188 191',
+    '--color-surface-700': '28 157 159',
+    '--color-surface-800': '22 125 127',
+    '--color-surface-900': '18 102 104',
+  },
+  properties_dark: {},
+  enhancements: {
+    "[data-theme='seafoam'] h1,\n[data-theme='seafoam'] h2,\n[data-theme='seafoam'] h3,\n[data-theme='seafoam'] h4,\n[data-theme='seafoam'] h5,\n[data-theme='seafoam'] h6":
+      { fontWeight: 'bold', fontStyle: 'italic', letterSpacing: '1px' },
+    "[data-theme='seafoam']": {
+      background:
+        'linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+    ".dark [data-theme='seafoam']": {
+      background: 'linear-gradient(0deg, rgba(33, 50, 83, 1) 0%, rgba(8, 132, 124, 1) 100%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+  },
+} satisfies PresetTheme;
+
+export default seafoam;
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/skeleton.ts b/packages/svelte-ux/src/lib/styles/skeleton/skeleton.ts
new file mode 100644
index 000000000..039111528
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/skeleton.ts
@@ -0,0 +1,106 @@
+import type { PresetTheme } from './index.js';
+
+const skeleton = {
+  name: 'skeleton',
+  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',
+    '--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',
+    '--color-primary-50': '219 245 236',
+    '--color-primary-100': '207 241 230',
+    '--color-primary-200': '195 238 224',
+    '--color-primary-300': '159 227 205',
+    '--color-primary-400': '87 207 167',
+    '--color-primary-500': '15 186 129',
+    '--color-primary-600': '14 167 116',
+    '--color-primary-700': '11 140 97',
+    '--color-primary-800': '9 112 77',
+    '--color-primary-900': '7 91 63',
+    '--color-secondary-50': '229 227 251',
+    '--color-secondary-100': '220 218 250',
+    '--color-secondary-200': '211 209 249',
+    '--color-secondary-300': '185 181 245',
+    '--color-secondary-400': '132 126 237',
+    '--color-secondary-500': '79 70 229',
+    '--color-secondary-600': '71 63 206',
+    '--color-secondary-700': '59 53 172',
+    '--color-secondary-800': '47 42 137',
+    '--color-secondary-900': '39 34 112',
+    '--color-tertiary-50': '219 242 252',
+    '--color-tertiary-100': '207 237 251',
+    '--color-tertiary-200': '195 233 250',
+    '--color-tertiary-300': '159 219 246',
+    '--color-tertiary-400': '86 192 240',
+    '--color-tertiary-500': '14 165 233',
+    '--color-tertiary-600': '13 149 210',
+    '--color-tertiary-700': '11 124 175',
+    '--color-tertiary-800': '8 99 140',
+    '--color-tertiary-900': '7 81 114',
+    '--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': '228 230 238',
+    '--color-surface-100': '219 222 233',
+    '--color-surface-200': '210 214 227',
+    '--color-surface-300': '182 189 210',
+    '--color-surface-400': '128 140 177',
+    '--color-surface-500': '73 90 143',
+    '--color-surface-600': '66 81 129',
+    '--color-surface-700': '55 68 107',
+    '--color-surface-800': '44 54 86',
+    '--color-surface-900': '36 44 70',
+  },
+  properties_dark: {},
+  enhancements: {
+    "[data-theme='skeleton'] h1,\n[data-theme='skeleton'] h2,\n[data-theme='skeleton'] h3,\n[data-theme='skeleton'] h4,\n[data-theme='skeleton'] h5,\n[data-theme='skeleton'] h6":
+      { fontWeight: 'bold' },
+    "[data-theme='skeleton']": {
+      backgroundImage:
+        'radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),\n\t\t\tradial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+  },
+} satisfies PresetTheme;
+
+export default skeleton;
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/vintage.ts b/packages/svelte-ux/src/lib/styles/skeleton/vintage.ts
new file mode 100644
index 000000000..36d8dd53b
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/vintage.ts
@@ -0,0 +1,115 @@
+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'",
+    '--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',
+    '--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',
+    '--color-primary-50': '252 237 221',
+    '--color-primary-100': '251 231 209',
+    '--color-primary-200': '250 225 198',
+    '--color-primary-300': '247 207 163',
+    '--color-primary-400': '240 170 95',
+    '--color-primary-500': '234 134 26',
+    '--color-primary-600': '211 121 23',
+    '--color-primary-700': '176 101 20',
+    '--color-primary-800': '140 80 16',
+    '--color-primary-900': '115 66 13',
+    '--color-secondary-50': '239 248 242',
+    '--color-secondary-100': '234 245 237',
+    '--color-secondary-200': '229 243 233',
+    '--color-secondary-300': '213 235 219',
+    '--color-secondary-400': '182 221 192',
+    '--color-secondary-500': '151 206 165',
+    '--color-secondary-600': '136 185 149',
+    '--color-secondary-700': '113 155 124',
+    '--color-secondary-800': '91 124 99',
+    '--color-secondary-900': '74 101 81',
+    '--color-tertiary-50': '218 244 249',
+    '--color-tertiary-100': '205 240 246',
+    '--color-tertiary-200': '193 237 244',
+    '--color-tertiary-300': '155 226 238',
+    '--color-tertiary-400': '81 204 225',
+    '--color-tertiary-500': '6 182 212',
+    '--color-tertiary-600': '5 164 191',
+    '--color-tertiary-700': '5 137 159',
+    '--color-tertiary-800': '4 109 127',
+    '--color-tertiary-900': '3 89 104',
+    '--color-success-50': '237 247 231',
+    '--color-success-100': '230 245 223',
+    '--color-success-200': '224 242 215',
+    '--color-success-300': '206 234 190',
+    '--color-success-400': '169 219 142',
+    '--color-success-500': '132 203 93',
+    '--color-success-600': '119 183 84',
+    '--color-success-700': '99 152 70',
+    '--color-success-800': '79 122 56',
+    '--color-success-900': '65 99 46',
+    '--color-warning-50': '253 243 222',
+    '--color-warning-100': '252 238 211',
+    '--color-warning-200': '252 234 200',
+    '--color-warning-300': '250 222 167',
+    '--color-warning-400': '246 197 101',
+    '--color-warning-500': '242 172 35',
+    '--color-warning-600': '218 155 32',
+    '--color-warning-700': '182 129 26',
+    '--color-warning-800': '145 103 21',
+    '--color-warning-900': '119 84 17',
+    '--color-error-50': '249 236 235',
+    '--color-error-100': '247 229 228',
+    '--color-error-200': '245 223 221',
+    '--color-error-300': '238 203 201',
+    '--color-error-400': '226 165 161',
+    '--color-error-500': '213 126 120',
+    '--color-error-600': '192 113 108',
+    '--color-error-700': '160 95 90',
+    '--color-error-800': '128 76 72',
+    '--color-error-900': '104 62 59',
+    '--color-surface-50': '226 225 224',
+    '--color-surface-100': '217 215 214',
+    '--color-surface-200': '207 205 204',
+    '--color-surface-300': '178 175 173',
+    '--color-surface-400': '121 115 111',
+    '--color-surface-500': '63 55 49',
+    '--color-surface-600': '57 50 44',
+    '--color-surface-700': '47 41 37',
+    '--color-surface-800': '38 33 29',
+    '--color-surface-900': '31 27 24',
+  },
+  properties_dark: {},
+  enhancements: {
+    "[data-theme='vintage'] h1,\n[data-theme='vintage'] h2,\n[data-theme='vintage'] h3,\n[data-theme='vintage'] h4,\n[data-theme='vintage'] h5,\n[data-theme='vintage'] h6":
+      { letterSpacing: '1px' },
+    "[data-theme='vintage']": {
+      backgroundImage:
+        'radial-gradient(at 100% 0%, hsla(135,34%,70%,0.20) 0px, transparent 50%),\n\t\tradial-gradient(at 85% 100%, hsla(31,83%,50%,0.20) 0px, transparent 50%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+    ".dark [data-theme='vintage']": {
+      backgroundImage:
+        'radial-gradient(at 100% 0%, hsla(135,34%,70%,0.14) 0px, transparent 50%),\n\t\tradial-gradient(at 85% 100%, hsla(31,83%,50%,0.14) 0px, transparent 50%)',
+      backgroundAttachment: 'fixed',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+    },
+  },
+} satisfies PresetTheme;
+
+export default vintage;
diff --git a/packages/svelte-ux/src/lib/styles/skeleton/wintry.ts b/packages/svelte-ux/src/lib/styles/skeleton/wintry.ts
new file mode 100644
index 000000000..23b993805
--- /dev/null
+++ b/packages/svelte-ux/src/lib/styles/skeleton/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': '0 0 0',
+    '--on-secondary': '0 0 0',
+    '--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;
diff --git a/packages/svelte-ux/src/lib/styles/theme.ts b/packages/svelte-ux/src/lib/styles/theme.ts
index a3ea42f2c..541671e86 100644
--- a/packages/svelte-ux/src/lib/styles/theme.ts
+++ b/packages/svelte-ux/src/lib/styles/theme.ts
@@ -1,5 +1,18 @@
 import { range } from 'd3-array';
 
+import {
+  rgb,
+  hsl,
+  oklch,
+  clampRgb,
+  interpolate,
+  wcagContrast,
+  formatCss,
+  type Color,
+} from 'culori';
+
+export type SupportedColorSpace = 'rgb' | 'hsl' | 'oklch';
+
 export const semanticColors = ['primary', 'secondary', 'accent', 'neutral'] as const;
 export const stateColors = ['info', 'success', 'warning', 'danger'] as const;
 export const colors = [...semanticColors, ...stateColors];
@@ -21,6 +34,213 @@ export const colorNames = [
   'surface-content',
 ];
 
+/**
+ * Generate theme colors (ex. { primary: hsl(var(--color-primary) / <alpha-value>), ... })
+ */
+export function createThemeColors(colorSpace: SupportedColorSpace) {
+  return Object.fromEntries(
+    colorNames.map((color) => [color, `${colorSpace}(var(--color-${color}) / <alpha-value>)`])
+  );
+}
+
+/**
+ * Get themes names split into light and dark collections determined by `color-scheme` property
+ */
+export function getThemeNames(themes: Record<string, any>) {
+  const light: string[] = [];
+  const dark: string[] = [];
+
+  Object.entries(themes).map(([themeName, props]) => {
+    if (props['color-scheme'] === 'dark') {
+      dark.push(themeName);
+    } else {
+      light.push(themeName);
+    }
+  });
+
+  return { light, dark };
+}
+
+/**
+ * Convert names to CSS variables and color values common color space (hsl, oklch, etc) and space separated
+ */
+export function processThemeColors(
+  themeColors: Record<string, string>,
+  colorSpace: SupportedColorSpace
+) {
+  const colors = { ...themeColors };
+
+  // Generate optional semanatic colors
+  if (!('neutral' in colors) && !('neutral-500' in colors)) {
+    colors['neutral'] = 'oklch(.355192 .032071 262.988584)';
+  }
+
+  // Generate optional state colors
+  if (!('info' in colors) && !('info-500' in colors)) {
+    colors['info'] = 'oklch(0.7206 0.191 231.6)';
+  }
+  if (!('success' in colors) && !('success-500' in colors)) {
+    colors['success'] = 'oklch(64.8% 0.150 160)';
+  }
+  if (!('warning' in colors) && !('warning-500' in colors)) {
+    colors['warning'] = 'oklch(0.8471 0.199 83.87)';
+  }
+  if (!('danger' in colors) && !('danger-500' in colors)) {
+    colors['danger'] = 'oklch(0.7176 0.221 22.18)';
+  }
+
+  // Generate optional content colors
+  for (const color of [...semanticColors, ...stateColors]) {
+    // Add `primary` from `primary-500` if not defined in theme (ex. Skeleton)
+    if (!(color in colors) && `${color}-500` in themeColors) {
+      colors[color] = themeColors[`${color}-500`];
+    }
+
+    if (!(`${color}-content` in colors)) {
+      colors[`${color}-content`] = foregroundColor(colors[color]);
+    }
+
+    // Generate color shades (ex. `primary-500`) if not defined.  Useful for Daisy but not Skeleton themes, for example
+    for (const shade of shades) {
+      const shadeColorName = `${color}-${shade}`;
+      if (!(shadeColorName in colors)) {
+        // Find the next shade above (shade < 500) or below (shade > 500) and use as reference, if available
+        const referenceShade =
+          Object.keys(colors)
+            .map((str) => {
+              const [c, s] = str.split('-');
+              return [c, Number(s)];
+            })
+            .find(([c, s]) => c === color && (s < 500 ? s > shade : s < shade))?.[1] ?? 500;
+        const referenceColor = colors[`${color}-${referenceShade}`] ?? colors[color];
+
+        if (shade < 500) {
+          colors[shadeColorName] = lightenColor(referenceColor, (referenceShade - shade) / 1000); // 100 == 0.1
+        } else if (shade > 500) {
+          colors[shadeColorName] = darkenColor(colors[color], (shade - referenceShade) / 1000); // 100 == 0.1
+        } else {
+          colors[shadeColorName] = colors[color];
+        }
+      }
+    }
+  }
+
+  // Generate optional surface colors
+  if (!('surface-100' in colors)) {
+    colors['surface-100'] = 'oklch(100 0 0)';
+  }
+
+  if (!('surface-200' in colors)) {
+    colors['surface-200'] = darkenColor(colors['surface-100'], 0.07);
+  }
+
+  if (!('surface-300' in colors)) {
+    if ('surface-200' in themeColors) {
+      colors['surface-300'] = darkenColor(colors['surface-200'], 0.07);
+    } else {
+      colors['surface-300'] = darkenColor(colors['surface-100'], 0.14);
+    }
+  }
+
+  if (!('surface-content' in colors)) {
+    colors['surface-content'] = foregroundColor(colors['surface-100']);
+  }
+
+  const result = Object.fromEntries(
+    Object.entries(colors).map(([name, value]) => {
+      if (colorNames.includes(name)) {
+        // Add space separated color variables for each color
+        return [`--color-${name}`, colorVariableValue(value, colorSpace)];
+      } else {
+        // Additional properties such as `color-scheme` or CSS variable
+        return [name, value];
+      }
+    })
+  );
+
+  return result;
+}
+
+function round(value: number, decimals: number) {
+  if (value) {
+    return Number(value.toFixed(decimals));
+  } else {
+    return 0;
+  }
+}
+
+function isDark(color: Color | string) {
+  try {
+    if (wcagContrast(color, 'black') < wcagContrast(color, 'white')) {
+      return true;
+    }
+    return false;
+  } catch (e) {
+    return false;
+  }
+}
+
+/** Lighten or darken color based on contrast of input */
+function foregroundColor(color: Color | string, percentage = 0.8) {
+  try {
+    return isDark(color) ? lightenColor(color, percentage) : darkenColor(color, percentage);
+  } catch (e) {
+    // console.error('Unable to generate foreground color', color);
+  }
+}
+
+function lightenColor(color: Color | string, percentage: number) {
+  try {
+    return formatCss(interpolate([color, 'white'], 'oklch')(percentage));
+  } catch (e) {
+    // console.error('Unable to generate lighten color', color);
+  }
+}
+
+function darkenColor(color: Color | string, percentage: number) {
+  try {
+    return formatCss(interpolate([color, 'black'], 'oklch')(percentage));
+  } catch (e) {
+    // console.error('Unable to generate darken color', color);
+  }
+}
+
+/**
+ * Convert color to space separated components string
+ */
+export function colorVariableValue(
+  color: Color | string,
+  colorSpace: SupportedColorSpace,
+  decimals = 4
+) {
+  try {
+    if (colorSpace === 'rgb') {
+      const { r, g, b } = rgb(color);
+      return `${round(r * 255, decimals)} ${round(g * 255, decimals)} ${round(b * 255, decimals)}`;
+    } else if (colorSpace === 'hsl') {
+      const { h, s, l } = hsl(clampRgb(color));
+      return `${round(h, decimals)} ${round(s * 100, decimals)}% ${round(l * 100, decimals)}%`;
+    } else if (colorSpace === 'oklch') {
+      const { l, c, h } = oklch(color);
+      return `${round(l, decimals)} ${round(c, decimals)} ${round(h, decimals)}`;
+    }
+  } catch (e) {
+    // console.error('Unable to convert color object to string', color);
+  }
+}
+
+/**
+ * Process theme to style variables
+ */
+export function themeStylesString(theme: any, colorSpace: SupportedColorSpace) {
+  const styleProperties = processThemeColors(theme, colorSpace);
+  return Object.entries(styleProperties)
+    .map(([key, value]) => {
+      return `${key}: ${value};`;
+    })
+    .join('\n');
+}
+
 /** Return a script tag that will set the initial theme from localStorage. This allows setting
  * the theme before anything starts rendering, even when SSR is in use.
  *
diff --git a/packages/svelte-ux/src/routes/+layout.server.ts b/packages/svelte-ux/src/routes/+layout.server.ts
index da729965e..416704c48 100644
--- a/packages/svelte-ux/src/routes/+layout.server.ts
+++ b/packages/svelte-ux/src/routes/+layout.server.ts
@@ -2,6 +2,9 @@ import { redirect } from '@sveltejs/kit';
 
 import { env } from '$env/dynamic/private';
 
+import themes from '../../themes.json';
+import { getThemeNames } from '$lib/styles/theme';
+
 export async function load({ url }) {
   // Redirect `svelte-ux.vercel.app` to `svelte-ux.techniq.dev`
   if (url.host === 'svelte-ux.vercel.app') {
@@ -10,5 +13,9 @@ export async function load({ url }) {
     throw redirect(302, newUrl.toString());
   }
 
-  return { pr_id: env.VERCEL_GIT_PULL_REQUEST_ID };
+  return {
+    themes: getThemeNames(themes),
+    // themes: { light: ['light'], dark: ['dark'] },
+    pr_id: env.VERCEL_GIT_PULL_REQUEST_ID,
+  };
 }
diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
index 357c5bc84..fc8abe81b 100644
--- a/packages/svelte-ux/src/routes/+layout.svelte
+++ b/packages/svelte-ux/src/routes/+layout.svelte
@@ -20,10 +20,8 @@
   import { settings } from '$lib/components/settings';
   import type { PageData } from './$types';
 
-  import { lightThemes, darkThemes } from '$lib/styles/daisy';
   import { createLocaleSettings } from '$lib';
   import LanguageSelect from '$lib/components/LanguageSelect.svelte';
-  // import { lightThemes, darkThemes } from '$lib/styles/skeleton';
 
   export let data: PageData;
 
@@ -70,10 +68,7 @@
         active: 'text-primary bg-surface-100 border-l-4 border-primary font-medium',
       },
     },
-    themes: {
-      light: lightThemes,
-      dark: darkThemes,
-    },
+    themes: data.themes,
   });
 
   let mainEl: HTMLElement;
@@ -165,8 +160,11 @@
 
       <div class="border-r border-primary-content/20 pr-2 grid grid-cols-2 items-center">
         <LanguageSelect />
-        <ThemeSelect />
-        <!-- <ThemeSwitch classes={{ switch: 'bg-black/10 bornder-none' }} /> -->
+        {#if data.themes.light.length > 1 || data.themes.dark.length > 1}
+          <ThemeSelect />
+        {:else}
+          <ThemeSwitch classes={{ switch: 'bg-black/10 bornder-none' }} />
+        {/if}
       </div>
 
       <Tooltip title="Discord" placement="left" offset={2}>
diff --git a/packages/svelte-ux/src/routes/_NavMenu.svelte b/packages/svelte-ux/src/routes/_NavMenu.svelte
index 98f7bdf18..07e144fce 100644
--- a/packages/svelte-ux/src/routes/_NavMenu.svelte
+++ b/packages/svelte-ux/src/routes/_NavMenu.svelte
@@ -69,7 +69,6 @@
   };
 
   const actions = [
-    'cssVars',
     'dataBackground',
     'input',
     'layout',
@@ -81,6 +80,7 @@
     'scroll',
     'spotlight',
     'sticky',
+    'styleProps',
     'table',
   ];
 
diff --git a/packages/svelte-ux/src/routes/docs/actions/cssVars/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/cssVars/+page.svelte
deleted file mode 100644
index 36801e382..000000000
--- a/packages/svelte-ux/src/routes/docs/actions/cssVars/+page.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-  import Preview from '$lib/components/Preview.svelte';
-  import Code from '$lib/components/Code.svelte';
-  import TextField from '$lib/components/TextField.svelte';
-
-  import { cssVars } from '$lib/actions/cssVars';
-  import Blockquote from '$docs/Blockquote.svelte';
-
-  let background = '#ddd';
-  let border = '1px solid #aaa';
-</script>
-
-<h1>Usage</h1>
-
-<Code source={`import { cssVars } from 'svelte-ux';`} language="javascript" class="mb-4" />
-
-<Preview>
-  <div class="grid gap-4" use:cssVars={{ background, border }}>
-    <div
-      class="w-10 h-10 rounded"
-      style:background-color="var(--background)"
-      style:border="var(--border)"
-    />
-    <div class="grid grid-flow-col gap-2">
-      <TextField label="Background" bind:value={background} />
-      <TextField label="Border" bind:value={border} />
-    </div>
-  </div>
-</Preview>
-
-<Blockquote
-  >With the Svelte addition of `style:`, this actions is less useful (but a little more concise)</Blockquote
->
-
-<Preview>
-  <div class="grid gap-4" style:--background={background} style:--border={border}>
-    <div
-      class="w-10 h-10 rounded"
-      style:background-color="var(--background)"
-      style:border="var(--border)"
-    />
-    <div class="grid grid-flow-col gap-2">
-      <TextField label="Background" bind:value={background} />
-      <TextField label="Border" bind:value={border} />
-    </div>
-  </div>
-</Preview>
diff --git a/packages/svelte-ux/src/routes/docs/actions/cssVars/+page.ts b/packages/svelte-ux/src/routes/docs/actions/cssVars/+page.ts
deleted file mode 100644
index 07a2d4596..000000000
--- a/packages/svelte-ux/src/routes/docs/actions/cssVars/+page.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import source from '$lib/actions/cssVars.ts?raw';
-import pageSource from './+page.svelte?raw';
-
-export async function load() {
-  return {
-    meta: {
-      source,
-      pageSource,
-      description:
-        'Reactively set CSS variables using a single object.  Not as commonly needed after `<div style:--prop={value}>` support was added, but cssVars is more terse',
-    },
-  };
-}
diff --git a/packages/svelte-ux/src/routes/docs/actions/styleProps/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/styleProps/+page.svelte
new file mode 100644
index 000000000..5dfc7c8e0
--- /dev/null
+++ b/packages/svelte-ux/src/routes/docs/actions/styleProps/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import Preview from '$lib/components/Preview.svelte';
+  import Code from '$lib/components/Code.svelte';
+  import TextField from '$lib/components/TextField.svelte';
+
+  import { styleProps } from '$lib/actions/styleProps';
+
+  let background = '#ddd';
+  let border = '1px solid #aaa';
+</script>
+
+<h1>Usage</h1>
+
+<Code source={`import { styleProps } from 'svelte-ux';`} language="javascript" class="mb-4" />
+
+<Preview>
+  {@const styles = { '--background': background, '--border': border }}
+  <div class="grid gap-4" use:styleProps={styles}>
+    <div
+      class="w-10 h-10 rounded"
+      style:background-color="var(--background)"
+      style:border="var(--border)"
+    />
+    <div class="grid grid-flow-col gap-2">
+      <TextField label="Background" bind:value={background} />
+      <TextField label="Border" bind:value={border} />
+    </div>
+  </div>
+</Preview>
diff --git a/packages/svelte-ux/src/routes/docs/actions/styleProps/+page.ts b/packages/svelte-ux/src/routes/docs/actions/styleProps/+page.ts
new file mode 100644
index 000000000..08689da4e
--- /dev/null
+++ b/packages/svelte-ux/src/routes/docs/actions/styleProps/+page.ts
@@ -0,0 +1,12 @@
+import source from '$lib/actions/styleProps.ts?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      source,
+      pageSource,
+      description: 'Reactively set style properties using a single object.',
+    },
+  };
+}
diff --git a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
index be35c9744..8caf51059 100644
--- a/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte
@@ -152,7 +152,7 @@
 <h2>option slot</h2>
 
 <Preview>
-  <SelectField {options} on:change={(e) => console.log('on:change', e.detail)}>
+  <SelectField {options}>
     <div slot="option" let:option let:index let:selected let:highlightIndex>
       <MenuItem
         class={cls(
@@ -174,12 +174,7 @@
 <h2>option slot with icon (field icon updates based on selected option)</h2>
 
 <Preview>
-  <SelectField
-    {options}
-    bind:value
-    activeOptionIcon={true}
-    on:change={(e) => console.log('on:change', e.detail)}
-  >
+  <SelectField {options} bind:value activeOptionIcon={true}>
     <div slot="option" let:option let:index let:selected let:highlightIndex>
       <MenuItem
         class={cls(
@@ -199,7 +194,7 @@
 <h2>option with action</h2>
 
 <Preview>
-  <SelectField {options} on:change={(e) => console.log('on:change', e.detail)}>
+  <SelectField {options}>
     <div slot="option" let:option let:index let:selected let:highlightIndex>
       <MenuItem
         class={cls(
@@ -403,7 +398,6 @@
 <Preview>
   <SelectField
     {options}
-    on:change={(e) => console.log('on:change', e.detail)}
     search={async () => {
       console.log('search override...');
       await delay(1000);
@@ -415,11 +409,13 @@
 <h2>Placement</h2>
 
 <Preview>
-  <SelectField
-    {options}
-    on:change={(e) => console.log('on:change', e.detail)}
-    placement="top-start"
-  />
+  <SelectField {options} autoPlacement={false} placement="top-start" />
+</Preview>
+
+<h2>Stepper</h2>
+
+<Preview>
+  <SelectField {options} toggleIcon={null} stepper />
 </Preview>
 
 <h2>Custom selected class</h2>
diff --git a/packages/svelte-ux/src/routes/theme/+page.server.ts b/packages/svelte-ux/src/routes/theme/+page.server.ts
new file mode 100644
index 000000000..8b0c74e13
--- /dev/null
+++ b/packages/svelte-ux/src/routes/theme/+page.server.ts
@@ -0,0 +1,11 @@
+import * as daisy from '$lib/styles/daisy';
+import * as skeleton from '$lib/styles/skeleton';
+
+export async function load() {
+  return {
+    themes: {
+      daisy: daisy.themes,
+      skeleton: skeleton.themes,
+    },
+  };
+}
diff --git a/packages/svelte-ux/src/routes/theme/+page.svelte b/packages/svelte-ux/src/routes/theme/+page.svelte
index 5cb111dfb..286c15418 100644
--- a/packages/svelte-ux/src/routes/theme/+page.svelte
+++ b/packages/svelte-ux/src/routes/theme/+page.svelte
@@ -1,136 +1,642 @@
 <script lang="ts">
-  //
+  import { mdiChevronDown, mdiPalette, mdiWeatherNight, mdiWhiteBalanceSunny } from '@mdi/js';
+
+  import Button from '$lib/components/Button.svelte';
+  import ButtonGroup from '$lib/components/ButtonGroup.svelte';
+  import CopyButton from '$lib/components/CopyButton.svelte';
+  import Icon from '$lib/components/Icon.svelte';
+  import Menu from '$lib/components/Menu.svelte';
+  import MenuItem from '$lib/components/MenuItem.svelte';
+  import MenuField from '$lib/components/MenuField.svelte';
+  import SelectField from '$lib/components/SelectField.svelte';
+  import Switch from '$lib/components/Switch.svelte';
+  import Toggle from '$lib/components/Toggle.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+
+  import { styleProps } from '$lib/actions/styleProps.js';
+  import {
+    getThemeNames,
+    processThemeColors,
+    themeStylesString,
+    type SupportedColorSpace,
+  } from '$lib/styles/theme.js';
+  import type { MenuOption } from '$lib/types/options.js';
+  import ColorField from './ColorField.svelte';
+  import { getSettings } from '$lib/components/settings';
+
+  export let data;
+
+  type ThemeMenuOption = MenuOption & {
+    themeName: string;
+    theme: typeof customLightTheme | typeof data.themes.daisy | typeof data.themes.skeleton;
+  };
+
+  const { currentTheme } = getSettings();
+
+  let selectedLightThemeValue: string;
+  let selectedDarkThemeValue: string;
+
+  let showOptionalColors = false;
+
+  let colorSpace: SupportedColorSpace = 'hsl';
+
+  // Needs to always match app since using tailwind classes
+  const themeColorSpace: SupportedColorSpace = 'hsl';
+
+  const daisyThemeNames = getThemeNames(data.themes.daisy);
+  const skeletonThemeNames = getThemeNames(data.themes.skeleton);
+
+  let customLightTheme = {};
+  let customDarkTheme = {};
+
+  $: lightThemes = [
+    {
+      label: 'Custom',
+      value: 'custom',
+      themeName: 'custom',
+      theme: customLightTheme,
+    },
+    ...daisyThemeNames.light.map((themeName) => {
+      return {
+        label: themeName === 'light' ? 'light (daisy)' : themeName,
+        value: themeName === 'light' ? 'daisy-light' : themeName,
+        group: 'Daisy',
+        themeName,
+        theme: data.themes.daisy[themeName],
+      };
+    }),
+    ...skeletonThemeNames.light.map((themeName) => {
+      return {
+        label: themeName === 'light' ? 'light (skeleton)' : themeName,
+        value: themeName === 'light' ? 'skeleton-light' : themeName,
+        group: 'Skeleton',
+        themeName,
+        theme: data.themes.skeleton[themeName],
+      };
+    }),
+  ] as ThemeMenuOption[];
+
+  $: darkThemes = [
+    {
+      label: 'Custom',
+      value: 'custom',
+      themeName: 'custom',
+      theme: customDarkTheme,
+    },
+    ...daisyThemeNames.dark.map((themeName) => {
+      return {
+        label: themeName === 'dark' ? 'dark (daisy)' : themeName,
+        value: themeName === 'dark' ? 'daisy-dark' : themeName,
+        group: 'Daisy',
+        themeName,
+        theme: data.themes.daisy[themeName],
+      };
+    }),
+    ...skeletonThemeNames.dark.map((themeName) => {
+      return {
+        label: themeName === 'dark' ? 'dark (skeleton)' : themeName,
+        value: themeName === 'dark' ? 'skeleton-dark' : themeName,
+        group: 'Skeleton',
+        themeName,
+        theme: data.themes.skeleton[themeName],
+      };
+    }),
+  ] as ThemeMenuOption[];
+
+  // Set initial theme selections (skip custom)
+  $: if (selectedLightThemeValue === undefined) {
+    selectedLightThemeValue = lightThemes[1].value;
+  }
+  $: if (selectedDarkThemeValue === undefined) {
+    selectedDarkThemeValue = darkThemes[1].value;
+  }
+
+  let showDarkTheme = false;
+  $: selectedLightTheme = lightThemes.find((d) => d.value === selectedLightThemeValue)?.theme;
+  $: selectedDarkTheme = darkThemes.find((d) => d.value === selectedDarkThemeValue)?.theme;
+  $: previewTheme = showDarkTheme ? selectedDarkTheme : selectedLightTheme;
+
+  // Update site dark/light mode with preview for better experience (previewing and applying)
+  $: currentTheme.setTheme(showDarkTheme ? 'dark' : 'light');
+
+  // Break cyclical dependency with lightThemes => customLightTheme -> selectedLightTheme -> lightThemes
+  function updateCustomLightTheme() {
+    customLightTheme = {
+      ...selectedLightTheme,
+      primary: selectedLightTheme?.primary ?? selectedLightTheme?.['primary-500'],
+      secondary: selectedLightTheme?.secondary ?? selectedLightTheme?.['secondary-500'],
+      accent: selectedLightTheme?.accent ?? selectedLightTheme?.['accent-500'],
+      neutral: selectedLightTheme?.neutral ?? selectedLightTheme?.['neutral-500'],
+    };
+  }
+  $: selectedLightTheme && updateCustomLightTheme();
+
+  // Break cyclical dependency with darkThemes => customDarkTheme -> selectedDarkTheme -> darkThemes
+  function updateCustomLDarkTheme() {
+    customDarkTheme = {
+      ...selectedDarkTheme,
+      primary: selectedDarkTheme?.primary ?? selectedDarkTheme?.['primary-500'],
+      secondary: selectedDarkTheme?.secondary ?? selectedDarkTheme?.['secondary-500'],
+      accent: selectedDarkTheme?.accent ?? selectedDarkTheme?.['accent-500'],
+      neutral: selectedDarkTheme?.neutral ?? selectedDarkTheme?.['neutral-500'],
+    };
+  }
+  $: selectedDarkTheme && updateCustomLDarkTheme();
 </script>
 
-<main class="p-4">
-  <div class="text-xl font-bold mb-2">Semantic colors</div>
-
-  <div class="grid grid-cols-xs gap-3">
-    <div class="swatch">
-      <div class="bg-primary text-primary-content name">Primary</div>
-      <div class="bg-primary-50 shade"><span>50</span></div>
-      <div class="bg-primary-100 shade"><span>100</span></div>
-      <div class="bg-primary-200 shade"><span>200</span></div>
-      <div class="bg-primary-300 shade"><span>300</span></div>
-      <div class="bg-primary-400 shade"><span>400</span></div>
-      <div class="bg-primary-500 shade"><span>500</span></div>
-      <div class="bg-primary-600 shade"><span>600</span></div>
-      <div class="bg-primary-700 shade"><span>700</span></div>
-      <div class="bg-primary-800 shade"><span>800</span></div>
-      <div class="bg-primary-900 shade"><span>900</span></div>
-    </div>
+<main class="p-4 grid gap-3">
+  <div class="grid sm:grid-cols-[1fr,1fr,auto,auto] gap-3">
+    <SelectField
+      label="Light theme"
+      options={lightThemes}
+      bind:value={selectedLightThemeValue}
+      clearable={false}
+      toggleIcon={null}
+      stepper
+      on:change={() => (showDarkTheme = false)}
+    />
+    <SelectField
+      label="Dark theme"
+      options={darkThemes}
+      bind:value={selectedDarkThemeValue}
+      clearable={false}
+      toggleIcon={null}
+      stepper
+      on:change={() => (showDarkTheme = true)}
+    />
 
-    <div class="swatch">
-      <div class="bg-secondary text-secondary-content name">Secondary</div>
-      <div class="bg-secondary-50 shade"><span>50</span></div>
-      <div class="bg-secondary-100 shade"><span>100</span></div>
-      <div class="bg-secondary-200 shade"><span>200</span></div>
-      <div class="bg-secondary-300 shade"><span>300</span></div>
-      <div class="bg-secondary-400 shade"><span>400</span></div>
-      <div class="bg-secondary-500 shade"><span>500</span></div>
-      <div class="bg-secondary-600 shade"><span>600</span></div>
-      <div class="bg-secondary-700 shade"><span>700</span></div>
-      <div class="bg-secondary-800 shade"><span>800</span></div>
-      <div class="bg-secondary-900 shade"><span>900</span></div>
-    </div>
+    <MenuField
+      label="Color space"
+      bind:value={colorSpace}
+      options={[
+        { label: 'hex', value: 'hex' },
+        { label: 'hsl', value: 'hsl' },
+        { label: 'rgb', value: 'rgb' },
+        { label: 'oklch', value: 'oklch' },
+      ]}
+    />
 
-    <div class="swatch">
-      <div class="bg-accent text-accent-content name">Accent</div>
-      <div class="bg-accent-50 shade"><span>50</span></div>
-      <div class="bg-accent-100 shade"><span>100</span></div>
-      <div class="bg-accent-200 shade"><span>200</span></div>
-      <div class="bg-accent-300 shade"><span>300</span></div>
-      <div class="bg-accent-400 shade"><span>400</span></div>
-      <div class="bg-accent-500 shade"><span>500</span></div>
-      <div class="bg-accent-600 shade"><span>600</span></div>
-      <div class="bg-accent-700 shade"><span>700</span></div>
-      <div class="bg-accent-800 shade"><span>800</span></div>
-      <div class="bg-accent-900 shade"><span>900</span></div>
-    </div>
+    <ButtonGroup variant="fill" color="primary">
+      <Tooltip title="Copy themes to clipboard" offset={2}>
+        <CopyButton
+          value={JSON.stringify({ light: selectedLightTheme, dark: selectedDarkTheme }, null, 2)}
+        />
+      </Tooltip>
 
-    <div class="swatch">
-      <div class="bg-neutral text-neutral-content name">Neutral</div>
-      <div class="bg-neutral-50 shade"><span>50</span></div>
-      <div class="bg-neutral-100 shade"><span>100</span></div>
-      <div class="bg-neutral-200 shade"><span>200</span></div>
-      <div class="bg-neutral-300 shade"><span>300</span></div>
-      <div class="bg-neutral-400 shade"><span>400</span></div>
-      <div class="bg-neutral-500 shade"><span>500</span></div>
-      <div class="bg-neutral-600 shade"><span>600</span></div>
-      <div class="bg-neutral-700 shade"><span>700</span></div>
-      <div class="bg-neutral-800 shade"><span>800</span></div>
-      <div class="bg-neutral-900 shade"><span>900</span></div>
-    </div>
+      <Tooltip title="Override current themes" offset={2}>
+        <Button
+          icon={mdiPalette}
+          iconOnly={false}
+          on:click={() => {
+            const style =
+              document.getElementById('custom-theme') ?? document.createElement('style');
+            style.id = 'custom-theme';
+
+            style.textContent = `
+              :root { ${themeStylesString(selectedLightTheme, themeColorSpace)} }
+              @media (prefers-color-scheme: dark) {
+                :root {
+                  ${themeStylesString(selectedDarkTheme, themeColorSpace)}
+                }
+              }
+              [data-theme=light] { ${themeStylesString(selectedLightTheme, themeColorSpace)} }
+              [data-theme=dark] { ${themeStylesString(selectedDarkTheme, themeColorSpace)} }
+            `;
+            document.head.appendChild(style);
+
+            // TODO: Update settings({ themes: { light: ['light'], dark: ['dark'] }})
+          }}
+        />
+      </Tooltip>
+
+      <Toggle let:on={open} let:toggle>
+        <div class="grid">
+          <Button icon={mdiChevronDown} on:click={toggle} rounded class="px-1" />
+          <Menu {open} on:close={toggle} placement="bottom-start">
+            <MenuItem
+              on:click={() => {
+                const allThemes = {
+                  ...data.themes.daisy,
+                  ...Object.fromEntries(
+                    Object.entries(data.themes.skeleton).map(([themeName, value]) => {
+                      return [
+                        themeName === 'light'
+                          ? 'skeleton-light'
+                          : themeName === 'dark'
+                            ? 'skeleton-dark'
+                            : themeName,
+                        value,
+                      ];
+                    })
+                  ),
+                };
+                const clipboardData = JSON.stringify(allThemes, null, 2);
+                navigator.clipboard.writeText(clipboardData);
+              }}
+            >
+              Copy All themes
+            </MenuItem>
+            <MenuItem
+              on:click={() => {
+                const clipboardData = JSON.stringify(data.themes.daisy, null, 2);
+                navigator.clipboard.writeText(clipboardData);
+              }}
+            >
+              Copy Daisy themes
+            </MenuItem>
+            <MenuItem
+              on:click={() => {
+                const clipboardData = JSON.stringify(data.themes.skeleton, null, 2);
+                navigator.clipboard.writeText(clipboardData);
+              }}
+            >
+              Copy Skeleton themes
+            </MenuItem>
+          </Menu>
+        </div>
+      </Toggle>
+    </ButtonGroup>
   </div>
 
-  <div class="text-xl font-bold mt-4 mb-2">State colors</div>
-
-  <div class="grid grid-cols-xs gap-3">
-    <div class="swatch">
-      <div class="bg-info text-info-content name">Info</div>
-      <div class="bg-info-50 shade"><span>50</span></div>
-      <div class="bg-info-100 shade"><span>100</span></div>
-      <div class="bg-info-200 shade"><span>200</span></div>
-      <div class="bg-info-300 shade"><span>300</span></div>
-      <div class="bg-info-400 shade"><span>400</span></div>
-      <div class="bg-info-500 shade"><span>500</span></div>
-      <div class="bg-info-600 shade"><span>600</span></div>
-      <div class="bg-info-700 shade"><span>700</span></div>
-      <div class="bg-info-800 shade"><span>800</span></div>
-      <div class="bg-info-900 shade"><span>900</span></div>
+  <div class="grid sm:grid-cols-2 gap-2">
+    <div class="grid gap-2">
+      <ColorField
+        label="Primary"
+        bind:value={customLightTheme.primary}
+        on:change={() => {
+          selectedLightThemeValue = 'custom';
+          showDarkTheme = false;
+        }}
+        {colorSpace}
+      />
+      <ColorField
+        label="Secondary"
+        bind:value={customLightTheme.secondary}
+        on:change={() => {
+          selectedLightThemeValue = 'custom';
+          showDarkTheme = false;
+        }}
+        {colorSpace}
+      />
+      <ColorField
+        label="Accent"
+        bind:value={customLightTheme.accent}
+        on:change={() => {
+          selectedLightThemeValue = 'custom';
+          showDarkTheme = false;
+        }}
+        {colorSpace}
+      />
+
+      {#if showOptionalColors}
+        <ColorField
+          label="Neutral (optional)"
+          bind:value={customLightTheme.neutral}
+          on:change={() => {
+            selectedLightThemeValue = 'custom';
+            showDarkTheme = false;
+          }}
+          {colorSpace}
+        />
+        <!-- State colors -->
+        <ColorField
+          label="Info (optional)"
+          bind:value={customLightTheme.info}
+          on:change={() => {
+            selectedLightThemeValue = 'custom';
+            showDarkTheme = false;
+          }}
+          {colorSpace}
+        />
+        <ColorField
+          label="Success (optional)"
+          bind:value={customLightTheme.success}
+          on:change={() => {
+            selectedLightThemeValue = 'custom';
+            showDarkTheme = false;
+          }}
+          {colorSpace}
+        />
+        <ColorField
+          label="Warning (optional)"
+          bind:value={customLightTheme.warning}
+          on:change={() => {
+            selectedLightThemeValue = 'custom';
+            showDarkTheme = false;
+          }}
+          {colorSpace}
+        />
+        <ColorField
+          label="Danger (optional)"
+          bind:value={customLightTheme.danger}
+          on:change={() => {
+            selectedLightThemeValue = 'custom';
+            showDarkTheme = false;
+          }}
+          {colorSpace}
+        />
+      {/if}
+
+      <ColorField
+        label="Surface 100"
+        bind:value={customLightTheme['surface-100']}
+        on:change={() => {
+          selectedLightThemeValue = 'custom';
+          showDarkTheme = false;
+        }}
+        {colorSpace}
+      />
+      {#if showOptionalColors}
+        <ColorField
+          label="Surface 200 (optional)"
+          bind:value={customLightTheme['surface-200']}
+          on:change={() => {
+            selectedLightThemeValue = 'custom';
+            showDarkTheme = false;
+          }}
+          {colorSpace}
+        />
+        <ColorField
+          label="Surface 300 (optional)"
+          bind:value={customLightTheme['surface-300']}
+          on:change={() => {
+            selectedLightThemeValue = 'custom';
+            showDarkTheme = false;
+          }}
+          {colorSpace}
+        />
+      {/if}
     </div>
 
-    <div class="swatch">
-      <div class="bg-success text-success-content name">Success</div>
-      <div class="bg-success-50 shade"><span>50</span></div>
-      <div class="bg-success-100 shade"><span>100</span></div>
-      <div class="bg-success-200 shade"><span>200</span></div>
-      <div class="bg-success-300 shade"><span>300</span></div>
-      <div class="bg-success-400 shade"><span>400</span></div>
-      <div class="bg-success-500 shade"><span>500</span></div>
-      <div class="bg-success-600 shade"><span>600</span></div>
-      <div class="bg-success-700 shade"><span>700</span></div>
-      <div class="bg-success-800 shade"><span>800</span></div>
-      <div class="bg-success-900 shade"><span>900</span></div>
+    <div class="grid gap-2">
+      <ColorField
+        label="Primary"
+        bind:value={customDarkTheme.primary}
+        on:change={() => {
+          selectedDarkThemeValue = 'custom';
+          showDarkTheme = true;
+        }}
+        {colorSpace}
+      />
+      <ColorField
+        label="Secondary"
+        bind:value={customDarkTheme.secondary}
+        on:change={() => {
+          selectedDarkThemeValue = 'custom';
+          showDarkTheme = true;
+        }}
+        {colorSpace}
+      />
+      <ColorField
+        label="Accent"
+        bind:value={customDarkTheme.accent}
+        on:change={() => {
+          selectedDarkThemeValue = 'custom';
+          showDarkTheme = true;
+        }}
+        {colorSpace}
+      />
+
+      {#if showOptionalColors}
+        <ColorField
+          label="Neutral (optional)"
+          bind:value={customDarkTheme.neutral}
+          on:change={() => {
+            selectedDarkThemeValue = 'custom';
+            showDarkTheme = true;
+          }}
+          {colorSpace}
+        />
+        <!-- State colors -->
+        <ColorField
+          label="Info (optional)"
+          bind:value={customDarkTheme.info}
+          on:change={() => {
+            selectedDarkThemeValue = 'custom';
+            showDarkTheme = true;
+          }}
+          {colorSpace}
+        />
+        <ColorField
+          label="Success (optional)"
+          bind:value={customDarkTheme.success}
+          on:change={() => {
+            selectedDarkThemeValue = 'custom';
+            showDarkTheme = true;
+          }}
+          {colorSpace}
+        />
+        <ColorField
+          label="Warning (optional)"
+          bind:value={customDarkTheme.warning}
+          on:change={() => {
+            selectedDarkThemeValue = 'custom';
+            showDarkTheme = true;
+          }}
+          {colorSpace}
+        />
+        <ColorField
+          label="Danger (optional)"
+          bind:value={customDarkTheme.danger}
+          on:change={() => {
+            selectedDarkThemeValue = 'custom';
+            showDarkTheme = true;
+          }}
+          {colorSpace}
+        />
+      {/if}
+
+      <ColorField
+        label="Surface 100"
+        bind:value={customDarkTheme['surface-100']}
+        on:change={() => {
+          selectedDarkThemeValue = 'custom';
+          showDarkTheme = true;
+        }}
+        {colorSpace}
+      />
+      {#if showOptionalColors}
+        <ColorField
+          label="Surface 200 (optional)"
+          bind:value={customDarkTheme['surface-200']}
+          on:change={() => {
+            selectedDarkThemeValue = 'custom';
+            showDarkTheme = true;
+          }}
+          {colorSpace}
+        />
+        <ColorField
+          label="Surface 300 (optional)"
+          bind:value={customDarkTheme['surface-300']}
+          on:change={() => {
+            selectedDarkThemeValue = 'custom';
+            showDarkTheme = true;
+          }}
+          {colorSpace}
+        />
+      {/if}
     </div>
+  </div>
+  <Button color="primary" size="sm" on:click={() => (showOptionalColors = !showOptionalColors)}>
+    {showOptionalColors ? 'Hide' : 'Show'} optional colors
+  </Button>
 
-    <div class="swatch">
-      <div class="bg-warning text-warning-content name">Warning</div>
-      <div class="bg-warning-50 shade"><span>50</span></div>
-      <div class="bg-warning-100 shade"><span>100</span></div>
-      <div class="bg-warning-200 shade"><span>200</span></div>
-      <div class="bg-warning-300 shade"><span>300</span></div>
-      <div class="bg-warning-400 shade"><span>400</span></div>
-      <div class="bg-warning-500 shade"><span>500</span></div>
-      <div class="bg-warning-600 shade"><span>600</span></div>
-      <div class="bg-warning-700 shade"><span>700</span></div>
-      <div class="bg-warning-800 shade"><span>800</span></div>
-      <div class="bg-warning-900 shade"><span>900</span></div>
+  <h1 class="grid grid-cols-[1fr,auto]">
+    Theme preview
+
+    <Switch
+      checked={showDarkTheme}
+      on:change={(e) => (showDarkTheme = e.target.checked)}
+      let:checked
+    >
+      {#if checked}
+        <Icon data={mdiWeatherNight} size=".8rem" class="text-primary" />
+      {:else}
+        <Icon data={mdiWhiteBalanceSunny} size=".8rem" class="text-primary" />
+      {/if}
+    </Switch>
+  </h1>
+
+  <div
+    class="bg-surface-100 border rounded py-2 px-3"
+    style:color={previewTheme?.['color-scheme'] === 'dark' ? 'white' : 'black'}
+    use:styleProps={previewTheme ? processThemeColors(previewTheme, 'hsl') : {}}
+  >
+    <div>
+      <div class="text-xl font-bold mb-2">Semantic colors</div>
+
+      <div class="grid grid-cols-xs gap-3">
+        <div class="swatch">
+          <div class="bg-primary text-primary-content name">Primary</div>
+          <div class="bg-primary-50 shade"><span>50</span></div>
+          <div class="bg-primary-100 shade"><span>100</span></div>
+          <div class="bg-primary-200 shade"><span>200</span></div>
+          <div class="bg-primary-300 shade"><span>300</span></div>
+          <div class="bg-primary-400 shade"><span>400</span></div>
+          <div class="bg-primary-500 shade"><span>500</span></div>
+          <div class="bg-primary-600 shade"><span>600</span></div>
+          <div class="bg-primary-700 shade"><span>700</span></div>
+          <div class="bg-primary-800 shade"><span>800</span></div>
+          <div class="bg-primary-900 shade"><span>900</span></div>
+        </div>
+
+        <div class="swatch">
+          <div class="bg-secondary text-secondary-content name">Secondary</div>
+          <div class="bg-secondary-50 shade"><span>50</span></div>
+          <div class="bg-secondary-100 shade"><span>100</span></div>
+          <div class="bg-secondary-200 shade"><span>200</span></div>
+          <div class="bg-secondary-300 shade"><span>300</span></div>
+          <div class="bg-secondary-400 shade"><span>400</span></div>
+          <div class="bg-secondary-500 shade"><span>500</span></div>
+          <div class="bg-secondary-600 shade"><span>600</span></div>
+          <div class="bg-secondary-700 shade"><span>700</span></div>
+          <div class="bg-secondary-800 shade"><span>800</span></div>
+          <div class="bg-secondary-900 shade"><span>900</span></div>
+        </div>
+
+        <div class="swatch">
+          <div class="bg-accent text-accent-content name">Accent</div>
+          <div class="bg-accent-50 shade"><span>50</span></div>
+          <div class="bg-accent-100 shade"><span>100</span></div>
+          <div class="bg-accent-200 shade"><span>200</span></div>
+          <div class="bg-accent-300 shade"><span>300</span></div>
+          <div class="bg-accent-400 shade"><span>400</span></div>
+          <div class="bg-accent-500 shade"><span>500</span></div>
+          <div class="bg-accent-600 shade"><span>600</span></div>
+          <div class="bg-accent-700 shade"><span>700</span></div>
+          <div class="bg-accent-800 shade"><span>800</span></div>
+          <div class="bg-accent-900 shade"><span>900</span></div>
+        </div>
+
+        <div class="swatch">
+          <div class="bg-neutral text-neutral-content name">Neutral</div>
+          <div class="bg-neutral-50 shade"><span>50</span></div>
+          <div class="bg-neutral-100 shade"><span>100</span></div>
+          <div class="bg-neutral-200 shade"><span>200</span></div>
+          <div class="bg-neutral-300 shade"><span>300</span></div>
+          <div class="bg-neutral-400 shade"><span>400</span></div>
+          <div class="bg-neutral-500 shade"><span>500</span></div>
+          <div class="bg-neutral-600 shade"><span>600</span></div>
+          <div class="bg-neutral-700 shade"><span>700</span></div>
+          <div class="bg-neutral-800 shade"><span>800</span></div>
+          <div class="bg-neutral-900 shade"><span>900</span></div>
+        </div>
+      </div>
     </div>
 
-    <div class="swatch">
-      <div class="bg-danger text-danger-content name">Danger</div>
-      <div class="bg-danger-50 shade"><span>50</span></div>
-      <div class="bg-danger-100 shade"><span>100</span></div>
-      <div class="bg-danger-200 shade"><span>200</span></div>
-      <div class="bg-danger-300 shade"><span>300</span></div>
-      <div class="bg-danger-400 shade"><span>400</span></div>
-      <div class="bg-danger-500 shade"><span>500</span></div>
-      <div class="bg-danger-600 shade"><span>600</span></div>
-      <div class="bg-danger-700 shade"><span>700</span></div>
-      <div class="bg-danger-800 shade"><span>800</span></div>
-      <div class="bg-danger-900 shade"><span>900</span></div>
+    <div>
+      <div class="text-xl font-bold mt-4 mb-2">State colors</div>
+
+      <div class="grid grid-cols-xs gap-3">
+        <div class="swatch">
+          <div class="bg-info text-info-content name">Info</div>
+          <div class="bg-info-50 shade"><span>50</span></div>
+          <div class="bg-info-100 shade"><span>100</span></div>
+          <div class="bg-info-200 shade"><span>200</span></div>
+          <div class="bg-info-300 shade"><span>300</span></div>
+          <div class="bg-info-400 shade"><span>400</span></div>
+          <div class="bg-info-500 shade"><span>500</span></div>
+          <div class="bg-info-600 shade"><span>600</span></div>
+          <div class="bg-info-700 shade"><span>700</span></div>
+          <div class="bg-info-800 shade"><span>800</span></div>
+          <div class="bg-info-900 shade"><span>900</span></div>
+        </div>
+
+        <div class="swatch">
+          <div class="bg-success text-success-content name">Success</div>
+          <div class="bg-success-50 shade"><span>50</span></div>
+          <div class="bg-success-100 shade"><span>100</span></div>
+          <div class="bg-success-200 shade"><span>200</span></div>
+          <div class="bg-success-300 shade"><span>300</span></div>
+          <div class="bg-success-400 shade"><span>400</span></div>
+          <div class="bg-success-500 shade"><span>500</span></div>
+          <div class="bg-success-600 shade"><span>600</span></div>
+          <div class="bg-success-700 shade"><span>700</span></div>
+          <div class="bg-success-800 shade"><span>800</span></div>
+          <div class="bg-success-900 shade"><span>900</span></div>
+        </div>
+
+        <div class="swatch">
+          <div class="bg-warning text-warning-content name">Warning</div>
+          <div class="bg-warning-50 shade"><span>50</span></div>
+          <div class="bg-warning-100 shade"><span>100</span></div>
+          <div class="bg-warning-200 shade"><span>200</span></div>
+          <div class="bg-warning-300 shade"><span>300</span></div>
+          <div class="bg-warning-400 shade"><span>400</span></div>
+          <div class="bg-warning-500 shade"><span>500</span></div>
+          <div class="bg-warning-600 shade"><span>600</span></div>
+          <div class="bg-warning-700 shade"><span>700</span></div>
+          <div class="bg-warning-800 shade"><span>800</span></div>
+          <div class="bg-warning-900 shade"><span>900</span></div>
+        </div>
+
+        <div class="swatch">
+          <div class="bg-danger text-danger-content name">Danger</div>
+          <div class="bg-danger-50 shade"><span>50</span></div>
+          <div class="bg-danger-100 shade"><span>100</span></div>
+          <div class="bg-danger-200 shade"><span>200</span></div>
+          <div class="bg-danger-300 shade"><span>300</span></div>
+          <div class="bg-danger-400 shade"><span>400</span></div>
+          <div class="bg-danger-500 shade"><span>500</span></div>
+          <div class="bg-danger-600 shade"><span>600</span></div>
+          <div class="bg-danger-700 shade"><span>700</span></div>
+          <div class="bg-danger-800 shade"><span>800</span></div>
+          <div class="bg-danger-900 shade"><span>900</span></div>
+        </div>
+      </div>
     </div>
-  </div>
 
-  <div class="text-xl font-bold mt-4 mb-2">Surface colors</div>
+    <div>
+      <div class="text-xl font-bold mt-4 mb-2">Surface colors</div>
 
-  <div class="grid grid-cols-xs gap-3">
-    <div class="swatch">
-      <div class="bg-surface text-surface-content name">Surface</div>
-      <div class="bg-surface-100 shade"><span>100</span></div>
-      <div class="bg-surface-200 shade"><span>200</span></div>
-      <div class="bg-surface-300 shade"><span>300</span></div>
+      <div class="grid grid-cols-xs gap-3">
+        <div class="swatch">
+          <div class="bg-surface text-surface-content name">Surface</div>
+          <div class="bg-surface-100 shade"><span>100</span></div>
+          <div class="bg-surface-200 shade"><span>200</span></div>
+          <div class="bg-surface-300 shade"><span>300</span></div>
+        </div>
+      </div>
     </div>
   </div>
 </main>
diff --git a/packages/svelte-ux/src/routes/theme/ColorField.svelte b/packages/svelte-ux/src/routes/theme/ColorField.svelte
new file mode 100644
index 000000000..41b9f44df
--- /dev/null
+++ b/packages/svelte-ux/src/routes/theme/ColorField.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import { formatHex } from 'culori';
+
+  import TextField from '$lib/components/TextField.svelte';
+  import { colorVariableValue, type SupportedColorSpace } from '$lib/styles/theme';
+
+  const dispatch = createEventDispatcher<{
+    change: { value: string | undefined };
+  }>();
+
+  type $$Props = ComponentProps<TextField> & { value: string };
+
+  export let value: string;
+  export let colorSpace: SupportedColorSpace | 'hex' = 'rgb';
+
+  function formatColor(value: string, colorSpace: SupportedColorSpace | 'hex') {
+    if (value) {
+      if (colorSpace === 'hex') {
+        // Only format if not already formatted.  Fixes `#123` becoming `#112233`
+        return value.startsWith('#') ? value : formatHex(value);
+      } else {
+        const colorValue = colorVariableValue(value, colorSpace);
+        if (colorValue) {
+          return `${colorSpace}(${colorValue})`;
+        } else {
+          // Return original if unable to convert (i.e invalid such as `rgb( 20 30)`)
+          return value;
+        }
+      }
+    } else {
+      return value;
+    }
+  }
+</script>
+
+<TextField
+  value={formatColor(value, colorSpace)}
+  on:change={(e) => {
+    value = formatColor(e.detail.inputValue, colorSpace);
+    console.log(value, e.detail.inputValue);
+    dispatch('change', { value });
+  }}
+  {...$$restProps}
+>
+  <div slot="prepend" class="grid grid-stack mr-3">
+    <div class="w-6 h-6 border rounded" style:background={value} />
+    <input
+      type="color"
+      value={formatHex(value)}
+      on:input={(e) => {
+        value = formatColor(e.target.value, colorSpace);
+        dispatch('change', { value });
+      }}
+      class="w-6 h-6 rounded opacity-0"
+    />
+  </div>
+</TextField>
diff --git a/packages/svelte-ux/tailwind.config.cjs b/packages/svelte-ux/tailwind.config.cjs
index 5ad213868..a487cda9d 100644
--- a/packages/svelte-ux/tailwind.config.cjs
+++ b/packages/svelte-ux/tailwind.config.cjs
@@ -3,14 +3,10 @@ const colors = require('tailwindcss/colors');
 
 const svelteUx = require('./src/lib/plugins/tailwind.cjs');
 
-const { themes: daisyThemes } = require('./src/lib/styles/daisy.cjs');
-// const { themes: skeletonThemes } = require('./src/lib/styles/skeleton.cjs');
-
 module.exports = {
   content: ['./src/**/*.{html,svelte,md,ts,js}'],
   ux: {
-    themes: daisyThemes,
-    // themes: skeletonThemes,
+    themes: require('./themes.json'),
     // themes: {
     //   light: {
     //     primary: colors['blue']['500'],
diff --git a/packages/svelte-ux/themes.json b/packages/svelte-ux/themes.json
new file mode 100644
index 000000000..9b556338d
--- /dev/null
+++ b/packages/svelte-ux/themes.json
@@ -0,0 +1,1798 @@
+{
+  "light": {
+    "color-scheme": "light",
+    "primary": "oklch(49.12% 0.3096 275.75)",
+    "secondary": "oklch(69.71% 0.329 342.55)",
+    "secondary-content": "oklch(98.71% 0.0106 342.55)",
+    "accent": "oklch(76.76% 0.184 183.61)",
+    "neutral": "#2B3440",
+    "neutral-content": "#D7DDE4",
+    "surface-100": "oklch(100% 0 0)",
+    "surface-200": "#F2F2F2",
+    "surface-300": "#E5E6E6",
+    "surface-content": "#1f2937"
+  },
+  "dark": {
+    "color-scheme": "dark",
+    "primary": "oklch(65.69% 0.196 275.75)",
+    "secondary": "oklch(74.8% 0.26 342.55)",
+    "accent": "oklch(74.51% 0.167 183.61)",
+    "neutral": "#2a323c",
+    "neutral-content": "#A6ADBB",
+    "surface-100": "#1d232a",
+    "surface-200": "#191e24",
+    "surface-300": "#15191e",
+    "surface-content": "#A6ADBB"
+  },
+  "cupcake": {
+    "color-scheme": "light",
+    "primary": "#65c3c8",
+    "secondary": "#ef9fbc",
+    "accent": "#eeaf3a",
+    "neutral": "#291334",
+    "surface-100": "#faf7f5",
+    "surface-200": "#efeae6",
+    "surface-300": "#e7e2df",
+    "surface-content": "#291334",
+    "--rounded-btn": "1.9rem",
+    "--tab-border": "2px",
+    "--tab-radius": "0.7rem"
+  },
+  "bumblebee": {
+    "color-scheme": "light",
+    "primary": "oklch(89.51% 0.2132 96.61)",
+    "primary-content": "oklch(38.92% 0.046 96.61)",
+    "secondary": "oklch(80.39% 0.194 70.76)",
+    "secondary-content": "oklch(39.38% 0.068 70.76)",
+    "accent": "oklch(81.27% 0.157 56.52)",
+    "neutral": "oklch(12.75% 0.075 281.99)",
+    "surface-100": "oklch(100% 0 0)"
+  },
+  "emerald": {
+    "color-scheme": "light",
+    "primary": "#66cc8a",
+    "primary-content": "#223D30",
+    "secondary": "#377cfb",
+    "secondary-content": "#fff",
+    "accent": "#f68067",
+    "accent-content": "#000",
+    "neutral": "#333c4d",
+    "neutral-content": "#f9fafb",
+    "surface-100": "oklch(100% 0 0)",
+    "surface-content": "#333c4d",
+    "--animation-btn": "0",
+    "--animation-input": "0",
+    "--btn-focus-scale": "1"
+  },
+  "corporate": {
+    "color-scheme": "light",
+    "primary": "oklch(60.39% 0.228 269.1)",
+    "secondary": "#7b92b2",
+    "accent": "#67cba0",
+    "neutral": "#181a2a",
+    "neutral-content": "#edf2f7",
+    "surface-100": "oklch(100% 0 0)",
+    "surface-content": "#181a2a",
+    "--rounded-box": "0.25rem",
+    "--rounded-btn": ".125rem",
+    "--rounded-badge": ".125rem",
+    "--tab-radius": "0.25rem",
+    "--animation-btn": "0",
+    "--animation-input": "0",
+    "--btn-focus-scale": "1"
+  },
+  "synthwave": {
+    "color-scheme": "dark",
+    "primary": "#e779c1",
+    "secondary": "#58c7f3",
+    "accent": "oklch(88.04% 0.206 93.72)",
+    "neutral": "#221551",
+    "neutral-content": "#f9f7fd",
+    "surface-100": "#1a103d",
+    "surface-content": "#f9f7fd",
+    "info": "#53c0f3",
+    "info-content": "#201047",
+    "success": "#71ead2",
+    "success-content": "#201047",
+    "warning": "#eace6c",
+    "warning-content": "#201047",
+    "danger": "#ec8c78",
+    "danger-content": "#201047"
+  },
+  "retro": {
+    "color-scheme": "light",
+    "primary": "#ef9995",
+    "primary-content": "#282425",
+    "secondary": "#a4cbb4",
+    "secondary-content": "#282425",
+    "accent": "#DC8850",
+    "accent-content": "#282425",
+    "neutral": "#2E282A",
+    "neutral-content": "#EDE6D4",
+    "surface-100": "#ece3ca",
+    "surface-200": "#e4d8b4",
+    "surface-300": "#DBCA9A",
+    "surface-content": "#282425",
+    "info": "#2563eb",
+    "success": "#16a34a",
+    "warning": "#d97706",
+    "danger": "oklch(65.72% 0.199 27.33)",
+    "--rounded-box": "0.4rem",
+    "--rounded-btn": "0.4rem",
+    "--rounded-badge": "0.4rem",
+    "--tab-radius": "0.4rem"
+  },
+  "cyberpunk": {
+    "color-scheme": "light",
+    "fontFamily": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
+    "primary": "oklch(74.22% 0.209 6.35)",
+    "secondary": "oklch(83.33% 0.184 204.72)",
+    "accent": "oklch(71.86% 0.2176 310.43)",
+    "neutral": "oklch(23.04% 0.065 269.31)",
+    "neutral-content": "oklch(94.51% 0.179 104.32)",
+    "surface-100": "oklch(94.51% 0.179 104.32)",
+    "--rounded-box": "0",
+    "--rounded-btn": "0",
+    "--rounded-badge": "0",
+    "--tab-radius": "0"
+  },
+  "valentine": {
+    "color-scheme": "light",
+    "primary": "#e96d7b",
+    "secondary": "#a991f7",
+    "accent": "#66b1b3",
+    "neutral": "#af4670",
+    "neutral-content": "#f0d6e8",
+    "surface-100": "#fae7f4",
+    "surface-content": "#632c3b",
+    "info": "#2563eb",
+    "success": "#16a34a",
+    "warning": "#d97706",
+    "danger": "oklch(73.07% 0.207 27.33)",
+    "--rounded-btn": "1.9rem",
+    "--tab-radius": "0.7rem"
+  },
+  "halloween": {
+    "color-scheme": "dark",
+    "primary": "oklch(77.48% 0.204 60.62)",
+    "primary-content": "#131616",
+    "secondary": "oklch(45.98% 0.248 305.03)",
+    "accent": "oklch(64.8% 0.223 136.07347934356451)",
+    "accent-content": "#000000",
+    "neutral": "#2F1B05",
+    "surface-100": "#212121",
+    "info": "#2563eb",
+    "success": "#16a34a",
+    "warning": "#d97706",
+    "danger": "oklch(65.72% 0.199 27.33)"
+  },
+  "garden": {
+    "color-scheme": "light",
+    "primary": "oklch(62.45% 0.278 3.8363600743192197)",
+    "primary-content": "#fff",
+    "secondary": "#8E4162",
+    "accent": "#5c7f67",
+    "neutral": "#291E00",
+    "neutral-content": "#e9e7e7",
+    "surface-100": "#e9e7e7",
+    "surface-content": "#100f0f"
+  },
+  "forest": {
+    "color-scheme": "dark",
+    "primary": "#1eb854",
+    "primary-content": "#000000",
+    "secondary": "#1DB88E",
+    "accent": "#1DB8AB",
+    "neutral": "#19362D",
+    "surface-100": "#171212",
+    "--rounded-btn": "1.9rem"
+  },
+  "aqua": {
+    "color-scheme": "dark",
+    "primary": "#09ecf3",
+    "primary-content": "#005355",
+    "secondary": "#966fb3",
+    "accent": "#ffe999",
+    "neutral": "#3b8ac4",
+    "surface-100": "#345da7",
+    "info": "#2563eb",
+    "success": "#16a34a",
+    "warning": "#d97706",
+    "danger": "oklch(73.95% 0.19 27.33)"
+  },
+  "lofi": {
+    "color-scheme": "light",
+    "primary": "#0D0D0D",
+    "primary-content": "oklch(100% 0 0)",
+    "secondary": "#1A1919",
+    "secondary-content": "oklch(100% 0 0)",
+    "accent": "#262626",
+    "accent-content": "oklch(100% 0 0)",
+    "neutral": "#000000",
+    "neutral-content": "oklch(100% 0 0)",
+    "surface-100": "oklch(100% 0 0)",
+    "surface-200": "#F2F2F2",
+    "surface-300": "#E6E5E5",
+    "surface-content": "#000000",
+    "info": "oklch(79.54% 0.103 205.9)",
+    "success": "oklch(90.13% 0.153 164.14)",
+    "warning": "oklch(88.37% 0.135 79.94)",
+    "danger": "oklch(78.66% 0.15 28.47)",
+    "--rounded-box": "0.25rem",
+    "--rounded-btn": "0.125rem",
+    "--rounded-badge": "0.125rem",
+    "--tab-radius": "0.125rem",
+    "--animation-btn": "0",
+    "--animation-input": "0",
+    "--btn-focus-scale": "1"
+  },
+  "pastel": {
+    "color-scheme": "light",
+    "primary": "#d1c1d7",
+    "secondary": "#f6cbd1",
+    "accent": "#b4e9d6",
+    "neutral": "#70acc7",
+    "surface-100": "oklch(100% 0 0)",
+    "surface-200": "#f9fafb",
+    "surface-300": "#d1d5db",
+    "--rounded-btn": "1.9rem",
+    "--tab-radius": "0.7rem"
+  },
+  "fantasy": {
+    "color-scheme": "light",
+    "primary": "oklch(37.45% 0.189 325.02)",
+    "secondary": "oklch(53.92% 0.162 241.36)",
+    "accent": "oklch(75.98% 0.204 56.72)",
+    "neutral": "#1f2937",
+    "surface-100": "oklch(100% 0 0)",
+    "surface-content": "#1f2937"
+  },
+  "wireframe": {
+    "color-scheme": "light",
+    "fontFamily": "Chalkboard,comic sans ms,'sans-serif'",
+    "primary": "#b8b8b8",
+    "secondary": "#b8b8b8",
+    "accent": "#b8b8b8",
+    "neutral": "#ebebeb",
+    "surface-100": "oklch(100% 0 0)",
+    "surface-200": "#eeeeee",
+    "surface-300": "#dddddd",
+    "info": "#0000ff",
+    "success": "#008000",
+    "warning": "#a6a659",
+    "danger": "#ff0000",
+    "--rounded-box": "0.2rem",
+    "--rounded-btn": "0.2rem",
+    "--rounded-badge": "0.2rem",
+    "--tab-radius": "0.2rem"
+  },
+  "black": {
+    "color-scheme": "dark",
+    "primary": "#373737",
+    "secondary": "#373737",
+    "accent": "#373737",
+    "surface-100": "#000000",
+    "surface-200": "#141414",
+    "surface-300": "#262626",
+    "surface-content": "#d6d6d6",
+    "neutral": "#373737",
+    "info": "#0000ff",
+    "success": "#008000",
+    "warning": "#ffff00",
+    "danger": "#ff0000",
+    "--rounded-box": "0",
+    "--rounded-btn": "0",
+    "--rounded-badge": "0",
+    "--animation-btn": "0",
+    "--animation-input": "0",
+    "--btn-focus-scale": "1",
+    "--tab-radius": "0"
+  },
+  "luxury": {
+    "color-scheme": "dark",
+    "primary": "oklch(100% 0 0)",
+    "secondary": "#152747",
+    "accent": "#513448",
+    "neutral": "#331800",
+    "neutral-content": "#FFE7A3",
+    "surface-100": "#09090b",
+    "surface-200": "#171618",
+    "surface-300": "#2e2d2f",
+    "surface-content": "#dca54c",
+    "info": "#66c6ff",
+    "success": "#87d039",
+    "warning": "#e2d562",
+    "danger": "#ff6f6f"
+  },
+  "dracula": {
+    "color-scheme": "dark",
+    "primary": "#ff79c6",
+    "secondary": "#bd93f9",
+    "accent": "#ffb86c",
+    "neutral": "#414558",
+    "surface-100": "#282a36",
+    "surface-content": "#f8f8f2",
+    "info": "#8be9fd",
+    "success": "#50fa7b",
+    "warning": "#f1fa8c",
+    "danger": "#ff5555"
+  },
+  "cmyk": {
+    "color-scheme": "light",
+    "primary": "#45AEEE",
+    "secondary": "#E8488A",
+    "accent": "#FFF232",
+    "neutral": "#1a1a1a",
+    "surface-100": "oklch(100% 0 0)",
+    "info": "#4AA8C0",
+    "success": "#823290",
+    "warning": "#EE8133",
+    "danger": "#E93F33"
+  },
+  "autumn": {
+    "color-scheme": "light",
+    "primary": "#8C0327",
+    "secondary": "#D85251",
+    "accent": "#D59B6A",
+    "neutral": "#826A5C",
+    "surface-100": "#f1f1f1",
+    "info": "#42ADBB",
+    "success": "#499380",
+    "warning": "#E97F14",
+    "danger": "oklch(53.07% 0.241 24.16)"
+  },
+  "business": {
+    "color-scheme": "dark",
+    "primary": "#1C4E80",
+    "secondary": "#7C909A",
+    "accent": "#EA6947",
+    "neutral": "#23282E",
+    "surface-100": "#202020",
+    "info": "#0091D5",
+    "success": "#6BB187",
+    "warning": "#DBAE59",
+    "danger": "#AC3E31",
+    "--rounded-box": "0.25rem",
+    "--rounded-btn": ".125rem",
+    "--rounded-badge": ".125rem"
+  },
+  "acid": {
+    "color-scheme": "light",
+    "primary": "oklch(71.9% 0.357 330.7595734057481)",
+    "secondary": "oklch(73.37% 0.224 48.25087840015526)",
+    "accent": "oklch(92.78% 0.264 122.96295065960891)",
+    "neutral": "oklch(21.31% 0.128 278.68)",
+    "surface-100": "#fafafa",
+    "info": "oklch(60.72% 0.227 252.05)",
+    "success": "oklch(85.72% 0.266 158.53)",
+    "warning": "oklch(91.01% 0.212 100.5)",
+    "danger": "oklch(64.84% 0.293 29.34918758658804)",
+    "--rounded-box": "1.25rem",
+    "--rounded-btn": "1rem",
+    "--rounded-badge": "1rem",
+    "--tab-radius": "0.7rem"
+  },
+  "lemonade": {
+    "color-scheme": "light",
+    "primary": "oklch(58.92% 0.199 134.6)",
+    "secondary": "oklch(77.75% 0.196 111.09)",
+    "accent": "oklch(85.39% 0.201 100.73)",
+    "neutral": "oklch(30.98% 0.075 108.6)",
+    "surface-100": "oklch(98.71% 0.02 123.72)",
+    "info": "oklch(86.19% 0.047 224.14)",
+    "success": "oklch(86.19% 0.047 157.85)",
+    "warning": "oklch(86.19% 0.047 102.15)",
+    "danger": "oklch(86.19% 0.047 25.85)"
+  },
+  "night": {
+    "color-scheme": "dark",
+    "primary": "#38bdf8",
+    "secondary": "#818CF8",
+    "accent": "#F471B5",
+    "neutral": "#1E293B",
+    "surface-100": "#0F172A",
+    "info": "#0CA5E9",
+    "info-content": "#000000",
+    "success": "#2DD4BF",
+    "warning": "#F4BF50",
+    "danger": "#FB7085"
+  },
+  "coffee": {
+    "color-scheme": "dark",
+    "primary": "#DB924B",
+    "secondary": "#263E3F",
+    "accent": "#10576D",
+    "neutral": "#120C12",
+    "surface-100": "#20161F",
+    "surface-content": "#c59f60",
+    "info": "#8DCAC1",
+    "success": "#9DB787",
+    "warning": "#FFD25F",
+    "danger": "#FC9581"
+  },
+  "winter": {
+    "color-scheme": "light",
+    "primary": "oklch(56.86% 0.255 257.57)",
+    "secondary": "#463AA2",
+    "accent": "#C148AC",
+    "neutral": "#021431",
+    "surface-100": "oklch(100% 0 0)",
+    "surface-200": "#F2F7FF",
+    "surface-300": "#E3E9F4",
+    "surface-content": "#394E6A",
+    "info": "#93E7FB",
+    "success": "#81CFD1",
+    "warning": "#EFD7BB",
+    "danger": "#E58B8B"
+  },
+  "dim": {
+    "color-scheme": "dark",
+    "primary": "#9FE88D",
+    "secondary": "#FF7D5C",
+    "accent": "#C792E9",
+    "neutral": "#1c212b",
+    "neutral-content": "#B2CCD6",
+    "surface-100": "#2A303C",
+    "surface-200": "#242933",
+    "surface-300": "#20252E",
+    "surface-content": "#B2CCD6",
+    "info": "#28ebff",
+    "success": "#62efbd",
+    "warning": "#efd057",
+    "danger": "#ffae9b"
+  },
+  "nord": {
+    "color-scheme": "light",
+    "primary": "#5E81AC",
+    "secondary": "#81A1C1",
+    "accent": "#88C0D0",
+    "neutral": "#4C566A",
+    "neutral-content": "#D8DEE9",
+    "surface-100": "#ECEFF4",
+    "surface-200": "#E5E9F0",
+    "surface-300": "#D8DEE9",
+    "surface-content": "#2E3440",
+    "info": "#B48EAD",
+    "success": "#A3BE8C",
+    "warning": "#EBCB8B",
+    "danger": "#BF616A",
+    "--rounded-box": "0.4rem",
+    "--rounded-btn": "0.2rem",
+    "--rounded-badge": "0.4rem",
+    "--tab-radius": "0.2rem"
+  },
+  "sunset": {
+    "color-scheme": "dark",
+    "primary": "#FF865B",
+    "secondary": "#FD6F9C",
+    "accent": "#B387FA",
+    "neutral": "oklch(26% 0.019 237.69)",
+    "neutral-content": "oklch(70% 0.019 237.69)",
+    "surface-100": "oklch(22% 0.019 237.69)",
+    "surface-200": "oklch(20% 0.019 237.69)",
+    "surface-300": "oklch(18% 0.019 237.69)",
+    "surface-content": "#9fb9d0",
+    "info": "#89e0eb",
+    "success": "#addfad",
+    "warning": "#f1c891",
+    "danger": "#ffbbbd",
+    "--rounded-box": "1.2rem",
+    "--rounded-btn": "0.8rem",
+    "--rounded-badge": "0.4rem",
+    "--tab-radius": "0.7rem"
+  },
+  "skeleton-light": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(0 0 0)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(0 0 0)",
+    "primary-100": "rgb(207 241 230)",
+    "primary-200": "rgb(195 238 224)",
+    "primary-300": "rgb(159 227 205)",
+    "primary-400": "rgb(87 207 167)",
+    "primary-500": "rgb(15 186 129)",
+    "primary-600": "rgb(14 167 116)",
+    "primary-700": "rgb(11 140 97)",
+    "primary-800": "rgb(9 112 77)",
+    "primary-900": "rgb(7 91 63)",
+    "secondary-100": "rgb(220 218 250)",
+    "secondary-200": "rgb(211 209 249)",
+    "secondary-300": "rgb(185 181 245)",
+    "secondary-400": "rgb(132 126 237)",
+    "secondary-500": "rgb(79 70 229)",
+    "secondary-600": "rgb(71 63 206)",
+    "secondary-700": "rgb(59 53 172)",
+    "secondary-800": "rgb(47 42 137)",
+    "secondary-900": "rgb(39 34 112)",
+    "accent-100": "rgb(207 237 251)",
+    "accent-200": "rgb(195 233 250)",
+    "accent-300": "rgb(159 219 246)",
+    "accent-400": "rgb(86 192 240)",
+    "accent-500": "rgb(14 165 233)",
+    "accent-600": "rgb(13 149 210)",
+    "accent-700": "rgb(11 124 175)",
+    "accent-800": "rgb(8 99 140)",
+    "accent-900": "rgb(7 81 114)",
+    "success-100": "rgb(230 245 208)",
+    "success-200": "rgb(224 242 197)",
+    "success-300": "rgb(206 235 162)",
+    "success-400": "rgb(169 219 92)",
+    "success-500": "rgb(132 204 22)",
+    "success-600": "rgb(119 184 20)",
+    "success-700": "rgb(99 153 17)",
+    "success-800": "rgb(79 122 13)",
+    "success-900": "rgb(65 100 11)",
+    "warning-100": "rgb(251 240 206)",
+    "warning-200": "rgb(250 236 193)",
+    "warning-300": "rgb(247 225 156)",
+    "warning-400": "rgb(240 202 82)",
+    "warning-500": "rgb(234 179 8)",
+    "warning-600": "rgb(211 161 7)",
+    "warning-700": "rgb(176 134 6)",
+    "warning-800": "rgb(140 107 5)",
+    "warning-900": "rgb(115 88 4)",
+    "danger-100": "rgb(246 209 228)",
+    "danger-200": "rgb(244 198 221)",
+    "danger-300": "rgb(238 163 200)",
+    "danger-400": "rgb(225 94 159)",
+    "danger-500": "rgb(212 25 118)",
+    "danger-600": "rgb(191 23 106)",
+    "danger-700": "rgb(159 19 89)",
+    "danger-800": "rgb(127 15 71)",
+    "danger-900": "rgb(104 12 58)",
+    "surface-100": "rgb(228 230 238)",
+    "surface-200": "rgb(219 222 233)",
+    "surface-300": "rgb(210 214 227)",
+    "surface-400": "rgb(128 140 177)",
+    "surface-500": "rgb(73 90 143)",
+    "surface-600": "rgb(66 81 129)",
+    "surface-700": "rgb(55 68 107)",
+    "surface-800": "rgb(44 54 86)",
+    "surface-900": "rgb(36 44 70)",
+    "color-scheme": "light"
+  },
+  "skeleton-dark": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(0 0 0)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(255 255 255)",
+    "primary-100": "rgb(207 241 230)",
+    "primary-200": "rgb(195 238 224)",
+    "primary-300": "rgb(159 227 205)",
+    "primary-400": "rgb(87 207 167)",
+    "primary-500": "rgb(15 186 129)",
+    "primary-600": "rgb(14 167 116)",
+    "primary-700": "rgb(11 140 97)",
+    "primary-800": "rgb(9 112 77)",
+    "primary-900": "rgb(7 91 63)",
+    "secondary-100": "rgb(220 218 250)",
+    "secondary-200": "rgb(211 209 249)",
+    "secondary-300": "rgb(185 181 245)",
+    "secondary-400": "rgb(132 126 237)",
+    "secondary-500": "rgb(79 70 229)",
+    "secondary-600": "rgb(71 63 206)",
+    "secondary-700": "rgb(59 53 172)",
+    "secondary-800": "rgb(47 42 137)",
+    "secondary-900": "rgb(39 34 112)",
+    "accent-100": "rgb(207 237 251)",
+    "accent-200": "rgb(195 233 250)",
+    "accent-300": "rgb(159 219 246)",
+    "accent-400": "rgb(86 192 240)",
+    "accent-500": "rgb(14 165 233)",
+    "accent-600": "rgb(13 149 210)",
+    "accent-700": "rgb(11 124 175)",
+    "accent-800": "rgb(8 99 140)",
+    "accent-900": "rgb(7 81 114)",
+    "success-100": "rgb(230 245 208)",
+    "success-200": "rgb(224 242 197)",
+    "success-300": "rgb(206 235 162)",
+    "success-400": "rgb(169 219 92)",
+    "success-500": "rgb(132 204 22)",
+    "success-600": "rgb(119 184 20)",
+    "success-700": "rgb(99 153 17)",
+    "success-800": "rgb(79 122 13)",
+    "success-900": "rgb(65 100 11)",
+    "warning-100": "rgb(251 240 206)",
+    "warning-200": "rgb(250 236 193)",
+    "warning-300": "rgb(247 225 156)",
+    "warning-400": "rgb(240 202 82)",
+    "warning-500": "rgb(234 179 8)",
+    "warning-600": "rgb(211 161 7)",
+    "warning-700": "rgb(176 134 6)",
+    "warning-800": "rgb(140 107 5)",
+    "warning-900": "rgb(115 88 4)",
+    "danger-100": "rgb(246 209 228)",
+    "danger-200": "rgb(244 198 221)",
+    "danger-300": "rgb(238 163 200)",
+    "danger-400": "rgb(225 94 159)",
+    "danger-500": "rgb(212 25 118)",
+    "danger-600": "rgb(191 23 106)",
+    "danger-700": "rgb(159 19 89)",
+    "danger-800": "rgb(127 15 71)",
+    "danger-900": "rgb(104 12 58)",
+    "surface-100": "rgb(55 68 107)",
+    "surface-200": "rgb(44 54 86)",
+    "surface-300": "rgb(36 44 70)",
+    "surface-400": "rgb(128 140 177)",
+    "surface-500": "rgb(73 90 143)",
+    "surface-600": "rgb(66 81 129)",
+    "surface-700": "rgb(55 68 107)",
+    "surface-800": "rgb(44 54 86)",
+    "surface-900": "rgb(36 44 70)",
+    "color-scheme": "dark"
+  },
+  "wintry": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(0 0 0)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(0 0 0)",
+    "primary-100": "rgb(219 234 254)",
+    "primary-200": "rgb(191 219 254)",
+    "primary-300": "rgb(147 197 253)",
+    "primary-400": "rgb(96 165 250)",
+    "primary-500": "rgb(59 130 246)",
+    "primary-600": "rgb(37 99 235)",
+    "primary-700": "rgb(29 78 216)",
+    "primary-800": "rgb(30 64 175)",
+    "primary-900": "rgb(30 58 138)",
+    "secondary-100": "rgb(224 242 254)",
+    "secondary-200": "rgb(186 230 253)",
+    "secondary-300": "rgb(125 211 252)",
+    "secondary-400": "rgb(56 189 248)",
+    "secondary-500": "rgb(14 165 233)",
+    "secondary-600": "rgb(2 132 199)",
+    "secondary-700": "rgb(3 105 161)",
+    "secondary-800": "rgb(7 89 133)",
+    "secondary-900": "rgb(12 74 110)",
+    "accent-100": "rgb(224 231 255)",
+    "accent-200": "rgb(199 210 254)",
+    "accent-300": "rgb(165 180 252)",
+    "accent-400": "rgb(129 140 248)",
+    "accent-500": "rgb(99 102 241)",
+    "accent-600": "rgb(79 70 229)",
+    "accent-700": "rgb(67 56 202)",
+    "accent-800": "rgb(55 48 163)",
+    "accent-900": "rgb(49 46 129)",
+    "success-100": "rgb(230 245 208)",
+    "success-200": "rgb(224 242 197)",
+    "success-300": "rgb(206 235 162)",
+    "success-400": "rgb(169 219 92)",
+    "success-500": "rgb(132 204 22)",
+    "success-600": "rgb(119 184 20)",
+    "success-700": "rgb(99 153 17)",
+    "success-800": "rgb(79 122 13)",
+    "success-900": "rgb(65 100 11)",
+    "warning-100": "rgb(251 240 206)",
+    "warning-200": "rgb(250 236 193)",
+    "warning-300": "rgb(247 225 156)",
+    "warning-400": "rgb(240 202 82)",
+    "warning-500": "rgb(234 179 8)",
+    "warning-600": "rgb(211 161 7)",
+    "warning-700": "rgb(176 134 6)",
+    "warning-800": "rgb(140 107 5)",
+    "warning-900": "rgb(115 88 4)",
+    "danger-100": "rgb(246 209 228)",
+    "danger-200": "rgb(244 198 221)",
+    "danger-300": "rgb(238 163 200)",
+    "danger-400": "rgb(225 94 159)",
+    "danger-500": "rgb(212 25 118)",
+    "danger-600": "rgb(191 23 106)",
+    "danger-700": "rgb(159 19 89)",
+    "danger-800": "rgb(127 15 71)",
+    "danger-900": "rgb(104 12 58)",
+    "surface-100": "rgb(249 250 251)",
+    "surface-200": "rgb(243 244 246)",
+    "surface-300": "rgb(229 231 235)",
+    "surface-400": "rgb(156 163 175)",
+    "surface-500": "rgb(107 114 128)",
+    "surface-600": "rgb(75 85 99)",
+    "surface-700": "rgb(55 65 81)",
+    "surface-800": "rgb(31 41 55)",
+    "surface-900": "rgb(17 24 39)",
+    "color-scheme": "light"
+  },
+  "wintry-dark": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(0 0 0)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(255 255 255)",
+    "primary-100": "rgb(219 234 254)",
+    "primary-200": "rgb(191 219 254)",
+    "primary-300": "rgb(147 197 253)",
+    "primary-400": "rgb(96 165 250)",
+    "primary-500": "rgb(59 130 246)",
+    "primary-600": "rgb(37 99 235)",
+    "primary-700": "rgb(29 78 216)",
+    "primary-800": "rgb(30 64 175)",
+    "primary-900": "rgb(30 58 138)",
+    "secondary-100": "rgb(224 242 254)",
+    "secondary-200": "rgb(186 230 253)",
+    "secondary-300": "rgb(125 211 252)",
+    "secondary-400": "rgb(56 189 248)",
+    "secondary-500": "rgb(14 165 233)",
+    "secondary-600": "rgb(2 132 199)",
+    "secondary-700": "rgb(3 105 161)",
+    "secondary-800": "rgb(7 89 133)",
+    "secondary-900": "rgb(12 74 110)",
+    "accent-100": "rgb(224 231 255)",
+    "accent-200": "rgb(199 210 254)",
+    "accent-300": "rgb(165 180 252)",
+    "accent-400": "rgb(129 140 248)",
+    "accent-500": "rgb(99 102 241)",
+    "accent-600": "rgb(79 70 229)",
+    "accent-700": "rgb(67 56 202)",
+    "accent-800": "rgb(55 48 163)",
+    "accent-900": "rgb(49 46 129)",
+    "success-100": "rgb(230 245 208)",
+    "success-200": "rgb(224 242 197)",
+    "success-300": "rgb(206 235 162)",
+    "success-400": "rgb(169 219 92)",
+    "success-500": "rgb(132 204 22)",
+    "success-600": "rgb(119 184 20)",
+    "success-700": "rgb(99 153 17)",
+    "success-800": "rgb(79 122 13)",
+    "success-900": "rgb(65 100 11)",
+    "warning-100": "rgb(251 240 206)",
+    "warning-200": "rgb(250 236 193)",
+    "warning-300": "rgb(247 225 156)",
+    "warning-400": "rgb(240 202 82)",
+    "warning-500": "rgb(234 179 8)",
+    "warning-600": "rgb(211 161 7)",
+    "warning-700": "rgb(176 134 6)",
+    "warning-800": "rgb(140 107 5)",
+    "warning-900": "rgb(115 88 4)",
+    "danger-100": "rgb(246 209 228)",
+    "danger-200": "rgb(244 198 221)",
+    "danger-300": "rgb(238 163 200)",
+    "danger-400": "rgb(225 94 159)",
+    "danger-500": "rgb(212 25 118)",
+    "danger-600": "rgb(191 23 106)",
+    "danger-700": "rgb(159 19 89)",
+    "danger-800": "rgb(127 15 71)",
+    "danger-900": "rgb(104 12 58)",
+    "surface-100": "rgb(55 65 81)",
+    "surface-200": "rgb(31 41 55)",
+    "surface-300": "rgb(17 24 39)",
+    "surface-400": "rgb(156 163 175)",
+    "surface-500": "rgb(107 114 128)",
+    "surface-600": "rgb(75 85 99)",
+    "surface-700": "rgb(55 65 81)",
+    "surface-800": "rgb(31 41 55)",
+    "surface-900": "rgb(17 24 39)",
+    "color-scheme": "dark"
+  },
+  "modern": {
+    "primary-content": "rgb(255 255 255)",
+    "secondary-content": "rgb(0 0 0)",
+    "accent-content": "rgb(0 0 0)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(0 0 0)",
+    "primary-100": "rgb(251 218 235)",
+    "primary-200": "rgb(250 209 230)",
+    "primary-300": "rgb(247 182 214)",
+    "primary-400": "rgb(242 127 184)",
+    "primary-500": "rgb(236 72 153)",
+    "primary-600": "rgb(212 65 138)",
+    "primary-700": "rgb(177 54 115)",
+    "primary-800": "rgb(142 43 92)",
+    "primary-900": "rgb(116 35 75)",
+    "secondary-100": "rgb(205 240 246)",
+    "secondary-200": "rgb(193 237 244)",
+    "secondary-300": "rgb(155 226 238)",
+    "secondary-400": "rgb(81 204 225)",
+    "secondary-500": "rgb(6 182 212)",
+    "secondary-600": "rgb(5 164 191)",
+    "secondary-700": "rgb(5 137 159)",
+    "secondary-800": "rgb(4 109 127)",
+    "secondary-900": "rgb(3 89 104)",
+    "accent-100": "rgb(208 241 237)",
+    "accent-200": "rgb(196 237 233)",
+    "accent-300": "rgb(161 227 219)",
+    "accent-400": "rgb(91 205 193)",
+    "accent-500": "rgb(20 184 166)",
+    "accent-600": "rgb(18 166 149)",
+    "accent-700": "rgb(15 138 125)",
+    "accent-800": "rgb(12 110 100)",
+    "accent-900": "rgb(10 90 81)",
+    "success-100": "rgb(230 245 208)",
+    "success-200": "rgb(224 242 197)",
+    "success-300": "rgb(206 235 162)",
+    "success-400": "rgb(169 219 92)",
+    "success-500": "rgb(132 204 22)",
+    "success-600": "rgb(119 184 20)",
+    "success-700": "rgb(99 153 17)",
+    "success-800": "rgb(79 122 13)",
+    "success-900": "rgb(65 100 11)",
+    "warning-100": "rgb(251 240 206)",
+    "warning-200": "rgb(250 236 193)",
+    "warning-300": "rgb(247 225 156)",
+    "warning-400": "rgb(240 202 82)",
+    "warning-500": "rgb(234 179 8)",
+    "warning-600": "rgb(211 161 7)",
+    "warning-700": "rgb(176 134 6)",
+    "warning-800": "rgb(140 107 5)",
+    "warning-900": "rgb(115 88 4)",
+    "danger-100": "rgb(252 218 218)",
+    "danger-200": "rgb(251 208 208)",
+    "danger-300": "rgb(249 180 180)",
+    "danger-400": "rgb(244 124 124)",
+    "danger-500": "rgb(239 68 68)",
+    "danger-600": "rgb(215 61 61)",
+    "danger-700": "rgb(179 51 51)",
+    "danger-800": "rgb(143 41 41)",
+    "danger-900": "rgb(117 33 33)",
+    "surface-100": "rgb(232 232 253)",
+    "surface-200": "rgb(224 224 252)",
+    "surface-300": "rgb(216 217 252)",
+    "surface-400": "rgb(146 148 245)",
+    "surface-500": "rgb(99 102 241)",
+    "surface-600": "rgb(89 92 217)",
+    "surface-700": "rgb(74 77 181)",
+    "surface-800": "rgb(59 61 145)",
+    "surface-900": "rgb(49 50 118)",
+    "color-scheme": "light"
+  },
+  "modern-dark": {
+    "primary-content": "rgb(255 255 255)",
+    "secondary-content": "rgb(0 0 0)",
+    "accent-content": "rgb(0 0 0)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(255 255 255)",
+    "primary-100": "rgb(251 218 235)",
+    "primary-200": "rgb(250 209 230)",
+    "primary-300": "rgb(247 182 214)",
+    "primary-400": "rgb(242 127 184)",
+    "primary-500": "rgb(236 72 153)",
+    "primary-600": "rgb(212 65 138)",
+    "primary-700": "rgb(177 54 115)",
+    "primary-800": "rgb(142 43 92)",
+    "primary-900": "rgb(116 35 75)",
+    "secondary-100": "rgb(205 240 246)",
+    "secondary-200": "rgb(193 237 244)",
+    "secondary-300": "rgb(155 226 238)",
+    "secondary-400": "rgb(81 204 225)",
+    "secondary-500": "rgb(6 182 212)",
+    "secondary-600": "rgb(5 164 191)",
+    "secondary-700": "rgb(5 137 159)",
+    "secondary-800": "rgb(4 109 127)",
+    "secondary-900": "rgb(3 89 104)",
+    "accent-100": "rgb(208 241 237)",
+    "accent-200": "rgb(196 237 233)",
+    "accent-300": "rgb(161 227 219)",
+    "accent-400": "rgb(91 205 193)",
+    "accent-500": "rgb(20 184 166)",
+    "accent-600": "rgb(18 166 149)",
+    "accent-700": "rgb(15 138 125)",
+    "accent-800": "rgb(12 110 100)",
+    "accent-900": "rgb(10 90 81)",
+    "success-100": "rgb(230 245 208)",
+    "success-200": "rgb(224 242 197)",
+    "success-300": "rgb(206 235 162)",
+    "success-400": "rgb(169 219 92)",
+    "success-500": "rgb(132 204 22)",
+    "success-600": "rgb(119 184 20)",
+    "success-700": "rgb(99 153 17)",
+    "success-800": "rgb(79 122 13)",
+    "success-900": "rgb(65 100 11)",
+    "warning-100": "rgb(251 240 206)",
+    "warning-200": "rgb(250 236 193)",
+    "warning-300": "rgb(247 225 156)",
+    "warning-400": "rgb(240 202 82)",
+    "warning-500": "rgb(234 179 8)",
+    "warning-600": "rgb(211 161 7)",
+    "warning-700": "rgb(176 134 6)",
+    "warning-800": "rgb(140 107 5)",
+    "warning-900": "rgb(115 88 4)",
+    "danger-100": "rgb(252 218 218)",
+    "danger-200": "rgb(251 208 208)",
+    "danger-300": "rgb(249 180 180)",
+    "danger-400": "rgb(244 124 124)",
+    "danger-500": "rgb(239 68 68)",
+    "danger-600": "rgb(215 61 61)",
+    "danger-700": "rgb(179 51 51)",
+    "danger-800": "rgb(143 41 41)",
+    "danger-900": "rgb(117 33 33)",
+    "surface-100": "rgb(74 77 181)",
+    "surface-200": "rgb(59 61 145)",
+    "surface-300": "rgb(49 50 118)",
+    "surface-400": "rgb(146 148 245)",
+    "surface-500": "rgb(99 102 241)",
+    "surface-600": "rgb(89 92 217)",
+    "surface-700": "rgb(74 77 181)",
+    "surface-800": "rgb(59 61 145)",
+    "surface-900": "rgb(49 50 118)",
+    "color-scheme": "dark"
+  },
+  "rocket": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(0 0 0)",
+    "primary-100": "rgb(205 240 246)",
+    "primary-200": "rgb(193 237 244)",
+    "primary-300": "rgb(155 226 238)",
+    "primary-400": "rgb(81 204 225)",
+    "primary-500": "rgb(6 182 212)",
+    "primary-600": "rgb(5 164 191)",
+    "primary-700": "rgb(5 137 159)",
+    "primary-800": "rgb(4 109 127)",
+    "primary-900": "rgb(3 89 104)",
+    "secondary-100": "rgb(216 230 253)",
+    "secondary-200": "rgb(206 224 253)",
+    "secondary-300": "rgb(177 205 251)",
+    "secondary-400": "rgb(118 168 249)",
+    "secondary-500": "rgb(59 130 246)",
+    "secondary-600": "rgb(53 117 221)",
+    "secondary-700": "rgb(44 98 185)",
+    "secondary-800": "rgb(35 78 148)",
+    "secondary-900": "rgb(29 64 121)",
+    "accent-100": "rgb(238 221 253)",
+    "accent-200": "rgb(233 213 253)",
+    "accent-300": "rgb(220 187 252)",
+    "accent-400": "rgb(194 136 249)",
+    "accent-500": "rgb(168 85 247)",
+    "accent-600": "rgb(151 77 222)",
+    "accent-700": "rgb(126 64 185)",
+    "accent-800": "rgb(101 51 148)",
+    "accent-900": "rgb(82 42 121)",
+    "success-100": "rgb(219 245 208)",
+    "success-200": "rgb(210 242 197)",
+    "success-300": "rgb(183 234 161)",
+    "success-400": "rgb(130 219 91)",
+    "success-500": "rgb(76 203 21)",
+    "success-600": "rgb(68 183 19)",
+    "success-700": "rgb(57 152 16)",
+    "success-800": "rgb(46 122 13)",
+    "success-900": "rgb(37 99 10)",
+    "warning-100": "rgb(253 243 212)",
+    "warning-200": "rgb(252 240 202)",
+    "warning-300": "rgb(251 230 170)",
+    "warning-400": "rgb(247 212 106)",
+    "warning-500": "rgb(244 193 42)",
+    "warning-600": "rgb(220 174 38)",
+    "warning-700": "rgb(183 145 32)",
+    "warning-800": "rgb(146 116 25)",
+    "warning-900": "rgb(120 95 21)",
+    "danger-100": "rgb(240 213 221)",
+    "danger-200": "rgb(237 202 213)",
+    "danger-300": "rgb(225 171 187)",
+    "danger-400": "rgb(203 107 136)",
+    "danger-500": "rgb(181 44 85)",
+    "danger-600": "rgb(163 40 77)",
+    "danger-700": "rgb(136 33 64)",
+    "danger-800": "rgb(109 26 51)",
+    "danger-900": "rgb(89 22 42)",
+    "surface-100": "rgb(232 234 238)",
+    "surface-200": "rgb(224 227 232)",
+    "surface-300": "rgb(216 220 226)",
+    "surface-400": "rgb(147 158 174)",
+    "surface-500": "rgb(100 116 139)",
+    "surface-600": "rgb(90 104 125)",
+    "surface-700": "rgb(75 87 104)",
+    "surface-800": "rgb(60 70 83)",
+    "surface-900": "rgb(49 57 68)",
+    "color-scheme": "light"
+  },
+  "rocket-dark": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(255 255 255)",
+    "primary-100": "rgb(205 240 246)",
+    "primary-200": "rgb(193 237 244)",
+    "primary-300": "rgb(155 226 238)",
+    "primary-400": "rgb(81 204 225)",
+    "primary-500": "rgb(6 182 212)",
+    "primary-600": "rgb(5 164 191)",
+    "primary-700": "rgb(5 137 159)",
+    "primary-800": "rgb(4 109 127)",
+    "primary-900": "rgb(3 89 104)",
+    "secondary-100": "rgb(216 230 253)",
+    "secondary-200": "rgb(206 224 253)",
+    "secondary-300": "rgb(177 205 251)",
+    "secondary-400": "rgb(118 168 249)",
+    "secondary-500": "rgb(59 130 246)",
+    "secondary-600": "rgb(53 117 221)",
+    "secondary-700": "rgb(44 98 185)",
+    "secondary-800": "rgb(35 78 148)",
+    "secondary-900": "rgb(29 64 121)",
+    "accent-100": "rgb(238 221 253)",
+    "accent-200": "rgb(233 213 253)",
+    "accent-300": "rgb(220 187 252)",
+    "accent-400": "rgb(194 136 249)",
+    "accent-500": "rgb(168 85 247)",
+    "accent-600": "rgb(151 77 222)",
+    "accent-700": "rgb(126 64 185)",
+    "accent-800": "rgb(101 51 148)",
+    "accent-900": "rgb(82 42 121)",
+    "success-100": "rgb(219 245 208)",
+    "success-200": "rgb(210 242 197)",
+    "success-300": "rgb(183 234 161)",
+    "success-400": "rgb(130 219 91)",
+    "success-500": "rgb(76 203 21)",
+    "success-600": "rgb(68 183 19)",
+    "success-700": "rgb(57 152 16)",
+    "success-800": "rgb(46 122 13)",
+    "success-900": "rgb(37 99 10)",
+    "warning-100": "rgb(253 243 212)",
+    "warning-200": "rgb(252 240 202)",
+    "warning-300": "rgb(251 230 170)",
+    "warning-400": "rgb(247 212 106)",
+    "warning-500": "rgb(244 193 42)",
+    "warning-600": "rgb(220 174 38)",
+    "warning-700": "rgb(183 145 32)",
+    "warning-800": "rgb(146 116 25)",
+    "warning-900": "rgb(120 95 21)",
+    "danger-100": "rgb(240 213 221)",
+    "danger-200": "rgb(237 202 213)",
+    "danger-300": "rgb(225 171 187)",
+    "danger-400": "rgb(203 107 136)",
+    "danger-500": "rgb(181 44 85)",
+    "danger-600": "rgb(163 40 77)",
+    "danger-700": "rgb(136 33 64)",
+    "danger-800": "rgb(109 26 51)",
+    "danger-900": "rgb(89 22 42)",
+    "surface-100": "rgb(75 87 104)",
+    "surface-200": "rgb(60 70 83)",
+    "surface-300": "rgb(49 57 68)",
+    "surface-400": "rgb(147 158 174)",
+    "surface-500": "rgb(100 116 139)",
+    "surface-600": "rgb(90 104 125)",
+    "surface-700": "rgb(75 87 104)",
+    "surface-800": "rgb(60 70 83)",
+    "surface-900": "rgb(49 57 68)",
+    "color-scheme": "dark"
+  },
+  "seafoam": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(0 0 0)",
+    "primary-100": "rgb(231 246 245)",
+    "primary-200": "rgb(225 243 242)",
+    "primary-300": "rgb(207 236 234)",
+    "primary-400": "rgb(170 222 219)",
+    "primary-500": "rgb(134 208 203)",
+    "primary-600": "rgb(121 187 183)",
+    "primary-700": "rgb(101 156 152)",
+    "primary-800": "rgb(80 125 122)",
+    "primary-900": "rgb(66 102 99)",
+    "secondary-100": "rgb(211 214 221)",
+    "secondary-200": "rgb(200 204 213)",
+    "secondary-300": "rgb(166 173 187)",
+    "secondary-400": "rgb(100 112 136)",
+    "secondary-500": "rgb(33 51 85)",
+    "secondary-600": "rgb(30 46 77)",
+    "secondary-700": "rgb(25 38 64)",
+    "secondary-800": "rgb(20 31 51)",
+    "secondary-900": "rgb(16 25 42)",
+    "accent-100": "rgb(255 216 204)",
+    "accent-200": "rgb(255 207 191)",
+    "accent-300": "rgb(255 177 153)",
+    "accent-400": "rgb(255 119 77)",
+    "accent-500": "rgb(255 61 0)",
+    "accent-600": "rgb(230 55 0)",
+    "accent-700": "rgb(191 46 0)",
+    "accent-800": "rgb(153 37 0)",
+    "accent-900": "rgb(125 30 0)",
+    "success-100": "rgb(205 250 236)",
+    "success-200": "rgb(193 249 232)",
+    "success-300": "rgb(155 245 218)",
+    "success-400": "rgb(81 237 190)",
+    "success-500": "rgb(6 229 162)",
+    "success-600": "rgb(5 206 146)",
+    "success-700": "rgb(5 172 122)",
+    "success-800": "rgb(4 137 97)",
+    "success-900": "rgb(3 112 79)",
+    "warning-100": "rgb(251 250 221)",
+    "warning-200": "rgb(250 249 213)",
+    "warning-300": "rgb(247 245 188)",
+    "warning-400": "rgb(240 237 137)",
+    "warning-500": "rgb(234 229 87)",
+    "warning-600": "rgb(211 206 78)",
+    "warning-700": "rgb(176 172 65)",
+    "warning-800": "rgb(140 137 52)",
+    "warning-900": "rgb(115 112 43)",
+    "danger-100": "rgb(246 218 218)",
+    "danger-200": "rgb(244 209 209)",
+    "danger-300": "rgb(237 181 181)",
+    "danger-400": "rgb(224 126 126)",
+    "danger-500": "rgb(210 70 70)",
+    "danger-600": "rgb(189 63 63)",
+    "danger-700": "rgb(158 53 53)",
+    "danger-800": "rgb(126 42 42)",
+    "danger-900": "rgb(103 34 34)",
+    "surface-100": "rgb(222 248 249)",
+    "surface-200": "rgb(211 246 246)",
+    "surface-300": "rgb(201 244 244)",
+    "surface-400": "rgb(102 223 225)",
+    "surface-500": "rgb(37 209 212)",
+    "surface-600": "rgb(33 188 191)",
+    "surface-700": "rgb(28 157 159)",
+    "surface-800": "rgb(22 125 127)",
+    "surface-900": "rgb(18 102 104)",
+    "color-scheme": "light"
+  },
+  "seafoam-dark": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(255 255 255)",
+    "primary-100": "rgb(231 246 245)",
+    "primary-200": "rgb(225 243 242)",
+    "primary-300": "rgb(207 236 234)",
+    "primary-400": "rgb(170 222 219)",
+    "primary-500": "rgb(134 208 203)",
+    "primary-600": "rgb(121 187 183)",
+    "primary-700": "rgb(101 156 152)",
+    "primary-800": "rgb(80 125 122)",
+    "primary-900": "rgb(66 102 99)",
+    "secondary-100": "rgb(211 214 221)",
+    "secondary-200": "rgb(200 204 213)",
+    "secondary-300": "rgb(166 173 187)",
+    "secondary-400": "rgb(100 112 136)",
+    "secondary-500": "rgb(33 51 85)",
+    "secondary-600": "rgb(30 46 77)",
+    "secondary-700": "rgb(25 38 64)",
+    "secondary-800": "rgb(20 31 51)",
+    "secondary-900": "rgb(16 25 42)",
+    "accent-100": "rgb(255 216 204)",
+    "accent-200": "rgb(255 207 191)",
+    "accent-300": "rgb(255 177 153)",
+    "accent-400": "rgb(255 119 77)",
+    "accent-500": "rgb(255 61 0)",
+    "accent-600": "rgb(230 55 0)",
+    "accent-700": "rgb(191 46 0)",
+    "accent-800": "rgb(153 37 0)",
+    "accent-900": "rgb(125 30 0)",
+    "success-100": "rgb(205 250 236)",
+    "success-200": "rgb(193 249 232)",
+    "success-300": "rgb(155 245 218)",
+    "success-400": "rgb(81 237 190)",
+    "success-500": "rgb(6 229 162)",
+    "success-600": "rgb(5 206 146)",
+    "success-700": "rgb(5 172 122)",
+    "success-800": "rgb(4 137 97)",
+    "success-900": "rgb(3 112 79)",
+    "warning-100": "rgb(251 250 221)",
+    "warning-200": "rgb(250 249 213)",
+    "warning-300": "rgb(247 245 188)",
+    "warning-400": "rgb(240 237 137)",
+    "warning-500": "rgb(234 229 87)",
+    "warning-600": "rgb(211 206 78)",
+    "warning-700": "rgb(176 172 65)",
+    "warning-800": "rgb(140 137 52)",
+    "warning-900": "rgb(115 112 43)",
+    "danger-100": "rgb(246 218 218)",
+    "danger-200": "rgb(244 209 209)",
+    "danger-300": "rgb(237 181 181)",
+    "danger-400": "rgb(224 126 126)",
+    "danger-500": "rgb(210 70 70)",
+    "danger-600": "rgb(189 63 63)",
+    "danger-700": "rgb(158 53 53)",
+    "danger-800": "rgb(126 42 42)",
+    "danger-900": "rgb(103 34 34)",
+    "surface-100": "rgb(28 157 159)",
+    "surface-200": "rgb(22 125 127)",
+    "surface-300": "rgb(18 102 104)",
+    "surface-400": "rgb(102 223 225)",
+    "surface-500": "rgb(37 209 212)",
+    "surface-600": "rgb(33 188 191)",
+    "surface-700": "rgb(28 157 159)",
+    "surface-800": "rgb(22 125 127)",
+    "surface-900": "rgb(18 102 104)",
+    "color-scheme": "dark"
+  },
+  "vintage": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(0 0 0)",
+    "accent-content": "rgb(0 0 0)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(0 0 0)",
+    "surface-content": "rgb(0 0 0)",
+    "primary-100": "rgb(251 231 209)",
+    "primary-200": "rgb(250 225 198)",
+    "primary-300": "rgb(247 207 163)",
+    "primary-400": "rgb(240 170 95)",
+    "primary-500": "rgb(234 134 26)",
+    "primary-600": "rgb(211 121 23)",
+    "primary-700": "rgb(176 101 20)",
+    "primary-800": "rgb(140 80 16)",
+    "primary-900": "rgb(115 66 13)",
+    "secondary-100": "rgb(234 245 237)",
+    "secondary-200": "rgb(229 243 233)",
+    "secondary-300": "rgb(213 235 219)",
+    "secondary-400": "rgb(182 221 192)",
+    "secondary-500": "rgb(151 206 165)",
+    "secondary-600": "rgb(136 185 149)",
+    "secondary-700": "rgb(113 155 124)",
+    "secondary-800": "rgb(91 124 99)",
+    "secondary-900": "rgb(74 101 81)",
+    "accent-100": "rgb(205 240 246)",
+    "accent-200": "rgb(193 237 244)",
+    "accent-300": "rgb(155 226 238)",
+    "accent-400": "rgb(81 204 225)",
+    "accent-500": "rgb(6 182 212)",
+    "accent-600": "rgb(5 164 191)",
+    "accent-700": "rgb(5 137 159)",
+    "accent-800": "rgb(4 109 127)",
+    "accent-900": "rgb(3 89 104)",
+    "success-100": "rgb(230 245 223)",
+    "success-200": "rgb(224 242 215)",
+    "success-300": "rgb(206 234 190)",
+    "success-400": "rgb(169 219 142)",
+    "success-500": "rgb(132 203 93)",
+    "success-600": "rgb(119 183 84)",
+    "success-700": "rgb(99 152 70)",
+    "success-800": "rgb(79 122 56)",
+    "success-900": "rgb(65 99 46)",
+    "warning-100": "rgb(252 238 211)",
+    "warning-200": "rgb(252 234 200)",
+    "warning-300": "rgb(250 222 167)",
+    "warning-400": "rgb(246 197 101)",
+    "warning-500": "rgb(242 172 35)",
+    "warning-600": "rgb(218 155 32)",
+    "warning-700": "rgb(182 129 26)",
+    "warning-800": "rgb(145 103 21)",
+    "warning-900": "rgb(119 84 17)",
+    "danger-100": "rgb(247 229 228)",
+    "danger-200": "rgb(245 223 221)",
+    "danger-300": "rgb(238 203 201)",
+    "danger-400": "rgb(226 165 161)",
+    "danger-500": "rgb(213 126 120)",
+    "danger-600": "rgb(192 113 108)",
+    "danger-700": "rgb(160 95 90)",
+    "danger-800": "rgb(128 76 72)",
+    "danger-900": "rgb(104 62 59)",
+    "surface-100": "rgb(226 225 224)",
+    "surface-200": "rgb(217 215 214)",
+    "surface-300": "rgb(207 205 204)",
+    "surface-400": "rgb(121 115 111)",
+    "surface-500": "rgb(63 55 49)",
+    "surface-600": "rgb(57 50 44)",
+    "surface-700": "rgb(47 41 37)",
+    "surface-800": "rgb(38 33 29)",
+    "surface-900": "rgb(31 27 24)",
+    "color-scheme": "light"
+  },
+  "vintage-dark": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(0 0 0)",
+    "accent-content": "rgb(0 0 0)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(0 0 0)",
+    "surface-content": "rgb(255 255 255)",
+    "primary-100": "rgb(251 231 209)",
+    "primary-200": "rgb(250 225 198)",
+    "primary-300": "rgb(247 207 163)",
+    "primary-400": "rgb(240 170 95)",
+    "primary-500": "rgb(234 134 26)",
+    "primary-600": "rgb(211 121 23)",
+    "primary-700": "rgb(176 101 20)",
+    "primary-800": "rgb(140 80 16)",
+    "primary-900": "rgb(115 66 13)",
+    "secondary-100": "rgb(234 245 237)",
+    "secondary-200": "rgb(229 243 233)",
+    "secondary-300": "rgb(213 235 219)",
+    "secondary-400": "rgb(182 221 192)",
+    "secondary-500": "rgb(151 206 165)",
+    "secondary-600": "rgb(136 185 149)",
+    "secondary-700": "rgb(113 155 124)",
+    "secondary-800": "rgb(91 124 99)",
+    "secondary-900": "rgb(74 101 81)",
+    "accent-100": "rgb(205 240 246)",
+    "accent-200": "rgb(193 237 244)",
+    "accent-300": "rgb(155 226 238)",
+    "accent-400": "rgb(81 204 225)",
+    "accent-500": "rgb(6 182 212)",
+    "accent-600": "rgb(5 164 191)",
+    "accent-700": "rgb(5 137 159)",
+    "accent-800": "rgb(4 109 127)",
+    "accent-900": "rgb(3 89 104)",
+    "success-100": "rgb(230 245 223)",
+    "success-200": "rgb(224 242 215)",
+    "success-300": "rgb(206 234 190)",
+    "success-400": "rgb(169 219 142)",
+    "success-500": "rgb(132 203 93)",
+    "success-600": "rgb(119 183 84)",
+    "success-700": "rgb(99 152 70)",
+    "success-800": "rgb(79 122 56)",
+    "success-900": "rgb(65 99 46)",
+    "warning-100": "rgb(252 238 211)",
+    "warning-200": "rgb(252 234 200)",
+    "warning-300": "rgb(250 222 167)",
+    "warning-400": "rgb(246 197 101)",
+    "warning-500": "rgb(242 172 35)",
+    "warning-600": "rgb(218 155 32)",
+    "warning-700": "rgb(182 129 26)",
+    "warning-800": "rgb(145 103 21)",
+    "warning-900": "rgb(119 84 17)",
+    "danger-100": "rgb(247 229 228)",
+    "danger-200": "rgb(245 223 221)",
+    "danger-300": "rgb(238 203 201)",
+    "danger-400": "rgb(226 165 161)",
+    "danger-500": "rgb(213 126 120)",
+    "danger-600": "rgb(192 113 108)",
+    "danger-700": "rgb(160 95 90)",
+    "danger-800": "rgb(128 76 72)",
+    "danger-900": "rgb(104 62 59)",
+    "surface-100": "rgb(47 41 37)",
+    "surface-200": "rgb(38 33 29)",
+    "surface-300": "rgb(31 27 24)",
+    "surface-400": "rgb(121 115 111)",
+    "surface-500": "rgb(63 55 49)",
+    "surface-600": "rgb(57 50 44)",
+    "surface-700": "rgb(47 41 37)",
+    "surface-800": "rgb(38 33 29)",
+    "surface-900": "rgb(31 27 24)",
+    "color-scheme": "dark"
+  },
+  "sahara": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(0 0 0)",
+    "accent-content": "rgb(0 0 0)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(0 0 0)",
+    "primary-100": "rgb(251 238 215)",
+    "primary-200": "rgb(250 234 205)",
+    "primary-300": "rgb(247 221 175)",
+    "primary-400": "rgb(242 196 114)",
+    "primary-500": "rgb(236 170 54)",
+    "primary-600": "rgb(212 153 49)",
+    "primary-700": "rgb(177 128 41)",
+    "primary-800": "rgb(142 102 32)",
+    "primary-900": "rgb(116 83 26)",
+    "secondary-100": "rgb(216 245 241)",
+    "secondary-200": "rgb(206 242 238)",
+    "secondary-300": "rgb(176 234 227)",
+    "secondary-400": "rgb(117 219 207)",
+    "secondary-500": "rgb(58 203 186)",
+    "secondary-600": "rgb(52 183 167)",
+    "secondary-700": "rgb(44 152 140)",
+    "secondary-800": "rgb(35 122 112)",
+    "secondary-900": "rgb(28 99 91)",
+    "accent-100": "rgb(241 249 231)",
+    "accent-200": "rgb(238 247 225)",
+    "accent-300": "rgb(228 242 207)",
+    "accent-400": "rgb(207 233 170)",
+    "accent-500": "rgb(187 223 134)",
+    "accent-600": "rgb(168 201 121)",
+    "accent-700": "rgb(140 167 101)",
+    "accent-800": "rgb(112 134 80)",
+    "accent-900": "rgb(92 109 66)",
+    "success-100": "rgb(230 245 208)",
+    "success-200": "rgb(224 242 197)",
+    "success-300": "rgb(206 235 162)",
+    "success-400": "rgb(169 219 92)",
+    "success-500": "rgb(132 204 22)",
+    "success-600": "rgb(119 184 20)",
+    "success-700": "rgb(99 153 17)",
+    "success-800": "rgb(79 122 13)",
+    "success-900": "rgb(65 100 11)",
+    "warning-100": "rgb(250 243 221)",
+    "warning-200": "rgb(249 240 213)",
+    "warning-300": "rgb(245 230 188)",
+    "warning-400": "rgb(237 212 137)",
+    "warning-500": "rgb(229 193 87)",
+    "warning-600": "rgb(206 174 78)",
+    "warning-700": "rgb(172 145 65)",
+    "warning-800": "rgb(137 116 52)",
+    "warning-900": "rgb(112 95 43)",
+    "danger-100": "rgb(248 222 235)",
+    "danger-200": "rgb(246 214 230)",
+    "danger-300": "rgb(241 190 215)",
+    "danger-400": "rgb(230 141 186)",
+    "danger-500": "rgb(219 92 156)",
+    "danger-600": "rgb(197 83 140)",
+    "danger-700": "rgb(164 69 117)",
+    "danger-800": "rgb(131 55 94)",
+    "danger-900": "rgb(107 45 76)",
+    "surface-100": "rgb(249 228 232)",
+    "surface-200": "rgb(248 220 224)",
+    "surface-300": "rgb(246 211 217)",
+    "surface-400": "rgb(229 131 147)",
+    "surface-500": "rgb(218 78 101)",
+    "surface-600": "rgb(196 70 91)",
+    "surface-700": "rgb(164 59 76)",
+    "surface-800": "rgb(131 47 61)",
+    "surface-900": "rgb(107 38 49)",
+    "color-scheme": "light"
+  },
+  "sahara-dark": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(0 0 0)",
+    "accent-content": "rgb(0 0 0)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(255 255 255)",
+    "primary-100": "rgb(251 238 215)",
+    "primary-200": "rgb(250 234 205)",
+    "primary-300": "rgb(247 221 175)",
+    "primary-400": "rgb(242 196 114)",
+    "primary-500": "rgb(236 170 54)",
+    "primary-600": "rgb(212 153 49)",
+    "primary-700": "rgb(177 128 41)",
+    "primary-800": "rgb(142 102 32)",
+    "primary-900": "rgb(116 83 26)",
+    "secondary-100": "rgb(216 245 241)",
+    "secondary-200": "rgb(206 242 238)",
+    "secondary-300": "rgb(176 234 227)",
+    "secondary-400": "rgb(117 219 207)",
+    "secondary-500": "rgb(58 203 186)",
+    "secondary-600": "rgb(52 183 167)",
+    "secondary-700": "rgb(44 152 140)",
+    "secondary-800": "rgb(35 122 112)",
+    "secondary-900": "rgb(28 99 91)",
+    "accent-100": "rgb(241 249 231)",
+    "accent-200": "rgb(238 247 225)",
+    "accent-300": "rgb(228 242 207)",
+    "accent-400": "rgb(207 233 170)",
+    "accent-500": "rgb(187 223 134)",
+    "accent-600": "rgb(168 201 121)",
+    "accent-700": "rgb(140 167 101)",
+    "accent-800": "rgb(112 134 80)",
+    "accent-900": "rgb(92 109 66)",
+    "success-100": "rgb(230 245 208)",
+    "success-200": "rgb(224 242 197)",
+    "success-300": "rgb(206 235 162)",
+    "success-400": "rgb(169 219 92)",
+    "success-500": "rgb(132 204 22)",
+    "success-600": "rgb(119 184 20)",
+    "success-700": "rgb(99 153 17)",
+    "success-800": "rgb(79 122 13)",
+    "success-900": "rgb(65 100 11)",
+    "warning-100": "rgb(250 243 221)",
+    "warning-200": "rgb(249 240 213)",
+    "warning-300": "rgb(245 230 188)",
+    "warning-400": "rgb(237 212 137)",
+    "warning-500": "rgb(229 193 87)",
+    "warning-600": "rgb(206 174 78)",
+    "warning-700": "rgb(172 145 65)",
+    "warning-800": "rgb(137 116 52)",
+    "warning-900": "rgb(112 95 43)",
+    "danger-100": "rgb(248 222 235)",
+    "danger-200": "rgb(246 214 230)",
+    "danger-300": "rgb(241 190 215)",
+    "danger-400": "rgb(230 141 186)",
+    "danger-500": "rgb(219 92 156)",
+    "danger-600": "rgb(197 83 140)",
+    "danger-700": "rgb(164 69 117)",
+    "danger-800": "rgb(131 55 94)",
+    "danger-900": "rgb(107 45 76)",
+    "surface-100": "rgb(164 59 76)",
+    "surface-200": "rgb(131 47 61)",
+    "surface-300": "rgb(107 38 49)",
+    "surface-400": "rgb(229 131 147)",
+    "surface-500": "rgb(218 78 101)",
+    "surface-600": "rgb(196 70 91)",
+    "surface-700": "rgb(164 59 76)",
+    "surface-800": "rgb(131 47 61)",
+    "surface-900": "rgb(107 38 49)",
+    "color-scheme": "dark"
+  },
+  "hamlindigo": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(255 255 255)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(0 0 0)",
+    "primary-100": "rgb(238 242 252)",
+    "primary-200": "rgb(233 239 252)",
+    "primary-300": "rgb(220 229 249)",
+    "primary-400": "rgb(194 210 245)",
+    "primary-500": "rgb(168 190 241)",
+    "primary-600": "rgb(151 171 217)",
+    "primary-700": "rgb(126 143 181)",
+    "primary-800": "rgb(101 114 145)",
+    "primary-900": "rgb(82 93 118)",
+    "secondary-100": "rgb(237 232 222)",
+    "secondary-200": "rgb(232 227 214)",
+    "secondary-300": "rgb(219 210 189)",
+    "secondary-400": "rgb(191 176 140)",
+    "secondary-500": "rgb(164 142 91)",
+    "secondary-600": "rgb(148 128 82)",
+    "secondary-700": "rgb(123 107 68)",
+    "secondary-800": "rgb(98 85 55)",
+    "secondary-900": "rgb(80 70 45)",
+    "accent-100": "rgb(223 234 237)",
+    "accent-200": "rgb(216 229 232)",
+    "accent-300": "rgb(192 213 218)",
+    "accent-400": "rgb(144 182 191)",
+    "accent-500": "rgb(97 151 163)",
+    "accent-600": "rgb(87 136 147)",
+    "accent-700": "rgb(73 113 122)",
+    "accent-800": "rgb(58 91 98)",
+    "accent-900": "rgb(48 74 80)",
+    "success-100": "rgb(218 234 229)",
+    "success-200": "rgb(209 228 223)",
+    "success-300": "rgb(181 212 203)",
+    "success-400": "rgb(126 180 164)",
+    "success-500": "rgb(71 148 125)",
+    "success-600": "rgb(64 133 113)",
+    "success-700": "rgb(53 111 94)",
+    "success-800": "rgb(43 89 75)",
+    "success-900": "rgb(35 73 61)",
+    "warning-100": "rgb(248 238 216)",
+    "warning-200": "rgb(246 234 207)",
+    "warning-300": "rgb(240 221 178)",
+    "warning-400": "rgb(229 195 120)",
+    "warning-500": "rgb(218 169 62)",
+    "warning-600": "rgb(196 152 56)",
+    "warning-700": "rgb(164 127 47)",
+    "warning-800": "rgb(131 101 37)",
+    "warning-900": "rgb(107 83 30)",
+    "danger-100": "rgb(236 223 227)",
+    "danger-200": "rgb(232 216 221)",
+    "danger-300": "rgb(218 192 200)",
+    "danger-400": "rgb(190 144 158)",
+    "danger-500": "rgb(162 97 117)",
+    "danger-600": "rgb(146 87 105)",
+    "danger-700": "rgb(122 73 88)",
+    "danger-800": "rgb(97 58 70)",
+    "danger-900": "rgb(79 48 57)",
+    "surface-100": "rgb(232 234 241)",
+    "surface-200": "rgb(224 228 237)",
+    "surface-300": "rgb(216 221 232)",
+    "surface-400": "rgb(146 159 191)",
+    "surface-500": "rgb(99 118 163)",
+    "surface-600": "rgb(89 106 147)",
+    "surface-700": "rgb(74 89 122)",
+    "surface-800": "rgb(59 71 98)",
+    "surface-900": "rgb(49 58 80)",
+    "color-scheme": "light"
+  },
+  "hamlindigo-dark": {
+    "primary-content": "rgb(0 0 0)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(255 255 255)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(255 255 255)",
+    "primary-100": "rgb(238 242 252)",
+    "primary-200": "rgb(233 239 252)",
+    "primary-300": "rgb(220 229 249)",
+    "primary-400": "rgb(194 210 245)",
+    "primary-500": "rgb(168 190 241)",
+    "primary-600": "rgb(151 171 217)",
+    "primary-700": "rgb(126 143 181)",
+    "primary-800": "rgb(101 114 145)",
+    "primary-900": "rgb(82 93 118)",
+    "secondary-100": "rgb(237 232 222)",
+    "secondary-200": "rgb(232 227 214)",
+    "secondary-300": "rgb(219 210 189)",
+    "secondary-400": "rgb(191 176 140)",
+    "secondary-500": "rgb(164 142 91)",
+    "secondary-600": "rgb(148 128 82)",
+    "secondary-700": "rgb(123 107 68)",
+    "secondary-800": "rgb(98 85 55)",
+    "secondary-900": "rgb(80 70 45)",
+    "accent-100": "rgb(223 234 237)",
+    "accent-200": "rgb(216 229 232)",
+    "accent-300": "rgb(192 213 218)",
+    "accent-400": "rgb(144 182 191)",
+    "accent-500": "rgb(97 151 163)",
+    "accent-600": "rgb(87 136 147)",
+    "accent-700": "rgb(73 113 122)",
+    "accent-800": "rgb(58 91 98)",
+    "accent-900": "rgb(48 74 80)",
+    "success-100": "rgb(218 234 229)",
+    "success-200": "rgb(209 228 223)",
+    "success-300": "rgb(181 212 203)",
+    "success-400": "rgb(126 180 164)",
+    "success-500": "rgb(71 148 125)",
+    "success-600": "rgb(64 133 113)",
+    "success-700": "rgb(53 111 94)",
+    "success-800": "rgb(43 89 75)",
+    "success-900": "rgb(35 73 61)",
+    "warning-100": "rgb(248 238 216)",
+    "warning-200": "rgb(246 234 207)",
+    "warning-300": "rgb(240 221 178)",
+    "warning-400": "rgb(229 195 120)",
+    "warning-500": "rgb(218 169 62)",
+    "warning-600": "rgb(196 152 56)",
+    "warning-700": "rgb(164 127 47)",
+    "warning-800": "rgb(131 101 37)",
+    "warning-900": "rgb(107 83 30)",
+    "danger-100": "rgb(236 223 227)",
+    "danger-200": "rgb(232 216 221)",
+    "danger-300": "rgb(218 192 200)",
+    "danger-400": "rgb(190 144 158)",
+    "danger-500": "rgb(162 97 117)",
+    "danger-600": "rgb(146 87 105)",
+    "danger-700": "rgb(122 73 88)",
+    "danger-800": "rgb(97 58 70)",
+    "danger-900": "rgb(79 48 57)",
+    "surface-100": "rgb(74 89 122)",
+    "surface-200": "rgb(59 71 98)",
+    "surface-300": "rgb(49 58 80)",
+    "surface-400": "rgb(146 159 191)",
+    "surface-500": "rgb(99 118 163)",
+    "surface-600": "rgb(89 106 147)",
+    "surface-700": "rgb(74 89 122)",
+    "surface-800": "rgb(59 71 98)",
+    "surface-900": "rgb(49 58 80)",
+    "color-scheme": "dark"
+  },
+  "gold-nouveau": {
+    "primary-content": "rgb(255 255 255)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(0 0 0)",
+    "primary-100": "rgb(242 238 247)",
+    "primary-200": "rgb(229 220 239)",
+    "primary-300": "rgb(209 192 226)",
+    "primary-400": "rgb(162 129 197)",
+    "primary-500": "rgb(116 74 161)",
+    "primary-600": "rgb(83 53 115)",
+    "primary-700": "rgb(60 39 84)",
+    "primary-800": "rgb(35 22 49)",
+    "primary-900": "rgb(18 11 24)",
+    "secondary-100": "rgb(205 227 250)",
+    "secondary-200": "rgb(193 220 249)",
+    "secondary-300": "rgb(155 199 245)",
+    "secondary-400": "rgb(81 156 237)",
+    "secondary-500": "rgb(6 114 229)",
+    "secondary-600": "rgb(5 103 206)",
+    "secondary-700": "rgb(5 86 172)",
+    "secondary-800": "rgb(4 68 137)",
+    "secondary-900": "rgb(3 56 112)",
+    "accent-100": "rgb(229 228 248)",
+    "accent-200": "rgb(223 221 247)",
+    "accent-300": "rgb(204 201 241)",
+    "accent-400": "rgb(165 161 231)",
+    "accent-500": "rgb(127 120 221)",
+    "accent-600": "rgb(114 108 199)",
+    "accent-700": "rgb(95 90 166)",
+    "accent-800": "rgb(76 72 133)",
+    "accent-900": "rgb(62 59 108)",
+    "success-100": "rgb(227 243 231)",
+    "success-200": "rgb(220 241 225)",
+    "success-300": "rgb(199 232 206)",
+    "success-400": "rgb(156 214 170)",
+    "success-500": "rgb(114 197 133)",
+    "success-600": "rgb(103 177 120)",
+    "success-700": "rgb(86 148 100)",
+    "success-800": "rgb(68 118 80)",
+    "success-900": "rgb(56 97 65)",
+    "warning-100": "rgb(250 229 206)",
+    "warning-200": "rgb(249 223 193)",
+    "warning-300": "rgb(245 204 156)",
+    "warning-400": "rgb(238 165 82)",
+    "warning-500": "rgb(231 127 8)",
+    "warning-600": "rgb(208 114 7)",
+    "warning-700": "rgb(173 95 6)",
+    "warning-800": "rgb(139 76 5)",
+    "warning-900": "rgb(113 62 4)",
+    "danger-100": "rgb(233 207 211)",
+    "danger-200": "rgb(227 195 200)",
+    "danger-300": "rgb(210 159 167)",
+    "danger-400": "rgb(177 87 100)",
+    "danger-500": "rgb(143 15 34)",
+    "danger-600": "rgb(129 14 31)",
+    "danger-700": "rgb(107 11 26)",
+    "danger-800": "rgb(86 9 20)",
+    "danger-900": "rgb(70 7 17)",
+    "surface-100": "rgb(250 248 252)",
+    "surface-200": "rgb(242 238 247)",
+    "surface-300": "rgb(229 220 239)",
+    "surface-400": "rgb(162 129 197)",
+    "surface-500": "rgb(116 74 161)",
+    "surface-600": "rgb(83 53 115)",
+    "surface-700": "rgb(60 39 84)",
+    "surface-800": "rgb(35 22 49)",
+    "surface-900": "rgb(18 11 24)",
+    "color-scheme": "light"
+  },
+  "gold-nouveau-dark": {
+    "primary-content": "rgb(255 255 255)",
+    "secondary-content": "rgb(255 255 255)",
+    "accent-content": "rgb(255 255 255)",
+    "success-content": "rgb(0 0 0)",
+    "warning-content": "rgb(0 0 0)",
+    "danger-content": "rgb(255 255 255)",
+    "surface-content": "rgb(255 255 255)",
+    "primary-100": "rgb(242 238 247)",
+    "primary-200": "rgb(229 220 239)",
+    "primary-300": "rgb(209 192 226)",
+    "primary-400": "rgb(162 129 197)",
+    "primary-500": "rgb(116 74 161)",
+    "primary-600": "rgb(83 53 115)",
+    "primary-700": "rgb(60 39 84)",
+    "primary-800": "rgb(35 22 49)",
+    "primary-900": "rgb(18 11 24)",
+    "secondary-100": "rgb(205 227 250)",
+    "secondary-200": "rgb(193 220 249)",
+    "secondary-300": "rgb(155 199 245)",
+    "secondary-400": "rgb(81 156 237)",
+    "secondary-500": "rgb(6 114 229)",
+    "secondary-600": "rgb(5 103 206)",
+    "secondary-700": "rgb(5 86 172)",
+    "secondary-800": "rgb(4 68 137)",
+    "secondary-900": "rgb(3 56 112)",
+    "accent-100": "rgb(229 228 248)",
+    "accent-200": "rgb(223 221 247)",
+    "accent-300": "rgb(204 201 241)",
+    "accent-400": "rgb(165 161 231)",
+    "accent-500": "rgb(127 120 221)",
+    "accent-600": "rgb(114 108 199)",
+    "accent-700": "rgb(95 90 166)",
+    "accent-800": "rgb(76 72 133)",
+    "accent-900": "rgb(62 59 108)",
+    "success-100": "rgb(227 243 231)",
+    "success-200": "rgb(220 241 225)",
+    "success-300": "rgb(199 232 206)",
+    "success-400": "rgb(156 214 170)",
+    "success-500": "rgb(114 197 133)",
+    "success-600": "rgb(103 177 120)",
+    "success-700": "rgb(86 148 100)",
+    "success-800": "rgb(68 118 80)",
+    "success-900": "rgb(56 97 65)",
+    "warning-100": "rgb(250 229 206)",
+    "warning-200": "rgb(249 223 193)",
+    "warning-300": "rgb(245 204 156)",
+    "warning-400": "rgb(238 165 82)",
+    "warning-500": "rgb(231 127 8)",
+    "warning-600": "rgb(208 114 7)",
+    "warning-700": "rgb(173 95 6)",
+    "warning-800": "rgb(139 76 5)",
+    "warning-900": "rgb(113 62 4)",
+    "danger-100": "rgb(233 207 211)",
+    "danger-200": "rgb(227 195 200)",
+    "danger-300": "rgb(210 159 167)",
+    "danger-400": "rgb(177 87 100)",
+    "danger-500": "rgb(143 15 34)",
+    "danger-600": "rgb(129 14 31)",
+    "danger-700": "rgb(107 11 26)",
+    "danger-800": "rgb(86 9 20)",
+    "danger-900": "rgb(70 7 17)",
+    "surface-100": "rgb(60 39 84)",
+    "surface-200": "rgb(35 22 49)",
+    "surface-300": "rgb(18 11 24)",
+    "surface-400": "rgb(162 129 197)",
+    "surface-500": "rgb(116 74 161)",
+    "surface-600": "rgb(83 53 115)",
+    "surface-700": "rgb(60 39 84)",
+    "surface-800": "rgb(35 22 49)",
+    "surface-900": "rgb(18 11 24)",
+    "color-scheme": "dark"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d75dc1228..d6053a463 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -112,6 +112,9 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.10
         version: 0.5.10(tailwindcss@3.4.0)
+      '@types/culori':
+        specifier: ^2.0.4
+        version: 2.0.4
       '@types/d3-array':
         specifier: ^3.2.1
         version: 3.2.1
@@ -982,6 +985,10 @@ packages:
     resolution: {integrity: sha512-7z/eR6O859gyWIAjuvBWFzNURmf2oPBmJlfVWkwehU5nzIyjwBsTh7WMmEEV4JFnHuQ3ex4oyTvfKzcyJVDBNA==}
     dev: true
 
+  /@types/culori@2.0.4:
+    resolution: {integrity: sha512-GeLW8+KBRkwqIgeGrU8EnNbBE2D7waYbQHkx2xnI5exlzSGTMpjWtDaHzLWK1PTYmyJN9u6dPvMYumFevDe+VA==}
+    dev: true
+
   /@types/d3-array@3.2.1:
     resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
     dev: true