From 24ec67370a2c4e8d2958b5f3426e38a618dbc58c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 30 Jan 2026 10:48:41 +0000
Subject: [PATCH] fix: add HTML, CSS, TOML to core languages and expand token
 mappings

- Add html, css, toml to CORE_LANGUAGES for eager loading
- Add variableDefaults to cssVarsTheme for proper initialization
- Expand shiki-theme.css with more token type mappings:
  - HTML/XML: tag, attribute, attr-value
  - CSS: selector, property
  - Additional: variable, operator, number, boolean, regex, etc.
---
 src/lib/shiki.ts           | 14 +++++++++++---
 src/styles/shiki-theme.css | 22 +++++++++++++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/lib/shiki.ts b/src/lib/shiki.ts
index 7adbd1a..51633c5 100644
--- a/src/lib/shiki.ts
+++ b/src/lib/shiki.ts
@@ -13,13 +13,15 @@ const failedLanguages = new Set<string>();
 
 /**
  * CSS Variables theme for Shiki
- * This outputs CSS custom properties that we map to our theme variables.
- * The actual colors are defined in shiki-theme.css using our theme system.
+ * Maps TextMate scopes to CSS variable names that reference our theme system.
  */
 const cssVarsTheme = createCssVariablesTheme({
   name: "css-variables",
   variablePrefix: "--shiki-",
-  variableDefaults: {},
+  variableDefaults: {
+    foreground: "var(--shiki-color-text)",
+    background: "var(--shiki-color-background)",
+  },
   fontStyle: true,
 });
 
@@ -155,9 +157,12 @@ const CORE_LANGUAGES = [
   "javascript",
   "typescript",
   "json",
+  "html",
+  "css",
   "diff",
   "bash",
   "rust",
+  "toml",
   "markdown",
 ] as const;
 
@@ -183,9 +188,12 @@ export async function getHighlighter(): Promise<HighlighterCore> {
         import("shiki/langs/javascript.mjs"),
         import("shiki/langs/typescript.mjs"),
         import("shiki/langs/json.mjs"),
+        import("shiki/langs/html.mjs"),
+        import("shiki/langs/css.mjs"),
         import("shiki/langs/diff.mjs"),
         import("shiki/langs/bash.mjs"),
         import("shiki/langs/rust.mjs"),
+        import("shiki/langs/toml.mjs"),
         import("shiki/langs/markdown.mjs"),
       ],
       engine: createOnigurumaEngine(import("shiki/wasm")),
diff --git a/src/styles/shiki-theme.css b/src/styles/shiki-theme.css
index af13480..219de0f 100644
--- a/src/styles/shiki-theme.css
+++ b/src/styles/shiki-theme.css
@@ -15,7 +15,7 @@
   --shiki-color-text: hsl(var(--foreground));
   --shiki-color-background: transparent;
 
-  /* Token colors - mapped to our syntax theme variables */
+  /* Core token colors - mapped to our syntax theme variables */
   --shiki-token-constant: hsl(var(--syntax-constant));
   --shiki-token-string: hsl(var(--syntax-string));
   --shiki-token-comment: hsl(var(--syntax-comment));
@@ -26,6 +26,26 @@
   --shiki-token-punctuation: hsl(var(--syntax-punctuation));
   --shiki-token-link: hsl(var(--syntax-string));
 
+  /* HTML/XML tokens */
+  --shiki-token-tag: hsl(var(--syntax-tag));
+  --shiki-token-attribute: hsl(var(--syntax-property));
+  --shiki-token-attr-value: hsl(var(--syntax-string));
+
+  /* CSS tokens */
+  --shiki-token-selector: hsl(var(--syntax-tag));
+  --shiki-token-property: hsl(var(--syntax-property));
+
+  /* Additional tokens */
+  --shiki-token-variable: hsl(var(--syntax-variable));
+  --shiki-token-operator: hsl(var(--syntax-operator));
+  --shiki-token-number: hsl(var(--syntax-constant));
+  --shiki-token-boolean: hsl(var(--syntax-constant));
+  --shiki-token-regex: hsl(var(--syntax-string));
+  --shiki-token-class: hsl(var(--syntax-keyword));
+  --shiki-token-interface: hsl(var(--syntax-keyword));
+  --shiki-token-namespace: hsl(var(--syntax-keyword));
+  --shiki-token-type: hsl(var(--syntax-keyword));
+
   /* Diff colors */
   --shiki-token-deleted: hsl(var(--diff-deleted));
   --shiki-token-inserted: hsl(var(--diff-inserted));