separate background colors from borders

Author: Rich-Harris

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);

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 {

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;
 	}

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);
 		}
 	}
 

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;
 	}
 

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;
 	}

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;

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;
 		}
 	}

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;

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);
 }