upgrade moss (#42)

.changeset/funny-meals-thank.md

@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+upgrade `@ryanatkn/moss@0.8.0` from `0.7.1`

package.json

@@ -41,11 +41,11 @@
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.0",
-    "@ryanatkn/belt": "^0.24.4",
+    "@ryanatkn/belt": "^0.24.5",
     "@ryanatkn/eslint-config": "^0.4.0",
     "@ryanatkn/fuz_code": "^0.15.2",
     "@ryanatkn/gro": "^0.130.0",
-    "@ryanatkn/moss": "^0.7.1",
+    "@ryanatkn/moss": "^0.8.0",
     "@sveltejs/adapter-static": "^3.0.2",
     "@sveltejs/kit": "^2.5.18",
     "@sveltejs/package": "^2.3.2",

src/lib/Copy_To_Clipboard.svelte

@@ -27,8 +27,8 @@
 	<button type="button" class="icon_button" style:font-size="var(--size_lg)" onclick={copy}
 		>📋</button
 	>
-	{#if copied}<small style:color="var(--color_b_5)">copied!</small>{/if}
-	{#if failed}<small style:color="var(--color_c_5)">failed</small>{/if}
+	{#if copied}<small class="color_b_5">copied!</small>{/if}
+	{#if failed}<small class="color_c_5">failed</small>{/if}
 </div>
 
 <style>

src/lib/Earbetter_Logo.svelte

@@ -22,7 +22,7 @@
 	}
 
 	const {
-		fill = 'var(--color_d_5)',
+		fill = 'hsl(var(--color_d_5))',
 		size,
 		width,
 		height,

src/lib/Fuz_Logo.svelte

@@ -32,7 +32,9 @@
 
 	const {project, fill, size, width, height, label, classes, path_attrs, attrs}: Props = $props();
 
-	const final_fill = $derived(project ? to_fuz_project_color(project) : fill ?? 'var(--color_f_5)');
+	const final_fill = $derived(
+		project ? to_fuz_project_color(project) : fill ?? 'hsl(var(--color_f_5))',
+	);
 	const final_label = $derived(
 		label ??
 			(project

src/lib/Library_Footer.svelte

@@ -45,7 +45,7 @@
 		border: var(--border_width) double var(--border_color);
 	}
 	.logo a:hover {
-		--border_color: var(--color_a_5);
+		--border_color: hsl(var(--color_a_5));
 	}
 	.root_url {
 		/* TODO messy */

src/lib/Moss_Logo.svelte

@@ -25,7 +25,7 @@
 	}
 
 	const {
-		fill = 'var(--color_b_5)',
+		fill = 'hsl(var(--color_b_5))',
 		size,
 		width,
 		height,

src/lib/Package_Detail.svelte

@@ -302,16 +302,16 @@
 		padding: var(--space_xs);
 	}
 	.ts {
-		--link_color: var(--color_a_5);
+		--link_color: hsl(var(--color_a_5));
 	}
 	.svelte {
-		--link_color: var(--color_e_5);
+		--link_color: hsl(var(--color_e_5));
 	}
 	.css {
-		--link_color: var(--color_b_5);
+		--link_color: hsl(var(--color_b_5));
 	}
 	.json {
-		--link_color: var(--color_f_5);
+		--link_color: hsl(var(--color_f_5));
 	}
 	/* TODO extract */
 	.declarations {
@@ -330,15 +330,15 @@
 		margin-right: var(--space_xs2);
 	}
 	.variable_declaration {
-		color: var(--color_d_5);
+		color: hsl(var(--color_d_5));
 	}
 	.function_declaration {
-		color: var(--color_c_5);
+		color: hsl(var(--color_c_5));
 	}
 	.type_declaration {
-		color: var(--color_g_5);
+		color: hsl(var(--color_g_5));
 	}
 	.class_declaration {
-		color: var(--color_f_5);
+		color: hsl(var(--color_f_5));
 	}
 </style>

src/lib/Spiders.svelte

@@ -22,13 +22,13 @@
 
 	const {
 		spiders = [
-			'var(--color_a_5)',
-			'var(--color_b_5)',
-			'var(--color_c_5)',
-			'var(--color_d_5)',
-			'var(--color_e_5)',
-			'var(--color_f_5)',
-			'var(--color_g_5)',
+			'hsl(var(--color_a_5))',
+			'hsl(var(--color_b_5))',
+			'hsl(var(--color_c_5))',
+			'hsl(var(--color_d_5))',
+			'hsl(var(--color_e_5))',
+			'hsl(var(--color_f_5))',
+			'hsl(var(--color_g_5))',
 		],
 		seed = minute_of_day(),
 		random = create_random_alea(seed),

src/lib/Spiderspace_Logo.svelte

@@ -25,7 +25,7 @@
 	}
 
 	const {
-		fill = 'var(--color_e_5)',
+		fill = 'hsl(var(--color_e_5))',
 		size,
 		width,
 		height,

src/lib/Webdevladder_Logo.svelte

@@ -22,7 +22,7 @@
 	}
 
 	const {
-		fill = 'var(--color_b_5)',
+		fill = 'hsl(var(--color_b_5))',
 		size,
 		width,
 		height,

src/lib/Zzz_Logo.svelte

@@ -22,7 +22,7 @@
 	}
 
 	const {
-		fill = 'var(--color_g_5)',
+		fill = 'hsl(var(--color_g_5))',
 		size,
 		width,
 		height,

src/lib/alert.ts

@@ -9,6 +9,6 @@ export interface Alert_Status_Options {
 
 export const alert_status_options: Record<Alert_Status, Alert_Status_Options> = {
 	inform: {color: 'var(--text_2)', icon: '✻'},
-	help: {color: 'var(--color_b_5)', icon: '➺'},
-	error: {color: 'var(--color_c_5)', icon: '!?'},
+	help: {color: 'hsl(var(--color_b_5))', icon: '➺'},
+	error: {color: 'hsl(var(--color_c_5))', icon: '!?'},
 };

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

@@ -83,11 +83,11 @@ export type Alert_Status = 'inform' | 'help' | 'error';"
 		/>
 		<Alert status="help">here's how to fix it</Alert>
 		<Code
-			content={`<Alert status="help" color="var(--color_d_5)">
+			content={`<Alert status="help" color="hsl(var(--color_d_5))">
 	the <code>color</code> prop overrides the status color
 </Alert>`}
 		/>
-		<Alert status="help" color="var(--color_d_5)"
+		<Alert status="help" color="hsl(var(--color_d_5))"
 			>the <code>color</code> prop overrides the status color</Alert
 		>
 	</section>

src/routes/package.ts

@@ -37,11 +37,11 @@ export const package_json = {
 	},
 	devDependencies: {
 		'@changesets/changelog-git': '^0.2.0',
-		'@ryanatkn/belt': '^0.24.4',
+		'@ryanatkn/belt': '^0.24.5',
 		'@ryanatkn/eslint-config': '^0.4.0',
 		'@ryanatkn/fuz_code': '^0.15.2',
 		'@ryanatkn/gro': '^0.130.0',
-		'@ryanatkn/moss': '^0.7.1',
+		'@ryanatkn/moss': '^0.8.0',
 		'@sveltejs/adapter-static': '^3.0.2',
 		'@sveltejs/kit': '^2.5.18',
 		'@sveltejs/package': '^2.3.2',