From b4abb5677a1a57e6d0e4a439e15f94d3dc85f2e2 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 25 Sep 2024 20:39:38 -0400 Subject: [PATCH 1/9] oswald+cardo --- .../(authed)/playground/[id]/AppControls.svelte | 4 ++-- .../(authed)/playground/[id]/UserMenu.svelte | 4 ++-- apps/svelte.dev/src/routes/+error.svelte | 2 +- apps/svelte.dev/src/routes/_home/Hero.svelte | 2 +- .../src/routes/_home/HeroSvelteKit.svelte | 2 +- packages/repl/src/lib/CodeMirror.svelte | 4 ++-- .../repl/src/lib/Input/ComponentSelector.svelte | 4 ++-- packages/repl/src/lib/Message.svelte | 2 +- packages/repl/src/lib/Output/Output.svelte | 2 +- .../repl/src/lib/Output/PaneWithPanel.svelte | 2 +- .../src/lib/Output/console/ConsoleLine.svelte | 2 +- packages/site-kit/package.json | 2 ++ .../site-kit/src/lib/docs/DocsContents.svelte | 5 +++-- packages/site-kit/src/lib/nav/Nav.svelte | 3 ++- .../site-kit/src/lib/nav/NavContextMenu.svelte | 4 ++-- packages/site-kit/src/lib/styles/base.css | 3 ++- packages/site-kit/src/lib/styles/tokens.css | 8 ++++++-- pnpm-lock.yaml | 16 ++++++++++++++++ 18 files changed, 48 insertions(+), 23 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 76ef9ab860..53d76a38ea 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -288,7 +288,7 @@ export default app;` padding: 0.2em; opacity: 0.7; transition: opacity 0.3s; - font-family: var(--sk-font); + font-family: var(--sk-font-body); font-size: 1.6rem; color: var(--sk-text-1); line-height: 1; @@ -310,7 +310,7 @@ export default app;` background: transparent; border: none; color: currentColor; - font-family: var(--sk-font); + font-family: var(--sk-font-body); font-size: 1.6rem; opacity: 0.7; outline: none; diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte index 30984390ab..f79536b86d 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte @@ -63,7 +63,7 @@ .name { line-height: 1; display: none; - font-family: var(--sk-font); + font-family: var(--sk-font-body); font-size: 1.6rem; } @@ -99,7 +99,7 @@ .menu button, .menu a { background-color: transparent; - font-family: var(--sk-font); + font-family: var(--sk-font-body); font-size: 1.6rem; opacity: 0.7; padding: 0.4rem 0; diff --git a/apps/svelte.dev/src/routes/+error.svelte b/apps/svelte.dev/src/routes/+error.svelte index 888fcf179f..0687999688 100644 --- a/apps/svelte.dev/src/routes/+error.svelte +++ b/apps/svelte.dev/src/routes/+error.svelte @@ -68,7 +68,7 @@ background-color: var(--sk-theme-2); color: white; padding: 12px 16px; - font: 600 16px/1.7 var(--sk-font); + font: 600 16px/1.7 var(--sk-font-body); border-radius: 2px; } diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte index 32dad6aeb1..5309508950 100644 --- a/apps/svelte.dev/src/routes/_home/Hero.svelte +++ b/apps/svelte.dev/src/routes/_home/Hero.svelte @@ -74,7 +74,7 @@ strong { font-size: var(--sk-text-l); text-align: center; - font-family: var(--sk-font); + font-family: var(--sk-font-heading); text-transform: lowercase; font-weight: 400; color: var(--sk-text-2); diff --git a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte index 221fb1b941..9ba251fb72 100644 --- a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte +++ b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte @@ -82,7 +82,7 @@ font-weight: 200; line-height: 1.2; color: var(--sk-text-2); - font-family: var(--sk-font); + font-family: var(--sk-font-body); margin-bottom: 2rem; /* max-width: 12em; */ /* margin: 0 auto; */ diff --git a/packages/repl/src/lib/CodeMirror.svelte b/packages/repl/src/lib/CodeMirror.svelte index bf8b6f915b..51731d78a0 100644 --- a/packages/repl/src/lib/CodeMirror.svelte +++ b/packages/repl/src/lib/CodeMirror.svelte @@ -296,7 +296,7 @@ .cm-tooltip { border: none; background: var(--sk-back-3); - font-family: var(--sk-font); + font-family: var(--sk-font-body); max-width: calc(100vw - 10em); position: relative; filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1)); @@ -369,7 +369,7 @@ } .cm-diagnostic :not(code) { - font-family: var(--sk-font); + font-family: var(--sk-font-body); } .cm-diagnosticText { diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte index e317987679..bf69054f97 100644 --- a/packages/repl/src/lib/Input/ComponentSelector.svelte +++ b/packages/repl/src/lib/Input/ComponentSelector.svelte @@ -304,7 +304,7 @@ .add-new { position: relative; display: inline-block; - font: 400 12px/1.5 var(--sk-font); + font: 400 12px/1.5 var(--sk-font-body); background: var(--sk-back-1); border: none; border-bottom: 3px solid transparent; @@ -339,7 +339,7 @@ width: 100%; left: 16px; top: 12px; - font: 400 12px/1.5 var(--sk-font); + font: 400 12px/1.5 var(--sk-font-body); border: none; color: var(--sk-theme-3); outline: none; diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte index c976784562..e67bd937c4 100644 --- a/packages/repl/src/lib/Message.svelte +++ b/packages/repl/src/lib/Message.svelte @@ -46,7 +46,7 @@ position: relative; color: white; padding: 12px 16px 12px 44px; - font: 400 12px/1.7 var(--sk-font); + font: 400 12px/1.7 var(--sk-font-body); margin: 0; border-top: 1px solid white; } diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte index 9c676e0cc3..e95d366251 100644 --- a/packages/repl/src/lib/Output/Output.svelte +++ b/packages/repl/src/lib/Output/Output.svelte @@ -118,7 +118,7 @@ background: var(--sk-back-1, white); text-align: left; position: relative; - font: 400 12px/1.5 var(--sk-font); + font: 400 12px/1.5 var(--sk-font-body); border: none; border-bottom: 3px solid transparent; padding: 12px 12px 8px 12px; diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte index 8cea54e816..96bbea89a1 100644 --- a/packages/repl/src/lib/Output/PaneWithPanel.svelte +++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte @@ -69,7 +69,7 @@ } .panel-heading { - font: 700 12px/1.5 var(--sk-font); + font: 700 12px/1.5 var(--sk-font-body); color: var(--sk-text-1, #333); flex: 1; text-align: left; diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte index 11dba58d3c..74c4dfed5a 100644 --- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte +++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte @@ -258,7 +258,7 @@ .meta { color: var(--sk-text-2, #666); - font-family: var(--sk-font) !important; + font-family: var(--sk-font-body) !important; font-size: 12px; } diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index 1088a9a901..66fd03ba31 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -21,6 +21,8 @@ }, "homepage": "https://github.com/sveltejs/svelte.dev/tree/main/packages/site-kit#readme", "dependencies": { + "@fontsource/cardo": "^5.1.0", + "@fontsource/oswald": "^5.1.0", "esm-env": "^1.0.0", "json5": "^2.2.3", "svelte-persisted-store": "^0.9.2" diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte index 0728fb7707..2480593b4e 100644 --- a/packages/site-kit/src/lib/docs/DocsContents.svelte +++ b/packages/site-kit/src/lib/docs/DocsContents.svelte @@ -46,7 +46,7 @@ .sidebar { padding: 3.2rem; - font-family: var(--sk-font); + font-family: var(--sk-font-body); height: 100%; bottom: auto; width: 100%; @@ -78,6 +78,7 @@ display: block; padding-bottom: 0.8rem; font-size: var(--sk-text-s); + font-family: var(--sk-font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; @@ -87,7 +88,7 @@ .page { display: block; font-size: 1.6rem; - font-family: var(--sk-font); + font-family: var(--sk-font-body); padding-bottom: 0.6em; } diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 5c5b45fc57..fc3ef8fbc3 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -143,11 +143,12 @@ Top navigation bar for the application. It provides a slot for the left side, th height: var(--sk-nav-height); margin: 0 auto; background-color: var(--sk-back-2); - font-family: var(--sk-font); + font-family: var(--sk-font-body); user-select: none; transition: 0.4s var(--quint-out); transition-property: transform, background; isolation: isolate; + font-family: var(--sk-font-heading); } nav::after { diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte index e9527f4f9c..5ad348201d 100644 --- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte +++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte @@ -77,7 +77,7 @@ nav { padding: 0.29rem; padding-top: 0; - font-family: var(--sk-font); + font-family: var(--sk-font-body); overflow-y: auto; height: 100%; @@ -174,7 +174,7 @@ font-size: 1.1rem; font-weight: 600; letter-spacing: 1px; - font-family: var(--sk-font); + font-family: var(--sk-font-body); line-height: 1; color: var(--sk-theme-1); background: hsla(var(--sk-theme-1-hsl), 0.1); diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index 4ea14bc3df..e745196d93 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -19,7 +19,7 @@ body { body { font-size: 1.6rem; - font-family: var(--sk-font); + font-family: var(--sk-font-body); line-height: 1.618; color: var(--sk-text-2); background-color: var(--sk-back-1); @@ -84,6 +84,7 @@ h1 { :where(h1, h2, h3, h4, h5, h6) { position: relative; + font-family: var(--sk-font-heading); font-weight: 400; line-height: 1.35; color: var(--sk-text-1); diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 598b3c1f56..5732e7d897 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -1,3 +1,6 @@ +@import '@fontsource/cardo'; +@import '@fontsource/oswald'; + /* !IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode, @@ -22,8 +25,9 @@ --sk-banner-bottom-height: 0px; /* typography */ - --sk-font: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + --sk-font: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + --sk-font-heading: 'Oswald'; + --sk-font-body: Cardo; --sk-font-mono: 'Fira Mono', monospace; --sk-text-xxl: 3.6rem; --sk-text-xl: 3rem; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bcd223d0dc..0dd8694746 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -349,6 +349,12 @@ importers: packages/site-kit: dependencies: + '@fontsource/cardo': + specifier: ^5.1.0 + version: 5.1.0 + '@fontsource/oswald': + specifier: ^5.1.0 + version: 5.1.0 esm-env: specifier: ^1.0.0 version: 1.0.0 @@ -790,6 +796,12 @@ packages: cpu: [x64] os: [win32] + '@fontsource/cardo@5.1.0': + resolution: {integrity: sha512-ylOb2t/CgQV2mNovSVya6r/jC9Q0w3cKHQOO7iycXLHRsgCGF82Oy/Je3GmdoGVKRNF6CDA3pc85Tw1078nQwQ==} + + '@fontsource/oswald@5.1.0': + resolution: {integrity: sha512-MwHMRCNCeTvaUWk15AHVfUi84T4TB4dshJrCOcfBYqUkY0V8IxKEwqFzSgGBG7zIfTZ0Diu+/CKpiktKqo5Gkg==} + '@fontsource/roboto-mono@5.0.18': resolution: {integrity: sha512-hKuwk/cy3i6fWPzazT5xjgWq4YNqZWDHVbJh2Wwj3KYvWGi2v3ToBw/4LKQ+ggEkPLcIG6VU8GpCT3Xtf+mbbA==} @@ -3290,6 +3302,10 @@ snapshots: '@esbuild/win32-x64@0.23.1': optional: true + '@fontsource/cardo@5.1.0': {} + + '@fontsource/oswald@5.1.0': {} + '@fontsource/roboto-mono@5.0.18': {} '@img/sharp-darwin-arm64@0.33.4': From 27d0356d6588c203557eec8a75bd2f7200bffdca Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 25 Sep 2024 21:14:04 -0400 Subject: [PATCH 2/9] overpass+cardo --- packages/site-kit/package.json | 1 - packages/site-kit/src/lib/styles/tokens.css | 3 +-- pnpm-lock.yaml | 8 -------- 3 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index 66fd03ba31..efb1f1b0ce 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -22,7 +22,6 @@ "homepage": "https://github.com/sveltejs/svelte.dev/tree/main/packages/site-kit#readme", "dependencies": { "@fontsource/cardo": "^5.1.0", - "@fontsource/oswald": "^5.1.0", "esm-env": "^1.0.0", "json5": "^2.2.3", "svelte-persisted-store": "^0.9.2" diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 5732e7d897..255792a14a 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -1,5 +1,4 @@ @import '@fontsource/cardo'; -@import '@fontsource/oswald'; /* @@ -26,7 +25,7 @@ /* typography */ --sk-font: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - --sk-font-heading: 'Oswald'; + --sk-font-heading: 'Overpass'; --sk-font-body: Cardo; --sk-font-mono: 'Fira Mono', monospace; --sk-text-xxl: 3.6rem; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0dd8694746..f86c000948 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -352,9 +352,6 @@ importers: '@fontsource/cardo': specifier: ^5.1.0 version: 5.1.0 - '@fontsource/oswald': - specifier: ^5.1.0 - version: 5.1.0 esm-env: specifier: ^1.0.0 version: 1.0.0 @@ -799,9 +796,6 @@ packages: '@fontsource/cardo@5.1.0': resolution: {integrity: sha512-ylOb2t/CgQV2mNovSVya6r/jC9Q0w3cKHQOO7iycXLHRsgCGF82Oy/Je3GmdoGVKRNF6CDA3pc85Tw1078nQwQ==} - '@fontsource/oswald@5.1.0': - resolution: {integrity: sha512-MwHMRCNCeTvaUWk15AHVfUi84T4TB4dshJrCOcfBYqUkY0V8IxKEwqFzSgGBG7zIfTZ0Diu+/CKpiktKqo5Gkg==} - '@fontsource/roboto-mono@5.0.18': resolution: {integrity: sha512-hKuwk/cy3i6fWPzazT5xjgWq4YNqZWDHVbJh2Wwj3KYvWGi2v3ToBw/4LKQ+ggEkPLcIG6VU8GpCT3Xtf+mbbA==} @@ -3304,8 +3298,6 @@ snapshots: '@fontsource/cardo@5.1.0': {} - '@fontsource/oswald@5.1.0': {} - '@fontsource/roboto-mono@5.0.18': {} '@img/sharp-darwin-arm64@0.33.4': From 5552973013e7d1d762f8a3b0688a9d615147c1ae Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 25 Sep 2024 21:20:42 -0400 Subject: [PATCH 3/9] Yantramanav + Cardo --- packages/site-kit/package.json | 1 + packages/site-kit/src/lib/styles/tokens.css | 3 ++- pnpm-lock.yaml | 8 ++++++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index efb1f1b0ce..0bf425fc35 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -22,6 +22,7 @@ "homepage": "https://github.com/sveltejs/svelte.dev/tree/main/packages/site-kit#readme", "dependencies": { "@fontsource/cardo": "^5.1.0", + "@fontsource/yantramanav": "^5.1.0", "esm-env": "^1.0.0", "json5": "^2.2.3", "svelte-persisted-store": "^0.9.2" diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 255792a14a..f9143081be 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -1,4 +1,5 @@ @import '@fontsource/cardo'; +@import '@fontsource/yantramanav'; /* @@ -25,7 +26,7 @@ /* typography */ --sk-font: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - --sk-font-heading: 'Overpass'; + --sk-font-heading: 'Yantramanav'; --sk-font-body: Cardo; --sk-font-mono: 'Fira Mono', monospace; --sk-text-xxl: 3.6rem; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f86c000948..0e505f96e8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -352,6 +352,9 @@ importers: '@fontsource/cardo': specifier: ^5.1.0 version: 5.1.0 + '@fontsource/yantramanav': + specifier: ^5.1.0 + version: 5.1.0 esm-env: specifier: ^1.0.0 version: 1.0.0 @@ -799,6 +802,9 @@ packages: '@fontsource/roboto-mono@5.0.18': resolution: {integrity: sha512-hKuwk/cy3i6fWPzazT5xjgWq4YNqZWDHVbJh2Wwj3KYvWGi2v3ToBw/4LKQ+ggEkPLcIG6VU8GpCT3Xtf+mbbA==} + '@fontsource/yantramanav@5.1.0': + resolution: {integrity: sha512-wSmYmoGhFbYF4XUXouudROqTn6GREe0HTV/HqcnRLYbQJNa3kmqbcebIm9PxPDQ0l3y2speJAlbOoDGM2DN9dg==} + '@img/sharp-darwin-arm64@0.33.4': resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==} engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} @@ -3300,6 +3306,8 @@ snapshots: '@fontsource/roboto-mono@5.0.18': {} + '@fontsource/yantramanav@5.1.0': {} + '@img/sharp-darwin-arm64@0.33.4': optionalDependencies: '@img/sharp-libvips-darwin-arm64': 1.0.2 From 45745dc7c1f6c9b2f385fdad645755fc737f5424 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 25 Sep 2024 22:12:32 -0400 Subject: [PATCH 4/9] various --- .../src/routes/(authed)/playground/[id]/AppControls.svelte | 6 +++--- .../src/routes/(authed)/playground/[id]/UserMenu.svelte | 2 +- apps/svelte.dev/src/routes/blog/+page.svelte | 1 + apps/svelte.dev/src/routes/docs/[...path]/+page.svelte | 6 ++++-- .../svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 7 +++---- apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte | 1 + apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte | 1 + apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte | 3 ++- apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte | 3 ++- apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css | 2 +- .../src/routes/tutorial/[slug]/filetree/Filetree.svelte | 2 +- .../src/routes/tutorial/[slug]/filetree/Item.svelte | 4 ++-- packages/repl/src/lib/Input/ComponentSelector.svelte | 2 +- packages/repl/src/lib/Input/Migrate.svelte | 4 +++- packages/repl/src/lib/Input/RunesInfo.svelte | 3 ++- packages/repl/src/lib/Message.svelte | 2 +- packages/repl/src/lib/Output/Output.svelte | 2 +- packages/repl/src/lib/Output/PaneWithPanel.svelte | 3 ++- packages/repl/src/lib/Output/Viewer.svelte | 3 ++- packages/site-kit/src/lib/docs/DocsContents.svelte | 6 ++---- packages/site-kit/src/lib/styles/base.css | 2 +- packages/site-kit/src/lib/styles/tokens.css | 7 ++++++- 22 files changed, 43 insertions(+), 29 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 53d76a38ea..72ab711b8f 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -288,7 +288,7 @@ export default app;` padding: 0.2em; opacity: 0.7; transition: opacity 0.3s; - font-family: var(--sk-font-body); + font-family: var(--sk-font-heading); font-size: 1.6rem; color: var(--sk-text-1); line-height: 1; @@ -310,8 +310,8 @@ export default app;` background: transparent; border: none; color: currentColor; - font-family: var(--sk-font-body); - font-size: 1.6rem; + font-family: var(--sk-font-heading); + font-size: var(--sk-text-m); opacity: 0.7; outline: none; flex: 1; diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte index f79536b86d..f120839d8c 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte @@ -63,7 +63,7 @@ .name { line-height: 1; display: none; - font-family: var(--sk-font-body); + font-family: var(--sk-font-heading); font-size: 1.6rem; } diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte index 5d3d161577..85bd52b284 100644 --- a/apps/svelte.dev/src/routes/blog/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/+page.svelte @@ -64,6 +64,7 @@ .post:where(:first-child, :nth-child(2))::before { content: 'Latest post • ' attr(data-pubdate); color: var(--sk-theme-3); + font-family: var(--sk-font-heading); font-size: var(--sk-text-xs); font-weight: 400; letter-spacing: 0.05em; diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte index 635075f274..ef39e1ad36 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte @@ -68,6 +68,7 @@ line-height: 1; z-index: 2; margin: 6rem 0 2rem 0; + font-family: var(--sk-font-heading); a { text-decoration: none; @@ -102,9 +103,10 @@ .controls span { display: block; - font-size: 1.2rem; + font-size: var(--sk-text-s); text-transform: uppercase; - font-weight: 600; + font-weight: 400; + font-family: var(--sk-font-heading); color: var(--sk-text-3); } diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte index ca5cfac8bb..84238f0a36 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte @@ -70,7 +70,7 @@ } label { - text-transform: uppercase; + font-family: var(--sk-font-heading); display: block; } @@ -138,10 +138,9 @@ } & label { - font-size: var(--sk-text-s); + font-size: var(--sk-text-m); - letter-spacing: 0.1em; - font-weight: 600; + font-weight: 500; display: block; &::before { diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte index c3df799d60..29e40cc953 100644 --- a/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte @@ -67,6 +67,7 @@ input { flex: 1; padding: 0.5rem 1rem 0.4rem 1rem; + border: none; background-color: var(--sk-back-3); color: var(--sk-text-1); font-family: inherit; diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte index 68afeb6978..3d2925b2db 100644 --- a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte @@ -134,6 +134,7 @@ justify-content: center; background: var(--sk-back-2); user-select: none; + font-family: var(--sk-font-heading); } .progress-container { diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte index 0662c0f591..a32c91aa46 100644 --- a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte @@ -191,7 +191,7 @@ header strong, h1 { - font-size: var(--sk-text-xs); + font-size: var(--sk-text-s); } .menu { @@ -251,6 +251,7 @@ text-align: center; color: var(--sk-text-2); font-weight: 400; + font-size: var(--sk-text-s); } h1 .desktop { diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte index 8c0901427f..8e39d6b854 100644 --- a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte @@ -194,7 +194,8 @@ footer .edit { color: var(--sk-text-2); - font-size: 1.4rem; + font-family: var(--sk-font-heading); + font-size: var(--sk-text-s); padding: 0 0 0 1.4em; background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em); background-size: 1em 1em; diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css b/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css index bb944ee827..66a1d7d0cb 100644 --- a/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css +++ b/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css @@ -7,7 +7,7 @@ } .cm-editor .cm-scroller { - font-family: var(--font-mono); + font-family: var(--sk-font-mono); font-size: 1.3rem; line-height: 2rem; } diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte index bd6d928768..5fa502a579 100644 --- a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte @@ -179,7 +179,7 @@