Light doc update

.changeset/angry-zebras-remember.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Add styles (with daisy) as top-level export

.changeset/chilled-dingos-sell.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": minor
+---
+
+Update Settings component to expose each settings key as a component prop

.changeset/cool-hotels-own.md

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

.changeset/eight-bottles-eat.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[TableOfContents] Support changing icon

.changeset/fair-trees-sparkle.md

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

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

.changeset/friendly-pets-reflect.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Add ThemeInit component to prevent flash of unstyled content when SSR is enabled

.changeset/healthy-files-search.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[MenuButton] Support hiding `menuIcon` and dispatch `change` event

.changeset/light-pianos-refuse.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Rename `ThemeButton` to `ThemeSelect`

.changeset/light-ways-dress.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+BREAKING: removed `dateDisplay()` in favor of `format()`

.changeset/modern-pumpkins-march.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Add a store to manage the current theme

.changeset/ninety-carpets-cross.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+add locale management of date leveraging intl

.changeset/pre.json

@@ -0,0 +1,31 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "create-svelte-ux": "0.2.1",
+    "svelte-ux": "0.57.1"
+  },
+  "changesets": [
+    "angry-zebras-remember",
+    "chilled-dingos-sell",
+    "cool-hotels-own",
+    "fair-trees-sparkle",
+    "for-you-sean",
+    "friendly-pets-reflect",
+    "light-pianos-refuse",
+    "light-ways-dress",
+    "modern-pumpkins-march",
+    "ninety-carpets-cross",
+    "quick-avocados-hope",
+    "quick-carrots-grab",
+    "rare-flowers-flash",
+    "selfish-hounds-dance",
+    "shiny-hornets-study",
+    "shy-peaches-ring",
+    "sixty-walls-rest",
+    "strong-flies-provide",
+    "wicked-melons-fold",
+    "yellow-nails-vanish",
+    "yellow-oranges-fly"
+  ]
+}

.changeset/quick-carrots-grab.md

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

.changeset/rare-flowers-flash.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Map Skeleton themes to Svelte UX 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/sixty-walls-rest.md

@@ -0,0 +1,6 @@
+---
+"svelte-ux": minor
+---
+
+- Add locale settings to settings object, and allow dynamically changing the current locale.
+- Move format function to be a store on the settings object, which updates when the locale changes.

.changeset/strong-flies-provide.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Support `ux.themes` tailwind config, including Daisy UI

.changeset/tidy-gifts-yawn.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[Popover|Menu|popover] Support `resize` width or height only

.changeset/wicked-melons-fold.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Add `ThemeSwitch` component to toggle between light/dark theme

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

.changeset/yellow-oranges-fly.md

@@ -0,0 +1,6 @@
+---
+'create-svelte-ux': minor
+'svelte-ux': minor
+---
+
+Theme support

.gitignore

@@ -6,5 +6,6 @@ coverage/
 .idea/
 .svelte-kit/
 .env
+.DS_Store
 
 test-*

.prettierrc

@@ -1,5 +1,14 @@
 {
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
 }

README.md

@@ -6,7 +6,7 @@
 ![](https://img.shields.io/github/license/techniq/svelte-ux?style=flat)
 [![](https://img.shields.io/github/actions/workflow/status/techniq/svelte-ux/ci.yml?style=flat)](https://github.com/techniq/svelte-ux/actions/workflows/ci.yml)
 [![](https://img.shields.io/npm/v/svelte-ux?style=flat)](https://www.npmjs.com/package/svelte-ux)
-![npm](https://img.shields.io/npm/dw/svelte-ux?style=flat&color=orange)
+[![](https://img.shields.io/npm/dw/svelte-ux?style=flat&color=orange)](https://www.npmjs.com/package/svelte-ux)
 
 [![](https://img.shields.io/badge/Open_in-SvelteLab-black?logo=svelte&color=%23FF3E00)](https://www.sveltelab.dev/?provider=github&owner=techniq&repo=svelte-ux&branch=main&path=%2Fpackages%2Fcreate-svelte-ux%2Ftemplates%2Fstarter) [![](https://img.shields.io/badge/Open_in-StackBlitz-black?logo=stackblitz&color=%231269D3)](https://stackblitz.com/github/techniq/svelte-ux/tree/main/packages/create-svelte-ux/templates/starter) [![](https://img.shields.io/badge/Open_in-CodeSandbox-black?logo=codesandbox&color=%23151515)](https://codesandbox.io/p/sandbox/github/techniq/svelte-ux/tree/main/packages/create-svelte-ux/templates/starter)
 

packages/create-svelte-ux/CHANGELOG.md

@@ -1,5 +1,11 @@
 # create-svelte-ux
 
+## 0.3.0-next.0
+
+### Minor Changes
+
+- Theme support ([#146](https://github.com/techniq/svelte-ux/pull/146))
+
 ## 0.2.1
 
 ### Patch Changes

packages/create-svelte-ux/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-svelte-ux",
-  "version": "0.2.1",
+  "version": "0.3.0-next.0",
   "description": "A CLI for creating new Svelte UX projects",
   "repository": {
     "type": "git",
@@ -18,12 +18,12 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@kitql/helpers": "^0.8.3",
+    "@kitql/helpers": "^0.8.8",
     "commander": "^11.1.0"
   },
   "devDependencies": {
-    "@types/node": "^20.9.2",
-    "prettier": "^3.1.0"
+    "@types/node": "^20.10.6",
+    "prettier": "^3.1.1"
   },
   "files": [
     "fragments",

packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte

@@ -5,8 +5,8 @@
 	import '../app.postcss';
 
 	settings({
-		theme:{
-			AppBar: 'bg-accent-500 text-white shadow-md',
+		classes: {
+			AppBar: 'bg-primary text-white shadow-md',
 			AppLayout: {
 				nav: 'bg-neutral-800'
 			},

packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte

@@ -9,15 +9,15 @@
 			href="https://svelte-ux.techniq.dev"
 			target="_blank"
 			variant="fill-light"
-			color="accent"
+			color="primary"
 		>
 			Documentation
 		</Button>
 		<Button
 			href="https://svelte-ux.techniq.dev/customization"
 			target="_blank"
 			variant="fill-light"
-			color="accent"
+			color="primary"
 		>
 			Customization
 		</Button>

packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte

@@ -22,7 +22,7 @@
 			<Svg>
 				<Axis placement="left" grid rule />
 				<Axis placement="bottom" format={(d) => format(d, PeriodType.Day, 'short')} rule />
-				<Area line={{ class: 'stroke-2 stroke-accent-500' }} class="fill-accent-500/30" />
+				<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
 				<Highlight points lines />
 			</Svg>
 

packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs

@@ -9,11 +9,7 @@ const config = {
 		'./node_modules/layerchart/**/*.{svelte,js}'
 	],
 	theme: {
-		extend: {
-			colors: {
-				accent: colors.blue
-			}
-		}
+		extend: {}
 	},
 	variants: {
 		extend: {}

packages/create-svelte-ux/templates/minimal/tailwind.config.cjs

@@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs');
 const config = {
 	content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'],
 	theme: {
-		extend: {
-			colors: {
-				accent: colors.blue
-			}
-		}
+		extend: {}
 	},
 	variants: {
 		extend: {}

packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte

@@ -5,8 +5,8 @@
 	import '../app.postcss';
 
 	settings({
-		theme:{
-			AppBar: 'bg-accent-500 text-white shadow-md',
+		classes: {
+			AppBar: 'bg-primary text-white shadow-md',
 			AppLayout: {
 				nav: 'bg-neutral-800'
 			},

packages/create-svelte-ux/templates/starter/src/routes/+page.svelte

@@ -9,15 +9,15 @@
 			href="https://svelte-ux.techniq.dev"
 			target="_blank"
 			variant="fill-light"
-			color="accent"
+			color="primary"
 		>
 			Documentation
 		</Button>
 		<Button
 			href="https://svelte-ux.techniq.dev/customization"
 			target="_blank"
 			variant="fill-light"
-			color="accent"
+			color="primary"
 		>
 			Customization
 		</Button>

packages/create-svelte-ux/templates/starter/tailwind.config.cjs

@@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs');
 const config = {
 	content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'],
 	theme: {
-		extend: {
-			colors: {
-				accent: colors.blue
-			}
-		}
+		extend: {}
 	},
 	variants: {
 		extend: {}