From b628e9df75c309bffe71f1f3a381a44cd9cc4741 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 8 Sep 2021 01:18:34 +0200
Subject: [PATCH] Use new style highlight for selected tags

---
 ts/editor/AddTagBadge.svelte | 2 +-
 ts/editor/Tag.svelte         | 6 +++++-
 ts/editor/TagEditor.svelte   | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ts/editor/AddTagBadge.svelte b/ts/editor/AddTagBadge.svelte
index a75fc9e3d..086a36bb0 100644
--- a/ts/editor/AddTagBadge.svelte
+++ b/ts/editor/AddTagBadge.svelte
@@ -46,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         :global(svg) {
-            padding: 1px;
+            padding: 0px 1px 2px;
             cursor: pointer;
             fill: currentColor;
             opacity: 0.6;
diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte
index ef38ae6b5..3540c2115 100644
--- a/ts/editor/Tag.svelte
+++ b/ts/editor/Tag.svelte
@@ -108,6 +108,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         &.tag {
+            --border-color: var(--medium-border);
+
+            border: 1px solid var(--border-color) !important;
             border-radius: 5px;
         }
 
@@ -124,7 +127,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         &.selected {
-            box-shadow: 0 0 0 0.25rem transparentize(button.$focus-color, 0.5) !important;
+            box-shadow: 0 0 0 2px var(--focus-shadow);
+            --border-color: var(--focus-border);
         }
     }
 
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 93227cdf4..c7c9e5611 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -374,12 +374,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: shortenTags = shortenTags || assumedRows > 2;
 </script>
 
-<Spacer --height={`${height}px`} />
+<Spacer --height="{height}px" />
 
 <StickyBottom class="d-flex" bind:height>
     {#if !wrap}
         <TagOptionsBadge
-            --buttons-size={`${size}rem`}
+            --buttons-size="{size}rem"
             showSelectionsOptions={tags.some((tag) => tag.selected)}
             bind:badgeHeight
             on:tagselectall={selectAllTags}