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:(bg-primaryDark text-secondaryDark);
-  @apply hover: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
+      hover:(bg-primaryDark
-      focus:bg-primaryDark focus:outline-none focus:text-secondaryDark
+      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:(text-secondaryDark outline-none);
-    @apply focus: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',

layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-screen w-screen">
     <Splitpanes :dbl-click-splitter="false" horizontal>
-      <Pane class="flex flex-1 !overflow-auto">
+      <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
         <Splitpanes
           :dbl-click-splitter="false"
           :horizontal="!(windowInnerWidth >= 768)"
@@ -13,14 +13,16 @@
           >
             <AppSidenav />
           </Pane>
-          <Pane class="flex flex-1 !overflow-auto">
+          <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
             <Splitpanes :dbl-click-splitter="false" horizontal>
               <Pane v-if="!ZEN_MODE" style="height: auto">
                 <!-- <AppAnnouncement /> -->
                 <AppHeader />
               </Pane>
-              <Pane class="flex flex-1 !overflow-auto">
+              <Pane class="flex flex-1 hide-scrollbar !overflow-auto">
-                <nuxt class="flex flex-1" />
+                <main class="flex flex-1">
+                  <nuxt class="flex flex-1" />
+                </main>
               </Pane>
             </Splitpanes>
           </Pane>

pages/graphql.vue

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

pages/settings.vue

@@ -323,7 +323,8 @@
                     py-2
                     px-4
                     block
-                    focus:border-accent focus:outline-none
+                    focus:(border-accent
+                    outline-none)
                   "
                   type="url"
                   :disabled="!PROXY_ENABLED"

windi.config.js

@@ -36,11 +36,11 @@ export default defineConfig({
         gradientVia: "var(--gradient-via-color)",
         gradientTo: "var(--gradient-to-color)",
       },
-    },
+      fontFamily: {
-    fontFamily: {
+        sans: "var(--font-sans)",
-      sans: "var(--font-sans)",
+        mono: "var(--font-mono)",
-      mono: "var(--font-mono)",
+        icon: "var(--font-icon)",
-      icon: "var(--font-icon)",
+      },
     },
   },
 })