From ed3ada4029af9e96187ddf0c17279feebacd05ee Mon Sep 17 00:00:00 2001
From: Daniel Imfeld <daniel@imfeld.dev>
Date: Wed, 3 Jan 2024 09:44:58 -1000
Subject: [PATCH 1/2] Rename settings `theme` to `classes` in preparation for
 adding theme support

---
 .../templates/layerchart/src/routes/+layout.svelte        | 2 +-
 .../templates/starter/src/routes/+layout.svelte           | 2 +-
 packages/svelte-ux/src/lib/components/index.ts            | 2 +-
 packages/svelte-ux/src/lib/components/settings.ts         | 4 ++--
 packages/svelte-ux/src/lib/components/theme.ts            | 8 ++++----
 packages/svelte-ux/src/routes/+layout.svelte              | 2 +-
 packages/svelte-ux/src/routes/docs/+layout.svelte         | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte
index f822e60c4..f4a92066d 100644
--- a/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte
+++ b/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 	import '../app.postcss';
 
 	settings({
-		theme: {
+		classes: {
 			AppBar: 'bg-primary text-white shadow-md',
 			AppLayout: {
 				nav: 'bg-neutral-800'
diff --git a/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte b/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte
index 8bc3c7a48..cdf1cd426 100644
--- a/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte
+++ b/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 	import '../app.postcss';
 
 	settings({
-		theme: {
+		classes: {
 			AppBar: 'bg-primary text-white shadow-md',
 			AppLayout: {
 				nav: 'bg-neutral-800'
diff --git a/packages/svelte-ux/src/lib/components/index.ts b/packages/svelte-ux/src/lib/components/index.ts
index 2326377c7..0c9247916 100644
--- a/packages/svelte-ux/src/lib/components/index.ts
+++ b/packages/svelte-ux/src/lib/components/index.ts
@@ -95,4 +95,4 @@ export { default as TweenedValue } from './TweenedValue.svelte';
 export { default as ViewportCenter } from './ViewportCenter.svelte';
 export { default as YearList } from './YearList.svelte';
 export { settings, getFormatNumber, getSettings, getDictionary } from './settings';
-export { getTheme, getComponentTheme } from './theme';
+export { getClasses, getComponentTheme } from './theme';
diff --git a/packages/svelte-ux/src/lib/components/settings.ts b/packages/svelte-ux/src/lib/components/settings.ts
index c6d862db4..a381173ea 100644
--- a/packages/svelte-ux/src/lib/components/settings.ts
+++ b/packages/svelte-ux/src/lib/components/settings.ts
@@ -1,6 +1,6 @@
 import type { FormatNumberOptions, FormatNumberStyle } from '$lib/utils/number';
 import { getContext, setContext } from 'svelte';
-import type { Theme } from './theme';
+import type { ComponentClasses } from './theme';
 import type { Prettify } from '$lib/types/typeHelpers';
 import {
   type FormatDateOptions,
@@ -25,7 +25,7 @@ export type Settings = {
     dates?: FormatDateOptions;
   };
   dictionary?: DictionaryMessagesOptions;
-  theme?: Theme;
+  classes?: ComponentClasses;
 };
 
 const settingsKey = Symbol();
diff --git a/packages/svelte-ux/src/lib/components/theme.ts b/packages/svelte-ux/src/lib/components/theme.ts
index aefa8e029..15db1291b 100644
--- a/packages/svelte-ux/src/lib/components/theme.ts
+++ b/packages/svelte-ux/src/lib/components/theme.ts
@@ -10,16 +10,16 @@ type ClassesProp<T> = T extends { prototype: infer PR extends SvelteComponent }
     : never
   : never;
 
-export type Theme = {
+export type ComponentClasses = {
   [key in ComponentName]?: ClassesProp<(typeof Components)[key]> | string;
 };
 
-export function getTheme() {
-  return getSettings().theme ?? {};
+export function getClasses() {
+  return getSettings().classes ?? {};
 }
 
 export function getComponentTheme(name: ComponentName) {
-  const theme = getTheme()[name] ?? {};
+  const theme = getClasses()[name] ?? {};
 
   return typeof theme === 'string' ? { root: theme } : theme;
 }
diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
index dfc1fd227..39f6f6755 100644
--- a/packages/svelte-ux/src/routes/+layout.svelte
+++ b/packages/svelte-ux/src/routes/+layout.svelte
@@ -85,7 +85,7 @@
     //     Day: 'Jour',
     //   },
     // },
-    theme: {
+    classes: {
       AppLayout: {
         aside: 'border-r',
         nav: 'bg-surface-300 py-2',
diff --git a/packages/svelte-ux/src/routes/docs/+layout.svelte b/packages/svelte-ux/src/routes/docs/+layout.svelte
index 8a58341bb..d25ea01d4 100644
--- a/packages/svelte-ux/src/routes/docs/+layout.svelte
+++ b/packages/svelte-ux/src/routes/docs/+layout.svelte
@@ -69,7 +69,7 @@
   }
 
   // Clear root layout theme so doesn't show on doc examples
-  settings({ ...getSettings(), theme: {} });
+  settings({ ...getSettings(), classes: {} });
 </script>
 
 <div

From 57f10623676f8665ac46d6e7b0454c644aa01529 Mon Sep 17 00:00:00 2001
From: Daniel Imfeld <daniel@imfeld.dev>
Date: Wed, 3 Jan 2024 10:59:02 -1000
Subject: [PATCH 2/2] Rename getComponentTheme to getComponentClasses

---
 .changeset/for-you-sean.md                    |  7 +++++
 .../src/lib/components/AppBar.svelte          |  6 ++--
 .../src/lib/components/AppLayout.svelte       | 10 +++----
 .../src/lib/components/Avatar.svelte          |  6 ++--
 .../src/lib/components/Backdrop.svelte        |  6 ++--
 .../svelte-ux/src/lib/components/Badge.svelte |  6 ++--
 .../src/lib/components/Breadcrumb.svelte      |  6 ++--
 .../src/lib/components/Button.svelte          | 12 ++++----
 .../src/lib/components/ButtonGroup.svelte     |  6 ++--
 .../svelte-ux/src/lib/components/Card.svelte  |  6 ++--
 .../src/lib/components/Checkbox.svelte        | 12 ++++----
 .../svelte-ux/src/lib/components/Code.svelte  |  6 ++--
 .../src/lib/components/Collapse.svelte        | 12 ++++----
 .../src/lib/components/CopyButton.svelte      |  6 ++--
 .../src/lib/components/DateButton.svelte      |  6 ++--
 .../src/lib/components/DateField.svelte       |  4 +--
 .../src/lib/components/DatePickerField.svelte |  4 +--
 .../src/lib/components/DateRange.svelte       |  6 ++--
 .../src/lib/components/Dialog.svelte          | 14 +++++-----
 .../src/lib/components/DividerDot.svelte      |  6 ++--
 .../src/lib/components/Drawer.svelte          | 10 +++----
 .../src/lib/components/Duration.svelte        |  6 ++--
 .../src/lib/components/EmptyMessage.svelte    |  6 ++--
 .../src/lib/components/ExpansionPanel.svelte  |  8 +++---
 .../svelte-ux/src/lib/components/Field.svelte | 20 ++++++-------
 .../svelte-ux/src/lib/components/Form.svelte  |  6 ++--
 .../svelte-ux/src/lib/components/Gooey.svelte |  8 +++---
 .../src/lib/components/Header.svelte          |  6 ++--
 .../svelte-ux/src/lib/components/Icon.svelte  | 10 +++----
 .../svelte-ux/src/lib/components/Input.svelte |  6 ++--
 .../svelte-ux/src/lib/components/Lazy.svelte  |  6 ++--
 .../src/lib/components/ListItem.svelte        | 16 +++++------
 .../svelte-ux/src/lib/components/Menu.svelte  |  8 +++---
 .../src/lib/components/MenuButton.svelte      | 10 +++----
 .../src/lib/components/MenuField.svelte       | 10 +++----
 .../src/lib/components/MenuItem.svelte        |  6 ++--
 .../src/lib/components/MultiSelect.svelte     |  6 ++--
 .../lib/components/MultiSelectField.svelte    |  8 +++---
 .../src/lib/components/MultiSelectMenu.svelte |  8 +++---
 .../lib/components/MultiSelectOption.svelte   | 10 +++----
 .../src/lib/components/NavItem.svelte         | 10 +++----
 .../src/lib/components/NumberStepper.svelte   |  6 ++--
 .../src/lib/components/Overflow.svelte        |  6 ++--
 .../src/lib/components/Overlay.svelte         |  6 ++--
 .../src/lib/components/Pagination.svelte      | 18 ++++++------
 .../src/lib/components/Popover.svelte         |  6 ++--
 .../src/lib/components/Progress.svelte        |  6 ++--
 .../src/lib/components/ProgressCircle.svelte  |  6 ++--
 .../src/lib/components/QuickSearch.svelte     |  8 +++---
 .../svelte-ux/src/lib/components/Radio.svelte | 12 ++++----
 .../src/lib/components/RangeSlider.svelte     |  6 ++--
 .../src/lib/components/ScrollingValue.svelte  | 10 +++----
 .../src/lib/components/SectionDivider.svelte  |  6 ++--
 .../src/lib/components/SelectField.svelte     | 16 +++++------
 .../svelte-ux/src/lib/components/Shine.svelte |  8 +++---
 .../src/lib/components/Switch.svelte          | 12 ++++----
 .../svelte-ux/src/lib/components/Tab.svelte   |  6 ++--
 .../svelte-ux/src/lib/components/Table.svelte | 28 +++++++++----------
 .../src/lib/components/TableOfContents.svelte |  6 ++--
 .../svelte-ux/src/lib/components/Tabs.svelte  | 12 ++++----
 .../src/lib/components/TextField.svelte       | 22 +++++++--------
 .../svelte-ux/src/lib/components/Tilt.svelte  |  6 ++--
 .../src/lib/components/ToggleGroup.svelte     | 12 ++++----
 .../src/lib/components/ToggleOption.svelte    | 10 +++----
 .../src/lib/components/Tooltip.svelte         | 12 ++++----
 .../src/lib/components/TreeList.svelte        |  8 +++---
 .../lib/components/_SelectListOptions.svelte  |  8 +++---
 .../svelte-ux/src/lib/components/index.ts     |  2 +-
 .../svelte-ux/src/lib/components/theme.ts     |  2 +-
 69 files changed, 302 insertions(+), 295 deletions(-)
 create mode 100644 .changeset/for-you-sean.md

diff --git a/.changeset/for-you-sean.md b/.changeset/for-you-sean.md
new file mode 100644
index 000000000..308f7b580
--- /dev/null
+++ b/.changeset/for-you-sean.md
@@ -0,0 +1,7 @@
+---
+'svelte-ux': minor
+---
+
+- Rename settings `theme` argument to `classes`
+- Rename getTheme to getClasses and getComponentTheme to getComponentClasses
+
diff --git a/packages/svelte-ux/src/lib/components/AppBar.svelte b/packages/svelte-ux/src/lib/components/AppBar.svelte
index bb5471921..21a7c9af1 100644
--- a/packages/svelte-ux/src/lib/components/AppBar.svelte
+++ b/packages/svelte-ux/src/lib/components/AppBar.svelte
@@ -6,7 +6,7 @@
   import Button from './Button.svelte';
   import { browser } from '../utils/env';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let title: string | number | Array<string | number> = '';
 
@@ -15,7 +15,7 @@
    */
   export let head = true;
 
-  const theme = getComponentTheme('AppBar');
+  const settingsClasses = getComponentClasses('AppBar');
 
   $: titleString = Array.isArray(title) ? title.filter((x) => x).join(' › ') : title.toString();
 
@@ -26,7 +26,7 @@
 </script>
 
 <header
-  class={cls('AppBar', 'px-4 flex items-center relative z-50', theme.root, $$restProps.class)}
+  class={cls('AppBar', 'px-4 flex items-center relative z-50', settingsClasses.root, $$restProps.class)}
 >
   <Button icon={mdiMenu} on:click={() => ($showDrawer = !$showDrawer)} class="p-3" />
   {#if $$slots.title}
diff --git a/packages/svelte-ux/src/lib/components/AppLayout.svelte b/packages/svelte-ux/src/lib/components/AppLayout.svelte
index 94facd16b..30e577ea1 100644
--- a/packages/svelte-ux/src/lib/components/AppLayout.svelte
+++ b/packages/svelte-ux/src/lib/components/AppLayout.svelte
@@ -9,7 +9,7 @@
 
   import { breakpoints, mdScreen } from '../stores/matchMedia';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let navWidth = 240;
   export let headerHeight = 64;
@@ -28,7 +28,7 @@
     aside?: string;
     nav?: string;
   } = {};
-  const theme = getComponentTheme('AppLayout');
+  const settingsClasses = getComponentClasses('AppLayout');
 
   $: temporaryDrawer = browser ? !$mdScreen : false;
 </script>
@@ -41,7 +41,7 @@
   class={cls(
     'AppLayout',
     'grid grid-cols-[auto,1fr] grid-rows-[var(--headerHeight),1fr] h-screen',
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -58,11 +58,11 @@
     class={cls(
       'w-[var(--drawerWidth)] transition-all duration-500 overflow-hidden',
       temporaryDrawer && 'fixed h-full z-50 elevation-10',
-      theme.aside,
+      settingsClasses.aside,
       classes.aside
     )}
   >
-    <nav class={cls('nav h-full overflow-scroll w-[var(--navWidth)]', theme.nav, classes.nav)}>
+    <nav class={cls('nav h-full overflow-scroll w-[var(--navWidth)]', settingsClasses.nav, classes.nav)}>
       <slot name="nav" />
     </nav>
   </aside>
diff --git a/packages/svelte-ux/src/lib/components/Avatar.svelte b/packages/svelte-ux/src/lib/components/Avatar.svelte
index 9864355b6..78d4ea8ac 100644
--- a/packages/svelte-ux/src/lib/components/Avatar.svelte
+++ b/packages/svelte-ux/src/lib/components/Avatar.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { cls } from '../utils/styles';
   import Icon from './Icon.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let size: 'sm' | 'md' | 'lg' | 'unset' = 'md';
   export let icon: string | undefined = undefined;
 
-  const theme = getComponentTheme('Avatar');
+  const settingsClasses = getComponentClasses('Avatar');
 </script>
 
 <div
@@ -18,7 +18,7 @@
       md: 'w-10 h-10',
       lg: 'w-14 h-14',
     }[size],
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
 >
diff --git a/packages/svelte-ux/src/lib/components/Backdrop.svelte b/packages/svelte-ux/src/lib/components/Backdrop.svelte
index 0c87f02fb..c2ff726ac 100644
--- a/packages/svelte-ux/src/lib/components/Backdrop.svelte
+++ b/packages/svelte-ux/src/lib/components/Backdrop.svelte
@@ -3,14 +3,14 @@
 
   import { portal as portalAction, type PortalOptions } from '../actions/portal';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let blur: boolean = false;
   export let portal: PortalOptions = false;
 
   export let fadeParams: FadeParams = { duration: 300 };
 
-  const theme = getComponentTheme('Backdrop');
+  const settingsClasses = getComponentClasses('Backdrop');
 </script>
 
 <div
@@ -18,7 +18,7 @@
     'Backdrop',
     'fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-surface-content/50 dark:bg-surface-300/70',
     blur && 'backdrop-blur-sm',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
   on:keydown
diff --git a/packages/svelte-ux/src/lib/components/Badge.svelte b/packages/svelte-ux/src/lib/components/Badge.svelte
index 8bfbdb02e..39b9da4c0 100644
--- a/packages/svelte-ux/src/lib/components/Badge.svelte
+++ b/packages/svelte-ux/src/lib/components/Badge.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let value: number = $$slots.value ? 1 : 0;
   export let small = false;
@@ -9,7 +9,7 @@
 
   export let placement: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'top-right';
 
-  const theme = getComponentTheme('Badge');
+  const settingsClasses = getComponentClasses('Badge');
 </script>
 
 <div class="inline-grid grid-stack">
@@ -71,7 +71,7 @@
         'scale-0': (value ?? 0) === 0,
         'scale-100': (value ?? 0) !== 0,
       },
-      theme.root,
+      settingsClasses.root,
       $$props.class
     )}
   >
diff --git a/packages/svelte-ux/src/lib/components/Breadcrumb.svelte b/packages/svelte-ux/src/lib/components/Breadcrumb.svelte
index 940da75b5..8b2309d06 100644
--- a/packages/svelte-ux/src/lib/components/Breadcrumb.svelte
+++ b/packages/svelte-ux/src/lib/components/Breadcrumb.svelte
@@ -3,13 +3,13 @@
 
   import Icon from './Icon.svelte';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let items = [];
   export let divider: string | undefined = undefined;
   export let inline = false;
 
-  const theme = getComponentTheme('Breadcrumb');
+  const settingsClasses = getComponentClasses('Breadcrumb');
 
   $: displayItems = items?.filter((x) => x != null) ?? [];
 </script>
@@ -20,7 +20,7 @@
     'Breadcrumb',
     inline ? 'inline-flex' : 'flex',
     'items-center justify-start flex-wrap',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
 >
diff --git a/packages/svelte-ux/src/lib/components/Button.svelte b/packages/svelte-ux/src/lib/components/Button.svelte
index e9a869df2..8a9520440 100644
--- a/packages/svelte-ux/src/lib/components/Button.svelte
+++ b/packages/svelte-ux/src/lib/components/Button.svelte
@@ -7,7 +7,7 @@
   import { multi } from '../actions/multi';
   import type { Actions } from '../actions/multi';
   import type { ThemeColors } from '$lib/types';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { getButtonGroup } from './ButtonGroup.svelte';
   import { asIconData, type IconInput } from '$lib/utils/icons';
 
@@ -40,7 +40,7 @@
     icon?: string;
     loading?: string;
   } = {};
-  const theme = getComponentTheme('Button');
+  const settingsClasses = getComponentClasses('Button');
 
   // Override default from `ButtonGroup` if set
   const groupContext = getButtonGroup();
@@ -443,7 +443,7 @@
       variant ?? 'none'
     ) && 'ring-[--ring-color]',
 
-    theme.root,
+    settingsClasses.root,
     classes?.root,
     $$props.class
   );
@@ -468,7 +468,7 @@
 >
   {#if loading}
     <span transition:slide={{ axis: 'x', duration: 200 }}>
-      <ProgressCircle size={16} width={2} class={cls(theme.loading, classes.loading)} />
+      <ProgressCircle size={16} width={2} class={cls(settingsClasses.loading, classes.loading)} />
     </span>
   {:else if icon}
     <span in:slide={{ axis: 'x', duration: 200 }}>
@@ -476,10 +476,10 @@
         <!-- font path/url/etc or font-awesome IconDefinition -->
         <Icon
           data={asIconData(icon)}
-          class={cls('pointer-events-none', theme.icon, classes.icon)}
+          class={cls('pointer-events-none', settingsClasses.icon, classes.icon)}
         />
       {:else}
-        <Icon class={cls('pointer-events-none', theme.icon, classes.icon)} {...icon} />
+        <Icon class={cls('pointer-events-none', settingsClasses.icon, classes.icon)} {...icon} />
       {/if}
     </span>
   {/if}
diff --git a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte
index 0978a64d8..26cf68619 100644
--- a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte
+++ b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte
@@ -33,7 +33,7 @@
 
 <script lang="ts">
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let variant: ComponentProps<Button>['variant'] = undefined;
   export let size: ComponentProps<Button>['size'] | undefined = undefined;
@@ -41,7 +41,7 @@
   export let rounded: ComponentProps<Button>['rounded'] | undefined = undefined;
   export let disabled: boolean = false;
 
-  const theme = getComponentTheme('ButtonGroup');
+  const settingsClasses = getComponentClasses('ButtonGroup');
 
   $: _class = cls(
     'ButtonGroup',
@@ -69,7 +69,7 @@
     '[&.variant-fill-light_.Button:not(:first-child)]:ml-px',
     '[&.variant-fill-light_:not(:first-child)_.Button]:ml-px',
 
-    theme.root,
+    settingsClasses.root,
     $$props.class
   );
 
diff --git a/packages/svelte-ux/src/lib/components/Card.svelte b/packages/svelte-ux/src/lib/components/Card.svelte
index bb215e766..eace93d23 100644
--- a/packages/svelte-ux/src/lib/components/Card.svelte
+++ b/packages/svelte-ux/src/lib/components/Card.svelte
@@ -3,13 +3,13 @@
   import Header from './Header.svelte';
   import Overlay from './Overlay.svelte';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let title: string | string[] | null = null;
   export let subheading: string | string[] | null = null;
   export let loading: boolean | null = null;
 
-  const theme = getComponentTheme('Card');
+  const settingsClasses = getComponentClasses('Card');
 </script>
 
 <!-- 
@@ -24,7 +24,7 @@
   class={cls(
     'Card',
     'relative z-0 bg-surface-100 border rounded elevation-1 flex flex-col justify-between',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
 >
diff --git a/packages/svelte-ux/src/lib/components/Checkbox.svelte b/packages/svelte-ux/src/lib/components/Checkbox.svelte
index 753cc1362..74eff1ec7 100644
--- a/packages/svelte-ux/src/lib/components/Checkbox.svelte
+++ b/packages/svelte-ux/src/lib/components/Checkbox.svelte
@@ -4,7 +4,7 @@
   import Icon from './Icon.svelte';
   import { uniqueId } from '../utils/string';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let id = uniqueId('checkbox-');
   export let name = '';
@@ -22,7 +22,7 @@
     label?: string;
     icon?: string;
   } = {};
-  const theme = getComponentTheme('Checkbox');
+  const settingsClasses = getComponentClasses('Checkbox');
 
   // Update when group changes.  Separate function to break reactivity loop
   $: if (group !== null) {
@@ -47,7 +47,7 @@
   }
 </script>
 
-<div class={cls('Checkbox', 'inline-flex items-center', theme.root, classes.root, $$props.class)}>
+<div class={cls('Checkbox', 'inline-flex items-center', settingsClasses.root, classes.root, $$props.class)}>
   <input
     {id}
     {name}
@@ -73,7 +73,7 @@
           ? 'bg-gray-500 border-gray-500'
           : 'bg-primary border-primary'
         : 'border-gray-500',
-      theme.checkbox,
+      settingsClasses.checkbox,
       classes.checkbox
     )}
   >
@@ -82,7 +82,7 @@
       class={cls(
         'pointer-events-none text-primary-content transition-transform',
         checked ? 'scale-100' : 'scale-0',
-        theme.icon,
+        settingsClasses.icon,
         classes.icon
       )}
       size={{
@@ -105,7 +105,7 @@
           md: 'text-md', // 16px
           lg: 'text-lg', // 18px
         }[size],
-        theme.label,
+        settingsClasses.label,
         classes.label
       )}
     >
diff --git a/packages/svelte-ux/src/lib/components/Code.svelte b/packages/svelte-ux/src/lib/components/Code.svelte
index 23e114635..6ee38af8c 100644
--- a/packages/svelte-ux/src/lib/components/Code.svelte
+++ b/packages/svelte-ux/src/lib/components/Code.svelte
@@ -3,7 +3,7 @@
   import 'prism-svelte';
 
   import { cls } from '$lib/utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import CopyButton from './CopyButton.svelte';
 
   export let source: string | null = null;
@@ -18,10 +18,10 @@
     code?: string;
   } = {};
 
-  const theme = getComponentTheme('Code');
+  const settingsClasses = getComponentClasses('Code');
 </script>
 
-<div class={cls('Code', 'rounded', theme.root, classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded', settingsClasses.root, classes.root, $$props.class)}>
   {#if source}
     <div class="relative">
       <pre
diff --git a/packages/svelte-ux/src/lib/components/Collapse.svelte b/packages/svelte-ux/src/lib/components/Collapse.svelte
index 10eabeb6b..ca15b42bc 100644
--- a/packages/svelte-ux/src/lib/components/Collapse.svelte
+++ b/packages/svelte-ux/src/lib/components/Collapse.svelte
@@ -6,7 +6,7 @@
 
   import Icon from './Icon.svelte';
   import type { TransitionParams } from '$lib/types';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   /**
    * @slot {{ active: number }} trigger - Primary content to trigger the show/hide
@@ -31,7 +31,7 @@
     icon?: string;
     content?: string;
   } = {};
-  const theme = getComponentTheme('Collapse');
+  const settingsClasses = getComponentClasses('Collapse');
 
   /**
    * Controls how first, last, and gap between are calculated
@@ -54,7 +54,7 @@
     popout && list === 'type' && 'first-of-type:mt-0 last-of-type:mb-0',
     popout && list === 'parent' && 'first:mt-0 last:mb-0',
     popout && list === 'group' && 'group-first:mt-0 group-last:mb-0',
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -70,7 +70,7 @@
     }}
   >
     <slot name="trigger" {open}
-      ><span class={cls('flex-1', theme.trigger, classes.trigger)}>{name}</span></slot
+      ><span class={cls('flex-1', settingsClasses.trigger, classes.trigger)}>{name}</span></slot
     >
 
     <slot name="icon" {open}>
@@ -80,7 +80,7 @@
         class={cls(
           'transition-all duration-[var(--duration)] transform',
           'data-[open=true]:-rotate-180',
-          theme.icon,
+          settingsClasses.icon,
           classes.icon
         )}
       >
@@ -90,7 +90,7 @@
   </button>
 
   {#if open}
-    <div transition:transition={transitionParams} class={cls(theme.content, classes.content)}>
+    <div transition:transition={transitionParams} class={cls(settingsClasses.content, classes.content)}>
       <slot {open} />
     </div>
   {/if}
diff --git a/packages/svelte-ux/src/lib/components/CopyButton.svelte b/packages/svelte-ux/src/lib/components/CopyButton.svelte
index 7cdd86174..ef6e4a480 100644
--- a/packages/svelte-ux/src/lib/components/CopyButton.svelte
+++ b/packages/svelte-ux/src/lib/components/CopyButton.svelte
@@ -3,7 +3,7 @@
 
   import { cls } from '../utils/styles';
   import Button from './Button.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { slide } from 'svelte/transition';
 
   export let value: string;
@@ -13,13 +13,13 @@
     setTimeout(() => (showMessage = false), 3000);
   }
 
-  const theme = getComponentTheme('CopyButton');
+  const settingsClasses = getComponentClasses('CopyButton');
 </script>
 
 <Button
   icon={mdiContentCopy}
   {...$$restProps}
-  class={cls('CopyButton', theme.root, $$props.class)}
+  class={cls('CopyButton', settingsClasses.root, $$props.class)}
   on:click={() => {
     navigator.clipboard.writeText(value);
     showMessage = true;
diff --git a/packages/svelte-ux/src/lib/components/DateButton.svelte b/packages/svelte-ux/src/lib/components/DateButton.svelte
index f360d830c..36b32afbe 100644
--- a/packages/svelte-ux/src/lib/components/DateButton.svelte
+++ b/packages/svelte-ux/src/lib/components/DateButton.svelte
@@ -6,7 +6,7 @@
   import { DateToken, getDateFuncsByPeriodType, PeriodType } from '../utils/date';
   import type { SelectedDate } from '../utils/date';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { format as format_ux } from '../utils';
 
   const dispatch = createEventDispatcher();
@@ -19,7 +19,7 @@
   export let fade: boolean = false;
   export let format = getCustomFormat(periodType);
 
-  const theme = getComponentTheme('DateButton');
+  const settingsClasses = getComponentClasses('DateButton');
 
   function getCustomFormat(periodType: PeriodType) {
     switch (periodType) {
@@ -82,7 +82,7 @@
     isSelectedEnd ? '[--tw-gradient-to:transparent]' : '[--tw-gradient-to:theme(colors.primary)]',
     isSelected && (isVerticalSelection ? 'bg-gradient-to-b' : 'bg-gradient-to-r'),
     hidden && 'opacity-0 pointer-events-none',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
 >
diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
index 338e690fb..9ff8df12e 100644
--- a/packages/svelte-ux/src/lib/components/DateField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -8,7 +8,7 @@
 
   import Input from './Input.svelte';
   import DatePickerField from './DatePickerField.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let value: Date | null = null;
   export let format = getSettings().formats?.dates?.baseParsing ?? 'MM/dd/yyyy';
@@ -27,7 +27,7 @@
   export let dense = false;
   export let icon: string | null = null;
 
-  const theme = getComponentTheme('DateField');
+  const settingsClasses = getComponentClasses('DateField');
 
   let inputValue: string | undefined = '';
 
diff --git a/packages/svelte-ux/src/lib/components/DatePickerField.svelte b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
index 85364769c..6c5defd42 100644
--- a/packages/svelte-ux/src/lib/components/DatePickerField.svelte
+++ b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
@@ -8,7 +8,7 @@
   import Dialog from './Dialog.svelte';
   import { DateToken, getDateFuncsByPeriodType, PeriodType } from '../utils/date';
   import DateSelect from './DateSelect.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { format } from '../utils';
   import { getDictionary } from './settings';
 
@@ -32,7 +32,7 @@
   export let icon: string | null = null;
   export let center = false;
 
-  const theme = getComponentTheme('DatePickerField');
+  const settingsClasses = getComponentClasses('DatePickerField');
 
   let open: boolean = false;
 
diff --git a/packages/svelte-ux/src/lib/components/DateRange.svelte b/packages/svelte-ux/src/lib/components/DateRange.svelte
index f831fa268..2d6d13028 100644
--- a/packages/svelte-ux/src/lib/components/DateRange.svelte
+++ b/packages/svelte-ux/src/lib/components/DateRange.svelte
@@ -20,7 +20,7 @@
   import MenuField from './MenuField.svelte';
   import ToggleGroup from './ToggleGroup.svelte';
   import ToggleOption from './ToggleOption.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { mdScreen } from '$lib/stores/matchMedia';
   import { getSettings } from '.';
 
@@ -39,7 +39,7 @@
   ];
   export let getPeriodTypePresets = getDateRangePresets;
 
-  const theme = getComponentTheme('DateRange');
+  const settingsClasses = getComponentClasses('DateRange');
 
   let selectedPeriodType = selected?.periodType ?? periodTypes[0];
   let selectedPreset: string | null = null;
@@ -165,7 +165,7 @@
     'DateRange grid gap-2',
     'w-[min(90vw,384px)]',
     showSidebar && 'md:w-[640px] md:grid-cols-[2fr,3fr]',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
 >
diff --git a/packages/svelte-ux/src/lib/components/Dialog.svelte b/packages/svelte-ux/src/lib/components/Dialog.svelte
index 2d8b33343..3ed47b43f 100644
--- a/packages/svelte-ux/src/lib/components/Dialog.svelte
+++ b/packages/svelte-ux/src/lib/components/Dialog.svelte
@@ -12,7 +12,7 @@
   import Backdrop from './Backdrop.svelte';
   import ProgressCircle from './ProgressCircle.svelte';
   import Overlay from './Overlay.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   const dispatch = createEventDispatcher();
 
@@ -28,7 +28,7 @@
     actions?: string;
     backdrop?: string;
   } = {};
-  const theme = getComponentTheme('Dialog');
+  const settingsClasses = getComponentClasses('Dialog');
 
   let dialogEl: HTMLDivElement;
   let actionsEl: HTMLDivElement;
@@ -76,7 +76,7 @@
       // Do not allow event to reach Popover's on:mouseup (clickOutside)
       e.stopPropagation();
     }}
-    class={cls('z-50', theme.backdrop, classes.backdrop)}
+    class={cls('z-50', settingsClasses.backdrop, classes.backdrop)}
     fadeParams={{ duration: 150 }}
     {portal}
   />
@@ -85,7 +85,7 @@
     class={cls(
       'Dialog',
       'fixed top-0 left-0 w-full h-full z-50 flex items-center justify-center pointer-events-none',
-      theme.root,
+      settingsClasses.root,
       classes.root
     )}
     on:click={onClick}
@@ -109,7 +109,7 @@
     <div
       class={cls(
         'dialog rounded bg-surface-100 elevation-4 overflow-y-auto pointer-events-auto relative outline-none',
-        theme.dialog,
+        settingsClasses.dialog,
         classes.dialog,
         $$props.class
       )}
@@ -131,7 +131,7 @@
 
       <slot name="header">
         {#if $$slots.title}
-          <div class={cls('text-xl font-bold pt-4 pb-2 px-6', theme.title, classes.title)}>
+          <div class={cls('text-xl font-bold pt-4 pb-2 px-6', settingsClasses.title, classes.title)}>
             <slot name="title" />
           </div>
         {/if}
@@ -143,7 +143,7 @@
         <div
           class={cls(
             'actions flex w-full justify-end p-2 bg-surface-content/5 border-t',
-            theme.actions,
+            settingsClasses.actions,
             classes.actions
           )}
           bind:this={actionsEl}
diff --git a/packages/svelte-ux/src/lib/components/DividerDot.svelte b/packages/svelte-ux/src/lib/components/DividerDot.svelte
index 674ea3da8..13b715be4 100644
--- a/packages/svelte-ux/src/lib/components/DividerDot.svelte
+++ b/packages/svelte-ux/src/lib/components/DividerDot.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
-  const theme = getComponentTheme('DividerDot');
+  const settingsClasses = getComponentClasses('DividerDot');
 </script>
 
-<span class={cls('DividerDot mx-1', theme.root, $$props.class)}> • </span>
+<span class={cls('DividerDot mx-1', settingsClasses.root, $$props.class)}> • </span>
diff --git a/packages/svelte-ux/src/lib/components/Drawer.svelte b/packages/svelte-ux/src/lib/components/Drawer.svelte
index 077318730..8ac3a07f9 100644
--- a/packages/svelte-ux/src/lib/components/Drawer.svelte
+++ b/packages/svelte-ux/src/lib/components/Drawer.svelte
@@ -9,7 +9,7 @@
   import { focusMove } from '../actions/focus';
   import { portal as portalAction, type PortalOptions } from '../actions/portal';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   const dispatch = createEventDispatcher();
 
@@ -24,7 +24,7 @@
     backdrop?: string;
     actions?: string;
   } = {};
-  const theme = getComponentTheme('Drawer');
+  const settingsClasses = getComponentClasses('Drawer');
 
   $: dispatch('change', { open });
 
@@ -45,7 +45,7 @@
       // Do not allow event to reach Popover's on:mouseup (clickOutside)
       e.stopPropagation();
     }}
-    class={cls('z-50', theme.backdrop, classes.backdrop)}
+    class={cls('z-50', settingsClasses.backdrop, classes.backdrop)}
     {portal}
   />
 
@@ -61,7 +61,7 @@
         'left-0': ['top', 'top', 'bottom'].includes(placement),
         'right-0': placement === 'right',
       },
-      theme.root,
+      settingsClasses.root,
       classes.root,
       $$props.class
     )}
@@ -108,7 +108,7 @@
       <div
         class={cls(
           'actions fixed bottom-0 w-full flex justify-center bg-surface-content/5 p-1 border-t',
-          theme.actions,
+          settingsClasses.actions,
           classes.actions
         )}
       >
diff --git a/packages/svelte-ux/src/lib/components/Duration.svelte b/packages/svelte-ux/src/lib/components/Duration.svelte
index b0e76bbd5..979036727 100644
--- a/packages/svelte-ux/src/lib/components/Duration.svelte
+++ b/packages/svelte-ux/src/lib/components/Duration.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { DurationUnits, getDuration, humanizeDuration } from '../utils/duration';
   import timerStore from '../stores/timerStore';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { cls } from '$lib/utils/styles';
 
   export let start: Date | undefined = undefined;
@@ -11,7 +11,7 @@
   export let totalUnits: number = 99;
   export let variant: 'short' | 'long' = 'short';
 
-  const theme = getComponentTheme('Duration');
+  const settingsClasses = getComponentClasses('Duration');
 
   function getDelay() {
     const newDuration = getDuration(start, end ?? $timer, duration);
@@ -57,4 +57,4 @@
   });
 </script>
 
-<span class={cls('Duration', theme.root, $$props.class)}>{displayDuration}</span>
+<span class={cls('Duration', settingsClasses.root, $$props.class)}>{displayDuration}</span>
diff --git a/packages/svelte-ux/src/lib/components/EmptyMessage.svelte b/packages/svelte-ux/src/lib/components/EmptyMessage.svelte
index 8cc165f65..bbd8296d4 100644
--- a/packages/svelte-ux/src/lib/components/EmptyMessage.svelte
+++ b/packages/svelte-ux/src/lib/components/EmptyMessage.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
-  const theme = getComponentTheme('EmptyMessage');
+  const settingsClasses = getComponentClasses('EmptyMessage');
 </script>
 
 <div
@@ -13,7 +13,7 @@
     'p-1 bg-surface-300 _shadow-inner _ring-1 ring-surface-200/30',
     'text-surface-content/50 text-xs tracking-wider',
     'border border-surface-100/80 rounded',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
 >
diff --git a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte
index 960208987..b6669289d 100644
--- a/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte
+++ b/packages/svelte-ux/src/lib/components/ExpansionPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Collapse from './Collapse.svelte';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   /**
    * Controls how first, last, and gap between are calculated
@@ -21,7 +21,7 @@
     root?: string;
     toggle?: string;
   } = {};
-  const theme = getComponentTheme('ExpansionPanel');
+  const settingsClasses = getComponentClasses('ExpansionPanel');
 </script>
 
 <Collapse
@@ -34,7 +34,7 @@
       list === 'type' && 'first-of-type:border-t-0 first-of-type:rounded-t last-of-type:rounded-b',
       list === 'parent' && 'first:border-t-0 first:rounded-t last:rounded-b',
       list === 'group' && 'group-first:border-t-0 group-first:rounded-t group-last:rounded-b',
-      theme.root,
+      settingsClasses.root,
       classes.root,
       $$props.class
     ),
@@ -49,7 +49,7 @@
   <slot name="actions" />
 
   {#if enabled}
-    <div class={cls('px-3 pt-2 pb-3', theme.toggle, classes.toggle)}>
+    <div class={cls('px-3 pt-2 pb-3', settingsClasses.toggle, classes.toggle)}>
       <slot />
     </div>
   {/if}
diff --git a/packages/svelte-ux/src/lib/components/Field.svelte b/packages/svelte-ux/src/lib/components/Field.svelte
index 4b4d29316..eeb1632bc 100644
--- a/packages/svelte-ux/src/lib/components/Field.svelte
+++ b/packages/svelte-ux/src/lib/components/Field.svelte
@@ -4,7 +4,7 @@
   import { uniqueId } from 'lodash-es';
 
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   import Button from './Button.svelte';
   import Icon from './Icon.svelte';
@@ -41,7 +41,7 @@
     prepend?: string;
     append?: string;
   } = {};
-  const theme = getComponentTheme('Field');
+  const settingsClasses = getComponentClasses('Field');
 
   $: hasValue = Array.isArray(value)
     ? value.length > 0
@@ -64,7 +64,7 @@
     error ? '[--color:theme(colors.danger)]' : '[--color:theme(colors.primary)]',
     disabled && 'opacity-50 pointer-events-none',
     !base && (rounded ? 'rounded-full' : 'rounded'),
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -76,7 +76,7 @@
         'truncate group-hover:text-surface-content/70 group-focus-within:text-primary group-hover:group-focus-within:text-[var(--color)] cursor-pointer',
         error ? 'text-danger/80' : 'text-surface-content/50',
         `placement-${labelPlacement}`,
-        theme.label,
+        settingsClasses.label,
         classes.label
       )}
       for={id}
@@ -99,7 +99,7 @@
         !base && ['bg-surface-100', rounded ? 'rounded-full' : 'rounded'],
         error && 'border-danger',
         'group-focus-within:shadow-md group-focus-within:border-[var(--color)]',
-        theme.container,
+        settingsClasses.container,
         classes.container
       )}
     >
@@ -108,7 +108,7 @@
           <div
             class={cls(
               'prepend whitespace-nowrap flex items-center',
-              theme.prepend,
+              settingsClasses.prepend,
               classes.prepend
             )}
           >
@@ -132,7 +132,7 @@
                 error ? 'text-danger/80' : 'text-surface-content/50',
                 `placement-${labelPlacement}`,
                 (labelPlacement === 'inset' || hasValue) && 'shrink',
-                theme.label,
+                settingsClasses.label,
                 classes.label
               )}
               for={id}
@@ -148,7 +148,7 @@
               hasInsetLabel && 'pt-4',
               dense ? 'my-1' : 'my-2',
               center && 'text-center',
-              theme.input,
+              settingsClasses.input,
               classes.input
             )}
           >
@@ -161,7 +161,7 @@
         </div>
 
         {#if hasAppend}
-          <div class={cls('append whitespace-nowrap', theme.append, classes.append)}>
+          <div class={cls('append whitespace-nowrap', settingsClasses.append, classes.append)}>
             {#if clearable && hasValue}
               <Button
                 icon={mdiClose}
@@ -191,7 +191,7 @@
         error ? 'error' : 'hint',
         'text-xs ml-2 transition-transform ease-out overflow-hidden origin-top transform group-focus-within:scale-y-100',
         error ? 'text-danger' : 'text-surface-content/50 scale-y-0',
-        theme.error,
+        settingsClasses.error,
         classes.error
       )}
     >
diff --git a/packages/svelte-ux/src/lib/components/Form.svelte b/packages/svelte-ux/src/lib/components/Form.svelte
index 58882c429..5a8e10919 100644
--- a/packages/svelte-ux/src/lib/components/Form.svelte
+++ b/packages/svelte-ux/src/lib/components/Form.svelte
@@ -3,7 +3,7 @@
   import type { Schema } from 'zod';
 
   import formStore from '../stores/formStore';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { cls } from '$lib/utils/styles';
 
   const dispatch = createEventDispatcher();
@@ -11,7 +11,7 @@
   export let initial: any = {};
   export let schema: Schema | undefined = undefined;
 
-  const theme = getComponentTheme('Form');
+  const settingsClasses = getComponentClasses('Form');
 
   const [state, draft, errors] = formStore(initial, { schema });
   $: current = draft.current;
@@ -26,7 +26,7 @@
   on:reset|preventDefault={(e) => {
     draft.revert();
   }}
-  class={cls(theme.root, $$props.class)}
+  class={cls(settingsClasses.root, $$props.class)}
   {...$$restProps}
 >
   <slot
diff --git a/packages/svelte-ux/src/lib/components/Gooey.svelte b/packages/svelte-ux/src/lib/components/Gooey.svelte
index e08a0bc0b..375980c49 100644
--- a/packages/svelte-ux/src/lib/components/Gooey.svelte
+++ b/packages/svelte-ux/src/lib/components/Gooey.svelte
@@ -3,7 +3,7 @@
 
   import { uniqueId } from '$lib/utils/string';
   import { cls } from '$lib/utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   /** Apply gaussian blur.  Required unless blurring externally (`filter: blur()`, etc) */
   export let blur: number | undefined = undefined;
@@ -21,12 +21,12 @@
     root?: string;
     svg?: string;
   } = {};
-  const theme = getComponentTheme('Gooey');
+  const settingsClasses = getComponentClasses('Gooey');
 
   const filterId = uniqueId('filter-');
 </script>
 
-<svg class={cls('fixed inset-0 pointer-events-none', theme.svg, classes?.svg)}>
+<svg class={cls('fixed inset-0 pointer-events-none', settingsClasses.svg, classes?.svg)}>
   <filter id={filterId}>
     {#if blur}
       <feGaussianBlur in="SourceGraphic" stdDeviation={blur} result="blur" />
@@ -51,7 +51,7 @@
 <div
   style:filter="url(#{filterId})"
   {...$$restProps}
-  class={cls('inline-block', theme.root, classes?.root, $$props.class)}
+  class={cls('inline-block', settingsClasses.root, classes?.root, $$props.class)}
 >
   <slot />
 </div>
diff --git a/packages/svelte-ux/src/lib/components/Header.svelte b/packages/svelte-ux/src/lib/components/Header.svelte
index f2449d6e1..c3e5c64aa 100644
--- a/packages/svelte-ux/src/lib/components/Header.svelte
+++ b/packages/svelte-ux/src/lib/components/Header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { cls } from '$lib/utils/styles';
   import Breadcrumb from './Breadcrumb.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let title: string | string[] | null = null;
   export let subheading: string | string[] | null = null;
 
-  const theme = getComponentTheme('Header');
+  const settingsClasses = getComponentClasses('Header');
 </script>
 
-<div class={cls('Header', 'flex items-center gap-4', theme.root, $$props.class)}>
+<div class={cls('Header', 'flex items-center gap-4', settingsClasses.root, $$props.class)}>
   <slot name="avatar" />
 
   <div class="flex-1">
diff --git a/packages/svelte-ux/src/lib/components/Icon.svelte b/packages/svelte-ux/src/lib/components/Icon.svelte
index c29608ee2..ec1b9c6ea 100644
--- a/packages/svelte-ux/src/lib/components/Icon.svelte
+++ b/packages/svelte-ux/src/lib/components/Icon.svelte
@@ -7,7 +7,7 @@
 
   import { uniqueId } from '../utils/string';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let size: string | number = '1.5em';
   export let width = size;
@@ -29,7 +29,7 @@
     root?: string;
     path?: string | string[];
   } = {};
-  const theme = getComponentTheme('Icon');
+  const settingsClasses = getComponentClasses('Icon');
 
   $: if (typeof data === 'object' && data && 'icon' in data) {
     // Font Awesome
@@ -85,7 +85,7 @@
     class={cls(
       'Icon',
       'icon-container inline-block flex-shrink-0 align-middle fill-current',
-      theme.root,
+      settingsClasses.root,
       classes.root,
       $$props.class
     )}
@@ -110,7 +110,7 @@
     class={cls(
       'Icon',
       'inline-block flex-shrink-0 fill-current',
-      theme.root,
+      settingsClasses.root,
       classes.root,
       $$props.class
     )}
@@ -131,7 +131,7 @@
         {d}
         fill="currentColor"
         class={cls(
-          Array.isArray(theme.path) ? theme.path[i] : theme.path,
+          Array.isArray(settingsClasses.path) ? settingsClasses.path[i] : settingsClasses.path,
           Array.isArray(classes.path) ? classes.path[i] : classes.path
         )}
       />
diff --git a/packages/svelte-ux/src/lib/components/Input.svelte b/packages/svelte-ux/src/lib/components/Input.svelte
index 36611beee..044a57b7c 100644
--- a/packages/svelte-ux/src/lib/components/Input.svelte
+++ b/packages/svelte-ux/src/lib/components/Input.svelte
@@ -11,7 +11,7 @@
   import { multi } from '../actions/multi';
   import type { Actions } from '../actions/multi';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let value = '';
   export let type: HTMLInputTypeAttribute = 'text';
@@ -27,7 +27,7 @@
   export let placeholder = mask;
   export let disabled = false;
 
-  const theme = getComponentTheme('Input');
+  const settingsClasses = getComponentClasses('Input');
 
   let isFocused = false;
 
@@ -126,7 +126,7 @@
     'Input',
     'text-sm w-full outline-none bg-transparent placeholder-surface/50 selection:bg-surface-content/10',
     mask && (mask == placeholder || isFocused || value) && 'font-mono',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
 />
diff --git a/packages/svelte-ux/src/lib/components/Lazy.svelte b/packages/svelte-ux/src/lib/components/Lazy.svelte
index cbd75079d..ffbd37416 100644
--- a/packages/svelte-ux/src/lib/components/Lazy.svelte
+++ b/packages/svelte-ux/src/lib/components/Lazy.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { cls } from '$lib/utils/styles';
   import { intersection } from '../actions/observer';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   /**
    * Placeholder height.  Should match closely to resulting height to reducing scroll bouncing
@@ -24,7 +24,7 @@
 
   export let offset: Offset = {};
 
-  const theme = getComponentTheme('Lazy');
+  const settingsClasses = getComponentClasses('Lazy');
 </script>
 
 <div
@@ -44,7 +44,7 @@
   on:intersecting
   style:min-height={typeof height === 'number' ? `${height}px` : height}
   {...$$restProps}
-  class={cls('Lazy', theme.root, $$props.class)}
+  class={cls('Lazy', settingsClasses.root, $$props.class)}
 >
   {#if show}
     <slot />
diff --git a/packages/svelte-ux/src/lib/components/ListItem.svelte b/packages/svelte-ux/src/lib/components/ListItem.svelte
index fae01ba79..f850a2d97 100644
--- a/packages/svelte-ux/src/lib/components/ListItem.svelte
+++ b/packages/svelte-ux/src/lib/components/ListItem.svelte
@@ -5,7 +5,7 @@
   import Overlay from './Overlay.svelte';
   import type { ComponentProps } from '../types';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let title: string | number | null = null;
   export let subheading: string | number | null = null;
@@ -41,7 +41,7 @@
     title?: string;
     subheading?: string;
   } = {};
-  const theme = getComponentTheme('ListItem');
+  const settingsClasses = getComponentClasses('ListItem');
 
   /**
    * Show loading overlay
@@ -60,7 +60,7 @@
     list === 'group' && 'group-first:border-t-0 group-first:rounded-t group-last:rounded-b',
     noShadow !== true && 'elevation-1',
     noBackground !== true && 'bg-surface-100',
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -75,11 +75,11 @@
   <slot name="avatar">
     {#if icon != null}
       {#if avatar}
-        <Avatar class={cls(theme.avatar, classes.avatar)} {...avatar}>
-          <Icon path={icon} class={cls(theme.icon, classes.icon)} />
+        <Avatar class={cls(settingsClasses.avatar, classes.avatar)} {...avatar}>
+          <Icon path={icon} class={cls(settingsClasses.icon, classes.icon)} />
         </Avatar>
       {:else}
-        <Icon path={icon} class={cls(theme.icon, classes.icon)} />
+        <Icon path={icon} class={cls(settingsClasses.icon, classes.icon)} />
       {/if}
     {/if}
   </slot>
@@ -87,13 +87,13 @@
   <div class="flex-grow">
     <slot name="title">
       {#if title != null}
-        <div class={cls(theme.title, classes.title)}>{title}</div>
+        <div class={cls(settingsClasses.title, classes.title)}>{title}</div>
       {/if}
     </slot>
 
     <slot name="subheading">
       {#if subheading != null}
-        <div class={cls('text-sm text-surface-content/50', theme.subheading, classes.subheading)}>
+        <div class={cls('text-sm text-surface-content/50', settingsClasses.subheading, classes.subheading)}>
           {subheading}
         </div>
       {/if}
diff --git a/packages/svelte-ux/src/lib/components/Menu.svelte b/packages/svelte-ux/src/lib/components/Menu.svelte
index 86c939f2a..e2ab91d56 100644
--- a/packages/svelte-ux/src/lib/components/Menu.svelte
+++ b/packages/svelte-ux/src/lib/components/Menu.svelte
@@ -9,7 +9,7 @@
 
   import Popover from './Popover.svelte';
   import type { TransitionParams } from '$lib/types';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   const dispatch = createEventDispatcher();
 
@@ -32,7 +32,7 @@
     root?: string;
     menu?: string;
   } = {};
-  const theme = getComponentTheme('Menu');
+  const settingsClasses = getComponentClasses('Menu');
 
   export let menuItemsEl: HTMLMenuElement | undefined = undefined;
 
@@ -63,7 +63,7 @@
   class={cls(
     'Menu',
     'bg-surface-100 rounded shadow border overflow-auto',
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -73,7 +73,7 @@
 >
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <menu
-    class={cls('menu-items outline-none max-h-screen', theme.menu, classes.menu)}
+    class={cls('menu-items outline-none max-h-screen', settingsClasses.menu, classes.menu)}
     bind:this={menuItemsEl}
     on:click={onClick}
     on:mouseup={(e) => {
diff --git a/packages/svelte-ux/src/lib/components/MenuButton.svelte b/packages/svelte-ux/src/lib/components/MenuButton.svelte
index c5cba6659..1650852f6 100644
--- a/packages/svelte-ux/src/lib/components/MenuButton.svelte
+++ b/packages/svelte-ux/src/lib/components/MenuButton.svelte
@@ -8,7 +8,7 @@
   import Icon from './Icon.svelte';
   import Menu from './Menu.svelte';
   import MenuItem from './MenuItem.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let options: Array<{ label: string; value: any; icon?: string }>;
   export let value: any = null;
@@ -21,7 +21,7 @@
     label?: string;
     icon?: string;
   } = {};
-  const theme = getComponentTheme('MenuButton');
+  const settingsClasses = getComponentClasses('MenuButton');
 
   let open = false;
 </script>
@@ -29,10 +29,10 @@
 <Button
   on:click={() => (open = !open)}
   {...$$restProps}
-  class={cls('MenuButton', theme.root, classes.root, $$props.class)}
+  class={cls('MenuButton', settingsClasses.root, classes.root, $$props.class)}
 >
   <slot name="selection">
-    <span class={cls('truncate', theme.label, classes.label)}>
+    <span class={cls('truncate', settingsClasses.label, classes.label)}>
       {selected?.label ?? 'No selection'}
     </span>
   </slot>
@@ -42,7 +42,7 @@
     class={cls(
       'opacity-50 transform transition-all -mr-2 duration-300',
       open && '-rotate-180',
-      theme.icon,
+      settingsClasses.icon,
       classes.icon
     )}
   />
diff --git a/packages/svelte-ux/src/lib/components/MenuField.svelte b/packages/svelte-ux/src/lib/components/MenuField.svelte
index 307c84a74..7ffb749a8 100644
--- a/packages/svelte-ux/src/lib/components/MenuField.svelte
+++ b/packages/svelte-ux/src/lib/components/MenuField.svelte
@@ -10,7 +10,7 @@
   import Menu from './Menu.svelte';
   import MenuItem from './MenuItem.svelte';
   import Button from './Button.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import type { MenuOption } from '$lib/types/options';
 
   export let options: MenuOption[] = [];
@@ -29,7 +29,7 @@
     menuIcon?: string;
     group?: string;
   } = {};
-  const theme = getComponentTheme('MenuField');
+  const settingsClasses = getComponentClasses('MenuField');
 
   let open = false;
   $: selected = options?.find((x) => x.value === value);
@@ -93,7 +93,7 @@
         {
           '-rotate-180': open,
         },
-        theme.menuIcon,
+        settingsClasses.menuIcon,
         classes.menuIcon
       )}
       on:click={() => (open = !open)}
@@ -121,7 +121,7 @@
             <div
               class={cls(
                 'group-header text-xs leading-8 tracking-widest text-surface-content/50 px-2',
-                theme.group,
+                settingsClasses.group,
                 classes.group
               )}
             >
@@ -132,7 +132,7 @@
           <MenuItem
             icon={option.icon}
             selected={option.value === value}
-            class={cls(option.group ? 'px-4' : 'px-2', theme.option, classes.option)}
+            class={cls(option.group ? 'px-4' : 'px-2', settingsClasses.option, classes.option)}
             classes={classes.menuItem}
             on:click={() => (value = option.value)}
           >
diff --git a/packages/svelte-ux/src/lib/components/MenuItem.svelte b/packages/svelte-ux/src/lib/components/MenuItem.svelte
index fdfb6e10a..4102394d4 100644
--- a/packages/svelte-ux/src/lib/components/MenuItem.svelte
+++ b/packages/svelte-ux/src/lib/components/MenuItem.svelte
@@ -4,7 +4,7 @@
   import { cls } from '../utils/styles';
   import { scrollIntoView as scrollIntoViewAction, type ScrollIntoViewOptions } from '../actions/scroll';
   import { setButtonGroup } from './ButtonGroup.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { settings, getSettings } from './settings';
 
   type ButtonProps = ComponentProps<Button>;
@@ -19,7 +19,7 @@
     icon: 'text-surface-content/50',
     selected: 'font-semibold [:not(.group:hover)>&]:bg-surface-content/5',
   };
-  const theme = getComponentTheme('MenuItem');
+  const settingsClasses = getComponentClasses('MenuItem');
 
   let scrollOptions: ScrollIntoViewOptions;
   $: scrollOptions = typeof(scrollIntoView) === "boolean" ? { condition: scrollIntoView } as ScrollIntoViewOptions : scrollIntoView;
@@ -43,7 +43,7 @@
     'MenuItem',
     'text-left items-center p-2 hover:bg-surface-content/5 rounded duration-75',
     selected && classes?.selected,
-    theme.root,
+    settingsClasses.root,
     classes?.root,
     $$props.class
   )}
diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
index 08a1dd4d6..72bd55d22 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelect.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   import { type ComponentProps, createEventDispatcher } from 'svelte';
   import { flip } from 'svelte/animate';
@@ -36,7 +36,7 @@
   export let classes: {
     root?: string;
   } = {};
-  const theme = getComponentTheme('MultiSelect');
+  const settingsClasses = getComponentClasses('MultiSelect');
 
   export let onApply = async (ctx: {
     selection: typeof $selection;
@@ -115,7 +115,7 @@
   </div>
 {/if}
 
-<div class={cls('overflow-auto py-1 px-4', theme.root, classes.root, $$restProps.class)}>
+<div class={cls('overflow-auto py-1 px-4', settingsClasses.root, classes.root, $$restProps.class)}>
   <!-- initially selected options -->
   <InfiniteScroll items={filteredSelectedOptions} disabled={!infiniteScroll} let:visibleItems>
     {#each visibleItems as option (get(option, valueProp))}
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
index 0df4bbed8..25e24a2e5 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   import { createEventDispatcher, type ComponentProps, type ComponentEvents } from 'svelte';
   import { get } from 'lodash-es';
@@ -48,7 +48,7 @@
     field?: string;
     actions?: string;
   } = {};
-  const theme = getComponentTheme('MultiSelectField');
+  const settingsClasses = getComponentClasses('MultiSelectField');
 
   const dispatch = createEventDispatcher<{ change: { value: typeof value } }>();
 
@@ -133,7 +133,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class={cls(disabled && 'pointer-events-none', theme.root, classes.root, $$props.class)}
+  class={cls(disabled && 'pointer-events-none', settingsClasses.root, classes.root, $$props.class)}
   on:click={onClick}
 >
   <!-- TODO: Setup blur without jank on open or issues when clicking within menu -->
@@ -150,7 +150,7 @@
     bind:inputEl
     on:focus={onFocus}
     on:change={onSearchChange}
-    class={cls('h-full', theme.field, classes.field)}
+    class={cls('h-full', settingsClasses.field, classes.field)}
     {...$$restProps}
   >
     <slot slot="prepend" name="prepend" />
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
index 84cf69971..3037a2455 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   import type { Placement } from '@floating-ui/dom';
 
@@ -30,7 +30,7 @@
     root?: string;
     menu?: string;
   } = {};
-  const theme = getComponentTheme('MultiSelectMenu');
+  const settingsClasses = getComponentClasses('MultiSelectMenu');
 
   export let menuItemsEl: HTMLMenuElement | undefined = undefined;
 </script>
@@ -44,8 +44,8 @@
   let:close
   {...$$restProps}
   classes={{
-    root: cls('MultiSelectMenu', theme.root, classes.root, $$restProps.class),
-    menu: cls('flex flex-col', theme.menu, classes.menu),
+    root: cls('MultiSelectMenu', settingsClasses.root, classes.root, $$restProps.class),
+    menu: cls('flex flex-col', settingsClasses.menu, classes.menu),
   }}
   bind:menuItemsEl
 >
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte b/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte
index 83d367566..073310d16 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Checkbox from './Checkbox.svelte';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let checked: boolean;
   export let indeterminate = false;
@@ -12,14 +12,14 @@
     checkbox?: string;
     container?: string;
   } = {};
-  const theme = getComponentTheme('MultiSelectOption');
+  const settingsClasses = getComponentClasses('MultiSelectOption');
 </script>
 
 <div
   class={cls(
     'MultiSelectOption',
     'grid grid-cols-[1fr,auto] py-2',
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -29,12 +29,12 @@
     bind:indeterminate
     on:change
     {disabled}
-    class={cls(theme.checkbox, classes.checkbox)}
+    class={cls(settingsClasses.checkbox, classes.checkbox)}
   >
     <div
       class={cls(
         'ml-1 inline-block cursor-pointer text-sm text-surface-content',
-        theme.container,
+        settingsClasses.container,
         classes.container
       )}
     >
diff --git a/packages/svelte-ux/src/lib/components/NavItem.svelte b/packages/svelte-ux/src/lib/components/NavItem.svelte
index 8299db888..1c96a36f4 100644
--- a/packages/svelte-ux/src/lib/components/NavItem.svelte
+++ b/packages/svelte-ux/src/lib/components/NavItem.svelte
@@ -5,7 +5,7 @@
   import { scrollIntoView } from '../actions/scroll';
   import { getScrollParent } from '../utils/dom';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { showDrawer } from './AppLayout.svelte';
   import { mdScreen } from '../stores/matchMedia';
 
@@ -19,7 +19,7 @@
     active?: string;
     icon?: string;
   } = {};
-  const theme = getComponentTheme('NavItem');
+  const settingsClasses = getComponentClasses('NavItem');
 
   $: isPathActive = path ? isActive(currentUrl, path) : false;
 </script>
@@ -29,8 +29,8 @@
   class={cls(
     'NavItem',
     'flex items-center',
-    theme.root,
-    isPathActive && ['is-active', theme.active, classes.active],
+    settingsClasses.root,
+    isPathActive && ['is-active', settingsClasses.active, classes.active],
     classes.root,
     $$props.class
   )}
@@ -52,7 +52,7 @@
   {/if}
 
   {#if icon}
-    <Icon path={icon} class={cls('mr-3 flex-shrink-0', theme.icon, classes.icon)} />
+    <Icon path={icon} class={cls('mr-3 flex-shrink-0', settingsClasses.icon, classes.icon)} />
   {/if}
 
   {text}
diff --git a/packages/svelte-ux/src/lib/components/NumberStepper.svelte b/packages/svelte-ux/src/lib/components/NumberStepper.svelte
index 99368e2b9..09d896556 100644
--- a/packages/svelte-ux/src/lib/components/NumberStepper.svelte
+++ b/packages/svelte-ux/src/lib/components/NumberStepper.svelte
@@ -4,14 +4,14 @@
 
   import { Button, TextField } from '.';
   import { selectOnFocus } from '$lib/actions/input';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { cls } from '$lib/utils/styles';
 
   export let value: number = 0;
   export let min: number | undefined = undefined;
   export let max: number | undefined = undefined;
 
-  const theme = getComponentTheme('NumberStepper');
+  const settingsClasses = getComponentClasses('NumberStepper');
 
   const dispatch = createEventDispatcher();
 
@@ -22,7 +22,7 @@
   type="integer"
   bind:value
   align="center"
-  class={cls('NumberStepper w-24', theme.root, $$props.class)}
+  class={cls('NumberStepper w-24', settingsClasses.root, $$props.class)}
   actions={(node) => [selectOnFocus(node)]}
   {...$$restProps}
 >
diff --git a/packages/svelte-ux/src/lib/components/Overflow.svelte b/packages/svelte-ux/src/lib/components/Overflow.svelte
index 5c97c15c9..1ad6d16c4 100644
--- a/packages/svelte-ux/src/lib/components/Overflow.svelte
+++ b/packages/svelte-ux/src/lib/components/Overflow.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { overflow } from '$lib/actions/layout';
   import { cls } from '$lib/utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
-  const theme = getComponentTheme('Overflow');
+  const settingsClasses = getComponentClasses('Overflow');
 
   let overflowX = 0;
   let overflowY = 0;
@@ -16,7 +16,7 @@
     overflowY = e.detail.overflowY;
   }}
   {...$$restProps}
-  class={cls('Overflow', theme.root, $$props.class)}
+  class={cls('Overflow', settingsClasses.root, $$props.class)}
 >
   <slot {overflowX} {overflowY} />
 </div>
diff --git a/packages/svelte-ux/src/lib/components/Overlay.svelte b/packages/svelte-ux/src/lib/components/Overlay.svelte
index 92f685f93..650cae44f 100644
--- a/packages/svelte-ux/src/lib/components/Overlay.svelte
+++ b/packages/svelte-ux/src/lib/components/Overlay.svelte
@@ -3,7 +3,7 @@
   import type { TransitionConfig } from 'svelte/transition';
 
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let center = false;
   export let transition = [fade, { duration: 100 }] as [
@@ -11,7 +11,7 @@
     object,
   ];
 
-  const theme = getComponentTheme('Overlay');
+  const settingsClasses = getComponentClasses('Overlay');
 
   $: [transitionFn, transitionConfig] = transition;
 </script>
@@ -21,7 +21,7 @@
     'Overlay',
     'absolute top-0 bottom-0 left-0 right-0 z-30 bg-surface-100/75',
     center && 'flex items-center justify-center',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
   transition:transitionFn={transitionConfig}
diff --git a/packages/svelte-ux/src/lib/components/Pagination.svelte b/packages/svelte-ux/src/lib/components/Pagination.svelte
index fbdfb33cc..fd81bd50e 100644
--- a/packages/svelte-ux/src/lib/components/Pagination.svelte
+++ b/packages/svelte-ux/src/lib/components/Pagination.svelte
@@ -12,7 +12,7 @@
   import MenuItem from './MenuItem.svelte';
   import Toggle from './Toggle.svelte';
   import Tooltip from './Tooltip.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   type Pagination = ReturnType<typeof paginationStore>;
 
@@ -39,12 +39,12 @@
     pagination?: string;
     perPage?: string;
   } = {};
-  const theme = getComponentTheme('Pagination');
+  const settingsClasses = getComponentClasses('Pagination');
 </script>
 
 {#if $pagination.totalPages > 1 || !hideSinglePage}
   <div
-    class={cls('Pagination', 'flex items-center gap-1', theme.root, classes.root, $$props.class)}
+    class={cls('Pagination', 'flex items-center gap-1', settingsClasses.root, classes.root, $$props.class)}
   >
     {#each show as component}
       {#if component === 'actions'}
@@ -58,7 +58,7 @@
             on:click={pagination.firstPage}
             disabled={$pagination.isFirst}
             aria-label="First Page"
-            class={cls('p-2', theme.buttons, classes.buttons)}
+            class={cls('p-2', settingsClasses.buttons, classes.buttons)}
           />
         </Tooltip>
       {/if}
@@ -70,7 +70,7 @@
             on:click={pagination.prevPage}
             disabled={$pagination.isFirst}
             aria-label="Previous Page"
-            class={cls('p-2', theme.buttons, classes.buttons)}
+            class={cls('p-2', settingsClasses.buttons, classes.buttons)}
           />
         </Tooltip>
       {/if}
@@ -82,7 +82,7 @@
             on:click={pagination.nextPage}
             disabled={$pagination.isLast}
             aria-label="Next Page"
-            class={cls('p-2', theme.buttons, classes.buttons)}
+            class={cls('p-2', settingsClasses.buttons, classes.buttons)}
           />
         </Tooltip>
       {/if}
@@ -94,13 +94,13 @@
             on:click={pagination.lastPage}
             disabled={$pagination.isLast}
             aria-label="Last Page"
-            class={cls('p-2', theme.buttons, classes.buttons)}
+            class={cls('p-2', settingsClasses.buttons, classes.buttons)}
           />
         </Tooltip>
       {/if}
 
       {#if component === 'perPage'}
-        <div class={cls('text-sm text-center', theme.perPage, classes.perPage)}>
+        <div class={cls('text-sm text-center', settingsClasses.perPage, classes.perPage)}>
           Per page:
           <Toggle let:on={open} let:toggle>
             <span>
@@ -133,7 +133,7 @@
 
       {#if component === 'pagination'}
         <slot name="pagination" pagination={$pagination}>
-          <div class={cls('text-sm tabular-nums', theme.pagination, classes.pagination)}>
+          <div class={cls('text-sm tabular-nums', settingsClasses.pagination, classes.pagination)}>
             {format($pagination)}
           </div>
         </slot>
diff --git a/packages/svelte-ux/src/lib/components/Popover.svelte b/packages/svelte-ux/src/lib/components/Popover.svelte
index 1fee07388..13524684e 100644
--- a/packages/svelte-ux/src/lib/components/Popover.svelte
+++ b/packages/svelte-ux/src/lib/components/Popover.svelte
@@ -4,7 +4,7 @@
 
   import { popover } from '../actions/popover';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let open = false;
   export let placement: Placement | undefined = undefined;
@@ -40,7 +40,7 @@
   export let resize = false;
 
   const dispatch = createEventDispatcher();
-  const theme = getComponentTheme('Popover');
+  const settingsClasses = getComponentClasses('Popover');
 
   function close(reason: string = 'unknown') {
     if (open) {
@@ -61,7 +61,7 @@
 
 {#if open}
   <div
-    class={cls('Popover absolute z-50 outline-none', theme.root, $$props.class)}
+    class={cls('Popover absolute z-50 outline-none', settingsClasses.root, $$props.class)}
     tabindex="-1"
     use:popover={{ anchorEl, placement, autoPlacement, offset, padding, matchWidth, resize }}
     on:clickOutside={(e) => {
diff --git a/packages/svelte-ux/src/lib/components/Progress.svelte b/packages/svelte-ux/src/lib/components/Progress.svelte
index adaa69666..ee8c00630 100644
--- a/packages/svelte-ux/src/lib/components/Progress.svelte
+++ b/packages/svelte-ux/src/lib/components/Progress.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { cls } from '$lib/utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let value: number | null;
   export let max: number | undefined = undefined;
 
-  const theme = getComponentTheme('Progress');
+  const settingsClasses = getComponentClasses('Progress');
 </script>
 
 <progress
@@ -32,7 +32,7 @@
     '[&::-webkit-progress-bar]:rounded-full',
     'rounded-full',
 
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
 />
diff --git a/packages/svelte-ux/src/lib/components/ProgressCircle.svelte b/packages/svelte-ux/src/lib/components/ProgressCircle.svelte
index f8d5c510d..f23bb69de 100644
--- a/packages/svelte-ux/src/lib/components/ProgressCircle.svelte
+++ b/packages/svelte-ux/src/lib/components/ProgressCircle.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { cls } from '$lib/utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let value: number | null = null;
   export let rotate = 0;
@@ -8,7 +8,7 @@
   export let width = 4;
   export let track = false;
 
-  const theme = getComponentTheme('ProgressCircle');
+  const settingsClasses = getComponentClasses('ProgressCircle');
 
   const radius = 20;
 
@@ -25,7 +25,7 @@
   class={cls(
     'ProgressCircular',
     'relative inline-flex justify-center items-center align-middle',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
   class:indeterminate
diff --git a/packages/svelte-ux/src/lib/components/QuickSearch.svelte b/packages/svelte-ux/src/lib/components/QuickSearch.svelte
index 8e55049d3..c1b865da5 100644
--- a/packages/svelte-ux/src/lib/components/QuickSearch.svelte
+++ b/packages/svelte-ux/src/lib/components/QuickSearch.svelte
@@ -5,7 +5,7 @@
   import Dialog from '$lib/components/Dialog.svelte';
   import Kbd from './Kbd.svelte';
   import SelectField from '$lib/components/SelectField.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { cls } from '$lib/utils/styles';
   import { smScreen } from '$lib/stores';
   import { autoFocus, selectOnFocus } from '$lib/actions';
@@ -17,7 +17,7 @@
     root?: string;
     button?: string;
   } = {};
-  const theme = getComponentTheme('QuickSearch');
+  const settingsClasses = getComponentClasses('QuickSearch');
 
   let open = false;
 
@@ -48,7 +48,7 @@
   on:click={() => (open = true)}
   class={cls(
     'sm:bg-black/10 sm:hover:bg-black/20 rounded-full sm:w-56 justify-start',
-    theme.button,
+    settingsClasses.button,
     classes.button
   )}
 >
@@ -59,7 +59,7 @@
 <Dialog
   bind:open
   classes={{
-    root: cls('items-start mt-20', theme.root, classes.root, $$props.class),
+    root: cls('items-start mt-20', settingsClasses.root, classes.root, $$props.class),
     backdrop: 'backdrop-blur-sm',
   }}
 >
diff --git a/packages/svelte-ux/src/lib/components/Radio.svelte b/packages/svelte-ux/src/lib/components/Radio.svelte
index bbfe64c09..c16af767b 100644
--- a/packages/svelte-ux/src/lib/components/Radio.svelte
+++ b/packages/svelte-ux/src/lib/components/Radio.svelte
@@ -4,7 +4,7 @@
   import Icon from './Icon.svelte';
   import { uniqueId } from '../utils/string';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let id = uniqueId('radio-');
   export let name: string = '';
@@ -20,12 +20,12 @@
     label?: string;
     icon?: string;
   } = {};
-  const theme = getComponentTheme('Radio');
+  const settingsClasses = getComponentClasses('Radio');
 
   $: checked = group !== undefined ? group === value : checked;
 </script>
 
-<div class={cls('Radio', 'inline-flex items-center', theme.root, classes.root, $$props.class)}>
+<div class={cls('Radio', 'inline-flex items-center', settingsClasses.root, classes.root, $$props.class)}>
   <input
     {id}
     {name}
@@ -49,7 +49,7 @@
           ? 'border-surface-content/30'
           : 'border-primary'
         : 'border-surface-content/30',
-      theme.checkbox,
+      settingsClasses.checkbox,
       classes.checkbox
     )}
   >
@@ -59,7 +59,7 @@
         'pointer-events-none transition-transform',
         disabled ? 'text-surface-content/30 border-surface-content/30' : 'text-primary',
         checked ? 'scale-100' : 'scale-0',
-        theme.icon,
+        settingsClasses.icon,
         classes.icon
       )}
       size={{
@@ -82,7 +82,7 @@
           md: 'text-md', // 16px
           lg: 'text-lg', // 18px
         }[size],
-        theme.label,
+        settingsClasses.label,
         classes.label
       )}
     >
diff --git a/packages/svelte-ux/src/lib/components/RangeSlider.svelte b/packages/svelte-ux/src/lib/components/RangeSlider.svelte
index 7125d82f2..b0f608d86 100644
--- a/packages/svelte-ux/src/lib/components/RangeSlider.svelte
+++ b/packages/svelte-ux/src/lib/components/RangeSlider.svelte
@@ -34,7 +34,7 @@
   import { decimalCount, round } from '$lib/utils/number';
   import Icon from './Icon.svelte';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let min = 0;
   export let max = 100;
@@ -42,7 +42,7 @@
   export let value = [min, max];
   export let disabled = false;
 
-  const theme = getComponentTheme('RangeSlider');
+  const settingsClasses = getComponentClasses('RangeSlider');
 
   $: stepPercent = step / (max - min);
   $: stepDecimals = decimalCount(step);
@@ -226,7 +226,7 @@
     'RangeSlider',
     'group relative h-2 bg-surface-content/10 rounded-full select-none outline-none',
     disabled && ' pointer-events-none opacity-50',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
   style="--start: {$start}; --end: {$end};"
diff --git a/packages/svelte-ux/src/lib/components/ScrollingValue.svelte b/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
index f02191f3a..be2db2577 100644
--- a/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
+++ b/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
@@ -3,7 +3,7 @@
   import { elasticOut, backInOut, bounceOut } from 'svelte/easing';
   import { cls } from '$lib/utils/styles';
   import { modulo } from '$lib/utils/number';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let value = 0;
   export let single = false;
@@ -14,7 +14,7 @@
     root?: string;
     value?: string;
   } = {};
-  const theme = getComponentTheme('ScrollingValue');
+  const settingsClasses = getComponentClasses('ScrollingValue');
 
   const displayValue = spring();
   // 	const displayValue = tweened(value, { duration: 1000, easing: bounceOut });
@@ -29,13 +29,13 @@
   class={cls(
     'ScrollingValue',
     'inline-grid overflow-hidden',
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
 >
   <div
-    class={cls('col-span-full row-span-full', theme.value, classes.value)}
+    class={cls('col-span-full row-span-full', settingsClasses.value, classes.value)}
     style:transform={axis === 'x'
       ? `translateX(${100 + 100 * -offset}%)`
       : `translateY(${-100 + 100 * offset}%)`}
@@ -45,7 +45,7 @@
     </slot>
   </div>
   <div
-    class={cls('col-span-full row-span-full', theme.value, classes.value)}
+    class={cls('col-span-full row-span-full', settingsClasses.value, classes.value)}
     style:transform={axis === 'x'
       ? `translateX(${100 * -offset}%)`
       : `translateY(${100 * offset}%)`}
diff --git a/packages/svelte-ux/src/lib/components/SectionDivider.svelte b/packages/svelte-ux/src/lib/components/SectionDivider.svelte
index e330fee2c..ea078da92 100644
--- a/packages/svelte-ux/src/lib/components/SectionDivider.svelte
+++ b/packages/svelte-ux/src/lib/components/SectionDivider.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
-  const theme = getComponentTheme('SectionDivider');
+  const settingsClasses = getComponentClasses('SectionDivider');
 </script>
 
 <div
   {...$$props}
-  class={cls('SectionDivider', 'flex items-center my-2', theme.root, $$props.class)}
+  class={cls('SectionDivider', 'flex items-center my-2', settingsClasses.root, $$props.class)}
 >
   <div class="flex-1 border h-px rounded-full mr-2" />
   <div class="font-medium text-surface-content border px-4 rounded-full bg-surface-100 shadow">
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
index fec2c3bb3..f1e4af6f8 100644
--- a/packages/svelte-ux/src/lib/components/SelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -14,7 +14,7 @@
   import MenuItem from './MenuItem.svelte';
   import SelectListOptions from './_SelectListOptions.svelte';
   import TextField from './TextField.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import type { IconInput } from '$lib/utils/icons';
   import type { MenuOption } from '$lib/types/options';
   import type { ScrollIntoViewOptions } from '$lib/actions';
@@ -66,7 +66,7 @@
     group?: string;
     empty?: string;
   } = {};
-  const theme = getComponentTheme('SelectField');
+  const settingsClasses = getComponentClasses('SelectField');
 
   let fieldClasses: ComponentProps<TextField>['classes'];
   $: fieldClasses = typeof classes.field === 'string' ? { root: classes.field } : classes.field;
@@ -370,7 +370,7 @@
   aria-haspopup={!inlineOptions ? 'listbox' : undefined}
   class={cls(
     'SelectField block w-full cursor-default text-left',
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -397,7 +397,7 @@
         ? 'border-none shadow-none hover:shadow-none group-focus-within:shadow-none'
         : undefined,
     }}
-    class={cls('h-full', theme.field, fieldClasses)}
+    class={cls('h-full', settingsClasses.field, fieldClasses)}
     role="combobox"
     aria-expanded={open ? 'true' : 'false'}
     aria-autocomplete={!inlineOptions ? 'list' : undefined}
@@ -477,7 +477,7 @@
                   index === highlightIndex && '[:not(.group:hover)>&]:bg-surface-content/5',
                   option === selected && (classes.selected || 'font-semibold'),
                   option.group ? 'px-4' : 'px-2',
-                  theme.option,
+                  settingsClasses.option,
                   classes.option
                 )}
                 scrollIntoView={{
@@ -498,7 +498,7 @@
             <div
               class={cls(
                 'p-3 text-surface-content/5/50 italic text-sm',
-                theme.empty,
+                settingsClasses.empty,
                 classes.empty
               )}
             >
@@ -537,7 +537,7 @@
                 index === highlightIndex && '[:not(.group:hover)>&]:bg-surface-content/5',
                 option === selected && (classes.selected || 'font-semibold'),
                 option.group ? 'px-4' : 'px-2',
-                theme.option,
+                settingsClasses.option,
                 classes.option
               )}
               scrollIntoView={{
@@ -556,7 +556,7 @@
 
         <slot name="empty" slot="empty" let:loading>
           <div
-            class={cls('p-3 text-surface-content/5/50 italic text-sm', theme.empty, classes.empty)}
+            class={cls('p-3 text-surface-content/5/50 italic text-sm', settingsClasses.empty, classes.empty)}
           >
             {loading ? 'Loading...' : 'No options found'}
           </div>
diff --git a/packages/svelte-ux/src/lib/components/Shine.svelte b/packages/svelte-ux/src/lib/components/Shine.svelte
index 08c532b61..1102adf44 100644
--- a/packages/svelte-ux/src/lib/components/Shine.svelte
+++ b/packages/svelte-ux/src/lib/components/Shine.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { uniqueId } from '$lib/utils/string';
   import { cls } from '$lib/utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   /** Color of light */
   export let lightColor = '#666666';
@@ -26,7 +26,7 @@
     root?: string;
     svg?: string;
   } = {};
-  const theme = getComponentTheme('Shine');
+  const settingsClasses = getComponentClasses('Shine');
 
   const filterId = uniqueId('filter-');
 
@@ -46,7 +46,7 @@
 
 <svelte:window on:pointermove={onPointerMove} on:scroll={onScroll} />
 
-<svg class={cls('fixed inset-0 pointer-events-none', theme.svg, classes?.svg)}>
+<svg class={cls('fixed inset-0 pointer-events-none', settingsClasses.svg, classes?.svg)}>
   <filter id={filterId} color-interpolation-filters="sRGB">
     <feGaussianBlur in="SourceAlpha" stdDeviation={depth} />
 
@@ -77,7 +77,7 @@
 <div
   style:filter="url(#{filterId})"
   {...$$restProps}
-  class={cls('inline-block', theme.root, classes?.root, $$props.class)}
+  class={cls('inline-block', settingsClasses.root, classes?.root, $$props.class)}
   bind:this={wrapperEl}
 >
   <slot />
diff --git a/packages/svelte-ux/src/lib/components/Switch.svelte b/packages/svelte-ux/src/lib/components/Switch.svelte
index cc6f6cfdd..c631facd3 100644
--- a/packages/svelte-ux/src/lib/components/Switch.svelte
+++ b/packages/svelte-ux/src/lib/components/Switch.svelte
@@ -2,7 +2,7 @@
   import type { ThemeColors } from '$lib/types';
   import { uniqueId } from '$lib/utils/string';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let id: string = uniqueId('switch-');
   export let value: any = undefined;
@@ -18,17 +18,17 @@
     switch?: string;
     toggle?: string;
   } = {};
-  const theme = getComponentTheme('Switch');
+  const settingsClasses = getComponentClasses('Switch');
 </script>
 
-<div class={cls('Switch', 'inline-block', theme.root, classes.root)}>
+<div class={cls('Switch', 'inline-block', settingsClasses.root, classes.root)}>
   <input
     {id}
     type="checkbox"
     bind:checked
     on:change
     {value}
-    class={cls('peer appearance-none inline', theme.input, classes.input)}
+    class={cls('peer appearance-none inline', settingsClasses.input, classes.input)}
     {disabled}
   />
 
@@ -66,7 +66,7 @@
       }[color],
       checked === false && 'bg-surface-content/20',
       disabled ? 'opacity-50' : 'cursor-pointer peer-focus-visible:ring-2 ring-offset-1',
-      theme.switch,
+      settingsClasses.switch,
       classes.switch,
       $$props.class
     )}
@@ -77,7 +77,7 @@
         'toggle w-1/2 aspect-square h-full rounded-full transition-all duration-200 bg-surface-100 grid items-center justify-center transform',
         checked && 'translate-x-full',
         checked === null && 'border',
-        theme.toggle,
+        settingsClasses.toggle,
         classes.toggle
       )}
     >
diff --git a/packages/svelte-ux/src/lib/components/Tab.svelte b/packages/svelte-ux/src/lib/components/Tab.svelte
index ecfa272c5..7ff3accf4 100644
--- a/packages/svelte-ux/src/lib/components/Tab.svelte
+++ b/packages/svelte-ux/src/lib/components/Tab.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { slide } from 'svelte/transition';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let selected: boolean = false;
   export let placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
@@ -11,7 +11,7 @@
   export let classes: {
     root?: string;
   } = {};
-  const theme = getComponentTheme('Tab');
+  const settingsClasses = getComponentClasses('Tab');
 </script>
 
 <button
@@ -29,7 +29,7 @@
     selected
       ? 'bg-surface-100 text-surface-content'
       : 'bg-surface-200 text-surface-content/50 hover:text-surface-content hover:bg-surface-100',
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
diff --git a/packages/svelte-ux/src/lib/components/Table.svelte b/packages/svelte-ux/src/lib/components/Table.svelte
index c5fbcafb1..8406fcdec 100644
--- a/packages/svelte-ux/src/lib/components/Table.svelte
+++ b/packages/svelte-ux/src/lib/components/Table.svelte
@@ -14,7 +14,7 @@
   } from '../utils/table';
 
   import TableOrderIcon from './TableOrderIcon.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   const dispatch = createEventDispatcher();
 
@@ -34,8 +34,8 @@
     td?: string;
   } = {};
   // TODO: Figure out circular reference error
-  // const theme = getComponentTheme('Table');
-  const theme: typeof classes = {};
+  // const settingsClasses = getComponentClasses('Table');
+  const settingsClasses: typeof classes = {};
 
   export let styles: {
     container?: string;
@@ -55,8 +55,8 @@
       return {
         ...column,
         classes: {
-          th: cls(theme.th, classes.th, column.classes?.th),
-          td: cls(theme.td, classes.td, column.classes?.td),
+          th: cls(settingsClasses.th, classes.th, column.classes?.th),
+          td: cls(settingsClasses.td, classes.td, column.classes?.td),
         },
       };
     });
@@ -65,8 +65,8 @@
     return {
       ...column,
       classes: {
-        th: cls(theme.th, classes.th, column.classes?.th),
-        td: cls(theme.td, classes.td, column.classes?.td),
+        th: cls(settingsClasses.th, classes.th, column.classes?.th),
+        td: cls(settingsClasses.td, classes.td, column.classes?.td),
       },
     };
   });
@@ -74,15 +74,15 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class={cls('Table', 'table-container', theme.container, classes.container, $$props.class)}
+  class={cls('Table', 'table-container', settingsClasses.container, classes.container, $$props.class)}
   style={styles.container}
 >
-  <div class={cls('table-wrapper', theme.wrapper, classes.wrapper)} style={styles.wrapper}>
-    <table class={cls('w-full', theme.table, classes.table)} style={styles.table}>
+  <div class={cls('table-wrapper', settingsClasses.wrapper, classes.wrapper)} style={styles.wrapper}>
+    <table class={cls('w-full', settingsClasses.table, classes.table)} style={styles.table}>
       <slot name="headers" {headers} {getCellHeader}>
-        <thead class={cls(theme.thead, classes.thead)} style={styles.thead}>
+        <thead class={cls(settingsClasses.thead, classes.thead)} style={styles.thead}>
           {#each headers ?? [] as headerRow}
-            <tr class={cls(theme.tr, classes.tr)} style={styles.tr}>
+            <tr class={cls(settingsClasses.tr, classes.tr)} style={styles.tr}>
               {#each headerRow ?? [] as column}
                 <th
                   use:tableCell={{ column }}
@@ -103,9 +103,9 @@
       <slot />
 
       <slot name="data" {data} columns={rowColumns} {getCellValue} {getCellContent}>
-        <tbody class={cls(theme.tbody, classes.tbody)} style={styles.tbody}>
+        <tbody class={cls(settingsClasses.tbody, classes.tbody)} style={styles.tbody}>
           {#each data ?? [] as rowData, rowIndex}
-            <tr class={cls(theme.tr, classes.tr)} style={styles.tr}>
+            <tr class={cls(settingsClasses.tr, classes.tr)} style={styles.tr}>
               {#each rowColumns ?? [] as column}
                 <td
                   use:tableCell={{ column, rowData, rowIndex, tableData: data }}
diff --git a/packages/svelte-ux/src/lib/components/TableOfContents.svelte b/packages/svelte-ux/src/lib/components/TableOfContents.svelte
index 7745aaa92..c6cdd12b9 100644
--- a/packages/svelte-ux/src/lib/components/TableOfContents.svelte
+++ b/packages/svelte-ux/src/lib/components/TableOfContents.svelte
@@ -6,7 +6,7 @@
   import { cls } from '../utils/styles';
   import TreeList from './TreeList.svelte';
   import Icon from './Icon.svelte';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let element = 'main';
   export let maxDepth = 6;
@@ -15,7 +15,7 @@
   let headings = [];
   let nodes = [];
 
-  const theme = getComponentTheme('TableOfContents');
+  const settingsClasses = getComponentClasses('TableOfContents');
 
   function onScroll(e) {
     activeHeadingId = headings?.find(
@@ -56,7 +56,7 @@
   {nodes}
   classes={{ li: (node) => cls(node.level === 1 ? 'mb-2' : node.level > 2 ? 'ml-3' : '') }}
   {...$$restProps}
-  class={cls('TableOfContents', theme.root, $$props.class)}
+  class={cls('TableOfContents', settingsClasses.root, $$props.class)}
   let:node
 >
   <slot {node} {activeHeadingId}>
diff --git a/packages/svelte-ux/src/lib/components/Tabs.svelte b/packages/svelte-ux/src/lib/components/Tabs.svelte
index ec00f31a5..cdda96ccd 100644
--- a/packages/svelte-ux/src/lib/components/Tabs.svelte
+++ b/packages/svelte-ux/src/lib/components/Tabs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import Tab from './Tab.svelte';
 
   export let value: any = undefined;
@@ -17,7 +17,7 @@
     tab?: ComponentProps<Tab>['classes'];
     content?: string;
   } = {};
-  const theme = getComponentTheme('Tabs');
+  const settingsClasses = getComponentClasses('Tabs');
 </script>
 
 <div
@@ -31,7 +31,7 @@
       left: 'flex-row',
       right: 'flex-row-reverse',
     }[placement],
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -46,7 +46,7 @@
         left: '-mr-px',
         right: '-ml-px',
       }[placement],
-      theme.tabs,
+      settingsClasses.tabs,
       classes.tabs
     )}
   >
@@ -56,7 +56,7 @@
           {placement}
           selected={value === tab.value}
           on:click={() => (value = tab.value)}
-          classes={{ ...theme.tab, ...classes.tab }}
+          classes={{ ...settingsClasses.tab, ...classes.tab }}
         >
           {tab.label}
         </Tab>
@@ -73,7 +73,7 @@
         left: 'border-l',
         right: 'border-r',
       }[placement],
-      theme.content,
+      settingsClasses.content,
       classes.content
     )}
   >
diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index b05dd30a8..d8bf3a90c 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -9,7 +9,7 @@
   import type { Actions } from '../actions/multi';
   import { cls } from '../utils/styles';
   import { isLiteralObject } from '../utils/object';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   import Button from './Button.svelte';
   import Icon from './Icon.svelte';
@@ -66,7 +66,7 @@
     prepend?: string;
     append?: string;
   } = {};
-  const theme = getComponentTheme('TextField');
+  const settingsClasses = getComponentClasses('TextField');
 
   // Input props
   export let mask: string | undefined = undefined;
@@ -196,7 +196,7 @@
     error ? '[--color:theme(colors.danger)]' : '[--color:theme(colors.primary)]',
     disabled && 'opacity-50 pointer-events-none',
     !base && (rounded ? 'rounded-full' : 'rounded'),
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -208,7 +208,7 @@
         'truncate group-hover:text-surface-content/70 group-focus-within:text-[var(--color)] group-hover:group-focus-within:text-[var(--color)] cursor-pointer',
         error ? 'text-danger/80' : 'text-surface-content/50',
         `placement-${labelPlacement}`,
-        theme.label,
+        settingsClasses.label,
         classes.label
       )}
       for={id}
@@ -231,7 +231,7 @@
         !base && ['bg-surface-100', rounded ? 'rounded-full' : 'rounded'],
         error && 'border-danger',
         'group-focus-within:shadow-md group-focus-within:border-[var(--color)]',
-        theme.container,
+        settingsClasses.container,
         classes.container
       )}
     >
@@ -241,7 +241,7 @@
             class={cls(
               'prepend whitespace-nowrap',
               rounded && 'pl-3',
-              theme.prepend,
+              settingsClasses.prepend,
               classes.prepend
             )}
           >
@@ -263,7 +263,7 @@
                 error ? 'text-danger/80' : 'text-surface-content/50',
                 `placement-${labelPlacement}`,
                 (labelPlacement === 'inset' || hasInputValue) && 'shrink',
-                theme.label,
+                settingsClasses.label,
                 classes.label
               )}
               for={id}
@@ -316,7 +316,7 @@
                     'text-center': align === 'center',
                     'text-right': align === 'right',
                   },
-                  theme.input,
+                  settingsClasses.input,
                   classes.input
                 )}
                 use:multi={textAreaMultiAction}
@@ -353,7 +353,7 @@
                     'text-center': align === 'center',
                     'text-right': align === 'right',
                   },
-                  theme.input,
+                  settingsClasses.input,
                   classes.input
                 )}
               />
@@ -368,7 +368,7 @@
         </div>
 
         {#if hasAppend}
-          <div class={cls('append whitespace-nowrap', theme.append, classes.append)}>
+          <div class={cls('append whitespace-nowrap', settingsClasses.append, classes.append)}>
             {#if clearable && hasInputValue}
               <Button
                 icon={mdiClose}
@@ -430,7 +430,7 @@
         error ? 'error' : 'hint',
         'text-xs ml-2 transition-transform ease-out overflow-hidden origin-top transform group-focus-within:scale-y-100',
         error ? 'text-danger' : 'text-surface-content/50 scale-y-0',
-        theme.error,
+        settingsClasses.error,
         classes.error
       )}
     >
diff --git a/packages/svelte-ux/src/lib/components/Tilt.svelte b/packages/svelte-ux/src/lib/components/Tilt.svelte
index 62dcf8ceb..66a207aaf 100644
--- a/packages/svelte-ux/src/lib/components/Tilt.svelte
+++ b/packages/svelte-ux/src/lib/components/Tilt.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { cls } from '$lib/utils/styles';
   import { scaleLinear } from 'd3-scale';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let maxRotation = 20;
   export let setBrightness = false;
 
-  const theme = getComponentTheme('Tilt');
+  const settingsClasses = getComponentClasses('Tilt');
 
   let width = 0;
   let height = 0;
@@ -45,7 +45,7 @@
     'Tilt [perspective:600px]',
     '[&>*]:[transform:rotateX(var(--rotateX))_rotateY(var(--rotateY))]',
     '[&>*]:brightness-[var(--brightness)]',
-    theme.root,
+    settingsClasses.root,
     $$props.class
   )}
   bind:clientWidth={width}
diff --git a/packages/svelte-ux/src/lib/components/ToggleGroup.svelte b/packages/svelte-ux/src/lib/components/ToggleGroup.svelte
index 3953c5ac7..766e9a2f7 100644
--- a/packages/svelte-ux/src/lib/components/ToggleGroup.svelte
+++ b/packages/svelte-ux/src/lib/components/ToggleGroup.svelte
@@ -9,7 +9,7 @@
 
   import { cls } from '../utils/styles';
   import Logger from '../utils/logger';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let value: any = undefined; // index or value
   export let autoscroll: boolean = false;
@@ -35,7 +35,7 @@
     option?: string;
     indicator?: string;
   } = {};
-  const theme = getComponentTheme('ToggleGroup');
+  const settingsClasses = getComponentClasses('ToggleGroup');
 
   $: variantClasses = {
     default: {
@@ -98,7 +98,7 @@
       gap === true ? 'gap-1' : gap === 'px' ? 'gap-px' : '',
       inset ? 'p-[2px]' : '',
       variantClasses[variant].options,
-      theme.options,
+      settingsClasses.options,
       classes.options
     ),
 
@@ -127,7 +127,7 @@
               '[&:not(:last-child)_.indicator]:rounded-r-none',
             ]),
       variantClasses[variant].label,
-      theme.label,
+      settingsClasses.label,
       classes.label
     ),
 
@@ -140,7 +140,7 @@
         lg: 'py-1',
       }[size],
       variantClasses[variant].option,
-      theme.option,
+      settingsClasses.option,
       classes.option
     ),
 
@@ -148,7 +148,7 @@
       'z-0',
       rounded === 'full' ? 'rounded-full' : rounded && 'rounded',
       variantClasses[variant].indicator,
-      theme.indicator,
+      settingsClasses.indicator,
       classes.indicator
     ),
   };
diff --git a/packages/svelte-ux/src/lib/components/ToggleOption.svelte b/packages/svelte-ux/src/lib/components/ToggleOption.svelte
index c5eee6999..2212245b2 100644
--- a/packages/svelte-ux/src/lib/components/ToggleOption.svelte
+++ b/packages/svelte-ux/src/lib/components/ToggleOption.svelte
@@ -4,7 +4,7 @@
   import { groupKey } from './ToggleGroup.svelte';
   import { scrollIntoView } from '../utils/dom';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let value: any;
 
@@ -13,7 +13,7 @@
     option?: string;
     indicator?: string;
   } = {};
-  const theme = getComponentTheme('ToggleOption');
+  const settingsClasses = getComponentClasses('ToggleOption');
 
   const {
     registerOption,
@@ -54,7 +54,7 @@
     'label',
     'grid items-center',
     $classesContext.label,
-    theme.root,
+    settingsClasses.root,
     classes.root,
     $$props.class
   )}
@@ -62,13 +62,13 @@
   <!-- Stack indicator under option -->
   {#if selected}
     <div
-      class={cls('indicator', $classesContext.indicator, theme.indicator, classes.indicator)}
+      class={cls('indicator', $classesContext.indicator, settingsClasses.indicator, classes.indicator)}
       in:receive={{ key: 'indicator' }}
       out:send={{ key: 'indicator' }}
     />
   {/if}
 
-  <div class={cls('option', $classesContext.option, theme.option, classes.option)}>
+  <div class={cls('option', $classesContext.option, settingsClasses.option, classes.option)}>
     <slot {selected} />
   </div>
 
diff --git a/packages/svelte-ux/src/lib/components/Tooltip.svelte b/packages/svelte-ux/src/lib/components/Tooltip.svelte
index 63a0a0a86..f86894c6c 100644
--- a/packages/svelte-ux/src/lib/components/Tooltip.svelte
+++ b/packages/svelte-ux/src/lib/components/Tooltip.svelte
@@ -8,7 +8,7 @@
 
   import Popover from './Popover.svelte';
   import { cls } from '../utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   export let title = '';
   export let open = false;
@@ -29,7 +29,7 @@
     title?: string;
     content?: string;
   } = {};
-  const theme = getComponentTheme('Tooltip');
+  const settingsClasses = getComponentClasses('Tooltip');
 
   $: hasTitle = title || $$slots.title;
 
@@ -82,14 +82,14 @@
     {offset}
     {matchWidth}
     {open}
-    class={cls('Tooltip pointer-events-none', theme.popover, classes.popover)}
+    class={cls('Tooltip pointer-events-none', settingsClasses.popover, classes.popover)}
     {...$$restProps}
   >
     <slot name="title">
       <div
         class={cls(
           'text-xs text-surface-100 bg-surface-content px-2 py-1 rounded whitespace-nowrap',
-          theme.title,
+          settingsClasses.title,
           classes.title
         )}
         transition:fly={{
@@ -106,7 +106,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class={cls('contents', theme.content, classes.content)}
+  class={cls('contents', settingsClasses.content, classes.content)}
   on:mouseenter={showTooltip}
   on:mouseleave={hideTooltip}
   on:focusin={onFocusIn}
@@ -119,7 +119,7 @@
       class={cls(
         hasTitle && underline && 'border-b border-dotted',
         hasTitle && cursor && 'cursor-help',
-        theme.root,
+        settingsClasses.root,
         classes.root,
         $$props.class
       )}
diff --git a/packages/svelte-ux/src/lib/components/TreeList.svelte b/packages/svelte-ux/src/lib/components/TreeList.svelte
index 8f22c9b3e..acff5d017 100644
--- a/packages/svelte-ux/src/lib/components/TreeList.svelte
+++ b/packages/svelte-ux/src/lib/components/TreeList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { cls } from '$lib/utils/styles';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
 
   type Node = { id: number; name: string; level: number; children: Node[] };
 
@@ -10,13 +10,13 @@
     ul?: string | ((nodes: Node[]) => string);
     li?: string | ((node: Node) => string);
   } = {};
-  const theme = getComponentTheme('TreeList');
+  const settingsClasses = getComponentClasses('TreeList');
 </script>
 
 <ul
   class={cls(
     'TreeList',
-    typeof theme.ul === 'string' ? theme.ul : theme.ul?.(nodes),
+    typeof settingsClasses.ul === 'string' ? settingsClasses.ul : settingsClasses.ul?.(nodes),
     typeof classes.ul === 'string' ? classes.ul : classes.ul?.(nodes),
     $$props.class
   )}
@@ -24,7 +24,7 @@
   {#each nodes ?? [] as node}
     <li
       class={cls(
-        typeof theme.li === 'string' ? theme.li : theme.li?.(node),
+        typeof settingsClasses.li === 'string' ? settingsClasses.li : settingsClasses.li?.(node),
         typeof classes.li === 'string' ? classes.li : classes.li?.(node)
       )}
     >
diff --git a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
index 707901ecc..caeabf749 100644
--- a/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
+++ b/packages/svelte-ux/src/lib/components/_SelectListOptions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Logger from '../utils/logger';
-  import { getComponentTheme } from './theme';
+  import { getComponentClasses } from './theme';
   import { cls } from '../utils/styles';
 
   const logger = new Logger('SelectListOptions');
@@ -30,7 +30,7 @@
     empty?: string;
   } = {};
 
-  const theme = getComponentTheme('SelectField');
+  const settingsClasses = getComponentClasses('SelectField');
 
   export let menuOptionsEl: HTMLDivElement;
 </script>
@@ -41,7 +41,7 @@
   aria-expanded={open ? 'true' : 'false'}
   class={cls(
     '_SelectListOptions options group p-1 focus:outline-none',
-    theme.options,
+    settingsClasses.options,
     classes.root
   )}
   class:opacity-50={loading}
@@ -81,7 +81,7 @@
       <div
         class={cls(
           'group-header text-xs leading-8 tracking-widest text-surface-content/50 px-2',
-          theme.group,
+          settingsClasses.group,
           classes.group
         )}
       >
diff --git a/packages/svelte-ux/src/lib/components/index.ts b/packages/svelte-ux/src/lib/components/index.ts
index 0c9247916..acf035412 100644
--- a/packages/svelte-ux/src/lib/components/index.ts
+++ b/packages/svelte-ux/src/lib/components/index.ts
@@ -95,4 +95,4 @@ export { default as TweenedValue } from './TweenedValue.svelte';
 export { default as ViewportCenter } from './ViewportCenter.svelte';
 export { default as YearList } from './YearList.svelte';
 export { settings, getFormatNumber, getSettings, getDictionary } from './settings';
-export { getClasses, getComponentTheme } from './theme';
+export { getClasses, getComponentClasses } from './theme';
diff --git a/packages/svelte-ux/src/lib/components/theme.ts b/packages/svelte-ux/src/lib/components/theme.ts
index 15db1291b..a05737cc7 100644
--- a/packages/svelte-ux/src/lib/components/theme.ts
+++ b/packages/svelte-ux/src/lib/components/theme.ts
@@ -18,7 +18,7 @@ export function getClasses() {
   return getSettings().classes ?? {};
 }
 
-export function getComponentTheme(name: ComponentName) {
+export function getComponentClasses(name: ComponentName) {
   const theme = getClasses()[name] ?? {};
 
   return typeof theme === 'string' ? { root: theme } : theme;