Theme generator (#192)

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

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

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

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

* [SelectField Add stepper example

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

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

* Beginning work of theme generator

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

* Add "Copy all" daisy and skeleton options

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

* Fix skeleton dark themes after refactor

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

* Set initial theme selections (fix reactivity infinite loop)

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

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

* Support overriding doc themes wtih generator (custom) themes

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

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

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

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

* Support custom Ior exisitng) theme editing

* Add state colors and support showing/hiding optoinal colors

* Add "Copy all themes" menu item

* [ColorField] Support `hex` entry

* Register all themes (daisy + skeleton)

* Format files (fix lint error)

* Add changeset

Author: techniq

.changeset/cool-hotels-own.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[SelectField] Add `stepper` prop to iterate through options (like `MenuField`)

.changeset/fair-trees-sparkle.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[MenuField] Expose `selected` option via prop (similar to `SelectField`)

.changeset/quick-carrots-grab.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": minor
+---
+
+Add theme selection/creation page and simplify loading themes

.changeset/selfish-hounds-dance.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[SelectField] Fix toggling display of options menu using toggleIcon. Support hiding toggleIcon (`<SelectField toggleIcon={null} />

.changeset/yellow-nails-vanish.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Rename `cssVars` action to `styleVars` and do not prefix properties with `--` by default (more flexible)

packages/svelte-ux/package.json

@@ -27,6 +27,7 @@
     "@sveltejs/kit": "^1.30.3",
     "@sveltejs/package": "^2.2.5",
     "@tailwindcss/typography": "^0.5.10",
+    "@types/culori": "^2.0.4",
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.8",
     "@types/lodash-es": "^4.17.12",

packages/svelte-ux/src/lib/actions/index.ts

@@ -1,4 +1,3 @@
-export * from './cssVars';
 export * from './dataBackground';
 export * from './input';
 export * from './layout';
@@ -9,4 +8,5 @@ export * from './portal';
 export * from './scroll';
 export * from './spotlight';
 export * from './sticky';
+export * from './styleProps';
 export * from './table';

packages/svelte-ux/src/lib/actions/cssVars.ts renamed to packages/svelte-ux/src/lib/actions/styleProps.ts

@@ -2,12 +2,12 @@ import type { Action } from 'svelte/action';
 
 type CSSProps = { [key: string]: string | number | boolean | null | undefined };
 
-export const cssVars: Action<HTMLElement, CSSProps> = (node, props) => {
+export const styleProps: Action<HTMLElement, CSSProps> = (node, props) => {
   Object.entries(props ?? {}).forEach(([key, value]) => {
     // Ignore if null or undefined
     if (value != null) {
       value = typeof value === 'boolean' ? (value ? 1 : 0) : value;
-      node.style.setProperty(`--${key}`, `${value}`);
+      node.style.setProperty(key, `${value}`);
     }
   });
 
@@ -17,13 +17,13 @@ export const cssVars: Action<HTMLElement, CSSProps> = (node, props) => {
     update(newProps: CSSProps) {
       const newKeys = Object.keys(newProps);
       Object.keys(lastProps)
-        .filter((name) => !newKeys.includes(name))
-        .forEach((name) => node.style.removeProperty(`--${name}`));
+        .filter((key) => !newKeys.includes(key))
+        .forEach((key) => node.style.removeProperty(key));
 
       Object.entries(newProps).forEach(([key, value]) => {
         // Ignore if null or undefined
         if (value != null) {
-          node.style.setProperty(`--${key}`, `${value}`);
+          node.style.setProperty(key, `${value}`);
         }
         if (props) {
           delete props[key];

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

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { cssVars } from '../actions/cssVars';
-
   export let columns = 0;
   export let gap = 0;
   export let columnGap = gap;
@@ -38,28 +36,23 @@
     templateColumns ??
     template ??
     (autoColumns ? `repeat(auto-fill, minmax(${autoColumns}, 1fr))` : `repeat(${columns}, 1fr)`);
-
-  $: styleVars = {
-    templateColumns: templateColumnsResolved,
-    templateRows,
-    gap,
-    columnGap,
-    rowGap,
-    autoFlow,
-    items, // TODO: Map start: flex-start?, end: flex-end?
-    justify, // TODO: Map start: flex-start?, end: flex-end?, between: space-between, around: space-around, evenly: space-evenly
-    justifyItems, // TODO: Map start: flex-start?, end: flex-end?, between: space-between, around: space-around, evenly: space-evenly
-    content, // TODO: Map start: flex-start?, end: flex-end?, between: space-between, around: space-around, evenly: space-evenly
-    // place, // TODO: Map start: flex-start?, end: flex-end?, between: space-between, around: space-around, evenly: space-evenly
-  };
 </script>
 
 <div
-  use:cssVars={styleVars}
   class="Grid"
   class:grid={!inline}
   class:inline-grid={inline}
   class:stack
+  style:--templateColumns={templateColumnsResolved}
+  style:--templateRows={templateRows}
+  style:--gap={gap}
+  style:--columnGap={columnGap}
+  style:--rowGap={rowGap}
+  style:--autoFlow={autoFlow}
+  style:--items={items}
+  style:--justify={justify}
+  style:--justifyItems={justifyItems}
+  style:--content={content}
   on:click
   {...$$restProps}
 >

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

@@ -32,6 +32,7 @@
   const settingsClasses = getComponentClasses('MenuField');
 
   let open = false;
+  export let selected: any = undefined;
   $: selected = options?.find((x) => x.value === value);
 
   $: previous = () => {