From 5eb7460c343df4970628f61fd502d56984f9e6ca Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Tue, 7 Jul 2026 14:14:31 -0400 Subject: [PATCH 1/6] deps: upgrade fuz_css with oklch --- src/lib/ApiModulesList.svelte | 2 +- src/lib/ColorSchemeInput.svelte | 2 +- src/lib/CopyToClipboard.svelte | 2 +- src/lib/DocsFooter.svelte | 2 +- src/lib/HueInput.svelte | 24 +++++++------------ src/lib/LibraryDetail.svelte | 8 +++---- src/lib/ModuleLink.svelte | 2 +- src/lib/ProjectLinks.svelte | 24 +++++++++---------- src/lib/Spiders.svelte | 20 ++++++++-------- src/lib/ThemeInput.svelte | 2 +- src/lib/alert.ts | 4 ++-- src/lib/logos.ts | 2 +- src/routes/ThemeForm.svelte | 4 +--- src/routes/docs/Alert/+page.svelte | 4 ++-- .../Contextmenu/ExampleCustomInstance.svelte | 6 ++--- .../ExampleDisableDefaultBehaviors.svelte | 2 +- .../docs/Contextmenu/ExampleSelectText.svelte | 2 +- src/routes/docs/HueInput/+page.svelte | 2 +- src/routes/docs/Svg/+page.svelte | 12 +++++----- src/routes/docs/intersect/+page.svelte | 6 ++--- svelte.config.js | 4 ++-- tsconfig.json | 4 +++- 22 files changed, 66 insertions(+), 74 deletions(-) diff --git a/src/lib/ApiModulesList.svelte b/src/lib/ApiModulesList.svelte index fe2dfde3f..2b3233e6c 100644 --- a/src/lib/ApiModulesList.svelte +++ b/src/lib/ApiModulesList.svelte @@ -25,7 +25,7 @@ {#if modules.length === 0} -

No modules match your search.

+

No modules match your search.

{:else}
    {#each modules as module (module.path)} diff --git a/src/lib/ColorSchemeInput.svelte b/src/lib/ColorSchemeInput.svelte index 2f43d6847..a7c3dd99e 100644 --- a/src/lib/ColorSchemeInput.svelte +++ b/src/lib/ColorSchemeInput.svelte @@ -22,7 +22,7 @@ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_ro {@const selected = color_scheme === value.color_scheme}
diff --git a/src/routes/docs/Contextmenu/ExampleSelectText.svelte b/src/routes/docs/Contextmenu/ExampleSelectText.svelte index 1dfa9d6bf..5bdf4fea1 100644 --- a/src/routes/docs/Contextmenu/ExampleSelectText.svelte +++ b/src/routes/docs/Contextmenu/ExampleSelectText.svelte @@ -41,14 +41,14 @@ Try selecting text and then opening the contextmenu on it.`; -
+
{#snippet entries()} void (toggled = !toggled)}>Toggle something {/snippet} -
+

When the Fuz contextmenu opens and the user has selected text, the menu includes a -

+

Opening the contextmenu on an input or textarea opens the browser's default contextmenu.

From 067e491c40b360e150e24b2c591942f505d0046f Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Thu, 16 Jul 2026 10:49:56 -0400 Subject: [PATCH 4/6] wip --- src/lib/logos.ts | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/lib/logos.ts b/src/lib/logos.ts index 51f1c0dcb..7ae74b1c1 100644 --- a/src/lib/logos.ts +++ b/src/lib/logos.ts @@ -4,18 +4,20 @@ import type {SvgData} from './svg.ts'; /* -Logo colors are the midpoint between the light and dark versions of color variant 5: +Logo colors are frozen brand values โ€” originally derived as the midpoint +between the light and dark mid-stops of fuz_css's pre-OKLCH palette +(today's `--palette_X_50`), and deliberately not re-derived since: ```css ---color_a: #6199d1; ---color_b: #3db33d; ---color_c: #d93636; ---color_d: #8866cc; ---color_e: #d8bc31; ---color_f: #84522a; // TODO this one isn't the midpoint bc fuz_css's color needs tweaking, too light in dark mode ---color_g: #e55d95; ---color_h: #f4672f; ---color_i: #36e2e2; +#6199d1 (blue, a) +#3db33d (green, b) +#d93636 (red, c) +#8866cc (purple, d) +#d8bc31 (yellow, e) +#84522a (brown, f) +#e55d95 (pink, g) +#f4672f (orange, h) +#36e2e2 (cyan, i) ``` */ From 265fd90a54dd9c05af98548bff6ecd3a0b79c7e7 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Wed, 22 Jul 2026 09:26:00 -0400 Subject: [PATCH 5/6] wip --- src/lib/ProjectLinks.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/ProjectLinks.svelte b/src/lib/ProjectLinks.svelte index 92a47d012..72dc81baa 100644 --- a/src/lib/ProjectLinks.svelte +++ b/src/lib/ProjectLinks.svelte @@ -34,7 +34,7 @@ {name: 'fuz_app', url: 'https://app.fuz.dev/', logo: logo_fuz_app, description: '[pre-alpha] fullstack app library', glyph: '๐Ÿ—', color_class: 'palette_j_50'}, {name: 'fuz_css', url: 'https://css.fuz.dev/', logo: logo_fuz_css, description: 'CSS framework and design system for semantic HTML', glyph: '๐ŸŒฟ', color_class: 'palette_b_50'}, {name: 'fuz_ui', url: 'https://ui.fuz.dev/', logo: logo_fuz_ui, description: 'Svelte UI library', glyph: '๐Ÿงถ', color_class: 'palette_c_50'}, - {name: 'fuz_template', url: 'https://template.fuz.dev/', logo: logo_fuz_template, description: 'a static web app and Node library template with TypeScript, Svelte, SvelteKit, Vite, esbuild, Gro, and Fuz', glyph: 'โ„', color_class: 'palette_h_50'}, + {name: 'fuz_template', url: 'https://template.fuz.dev/', logo: logo_fuz_template, description: 'a web app template with TypeScript + SvelteKit + optional Rust for the fuz-stack', glyph: 'โ„', color_class: 'palette_h_50'}, {name: 'fuz_blog', url: 'https://blog.fuz.dev/', logo: logo_fuz_blog, description: 'blog software from scratch with SvelteKit', glyph: '๐Ÿ–Š๏ธ', color_class: 'palette_e_50'}, {name: 'fuz_code', url: 'https://code.fuz.dev/', logo: logo_fuz_code, description: 'syntax styling utilities and components for TypeScript, Svelte, Markdown, and more', glyph: '๐ŸŽจ', color_class: 'palette_g_50'}, {name: 'fuz_mastodon', url: 'https://mastodon.fuz.dev/', logo: logo_fuz_mastodon, description: 'Mastodon components and helpers for Svelte, SvelteKit, and Fuz', glyph: '๐Ÿฆฃ', color_class: 'palette_d_50'}, From f2399ffe938dd049292b133741edb0d3631896b8 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Wed, 29 Jul 2026 10:26:44 -0400 Subject: [PATCH 6/6] wip --- src/routes/docs/ThemeRoot/+page.svelte | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/routes/docs/ThemeRoot/+page.svelte b/src/routes/docs/ThemeRoot/+page.svelte index f597222ca..adceebbdf 100644 --- a/src/routes/docs/ThemeRoot/+page.svelte +++ b/src/routes/docs/ThemeRoot/+page.svelte @@ -181,16 +181,18 @@

Themes are plain CSS that can be sourced in a variety of ways.

-

To use Fuz's base theme:

+

+ To use Fuz's base theme, import the CSS generated by vite_plugin_fuz_css - it + includes the theme variables, base styles, and utility classes your code uses: +

<` + `script> - import '@fuzdev/fuz_css/style.css'; - import '@fuzdev/fuz_css/theme.css'; + import 'virtual:fuz.css'; import ThemeRoot from '@fuzdev/fuz_ui/ThemeRoot.svelte'; import type {Snippet} from 'svelte'; - + const {children}: {children: Snippet} = $props(); @@ -199,6 +201,13 @@ {@render children()} `} /> +

can be customized with the the nonreactive prop theme_state: