fix: compose with focus and text hide

index.css

@@ -30,6 +30,22 @@ li {
   color: var(--primary-color);
 }
 
+.no-focus.text-hide,
+.no-focus.text-hide a,
+.no-focus.text-hide a:visited,
+.no-focus.text-hide a:focus,
+.no-focus.text-hide a:focus-visible {
+  color: var(--primary-color-no-focus);
+}
+
+.focus.text-hide,
+.focus.text-hide a,
+.focus.text-hide a:visited,
+.focus.text-hide a:focus,
+.focus.text-hide a:focus-visible {
+  color: var(--color);
+}
+
 .customer-satisfaction-roof-parent {
   filter: url(#round);
   /* Making the triangle fit the rest of the house */
@@ -181,7 +197,14 @@ details.hud li {
 
 .raibow {
   text-decoration: underline;
-  background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
+  background: linear-gradient(
+    to right,
+    #6666ff,
+    #0099ff,
+    #00ff00,
+    #ff3399,
+    #6666ff
+  );
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
@@ -189,9 +212,7 @@ details.hud li {
   background-size: 400% 100%;
 }
 
-
 @keyframes rainbow-animation {
-
   0%,
   100% {
     background-position: 0 0;
@@ -200,4 +221,4 @@ details.hud li {
   50% {
     background-position: 100% 0;
   }
-}
+}

main.ts

@@ -50,7 +50,9 @@ if (focusElements.length > 0) {
       focusable.classList.contains(element)
     )
 
-    if (!elementToFocus) {
+    if (elementToFocus) {
+      focusable.classList.add('focus')
+    } else {
       focusable.classList.add('no-focus')
     }
   })