diff --git a/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte b/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte index 38c6b0394..a879f76ca 100644 --- a/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte +++ b/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte @@ -8,8 +8,8 @@

- The {name} package is {speed} fast. - Download version {version} from + The {name} package is {speed} fast. Download version {version} + from npm and learn more here

@@ -17,7 +17,6 @@ diff --git a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte index 54f01c1ad..3445e7208 100644 --- a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte +++ b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte @@ -29,4 +29,10 @@ border-radius: 0.2em; background-color: #ffdfd3; } + + @media (prefers-color-scheme: dark) { + span { + background-color: #4f352b; + } + } diff --git a/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte index 50351493e..524f9bfa0 100644 --- a/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte +++ b/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte @@ -1,7 +1,7 @@ - +

{promise}

diff --git a/content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte b/content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte index 4f227adb7..7a0cd07fd 100644 --- a/content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte +++ b/content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte @@ -1,7 +1,7 @@ - + {#await promise}

...waiting

diff --git a/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md b/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md index 5c7964e1b..3f959d1bb 100644 --- a/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md +++ b/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md @@ -22,6 +22,11 @@ You can customise the fallback error page. Create a `src/error.html` file: %sveltekit.error.message% +

Game over

diff --git a/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/app-b/src/error.html b/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/app-b/src/error.html index af5d22a3a..fd08ff75c 100644 --- a/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/app-b/src/error.html +++ b/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/app-b/src/error.html @@ -3,6 +3,11 @@ %sveltekit.error.message% +

Game over

diff --git a/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-a/src/lib/Project.svelte b/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-a/src/lib/Project.svelte index 04110829b..599809c9d 100755 --- a/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-a/src/lib/Project.svelte +++ b/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-a/src/lib/Project.svelte @@ -53,12 +53,12 @@ } p { - color: #777; + opacity: 0.9; margin: 0; } .discussion { - background-color: #eee; + background-color: rgba(82, 81, 75, 0.1); border-top: 1px #ccc solid; } diff --git a/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-b/src/lib/Project.svelte b/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-b/src/lib/Project.svelte index fd766f423..6f6c2a791 100755 --- a/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-b/src/lib/Project.svelte +++ b/content/tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-b/src/lib/Project.svelte @@ -55,12 +55,12 @@ } p { - color: #777; + opacity: 0.9; margin: 0; } .discussion { - background-color: #eee; + background-color: rgba(82, 81, 75, 0.1); border-top: 1px #ccc solid; } diff --git a/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-a/src/lib/App.svelte b/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-a/src/lib/App.svelte index afdde09a4..5caf4f8e4 100644 --- a/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-a/src/lib/App.svelte +++ b/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-a/src/lib/App.svelte @@ -16,7 +16,7 @@ div { padding: 1em; margin: 0 0 1em 0; - background-color: #eee; + border: 1px solid #ff3e00; } .active { diff --git a/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-b/src/lib/App.svelte b/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-b/src/lib/App.svelte index 2d3d6e230..d6939164f 100644 --- a/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-b/src/lib/App.svelte +++ b/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-b/src/lib/App.svelte @@ -36,7 +36,7 @@ div { padding: 1em; margin: 0 0 1em 0; - background-color: #eee; + border: 1px solid #ff3e00; } .active { diff --git a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/app-a/src/routes/+layout.svelte b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/app-a/src/routes/+layout.svelte index d6c9a2ffa..ad888314c 100644 --- a/content/tutorial/04-advanced-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/app-a/src/routes/+layout.svelte +++ b/content/tutorial/04-advanced-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/app-a/src/routes/+layout.svelte @@ -23,7 +23,8 @@ content: attr(data-name) ' layout'; left: 1em; top: -1em; - background-color: white; + background-color: #ff531a; + color: white; padding: 0.5em; line-height: 1; } diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/02-using-both-load-functions/app-a/src/routes/CoolComponent.svelte b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/02-using-both-load-functions/app-a/src/routes/CoolComponent.svelte index 5681fe375..c115e3d99 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-loading/02-using-both-load-functions/app-a/src/routes/CoolComponent.svelte +++ b/content/tutorial/04-advanced-sveltekit/04-advanced-loading/02-using-both-load-functions/app-a/src/routes/CoolComponent.svelte @@ -9,6 +9,6 @@ diff --git a/content/tutorial/04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md b/content/tutorial/04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md index 8f0bb8ee9..5a70d628b 100644 --- a/content/tutorial/04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md +++ b/content/tutorial/04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md @@ -1,5 +1,5 @@ --- -title: $env/static/public +title: $env/dynamic/public --- As with [private environment variables](/tutorial/env-static-private), it's preferable to use static values if possible, but if necessary we can use dynamic values instead: diff --git a/content/tutorial/common/src/app.html b/content/tutorial/common/src/app.html index a81dfbad1..ca0eef762 100644 --- a/content/tutorial/common/src/app.html +++ b/content/tutorial/common/src/app.html @@ -52,6 +52,26 @@ .error { color: red; } + + code { + background: hsl(206, 20%, 80%); + } + + @media (prefers-color-scheme: dark) { + body { + background: hsl(0, 0%, 18%); + color: hsl(0, 0%, 90%); + } + code { + background: hsl(0, 0%, 40%); + } + a { + color: hsl(204, 100%, 63%); + } + nav { + background-color: #1a0d01; + } + } diff --git a/content/tutorial/common/static/svelte-logo-mask.svg b/content/tutorial/common/static/svelte-logo-mask.svg new file mode 100644 index 000000000..8572d3da6 --- /dev/null +++ b/content/tutorial/common/static/svelte-logo-mask.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/tutorial/common/static/tutorial/dark-theme.css b/content/tutorial/common/static/tutorial/dark-theme.css new file mode 100644 index 000000000..831107c4f --- /dev/null +++ b/content/tutorial/common/static/tutorial/dark-theme.css @@ -0,0 +1,5 @@ +body { + background-color: #333; + color: whitesmoke; + transition: all 0.5s; +} diff --git a/content/tutorial/common/static/tutorial/icons/folder-open.svg b/content/tutorial/common/static/tutorial/icons/folder-open.svg new file mode 100644 index 000000000..b2a58e743 --- /dev/null +++ b/content/tutorial/common/static/tutorial/icons/folder-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/tutorial/common/static/tutorial/icons/folder.svg b/content/tutorial/common/static/tutorial/icons/folder.svg new file mode 100644 index 000000000..2e1246a7f --- /dev/null +++ b/content/tutorial/common/static/tutorial/icons/folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/tutorial/common/static/tutorial/icons/gif.svg b/content/tutorial/common/static/tutorial/icons/gif.svg new file mode 100644 index 000000000..4b28abcec --- /dev/null +++ b/content/tutorial/common/static/tutorial/icons/gif.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/tutorial/common/static/tutorial/icons/md.svg b/content/tutorial/common/static/tutorial/icons/md.svg new file mode 100644 index 000000000..582204d3b --- /dev/null +++ b/content/tutorial/common/static/tutorial/icons/md.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/tutorial/common/static/tutorial/icons/xlsx.svg b/content/tutorial/common/static/tutorial/icons/xlsx.svg new file mode 100644 index 000000000..1a51093a9 --- /dev/null +++ b/content/tutorial/common/static/tutorial/icons/xlsx.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package.json b/package.json index 7f1af822f..2ff52aecb 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "@sveltejs/adapter-auto": "1.0.0-next.90", "@sveltejs/adapter-vercel": "1.0.0-next.85", "@sveltejs/kit": "next", - "@sveltejs/site-kit": "^2.1.2", + "@sveltejs/site-kit": "^3.0.2", "@types/diff": "^5.0.2", "@types/marked": "^4.0.8", "@types/prismjs": "^1.26.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f6f13197d..a4700e770 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,7 +5,7 @@ specifiers: '@sveltejs/adapter-auto': 1.0.0-next.90 '@sveltejs/adapter-vercel': 1.0.0-next.85 '@sveltejs/kit': next - '@sveltejs/site-kit': ^2.1.2 + '@sveltejs/site-kit': ^3.0.2 '@types/diff': ^5.0.2 '@types/marked': ^4.0.8 '@types/prismjs': ^1.26.0 @@ -44,8 +44,8 @@ dependencies: devDependencies: '@sveltejs/adapter-auto': 1.0.0-next.90 '@sveltejs/adapter-vercel': 1.0.0-next.85 - '@sveltejs/kit': 1.0.0-next.583_svelte@3.54.0+vite@4.0.0 - '@sveltejs/site-kit': 2.1.4 + '@sveltejs/kit': 1.0.0-next.584_svelte@3.54.0+vite@4.0.0 + '@sveltejs/site-kit': 3.0.2 '@types/diff': 5.0.2 '@types/marked': 4.0.8 '@types/prismjs': 1.26.0 @@ -356,8 +356,8 @@ packages: - supports-color dev: true - /@sveltejs/kit/1.0.0-next.583_svelte@3.54.0+vite@4.0.0: - resolution: {integrity: sha512-LrVhaJ161VVa4YANvTBlS8NICvIipp5w/PtS5f+XuGv4y1nltY5FnN+PUCG3qlySNC8BQDTqR0xDp7gDVFL7qw==} + /@sveltejs/kit/1.0.0-next.584_svelte@3.54.0+vite@4.0.0: + resolution: {integrity: sha512-iBfrrwkza1szR1GVMorTjj1Yw3SXhDVB5MMdDzCMKqKcCwxCehQ3K6QnlmyXHtHg2qX5rfvz0cpkp0uGGmcxQw==} engines: {node: '>=16.14'} hasBin: true requiresBuild: true @@ -384,10 +384,8 @@ packages: - supports-color dev: true - /@sveltejs/site-kit/2.1.4: - resolution: {integrity: sha512-PxpbiCWYXJ320abc6ucp3AXhh6YCggf6ea+EVA6W+wCBe45UFoChfoeQYeD6sQxPZN25XntoS4clZeYnt9H93Q==} - dependencies: - golden-fleece: 1.0.9 + /@sveltejs/site-kit/3.0.2: + resolution: {integrity: sha512-I+26WrVfMGwOsFrKXNuVWICINYsiXELnJuRh+mwayD51NnGOFASzWI20t9hSrzjVe/KQyIr5VWOpJ8tUR2M61w==} dev: true /@sveltejs/vite-plugin-svelte/2.0.2_svelte@3.54.0+vite@4.0.0: @@ -997,10 +995,6 @@ packages: resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} dev: true - /golden-fleece/1.0.9: - resolution: {integrity: sha512-YSwLaGMOgSBx9roJlNLL12c+FRiw7VECphinc6mGucphc/ZxTHgdEz6gmJqH6NOzYEd/yr64hwjom5pZ+tJVpg==} - dev: true - /graceful-fs/4.2.10: resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==} dev: true diff --git a/src/app.html b/src/app.html index b965bb472..2f8367462 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte index 0dbb0baf9..8e3984273 100644 --- a/src/lib/components/Modal.svelte +++ b/src/lib/components/Modal.svelte @@ -66,7 +66,8 @@ transform: translate(-50%, -50%); width: calc(100vw - 2rem); max-width: 56rem; - background: white; + background: var(--sk-back-2); + color: var(--sk-text-2); padding: 2rem; border: none; border-radius: 0.5rem; diff --git a/src/lib/components/PreloadingIndicator.svelte b/src/lib/components/PreloadingIndicator.svelte deleted file mode 100644 index c6f8487e0..000000000 --- a/src/lib/components/PreloadingIndicator.svelte +++ /dev/null @@ -1,67 +0,0 @@ - - -{#if visible} -
-
-
-{/if} - -{#if p >= 0.4} -
-{/if} - - diff --git a/src/lib/components/SplitPane.svelte b/src/lib/components/SplitPane.svelte index 04fcc9b7e..3b8915530 100644 --- a/src/lib/components/SplitPane.svelte +++ b/src/lib/components/SplitPane.svelte @@ -194,7 +194,7 @@ top: 0; width: 100%; height: 100%; - background: rgba(255, 255, 255, 0.01); + background: rgba(255, 255, 255, 0.0001); } .divider { diff --git a/src/lib/components/filetree/ContextMenu.svelte b/src/lib/components/filetree/ContextMenu.svelte index 7458fcd4b..04de654ac 100644 --- a/src/lib/components/filetree/ContextMenu.svelte +++ b/src/lib/components/filetree/ContextMenu.svelte @@ -64,7 +64,7 @@ } button { - color: var(--text); + color: var(--sk-text-2); width: 100%; text-align: left; border: 0px; diff --git a/src/lib/components/filetree/File.svelte b/src/lib/components/filetree/File.svelte index b51f35117..bd2e61e9b 100644 --- a/src/lib/components/filetree/File.svelte +++ b/src/lib/components/filetree/File.svelte @@ -64,8 +64,8 @@ height: 1rem; top: 0.1rem; right: calc(-2.6rem - 2px); - background-color: var(--light-blue); - border: 1px solid var(--border-color); + background-color: var(--sk-back-1); + border: 1px solid var(--sk-back-4); transform: translate(0, 0.2rem) rotate(45deg); z-index: 2; } diff --git a/src/lib/components/filetree/Filetree.svelte b/src/lib/components/filetree/Filetree.svelte index c06131ba6..f7f4bea8b 100644 --- a/src/lib/components/filetree/Filetree.svelte +++ b/src/lib/components/filetree/Filetree.svelte @@ -195,6 +195,7 @@ overflow-y: auto; overflow-x: hidden; padding: 2rem; + background: var(--sk-back-1); } .filetree::before { @@ -204,11 +205,11 @@ height: 100%; top: 0; right: 0; - border-right: 1px solid var(--border-color); + border-right: 1px solid var(--sk-back-4); } .filetree :global(.row) { - --bg: white; + --bg: var(--sk-back-1); --inset: calc((var(--depth) * 1.2rem) + 1.5rem); position: relative; width: calc(100% - 1px); @@ -216,11 +217,11 @@ height: 1.4em; z-index: 1; background: var(--bg); - color: var(--text); + color: var(--sk-text-2); } .filetree :global(.row:hover) { - --bg: var(--back-light); + --bg: var(--sk-back-3); } .filetree :global(button), @@ -232,7 +233,7 @@ .filetree :global(:focus-visible) { outline: none; - border: 2px solid var(--flash) !important; + border: 2px solid var(--sk-theme-3) !important; } .modal-contents p { @@ -241,12 +242,12 @@ .modal-contents button { display: block; - background: var(--prime); + background: var(--sk-theme-1); color: white; padding: 1rem; width: 10em; margin: 1em 0 0 0; - border-radius: var(--border-r); + border-radius: var(--sk-border-radius); line-height: 1; } diff --git a/src/lib/components/filetree/Folder.svelte b/src/lib/components/filetree/Folder.svelte index a28928604..f08d43b94 100644 --- a/src/lib/components/filetree/Folder.svelte +++ b/src/lib/components/filetree/Folder.svelte @@ -71,7 +71,7 @@ // fake root directory has no name $: can_remove = !$readonly && directory.name ? !$endstate[directory.name] : false; - /** @type {import('./ContextMenu.svelte').MenuItems} */ + /** @type {import('./ContextMenu.svelte').MenuItem[]} */ $: actions = [ can_create.file && { icon: 'file-new', diff --git a/src/lib/components/filetree/Item.svelte b/src/lib/components/filetree/Item.svelte index 6249a516e..64a6cffb0 100644 --- a/src/lib/components/filetree/Item.svelte +++ b/src/lib/components/filetree/Item.svelte @@ -84,7 +84,8 @@ diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte index d6657bb82..5833a7d15 100644 --- a/src/routes/tutorial/[slug]/Editor.svelte +++ b/src/routes/tutorial/[slug]/Editor.svelte @@ -1,5 +1,6 @@