fix(galley): force syntax token colors past prose CSS variables

fezcode · fezcode · commit e69873b1a30d · 2026-04-23T22:23:46.000+03:00
Tailwind Typography's prose sets --tw-prose-code which overrides
the SyntaxHighlighter theme's inline color, so every token rendered
mauve regardless of the theme. Add arbitrary-variant selectors on
the article container that target .token.keyword, .token.string,
.token.function, .token.number, .token.comment, .token.operator,
.token.punctuation, .token.class-name, .token.builtin, and
.token.property with !important overrides, plus a bare code color
for plain-text blocks. Readable ink on cream at long last.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fezcodex",
-  "version": "0.24.28",
+  "version": "0.24.29",
   "private": true,
   "homepage": "https://fezcode.com",
   "dependencies": {
diff --git a/src/pages/blog-views/GalleyBlogPostPage.jsx b/src/pages/blog-views/GalleyBlogPostPage.jsx
@@ -434,7 +434,20 @@ const GalleyBlogPostPage = () => {
             prose-em:text-[#9E4A2F]
             prose-img:border prose-img:border-[#1A161340]
             prose-code:before:content-none prose-code:after:content-none
-            prose-pre:bg-transparent prose-pre:p-0 prose-pre:m-0 prose-pre:text-[#1A1613]"
+            prose-code:font-normal
+            prose-pre:bg-transparent prose-pre:p-0 prose-pre:m-0 prose-pre:text-[#1A1613]
+            [&_pre]:bg-transparent [&_pre_code]:!text-[#1A1613]
+            [&_.token.keyword]:!text-[#5C3A87] [&_.token.keyword]:font-semibold
+            [&_.token.string]:!text-[#556B2F]
+            [&_.token.function]:!text-[#1F4A78] [&_.token.function]:font-semibold
+            [&_.token.number]:!text-[#8A3E1C]
+            [&_.token.boolean]:!text-[#8A3E1C]
+            [&_.token.comment]:!text-[#8A7C68] [&_.token.comment]:italic
+            [&_.token.operator]:!text-[#7A3020]
+            [&_.token.punctuation]:!text-[#3A302A]
+            [&_.token.class-name]:!text-[#8A4A1B] [&_.token.class-name]:font-semibold
+            [&_.token.builtin]:!text-[#1F4A78]
+            [&_.token.property]:!text-[#8A4A1B]"
         >
           {/* drop cap via :first-letter on the first paragraph */}
           <style>{`

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "fezcodex",`
`3`		`- "version": "0.24.28",`
	`3`	`+ "version": "0.24.29",`
`4`	`4`	`"private": true,`
`5`	`5`	`"homepage": "https://fezcode.com",`
`6`	`6`	`"dependencies": {`