more

Author: Rich-Harris

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

@@ -15,17 +15,6 @@
 	--sk-fg-4: hsl(0, 0%, 45%);
 	--sk-fg-accent: hsl(12, 93%, 43%);
 
-	--shiki-color-text: var(--sk-fg-2);
-	--shiki-token-constant: var(--shiki-color-text);
-	--shiki-token-string: hsl(30, 100%, 30%);
-	--shiki-token-comment: var(--sk-fg-4);
-	--shiki-token-keyword: hsl(204, 100%, 38%);
-	--shiki-token-parameter: var(--shiki-color-text);
-	--shiki-token-function: var(--sk-fg-accent);
-	--shiki-token-string-expression: var(--shiki-token-string);
-	--shiki-token-punctuation: var(--shiki-color-text);
-	--shiki-token-link: var(--shiki-token-keyword);
-
 	/* Background colours */
 	--sk-bg-1: hsl(0, 0%, 100%);
 	--sk-bg-2: hsl(0, 0%, 100%);
@@ -37,12 +26,21 @@
 	/* Border color — use this for all borders, except 'active' borders (e.g. current nav) which use `--sk-fg-accent`  */
 	--sk-border: hsl(0, 0%, 92%);
 
+	/* Syntax highlighting — these come from `createCssVariablesTheme`, but are used elsewhere as well */
+	--shiki-color-text: var(--sk-fg-2);
+	--shiki-token-constant: var(--shiki-color-text);
+	--shiki-token-string: hsl(30, 100%, 30%);
+	--shiki-token-comment: var(--sk-fg-4);
+	--shiki-token-keyword: hsl(204, 100%, 38%);
+	--shiki-token-parameter: var(--shiki-color-text);
+	--shiki-token-function: var(--sk-fg-accent);
+	--shiki-token-string-expression: var(--shiki-token-string);
+	--shiki-token-punctuation: var(--shiki-color-text);
+	--shiki-token-link: var(--shiki-token-keyword);
+
 	/* Misc */
 	--sk-scrollbar: rgba(0, 0, 0, 0.3);
 	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
-
-	/* overrides */
-	--shiki-color-background: var(--sk-bg-2);
 }
 
 :root.dark {
@@ -57,12 +55,6 @@
 	--sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%);
 	--sk-fg-accent: hsl(12, 94%, 62%);
 
-	--shiki-color-text: hsl(45, 7%, 75%);
-	--shiki-token-comment: hsl(0, 0%, 55%);
-	--shiki-token-keyword: hsl(204, 88%, 65%);
-	--shiki-token-function: hsl(19, 67%, 75%);
-	--shiki-token-string: hsl(41, 37%, 68%);
-
 	/* Background colours */
 	--sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%);
 	--sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%);
@@ -73,10 +65,14 @@
 	/* Border colour */
 	--sk-border: hsl(var(--sk-bg-hue), 15%, 25%);
 
+	/* Syntax highlighting */
+	--shiki-color-text: hsl(45, 7%, 75%);
+	--shiki-token-comment: hsl(0, 0%, 55%);
+	--shiki-token-keyword: hsl(204, 88%, 65%);
+	--shiki-token-function: hsl(19, 67%, 75%);
+	--shiki-token-string: hsl(41, 37%, 68%);
+
 	/* Misc */
 	--sk-scrollbar: rgba(255, 255, 255, 0.3);
 	--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
-
-	/* overrides */
-	--shiki-color-background: var(--sk-bg-3);
 }