improved ui non-mouse focus callout

assets/scss/styles/base.scss

@@ -5,6 +5,7 @@
 @import "./vars/borders";
 @import "./vars/gradients";
 @import "./vars/transitions";
+@import "./vars/animations";
 @import "./mixins/typography";
 @import "./mixins/transitions";
 @import "./mixins/helpers";

assets/scss/styles/components/Config.scss

@@ -114,17 +114,18 @@
 
     .config-option__tab-label {
         @extend %label-sm;
+        @include trans-colors-opa;
         display: block;
-        padding: space(12) 0 space(8);
+        position: relative;
+        padding: space(8) 0;
         height: auto;
-        margin: 0 space(12);
+        margin: space(4) space(12) 0;
-        margin-right: space(16);
         color: $color-text-inactive;
         tab-index: none;
-        transition: color $transition-quick;
 
         &:hover {
             cursor: pointer;
+            color: $color-text;
         }
     }
 
@@ -138,13 +139,20 @@
         &:not(:disabled) {
             &:checked + .config-option__tab-label {
                 border-bottom: 1dp;
-                border-color: $color-border-hard;
+                border-color: $color-text;
+                color: $color-text;
     
                 &:hover {
                     cursor: default;
                 }
             }
     
+            .rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label {
+                animation: $focus-anim-border;
+                color: $color-secondary;
+                border-color: $color-secondary;
+            }
+
             &:focus + .config-option__tab-label,
             &:hover + .config-option__tab-label {
                 color: $color-text;
@@ -179,7 +187,7 @@
         
         .rmlui-window:not([mouse-active]) &:focus {
             @include border($color-a);
-            background-color: $color-secondary;
+            animation: $focus-anim-bg;
         }
 
         &:hover {
@@ -201,7 +209,7 @@
 
 .config-option__details {
     @extend %label-xs;
-    color: $color-secondary;
+    color: $color-primary;
     margin: space(14) space(12) 0;
     height: space(18);
 }

assets/scss/styles/components/Tabs.scss

@@ -37,6 +37,14 @@
         }
     }
 
+    .rmlui-window:not([mouse-active]) &:focus {
+        animation: $focus-anim-border;
+
+        &:selected .tab__indicator {
+            animation: $focus-anim-bg;
+        }
+    }
+
     &:focus, &:hover {
         cursor: pointer;
         color: $color-text;

assets/scss/styles/global.scss

@@ -80,3 +80,42 @@ h3 {
 button {
     background-color: $color-primary-d;
 }
+
+@keyframes blue-pulse {
+	0% {
+		color: $color-secondary;
+	}
+	50% {
+		color: $color-secondary-l;
+	}
+	to { 
+		color: $color-secondary;
+	}
+}
+
+@keyframes blue-pulse-with-border {
+	0% {
+		color: $color-secondary;
+		border-color: $color-secondary;
+	}
+	50% {
+		color: $color-secondary-l;
+		border-color: $color-secondary-l;
+	}
+	to { 
+		color: $color-secondary;
+		border-color: $color-secondary;
+	}
+}
+
+@keyframes blue-pulse-background {
+	0% {
+		background-color: $color-secondary;
+	}
+	50% {
+		background-color: $color-secondary-l;
+	}
+	to { 
+		background-color: $color-secondary;
+	}
+}

assets/scss/styles/vars/_animations.scss

@@ -0,0 +1,4 @@
+
+$focus-anim: blue-pulse-with-border 0.75s infinite;
+$focus-anim-border: blue-pulse 0.75s infinite;
+$focus-anim-bg: blue-pulse-background 0.75s infinite;