Improve visuals of Tag component

ts/editor/Tag.svelte

@@ -3,7 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { createEventDispatcher } from "svelte";
+    import { getContext, createEventDispatcher } from "svelte";
+    import { nightModeKey } from "components/contextKeys";
     import Badge from "components/Badge.svelte";
     import { deleteIcon } from "./icons";
 
@@ -11,22 +12,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const dispatch = createEventDispatcher();
 
-    function deleteTag(event: Event): void {
+    function deleteTag(): void {
         dispatch("tagdelete");
-        event.stopPropagation();
     }
 
-    let isBlink: boolean = false;
+    let flashing: boolean = false;
 
-    export function blink() {
+    export function flash() {
-        isBlink = true;
+        flashing = true;
-        setTimeout(() => (isBlink = false), 300);
+        setTimeout(() => (flashing = false), 300);
     }
+
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
 <button
-    class="d-inline-flex align-items-center tag text-nowrap rounded ps-2 pe-1 me-1"
+    class="btn d-inline-flex align-items-center text-nowrap rounded ps-2 pe-1 me-1"
-    class:blink={isBlink}
+    class:flashing
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     tabindex="-1"
     on:click
 >
@@ -37,24 +41,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
-    $white-translucent: rgba(255, 255, 255, 0.5);
+    @use "ts/sass/button_mixins" as button;
 
-    @keyframes blink {
+    @keyframes flash {
         0% {
-            filter: brightness(1);
+            filter: invert(0);
         }
         50% {
-            filter: brightness(2);
+            filter: invert(0.4);
         }
         100% {
-            filter: brightness(1);
+            filter: invert(0);
         }
     }
 
-    .tag :global(.delete-icon > svg:hover) {
-        background-color: $white-translucent;
-    }
-
     button {
         padding: 0;
 
@@ -63,8 +63,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             outline: none;
         }
 
-        &.blink {
+        &.flashing {
-            animation: blink 0.3s linear;
+            animation: flash 0.3s linear;
+        }
+    }
+
+    @include button.btn-day($with-active: false);
+    @include button.btn-night($with-active: false);
+
+    $white-translucent: rgba(255 255 255 / 0.5);
+    $dark-translucent: rgba(0 0 0 / 0.2);
+
+    :global(.delete-icon > svg:hover) {
+        .btn-day & {
+            background-color: $dark-translucent;
+        }
+
+        .btn-night & {
+            background-color: $white-translucent;
         }
     }
 </style>

ts/editor/TagEditor.svelte

@@ -16,11 +16,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { attachId, getName } from "./tags";
 
     export let size = isApplePlatform() ? 1.6 : 2.0;
+    export let tags: TagType[] = [];
 
     export let suggestions = ["en::idioms", "anki::functionality", "math"];
 
-    export let tags: TagType[] = [];
-
     export function resetTags(names: string[]): void {
         tags = names.map(attachId);
     }
@@ -93,7 +92,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             contained
         );
         if (contained >= 0) {
-            tags[contained].blink();
+            tags[contained].flash();
             return false;
         }
 
@@ -253,7 +252,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {:else}
                     <Tag
                         name={tag.name}
-                        bind:blink={tag.blink}
+                        bind:flash={tag.flash}
                         on:click={() => (active = index)}
                         on:tagdelete={() => {
                             deleteTagAt(index);

ts/editor/tags.ts

@@ -18,7 +18,7 @@ export function normalizeTagname(tagname: string): string {
 export interface Tag {
     id: string;
     name: string;
-    blink: () => void;
+    flash: () => void;
 }
 
 const noop = () => {};
@@ -27,7 +27,7 @@ export function attachId(name: string): Tag {
     return {
         id: Math.random().toString(36).substring(2),
         name,
-        blink: noop,
+        flash: noop,
     };
 }