From 6d6d23f66fa8da33404bed5f84f04e860d417465 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson
Date: Tue, 7 Jul 2026 14:15:32 -0400
Subject: [PATCH 1/2] deps: upgrade fuz_css with oklch
---
CLAUDE.md | 22 +++++++++++-----------
src/lib/theme.css | 18 +++++++++---------
src/lib/theme_highlight.css | 18 +++++++++---------
src/routes/docs/benchmark/+page.svelte | 2 +-
src/routes/docs/samples/+page.svelte | 2 +-
src/routes/textarea/+page.svelte | 2 +-
6 files changed, 32 insertions(+), 32 deletions(-)
diff --git a/CLAUDE.md b/CLAUDE.md
index b4648d77..642f7066 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -268,17 +268,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 6a605e16..a7bb490d 100644
--- a/src/routes/docs/benchmark/+page.svelte
+++ b/src/routes/docs/benchmark/+page.svelte
@@ -10,7 +10,7 @@
diff --git a/src/routes/docs/samples/+page.svelte b/src/routes/docs/samples/+page.svelte
index 1c2d0418..ed550d59 100644
--- a/src/routes/docs/samples/+page.svelte
+++ b/src/routes/docs/samples/+page.svelte
@@ -17,7 +17,7 @@
API):
- view samples
+ view samples
diff --git a/src/routes/textarea/+page.svelte b/src/routes/textarea/+page.svelte
index 18c1dfa3..091e212e 100644
--- a/src/routes/textarea/+page.svelte
+++ b/src/routes/textarea/+page.svelte
@@ -40,7 +40,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.
From ac968a443eb664ffc227c6da9ee62d6dec6083c9 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson
Date: Tue, 7 Jul 2026 14:15:46 -0400
Subject: [PATCH 2/2] wip
---
.changeset/dull-ideas-glow.md | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 .changeset/dull-ideas-glow.md
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