fuzdev · ryanatkn · Jul 7, 2026 · Jul 7, 2026 · Jul 10, 2026 · Jul 10, 2026
diff --git a/.changeset/dull-ideas-glow.md b/.changeset/dull-ideas-glow.md
@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_code': minor
+---
+
+deps: upgrade fuz_css with oklch
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -278,17 +278,17 @@ Limitations: no font-weight/font-style support in range mode.
 
 ## Color variables
 
-Theme uses CSS variables from fuz_css:
-
-- `--color_a` - keywords, tags
-- `--color_b` - strings, selectors
-- `--color_c` - types (TypeScript)
-- `--color_d` - functions, classes
-- `--color_e` - numbers, regex
-- `--color_f` - operators
-- `--color_g` - attributes
-- `--color_h` - properties
-- `--color_i` - booleans, comments
+Theme uses CSS variables from fuz_css (palette stops like `--palette_a_50`):
+
+- `--palette_a_*` - keywords, tags
+- `--palette_b_*` - strings, selectors
+- `--palette_c_*` - types (TypeScript)
+- `--palette_d_*` - functions, classes
+- `--palette_e_*` - numbers, regex
+- `--palette_f_*` - operators
+- `--palette_g_*` - attributes
+- `--palette_h_*` - properties
+- `--palette_i_*` - booleans, comments
 
 ## Development guidelines
 

diff --git a/src/lib/theme.css b/src/lib/theme.css
@@ -16,21 +16,21 @@
 .token_heading,
 .token_heading_punctuation,
 .token_tag_punctuation {
-	color: var(--color_a_50);
+	color: var(--palette_a_50);
 }
 
 .token_comment,
 .token_char,
 .token_inserted,
 .token_blockquote,
 .token_blockquote_punctuation {
-	color: var(--color_b_50);
+	color: var(--palette_b_50);
 }
 
 .token_builtin,
 .token_class_name,
 .token_number {
-	color: var(--color_j_50);
+	color: var(--palette_j_50);
 }
 
 .token_attr_value,
@@ -39,7 +39,7 @@
 .token_template_punctuation,
 .token_inline_code,
 .token_code_punctuation {
-	color: var(--color_h_50);
+	color: var(--palette_h_50);
 }
 
 /* attr_equals must be after attr_value */
@@ -52,11 +52,11 @@
 .token_regex,
 .token_important,
 .token_variable {
-	color: var(--color_e_50);
+	color: var(--palette_e_50);
 }
 
 .token_atrule {
-	color: var(--color_f_50);
+	color: var(--palette_f_50);
 }
 
 .token_attr_name,
@@ -66,18 +66,18 @@
 .token_link_text_wrapper,
 .token_link_text,
 .token_link_punctuation {
-	color: var(--color_i_50);
+	color: var(--palette_i_50);
 }
 
 .token_special_keyword,
 .token_namespace,
 .token_rule {
-	color: var(--color_g_50);
+	color: var(--palette_g_50);
 }
 
 .token_at_keyword,
 .token_url {
-	color: var(--color_d_50);
+	color: var(--palette_d_50);
 }
 
 .token_url {

diff --git a/src/lib/theme_highlight.css b/src/lib/theme_highlight.css
@@ -31,7 +31,7 @@
 ::highlight(token_heading_punctuation),
 .token_tag_punctuation,
 ::highlight(token_tag_punctuation) {
-	color: var(--color_a_50);
+	color: var(--palette_a_50);
 }
 
 .token_comment,
@@ -44,7 +44,7 @@
 ::highlight(token_blockquote),
 .token_blockquote_punctuation,
 ::highlight(token_blockquote_punctuation) {
-	color: var(--color_b_50);
+	color: var(--palette_b_50);
 }
 
 .token_builtin,
@@ -53,7 +53,7 @@
 ::highlight(token_class_name),
 .token_number,
 ::highlight(token_number) {
-	color: var(--color_j_50);
+	color: var(--palette_j_50);
 }
 
 .token_attr_value,
@@ -68,7 +68,7 @@
 ::highlight(token_inline_code),
 .token_code_punctuation,
 ::highlight(token_code_punctuation) {
-	color: var(--color_h_50);
+	color: var(--palette_h_50);
 }
 
 /* attr_equals must be after attr_value */
@@ -87,12 +87,12 @@
 ::highlight(token_important),
 .token_variable,
 ::highlight(token_variable) {
-	color: var(--color_e_50);
+	color: var(--palette_e_50);
 }
 
 .token_atrule,
 ::highlight(token_atrule) {
-	color: var(--color_f_50);
+	color: var(--palette_f_50);
 }
 
 .token_attr_name,
@@ -109,7 +109,7 @@
 ::highlight(token_link_text),
 .token_link_punctuation,
 ::highlight(token_link_punctuation) {
-	color: var(--color_i_50);
+	color: var(--palette_i_50);
 }
 
 .token_special_keyword,
@@ -118,14 +118,14 @@
 ::highlight(token_namespace),
 .token_rule,
 ::highlight(token_rule) {
-	color: var(--color_g_50);
+	color: var(--palette_g_50);
 }
 
 .token_at_keyword,
 ::highlight(token_at_keyword),
 .token_url,
 ::highlight(token_url) {
-	color: var(--color_d_50);
+	color: var(--palette_d_50);
 }
 
 .token_url,

diff --git a/src/lib/theme_variables.css b/src/lib/theme_variables.css
@@ -3,18 +3,21 @@
 CSS variables for syntax highlighting when not using fuz_css.
 Import this alongside theme.css if you're not using fuz_css.
 
+Values are sRGB snapshots of fuz_css's derived OKLCH palette at stop 50
+(`--palette_X_50`) and the neutral text scale (`--text_50`), per scheme.
+
 */
 
 :root {
-	--text_color_5: light-dark(#8e7e71, #8e7e71);
-	--color_a_5: light-dark(#397fc6, #88b2dd);
-	--color_b_5: light-dark(#298e29, #66c266);
-	--color_c_5: light-dark(#d22d2d, #dd4040);
-	--color_d_5: light-dark(#6a40bf, #a68cd9);
-	--color_e_5: light-dark(#ad9625, #e2cb5a);
-	--color_f_5: light-dark(#6a3e1b, #b08b6d);
-	--color_g_5: light-dark(#e03e81, #ea7ba9);
-	--color_h_5: light-dark(#f24e0d, #f67c4c);
-	--color_i_5: light-dark(#19b3b3, #79ecec);
-	--color_j_5: light-dark(#2e9e82, #61d1b5);
+	--text_50: light-dark(#8e8075, #8b7c71);
+	--palette_a_50: light-dark(#4c82b8, #548ec9);
+	--palette_b_50: light-dark(#578e57, #609b5f);
+	--palette_c_50: light-dark(#b36560, #c36f6a);
+	--palette_d_50: light-dark(#8471b4, #907cc4);
+	--palette_e_50: light-dark(#8e7e2e, #9c8a34);
+	--palette_f_50: light-dark(#aa6f3b, #ba7941);
+	--palette_g_50: light-dark(#ae637e, #be6d8a);
+	--palette_h_50: light-dark(#b1694e, #c17355);
+	--palette_i_50: light-dark(#008f9a, #009da8);
+	--palette_j_50: light-dark(#3a916d, #409f77);
 }
diff --git a/src/routes/docs/benchmark/+page.svelte b/src/routes/docs/benchmark/+page.svelte
@@ -249,10 +249,10 @@
 		transition: width 0.3s ease;
 	}
 	.perf-html {
-		background: var(--color_j_50);
+		background: var(--palette_j_50);
 	}
 	.perf-ranges {
-		background: var(--color_g_50);
+		background: var(--palette_g_50);
 	}
 	.perf-num {
 		font-size: var(--font_size_sm);

diff --git a/src/routes/docs/samples/+page.svelte b/src/routes/docs/samples/+page.svelte
@@ -139,7 +139,7 @@
 						{/if}
 					</div>
 					{#if !show_html && !show_highlight}
-						<p class="color_e_50">Select a renderer above.</p>
+						<p class="palette_e_50">Select a renderer above.</p>
 					{/if}
 				</section>
 			{/each}

diff --git a/src/routes/docs/textarea/+page.svelte b/src/routes/docs/textarea/+page.svelte
@@ -55,7 +55,7 @@
 				>. Type below to see it re-highlight. Requires <code>theme_highlight.css</code>.
 			</p>
 			{#if !supported}
-				<p class="color_e_50">
+				<p class="palette_e_50">
 					⚠️ This browser does not support the CSS Custom Highlight API — the textarea still works,
 					but text is shown without highlighting.
 				</p>

diff --git a/src/routes/lang_color.ts b/src/routes/lang_color.ts
@@ -1,16 +1,16 @@
 import type {SampleLang} from '$lib/code_sample.ts';
 
 /**
- * A `color_*` utility class per demo language, chosen to evoke each language's
+ * A `palette_*` utility class per demo language, chosen to evoke each language's
  * identity, for tinting the language buttons in the docs.
  */
 export const lang_colors: Record<SampleLang, string> = {
-	json: 'color_e', // gold
-	css: 'color_d', // purple
-	ts: 'color_a', // blue
-	rs: 'color_g', // pink (rust's orange and brown are taken)
-	html: 'color_c', // red
-	svelte: 'color_h', // orange
-	md: 'color_f', // brown
-	sh: 'color_b', // green
+	json: 'palette_e', // gold
+	css: 'palette_d', // purple
+	ts: 'palette_a', // blue
+	rs: 'palette_g', // pink (rust's orange and brown are taken)
+	html: 'palette_c', // red
+	svelte: 'palette_h', // orange
+	md: 'palette_f', // brown
+	sh: 'palette_b', // green
 };