Reduce complexity of color changes for tab and button selection.

Author: wparad

src/styles/input-styles.js

@@ -37,10 +37,17 @@ export default css`
 .m-btn.small { padding:5px 12px; }
 .m-btn.tiny { padding:5px 6px; }
 .m-btn.circle { border-radius: 50%; }
+
 .m-btn:hover,
-.m-btn:focus-visible {
+.m-btn:focus-visible,
+.m-btn.outline-primary:focus-visible {
+  color: var(--secondary-color);
   border-color: var(--secondary-color);
+}
+.m-btn.primary:focus-visible {
   color: var(--secondary-color);
+  background-color: var(--primary-color);
+  border-color: var(--secondary-color);
 }
 .m-btn.nav { border: 2px solid var(--secondary-color); }
 .m-btn.nav:hover,

src/styles/tab-styles.js

@@ -22,7 +22,6 @@ export default css`
   color: var(--light-fg);
   background-color: transparent;
   white-space: nowrap;
-  cursor: pointer;
   outline:none;
   font-family:var(--font-regular); 
   font-size:var(--font-size-small);
@@ -35,16 +34,16 @@ export default css`
   color:var(--primary-color);
 }
 
+.tab-btn:not(.active) {
+  cursor: pointer;
+}
+
 .tab-btn:hover {
   color:var(--primary-color);
 }
-.tab-btn.active:hover {
-  color:var(--secondary-color);
-}
 
 .tab-btn:focus-visible {
-  outline:thin solid var(--secondary-color);
-  outline-offset: -2px;
+  color:var(--secondary-color);
 }
 
 .tab-content {