Change "theme" to "classes" in Settings (#172)

* Rename settings `theme` to `classes` in preparation for adding theme support

* Rename getComponentTheme to getComponentClasses

Author: dimfeld

.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
+

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'

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'

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}

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,13 @@
     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-auto w-[var(--navWidth)]', theme.nav, classes.nav)}>
+    <nav
+      class={cls('nav h-full overflow-auto w-[var(--navWidth)]', settingsClasses.nav, classes.nav)}
+    >
       <slot name="nav" />
     </nav>
   </aside>

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
   )}
 >

packages/svelte-ux/src/lib/components/Backdrop.svelte

@@ -3,22 +3,22 @@
 
   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
   class={cls(
     '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

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
     )}
   >

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
   )}
 >

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,18 +468,18 @@
 >
   {#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 }}>
       {#if typeof icon === 'string' || 'icon' in icon}
         <!-- 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}

packages/svelte-ux/src/lib/components/ButtonGroup.svelte

@@ -33,15 +33,15 @@
 
 <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;
   export let color: ComponentProps<Button>['color'] | undefined = undefined;
   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
   );
 

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
   )}
 >

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
       )}
     >

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