diff --git a/apps/svelte.dev/src/lib/components/PageControls.svelte b/apps/svelte.dev/src/lib/components/PageControls.svelte index 41b946926f..df5f7c5624 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-border-medium); + border-top: 1px solid var(--sk-border); padding: 1rem 0 0 0; margin: 1rem 0 0 0; text-wrap: balance; diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte index 0def54f1d5..e55b23cd2a 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-border-medium); + border: 1px solid var(--sk-border); border-radius: var(--sk-border-radius); z-index: 2; font: var(--sk-font-ui-large); 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 49d392c6e5..768e2f6087 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-border-medium); + border: 1px solid var(--sk-border); border-radius: var(--sk-border-radius); color: currentColor; width: 0; diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte index 870ee987ec..9539e5f3ec 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-border-medium); + border-top: 1px solid var(--sk-border); } .top.offset { diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte index 22b640ad00..5934e7475d 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte @@ -74,7 +74,7 @@ input { flex: 1; padding: 0.2rem 0.6rem; - border: 1px solid var(--sk-border-medium); + border: 1px solid var(--sk-border); /* TODO this should apply to all buttons/inputs? */ border-radius: var(--sk-border-radius); color: var(--sk-fg-1); diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css index da56caaa70..372964e783 100644 --- a/packages/editor/src/lib/codemirror.css +++ b/packages/editor/src/lib/codemirror.css @@ -130,8 +130,8 @@ &.cm-panels-top, &.cm-panels-bottom { - border-top: 1px solid var(--sk-border-medium); - border-bottom: 1px solid var(--sk-border-medium); + border-top: 1px solid var(--sk-border); + border-bottom: 1px solid var(--sk-border); } .cm-panel { @@ -179,7 +179,7 @@ font: inherit; background: inherit; color: var(--sk-fg-1); - border: 1px solid var(--sk-border-medium); + border: 1px solid var(--sk-border); border-radius: var(--sk-border-radius); margin: 0; } diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte index 9cf2f65296..7bf8a90aaa 100644 --- a/packages/repl/src/lib/Input/ComponentSelector.svelte +++ b/packages/repl/src/lib/Input/ComponentSelector.svelte @@ -199,7 +199,7 @@ height: 1px; bottom: 0px; left: 0; - background-color: var(--sk-bg-4); + background-color: var(--sk-border); } } diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte index e55c2936d6..27c2ed7014 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-bg-4); + background-color: var(--sk-border); } } diff --git a/packages/repl/src/lib/Output/console/ConsoleTable.svelte b/packages/repl/src/lib/Output/console/ConsoleTable.svelte index 7c6c32ce50..ced50fc8eb 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-border-medium); + border: 1px solid var(--sk-border); border-radius: 2px; overscroll-behavior: none; } diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte index 2c20688ae9..e0112c14ba 100644 --- a/packages/repl/src/lib/Repl.svelte +++ b/packages/repl/src/lib/Repl.svelte @@ -234,10 +234,6 @@ } } - .divider::after { - background-color: var(--sk-bg-5); - } - [data-pane='main'] > .divider::after { height: calc(100% - var(--sk-pane-controls-height)); top: var(--sk-pane-controls-height); diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte index ab58584e88..7822a26191 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-5); + background: var(--sk-bg-4); 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 8b59e68c46..15fac1f5c0 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-border-medium); + border-top: 1px solid var(--sk-border); 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 2870b7313d..d75e61a900 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-border-medium); + border: 1px solid var(--sk-border); 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 353c96e0ea..1645d648b4 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-border-dark); + background: var(--sk-border); border: none; } } diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index df7248d052..a0689d170e 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -248,7 +248,7 @@ 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-bg-5); + box-shadow: inset 0 -1px 0 0 var(--sk-border); } &[aria-current='page'] { diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte index 9bcbf66ba6..7464177aa3 100644 --- a/packages/site-kit/src/lib/search/SearchBox.svelte +++ b/packages/site-kit/src/lib/search/SearchBox.svelte @@ -336,7 +336,7 @@ 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-border-dark); + border-bottom: 1px solid var(--sk-border); background: inherit; &::placeholder { diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css index d78c55301a..55d7597f31 100644 --- a/packages/site-kit/src/lib/styles/text.css +++ b/packages/site-kit/src/lib/styles/text.css @@ -14,7 +14,7 @@ padding-left: 1rem; border-radius: 0; box-shadow: none; - border-top: 1px solid var(--sk-bg-4); + border-top: 1px solid var(--sk-border); } .ts-block-property-details { diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index 266114e116..ae6f6566b9 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -15,6 +15,18 @@ --sk-fg-4: hsl(0, 0%, 45%); --sk-fg-accent: hsl(12, 93%, 43%); + /* Background colours */ + --sk-bg-1: hsl(0, 0%, 100%); + --sk-bg-2: hsl(0, 0%, 100%); + --sk-bg-3: hsl(0, 0%, 99%); + --sk-bg-4: hsl(0, 0%, 95%); + --sk-bg-accent: var(--sk-fg-accent); + --sk-bg-selection: hsla(204, 100%, 63%, 0.3); + + /* Border color — use this for all borders, except 'active' borders (e.g. current nav) which use `--sk-fg-accent` */ + --sk-border: hsl(0, 0%, 92%); + + /* Syntax highlighting — these come from `createCssVariablesTheme`, but are used elsewhere as well */ --shiki-color-text: var(--sk-fg-2); --shiki-token-constant: var(--shiki-color-text); --shiki-token-string: hsl(30, 100%, 30%); @@ -26,26 +38,9 @@ --shiki-token-punctuation: var(--shiki-color-text); --shiki-token-link: var(--shiki-token-keyword); - /* Background colours */ - --sk-bg-1: hsl(0, 0%, 100%); - --sk-bg-2: hsl(0, 0%, 100%); - --sk-bg-3: hsl(0, 0%, 99%); - --sk-bg-4: hsl(0, 0%, 95%); - --sk-bg-5: hsl(0, 0%, 92%); - --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)); - - /* overrides */ - --shiki-color-background: var(--sk-bg-2); } :root.dark { @@ -60,29 +55,24 @@ --sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%); --sk-fg-accent: hsl(12, 94%, 62%); - --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%); --sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%); --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-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); + /* Border colour */ + --sk-border: hsl(var(--sk-bg-hue), 15%, 25%); + + /* Syntax highlighting */ + --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%); /* Misc */ --sk-scrollbar: rgba(255, 255, 255, 0.3); --sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5)); - - /* overrides */ - --shiki-color-background: var(--sk-bg-3); } diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css index 67998a7ab2..90b6858292 100644 --- a/packages/site-kit/src/lib/styles/utils/buttons.css +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -1,22 +1,29 @@ :root { + --sk-raised-border: var(--sk-border); + --sk-raised-highlight: hsl(0, 0%, 95%); + --sk-raised-shadow: hsl(0, 0%, 86%); + /* 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-color: var(--sk-raised-highlight) var(--sk-raised-border) var(--sk-raised-border) + var(--sk-raised-highlight); + --sk-raised-hover-color: var(--sk-raised-border) var(--sk-raised-shadow) var(--sk-raised-shadow) + var(--sk-raised-border); + --sk-raised-active-color: var(--sk-raised-shadow) var(--sk-raised-border) var(--sk-raised-border) + var(--sk-raised-shadow); --sk-raised-width: 1px 2px 2px 1px; --sk-raised-active-width: 2px 1px 1px 2px; &.dark { + --sk-raised-highlight: hsl(var(--sk-bg-hue), 15%, 32%); + --sk-raised-shadow: 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); + --sk-raised-color: var(--sk-raised-border) var(--sk-raised-shadow) var(--sk-raised-shadow) + var(--sk-raised-border); + --sk-raised-hover-color: var(--sk-raised-highlight) var(--sk-raised-shadow) + var(--sk-raised-shadow) var(--sk-raised-highlight); + --sk-raised-active-color: var(--sk-raised-shadow) var(--sk-raised-highlight) + var(--sk-raised-highlight) var(--sk-raised-shadow); } } @@ -54,7 +61,7 @@ } &:disabled { - border-color: var(--sk-border-medium); + border-color: var(--sk-raised-border); border-width: 1px; } } diff --git a/packages/site-kit/src/lib/styles/utils/dividers.css b/packages/site-kit/src/lib/styles/utils/dividers.css index bca7ab4eb0..d080d2158c 100644 --- a/packages/site-kit/src/lib/styles/utils/dividers.css +++ b/packages/site-kit/src/lib/styles/utils/dividers.css @@ -1,6 +1,6 @@ .divider { z-index: 2; &::after { - background-color: var(--sk-bg-5) !important; + background-color: var(--sk-border) !important; } }