rename border tokens

Rich-Harris · Rich-Harris · commit ac34274e4a41 · 2024-10-31T22:53:51.000-04:00
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
@@ -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
@@ -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/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-shadow);
 			border: none;
 		}
 	}
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-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
@@ -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
@@ -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
@@ -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
`@@ -129,8 +129,8 @@`
`129`	`129`
`130`	`130`	`&.cm-panels-top,`
`131`	`131`	`&.cm-panels-bottom {`
`132`		`- border-top: 1px solid var(--sk-border-medium);`
`133`		`- border-bottom: 1px solid var(--sk-border-medium);`
	`132`	`+ border-top: 1px solid var(--sk-border);`
	`133`	`+ border-bottom: 1px solid var(--sk-border);`
`134`	`134`	`}`
`135`	`135`	`}`
`136`	`136`
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);`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@`
`41`	`41`	`justify-content: center;`
`42`	`42`	`width: 100%;`
`43`	`43`	`height: var(--sk-pane-controls-height);`
`44`		`- border-top: 1px solid var(--sk-border-medium);`
	`44`	`+ border-top: 1px solid var(--sk-border);`
`45`	`45`	`font: var(--sk-font-ui-small);`
`46`	`46`	`z-index: 2;`
`47`	`47`	`}`