Design tokens / Theme support (with dark mode) (#146)

* Squash all theme changes into single commit * Add changeset * Enter prerelease mode and version packages * Add Kbd component. Show keyboard shortcuts on ThemeButton menu * Read themes/colors from tailwind config, including Daisy UI (with mapping). Supports generating optional colors and further extension and flexability. * Process daisy themes to generate lightThemes/darkThemes based on color-scheme value * Add changeset * Version bump to 0.58.0-next.1 * Add styles (with daisy) as top-level export * Version bump to 0.58.0-next.2 * Add commonjs and esm versions of daisy module * Version bump to 0.58.0-next.3 * Remove daisy from top-level exports * Version bump to 0.58.0-next.4 * Rename `error` / `error-content` to `danger` / `danger-content` * Fix pnpm-lock.yaml using `pnpm install` (ERR_PNPM_ERR_PNPM_UNEXPECTED_PKG_CONTENT_IN_STORE The lockfile is broken! Resolution step will be performed to fix it.) * Add `accent` and `neutral` theme colors * Cleanup * Update some leftover `error` => `danger` color references * Extra tailwind plugin into multiple files for better readability * Use darker "-content" color for default `fill` variant (distinguish from `fill-light`) * Simplify naming and impl. of foregroundColor() and add lightenColor() (to match darkenColor()) * Register 100-900 shades for all semantic and state colors. Replace color-mix() usage (including Tailwind *-mix-* utils) with new shades * Use lib/styles/themes for types as well * Replace SvelteComponentTyped with SvelteComponent * Version bump to 0.58.0-next.5 * Cleanup * Remove unused css files * Simplify * Support changing colorSpace (rgb, hsl, or oklch) * Improve theme page preview and add menu item * Improve default border color * Fix handling of hsl() color space by clamping to RGB values (to not exceed 100% saturation or lightness). Matches rgb() color * Version bump to 0.58.0-next.6 * Use same surface-content/20% outline color as border color * Remove explicit border colors that match default (border-surface-content/20) and replace some border-surface-### with default (surface-content/20) * Version bump to 0.58.0-next.7
techniq · Jan 4, 2024 · 5a2f660 · 5a2f660
1 parent ca57525
commit 5a2f660
Show file tree

Hide file tree

Showing 147 changed files with 2,864 additions and 1,666 deletions.
diff --git a/.changeset/angry-zebras-remember.md b/.changeset/angry-zebras-remember.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Add styles (with daisy) as top-level export
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,14 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "create-svelte-ux": "0.2.1",
+    "svelte-ux": "0.57.1"
+  },
+  "changesets": [
+    "angry-zebras-remember",
+    "quick-avocados-hope",
+    "strong-flies-provide",
+    "yellow-oranges-fly"
+  ]
+}
diff --git a/.changeset/strong-flies-provide.md b/.changeset/strong-flies-provide.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Support `ux.themes` tailwind config, including Daisy UI
diff --git a/.changeset/yellow-oranges-fly.md b/.changeset/yellow-oranges-fly.md
@@ -0,0 +1,6 @@
+---
+'create-svelte-ux': minor
+'svelte-ux': minor
+---
+
+Theme support
diff --git a/packages/create-svelte-ux/CHANGELOG.md b/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

diff --git a/packages/create-svelte-ux/package.json b/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",

diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte b/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',
+		theme: {
+			AppBar: 'bg-primary text-white shadow-md',
 			AppLayout: {
 				nav: 'bg-neutral-800'
 			},

diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte b/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>

diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte b/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>
 

diff --git a/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs b/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: {}

diff --git a/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs b/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: {}

diff --git a/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte b/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',
+		theme: {
+			AppBar: 'bg-primary text-white shadow-md',
 			AppLayout: {
 				nav: 'bg-neutral-800'
 			},

diff --git a/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte b/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>

diff --git a/packages/create-svelte-ux/templates/starter/tailwind.config.cjs b/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: {}

diff --git a/packages/svelte-ux/CHANGELOG.md b/packages/svelte-ux/CHANGELOG.md
@@ -1,5 +1,25 @@
 # svelte-ux
 
+## 0.58.0-next.2
+
+### Patch Changes
+
+- Add styles (with daisy) as top-level export ([#146](https://github.com/techniq/svelte-ux/pull/146))
+
+## 0.58.0-next.1
+
+### Minor Changes
+
+- Support `ux.themes` tailwind config, including Daisy UI ([#146](https://github.com/techniq/svelte-ux/pull/146))
+
+## 0.58.0-next.0
+
+### Minor Changes
+
+- Removes SelectList. Updates SelectField features to support SelectList's use case via property/attribute overrides. Updates QuickSearch to use SelectField. Defines MenuOption type & updates MenuField & SelectField to use it; this results in renaming of SelectField options' `name` field to become `label`, standardizing the API across the two. Also adds `activeOptionIcon` to SelectField so users can opt-in to dynamically updating the field icon based on the selected option. Also fixed a bug with the `scrollIntoView` action related to its `onlyIfNeeded` flag. ([#127](https://github.com/techniq/svelte-ux/pull/127))
+
+- Theme support ([#146](https://github.com/techniq/svelte-ux/pull/146))
+
 ## 0.57.1
 
 ### Patch Changes

diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json
@@ -4,7 +4,7 @@
   "author": "Sean Lynch <[email protected]>",
   "license": "MIT",
   "repository": "techniq/svelte-ux",
-  "version": "0.57.2",
+  "version": "0.58.0-next.7",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -21,48 +21,50 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^1.27.6",
-    "@sveltejs/package": "^2.2.2",
+    "@sveltejs/kit": "^1.30.3",
+    "@sveltejs/package": "^2.2.5",
     "@tailwindcss/typography": "^0.5.10",
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.8",
-    "@types/lodash-es": "^4.17.11",
+    "@types/lodash-es": "^4.17.12",
     "@types/marked": "^6.0.0",
     "@types/prismjs": "^1.26.3",
     "@vitest/coverage-v8": "^0.34.6",
     "autoprefixer": "^10.4.16",
+    "culori": "^3.3.0",
+    "daisyui": "^4.5.0",
     "execa": "^8.0.1",
     "marked": "^10.0.0",
     "mdsvex": "^0.11.0",
-    "prettier": "^3.1.0",
-    "prettier-plugin-svelte": "^3.1.0",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
     "sveld": "^0.19.1",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "svelte-preprocess": "^5.1.0",
-    "svelte2tsx": "^0.6.25",
-    "tailwindcss": "^3.3.5",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "svelte-preprocess": "^5.1.3",
+    "svelte2tsx": "^0.6.27",
+    "tailwindcss": "^3.4.0",
     "tslib": "^2.6.2",
     "typedoc-json-parser": "^9.0.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "unist-util-visit": "^5.0.0",
-    "vite": "^4.5.0",
+    "vite": "^4.5.1",
     "vitest": "^0.33.0"
   },
   "type": "module",
   "dependencies": {
-    "@changesets/cli": "^2.26.2",
+    "@changesets/cli": "^2.27.1",
     "@floating-ui/dom": "^1.5.3",
-    "@fortawesome/fontawesome-common-types": "^6.4.2",
-    "clsx": "^2.0.0",
+    "@fortawesome/fontawesome-common-types": "^6.5.1",
+    "clsx": "^2.1.0",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
-    "date-fns": "^3.0.5",
+    "date-fns": "^3.0.6",
     "immer": "^10.0.3",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.95.1",
+    "posthog-js": "^1.96.1",
     "rehype-slug": "^6.0.0",
-    "tailwind-merge": "^2.0.0",
+    "tailwind-merge": "^2.2.0",
     "zod": "^3.22.4"
   },
   "peerDependencies": {
@@ -85,7 +87,8 @@
       "types": "./dist/utils/*.d.ts",
       "svelte": "./dist/utils/*.js"
     },
-    "./plugins/*": "./dist/plugins/*"
+    "./plugins/*": "./dist/plugins/*",
+    "./styles/*": "./dist/styles/*"
   },
   "files": [
     "dist"

diff --git a/packages/svelte-ux/src/docs/Blockquote.svelte b/packages/svelte-ux/src/docs/Blockquote.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
   import { mdiInformation } from '@mdi/js';
   import Icon from '../lib/components/Icon.svelte';
+  import { cls } from '$lib/utils/styles';
 </script>
 
 <div
-  class="bg-accent-500/10 border-l-[6px] border-l-accent-500 border-accent-500/30 text-accent-900 px-4 py-2 border my-4 rounded flex items-center gap-2 text-sm"
+  class={cls(
+    'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded flex items-center gap-2 text-sm',
+    '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
+  )}
 >
-  <Icon data={mdiInformation} class="text-accent-500" />
+  <Icon data={mdiInformation} class="text-primary" />
   <slot />
 </div>
diff --git a/packages/svelte-ux/src/docs/Link.svelte b/packages/svelte-ux/src/docs/Link.svelte
@@ -1,3 +1,3 @@
-<a class="text-accent-500 font-medium" {...$$restProps}>
+<a class="text-primary font-medium" {...$$restProps}>
   <slot />
 </a>
diff --git a/packages/svelte-ux/src/docs/ViewSourceButton.svelte b/packages/svelte-ux/src/docs/ViewSourceButton.svelte
@@ -14,7 +14,7 @@
 
 {#if source}
   <Toggle let:on={open} let:toggle>
-    <Button {icon} on:click={toggle} variant="fill-light" color="accent" size="sm">{label}</Button>
+    <Button {icon} on:click={toggle} variant="fill-light" color="primary" size="sm">{label}</Button>
     <Dialog
       {open}
       on:close={toggle}
@@ -23,11 +23,11 @@
       <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
         <div class="overflow-auto">
           <div class="text-lg font-semibold">{label}</div>
-          <div class="text-xs text-black/50 truncate">{href}</div>
+          <div class="text-xs text-surface-content/50 truncate">{href}</div>
         </div>
 
         {#if href}
-          <Button icon={mdiGithub} variant="fill-light" color="accent" {href} target="_blank">
+          <Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
             View on Github
           </Button>
         {/if}
@@ -38,13 +38,13 @@
       </div>
 
       <div slot="actions">
-        <Button variant="fill" color="accent">Close</Button>
+        <Button variant="fill" color="primary">Close</Button>
       </div>
     </Dialog>
   </Toggle>
 {:else if href}
   <Tooltip title="Edit this page">
-    <Button {icon} {href} target="_blank" variant="fill-light" color="accent" size="sm">
+    <Button {icon} {href} target="_blank" variant="fill-light" color="primary" size="sm">
       {label}
     </Button>
   </Tooltip>

diff --git a/packages/svelte-ux/src/lib/actions/dataBackground.ts b/packages/svelte-ux/src/lib/actions/dataBackground.ts
@@ -95,8 +95,8 @@ export const dataBackground: Action<HTMLElement, DataBackgroundOptions> = (node,
           linear-gradient(
             to right,
             transparent var(--baseline),
-            #999 var(--baseline),
-            #999 calc(var(--baseline) + 1px),
+            currentColor var(--baseline),
+            currentColor calc(var(--baseline) + 1px),
             transparent 0%,
             transparent 100%
           ),