From 57bc913304ff3cc67af1e6e6e2b42f66ccace8a6 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Tue, 17 Jun 2025 14:43:07 +0200
Subject: [PATCH] Fix tag swatches regressions. Resolve #5322

Fixes missing tag swatches borders, a regression due to a change of the
default values for the `focus-states` mixin in #4961 (61b62d0).

Also introduces opaque tag colors so that tag swatches are not
semi-transparent.
---
 scss/abstracts/_mixins.scss     |  5 +++++
 scss/abstracts/_variables.scss  | 18 +++++++++---------
 scss/components/_item-tree.scss |  2 +-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss
index 21867de136..ee29b33512 100644
--- a/scss/abstracts/_mixins.scss
+++ b/scss/abstracts/_mixins.scss
@@ -357,6 +357,11 @@
 		#{color.alpha(map.get($colors, "color-menu")) * color.blue(map.get($colors, "color-menu"))}
 	);
 
+	// opaque tag colors for tag swatches
+	@each $tag in "blue", "gray", "green", "indigo", "magenta", "orange", "plum", "purple", "red", "teal", "yellow", {
+		--tag-#{$tag}-opaque: #{color.change(map.get($colors, "tag-#{$tag}"), $alpha: 1)};
+	}
+
 	// background materials
 	--material-background: var(--color-background);
 	--material-background50: var(--color-background50);
diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss
index 01495e8e37..c4b0543de2 100644
--- a/scss/abstracts/_variables.scss
+++ b/scss/abstracts/_variables.scss
@@ -97,15 +97,15 @@ $item-pane-sections: (
 );
 
 $tagColorsLookup: (
-	'#ff6666': --tag-red,
-	'#ff8c19': --tag-orange,
-	'#999999': --tag-gray,
-	'#5fb236': --tag-green,
-	'#009980': --tag-teal,
-	'#2ea8e5': --tag-blue,
-	'#576dd9': --tag-indigo,
-	'#a28ae5': --tag-purple,
-	'#a6507b': --tag-plum,
+	'#ff6666': --tag-red-opaque,
+	'#ff8c19': --tag-orange-opaque,
+	'#999999': --tag-gray-opaque,
+	'#5fb236': --tag-green-opaque,
+	'#009980': --tag-teal-opaque,
+	'#2ea8e5': --tag-blue-opaque,
+	'#576dd9': --tag-indigo-opaque,
+	'#a28ae5': --tag-purple-opaque,
+	'#a6507b': --tag-plum-opaque,
 );
 
 // Layout constants
diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss
index 59056a7011..58fcb78759 100644
--- a/scss/components/_item-tree.scss
+++ b/scss/components/_item-tree.scss
@@ -137,7 +137,7 @@
 						}
 					}
 
-					@include focus-states using($color) {
+					@include focus-states('.row.selected', '.virtualized-table:focus-within') using($color) {
 						@if $color =="white" {
 							background: url("chrome://zotero/skin/tag-circle-border.svg") no-repeat center/contain;
 							stroke: var(--accent-white);