deps: upgrade fuz_css with oklch

.changeset/quick-forks-pump.md

@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_ui': minor
+---
+
+deps: upgrade fuz_css with oklch

src/lib/ApiModulesList.svelte

@@ -25,7 +25,7 @@
 	<TomeSection>
 		<TomeSectionHeader text="Modules" />
 		{#if modules.length === 0}
-			<p class="color_c">No modules match your search.</p>
+			<p class="palette_c">No modules match your search.</p>
 		{:else}
 			<ul class="modules-list">
 				{#each modules as module (module.path)}

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}
 		<button
 			type="button"
-			class={['color-scheme color_a', {selected}]}
+			class={['color-scheme palette_a', {selected}]}
 			role="menuitemradio"
 			title={selected
 				? `${color_scheme} color scheme is selected`

src/lib/CopyToClipboard.svelte

@@ -69,7 +69,7 @@
 	class={[
 		'copy-to-clipboard',
 		rest.class,
-		{icon_button: children ? false : icon_button, copied, failed, color_c: failed},
+		{icon_button: children ? false : icon_button, copied, failed, palette_c: failed},
 	]}
 	onclick={(e) => {
 		onclick?.(e); // before the internal handler, which is async

src/lib/DocsFooter.svelte

@@ -65,7 +65,7 @@
 		border: var(--border_width) double var(--border_color);
 	}
 	.logo a:hover {
-		--border_color: var(--color_a_50);
+		--border_color: var(--palette_a_50);
 	}
 	.root-url {
 		/* TODO messy */

src/lib/HueInput.svelte

@@ -67,12 +67,12 @@
 
 <style>
 	.hue-input {
-		--outline_color: hsl(var(--hue) 50% 60%);
+		--outline_color: oklch(0.65 0.13 var(--hue));
 		/* TODO @many figure these variables out so they're easily customized (similar pattern in a lot of places) */
-		/* --thumb_background_color: hsl(var(--hue) 50% 50%); */
+		/* --thumb_background_color: oklch(0.6 0.13 var(--hue)); */
 	}
 	.preview {
-		background-color: hsl(var(--hue) 50% 50%);
+		background-color: oklch(0.6 0.13 var(--hue));
 		/* mirror the `min-height: var(--input_height)` that fuz_css gives the sibling inputs,
 		so the preview tracks their height even when `--input_height` is customized */
 		min-height: var(--input_height);
@@ -88,22 +88,14 @@
 	}
 	.minimap-wrapper {
 		padding: 0 var(--input_padding_x);
-		background: hsl(0 50% 50%) 0%;
 	}
 	.minimap {
+		/* sweep the OKLCH hue circle at constant lightness/chroma so the strip
+			matches what the hue knobs actually produce */
 		background: linear-gradient(
-			90deg,
-			hsl(0 50% 50%) 0%,
-			hsl(36 50% 50%) 10%,
-			hsl(72 50% 50%) 20%,
-			hsl(108 50% 50%) 30%,
-			hsl(144 50% 50%) 40%,
-			hsl(180 50% 50%) 50%,
-			hsl(216 50% 50%) 60%,
-			hsl(252 50% 50%) 70%,
-			hsl(288 50% 50%) 80%,
-			hsl(324 50% 50%) 90%,
-			hsl(360 50% 50%) 100%
+			90deg in oklch longer hue,
+			oklch(0.6 0.13 0) 0%,
+			oklch(0.6 0.13 360) 100%
 		);
 		height: var(--space_lg);
 	}

src/lib/LibraryDetail.svelte

@@ -282,16 +282,16 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 	}
 	/* TODO probably add variables/classes for these */
 	.ts {
-		--link_color: var(--color_a_50);
+		--link_color: var(--palette_a_50);
 	}
 	.svelte {
-		--link_color: var(--color_h_50);
+		--link_color: var(--palette_h_50);
 	}
 	.css {
-		--link_color: var(--color_b_50);
+		--link_color: var(--palette_b_50);
 	}
 	.json {
-		--link_color: var(--color_f_50);
+		--link_color: var(--palette_f_50);
 	}
 	/* TODO extract */
 	.declarations {

src/lib/ModuleLink.svelte

@@ -34,7 +34,7 @@
 	// the site-local path if `homepage_url` is unavailable.
 	const url_api = $derived((full && module?.url_api_full) || module?.url_api);
 
-	const color_class = $derived(module_path.endsWith('.svelte') ? 'color_h' : '');
+	const color_class = $derived(module_path.endsWith('.svelte') ? 'palette_h' : '');
 
 	const contextmenu_entries = $derived(module ? create_module_contextmenu(module) : undefined);
 </script>

src/lib/ProjectLinks.svelte

@@ -31,18 +31,18 @@
 	// TODO ideally this wouldn't duplicate metadata like descriptions, but adding fuz_gitops to this repo is heavy
 	// prettier-ignore
 	const project_items: Array<ProjectItem> = [
-		{name: 'fuz_app', url: 'https://app.fuz.dev/', logo: logo_fuz_app, description: '[pre-alpha] fullstack app library', glyph: '🗝', color_class: 'color_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: 'color_b_50'},
-		{name: 'fuz_ui', url: 'https://ui.fuz.dev/', logo: logo_fuz_ui, description: 'Svelte UI library', glyph: '🧶', color_class: 'color_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: 'color_h_50'},
-		{name: 'fuz_blog', url: 'https://blog.fuz.dev/', logo: logo_fuz_blog, description: 'blog software from scratch with SvelteKit', glyph: '🖊️', color_class: 'color_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: 'color_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: 'color_d_50'},
-		{name: 'fuz_gitops', url: 'https://gitops.fuz.dev/', logo: logo_fuz_gitops, description: 'a tool for managing many repos', glyph: '🪄', color_class: 'color_a_50'},
-		{name: 'svelte-docinfo', url: 'https://svelte-docinfo.fuz.dev/', logo: logo_svelte_docinfo, description: 'static analysis for TypeScript and Svelte', glyph: '📜', color_class: 'color_i_50'},
-		{name: 'fuz_util', url: 'https://util.fuz.dev/', logo: logo_fuz_util, description: 'utility belt for JS', glyph: '🦕', color_class: 'color_f_50'},
-		{name: 'gro', url: 'https://github.com/fuzdev/gro', logo: logo_gro, description: 'task runner and toolkit extending SvelteKit', glyph: '🌰', color_class: 'color_f_50'},
-		{name: 'tsv', url: 'https://tsv.fuz.dev/', logo: logo_tsv, description: 'precise language tools for TypeScript/JS, CSS, and Svelte in Rust', glyph: '🪶', color_class: 'color_h_50'},
+		{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 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'},
+		{name: 'fuz_gitops', url: 'https://gitops.fuz.dev/', logo: logo_fuz_gitops, description: 'a tool for managing many repos', glyph: '🪄', color_class: 'palette_a_50'},
+		{name: 'svelte-docinfo', url: 'https://svelte-docinfo.fuz.dev/', logo: logo_svelte_docinfo, description: 'static analysis for TypeScript and Svelte', glyph: '📜', color_class: 'palette_i_50'},
+		{name: 'fuz_util', url: 'https://util.fuz.dev/', logo: logo_fuz_util, description: 'utility belt for JS', glyph: '🦕', color_class: 'palette_f_50'},
+		{name: 'gro', url: 'https://github.com/fuzdev/gro', logo: logo_gro, description: 'task runner and toolkit extending SvelteKit', glyph: '🌰', color_class: 'palette_f_50'},
+		{name: 'tsv', url: 'https://tsv.fuz.dev/', logo: logo_tsv, description: 'precise language tools for TypeScript/JS, CSS, and Svelte in Rust', glyph: '🪶', color_class: 'palette_h_50'},
 	];
 </script>
 

src/lib/Spiders.svelte

@@ -15,16 +15,16 @@
 
 	const {
 		spiders = [
-			'var(--color_a_50)',
-			'var(--color_b_50)',
-			'var(--color_c_50)',
-			'var(--color_d_50)',
-			'var(--color_e_50)',
-			'var(--color_f_50)',
-			'var(--color_g_50)',
-			'var(--color_h_50)',
-			'var(--color_i_50)',
-			'var(--color_j_50)',
+			'var(--palette_a_50)',
+			'var(--palette_b_50)',
+			'var(--palette_c_50)',
+			'var(--palette_d_50)',
+			'var(--palette_e_50)',
+			'var(--palette_f_50)',
+			'var(--palette_g_50)',
+			'var(--palette_h_50)',
+			'var(--palette_i_50)',
+			'var(--palette_j_50)',
 		],
 		seed = minute_of_day(),
 		random = create_random_alea(seed),

src/lib/ThemeInput.svelte

@@ -35,7 +35,7 @@
 		<li class="row" role="none">
 			<button
 				type="button"
-				class={['theme-button color_a', {selected}]}
+				class={['theme-button palette_a', {selected}]}
 				role="menuitemradio"
 				aria-label="{theme.name} theme"
 				aria-checked={selected}

src/lib/alert.ts

@@ -9,6 +9,6 @@ export interface AlertStatusOptions {
 
 export const alert_status_options: Record<AlertStatus, AlertStatusOptions> = {
 	inform: {color: 'var(--text_70)', icon: '✻'},
-	help: {color: 'var(--color_b_50)', icon: '➺'},
-	error: {color: 'var(--color_c_50)', icon: '!?'},
+	help: {color: 'var(--palette_b_50)', icon: '➺'},
+	error: {color: 'var(--palette_c_50)', icon: '!?'},
 };

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)
 ```
 */
 
@@ -159,7 +161,7 @@ export const logo_fuz_util = {
 } satisfies SvgData;
 
 export const logo_tsv = {
-	label: 'a pixelated orange quill drawing a straight line',
+	label: 'a pixelated orange quill drawing a precise line',
 	fill: '#f4672f',
 	paths: [
 		{

src/routes/ThemeForm.svelte

@@ -33,9 +33,7 @@
 
 	const new_theme: Theme = $derived({name: new_name, variables: new_variables});
 
-	const code = $derived(
-		render_theme_style(new_theme, {empty_default_theme: false, specificity: 1}),
-	);
+	const code = $derived(render_theme_style(new_theme, {empty_default_theme: false}));
 
 	const light_count = $derived(new_variables.reduce((c, v) => (v.light ? c + 1 : c), 0));
 	const dark_count = $derived(new_variables.reduce((c, v) => (v.dark ? c + 1 : c), 0));

src/routes/docs/Alert/+page.svelte

@@ -87,11 +87,11 @@ export type AlertStatus = 'inform' | 'help' | 'error';"
 		/>
 		<Alert status="help">here's how to fix it</Alert>
 		<Code
-			content={`<Alert status="help" color="var(--color_d_50)">
+			content={`<Alert status="help" color="var(--palette_d_50)">
 	the <code>color</code> prop overrides the status color
 </Alert>`}
 		/>
-		<Alert status="help" color="var(--color_d_50)"
+		<Alert status="help" color="var(--palette_d_50)"
 			>the <code>color</code> prop overrides the status color</Alert
 		>
 	</TomeSection>

src/routes/docs/Contextmenu/ExampleBasic.svelte

@@ -53,14 +53,14 @@
 </${root_component_name}>
 ...markup without contextmenu behavior...`}
 				/>
-				<div><code class:color_g_5={greeted}>greeted = {greeted}</code></div>
+				<div><code class:palette_g_50={greeted}>greeted = {greeted}</code></div>
 				<div>
-					<code class:color_e_5={greeted_icon_snippet}
+					<code class:palette_e_50={greeted_icon_snippet}
 						>greeted_icon_snippet = {greeted_icon_snippet}</code
 					>
 				</div>
 				<div>
-					<code class:color_d_5={greeted_icon_string}
+					<code class:palette_d_50={greeted_icon_string}
 						>greeted_icon_string = {greeted_icon_string}</code
 					>
 				</div>

src/routes/docs/Contextmenu/ExampleCustomInstance.svelte

@@ -20,8 +20,11 @@
 
 	let selected_color: 'f' | 'g' | 'j' | undefined = $state.raw();
 
-	const selected_color_class = $derived(selected_color ? `color_${selected_color}_5` : undefined);
-	const selected_hue_class = $derived(selected_color ? `color_${selected_color}` : undefined);
+	// @fuz-classes palette_f_50 palette_g_50 palette_j_50 palette_f palette_g palette_j
+	const selected_color_class = $derived(
+		selected_color ? `palette_${selected_color}_50` : undefined,
+	);
+	const selected_hue_class = $derived(selected_color ? `palette_${selected_color}` : undefined);
 </script>
 
 <!-- eslint-disable svelte/no-useless-mustaches -->
@@ -38,19 +41,19 @@
 							run={() => {
 								selected_color = 'f';
 								return {ok: true, close: false};
-							}}><span class="color_f_50">option f</span></ContextmenuEntry
+							}}><span class="palette_f_50">option f</span></ContextmenuEntry
 						>
 						<ContextmenuEntry
 							run={() => {
 								selected_color = 'g';
 								return {ok: true, close: false};
-							}}><span class="color_g_50">option g</span></ContextmenuEntry
+							}}><span class="palette_g_50">option g</span></ContextmenuEntry
 						>
 						<ContextmenuEntry
 							run={() => {
 								selected_color = 'j';
 								return {ok: true, close: false};
-							}}><span class="color_j_50">option j</span></ContextmenuEntry
+							}}><span class="palette_j_50">option j</span></ContextmenuEntry
 						>
 						<ContextmenuEntry
 							run={() => {
@@ -87,7 +90,7 @@
 							<code> {contextmenu.x} && contextmenu.y === {contextmenu.y}</code>
 						</li>
 						{#if contextmenu.error}
-							<li class="color_error">Error: <code>{contextmenu.error}</code></li>
+							<li class="palette_c_50">Error: <code>{contextmenu.error}</code></li>
 						{/if}
 					</ul>
 				</div>

src/routes/docs/Contextmenu/ExampleDisableDefaultBehaviors.svelte

@@ -109,7 +109,7 @@
 {#snippet test_area()}
 	<div class="panel p_md mb_lg">
 		<p bind:this={text_el}>
-			Try <button type="button" onclick={select_text} class:color_h={toggled}
+			Try <button type="button" onclick={select_text} class:palette_h={toggled}
 				>selecting some text</button
 			> and opening the contextmenu in this panel.
 		</p>

src/routes/docs/Contextmenu/ExampleSelectText.svelte

@@ -41,30 +41,30 @@ Try selecting text and then opening the contextmenu on it.`;
 
 <ContextmenuRootComponent {contextmenu} scoped>
 	<TomeSection>
-		<div class:color_d_5={highlighted}>
+		<div class:palette_d_50={highlighted}>
 			<TomeSectionHeader text="Select text" />
 		</div>
 		<Contextmenu>
 			{#snippet entries()}
 				<ContextmenuEntry run={() => void (toggled = !toggled)}>Toggle something</ContextmenuEntry>
 			{/snippet}
-			<div class="panel p_md" class:color_g_5={highlighted}>
+			<div class="panel p_md" class:palette_g_50={highlighted}>
 				<div bind:this={text_el} class="mb_lg">
 					<p>
 						When the Fuz contextmenu opens and the user has selected text, the menu includes a <code
 							>copy text</code
 						> entry.
 					</p>
 					<p>
-						Try <button type="button" onclick={select_text} class:color_a={toggled}
+						Try <button type="button" onclick={select_text} class:palette_a={toggled}
 							>selecting text</button
 						> and then opening the contextmenu on it.
 					</p>
 				</div>
 				<label>
 					<input type="text" placeholder="paste text here?" bind:value />
 				</label>
-				<p class:color_g_5={highlighted}>
+				<p class:palette_g_50={highlighted}>
 					Opening the contextmenu on an <code>input</code> or <code>textarea</code> opens the
 					browser's default contextmenu.
 				</p>

src/routes/docs/HueInput/+page.svelte

@@ -23,7 +23,7 @@
 		<TomeSectionHeader text="With bind:value">With <code>bind:value</code></TomeSectionHeader>
 		<Code content={`<HueInput bind:value />`} />
 		<HueInput bind:value />
-		<div class="mt_md" style:--text_color="hsl({value} 62% 31%)">
+		<div class="mt_md" style:--text_color="oklch(0.45 0.11 {value})">
 			<code>bind:value === {value}</code>
 		</div>
 	</TomeSection>