banish --sk-theme-3

Author: Rich-Harris

apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte

@@ -77,8 +77,8 @@
 	a:focus-visible,
 	button:focus-visible,
 	input:focus-visible {
-		outline: none;
-		border: 2px solid var(--sk-theme-3);
+		border-radius: var(--sk-border-radius);
+		outline-offset: -2px;
 	}
 
 	.icon,

apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte

@@ -378,8 +378,8 @@
 
 	li button {
 		position: relative;
-
 		display: flex;
+		width: 100%;
 		gap: 0.5rem;
 	}
 
@@ -403,8 +403,8 @@
 
 	a:focus-visible,
 	.exercises button:focus-visible {
-		outline: none;
-		border: 2px solid var(--sk-theme-3);
+		outline-offset: -2px;
+		border-radius: var(--sk-border-radius);
 	}
 
 	@media screen and (max-width: 800px) {

apps/svelte.dev/src/routes/tutorial/[slug]/ToggleButton.svelte

@@ -39,10 +39,6 @@
 		border: transparent;
 	}
 
-	button:focus-visible {
-		outline: 2px solid var(--sk-theme-3);
-	}
-
 	button::before {
 		content: '';
 		position: absolute;

apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css

@@ -57,13 +57,6 @@
 	color: var(--sk-text-2);
 }
 
-.cm-editor.cm-focused .cm-selectionBackground,
-.cm-editor .cm-selectionBackground,
-.cm-editor .cm-content ::selection {
-	background: var(--sk-theme-3);
-	opacity: 0.3;
-}
-
 .cm-editor .cm-tooltip {
 	background: var(--sk-back-2);
 	color: var(--sk-text-1);

apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte

@@ -124,8 +124,7 @@
 	}
 
 	:focus-visible {
-		outline: none;
-		border: 2px solid var(--sk-theme-3) !important;
+		outline-offset: -2px;
 		border-radius: 2px;
 	}
 

packages/site-kit/src/lib/styles/tokens.css

@@ -40,11 +40,9 @@
 	/* Base colors */
 	--sk-theme-1-hsl: 12, 93%, 43%;
 	--sk-theme-2-hsl: 240, 8%, 44%;
-	--sk-theme-3-hsl: 204, 100%, 63%;
 
 	--sk-theme-1: hsl(var(--sk-theme-1-hsl));
 	--sk-theme-2: hsl(var(--sk-theme-2-hsl));
-	--sk-theme-3: hsl(var(--sk-theme-3-hsl));
 
 	--sk-back-1: hsl(0, 0%, 100%);
 	--sk-back-2: hsla(0, 0%, 100%, 1);
@@ -98,7 +96,6 @@
 		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
 		--sk-theme-1-hsl: 12, 94%, 62%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
-		--sk-theme-3-hsl: 204, 100%, 63%;
 		--sk-text-1: hsl(0, 0%, 90%);
 		--sk-text-2: hsl(0, 0%, 80%);
 		--sk-text-3: hsl(0, 0%, 65%);