diff --git a/.changeset/dull-ideas-glow.md b/.changeset/dull-ideas-glow.md
new file mode 100644
index 00000000..b6028abe
--- /dev/null
+++ 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
index 720edcd4..60127e52 100644
--- 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
index 23aa63b2..27a6a641 100644
--- a/src/lib/theme.css
+++ b/src/lib/theme.css
@@ -16,7 +16,7 @@
.token_heading,
.token_heading_punctuation,
.token_tag_punctuation {
- color: var(--color_a_50);
+ color: var(--palette_a_50);
}
.token_comment,
@@ -24,13 +24,13 @@
.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
index 778ad85c..d2ee9592 100644
--- 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/routes/docs/benchmark/+page.svelte b/src/routes/docs/benchmark/+page.svelte
index dd1b0598..d29805fd 100644
--- 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
index d6192c1f..75168eb2 100644
--- a/src/routes/docs/samples/+page.svelte
+++ b/src/routes/docs/samples/+page.svelte
@@ -139,7 +139,7 @@
{/if}
{#if !show_html && !show_highlight}
- Select a renderer above.
+ Select a renderer above.
{/if}
{/each}
diff --git a/src/routes/docs/textarea/+page.svelte b/src/routes/docs/textarea/+page.svelte
index 034cc5ac..64f54424 100644
--- 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 theme_highlight.css.
{#if !supported}
-
+
⚠️ This browser does not support the CSS Custom Highlight API — the textarea still works,
but text is shown without highlighting.
diff --git a/src/routes/lang_color.ts b/src/routes/lang_color.ts
index c650572d..f925a085 100644
--- 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 = {
- 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
};