More token tweaks (#751)

Rich-Harris · web-flow · commit 51094bb39a29 · 2024-11-01T09:44:11.000-04:00
* rename border tokens

* fix

* get rid of --sk-bg-5

* fix border usage

* fixes

* move raised styles into buttons.css, add comment on usage

* prettier

* more
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 .divider {
 	z-index: 2;
 	&::after {
-		background-color: var(--sk-bg-5) !important;
+		background-color: var(--sk-border) !important;
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -369,7 +369,7 @@`
`369`	`369`	`/* we transform the default state, rather than the editor state, because otherwise`
`370`	`370`	`the positioning of tooltips is wrong (doesn't take into account transforms) */`
`371`	`371`	`transform: translate(50%, 0);`
`372`		`- border-top: 1px solid var(--sk-border-medium);`
	`372`	`+ border-top: 1px solid var(--sk-border);`
`373`	`373`	`}`
`374`	`374`
`375`	`375`	`.top.offset {`
Original file line number	Diff line number	Diff line change
`@@ -199,7 +199,7 @@`
`199`	`199`	`height: 1px;`
`200`	`200`	`bottom: 0px;`
`201`	`201`	`left: 0;`
`202`		`- background-color: var(--sk-bg-4);`
	`202`	`+ background-color: var(--sk-border);`
`203`	`203`	`}`
`204`	`204`	`}`
`205`	`205`
Original file line number	Diff line number	Diff line change
`@@ -157,7 +157,7 @@`
`157`	`157`	`height: 1px;`
`158`	`158`	`bottom: 0px;`
`159`	`159`	`left: 0;`
`160`		`- background-color: var(--sk-bg-4);`
	`160`	`+ background-color: var(--sk-border);`
`161`	`161`	`}`
`162`	`162`	`}`
`163`	`163`
Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@`
`96`	`96`	`margin: 8px;`
`97`	`97`	`overflow: auto;`
`98`	`98`	`max-height: 200px;`
`99`		`- border: 1px solid var(--sk-border-medium);`
	`99`	`+ border: 1px solid var(--sk-border);`
`100`	`100`	`border-radius: 2px;`
`101`	`101`	`overscroll-behavior: none;`
`102`	`102`	`}`
Original file line number	Diff line number	Diff line change
`@@ -234,10 +234,6 @@`
`234`	`234`	`}`
`235`	`235`	`}`
`236`	`236`
`237`		`- .divider::after {`
`238`		`- background-color: var(--sk-bg-5);`
`239`		`- }`
`240`		`-`
`241`	`237`	`[data-pane='main'] > .divider::after {`
`242`	`238`	`height: calc(100% - var(--sk-pane-controls-height));`
`243`	`239`	`top: var(--sk-pane-controls-height);`