group colours by purpose

Author: Rich-Harris

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

@@ -8,27 +8,12 @@
 :root {
 	color-scheme: light;
 
-	--sk-selection-color: hsla(204, 100%, 63%, 0.3);
-
-	/* Base colors */
-	--sk-theme-1: hsl(12, 93%, 43%);
-
-	--sk-back-1: hsl(0, 0%, 100%);
-	--sk-back-2: hsl(0, 0%, 100%);
-	--sk-back-3: hsl(0, 0%, 99%);
-	--sk-back-4: hsl(0, 0%, 95%);
-	--sk-back-5: hsl(0, 0%, 92%);
-	--sk-back-6: hsl(0, 0%, 86%);
-
+	/* Foreground colours */
 	--sk-text-1: hsl(0, 0%, 5%);
 	--sk-text-2: hsl(0, 0%, 12%);
 	--sk-text-3: hsl(0, 0%, 27%);
 	--sk-text-4: hsl(0, 0%, 45%);
-	--sk-scrollbar: rgba(0, 0, 0, 0.3);
-	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
-
-	/* same in light mode, different in dark mode */
-	--sk-theme-1-variant: var(--sk-theme-1);
+	--sk-theme-1: hsl(12, 93%, 43%);
 
 	--sk-code-base: var(--sk-text-2);
 	--sk-code-comment: var(--sk-text-4);
@@ -39,6 +24,16 @@
 	--sk-code-template-string: hsl(2, 80%, 47%);
 	--sk-code-tags: var(--sk-code-function);
 	--sk-code-important: var(--sk-code-string);
+
+	/* Background colours */
+	--sk-selection-color: hsla(204, 100%, 63%, 0.3);
+	--sk-back-1: hsl(0, 0%, 100%);
+	--sk-back-2: hsl(0, 0%, 100%);
+	--sk-back-3: hsl(0, 0%, 99%);
+	--sk-back-4: hsl(0, 0%, 95%);
+	--sk-back-5: hsl(0, 0%, 92%);
+	--sk-back-6: hsl(0, 0%, 86%);
+	--sk-theme-1-variant: var(--sk-theme-1);
 	--sk-code-diff-base: hsla(0, 0%, 0%, 0.6);
 	--sk-code-diff-inserted: hsl(120, 100%, 25%);
 	--sk-code-diff-removed: hsl(2, 80%, 47%);
@@ -56,48 +51,37 @@
 
 	--sk-text-warning: hsl(32, 95%, 44%);
 
-	/* used for coloured backgrounds e.g. blockquotes */
+	/* Border colors */
+
+	/* Misc */
+	--sk-scrollbar: rgba(0, 0, 0, 0.3);
+	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
 	--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
-	--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
 
 	/* overrides */
 	--shiki-color-background: var(--sk-back-2);
 
 	/* raised buttons */
 	--sk-raised-color: var(--sk-back-4) var(--sk-back-5) var(--sk-back-5) var(--sk-back-4);
-	--sk-raised-width: 1px 2px 2px 1px;
 	--sk-raised-hover-color: var(--sk-back-5) var(--sk-back-6) var(--sk-back-6) var(--sk-back-5);
 	--sk-raised-active-color: var(--sk-back-6) var(--sk-back-5) var(--sk-back-5) var(--sk-back-6);
+
+	/* TODO move these somewhere else? */
+	--sk-raised-width: 1px 2px 2px 1px;
 	--sk-raised-active-width: 2px 1px 1px 2px;
 }
 
 :root.dark {
 	color-scheme: dark;
 
-	-webkit-font-smoothing: antialiased;
-
 	--sk-back-hue: 220;
 
-	--sk-back-1: hsl(var(--sk-back-hue), 15%, 8%);
-	--sk-back-2: hsl(var(--sk-back-hue), 15%, 15%);
-	--sk-back-3: hsl(var(--sk-back-hue), 15%, 12%);
-	--sk-back-4: hsl(var(--sk-back-hue), 15%, 22%);
-	--sk-back-5: hsl(var(--sk-back-hue), 15%, 25%);
-	--sk-back-6: hsl(var(--sk-back-hue), 15%, 32%);
-	--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
-	--sk-theme-1: hsl(12, 94%, 62%);
+	/* Foreground colours */
 	--sk-text-1: hsl(var(--sk-back-hue), 10%, 90%);
 	--sk-text-2: hsl(var(--sk-back-hue), 10%, 80%);
 	--sk-text-3: hsl(var(--sk-back-hue), 10%, 65%);
 	--sk-text-4: hsl(var(--sk-back-hue), 10%, 45%);
-	--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
-	--sk-scrollbar: rgba(255, 255, 255, 0.3);
-	--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
-
-	--sk-theme-1-variant: hsl(15, 100%, 35%);
-
-	--sk-text-warning: hsl(32, 67%, 56%);
-
+	--sk-theme-1: hsl(12, 94%, 62%);
 	--sk-code-base: hsl(45, 7%, 75%);
 	--sk-code-comment: hsl(0, 0%, 55%);
 	--sk-code-keyword: hsl(204, 88%, 65%);
@@ -108,10 +92,26 @@
 	--sk-code-tags: var(--sk-code-function);
 	--sk-code-important: var(--sk-code-string);
 
+	/* Background colours */
+	--sk-back-1: hsl(var(--sk-back-hue), 15%, 8%);
+	--sk-back-2: hsl(var(--sk-back-hue), 15%, 15%);
+	--sk-back-3: hsl(var(--sk-back-hue), 15%, 12%);
+	--sk-back-4: hsl(var(--sk-back-hue), 15%, 22%);
+	--sk-back-5: hsl(var(--sk-back-hue), 15%, 25%);
+	--sk-back-6: hsl(var(--sk-back-hue), 15%, 32%);
+	--sk-theme-1-variant: hsl(15, 100%, 35%);
+	--sk-text-warning: hsl(32, 67%, 56%);
 	--sk-code-diff-base: hsla(0, 0%, 100%, 0.5);
 	--sk-code-diff-inserted: hsl(120, 46%, 48%);
 	--sk-code-diff-removed: hsl(2, 64%, 70%);
 
+	/* Border colours */
+
+	/* Misc */
+	--sk-scrollbar: rgba(255, 255, 255, 0.3);
+	--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
+	--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
+
 	/* overrides */
 	--shiki-color-background: var(--sk-back-3);
 

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

@@ -49,6 +49,10 @@
 		}
 	}
 
+	&.dark {
+		-webkit-font-smoothing: antialiased;
+	}
+
 	@media screen and (min-width: 800px) {
 		--sk-font-size-h1: 5.4rem;
 	}