Skip to content

Commit 7dd7dfe

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 d9a9ddd commit 7dd7dfe

File tree

147 files changed

+2864
-1666
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

+2864
-1666
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: {}

0 commit comments

Comments
 (0)