more

Author: Rich-Harris

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

@@ -189,7 +189,6 @@
 			width: calc(100% + 1rem);
 			left: -0.5rem;
 			overflow: hidden;
-			color: var(--sk-fg-1);
 
 			&::before,
 			&::after {
@@ -227,7 +226,6 @@
 		:global(mark) {
 			--highlight-color: rgba(255, 255, 0, 0.4);
 			background: none;
-			color: var(--sk-fg-1);
 			background: var(--highlight-color);
 			outline: 2px solid var(--highlight-color);
 		}

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

@@ -9,10 +9,10 @@
 	color-scheme: light;
 
 	/* Foreground colours */
-	--sk-fg-1: hsl(0, 0%, 5%);
-	--sk-fg-2: hsl(0, 0%, 12%);
-	--sk-fg-3: hsl(0, 0%, 27%);
-	--sk-fg-4: hsl(0, 0%, 45%);
+	--sk-fg-1: hsl(0, 0%, 5%);  /* for things that behave as headings, and (very sparingly) as a highlight colour */
+	--sk-fg-2: hsl(0, 0%, 12%); /* most text should be this colour */
+	--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) */
+	--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
 	--sk-fg-accent: hsl(12, 93%, 43%);
 
 	/* Background colours */