Skip to content

Commit 5aeeb4c

Browse files
techniqtechniq
authored
Merge pull request #890 from cycle4passion/skeleton-5
skeleton 5 update
2 parents 22b7c03 + b5cb170 commit 5aeeb4c

33 files changed

Lines changed: 3311 additions & 64 deletions

‎.changeset/fix-tooltip-portaled-theme.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'layerchart': patch
3+
---
4+
5+
fix(Tooltip): Theme portaled tooltips in the style presets so surface colors resolve correctly (e.g. fixes a light tooltip in dark mode with Skeleton)

‎.changeset/skeleton-light-dark.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'layerchart': patch
3+
---
4+
5+
feat(skeleton): Resolve surface colors via `light-dark()` so the Skeleton presets follow `color-scheme` (the `.dark` toggle, or `prefers-color-scheme` when unpinned), and fix the surface scale collapsing to a single shade — surfaces now graduate from 100 (lightest) to 300 (darkest) in both light and dark

‎.changeset/sweet-snakes-sell.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'layerchart': patch
3+
---
4+
5+
feat: Support Skeleton 5 (skeleton-5.css)

‎docs/src/routes/docs/getting-started/+page.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,9 @@ or with a single `.css` import, Layerchart [provides](https://github.com/techniq
131131

132132
/* v4 */
133133
@import 'layerchart/skeleton-4.css';
134+
135+
/* v5 */
136+
@import 'layerchart/skeleton-5.css';
134137
```
135138
::
136139

@@ -217,6 +220,9 @@ Starter [project repos](https://github.com/techniq/layerchart/tree/main/examples
217220
- v4:
218221
:button{label="Source" href="https://github.com/techniq/layerchart/tree/docs-v2/examples/skeleton-4" size="sm" icon="lucide:github"}
219222
:button{label="Open in StackBlitz" href="https://stackblitz.com/github/techniq/layerchart/tree/docs-v2/examples/skeleton-4" size="sm" icon="simple-icons:stackblitz"}
223+
- v5:
224+
:button{label="Source" href="https://github.com/techniq/layerchart/tree/docs-v2/examples/skeleton-5" size="sm" icon="lucide:github"}
225+
:button{label="Open in StackBlitz" href="https://stackblitz.com/github/techniq/layerchart/tree/docs-v2/examples/skeleton-5" size="sm" icon="simple-icons:stackblitz"}
220226
::
221227

222228
::tab{label="Svelte UX" icon="custom-brands:svelteux"}

‎examples/daisyui-5/src/routes/+layout.svelte‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { ModeWatcher, theme, setTheme } from 'mode-watcher';
2+
import { ModeWatcher, mode, setMode, setTheme } from 'mode-watcher';
33
44
import favicon from '$lib/assets/favicon.svg';
55
import '../app.css';
@@ -17,11 +17,16 @@
1717
<div class="pb-4 text-right">
1818
<input
1919
type="checkbox"
20-
checked={theme.current === 'dark'}
20+
checked={mode.current === 'dark'}
2121
class="toggle"
2222
onchange={(e) => {
23-
// @ts-expect-error
24-
setTheme(e.target.checked ? 'dark' : 'light');
23+
// daisyUI switches its palette (and `color-scheme`) via `data-theme`, so keep it in
24+
// sync with mode-watcher's light/dark mode. Setting both means mode-watcher's inline
25+
// `color-scheme` and daisyUI's agree, so `light-dark()` (e.g. LayerChart's Tooltip)
26+
// resolves correctly. mode-watcher persists both and sets them pre-paint (no flash).
27+
const theme = e.currentTarget.checked ? 'dark' : 'light';
28+
setMode(theme); // `.dark` class + inline `color-scheme` (drives `light-dark()`)
29+
setTheme(theme); // daisyUI `data-theme` (drives its palette)
2530
}}
2631
/>
2732
</div>

‎examples/skeleton-4/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@sveltejs/vite-plugin-svelte": "^7.1.2",
2222
"@tailwindcss/vite": "^4.3.0",
2323
"layerchart": "workspace:*",
24+
"mode-watcher": "^1.1.0",
2425
"prettier": "^3.8.3",
2526
"prettier-plugin-svelte": "^4.1.0",
2627
"prettier-plugin-tailwindcss": "^0.8.0",

‎examples/skeleton-4/src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en" data-theme="cerberus">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />

‎examples/skeleton-4/src/lib/components/Lightswitch.svelte‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎examples/skeleton-4/src/routes/+layout.svelte‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script lang="ts">
2-
import '../app.css';
3-
import Lightswitch from '$lib/components/Lightswitch.svelte';
2+
import { Switch } from '@skeletonlabs/skeleton-svelte';
3+
import { ModeWatcher, mode, setMode } from 'mode-watcher';
4+
45
import favicon from '$lib/assets/favicon.svg';
6+
import '../app.css';
57
68
let { children } = $props();
79
</script>
@@ -10,9 +12,20 @@
1012
<link rel="icon" href={favicon} />
1113
</svelte:head>
1214

15+
<ModeWatcher defaultTheme="cerberus" />
16+
1317
<main class="p-4">
1418
<div class="pb-4 text-right">
15-
<Lightswitch />
19+
<Switch
20+
checked={mode.current === 'dark'}
21+
onCheckedChange={(e) => setMode(e.checked ? 'dark' : 'light')}
22+
>
23+
<Switch.Control>
24+
<Switch.Thumb />
25+
</Switch.Control>
26+
<Switch.HiddenInput />
27+
</Switch>
1628
</div>
17-
{@render children()}
29+
30+
{@render children?.()}
1831
</main>

‎examples/skeleton-5/.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
node_modules
2+
3+
# Output
4+
.output
5+
.vercel
6+
.netlify
7+
.wrangler
8+
/.svelte-kit
9+
/build
10+
11+
# OS
12+
.DS_Store
13+
Thumbs.db
14+
15+
# Env
16+
.env
17+
.env.*
18+
!.env.example
19+
!.env.test
20+
21+
# Vite
22+
vite.config.js.timestamp-*
23+
vite.config.ts.timestamp-*

0 commit comments

Comments
 (0)