refactor(ui): group windi classes

components/app/Sidenav.vue

@@ -62,8 +62,7 @@ export default {
   @apply items-center;
   @apply justify-center;
   @apply transition;
-  @apply hover:bg-primaryDark;
-  @apply hover:text-secondaryDark;
+  @apply hover:(bg-primaryDark text-secondaryDark);
 
   .material-icons,
   .svg-icons {

components/button/Primary.vue

@@ -14,7 +14,7 @@
     "
     :class="[
       color
-        ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
+        ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus:(text-${color}-900 bg-${color}-300)`
         : `text-accentContrast bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',

components/button/Secondary.vue

@@ -10,12 +10,12 @@
       inline-flex
       items-center
       justify-center
-      focus:outline-none
       hover:bg-primaryDark
+      focus:outline-none
     "
     :class="[
       color
-        ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
+        ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
         : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
       label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',

components/realtime/Mqtt.vue

@@ -22,7 +22,8 @@
                     px-4
                     transition
                     truncate
-                    focus:border-accent focus:outline-none
+                    focus:(border-accent
+                    outline-none)
                   "
                   :placeholder="$t('url')"
                 />

components/realtime/Socketio.vue

@@ -25,7 +25,8 @@
                     px-4
                     transition
                     truncate
-                    focus:border-accent focus:outline-none
+                    focus:(border-accent
+                    outline-none)
                   "
                   :placeholder="$t('url')"
                   @keyup.enter="urlValid ? toggleConnection() : null"
@@ -45,7 +46,8 @@
                     px-4
                     transition
                     truncate
-                    focus:border-accent focus:outline-none
+                    focus:(border-accent
+                    outline-none)
                   "
                   spellcheck="false"
                 />

components/realtime/Sse.vue

@@ -21,7 +21,8 @@
               px-4
               transition
               truncate
-              focus:border-accent focus:outline-none
+              focus:(border-accent
+              outline-none)
             "
             :placeholder="$t('url')"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -47,7 +48,8 @@
               px-4
               transition
               truncate
-              focus:border-accent focus:outline-none
+              focus:(border-accent
+              outline-none)
             "
             spellcheck="false"
           />

components/realtime/Websocket.vue

@@ -20,7 +20,8 @@
                     px-4
                     transition
                     truncate
-                    focus:border-accent focus:outline-none
+                    focus:(border-accent
+                    outline-none)
                   "
                   type="url"
                   spellcheck="false"

components/smart/Item.vue

@@ -11,8 +11,11 @@
       transition
       inline-flex
       items-center
-      hover:bg-primaryDark hover:text-secondaryDark
-      focus:bg-primaryDark focus:outline-none focus:text-secondaryDark
+      hover:(bg-primaryDark
+      text-secondaryDark)
+      focus:(bg-primaryDark
+      outline-none
+      text-secondaryDark)
     "
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },

components/smart/Tabs.vue

@@ -86,8 +86,7 @@ export default {
     @apply cursor-pointer;
     @apply transition;
     @apply hover:text-secondaryDark;
-    @apply focus:text-secondaryDark;
-    @apply focus:outline-none;
+    @apply focus:(text-secondaryDark outline-none);
 
     .tab-info {
       @apply inline-flex;
@@ -118,6 +117,10 @@ export default {
       @apply mr-4;
     }
 
+    &:focus::after {
+      @apply bg-divider;
+    }
+
     &.active {
       @apply text-accent;
       @apply border-accent;

components/tab/Secondary.vue

@@ -11,9 +11,9 @@
       transition
       inline-flex
       items-center
-      focus:outline-none
       hover:translate-x-2
-      focus:translate-x-2
+      focus:(outline-none
+      translate-x-2)
     "
     :class="[
       label ? 'px-3' : 'px-2',