Add focused prop to TextButton

Replaced emphasized with focused in NodeCatalog

Author: Rohan2460

frontend/src/components/floating-menus/NodeCatalog.svelte

@@ -125,7 +125,7 @@
 return;
 }
 
-setTimeout(() => document.querySelector(".node-catalog button.emphasized")?.scrollIntoView({ block: "nearest" }), 0);
+setTimeout(() => document.querySelector(".node-catalog button.focused")?.scrollIntoView({ block: "nearest" }), 0);
 }
 
 onMount(() => {
@@ -147,7 +147,7 @@
 {disabled}
 label={nodeType.name}
 tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)}
-emphasized={nodeType == flatNodeList[focusedNodeIndex]}
+focused={nodeType == flatNodeList[focusedNodeIndex]}
 action={() => dispatch("selectNodeType", nodeType.name)}
 />
 {/each}

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -15,6 +15,7 @@
 export let icon: IconName | undefined = undefined;
 export let hoverIcon: IconName | undefined = undefined;
 export let emphasized = false;
+export let focused = false;
 export let flush = false;
 export let minWidth = 0;
 export let disabled = false;
@@ -54,6 +55,7 @@
 class:open={self?.open}
 class:hover-icon={hoverIcon && !disabled}
 class:emphasized
+class:focused
 class:disabled
 class:narrow
 class:flush
@@ -118,7 +120,8 @@
 }
 
 &:hover,
-&.open {
+&.open,
+&.focused {
 --button-background-color: var(--color-6-lowergray);
 --button-text-color: var(--color-f-white);
 }
@@ -143,7 +146,8 @@
 --button-text-color: var(--color-2-mildblack);
 
 &:hover,
-&.open {
+&.open,
+&.focused {
 --button-background-color: var(--color-f-white);
 }
 
@@ -157,7 +161,8 @@
 --button-text-color: var(--color-e-nearwhite);
 
 &:hover,
-&.open {
+&.open,
+&.focused {
 --button-background-color: var(--color-5-dullgray);
 }
 }