Revamp UI styling to remove accent color; improve tab navigation

frontend/src/components/panels/Document.vue

@@ -105,20 +105,22 @@
 					}
 				}
 
-				.color-solid {
-					fill: var(--color-f-white);
-				}
+				.icon-button:not(.active) {
+					.color-solid {
+						fill: var(--color-f-white);
+					}
 
-				.color-general {
-					fill: var(--color-data-general);
-				}
+					.color-general {
+						fill: var(--color-data-general);
+					}
 
-				.color-vector {
-					fill: var(--color-data-vector);
-				}
+					.color-vector {
+						fill: var(--color-data-vector);
+					}
 
-				.color-raster {
-					fill: var(--color-data-raster);
+					.color-raster {
+						fill: var(--color-data-raster);
+					}
 				}
 			}
 
@@ -190,6 +192,7 @@
 						pointer-events: auto;
 					}
 				}
+
 				foreignObject {
 					width: 10000px;
 					height: 10000px;
@@ -207,12 +210,12 @@
 						// Workaround to force Chrome to display the flashing text entry cursor when text is empty
 						padding-left: 1px;
 						margin-left: -1px;
-					}
 
-					div:focus {
-						border: none;
-						outline: none;
-						margin: -1px;
+						&:focus {
+							border: none;
+							outline: none; // Ok for contenteditable element
+							margin: -1px;
+						}
 					}
 				}
 			}

frontend/src/components/panels/LayerTree.vue

@@ -27,6 +27,7 @@
 						class="expand-arrow"
 						:class="{ expanded: listing.entry.layerMetadata.expanded }"
 						@click.stop="handleExpandArrowClick(listing.entry.path)"
+						tabindex="0"
 					></button>
 					<LayoutRow
 						class="layer"
@@ -128,7 +129,6 @@
 				width: 16px;
 				height: 100%;
 				padding: 0;
-				outline: none;
 				border: none;
 				position: relative;
 				background: none;
@@ -193,7 +193,7 @@
 						color: inherit;
 						background: none;
 						border: none;
-						outline: none;
+						outline: none; // Ok for input element
 						margin: 0;
 						padding: 0;
 						text-overflow: ellipsis;
@@ -243,7 +243,7 @@
 			}
 
 			&.insert-folder .layer {
-				outline: 3px solid var(--color-accent-hover);
+				outline: 3px solid var(--color-e-nearwhite);
 				outline-offset: -3px;
 			}
 		}
@@ -252,7 +252,7 @@
 			position: absolute;
 			// `left` is applied dynamically
 			right: 0;
-			background: var(--color-accent-hover);
+			background: var(--color-e-nearwhite);
 			margin-top: -2px;
 			height: 5px;
 			z-index: 1;