From ae915f0787cc1bf6e33d736cf74350296a961968 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 30 Oct 2024 20:21:55 -0400 Subject: [PATCH 01/12] get rid of some unused junk --- .../src/lib/components/SelectIcon.svelte | 2 +- .../site-kit/src/lib/components/HoverMenu.svelte | 15 ++++----------- packages/site-kit/src/lib/components/Text.svelte | 8 -------- packages/site-kit/src/lib/styles/base.css | 3 +-- packages/site-kit/src/lib/styles/tokens.css | 7 +++---- 5 files changed, 9 insertions(+), 26 deletions(-) diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/SelectIcon.svelte index 31a43144c1..2c9de0580c 100644 --- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte +++ b/apps/svelte.dev/src/lib/components/SelectIcon.svelte @@ -20,7 +20,7 @@ position: relative; &:has(select:focus-visible) .raised.icon { - outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6); + outline: 2px solid var(--sk-theme-1); border-radius: var(--sk-border-radius); } diff --git a/packages/site-kit/src/lib/components/HoverMenu.svelte b/packages/site-kit/src/lib/components/HoverMenu.svelte index 8c2e3d3e6d..34d683d55f 100644 --- a/packages/site-kit/src/lib/components/HoverMenu.svelte +++ b/packages/site-kit/src/lib/components/HoverMenu.svelte @@ -10,27 +10,20 @@ diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte index 80b7cb2100..9259f891f2 100644 --- a/apps/svelte.dev/src/routes/blog/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/+page.svelte @@ -74,7 +74,7 @@ h2 { display: inline-block; - color: var(--sk-text-2); + color: var(--sk-fg-2); font: var(--sk-font-h3); } @@ -88,14 +88,14 @@ h2 { font: var(--sk-font-h1); - color: var(--sk-text-2); + color: var(--sk-fg-2); } } a { display: block; text-decoration: none; - color: var(--sk-text-2); + color: var(--sk-fg-2); &:hover h2 { text-decoration: underline; @@ -104,7 +104,7 @@ p { font: var(--sk-font-body-small); - color: var(--sk-text-3); + color: var(--sk-fg-3); margin: 0 0 0.5em 0; } } @@ -130,7 +130,7 @@ top: 0; font: var(--sk-font-ui-medium); text-transform: uppercase; - color: var(--sk-text-4); + color: var(--sk-fg-4); } } @@ -164,7 +164,7 @@ a { display: block; font: var(--sk-font-body); - color: var(--sk-text-2); + color: var(--sk-fg-2); } } } diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte index e8fbce5f9a..e4813de625 100644 --- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte @@ -47,7 +47,7 @@ } figcaption { - color: var(--sk-text-4); + color: var(--sk-fg-4); font: var(--sk-font-body-small); } } @@ -61,11 +61,11 @@ margin: 0 0 1em 1em; width: 16rem; z-index: 2; - color: var(--sk-text-4); + color: var(--sk-fg-4); font: var(--sk-font-body-small); p { - color: var(--sk-text-4); + color: var(--sk-fg-4); font: inherit; } } @@ -87,7 +87,7 @@ position: relative; border: none; height: 1px; - background: radial-gradient(circle at center, var(--sk-text-4), transparent); + background: radial-gradient(circle at center, var(--sk-fg-4), transparent); margin: 7rem 0; overflow: visible; @@ -99,8 +99,8 @@ left: 50%; top: 2px; transform: rotate(45deg) translate(-50%, -50%); - background: var(--sk-back-1); - border: 1px solid var(--sk-text-4); + background: var(--sk-bg-1); + border: 1px solid var(--sk-fg-4); } } } @@ -112,7 +112,7 @@ .standfirst { font: var(--sk-font-body-small); - color: var(--sk-text-3); + color: var(--sk-fg-3); margin: 0 0 1em 0; } diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte index 864415d7c7..6af1962320 100644 --- a/apps/svelte.dev/src/routes/docs/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/+page.svelte @@ -111,14 +111,14 @@ .options a { display: block; - color: var(--sk-text-2); + color: var(--sk-fg-2); margin: 1em -1.6rem; padding: 1.6rem; - background-color: var(--sk-back-1); + background-color: var(--sk-bg-1); border-radius: var(--sk-border-radius); &:hover { - background-color: var(--sk-back-2); + background-color: var(--sk-bg-2); filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1)); text-decoration: none; -webkit-transform: var(--safari-fix); diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte index fbf33ff853..4c3eed50f3 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte @@ -40,7 +40,7 @@ } .toc-container { - background: var(--sk-back-3); + background: var(--sk-bg-3); display: none; } diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte index 6c2ef53b9e..1dafc4f940 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/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte index 52ea0de260..7a171d9bde 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte @@ -369,7 +369,7 @@ /* we transform the default state, rather than the editor state, because otherwise the positioning of tooltips is wrong (doesn't take into account transforms) */ transform: translate(50%, 0); - border-top: 1px solid var(--sk-back-5); + border-top: 1px solid var(--sk-bg-5); } .top.offset { @@ -386,13 +386,13 @@ position: relative; min-height: 100%; height: 100%; - background: var(--sk-back-3); + background: var(--sk-bg-3); --menu-width: 5rem; } .navigator { position: relative; - background: var(--sk-back-2); + background: var(--sk-bg-2); display: flex; flex-direction: column; font: var(--sk-font-ui-small); @@ -405,7 +405,7 @@ .editor-container { position: relative; - background-color: var(--sk-back-3); + background-color: var(--sk-bg-3); } .mobile .navigator { diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte index 51bf179f68..259cd84b13 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte @@ -63,7 +63,7 @@ width: 100%; height: 4rem; display: flex; - border-top: 1px solid var(--sk-back-4); + border-top: 1px solid var(--sk-bg-4); padding: 0.2rem; gap: 0.2rem; } @@ -75,10 +75,10 @@ input { flex: 1; padding: 0.2rem 0.6rem; - border: 1px solid var(--sk-back-4); + border: 1px solid var(--sk-bg-4); /* TODO this should apply to all buttons/inputs? */ border-radius: var(--sk-border-radius); - color: var(--sk-text-1); + color: var(--sk-fg-1); font: var(--sk-font-ui-medium); height: 3.2rem; } diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte index 72946ce6d0..3f5d9888e1 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte @@ -87,7 +87,7 @@ span:not(:last-child)::after { content: ' / '; - color: var(--sk-text-4); + color: var(--sk-fg-4); font: var(--sk-font-ui-small); } } @@ -99,7 +99,7 @@ } option:disabled { - color: var(--sk-text-1); + color: var(--sk-fg-1); font-weight: bold; } diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte index 5311555407..f81adcef55 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte @@ -119,7 +119,7 @@ flex-direction: column; align-items: center; justify-content: center; - background: var(--sk-back-2); + background: var(--sk-bg-2); user-select: none; font: var(--sk-font-ui-small); } @@ -157,7 +157,7 @@ } button { - color: var(--sk-theme-1); + color: var(--sk-fg-accent); padding: 0 0 1px; position: relative; } @@ -168,12 +168,12 @@ small { font: var(--sk-font-ui-small); - color: var(--sk-text-3); + color: var(--sk-fg-3); text-transform: uppercase; } span { - color: var(--sk-text-3); + color: var(--sk-fg-3); } svg { @@ -184,6 +184,6 @@ :global(.dark) .loading { --faded: #444; --progress: #555; - --cutout: var(--sk-back-2); + --cutout: var(--sk-bg-2); } diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte index bc3ddd28d5..e3db87fee1 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte @@ -169,7 +169,7 @@ min-height: 0; height: 100%; max-height: 100%; - background: var(--sk-back-2); + background: var(--sk-bg-2); --menu-width: 5.4rem; } @@ -180,7 +180,7 @@ resize: none; box-sizing: border-box; border: none; - background: var(--sk-back-2); + background: var(--sk-bg-2); } .terminal { @@ -191,7 +191,7 @@ height: 80%; font: var(--sk-font-mono); padding: 1rem; - border-top: 1px solid var(--sk-text-4); + border-top: 1px solid var(--sk-fg-4); background: rgba(255, 255, 255, 0.5); transform: translate(0, 100%); -webkit-transform: translate3d(0, 100%, 0.01); diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte index 0b1ad018e2..e341b94c8c 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte @@ -63,7 +63,7 @@ min-height: 0; height: 100%; max-height: 100%; - background: var(--sk-back-2); + background: var(--sk-bg-2); --menu-width: 5.4rem; } @@ -75,8 +75,8 @@ height: 80%; font: var(--sk-font-mono); padding: 1rem; - background: var(--sk-back-1); - border-top: 1px solid var(--sk-text-4); + background: var(--sk-bg-1); + border-top: 1px solid var(--sk-fg-4); transform: translate(0, 100%); -webkit-transform: translate3d(0, 100%, 0.01); transition: transform 0.3s; diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte index 8dfdbe1054..b88621b2a2 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte @@ -116,7 +116,7 @@ .text { flex: 1 1 auto; padding: 2.2rem var(--sk-page-padding-side); - background: var(--sk-back-1); + background: var(--sk-bg-1); :global { [data-file], diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte index 4d99ec4d54..90f18514d5 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte @@ -51,8 +51,8 @@ ul { margin: 0; padding: 0; - background-color: var(--sk-back-3); - border: 1px solid var(--sk-theme-1); + background-color: var(--sk-bg-3); + border: 1px solid var(--sk-fg-accent); } li { @@ -61,11 +61,11 @@ width: 1fr; } li:hover { - background-color: var(--sk-theme-1-variant); + background-color: var(--sk-bg-accent); } button { - color: var(--sk-text-2); + color: var(--sk-fg-2); width: 100%; text-align: left; border: 0px; 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 cf5403c480..6925730db9 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte @@ -158,7 +158,7 @@ overflow-x: hidden; padding: 1rem 0rem; margin: 0; - background: var(--sk-back-3); + background: var(--sk-bg-3); list-style: none; } diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte index b916b7e94a..705fdcadcb 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte @@ -111,7 +111,7 @@ diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte index 2ebf9e0afe..406bfb85b0 100644 --- a/packages/repl/src/lib/Output/AstView.svelte +++ b/packages/repl/src/lib/Output/AstView.svelte @@ -92,7 +92,7 @@ --base: hsl(45, 7%, 45%); --string: hsl(41, 37%, 45%); --number: hsl(102, 27%, 50%); - background: var(--sk-back-3); + background: var(--sk-bg-3); color: var(--sk-code-base); display: flex; flex-direction: column; diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte index b16bdcd3e5..984c8c1ba9 100644 --- a/packages/repl/src/lib/Output/CompilerOptions.svelte +++ b/packages/repl/src/lib/Output/CompilerOptions.svelte @@ -43,7 +43,7 @@ padding: 0 10px; font-family: var(--sk-font-family-mono); font-size: 13px; - color: var(--sk-text-2); + color: var(--sk-fg-2); line-height: 1.8; } @@ -51,7 +51,7 @@ display: block; padding: 0 0 0 1.25em; white-space: nowrap; - color: var(--sk-text-3); + color: var(--sk-fg-3); user-select: none; } @@ -113,16 +113,16 @@ } input[type='radio'] + label:before { - background-color: var(--sk-text-4); + background-color: var(--sk-fg-4); border-radius: 100%; box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, 0.95); - border: 1px solid var(--sk-text-4); + border: 1px solid var(--sk-fg-4); } input[type='radio']:checked + label:before { - background-color: var(--sk-theme-1); + background-color: var(--sk-fg-accent); box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.95); - border: 1px solid var(--sk-text-4); + border: 1px solid var(--sk-fg-4); transition: box-shadow 0.2s ease-out; } diff --git a/packages/repl/src/lib/Output/ErrorOverlay.svelte b/packages/repl/src/lib/Output/ErrorOverlay.svelte index 7f7a4aa1fc..691a2169ab 100644 --- a/packages/repl/src/lib/Output/ErrorOverlay.svelte +++ b/packages/repl/src/lib/Output/ErrorOverlay.svelte @@ -30,19 +30,19 @@ display: flex; flex-direction: column; gap: 1em; - background: var(--sk-back-1); + background: var(--sk-bg-1); padding: 1em; - border-top: 4px solid var(--sk-theme-1); + border-top: 4px solid var(--sk-fg-accent); border-radius: 4px; filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.1)); } pre { padding: 0.5em; - background: var(--sk-back-3); + background: var(--sk-bg-3); } small { - color: var(--sk-text-4); + color: var(--sk-fg-4); } diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte index 4b353c6f13..e55c2936d6 100644 --- a/packages/repl/src/lib/Output/Output.svelte +++ b/packages/repl/src/lib/Output/Output.svelte @@ -157,7 +157,7 @@ height: 1px; bottom: 0px; left: 0; - background-color: var(--sk-back-4); + background-color: var(--sk-bg-4); } } @@ -170,13 +170,13 @@ border: none; border-bottom: 1px solid transparent; padding: 0 1rem; - color: var(--sk-text-2, #999); + color: var(--sk-fg-2, #999); border-radius: 0; } button.active { - border-bottom: 1px solid var(--sk-theme-1, --prime); - color: var(--sk-text-1, #333); + border-bottom: 1px solid var(--sk-fg-accent, --prime); + color: var(--sk-fg-1, #333); } div[slot] { diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte index 2fd61c030b..210a47de6f 100644 --- a/packages/repl/src/lib/Output/PaneWithPanel.svelte +++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte @@ -71,7 +71,7 @@ .panel-heading { font: var(--sk-font-ui-small); text-transform: uppercase; - color: var(--sk-text-1); + color: var(--sk-fg-1); flex: 1; text-align: left; } diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte index 8443011907..6659ba496c 100644 --- a/packages/repl/src/lib/Output/Viewer.svelte +++ b/packages/repl/src/lib/Output/Viewer.svelte @@ -329,7 +329,7 @@ diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte index 2137d76454..2c20688ae9 100644 --- a/packages/repl/src/lib/Repl.svelte +++ b/packages/repl/src/lib/Repl.svelte @@ -166,7 +166,7 @@
.divider::after { diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte index 436dc05a11..6e210b8761 100644 --- a/packages/site-kit/src/lib/components/Banner.svelte +++ b/packages/site-kit/src/lib/components/Banner.svelte @@ -62,7 +62,7 @@ overflow-y: auto; width: 100%; height: var(--sk-banner-height); - background: var(--sk-theme-1-variant); + background: var(--sk-bg-accent); color: white; padding: 0 4rem; } diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte index 6e54349421..fdd09a89b2 100644 --- a/packages/site-kit/src/lib/components/Checkbox.svelte +++ b/packages/site-kit/src/lib/components/Checkbox.svelte @@ -32,12 +32,12 @@ border-radius: 1em; top: 0; left: 0; - background: var(--sk-back-6); + background: var(--sk-bg-6); box-sizing: content-box; } input[type='checkbox']:checked::before { - background: var(--sk-theme-1); + background: var(--sk-fg-accent); } input[type='checkbox']::after { diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte index 841811ee08..246a143673 100644 --- a/packages/site-kit/src/lib/components/Dropdown.svelte +++ b/packages/site-kit/src/lib/components/Dropdown.svelte @@ -30,7 +30,7 @@ left: -1rem; /* this is a bit of a kludge, but it ensures a contiguous hit area (50% + 50%) while also working for tall links like `Docs` (50% + 1.5rem) */ top: calc(50% + min(50%, 1.5rem)); - background-color: var(--sk-back-2); + background-color: var(--sk-bg-2); z-index: 1; filter: var(--sk-shadow); border-radius: var(--sk-border-radius); diff --git a/packages/site-kit/src/lib/components/HoverMenu.svelte b/packages/site-kit/src/lib/components/HoverMenu.svelte index 34d683d55f..3587e71f27 100644 --- a/packages/site-kit/src/lib/components/HoverMenu.svelte +++ b/packages/site-kit/src/lib/components/HoverMenu.svelte @@ -15,7 +15,7 @@ :global { a, button { - color: var(--sk-text-2); + color: var(--sk-fg-2); padding: 1rem; display: block; font: var(--sk-font-ui-medium); @@ -28,7 +28,7 @@ a:hover, button:hover { - background-color: var(--sk-back-4); + background-color: var(--sk-bg-4); } } } diff --git a/packages/site-kit/src/lib/components/ModalOverlay.svelte b/packages/site-kit/src/lib/components/ModalOverlay.svelte index 38820c6651..fa22d3c661 100644 --- a/packages/site-kit/src/lib/components/ModalOverlay.svelte +++ b/packages/site-kit/src/lib/components/ModalOverlay.svelte @@ -22,6 +22,6 @@ width: 100%; height: 100%; height: 100dvh; - background: var(--sk-back-1); + background: var(--sk-bg-1); } diff --git a/packages/site-kit/src/lib/components/ScreenToggle.svelte b/packages/site-kit/src/lib/components/ScreenToggle.svelte index ae0efb46c3..3a9dd1bbed 100644 --- a/packages/site-kit/src/lib/components/ScreenToggle.svelte +++ b/packages/site-kit/src/lib/components/ScreenToggle.svelte @@ -41,16 +41,16 @@ justify-content: center; width: 100%; height: var(--sk-pane-controls-height); - border-top: 1px solid var(--sk-back-5); + border-top: 1px solid var(--sk-bg-5); font: var(--sk-font-ui-small); z-index: 2; } span { - color: var(--sk-text-4); + color: var(--sk-fg-4); } .active { - color: var(--sk-text-2); + color: var(--sk-fg-2); } diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index ef791fde8a..0387a1967b 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -107,17 +107,17 @@ padding: 0.2rem 0.4rem; margin: 0 0.2rem; top: -0.1rem; - background: var(--sk-back-4); + background: var(--sk-bg-4); } .code-block { position: relative; - background: var(--sk-back-2); - border: 1px solid var(--sk-back-5); + background: var(--sk-bg-2); + border: 1px solid var(--sk-bg-5); border-radius: var(--sk-border-radius); overflow: hidden; margin: calc(0.5 * var(--sk-line-height-body)) 0; - /* background: var(--sk-back-3); */ + /* background: var(--sk-bg-3); */ @media (min-width: 767px) { margin: var(--sk-line-height-body) 0; @@ -139,7 +139,7 @@ &:has(.filename) { position: relative; - background: var(--sk-back-3); + background: var(--sk-bg-3); padding-left: 1rem; } @@ -154,7 +154,7 @@ top: 0.1rem; flex: 1; font: var(--sk-font-ui-small); - color: var(--sk-text-3); + color: var(--sk-fg-3); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -186,7 +186,7 @@ align-items: center; font-size: 1.2rem; font-family: var(--sk-font-family-mono); - color: var(--sk-text-2); + color: var(--sk-fg-2); } &::before { @@ -295,7 +295,7 @@ } a:hover { - border-bottom: 1px solid var(--sk-theme-1); + border-bottom: 1px solid var(--sk-fg-accent); text-decoration: none; } @@ -382,7 +382,7 @@ position: absolute; top: 0.65em; left: -1.8rem; - background-color: var(--sk-text-4); + background-color: var(--sk-fg-4); width: 0.3em; height: 0.3em; border-radius: 50%; @@ -412,12 +412,12 @@ font: var(--sk-font-body-small); float: right; pointer-events: all; - color: var(--sk-theme-1); + color: var(--sk-fg-accent); cursor: pointer; } blockquote { - color: var(--sk-text-1); + color: var(--sk-fg-1); padding: 0 0 0 4.5rem; &.note, @@ -453,7 +453,7 @@ left: 0; top: 0; font-family: var(--sk-font-family-heading); - color: var(--sk-text-4); + color: var(--sk-fg-4); } @media (max-width: 767px) { @@ -513,12 +513,12 @@ display: flex; align-items: center; height: 3rem; - color: var(--sk-text-4); + color: var(--sk-fg-4); font: var(--sk-font-body-small); user-select: none; &:hover { - color: var(--sk-text-3); + color: var(--sk-fg-3); } .legacy &::after { diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte index 271750afc9..182d1358e1 100644 --- a/packages/site-kit/src/lib/docs/DocsContents.svelte +++ b/packages/site-kit/src/lib/docs/DocsContents.svelte @@ -58,7 +58,7 @@ nav { top: 0; left: 0; - color: var(--sk-text-3); + color: var(--sk-fg-3); position: relative; } @@ -86,7 +86,7 @@ transition: color 0.2s; border-bottom: none; padding: 0; - color: var(--sk-text-2); + color: var(--sk-fg-2); user-select: none; } @@ -100,7 +100,7 @@ } [aria-current='page'] { - color: var(--sk-theme-1); + color: var(--sk-fg-accent); text-decoration: underline; } @@ -133,7 +133,7 @@ height: var(--size); top: calc(1.4rem - var(--size) * 0.5); right: calc(-0.5 * var(--size)); - background-color: var(--sk-back-1); + background-color: var(--sk-bg-1); z-index: 2; position: absolute; rotate: 45deg; diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte index 5c82a7ba2d..6c4335fcd4 100644 --- a/packages/site-kit/src/lib/docs/Tooltip.svelte +++ b/packages/site-kit/src/lib/docs/Tooltip.svelte @@ -64,7 +64,7 @@ diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 5806d35b6f..df7248d052 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -188,7 +188,7 @@ Top navigation bar for the application. It provides a slot for the left side, th height: var(--sk-nav-height); margin: 0 auto; padding: 0 var(--sk-page-padding-side); - background-color: var(--sk-back-2); + background-color: var(--sk-bg-2); font-family: var(--sk-font-family-body); user-select: none; isolation: isolate; @@ -212,7 +212,7 @@ Top navigation bar for the application. It provides a slot for the left side, th .current-section { display: flex; align-items: center; - color: var(--sk-text-3); + color: var(--sk-fg-3); margin-left: 0.4em; font: var(--sk-font-ui-medium); } @@ -228,7 +228,7 @@ Top navigation bar for the application. It provides a slot for the left side, th } button { - color: var(--sk-text-3); + color: var(--sk-fg-3); } .links { @@ -237,7 +237,7 @@ Top navigation bar for the application. It provides a slot for the left side, th align-items: center; a { - color: var(--sk-text-2); + color: var(--sk-fg-2); font: var(--sk-font-ui-medium); white-space: nowrap; @@ -248,11 +248,11 @@ Top navigation bar for the application. It provides a slot for the left side, th outline-offset: -2px; &:hover { - box-shadow: inset 0 -1px 0 0 var(--sk-back-5); + box-shadow: inset 0 -1px 0 0 var(--sk-bg-5); } &[aria-current='page'] { - color: var(--sk-theme-1); + color: var(--sk-fg-accent); box-shadow: inset 0 -1px 0 0 currentColor; } @@ -315,7 +315,7 @@ Top navigation bar for the application. It provides a slot for the left side, th position: relative; display: none; width: 100%; - background: var(--sk-back-1); + background: var(--sk-bg-1); padding: 1rem var(--sk-page-padding-side); } diff --git a/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte b/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte index 06fa1d76ae..7364c29b4f 100644 --- a/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte +++ b/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte @@ -57,7 +57,7 @@ left: 0; top: 0; height: 100%; - background-color: var(--sk-theme-1); + background-color: var(--sk-fg-accent); transition: width 0.4s; } diff --git a/packages/site-kit/src/lib/nav/SkipLink.svelte b/packages/site-kit/src/lib/nav/SkipLink.svelte index bd608efa5b..50cffe2390 100644 --- a/packages/site-kit/src/lib/nav/SkipLink.svelte +++ b/packages/site-kit/src/lib/nav/SkipLink.svelte @@ -13,9 +13,9 @@ Accessibility helper component to skip to the main content diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte index 406bfb85b0..70540f2cf2 100644 --- a/packages/repl/src/lib/Output/AstView.svelte +++ b/packages/repl/src/lib/Output/AstView.svelte @@ -93,7 +93,7 @@ --string: hsl(41, 37%, 45%); --number: hsl(102, 27%, 50%); background: var(--sk-bg-3); - color: var(--sk-code-base); + color: var(--shiki-color-text); display: flex; flex-direction: column; } diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte index 984c8c1ba9..449f829f28 100644 --- a/packages/repl/src/lib/Output/CompilerOptions.svelte +++ b/packages/repl/src/lib/Output/CompilerOptions.svelte @@ -61,7 +61,7 @@ } .string { - color: var(--sk-code-string); + color: var(--shiki-token-string); } label { @@ -69,7 +69,7 @@ } label[for] { - color: var(--sk-code-string); + color: var(--shiki-token-string); } label :global(input[type='checkbox']) { diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte index bb286e07e8..1c80401e8e 100644 --- a/packages/repl/src/lib/Output/console/Console.svelte +++ b/packages/repl/src/lib/Output/console/Console.svelte @@ -35,7 +35,7 @@ --error-border: rgb(242, 214, 219); --warning-bg: rgb(254, 251, 218); --warning-border: rgb(242, 232, 163); - --json-tree-string-color: var(--sk-code-string); + --json-tree-string-color: var(--shiki-token-string); --json-tree-font-family: var(--sk-font-family-mono); :global(.dark) & { diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 0387a1967b..61d9cd4996 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -281,7 +281,7 @@ width: 100%; padding: 0.7rem 1rem; box-sizing: border-box; - color: var(--sk-code-base); + color: var(--shiki-color-text); border-radius: var(--sk-border-radius); overflow-x: auto; diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index cb3984d5ab..8f952595ec 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -8,7 +8,6 @@ import * as marked from 'marked'; import { codeToHtml, createCssVariablesTheme } from 'shiki'; import { transformerTwoslash } from '@shikijs/twoslash'; import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils'; -import { fileURLToPath } from 'node:url'; interface SnippetOptions { file: string | null; @@ -24,9 +23,7 @@ const METADATA_REGEX = const theme = createCssVariablesTheme({ name: 'css-variables', - variablePrefix: '--shiki-', - variableDefaults: {}, - fontStyle: true + variablePrefix: '--shiki-' }); // Hash the contents of this file and its dependencies so that we get a new cache in case we have changed diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index 060d7d0b4b..cf3909368c 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -15,26 +15,16 @@ --sk-fg-4: hsl(0, 0%, 45%); --sk-fg-accent: hsl(12, 93%, 43%); - --sk-code-base: var(--sk-fg-2); - --sk-code-comment: var(--sk-fg-4); - --sk-code-keyword: hsl(204, 100%, 38%); - --sk-code-function: var(--sk-fg-accent); - --sk-code-string: hsl(30, 100%, 30%); - --sk-code-number: hsl(120, 100%, 25%); - --sk-code-template-string: hsl(2, 80%, 47%); - --sk-code-tags: var(--sk-code-function); - --sk-code-important: var(--sk-code-string); - - --shiki-color-text: var(--sk-code-base); - --shiki-token-constant: var(--sk-code-base); - --shiki-token-string: var(--sk-code-string); - --shiki-token-comment: var(--sk-code-comment); - --shiki-token-keyword: var(--sk-code-keyword); - --shiki-token-parameter: var(--sk-code-base); - --shiki-token-function: var(--sk-code-function); - --shiki-token-string-expression: var(--sk-code-string); - --shiki-token-punctuation: var(--sk-code-base); - --shiki-token-link: var(--sk-code-keyword); + --shiki-color-text: var(--sk-fg-2); + --shiki-token-constant: var(--shiki-color-text); + --shiki-token-string: hsl(30, 100%, 30%); + --shiki-token-comment: var(--sk-fg-4); + --shiki-token-keyword: hsl(204, 100%, 38%); + --shiki-token-parameter: var(--shiki-color-text); + --shiki-token-function: var(--sk-fg-accent); + --shiki-token-string-expression: var(--shiki-token-string); + --shiki-token-punctuation: var(--shiki-color-text); + --shiki-token-link: var(--shiki-token-keyword); /* Background colours */ --sk-bg-1: hsl(0, 0%, 100%); @@ -43,8 +33,8 @@ --sk-bg-4: hsl(0, 0%, 95%); --sk-bg-5: hsl(0, 0%, 92%); --sk-bg-6: hsl(0, 0%, 86%); - --sk-bg-selection: hsla(204, 100%, 63%, 0.3); --sk-bg-accent: var(--sk-fg-accent); + --sk-bg-selection: hsla(204, 100%, 63%, 0.3); /* Border colors */ @@ -78,15 +68,11 @@ --sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%); --sk-fg-accent: hsl(12, 94%, 62%); - --sk-code-base: hsl(45, 7%, 75%); - --sk-code-comment: hsl(0, 0%, 55%); - --sk-code-keyword: hsl(204, 88%, 65%); - --sk-code-function: hsl(19, 67%, 75%); - --sk-code-string: hsl(41, 37%, 68%); - --sk-code-number: hsl(120, 100%, 25%); - --sk-code-template-string: hsl(2, 80%, 47%); - --sk-code-tags: var(--sk-code-function); - --sk-code-important: var(--sk-code-string); + --shiki-color-text: hsl(45, 7%, 75%); + --shiki-token-comment: hsl(0, 0%, 55%); + --shiki-token-keyword: hsl(204, 88%, 65%); + --shiki-token-function: hsl(19, 67%, 75%); + --shiki-token-string: hsl(41, 37%, 68%); /* Background colours */ --sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%); From 8051e3992f78ef7d3f69b43836b61a28f25c4e60 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 30 Oct 2024 21:36:04 -0400 Subject: [PATCH 09/12] revert --- .../content/docs/kit/10-getting-started/10-introduction.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md index 6983caf52b..d1a5ca1695 100644 --- a/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md +++ b/apps/svelte.dev/content/docs/kit/10-getting-started/10-introduction.md @@ -2,11 +2,6 @@ title: Introduction --- -```js -const number = 42; // wheee -const boolean = true; // wheee -``` - ## Before we begin > [!NOTE] If you're new to Svelte or SvelteKit we recommend checking out the [interactive tutorial](/tutorial/kit). From 0cdc719d2b17436875188ce6deb1cc925f182b6e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 30 Oct 2024 22:03:39 -0400 Subject: [PATCH 10/12] separate background colors from borders --- .../src/routes/(authed)/apps/+page.svelte | 2 +- .../routes/tutorial/[...slug]/+page.svelte | 2 +- .../tutorial/[...slug]/filetree/Item.svelte | 2 +- packages/editor/src/lib/codemirror.css | 6 ++-- .../src/lib/components/Checkbox.svelte | 2 +- .../src/lib/components/ScreenToggle.svelte | 2 +- .../site-kit/src/lib/components/Text.svelte | 2 +- .../site-kit/src/lib/nav/MobileMenu.svelte | 2 +- .../site-kit/src/lib/search/SearchBox.svelte | 6 +--- .../src/lib/styles/tokens/colours.css | 28 ++++++++++++------- .../site-kit/src/lib/styles/utils/buttons.css | 2 +- 11 files changed, 30 insertions(+), 26 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte index 47628b2736..0def54f1d5 100644 --- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte +++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte @@ -209,7 +209,7 @@ padding: 0.5rem 1rem; line-height: 1; display: flex; - border: 1px solid var(--sk-bg-5); + border: 1px solid var(--sk-border-medium); border-radius: var(--sk-border-radius); z-index: 2; font: var(--sk-font-ui-large); diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte index 7a171d9bde..870ee987ec 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte @@ -369,7 +369,7 @@ /* we transform the default state, rather than the editor state, because otherwise the positioning of tooltips is wrong (doesn't take into account transforms) */ transform: translate(50%, 0); - border-top: 1px solid var(--sk-bg-5); + border-top: 1px solid var(--sk-border-medium); } .top.offset { diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte index 705fdcadcb..e1cd06bca7 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte @@ -143,7 +143,7 @@ background: var(--sk-bg-1); color: var(--sk-fg-1) !important; margin: 0 0.5rem 0 calc(0.5rem + var(--inset)); - border: 1px solid var(--sk-bg-5); + border: 2px solid transparent; padding: 0 0.5rem; font: inherit; } diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css index 3564ab8d06..b7fc35260a 100644 --- a/packages/editor/src/lib/codemirror.css +++ b/packages/editor/src/lib/codemirror.css @@ -36,7 +36,7 @@ } .cm-activeLine { - background: var(--sk-bg-translucent); + background: var(--sk-bg-3); } .cm-activeLineGutter { @@ -124,8 +124,8 @@ &.cm-panels-top, &.cm-panels-bottom { - border-top: 1px solid var(--sk-bg-5); - border-bottom: 1px solid var(--sk-bg-5); + border-top: 1px solid var(--sk-border-medium); + border-bottom: 1px solid var(--sk-border-medium); } } diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte index fdd09a89b2..ab58584e88 100644 --- a/packages/site-kit/src/lib/components/Checkbox.svelte +++ b/packages/site-kit/src/lib/components/Checkbox.svelte @@ -32,7 +32,7 @@ border-radius: 1em; top: 0; left: 0; - background: var(--sk-bg-6); + background: var(--sk-bg-5); box-sizing: content-box; } diff --git a/packages/site-kit/src/lib/components/ScreenToggle.svelte b/packages/site-kit/src/lib/components/ScreenToggle.svelte index 3a9dd1bbed..8b59e68c46 100644 --- a/packages/site-kit/src/lib/components/ScreenToggle.svelte +++ b/packages/site-kit/src/lib/components/ScreenToggle.svelte @@ -41,7 +41,7 @@ justify-content: center; width: 100%; height: var(--sk-pane-controls-height); - border-top: 1px solid var(--sk-bg-5); + border-top: 1px solid var(--sk-border-medium); font: var(--sk-font-ui-small); z-index: 2; } diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 61d9cd4996..2870b7313d 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -113,7 +113,7 @@ .code-block { position: relative; background: var(--sk-bg-2); - border: 1px solid var(--sk-bg-5); + border: 1px solid var(--sk-border-medium); border-radius: var(--sk-border-radius); overflow: hidden; margin: calc(0.5 * var(--sk-line-height-body)) 0; diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte index cccdda8eb5..353c96e0ea 100644 --- a/packages/site-kit/src/lib/nav/MobileMenu.svelte +++ b/packages/site-kit/src/lib/nav/MobileMenu.svelte @@ -332,7 +332,7 @@ hr { margin: 0.5rem 0; height: 1px; - background: var(--sk-bg-6); + background: var(--sk-border-dark); border: none; } } diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte index 2f033b97ac..919532364d 100644 --- a/packages/site-kit/src/lib/search/SearchBox.svelte +++ b/packages/site-kit/src/lib/search/SearchBox.svelte @@ -336,13 +336,9 @@ It appears when the user clicks on the `Search` component or presses the corresp border: none; flex-shrink: 0; color: var(--sk-fg-1); - border-bottom: 1px solid var(--sk-bg-6); + border-bottom: 1px solid var(--sk-border-dark); background: inherit; - &::selection { - background-color: var(--sk-bg-translucent); - } - &::placeholder { color: var(--sk-fg-2); opacity: 0.3; diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index cf3909368c..46b5ff287c 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -32,24 +32,28 @@ --sk-bg-3: hsl(0, 0%, 99%); --sk-bg-4: hsl(0, 0%, 95%); --sk-bg-5: hsl(0, 0%, 92%); - --sk-bg-6: hsl(0, 0%, 86%); --sk-bg-accent: var(--sk-fg-accent); --sk-bg-selection: hsla(204, 100%, 63%, 0.3); /* Border colors */ + --sk-border-light: hsl(0, 0%, 95%); + --sk-border-medium: hsl(0, 0%, 92%); + --sk-border-dark: hsl(0, 0%, 86%); /* Misc */ --sk-scrollbar: rgba(0, 0, 0, 0.3); --sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1)); - --sk-bg-translucent: hsla(0, 0%, 0%, 0.1); /* overrides */ --shiki-color-background: var(--sk-bg-2); /* raised buttons */ - --sk-raised-color: var(--sk-bg-4) var(--sk-bg-5) var(--sk-bg-5) var(--sk-bg-4); - --sk-raised-hover-color: var(--sk-bg-5) var(--sk-bg-6) var(--sk-bg-6) var(--sk-bg-5); - --sk-raised-active-color: var(--sk-bg-6) var(--sk-bg-5) var(--sk-bg-5) var(--sk-bg-6); + --sk-raised-color: var(--sk-border-light) var(--sk-border-medium) var(--sk-border-medium) + var(--sk-border-light); + --sk-raised-hover-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark) + var(--sk-border-medium); + --sk-raised-active-color: var(--sk-border-dark) var(--sk-border-medium) var(--sk-border-medium) + var(--sk-border-dark); /* TODO move these somewhere else? */ --sk-raised-width: 1px 2px 2px 1px; @@ -80,21 +84,25 @@ --sk-bg-3: hsl(var(--sk-bg-hue), 15%, 12%); --sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%); --sk-bg-5: hsl(var(--sk-bg-hue), 15%, 25%); - --sk-bg-6: hsl(var(--sk-bg-hue), 15%, 32%); --sk-bg-accent: hsl(15, 100%, 35%); /* Border colours */ + --sk-border-light: hsl(var(--sk-bg-hue), 15%, 32%); + --sk-border-medium: var(--sk-bg-5); + --sk-border-dark: var(--sk-bg-3); /* Misc */ --sk-scrollbar: rgba(255, 255, 255, 0.3); --sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5)); - --sk-bg-translucent: hsla(0, 0%, 100%, 0.1); /* overrides */ --shiki-color-background: var(--sk-bg-3); /* raised buttons */ - --sk-raised-color: var(--sk-bg-5) var(--sk-bg-3) var(--sk-bg-3) var(--sk-bg-5); - --sk-raised-hover-color: var(--sk-bg-6) var(--sk-bg-3) var(--sk-bg-3) var(--sk-bg-6); - --sk-raised-active-color: var(--sk-bg-3) var(--sk-bg-6) var(--sk-bg-6) var(--sk-bg-3); + --sk-raised-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark) + var(--sk-border-medium); + --sk-raised-hover-color: var(--sk-border-light) var(--sk-border-dark) var(--sk-border-dark) + var(--sk-border-light); + --sk-raised-active-color: var(--sk-border-dark) var(--sk-border-light) var(--sk-border-light) + var(--sk-border-dark); } diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css index ea0c470463..4da4631851 100644 --- a/packages/site-kit/src/lib/styles/utils/buttons.css +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -32,7 +32,7 @@ } &:disabled { - border-color: var(--sk-bg-5); + border-color: var(--sk-border-light); border-width: 1px; } } From 44f06ea68dc3ee0d7f131dc6beb3e00a5ea29d65 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 30 Oct 2024 22:09:47 -0400 Subject: [PATCH 11/12] more border stuff --- apps/svelte.dev/src/lib/components/PageControls.svelte | 2 +- .../src/routes/(authed)/playground/[id]/AppControls.svelte | 2 +- apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte | 3 +-- packages/repl/src/lib/Output/console/ConsoleTable.svelte | 2 +- packages/site-kit/src/lib/styles/utils/buttons.css | 2 +- 5 files changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/svelte.dev/src/lib/components/PageControls.svelte b/apps/svelte.dev/src/lib/components/PageControls.svelte index 05e400985e..41b946926f 100644 --- a/apps/svelte.dev/src/lib/components/PageControls.svelte +++ b/apps/svelte.dev/src/lib/components/PageControls.svelte @@ -61,7 +61,7 @@ .controls { max-width: calc(var(--sk-page-content-width) + 1rem); - border-top: 1px solid var(--sk-bg-4); + border-top: 1px solid var(--sk-border-medium); padding: 1rem 0 0 0; margin: 1rem 0 0 0; text-wrap: balance; 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 fead60ec93..49d392c6e5 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -303,7 +303,7 @@ input { background: transparent; - border: 1px solid var(--sk-bg-4); + border: 1px solid var(--sk-border-medium); border-radius: var(--sk-border-radius); color: currentColor; width: 0; diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte index 259cd84b13..22b640ad00 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte @@ -63,7 +63,6 @@ width: 100%; height: 4rem; display: flex; - border-top: 1px solid var(--sk-bg-4); padding: 0.2rem; gap: 0.2rem; } @@ -75,7 +74,7 @@ input { flex: 1; padding: 0.2rem 0.6rem; - border: 1px solid var(--sk-bg-4); + border: 1px solid var(--sk-border-medium); /* TODO this should apply to all buttons/inputs? */ border-radius: var(--sk-border-radius); color: var(--sk-fg-1); diff --git a/packages/repl/src/lib/Output/console/ConsoleTable.svelte b/packages/repl/src/lib/Output/console/ConsoleTable.svelte index 42dfa3b33a..7c6c32ce50 100644 --- a/packages/repl/src/lib/Output/console/ConsoleTable.svelte +++ b/packages/repl/src/lib/Output/console/ConsoleTable.svelte @@ -96,7 +96,7 @@ margin: 8px; overflow: auto; max-height: 200px; - border: 1px solid var(--sk-bg-4); + border: 1px solid var(--sk-border-medium); border-radius: 2px; overscroll-behavior: none; } diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css index 4da4631851..b10fcc384b 100644 --- a/packages/site-kit/src/lib/styles/utils/buttons.css +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -32,7 +32,7 @@ } &:disabled { - border-color: var(--sk-border-light); + border-color: var(--sk-border-medium); border-width: 1px; } } From b67932a9b6dcbf988507f22a0ceb29bac9b686da Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 31 Oct 2024 09:39:36 -0400 Subject: [PATCH 12/12] move --sk-raised tokens into buttons.css --- .../src/lib/styles/tokens/colours.css | 20 ----------------- .../site-kit/src/lib/styles/utils/buttons.css | 22 +++++++++++++++++++ 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index 46b5ff287c..266114e116 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -46,18 +46,6 @@ /* overrides */ --shiki-color-background: var(--sk-bg-2); - - /* raised buttons */ - --sk-raised-color: var(--sk-border-light) var(--sk-border-medium) var(--sk-border-medium) - var(--sk-border-light); - --sk-raised-hover-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark) - var(--sk-border-medium); - --sk-raised-active-color: var(--sk-border-dark) var(--sk-border-medium) var(--sk-border-medium) - var(--sk-border-dark); - - /* TODO move these somewhere else? */ - --sk-raised-width: 1px 2px 2px 1px; - --sk-raised-active-width: 2px 1px 1px 2px; } :root.dark { @@ -97,12 +85,4 @@ /* overrides */ --shiki-color-background: var(--sk-bg-3); - - /* raised buttons */ - --sk-raised-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark) - var(--sk-border-medium); - --sk-raised-hover-color: var(--sk-border-light) var(--sk-border-dark) var(--sk-border-dark) - var(--sk-border-light); - --sk-raised-active-color: var(--sk-border-dark) var(--sk-border-light) var(--sk-border-light) - var(--sk-border-dark); } diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css index b10fcc384b..67998a7ab2 100644 --- a/packages/site-kit/src/lib/styles/utils/buttons.css +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -1,3 +1,25 @@ +:root { + /* raised buttons */ + --sk-raised-color: var(--sk-border-light) var(--sk-border-medium) var(--sk-border-medium) + var(--sk-border-light); + --sk-raised-hover-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark) + var(--sk-border-medium); + --sk-raised-active-color: var(--sk-border-dark) var(--sk-border-medium) var(--sk-border-medium) + var(--sk-border-dark); + --sk-raised-width: 1px 2px 2px 1px; + --sk-raised-active-width: 2px 1px 1px 2px; + + &.dark { + /* raised buttons */ + --sk-raised-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark) + var(--sk-border-medium); + --sk-raised-hover-color: var(--sk-border-light) var(--sk-border-dark) var(--sk-border-dark) + var(--sk-border-light); + --sk-raised-active-color: var(--sk-border-dark) var(--sk-border-light) var(--sk-border-light) + var(--sk-border-dark); + } +} + .raised { border-radius: var(--sk-border-radius); border-style: solid;