diff --git a/sites/svelte.dev/package-lock.json b/sites/svelte.dev/package-lock.json
index 904b8c3fe4..494894c3ec 100644
--- a/sites/svelte.dev/package-lock.json
+++ b/sites/svelte.dev/package-lock.json
@@ -9,7 +9,7 @@
"version": "1.0.0",
"dependencies": {
"@supabase/supabase-js": "^2.7.1",
- "@sveltejs/repl": "0.0.3",
+ "@sveltejs/repl": "^0.1.2",
"cookie": "^0.5.0",
"devalue": "^4.2.3",
"do-not-zip": "^1.0.0",
@@ -1113,6 +1113,11 @@
"node": ">= 10"
}
},
+ "node_modules/@rollup/browser": {
+ "version": "3.15.0",
+ "resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.15.0.tgz",
+ "integrity": "sha512-uvteGT8QpNSxwrjFNXd/M1NGdHTqQn6KAK7+dxvelrZb+d3oFej4Fzo1CTkaSysF45J03TSLWMjM6nRzJfFdhA=="
+ },
"node_modules/@rollup/pluginutils": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -1256,32 +1261,23 @@
}
},
"node_modules/@sveltejs/repl": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.3.tgz",
- "integrity": "sha512-IcJa1SjS6ZopT4hpCA3iGmcQ6fn44M7GPLiSDeWQwVvRc7npyCoNB6G9POwsWxFdsBV1gzCHTmEnmOOpFsRnmQ==",
- "dependencies": {
- "@sveltejs/site-kit": "2.1.4",
- "acorn": "^8.7.0",
- "codemirror": "^5.65.1",
- "estree-walker": "^3.0.1",
- "rollup": "^2.67.0",
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.2.tgz",
+ "integrity": "sha512-NsrBDQ82Ko8NGxGUA6ko/7acMM2WyJNA40/IP+cLp8ykcas5mwrqeiaPP4GmKM0olr3GHPwwxzVdEHcjx03a/Q==",
+ "dependencies": {
+ "@rollup/browser": "^3.15.0",
+ "@sveltejs/site-kit": "3.2.2",
+ "acorn": "^8.8.2",
+ "codemirror": "5.65.1",
+ "estree-walker": "^3.0.3",
"svelte-json-tree": "^1.0.0",
"yootils": "^0.3.1"
}
},
- "node_modules/@sveltejs/repl/node_modules/@sveltejs/site-kit": {
- "version": "2.1.4",
- "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.4.tgz",
- "integrity": "sha512-PxpbiCWYXJ320abc6ucp3AXhh6YCggf6ea+EVA6W+wCBe45UFoChfoeQYeD6sQxPZN25XntoS4clZeYnt9H93Q==",
- "dependencies": {
- "golden-fleece": "^1.0.9"
- }
- },
"node_modules/@sveltejs/site-kit": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.2.2.tgz",
- "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw==",
- "dev": true
+ "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw=="
},
"node_modules/@sveltejs/vite-plugin-svelte": {
"version": "2.0.2",
@@ -1616,9 +1612,9 @@
"dev": true
},
"node_modules/codemirror": {
- "version": "5.65.11",
- "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.11.tgz",
- "integrity": "sha512-Gp62g2eKSCHYt10axmGhKq3WoJSvVpvhXmowNq7pZdRVowwtvBR/hi2LSP5srtctKkRT33T6/n8Kv1UGp7JW4A=="
+ "version": "5.65.1",
+ "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
+ "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
},
"node_modules/color": {
"version": "4.2.3",
@@ -2109,6 +2105,7 @@
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+ "dev": true,
"hasInstallScript": true,
"optional": true,
"os": [
@@ -2194,11 +2191,6 @@
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
"dev": true
},
- "node_modules/golden-fleece": {
- "version": "1.0.9",
- "resolved": "https://registry.npmjs.org/golden-fleece/-/golden-fleece-1.0.9.tgz",
- "integrity": "sha512-YSwLaGMOgSBx9roJlNLL12c+FRiw7VECphinc6mGucphc/ZxTHgdEz6gmJqH6NOzYEd/yr64hwjom5pZ+tJVpg=="
- },
"node_modules/graceful-fs": {
"version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -3151,6 +3143,9 @@
"version": "2.79.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
"integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+ "dev": true,
+ "optional": true,
+ "peer": true,
"bin": {
"rollup": "dist/bin/rollup"
},
@@ -4706,6 +4701,11 @@
"dev": true,
"optional": true
},
+ "@rollup/browser": {
+ "version": "3.15.0",
+ "resolved": "https://registry.npmjs.org/@rollup/browser/-/browser-3.15.0.tgz",
+ "integrity": "sha512-uvteGT8QpNSxwrjFNXd/M1NGdHTqQn6KAK7+dxvelrZb+d3oFej4Fzo1CTkaSysF45J03TSLWMjM6nRzJfFdhA=="
+ },
"@rollup/pluginutils": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -4820,34 +4820,23 @@
}
},
"@sveltejs/repl": {
- "version": "0.0.3",
- "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.0.3.tgz",
- "integrity": "sha512-IcJa1SjS6ZopT4hpCA3iGmcQ6fn44M7GPLiSDeWQwVvRc7npyCoNB6G9POwsWxFdsBV1gzCHTmEnmOOpFsRnmQ==",
- "requires": {
- "@sveltejs/site-kit": "2.1.4",
- "acorn": "^8.7.0",
- "codemirror": "^5.65.1",
- "estree-walker": "^3.0.1",
- "rollup": "^2.67.0",
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/@sveltejs/repl/-/repl-0.1.2.tgz",
+ "integrity": "sha512-NsrBDQ82Ko8NGxGUA6ko/7acMM2WyJNA40/IP+cLp8ykcas5mwrqeiaPP4GmKM0olr3GHPwwxzVdEHcjx03a/Q==",
+ "requires": {
+ "@rollup/browser": "^3.15.0",
+ "@sveltejs/site-kit": "3.2.2",
+ "acorn": "^8.8.2",
+ "codemirror": "5.65.1",
+ "estree-walker": "^3.0.3",
"svelte-json-tree": "^1.0.0",
"yootils": "^0.3.1"
- },
- "dependencies": {
- "@sveltejs/site-kit": {
- "version": "2.1.4",
- "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-2.1.4.tgz",
- "integrity": "sha512-PxpbiCWYXJ320abc6ucp3AXhh6YCggf6ea+EVA6W+wCBe45UFoChfoeQYeD6sQxPZN25XntoS4clZeYnt9H93Q==",
- "requires": {
- "golden-fleece": "^1.0.9"
- }
- }
}
},
"@sveltejs/site-kit": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-3.2.2.tgz",
- "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw==",
- "dev": true
+ "integrity": "sha512-HBLtfNdLr5Ykl8i8CvJcYjib7zMIJupg4T/omplp3ccpgpiUh26tk71vRG1+a6yMkfbfy0ShoPb9uwNril5cnw=="
},
"@sveltejs/vite-plugin-svelte": {
"version": "2.0.2",
@@ -5104,9 +5093,9 @@
"dev": true
},
"codemirror": {
- "version": "5.65.11",
- "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.11.tgz",
- "integrity": "sha512-Gp62g2eKSCHYt10axmGhKq3WoJSvVpvhXmowNq7pZdRVowwtvBR/hi2LSP5srtctKkRT33T6/n8Kv1UGp7JW4A=="
+ "version": "5.65.1",
+ "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.1.tgz",
+ "integrity": "sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA=="
},
"color": {
"version": "4.2.3",
@@ -5495,6 +5484,7 @@
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+ "dev": true,
"optional": true
},
"function-bind": {
@@ -5564,11 +5554,6 @@
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
"dev": true
},
- "golden-fleece": {
- "version": "1.0.9",
- "resolved": "https://registry.npmjs.org/golden-fleece/-/golden-fleece-1.0.9.tgz",
- "integrity": "sha512-YSwLaGMOgSBx9roJlNLL12c+FRiw7VECphinc6mGucphc/ZxTHgdEz6gmJqH6NOzYEd/yr64hwjom5pZ+tJVpg=="
- },
"graceful-fs": {
"version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -6257,6 +6242,9 @@
"version": "2.79.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
"integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+ "dev": true,
+ "optional": true,
+ "peer": true,
"requires": {
"fsevents": "~2.3.2"
}
diff --git a/sites/svelte.dev/package.json b/sites/svelte.dev/package.json
index 3ae104d38c..6466376467 100644
--- a/sites/svelte.dev/package.json
+++ b/sites/svelte.dev/package.json
@@ -17,7 +17,7 @@
},
"dependencies": {
"@supabase/supabase-js": "^2.7.1",
- "@sveltejs/repl": "0.0.3",
+ "@sveltejs/repl": "^0.1.2",
"cookie": "^0.5.0",
"devalue": "^4.2.3",
"do-not-zip": "^1.0.0",
diff --git a/sites/svelte.dev/src/config.js b/sites/svelte.dev/src/config.js
index f53f80abeb..62527fc5be 100644
--- a/sites/svelte.dev/src/config.js
+++ b/sites/svelte.dev/src/config.js
@@ -1,7 +1,6 @@
// REPL props
export const svelteUrl = `https://unpkg.com/svelte@3`;
-export const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
export const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = '${
import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
}';`;
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
index d288b41629..a75118ce9b 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte
@@ -41,7 +41,7 @@
afterNavigate(() => {
repl.set({
- components: data.gist.components
+ components: data.gist.components,
});
});
diff --git a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
index ab497bbf01..1a380f1f12 100644
--- a/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
+++ b/sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte
@@ -243,8 +243,8 @@ export default app;`,
align-items: center;
justify-content: space-between;
padding: 0.6rem var(--side-nav);
- background-color: var(--second);
- color: white;
+ background-color: var(--sk-back-4);
+ color: var(--sk-text-1);
white-space: nowrap;
flex: 0;
}
@@ -256,9 +256,9 @@ export default app;`,
padding: 0.2em;
opacity: 0.7;
transition: opacity 0.3s;
- font-family: var(--font);
+ font-family: var(--sk-font);
font-size: 1.6rem;
- color: white;
+ color: var(--sk-text-1);
/* width: 1.6em;
height: 1.6em; */
line-height: 1;
@@ -280,7 +280,7 @@ export default app;`,
background: transparent;
border: none;
color: currentColor;
- font-family: var(--font);
+ font-family: var(--sk-font);
font-size: 1.6rem;
opacity: 0.7;
outline: none;
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index 6d5c9da359..c9f47cbd40 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -52,6 +52,10 @@
diff --git a/sites/svelte.dev/src/routes/blog/+page.svelte b/sites/svelte.dev/src/routes/blog/+page.svelte
index 34aa0de56e..119cbd2e93 100644
--- a/sites/svelte.dev/src/routes/blog/+page.svelte
+++ b/sites/svelte.dev/src/routes/blog/+page.svelte
@@ -35,8 +35,8 @@
.posts {
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
- min-height: calc(100vh - var(--nav-h));
- padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
+ min-height: calc(100vh - var(--sk-nav-height));
+ padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
max-width: var(--main-width);
margin: 0 auto;
}
@@ -44,9 +44,9 @@
h2 {
display: inline-block;
margin: 3.2rem 0 0.4rem 0;
- color: var(--text);
+ color: var(--sk-text-2);
max-width: 18em;
- font-size: var(--h3);
+ font-size: var(--sk-text-m);
font-weight: 400;
}
@@ -59,14 +59,13 @@
.post:first-child h2 {
font-size: 4rem;
font-weight: 400;
- color: var(--second);
+ color: var(--sk-text-2);
}
- .post:first-child::before,
- .post:nth-child(2)::before {
+ .post:where(:first-child, :nth-child(2))::before {
content: 'Latest post • ' attr(data-pubdate);
- color: var(--flash);
- font-size: var(--h6);
+ color: var(--sk-theme-3);
+ font-size: var(--sk-text-xs);
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
@@ -77,9 +76,9 @@
}
.post p {
- font-size: var(--h5);
+ font-size: var(--sk-text-s);
max-width: 30em;
- color: var(--second);
+ color: var(--sk-text-3);
}
.post > a {
@@ -88,6 +87,6 @@
.posts a:hover,
.posts a:hover > h2 {
- color: var(--flash);
+ color: var(--sk-theme-3);
}
diff --git a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
index af0b091a8c..51bba4054d 100644
--- a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -35,7 +35,7 @@