Sweep v4 incompatibilities and restore v2 default border color

Author: n-lark

frontend/src/components/DropdownMenu.vue

@@ -20,7 +20,7 @@
                 <MenuItems
                     v-if="open"
                     ref="menu-items"
-                    class="z-1000 fixed bg-white rounded overflow-hidden shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
+                    class="z-1000 fixed bg-white rounded overflow-hidden shadow-lg ring-1 ring-black/10 focus:outline-hidden"
                     :style="teleportedStyle"
                 >
                     <div class="apx-1 apy-1">

frontend/src/index.css

@@ -2,6 +2,14 @@
 @config "../../config/tailwind.config.js";
 
 @layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentColor);
+    }
+
     /* .forge-block {
         @apply bg-white;
         @apply shadow;
@@ -39,7 +47,7 @@
         @apply inline-flex;
         @apply items-center;
         @apply text-sm;
-        @apply focus:outline-none;
+        @apply focus:outline-hidden;
         @apply focus:ring-2;
         @apply focus:ring-offset-2;
         @apply focus:ring-offset-gray-600;
@@ -64,7 +72,7 @@
         @apply inline-flex;
         @apply items-center;
         @apply text-sm;
-        @apply focus:outline-none;
+        @apply focus:outline-hidden;
         @apply focus:ring-2;
         @apply focus:ring-offset-2;
         @apply focus:ring-offset-gray-600;
@@ -88,7 +96,7 @@
         @apply inline-flex;
         @apply items-center;
         @apply text-sm;
-        @apply focus:outline-none;
+        @apply focus:outline-hidden;
         @apply focus:ring-2;
         @apply focus:ring-offset-2;
         @apply focus:ring-offset-gray-600;
@@ -112,7 +120,7 @@
         @apply inline-flex;
         @apply items-center;
         @apply text-sm;
-        @apply focus:outline-none;
+        @apply focus:outline-hidden;
         @apply focus:ring-2;
         @apply focus:ring-offset-2;
         @apply focus:ring-offset-gray-600;
@@ -136,7 +144,7 @@
         @apply inline-flex;
         @apply items-center;
         @apply text-sm;
-        @apply focus:outline-none;
+        @apply focus:outline-hidden;
         @apply focus:ring-2;
         @apply focus:ring-offset-2;
         @apply focus:ring-offset-gray-600;
@@ -161,7 +169,7 @@
         @apply inline-flex;
         @apply items-center;
         @apply text-sm;
-        @apply focus:outline-none;
+        @apply focus:outline-hidden;
         @apply focus:ring-2;
         @apply focus:ring-offset-2;
         @apply focus:ring-offset-gray-600;
@@ -335,7 +343,7 @@
         @apply py-1;
         @apply border;
         @apply border-gray-300;
-        @apply placeholder-gray-500;
+        @apply placeholder:text-gray-500;
         @apply text-gray-600;
     }
     input[type="radio"],
@@ -353,7 +361,7 @@
     input[type="checkbox"]:focus,
     select:focus,
     textarea:focus {
-        @apply outline-none;
+        @apply outline-hidden;
         @apply ring-0;
         @apply border-indigo-500;
     }

frontend/src/ui-components/components/tabs/Tabs.vue

@@ -5,7 +5,7 @@
                 <ChevronLeftIcon class="ff-icon" />
                 <ChevronLeftIcon class="ff-icon ff-icon-second" />
             </MenuButton>
-            <MenuItems class="z-50 absolute left-0 top-full origin-top-left mt-1 max-h-96 overflow-y-auto bg-white divide-y divide-gray-100 rounded shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none" style="max-width: min(14rem, calc(100vw - 1rem)); width: 14rem;">
+            <MenuItems class="z-50 absolute left-0 top-full origin-top-left mt-1 max-h-96 overflow-y-auto bg-white divide-y divide-gray-100 rounded shadow-lg ring-1 ring-black/10 focus:outline-hidden" style="max-width: min(14rem, calc(100vw - 1rem)); width: 14rem;">
                 <MenuItem
                     v-for="tab in hiddenLeftTabs"
                     :key="'left-' + tab.label"
@@ -54,7 +54,7 @@
                 <ChevronRightIcon class="ff-icon ff-icon-second" />
             </MenuButton>
             <Teleport to="body">
-                <MenuItems class="z-50 fixed origin-top-left max-h-96 overflow-y-auto bg-white divide-y divide-gray-100 rounded shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none" :style="rightMenuStyle">
+                <MenuItems class="z-50 fixed origin-top-left max-h-96 overflow-y-auto bg-white divide-y divide-gray-100 rounded shadow-lg ring-1 ring-black/10 focus:outline-hidden" :style="rightMenuStyle">
                     <MenuItem
                         v-for="tab in hiddenRightTabs"
                         :key="'right-' + tab.label"