more consistent colours

Author: Rich-Harris

apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte

@@ -133,7 +133,7 @@
 				}
 
 				&::after {
-					background: #666;
+					background: currentColor;
 					mask: url(icons/chevron) 50% 50% no-repeat;
 					mask-size: 2rem;
 					top: 0.4rem;
@@ -143,10 +143,6 @@
 					transition: rotate 0.2s;
 				}
 
-				:root.dark &::after {
-					background: #d4d4d4;
-				}
-
 				&:active::after {
 					top: 0.5rem;
 					right: 0.1rem;

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

@@ -106,16 +106,12 @@
 		position: absolute;
 		left: 0;
 		top: 0;
-		background: #666;
+		background: currentColor;
 		mask: url(icons/refresh) no-repeat 50% 50%;
 		mask-size: 1.8rem;
 		transition: 0.2s ease-out;
 	}
 
-	:root.dark .reload::after {
-		background: #d4d4d4;
-	}
-
 	.reload:active::after {
 		transform: rotate(-360deg);
 		transition: none;

packages/repl/src/lib/Editor/codemirror.css

@@ -65,17 +65,13 @@
 				right: 0;
 				top: 0;
 				height: 2.4rem;
-				background: #666;
+				background: currentColor;
 				mask: url(icons/chevron) no-repeat 50% 50%;
 				mask-size: contain;
 				transition: transform 0.2s;
 				cursor: pointer;
 				rotate: 180deg;
 			}
-
-			:root.dark &::after {
-				background: #d4d4d4;
-			}
 		}
 
 		&:has([title='Unfold line'])::after {
@@ -192,7 +188,6 @@
 				aspect-ratio: 1;
 				top: 0.5rem;
 				right: 0.5rem;
-				color: transparent;
 
 				&::after {
 					content: '';
@@ -201,14 +196,10 @@
 					height: 100%;
 					left: 0;
 					top: 0;
-					background: #666;
+					background: currentColor;
 					mask: url(icons/close) 50% 50% no-repeat;
 					mask-size: 1.8rem;
 				}
-
-				:root.dark &::after {
-					background: #d4d4d4;
-				}
 			}
 
 			.cm-textfield {

packages/site-kit/src/lib/components/Text.svelte

@@ -499,7 +499,7 @@
 			}
 
 			&::after {
-				background: #666;
+				background: currentColor;
 				mask: url(icons/chevron) 50% 50% no-repeat;
 				mask-size: 2rem;
 				rotate: -90deg;
@@ -508,10 +508,6 @@
 				right: 0.8rem;
 			}
 
-			:root.dark &::after {
-				background: #d4d4d4;
-			}
-
 			&:has(summary:active)::after {
 				top: 0.3rem;
 				right: 0.7rem;

packages/site-kit/src/lib/components/Toolbox.svelte

@@ -38,11 +38,7 @@
 		width: 1.8rem;
 		height: 1.8rem;
 		z-index: 9999;
-		background: #666;
+		background: currentColor;
 		mask: url(icons/wrench) no-repeat 50% 50% / contain;
-
-		:root.dark & {
-			background: #d4d4d4;
-		}
 	}
 </style>

packages/site-kit/src/lib/nav/Nav.svelte

@@ -377,16 +377,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			display: contents;
 
 			[data-icon] {
-				background: #666 no-repeat 50% 50%;
-				background-size: calc(100% - 1rem) auto;
+				background: var(--sk-fg-3);
 				padding: 0 0.5rem;
 				height: 100%;
 				mask: no-repeat 50% 50%;
 				mask-size: calc(100% - 1rem) auto;
-
-				:root.dark & {
-					background-color: #f4f4f4;
-				}
 			}
 
 			[data-icon='discord'] {

packages/site-kit/src/lib/search/SearchResultList.svelte

@@ -98,17 +98,13 @@
 				top: calc(50% - 1rem);
 				width: 2rem;
 				height: 2rem;
-				background: #666;
+				background: currentColor;
 				mask: url(icons/chevron);
 				mask-size: contain;
 				rotate: -90deg;
 				transition: rotate 0.2s;
 			}
 
-			:root.dark &::after {
-				background: #d4d4d4;
-			}
-
 			[open] &::after {
 				rotate: 90deg;
 			}

packages/site-kit/src/lib/styles/utils/buttons.css

@@ -86,11 +86,7 @@ button > span.icon {
 	mask-repeat: no-repeat;
 	mask-position: 50% 50%;
 	mask-size: 2.3rem 2.3rem;
-	background: #666;
-
-	.dark & {
-		background: #f4f4f4;
-	}
+	background: var(--sk-fg-3);
 }
 
 button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {