chore: use .raw over ``

Author: ryanatkn

src/routes/+layout.svelte

@@ -22,7 +22,7 @@
 
 	library_context.set(new Library(library_json));
 
-	// let show_settings = $state(false);
+	// let show_settings = $state.raw(false);
 </script>
 
 <svelte:head>

src/routes/ThemeForm.svelte

@@ -40,7 +40,7 @@
 	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));
 
-	let selected_variable: StyleVariable | null = $state(null);
+	let selected_variable: StyleVariable | null = $state.raw(null);
 
 	const save = (): void => {
 		if (!changed) return;

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

@@ -44,7 +44,7 @@
 		'border_bottom_left_radius_md border_bottom_right_radius_xl',
 	];
 
-	let selected_intensity: IntensityVariant = $state('50');
+	let selected_intensity: IntensityVariant = $state.raw('50');
 
 	// @fuz-classes outline_width_focus outline_width_active
 	// @fuz-classes border_color_00 border_color_05 border_color_10 border_color_20 border_color_30 border_color_40 border_color_50 border_color_60 border_color_70 border_color_80 border_color_90 border_color_95 border_color_100

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

@@ -14,10 +14,10 @@
 
 	const tome = get_tome_by_name(LIBRARY_ITEM_NAME);
 
-	let clicked_button = $state(false);
+	let clicked_button = $state.raw(false);
 
-	let selected_button = $state(1);
-	let selected_deselectable_button = $state(true);
+	let selected_button = $state.raw(1);
+	let selected_deselectable_button = $state.raw(true);
 
 	// TODO probably want to put the buttons in a more consistent format so we can include `disabled` versions of each in a condensed format
 

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

@@ -18,19 +18,19 @@
 	// TODO extract this to where? (where is it used in the css? check all @keyframe)
 	const ANIMATION_DURATION_FAST = 91; // ms
 
-	let created_account = $state(false);
+	let created_account = $state.raw(false);
 
 	const faces = ['😊', '😑', '🤔', '😉'];
 
-	let username = $state('');
-	let password = $state('');
-	let lifestory = $state('');
+	let username = $state.raw('');
+	let password = $state.raw('');
+	let lifestory = $state.raw('');
 
 	const radio_items = ['a radio input', 'another radio input'];
-	let selected_radio_item = $state(radio_items[0]);
+	let selected_radio_item = $state.raw(radio_items[0]);
 
-	let checked1 = $state(false);
-	let checked2 = $state(true);
+	let checked1 = $state.raw(false);
+	let checked2 = $state.raw(true);
 </script>
 
 <!-- eslint-disable svelte/no-useless-mustaches -->

src/routes/docs/menu_item/todo.svelte

@@ -13,7 +13,7 @@
 
 	// TODO `role="menuitem"` ?
 
-	let clicked = $state('c');
+	let clicked = $state.raw('c');
 
 	const handled = (e: any): boolean => {
 		if (e.key === 'Enter' || e.key === ' ') {

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

@@ -22,7 +22,7 @@
 
 	const tome = get_tome_by_name(LIBRARY_ITEM_NAME);
 
-	let selected_intensity: IntensityVariant = $state('60');
+	let selected_intensity: IntensityVariant = $state.raw('60');
 
 	// @fuz-classes shadow_xs shadow_sm shadow_md shadow_lg shadow_xl shadow_top_xs shadow_top_sm shadow_top_md shadow_top_lg shadow_top_xl shadow_bottom_xs shadow_bottom_sm shadow_bottom_md shadow_bottom_lg shadow_bottom_xl shadow_inset_xs shadow_inset_sm shadow_inset_md shadow_inset_lg shadow_inset_xl shadow_inset_top_xs shadow_inset_top_sm shadow_inset_top_md shadow_inset_top_lg shadow_inset_top_xl shadow_inset_bottom_xs shadow_inset_bottom_sm shadow_inset_bottom_md shadow_inset_bottom_lg shadow_inset_bottom_xl
 	// @fuz-classes shadow_alpha_00 shadow_alpha_05 shadow_alpha_10 shadow_alpha_20 shadow_alpha_30 shadow_alpha_40 shadow_alpha_50 shadow_alpha_60 shadow_alpha_70 shadow_alpha_80 shadow_alpha_90 shadow_alpha_95 shadow_alpha_100

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

@@ -22,7 +22,7 @@
 	const themes = default_themes.slice();
 
 	// let show_create_theme_dialog = false;
-	let editing_theme: null | Theme = $state(null);
+	let editing_theme: null | Theme = $state.raw(null);
 </script>
 
 <TomeContent {tome}>

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

@@ -34,8 +34,8 @@
 	const computed_styles =
 		typeof window === 'undefined' ? null : window.getComputedStyle(document.documentElement);
 
-	let selected_font_weight = $state(400);
-	let selected_size = $state(3);
+	let selected_font_weight = $state.raw(400);
+	let selected_size = $state.raw(3);
 
 	// @fuz-classes font_family_sans font_family_serif font_family_mono