upgrade fuz_css (#19)

Author: ryanatkn

.github/workflows/check.yml

@@ -27,5 +27,4 @@ jobs:
       - run: cp src/lib/server/.env.development.example .env.development
       - run: cp src/lib/server/.env.production.example .env.production
       - run: npx svelte-kit sync
-      - run: npx @ryanatkn/gro check --workspace
-      - run: npx @ryanatkn/gro build
+      - run: npx @ryanatkn/gro check --workspace --build

package-lock.json

@@ -37,16 +37,16 @@
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.1",
-    "@fuzdev/fuz_code": "^0.40.0",
-    "@fuzdev/fuz_css": "^0.44.1",
-    "@fuzdev/fuz_ui": "^0.179.0",
-    "@fuzdev/fuz_util": "^0.45.3",
+    "@fuzdev/fuz_code": "^0.41.0",
+    "@fuzdev/fuz_css": "^0.45.0",
+    "@fuzdev/fuz_ui": "^0.180.0",
+    "@fuzdev/fuz_util": "^0.48.2",
     "@ryanatkn/eslint-config": "^0.9.0",
-    "@ryanatkn/gro": "^0.186.0",
+    "@ryanatkn/gro": "^0.189.3",
     "@sveltejs/adapter-node": "^5.4.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.1",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/kit": "^2.50.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/node": "^24.10.1",
     "@webref/css": "^8.2.0",
     "eslint": "^9.39.1",
@@ -55,8 +55,8 @@
     "ollama": "^0.6.3",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.1",
-    "svelte": "^5.45.6",
-    "svelte-check": "^4.3.4",
+    "svelte": "^5.48.5",
+    "svelte-check": "^4.3.5",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.1",

package.json

@@ -96,7 +96,7 @@
 							icon="svg"
 							icon_props={{size: 'var(--font_size_sm)'}}
 							show_name
-						/>{#if provider_error}<span class="color_c_5 ml_sm"
+						/>{#if provider_error}<span class="color_c_50 ml_sm"
 								><Glyph glyph={GLYPH_ERROR} /> {provider_error}</span
 							>{/if}</small
 					>
@@ -123,7 +123,7 @@
 						{pending}
 						disabled={send_disabled}
 						onclick={send}
-						class="plain {provider_error ? ' color_c_5' : ''}"
+						class="plain {provider_error ? ' color_c_50' : ''}"
 						title={provider?.available
 							? `send ${input_token_count} tokens to ${thread.model_name}`
 							: (provider_error ?? undefined)}
@@ -150,7 +150,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--space_md);
-		background-color: var(--bg);
+		background-color: var(--shade_00);
 		border-radius: var(--border_radius_xs);
 	}
 

src/lib/ChatThread.svelte

@@ -37,7 +37,7 @@
 				{/each}
 			</menu>
 		</div>
-		<div class="flex:1 p_xs fg_1">
+		<div class="flex:1 p_xs shade_10">
 			<header class="font_size_lg text-align:center mb_xs">remove by tag</header>
 			<menu class="unstyled column">
 				{#each tags as tag (tag)}

src/lib/ChatThreadManageByTag.svelte

@@ -83,7 +83,7 @@
 {/snippet}
 
 <style>
-	/* TODO these are a hack, fix after changing fuz_css to opaque bg colors (and use color_c_2 or something) */
+	/* TODO these are a hack, fix after changing fuz_css to opaque surface colors (and use color_c_20 or something) */
 	button {
 		background-color: #fff;
 	}

src/lib/ConfirmButton.svelte

@@ -21,4 +21,4 @@
 	style:height
 	style:min-height={min_height}
 	style:max-height={max_height}
-	class="flex:1 width:100% overflow:auto scrollbar-width:thin border_radius_xs font_family_sans font_size_sm fg_1 px_md py_xs {attrs?.class}">{content}</pre>
+	class="flex:1 width:100% overflow:auto scrollbar-width:thin border_radius_xs font_family_sans font_size_sm shade_10 px_md py_xs {attrs?.class}">{content}</pre>

src/lib/ContentPreview.svelte

@@ -123,14 +123,14 @@
 								<Svg
 									data={logo_zzz}
 									size="var(--icon_size_md)"
-									fill={app.futuremode ? 'var(--color_h_5)' : undefined}
+									fill={app.futuremode ? 'var(--color_h_50)' : undefined}
 									style="transition: transform 200ms ease"
 									class={app.futuremode ? 'transform:scaleX(-1)' : ''}
 								/>
 							</NavLink>
 						</div>
 					{:else}
-						<div class="font_size_xl font_family_serif mt_xl7 mb_md text_color_3">
+						<div class="font_size_xl font_family_serif mt_xl7 mb_md text_70">
 							{section.group}
 						</div>
 					{/if}
@@ -145,7 +145,7 @@
 										<span class="icon_xs">
 											<Svg
 												data={link.icon}
-												fill={selected ? 'var(--link_color)' : 'var(--text_color_1)'}
+												fill={selected ? 'var(--link_color)' : 'var(--text_90)'}
 												size="var(--icon_size_xs)"
 											/>
 										</span>

src/lib/Dashboard.svelte

@@ -18,7 +18,7 @@
 		<div class="panel p_md flex:1 width_atleast_sm" style:max-width="480px">
 			<h3 class="mt_0 mb_lg display:flex align-items:center justify-content:space-between">
 				<a
-					class="font-weight:500 text_color_2"
+					class="font-weight:500 text_80"
 					href={/* eslint-disable-line svelte/no-navigation-without-resolve */ to_nav_link_href(
 						app,
 						'chats',
@@ -57,7 +57,7 @@
 		<div class="panel p_md flex:1 width_atleast_sm" style:max-width="480px">
 			<h3 class="mt_0 mb_lg display:flex align-items:center justify-content:space-between">
 				<a
-					class="font-weight:500 text_color_2"
+					class="font-weight:500 text_80"
 					href={/* eslint-disable-line svelte/no-navigation-without-resolve */ to_nav_link_href(
 						app,
 						'prompts',
@@ -94,7 +94,7 @@
 		</div>
 		<div class="panel p_md flex:1 width_atleast_sm" style:max-width="480px">
 			<div class="mb_lg">
-				<a href={resolve('/providers')} class="text_color_2"
+				<a href={resolve('/providers')} class="text_80"
 					><Glyph glyph={GLYPH_PROVIDER} />
 					<h3 class="display:inline my_0">providers</h3></a
 				>
@@ -117,7 +117,7 @@
 		</div>
 		<div class="panel p_md flex:1 width_atleast_sm" style:max-width="480px">
 			<div class="mb_lg">
-				<a href={resolve('/models')} class="text_color_2"
+				<a href={resolve('/models')} class="text_80"
 					><Glyph glyph={GLYPH_MODEL} />
 					<h3 class="display:inline my_0">models</h3></a
 				>