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

@@ -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);

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

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);