From 79db9b180d1f3e884f8504895a31c3f3bd1f5862 Mon Sep 17 00:00:00 2001 From: Puru Vijay <47742487+PuruVJ@users.noreply.github.com> Date: Mon, 13 Feb 2023 14:47:53 +0530 Subject: [PATCH] feat: Proper dark mode (#8274) * Push * Update svelte REPL * Light mode fixes * Fox height issues * Moar dark mode fixes * More changes * Fix zen mode height issue --- sites/svelte.dev/package-lock.json | 102 ++++++++---------- sites/svelte.dev/package.json | 2 +- sites/svelte.dev/src/config.js | 1 - .../routes/(authed)/repl/[id]/+page.svelte | 2 +- .../(authed)/repl/[id]/AppControls.svelte | 10 +- sites/svelte.dev/src/routes/+layout.svelte | 22 ++-- .../src/routes/_components/Demo.svelte | 10 +- .../src/routes/_components/Section.svelte | 2 +- .../_components/Supporters/index.svelte | 8 +- .../_components/WhosUsingSvelte/index.svelte | 9 +- sites/svelte.dev/src/routes/blog/+page.svelte | 23 ++-- .../src/routes/blog/[slug]/+page.svelte | 32 +++--- .../src/routes/examples/[slug]/+page.svelte | 13 +-- .../examples/[slug]/_TableOfContents.svelte | 15 +-- .../src/routes/tutorial/[slug]/+page.svelte | 63 +++++++---- .../tutorial/[slug]/_TableOfContents.svelte | 6 +- 16 files changed, 170 insertions(+), 150 deletions(-) diff --git a/sites/svelte.dev/package-lock.json b/sites/svelte.dev/package-lock.json index 904b8c3fe463..494894c3ec3b 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 3ae104d38c1f..6466376467ae 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 f53f80abebaf..62527fc5bede 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 d288b41629a5..a75118ce9b94 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 ab497bbf0113..1a380f1f1267 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 6d5c9da35915..c9f47cbd4057 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 34aa0de56ec6..119cbd2e938e 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 af0b091a8cd2..51bba4054dd2 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 @@