From b4abb5677a1a57e6d0e4a439e15f94d3dc85f2e2 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 25 Sep 2024 20:39:38 -0400 Subject: [PATCH] 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':