From 42c112c1ff391c80c0682450850842631dc67f73 Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnus-madsen@users.noreply.github.com>
Date: Mon, 3 Aug 2026 07:12:48 +0200
Subject: [PATCH 1/2] style: unify keyword color to magenta and tighten code
 line-height

Override Light+ so base keyword/storage scopes use the same #AF00DB as
keyword.control, and reduce code sample line-height from 16px to 14px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/InlineEditor.astro | 14 +++++++++++++-
 src/styles/global.css             |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/InlineEditor.astro b/src/components/InlineEditor.astro
index 6dca380..5ed3fb9 100644
--- a/src/components/InlineEditor.astro
+++ b/src/components/InlineEditor.astro
@@ -1,12 +1,24 @@
 ---
 import { Code } from "astro:components";
+import lightPlus from "@shikijs/themes/light-plus";
 const { code } = Astro.props;
 
 import flixGrammar from "../grammars/flix.tmLanguage.json";
+
+// Light+ colors `keyword`/`storage` blue but `keyword.control` magenta;
+// unify them so all Flix keywords share the magenta.
+const theme = {
+  ...lightPlus,
+  name: "light-plus-flix",
+  tokenColors: [
+    ...lightPlus.tokenColors,
+    { scope: ["keyword", "storage"], settings: { foreground: "#AF00DB" } },
+  ],
+};
 ---
 
 <div class="inline-editor-frame">
   <div class="inline-editor-code">
-    <Code code={code} theme="light-plus" lang={flixGrammar} />
+    <Code code={code} theme={theme} lang={flixGrammar} />
   </div>
 </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index 88649ce..de42d9b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -58,7 +58,7 @@ p:last-child {
     font-family:
         Monaco, Menlo, "Ubuntu Mono", Consolas, "Source Code Pro",
         source-code-pro, monospace;
-    line-height: 16px;
+    line-height: 14px;
 }
 
 .inline-editor-code pre {

From 698d3bd9dff562346a6ae9de4ae35a606155d5a1 Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnus-madsen@users.noreply.github.com>
Date: Mon, 3 Aug 2026 07:15:52 +0200
Subject: [PATCH 2/2] fix: handle possibly-undefined tokenColors in shiki theme
 type

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/InlineEditor.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InlineEditor.astro b/src/components/InlineEditor.astro
index 5ed3fb9..c4f760b 100644
--- a/src/components/InlineEditor.astro
+++ b/src/components/InlineEditor.astro
@@ -11,7 +11,7 @@ const theme = {
   ...lightPlus,
   name: "light-plus-flix",
   tokenColors: [
-    ...lightPlus.tokenColors,
+    ...(lightPlus.tokenColors ?? []),
     { scope: ["keyword", "storage"], settings: { foreground: "#AF00DB" } },
   ],
 };