From 6d6d23f66fa8da33404bed5f84f04e860d417465 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Tue, 7 Jul 2026 14:15:32 -0400 Subject: [PATCH 1/3] 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 @@

Performance benchmarking for testing syntax highlighting across all supported languages:

- run benchmark + run benchmark

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/3] 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 From 58618fd7b44fb00d92dbe4dcb484e17dab903ad9 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Thu, 16 Jul 2026 10:49:34 -0400 Subject: [PATCH 3/3] wip --- src/lib/theme_variables.css | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/lib/theme_variables.css b/src/lib/theme_variables.css index 6b1e3a47..acde64cb 100644 --- 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); }