fix: Don't change text color on focus

1 files changed, 9 insertions, 10 deletions

diff --git a/code/app/src/components/badge.svelte b/code/app/src/components/badge.svelte
index e89ef36..f967c2d 100644
--- a/code/app/src/components/badge.svelte
+++ b/code/app/src/components/badge.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {createEventDispatcher} from "svelte";
+    import { createEventDispatcher } from "svelte";
 
     export let id: string | undefined = undefined;
     export let type: "default" | "red" | "yellow" | "green" | "blue" | "tame" = "default";
@@ -17,7 +17,7 @@
     const dispatch = createEventDispatcher();
 
     function handle_remove(event) {
-        dispatch("remove", {event, id, text});
+        dispatch("remove", { event, id, text });
     }
 
     $: switch (type) {
@@ -53,24 +53,23 @@
     }
 </script>
 
-<span class="inline-flex items-center font-medium {uppercase ? 'uppercase' : ''} bg-{colorName}-100 text-{colorName}-800 {sizeClass}"
-      {id}>
+<span class="inline-flex items-center font-medium {uppercase ? 'uppercase' : ''} bg-{colorName}-100 text-{colorName}-800 {sizeClass}" {id}>
     {#if withDot}
         <svg class="{dotSizeClass} text-{colorName}-400" fill="currentColor" viewBox="0 0 8 8">
-            <circle cx="4" cy="4" r="3"/>
+            <circle cx="4" cy="4" r="3" />
         </svg>
     {/if}
     {text}
     {#if removable}
         <button
-                on:click={handle_remove}
-                tabindex={parseInt(tabindex)}
-                type="button"
-                class="ml-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-{colorName}-400 hover:bg-{colorName}-200 hover:text-{colorName}-500 focus:bg-{colorName}-500 focus:text-white focus:outline-none"
+            on:click={handle_remove}
+            tabindex={parseInt(tabindex)}
+            type="button"
+            class="ml-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-{colorName}-400 hover:bg-{colorName}-200 hover:text-{colorName}-500 focus:bg-{colorName}-500 focus:outline-none"
         >
             <span class="sr-only">Remove badge</span>
             <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
-                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7"/>
+                <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
             </svg>
         </button>
     {/if}