From ac34274e4a41c8b69925e8c1eecd0e451485b5a3 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 31 Oct 2024 22:53:51 -0400 Subject: [PATCH 1/8] rename border tokens --- .../src/lib/components/PageControls.svelte | 2 +- .../src/routes/(authed)/apps/+page.svelte | 2 +- .../playground/[id]/AppControls.svelte | 2 +- .../routes/tutorial/[...slug]/+page.svelte | 2 +- .../routes/tutorial/[...slug]/Chrome.svelte | 2 +- packages/editor/src/lib/codemirror.css | 4 +-- .../lib/Output/console/ConsoleTable.svelte | 2 +- packages/repl/src/lib/Repl.svelte | 4 --- .../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 | 2 +- .../src/lib/styles/tokens/colours.css | 12 ++++----- .../site-kit/src/lib/styles/utils/buttons.css | 26 +++++++++---------- .../src/lib/styles/utils/dividers.css | 2 +- 15 files changed, 32 insertions(+), 36 deletions(-) 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 f8504a81ae..6e30204a85 100644 --- a/packages/editor/src/lib/codemirror.css +++ b/packages/editor/src/lib/codemirror.css @@ -129,8 +129,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); } } 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/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..e4e3861647 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-shadow); border: none; } } diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte index 9bcbf66ba6..4102420f7f 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-shadow); background: inherit; &::placeholder { diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index 266114e116..71cd28ce2b 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -36,9 +36,9 @@ --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%); + --sk-border-highlight: hsl(0, 0%, 95%); + --sk-border: hsl(0, 0%, 92%); + --sk-border-shadow: hsl(0, 0%, 86%); /* Misc */ --sk-scrollbar: rgba(0, 0, 0, 0.3); @@ -75,9 +75,9 @@ --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); + --sk-border-highlight: hsl(var(--sk-bg-hue), 15%, 32%); + --sk-border: var(--sk-bg-5); + --sk-border-shadow: var(--sk-bg-3); /* Misc */ --sk-scrollbar: rgba(255, 255, 255, 0.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..947d3763ab 100644 --- a/packages/site-kit/src/lib/styles/utils/buttons.css +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -1,22 +1,22 @@ :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-color: var(--sk-border-highlight) var(--sk-border) var(--sk-border) + var(--sk-border-highlight); + --sk-raised-hover-color: var(--sk-border) var(--sk-border-shadow) var(--sk-border-shadow) + var(--sk-border); + --sk-raised-active-color: var(--sk-border-shadow) var(--sk-border) var(--sk-border) + var(--sk-border-shadow); --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); + --sk-raised-color: var(--sk-border) var(--sk-border-shadow) var(--sk-border-shadow) + var(--sk-border); + --sk-raised-hover-color: var(--sk-border-highlight) var(--sk-border-shadow) var(--sk-border-shadow) + var(--sk-border-highlight); + --sk-raised-active-color: var(--sk-border-shadow) var(--sk-border-highlight) var(--sk-border-highlight) + var(--sk-border-shadow); } } @@ -54,7 +54,7 @@ } &:disabled { - border-color: var(--sk-border-medium); + border-color: var(--sk-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; } } From 91cc08a26bc7e78a79b0bfc74c62106f6388cb2b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 1 Nov 2024 08:11:40 -0400 Subject: [PATCH 2/8] fix --- packages/editor/src/lib/codemirror.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css index a4a000c30b..372964e783 100644 --- a/packages/editor/src/lib/codemirror.css +++ b/packages/editor/src/lib/codemirror.css @@ -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; } From 6939537ed9a0159c0c7ee4215f135c28ca4148b6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 1 Nov 2024 08:16:08 -0400 Subject: [PATCH 3/8] get rid of --sk-bg-5 --- packages/site-kit/src/lib/components/Checkbox.svelte | 2 +- packages/site-kit/src/lib/nav/Nav.svelte | 2 +- packages/site-kit/src/lib/styles/tokens/colours.css | 4 +--- 3 files changed, 3 insertions(+), 5 deletions(-) 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/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/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index 71cd28ce2b..25fb6cca41 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -31,7 +31,6 @@ --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); @@ -71,12 +70,11 @@ --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-highlight: hsl(var(--sk-bg-hue), 15%, 32%); - --sk-border: var(--sk-bg-5); + --sk-border: hsl(var(--sk-bg-hue), 15%, 25%); --sk-border-shadow: var(--sk-bg-3); /* Misc */ From 18c6459e3f0b71aed7826362e3c78b16a7699e6f Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 1 Nov 2024 08:20:50 -0400 Subject: [PATCH 4/8] fix border usage --- packages/site-kit/src/lib/nav/MobileMenu.svelte | 2 +- packages/site-kit/src/lib/search/SearchBox.svelte | 2 +- packages/site-kit/src/lib/styles/tokens/colours.css | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte index e4e3861647..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-shadow); + background: var(--sk-border); border: none; } } diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte index 4102420f7f..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-shadow); + border-bottom: 1px solid var(--sk-border); background: inherit; &::placeholder { diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index 25fb6cca41..b1606b47c1 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -35,8 +35,8 @@ --sk-bg-selection: hsla(204, 100%, 63%, 0.3); /* Border colors */ - --sk-border-highlight: hsl(0, 0%, 95%); --sk-border: hsl(0, 0%, 92%); + --sk-border-highlight: hsl(0, 0%, 95%); --sk-border-shadow: hsl(0, 0%, 86%); /* Misc */ @@ -73,8 +73,8 @@ --sk-bg-accent: hsl(15, 100%, 35%); /* Border colours */ - --sk-border-highlight: hsl(var(--sk-bg-hue), 15%, 32%); --sk-border: hsl(var(--sk-bg-hue), 15%, 25%); + --sk-border-highlight: hsl(var(--sk-bg-hue), 15%, 32%); --sk-border-shadow: var(--sk-bg-3); /* Misc */ From 333d740bbcf9358eead62be2e1e42b2e426b48d7 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 1 Nov 2024 08:34:36 -0400 Subject: [PATCH 5/8] fixes --- packages/repl/src/lib/Input/ComponentSelector.svelte | 2 +- packages/repl/src/lib/Output/Output.svelte | 2 +- packages/site-kit/src/lib/styles/text.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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/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 { From f1f795694c5fe3433867325a0fda690961b19fbb Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 1 Nov 2024 09:18:56 -0400 Subject: [PATCH 6/8] move raised styles into buttons.css, add comment on usage --- .../src/lib/styles/tokens/colours.css | 8 ++--- .../site-kit/src/lib/styles/utils/buttons.css | 33 +++++++++++-------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index b1606b47c1..ee8f8e1f94 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -34,10 +34,8 @@ --sk-bg-accent: var(--sk-fg-accent); --sk-bg-selection: hsla(204, 100%, 63%, 0.3); - /* Border colors */ + /* 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%); - --sk-border-highlight: hsl(0, 0%, 95%); - --sk-border-shadow: hsl(0, 0%, 86%); /* Misc */ --sk-scrollbar: rgba(0, 0, 0, 0.3); @@ -72,10 +70,8 @@ --sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%); --sk-bg-accent: hsl(15, 100%, 35%); - /* Border colours */ + /* Border colour */ --sk-border: hsl(var(--sk-bg-hue), 15%, 25%); - --sk-border-highlight: hsl(var(--sk-bg-hue), 15%, 32%); - --sk-border-shadow: var(--sk-bg-3); /* Misc */ --sk-scrollbar: rgba(255, 255, 255, 0.3); diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css index 947d3763ab..7b56db2106 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-highlight) var(--sk-border) var(--sk-border) - var(--sk-border-highlight); - --sk-raised-hover-color: var(--sk-border) var(--sk-border-shadow) var(--sk-border-shadow) - var(--sk-border); - --sk-raised-active-color: var(--sk-border-shadow) var(--sk-border) var(--sk-border) - var(--sk-border-shadow); + --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) var(--sk-border-shadow) var(--sk-border-shadow) - var(--sk-border); - --sk-raised-hover-color: var(--sk-border-highlight) var(--sk-border-shadow) var(--sk-border-shadow) - var(--sk-border-highlight); - --sk-raised-active-color: var(--sk-border-shadow) var(--sk-border-highlight) var(--sk-border-highlight) - var(--sk-border-shadow); + --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); + border-color: var(--sk-raised-border); border-width: 1px; } } From 63e56a98b5de2554b6c428b9ad6f580982b4f88f Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 1 Nov 2024 09:22:19 -0400 Subject: [PATCH 7/8] prettier --- packages/site-kit/src/lib/styles/utils/buttons.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css index 7b56db2106..90b6858292 100644 --- a/packages/site-kit/src/lib/styles/utils/buttons.css +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -20,10 +20,10 @@ /* raised buttons */ --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); + --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); } } From 42f9e8d35a6d9c26d05b166ec8720df0a491c6d6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 1 Nov 2024 09:26:10 -0400 Subject: [PATCH 8/8] more --- .../src/lib/styles/tokens/colours.css | 42 +++++++++---------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css index ee8f8e1f94..ae6f6566b9 100644 --- a/packages/site-kit/src/lib/styles/tokens/colours.css +++ b/packages/site-kit/src/lib/styles/tokens/colours.css @@ -15,17 +15,6 @@ --sk-fg-4: hsl(0, 0%, 45%); --sk-fg-accent: hsl(12, 93%, 43%); - --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%); --sk-bg-2: hsl(0, 0%, 100%); @@ -37,12 +26,21 @@ /* 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%); + --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); + /* 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 { @@ -57,12 +55,6 @@ --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%); @@ -73,10 +65,14 @@ /* 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); }