Skip to content

Commit 5d58c6a

Browse files
techniqtechniq
committed
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
1 parent 992bdde commit 5d58c6a

File tree

147 files changed

+2666
-1875
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

147 files changed

+2666
-1875
lines changed

‎.changeset/angry-zebras-remember.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte-ux': patch
3+
---
4+
5+
Add styles (with daisy) as top-level export

‎.changeset/pre.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"mode": "pre",
3+
"tag": "next",
4+
"initialVersions": {
5+
"create-svelte-ux": "0.2.1",
6+
"svelte-ux": "0.57.1"
7+
},
8+
"changesets": [
9+
"angry-zebras-remember",
10+
"quick-avocados-hope",
11+
"strong-flies-provide",
12+
"yellow-oranges-fly"
13+
]
14+
}

‎.changeset/strong-flies-provide.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte-ux': minor
3+
---
4+
5+
Support `ux.themes` tailwind config, including Daisy UI

‎.changeset/yellow-oranges-fly.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'create-svelte-ux': minor
3+
'svelte-ux': minor
4+
---
5+
6+
Theme support

‎packages/create-svelte-ux/CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# create-svelte-ux
22

3+
## 0.3.0-next.0
4+
5+
### Minor Changes
6+
7+
- Theme support ([#146](https://github.com/techniq/svelte-ux/pull/146))
8+
39
## 0.2.1
410

511
### Patch Changes

‎packages/create-svelte-ux/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-svelte-ux",
3-
"version": "0.2.1",
3+
"version": "0.3.0-next.0",
44
"description": "A CLI for creating new Svelte UX projects",
55
"repository": {
66
"type": "git",
@@ -18,12 +18,12 @@
1818
},
1919
"dependencies": {
2020
"@clack/prompts": "^0.7.0",
21-
"@kitql/helpers": "^0.8.3",
21+
"@kitql/helpers": "^0.8.8",
2222
"commander": "^11.1.0"
2323
},
2424
"devDependencies": {
25-
"@types/node": "^20.9.2",
26-
"prettier": "^3.1.0"
25+
"@types/node": "^20.10.6",
26+
"prettier": "^3.1.1"
2727
},
2828
"files": [
2929
"fragments",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
import '../app.postcss';
66
77
settings({
8-
theme:{
9-
AppBar: 'bg-accent-500 text-white shadow-md',
8+
theme: {
9+
AppBar: 'bg-primary text-white shadow-md',
1010
AppLayout: {
1111
nav: 'bg-neutral-800'
1212
},

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
href="https://svelte-ux.techniq.dev"
1010
target="_blank"
1111
variant="fill-light"
12-
color="accent"
12+
color="primary"
1313
>
1414
Documentation
1515
</Button>
1616
<Button
1717
href="https://svelte-ux.techniq.dev/customization"
1818
target="_blank"
1919
variant="fill-light"
20-
color="accent"
20+
color="primary"
2121
>
2222
Customization
2323
</Button>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<Svg>
2323
<Axis placement="left" grid rule />
2424
<Axis placement="bottom" format={(d) => format(d, PeriodType.Day, 'short')} rule />
25-
<Area line={{ class: 'stroke-2 stroke-accent-500' }} class="fill-accent-500/30" />
25+
<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
2626
<Highlight points lines />
2727
</Svg>
2828

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ const config = {
99
'./node_modules/layerchart/**/*.{svelte,js}'
1010
],
1111
theme: {
12-
extend: {
13-
colors: {
14-
accent: colors.blue
15-
}
16-
}
12+
extend: {}
1713
},
1814
variants: {
1915
extend: {}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs');
55
const config = {
66
content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'],
77
theme: {
8-
extend: {
9-
colors: {
10-
accent: colors.blue
11-
}
12-
}
8+
extend: {}
139
},
1410
variants: {
1511
extend: {}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
import '../app.postcss';
66
77
settings({
8-
theme:{
9-
AppBar: 'bg-accent-500 text-white shadow-md',
8+
theme: {
9+
AppBar: 'bg-primary text-white shadow-md',
1010
AppLayout: {
1111
nav: 'bg-neutral-800'
1212
},

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
href="https://svelte-ux.techniq.dev"
1010
target="_blank"
1111
variant="fill-light"
12-
color="accent"
12+
color="primary"
1313
>
1414
Documentation
1515
</Button>
1616
<Button
1717
href="https://svelte-ux.techniq.dev/customization"
1818
target="_blank"
1919
variant="fill-light"
20-
color="accent"
20+
color="primary"
2121
>
2222
Customization
2323
</Button>

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs');
55
const config = {
66
content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'],
77
theme: {
8-
extend: {
9-
colors: {
10-
accent: colors.blue
11-
}
12-
}
8+
extend: {}
139
},
1410
variants: {
1511
extend: {}

‎packages/svelte-ux/CHANGELOG.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
# svelte-ux
22

3+
## 0.58.0-next.2
4+
5+
### Patch Changes
6+
7+
- Add styles (with daisy) as top-level export ([#146](https://github.com/techniq/svelte-ux/pull/146))
8+
9+
## 0.58.0-next.1
10+
11+
### Minor Changes
12+
13+
- Support `ux.themes` tailwind config, including Daisy UI ([#146](https://github.com/techniq/svelte-ux/pull/146))
14+
15+
## 0.58.0-next.0
16+
17+
### Minor Changes
18+
19+
- 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))
20+
21+
- Theme support ([#146](https://github.com/techniq/svelte-ux/pull/146))
22+
323
## 0.57.1
424

525
### Patch Changes

‎packages/svelte-ux/package.json

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"author": "Sean Lynch <[email protected]>",
55
"license": "MIT",
66
"repository": "techniq/svelte-ux",
7-
"version": "0.57.2",
7+
"version": "0.58.0-next.7",
88
"scripts": {
99
"dev": "vite dev",
1010
"build": "vite build",
@@ -21,48 +21,50 @@
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-auto": "^2.1.1",
24-
"@sveltejs/kit": "^1.27.6",
25-
"@sveltejs/package": "^2.2.2",
24+
"@sveltejs/kit": "^1.30.3",
25+
"@sveltejs/package": "^2.2.5",
2626
"@tailwindcss/typography": "^0.5.10",
2727
"@types/d3-array": "^3.2.1",
2828
"@types/d3-scale": "^4.0.8",
29-
"@types/lodash-es": "^4.17.11",
29+
"@types/lodash-es": "^4.17.12",
3030
"@types/marked": "^6.0.0",
3131
"@types/prismjs": "^1.26.3",
3232
"@vitest/coverage-v8": "^0.34.6",
3333
"autoprefixer": "^10.4.16",
34+
"culori": "^3.3.0",
35+
"daisyui": "^4.5.0",
3436
"execa": "^8.0.1",
3537
"marked": "^10.0.0",
3638
"mdsvex": "^0.11.0",
37-
"prettier": "^3.1.0",
38-
"prettier-plugin-svelte": "^3.1.0",
39+
"prettier": "^3.1.1",
40+
"prettier-plugin-svelte": "^3.1.2",
3941
"sveld": "^0.19.1",
40-
"svelte": "^4.2.7",
41-
"svelte-check": "^3.6.0",
42-
"svelte-preprocess": "^5.1.0",
43-
"svelte2tsx": "^0.6.25",
44-
"tailwindcss": "^3.3.5",
42+
"svelte": "^4.2.8",
43+
"svelte-check": "^3.6.2",
44+
"svelte-preprocess": "^5.1.3",
45+
"svelte2tsx": "^0.6.27",
46+
"tailwindcss": "^3.4.0",
4547
"tslib": "^2.6.2",
4648
"typedoc-json-parser": "^9.0.1",
47-
"typescript": "^5.2.2",
49+
"typescript": "^5.3.3",
4850
"unist-util-visit": "^5.0.0",
49-
"vite": "^4.5.0",
51+
"vite": "^4.5.1",
5052
"vitest": "^0.33.0"
5153
},
5254
"type": "module",
5355
"dependencies": {
54-
"@changesets/cli": "^2.26.2",
56+
"@changesets/cli": "^2.27.1",
5557
"@floating-ui/dom": "^1.5.3",
56-
"@fortawesome/fontawesome-common-types": "^6.4.2",
57-
"clsx": "^2.0.0",
58+
"@fortawesome/fontawesome-common-types": "^6.5.1",
59+
"clsx": "^2.1.0",
5860
"d3-array": "^3.2.4",
5961
"d3-scale": "^4.0.2",
60-
"date-fns": "^3.0.5",
62+
"date-fns": "^3.0.6",
6163
"immer": "^10.0.3",
6264
"lodash-es": "^4.17.21",
63-
"posthog-js": "^1.95.1",
65+
"posthog-js": "^1.96.1",
6466
"rehype-slug": "^6.0.0",
65-
"tailwind-merge": "^2.0.0",
67+
"tailwind-merge": "^2.2.0",
6668
"zod": "^3.22.4"
6769
},
6870
"peerDependencies": {
@@ -85,7 +87,8 @@
8587
"types": "./dist/utils/*.d.ts",
8688
"svelte": "./dist/utils/*.js"
8789
},
88-
"./plugins/*": "./dist/plugins/*"
90+
"./plugins/*": "./dist/plugins/*",
91+
"./styles/*": "./dist/styles/*"
8992
},
9093
"files": [
9194
"dist"

‎packages/svelte-ux/src/docs/Blockquote.svelte

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<script lang="ts">
22
import { mdiInformation } from '@mdi/js';
33
import Icon from '../lib/components/Icon.svelte';
4+
import { cls } from '$lib/utils/styles';
45
</script>
56

67
<div
7-
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"
8+
class={cls(
9+
'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',
10+
'[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
11+
)}
812
>
9-
<Icon data={mdiInformation} class="text-accent-500" />
13+
<Icon data={mdiInformation} class="text-primary" />
1014
<slot />
1115
</div>

‎packages/svelte-ux/src/docs/Link.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<a class="text-accent-500 font-medium" {...$$restProps}>
1+
<a class="text-primary font-medium" {...$$restProps}>
22
<slot />
33
</a>

‎packages/svelte-ux/src/docs/ViewSourceButton.svelte

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
{#if source}
1616
<Toggle let:on={open} let:toggle>
17-
<Button {icon} on:click={toggle} variant="fill-light" color="accent" size="sm">{label}</Button>
17+
<Button {icon} on:click={toggle} variant="fill-light" color="primary" size="sm">{label}</Button>
1818
<Dialog
1919
{open}
2020
on:close={toggle}
@@ -23,11 +23,11 @@
2323
<div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
2424
<div class="overflow-auto">
2525
<div class="text-lg font-semibold">{label}</div>
26-
<div class="text-xs text-black/50 truncate">{href}</div>
26+
<div class="text-xs text-surface-content/50 truncate">{href}</div>
2727
</div>
2828

2929
{#if href}
30-
<Button icon={mdiGithub} variant="fill-light" color="accent" {href} target="_blank">
30+
<Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
3131
View on Github
3232
</Button>
3333
{/if}
@@ -38,13 +38,13 @@
3838
</div>
3939

4040
<div slot="actions">
41-
<Button variant="fill" color="accent">Close</Button>
41+
<Button variant="fill" color="primary">Close</Button>
4242
</div>
4343
</Dialog>
4444
</Toggle>
4545
{:else if href}
4646
<Tooltip title="Edit this page">
47-
<Button {icon} {href} target="_blank" variant="fill-light" color="accent" size="sm">
47+
<Button {icon} {href} target="_blank" variant="fill-light" color="primary" size="sm">
4848
{label}
4949
</Button>
5050
</Tooltip>

‎packages/svelte-ux/src/lib/actions/dataBackground.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@ export const dataBackground: Action<HTMLElement, DataBackgroundOptions> = (node,
9595
linear-gradient(
9696
to right,
9797
transparent var(--baseline),
98-
#999 var(--baseline),
99-
#999 calc(var(--baseline) + 1px),
98+
currentColor var(--baseline),
99+
currentColor calc(var(--baseline) + 1px),
100100
transparent 0%,
101101
transparent 100%
102102
),

0 commit comments

Comments
 (0)