diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte index dfc604253e..5fd0c43d94 100644 --- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte +++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte @@ -247,7 +247,6 @@ h2 { color: var(--sk-text-2); - font-size: var(--sk-text-s); font-weight: 400; overflow: hidden; text-overflow: ellipsis; 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 30d2647f90..2c91d7ba63 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -311,7 +311,6 @@ export default app;` border: none; color: currentColor; font-family: var(--sk-font-ui); - font-size: var(--sk-text-m); opacity: 0.7; outline: none; flex: 1; diff --git a/apps/svelte.dev/src/routes/+error.svelte b/apps/svelte.dev/src/routes/+error.svelte index f998884a3c..bb7939b096 100644 --- a/apps/svelte.dev/src/routes/+error.svelte +++ b/apps/svelte.dev/src/routes/+error.svelte @@ -62,7 +62,7 @@ } h1 { - font-size: var(--sk-text-xxl); + font-size: var(--sk-font-size-h1); margin: 0 0 0.5em 0; } diff --git a/apps/svelte.dev/src/routes/+page.svelte b/apps/svelte.dev/src/routes/+page.svelte index bf2fd573f6..919cec4d37 100644 --- a/apps/svelte.dev/src/routes/+page.svelte +++ b/apps/svelte.dev/src/routes/+page.svelte @@ -120,13 +120,3 @@ {/snippet} - - diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/apps/svelte.dev/src/routes/_home/Deployment.svelte index 440eb6c890..cae27a0f6c 100644 --- a/apps/svelte.dev/src/routes/_home/Deployment.svelte +++ b/apps/svelte.dev/src/routes/_home/Deployment.svelte @@ -145,7 +145,8 @@ left: 0; width: 100%; color: var(--sk-text-3); - font-size: var(--sk-text-xs); + font-family: var(--sk-font-ui); + font-size: var(--sk-font-size-ui-medium); } .globe span::before { @@ -180,7 +181,8 @@ } .platforms a span { - font-size: var(--sk-text-xs); + font-family: var(--sk-font-ui); + font-size: var(--sk-font-size-ui-medium); color: var(--sk-text-3); text-align: center; } diff --git a/apps/svelte.dev/src/routes/_home/Features.svelte b/apps/svelte.dev/src/routes/_home/Features.svelte index 0854a8bb0b..16966a40cf 100644 --- a/apps/svelte.dev/src/routes/_home/Features.svelte +++ b/apps/svelte.dev/src/routes/_home/Features.svelte @@ -34,10 +34,7 @@ Deploy anywhere with adapters.

-

- SvelteKit is the framework that - grows with you, whatever you end up building. -

+

SvelteKit is the framework that grows with you, whatever you end up building.

@@ -67,18 +64,19 @@ .wall { margin: 0; - font-size: var(--sk-text-xs); + font-family: var(--sk-font-ui); + font-size: var(--sk-font-size-ui-small); + color: var(--sk-text-4); + + strong { + color: var(--sk-text-1); + } } p + p { margin-top: 1em; } - p, - strong { - color: var(--sk-text-3); - } - @media (min-width: 600px) { h2 { margin-top: 0.5em; @@ -109,10 +107,6 @@ margin-top: 0.1em; } - p { - font-size: var(--sk-text-s); - } - .features { padding-top: clamp(0px, calc(23.333vw - 210px), 70px); } diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte index 5309508950..9421db3bc8 100644 --- a/apps/svelte.dev/src/routes/_home/Hero.svelte +++ b/apps/svelte.dev/src/routes/_home/Hero.svelte @@ -72,7 +72,7 @@ } strong { - font-size: var(--sk-text-l); + font-size: var(--sk-font-size-h2); text-align: center; font-family: var(--sk-font-heading); text-transform: lowercase; @@ -93,7 +93,7 @@ gap: 0.1rem; background: var(--sk-theme-1); padding: 0.35em 0.8em; - font-size: var(--sk-text-s); + font-family: var(--sk-font-ui); letter-spacing: 0.05em; font-weight: 600; white-space: nowrap; @@ -142,7 +142,6 @@ strong { text-align: left; - font-size: calc(0.04 * var(--width)); } .hero { diff --git a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte index 9ba251fb72..e9ed88f883 100644 --- a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte +++ b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte @@ -5,7 +5,7 @@
-
Go full-stack with
+

Go full-stack with

@@ -78,14 +78,9 @@ } .hero .tagline { - font-size: var(--sk-text-l); - font-weight: 200; - line-height: 1.2; + font-size: var(--sk-font-size-h2); color: var(--sk-text-2); - font-family: var(--sk-font-body); margin-bottom: 2rem; - /* max-width: 12em; */ - /* margin: 0 auto; */ } .logotype :global(svg) { diff --git a/apps/svelte.dev/src/routes/_home/Showcase.svelte b/apps/svelte.dev/src/routes/_home/Showcase.svelte index d880ff5a83..7329bcb9d0 100644 --- a/apps/svelte.dev/src/routes/_home/Showcase.svelte +++ b/apps/svelte.dev/src/routes/_home/Showcase.svelte @@ -39,8 +39,6 @@ h2 { color: white; margin-bottom: 1em; - text-transform: uppercase; - font-size: var(--sk-text-s); text-align: center; } @@ -81,7 +79,6 @@ backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.2s; - font-size: var(--sk-text-s); filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.5)); } diff --git a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte index 754bc4a0f2..e30648903c 100644 --- a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte +++ b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte @@ -58,12 +58,11 @@ diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte index fc7e16f4f1..6f22526df5 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte @@ -108,7 +108,7 @@ .controls span { display: block; - font-size: var(--sk-text-s); + font-size: var(--sk-font-size-ui-medium); text-transform: uppercase; font-weight: 400; font-family: var(--sk-font-ui); diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte index e653287548..1bbd29b9ce 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte @@ -11,7 +11,7 @@ diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 7107d235da..ed8fb1991a 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -65,23 +65,6 @@ ol, ul { margin: 1em 0; - font-size: var(--sk-text-m); - } - - /* TODO is this still used? don't think so */ - section { - max-width: var(--sk-line-max-width); - padding: 0 0 0 1rem; - - h2, - h3, - h4 { - margin-left: -1rem; - } - - a code { - color: inherit; - } } code { @@ -251,7 +234,6 @@ box-sizing: border-box; color: var(--sk-code-base); border-radius: var(--sk-border-radius); - font-size: var(--sk-text-s); overflow-x: auto; code { @@ -324,7 +306,7 @@ opacity: 0; transition: opacity 0.2s; - :where(h2, h3, h4, h5, h6):hover & { + :where(h2, h3):hover & { opacity: 1; } } @@ -371,7 +353,7 @@ } small { - font-size: var(--sk-text-s); + font-size: var(--sk-font-size-body-small); float: right; pointer-events: all; color: var(--sk-theme-1); @@ -410,12 +392,7 @@ p:first-child::before { content: 'Deprecated '; display: block; - /* text-transform: uppercase; */ font-style: normal; - /* font-family: var(--sk-font-ui); */ - font-size: var(--sk-text-m); - font-weight: 500; - /* color: var(--sk-text-4); */ } a { @@ -460,9 +437,9 @@ align-items: center; height: 3rem; color: var(--sk-text-4); - font-family: var(--sk-font-heading); + font-family: var(--sk-font-ui); font-style: normal; - font-size: var(--sk-text-xs); + font-size: var(--sk-font-size-ui-small); user-select: none; &:hover { diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte index 10a75e2331..caf177bb17 100644 --- a/packages/site-kit/src/lib/docs/DocsContents.svelte +++ b/packages/site-kit/src/lib/docs/DocsContents.svelte @@ -93,7 +93,7 @@ .section { display: block; padding-bottom: 0.8rem; - font-size: var(--sk-text-m); + font-size: var(--sk-font-size-h3); font-family: var(--sk-font-heading); font-weight: 500; color: var(--sk-text-1); @@ -101,7 +101,7 @@ .page { display: block; - font-size: var(--sk-text-s); + font-size: var(--sk-font-size-body-small); font-family: var(--sk-font-body); } diff --git a/packages/site-kit/src/lib/home/Blurb.svelte b/packages/site-kit/src/lib/home/Blurb.svelte index 540defa308..21096d3c21 100644 --- a/packages/site-kit/src/lib/home/Blurb.svelte +++ b/packages/site-kit/src/lib/home/Blurb.svelte @@ -36,11 +36,6 @@ grid-gap: 1rem; } - .grid :global(h2) { - font-size: var(--sk-text-xl); - line-height: 1.2; - } - .grid { display: grid; gap: 1em; @@ -52,10 +47,6 @@ } @media (min-width: 900px) { - .grid :global(h2) { - font-size: var(--sk-text-xl); - } - .grid { --columns: 3; diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/packages/site-kit/src/lib/home/Footer.svelte index 7c81b4c375..fe96d5df45 100644 --- a/packages/site-kit/src/lib/home/Footer.svelte +++ b/packages/site-kit/src/lib/home/Footer.svelte @@ -60,13 +60,13 @@ } footer h2 { - font-size: var(--sk-text-m); + font-size: var(--sk-font-size-h3); padding-bottom: 1rem; } .links a { color: var(--sk-text-2); - font-size: var(--sk-text-s); + font-size: var(--sk-font-size-body-small); display: block; line-height: 1.8; } diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte index 2589265659..6d9e3ef151 100644 --- a/packages/site-kit/src/lib/home/TrySection.svelte +++ b/packages/site-kit/src/lib/home/TrySection.svelte @@ -62,7 +62,6 @@ .try { width: 100%; margin: 0 auto; - font-size: var(--sk-text-m); color: var(--sk-text-1); } @@ -74,7 +73,6 @@ display: inline-block; width: 25rem; margin: 0 0 1rem; - font-size: var(--sk-text-xl); } @media (min-width: 900px) { diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte index aa8c13126e..882c845a54 100644 --- a/packages/site-kit/src/lib/home/TryTerminal.svelte +++ b/packages/site-kit/src/lib/home/TryTerminal.svelte @@ -50,11 +50,11 @@ padding-top: 0.4rem; align-items: center; justify-content: center; + font-family: var(--sk-font-ui); } .terminal pre { padding: 1em; - font-size: var(--sk-text-xs); } .line::before { @@ -70,16 +70,4 @@ .orange-highlight { color: hsl(15, 100%, 65%); } - - @media (min-width: 440px) { - .terminal pre { - font-size: var(--sk-text-s); - } - } - - @media (min-width: 1080px) { - .terminal pre { - font-size: var(--sk-text-m); - } - } diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index 466590f1fc..2682121958 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/packages/site-kit/src/lib/nav/Menu.svelte @@ -367,7 +367,7 @@ justify-content: start; gap: 1rem; - font-size: 0.9em; + font-size: var(--sk-font-size-ui-medium); color: var(--sk-text-3); background-color: var(--sk-back-3); @@ -430,10 +430,6 @@ padding-left: 1rem; } - .viewport :global(a[aria-current='true']) { - background-color: hsla(var(--sk-theme-1-hsl), 0.05); - } - .viewport :global(a:hover), .related-menu-arrow:hover { border-radius: var(--sk-border-radius); @@ -442,9 +438,4 @@ background-color: var(--sk-back-4); } - - .viewport :global(a[aria-current='true']:hover) { - background-color: hsla(var(--sk-theme-1-hsl), 0.05); - color: var(--sk-theme-1); - } diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 0c57109d6c..0787391c1c 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -253,7 +253,6 @@ Top navigation bar for the application. It provides a slot for the left side, th .appearance .caption { display: none; - font-size: var(--sk-text-xs); line-height: 1; margin-right: 0rem; } @@ -276,13 +275,12 @@ Top navigation bar for the application. It provides a slot for the left side, th position: relative; display: flex; padding: 1.5rem 0; + margin: 0 1rem; justify-content: space-between; } .appearance .caption { display: block; - - font-size: var(--sk-text-s); } nav :global(.large) { diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte index 5ad348201d..cd0ca6b15e 100644 --- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte +++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte @@ -34,28 +34,23 @@ {#if contents} {#each contents as { sections, title }, index}
-

{title}

+

{title}

{#if sections.length !== 0}
    {#each sections as { title, sections: subsections }}
  • {#if title} -

    +

    {title} -

    + {/if}
      - {#each subsections as { path, title, badge }} + {#each subsections as { path, title }}
    • {title} - - {#if badge} - - {badge} - {/if}
      • {/each} @@ -77,7 +72,7 @@ nav { padding: 0.29rem; padding-top: 0; - font-family: var(--sk-font-body); + font-family: var(--sk-font-ui); overflow-y: auto; height: 100%; @@ -86,7 +81,6 @@ section > ul { padding: 1rem; padding-bottom: 0rem; - margin-bottom: 0; } @@ -104,28 +98,25 @@ transform: translateX(2.5%); } - h3, - h4 { + h2, + h3 { display: block; padding-bottom: 0.8rem; - font-size: var(--sk-text-xs); + font-family: var(--sk-font-ui); + font-size: var(--sk-font-size-ui-medium); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--sk-text-3); } - h3 { + h2 { position: sticky; top: -1px; z-index: 1; - - font-size: var(--sk-text-s); - background-color: var(--sk-back-3); - width: 98%; padding: 1rem 1rem 1rem 4px; margin-left: 4px; @@ -147,9 +138,8 @@ display: flex; align-items: center; border-radius: var(--sk-border-radius); - line-height: 1; color: var(--sk-text-2); - padding: 0.9rem 0.75rem !important; + padding: 0 0.75rem !important; transition: 0.1s ease; transition-property: background-color, color; } @@ -160,23 +150,8 @@ } [aria-current='true'] { - background-color: hsla(var(--sk-theme-1-hsl), 0.1) !important; + /* background-color: hsla(var(--sk-theme-1-hsl), 0.1) !important; */ color: var(--sk-theme-1) !important; font-weight: 400; } - - .badge { - display: flex; - justify-content: center; - align-items: center; - padding: 0.5rem 0.75rem; - border-radius: 30px; - font-size: 1.1rem; - font-weight: 600; - letter-spacing: 1px; - 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/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte index 7fa74ef705..54dfeb23de 100644 --- a/packages/site-kit/src/lib/search/SearchBox.svelte +++ b/packages/site-kit/src/lib/search/SearchBox.svelte @@ -302,7 +302,7 @@ It appears when the user clicks on the `Search` component or presses the corresp } input { - font-size: var(--sk-text-l); + font-size: var(--sk-font-size-ui-large); width: 100%; padding: var(--padding) 5rem var(--padding) var(--padding); height: 6rem; @@ -344,6 +344,7 @@ It appears when the user clicks on the `Search` component or presses the corresp kbd { text-transform: uppercase; + font-size: var(--sk-font-size-ui-small); } } @@ -364,7 +365,8 @@ It appears when the user clicks on the `Search` component or presses the corresp .info { padding: var(--padding); font-family: var(--sk-font-ui); - font-size: 1.2rem; + font-size: var(--sk-font-size-ui-medium); + color: var(--sk-text-4); font-weight: normal; text-transform: uppercase; pointer-events: all; diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte index 728f35e258..1fcc98445c 100644 --- a/packages/site-kit/src/lib/search/SearchResultList.svelte +++ b/packages/site-kit/src/lib/search/SearchResultList.svelte @@ -83,7 +83,7 @@ color: var(--sk-text-4); text-transform: uppercase; padding: 0.5rem var(--padding); - font-size: var(--sk-text-xs); + font-size: var(--sk-font-size-ui-medium); z-index: 2; user-select: none; @@ -168,7 +168,7 @@ strong { width: 100%; overflow: hidden; - font-size: var(--sk-text-s); + font-size: var(--sk-font-size-ui-medium); color: var(--sk-text-2); span { @@ -178,7 +178,7 @@ content: ' • '; position: relative; color: var(--sk-text-4); - font-size: var(--sk-text-xs); + font-size: var(--sk-font-size-ui-small); top: -0.1rem; } } @@ -213,8 +213,7 @@ span { color: var(--sk-text-3); - font-size: var(--sk-text-xs); - color: #170a0a; + font-size: var(--sk-font-size-ui-small); margin: 0.4rem 0 0 0; } diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index 9800e8674f..de7fbe9740 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -18,7 +18,7 @@ body { } body { - font-size: var(--sk-text-s); + font-size: var(--sk-font-size-body-small); font-family: var(--sk-font-body); line-height: 1.5; color: var(--sk-text-2); @@ -48,6 +48,7 @@ body { p, ul, ol { + font-size: var(--sk-font-size-body); margin: 1em 0; } @@ -62,26 +63,19 @@ a:hover { text-decoration: underline; } -h6 { - font-size: var(--sk-text-xs); -} -h5 { - font-size: var(--sk-text-s); -} -h4 { - font-size: var(--sk-text-s); -} -h3 { - font-size: var(--sk-text-m); +h1 { + font-size: var(--sk-font-size-h1); } + h2 { - font-size: var(--sk-text-l); + font-size: var(--sk-font-size-h2); } -h1 { - font-size: var(--sk-text-xxl); + +h3 { + font-size: var(--sk-font-size-h3); } -:where(h1, h2, h3, h4, h5, h6) { +:where(h1, h2, h3) { position: relative; font-family: var(--sk-font-heading); font-weight: 500; @@ -95,12 +89,11 @@ strong { code, kbd { - font-size: var(--sk-text-xs); font-family: var(--sk-font-mono); - line-height: 1.7; } code { + font-size: var(--sk-font-size-code); position: relative; border-radius: 0.3em; white-space: nowrap; @@ -110,6 +103,7 @@ code { margin: 0 0.2rem; top: -0.1rem; background: var(--sk-back-4); + line-height: 1.7; } pre { @@ -137,7 +131,7 @@ blockquote { } blockquote :where(p, ul) { - font-size: var(--sk-text-s); + font-size: var(--sk-font-size-body-small); } blockquote :last-child { @@ -179,7 +173,7 @@ a { /* tables --------------------------------- */ table { width: 100%; - font-size: var(--sk-text-s); + font-size: var(--sk-font-size-body-small); } td, diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index f119e14e88..4e500d77ae 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -27,15 +27,18 @@ --sk-font-body: 'EB Garamond', 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif; --sk-font-heading: 'DM Serif Display'; --sk-font-mono: 'Fira Mono', monospace; - --sk-text-xxl: 3.6rem; - --sk-text-xl: 3rem; - --sk-text-l: 2.4rem; - --sk-text-m: 2.1rem; - --sk-text-s: 1.8rem; - --sk-text-xs: 1.4rem; - --sk-line-max-width: 84rem; - --sk-focus-outline: 0 0 0 2px hsla(var(--sk-theme-1-hsl), 0.6); + --sk-font-size-h1: 3.6rem; + --sk-font-size-h2: 3rem; + --sk-font-size-h3: 2.4rem; + --sk-font-size-body: 2.1rem; + --sk-font-size-body-small: 1.8rem; + --sk-font-size-ui-small: 1.4rem; + --sk-font-size-ui-medium: 1.8rem; + --sk-font-size-ui-large: 3rem; /* TODO add regular/small */ + --sk-font-size-code: 1.4rem; + + --sk-line-max-width: 84rem; /* Base colors */ --sk-theme-1-hsl: 12, 93%, 43%; @@ -136,8 +139,7 @@ @media screen and (min-width: 768px) { :root { - --sk-text-xxl: 5.4rem; - --sk-text-xl: 3.6rem; + --sk-font-size-h1: 5.4rem; --sk-page-padding-top: 8rem; --sk-page-padding-side: 4.8rem; }