Refactor transition usage

Author: SebKay

resources/css/buttons.css

@@ -1,5 +1,5 @@
 @utility button {
-    @apply cursor-pointer rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-xs hover:bg-brand-600 transition-all ease-in-out duration-200;
+    @apply cursor-pointer rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-xs hover:bg-brand-600 transition-colors;
 
     &[disabled] {
         @apply pointer-events-none opacity-50;

resources/css/forms.css

@@ -29,7 +29,7 @@
 }
 
 @utility field {
-    @apply block rounded-md border-brand-300 shadow-xs outline-hidden hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
+    @apply block rounded-md border-brand-300 shadow-xs outline-hidden hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition;
 }
 
 @utility input {

resources/css/variables.css

@@ -1,4 +1,6 @@
 @theme {
+    --default-transition-duration: 0.2s;
+
     --font-text: "Arial", sans-serif;
     --font-heading: "Arial", sans-serif;
     --font-serif: "Georgia", sans-serif;

resources/js/Components/Footer.vue

@@ -5,7 +5,7 @@
                 © 2024
                 <a
                     href="https://sebkay.com/"
-                    class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
+                    class="text-link"
                     target="_blank"
                     >Seb Kay</a
                 >. All rights reserved.

resources/js/Components/Header.vue

@@ -21,7 +21,7 @@
                                     :method="link?.method"
                                     :as="link?.method == 'post' ? 'button' : 'a'"
                                     v-text="link.label"
-                                    class="rounded-xl px-3 py-2 text-sm font-medium cursor-pointer transition-colors ease-in-out duration-200"
+                                    class="rounded-xl px-3 py-2 text-sm font-medium cursor-pointer transition-colors"
                                     :class="{
                                         'bg-brand-100 text-brand-950': link.components.includes($page.component),
                                         'text-brand-600 hover:text-brand-950 focus:text-brand-950': !link.components.includes($page.component),

resources/js/Pages/Login/Show.vue

@@ -34,7 +34,7 @@
                         >
                             Password
                             <Link
-                                class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
+                                class="text-link"
                                 :href="route('password')"
                                 text="Forgot password?"
                             />
@@ -49,16 +49,16 @@
                     </div>
 
                     <div class="form-col">
-                        <label class="inline-flex items-center gap-3 cursor-pointer">
+                        <label class="toggle">
                             <input
                                 class="sr-only peer"
                                 type="checkbox"
                                 v-model="loginForm.remember"
                             />
                             <div
-                                class="relative w-9 h-5 bg-neutral-200 peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:size-4 after:transition-all peer-checked:bg-brand-600">
+                                class="peer">
                             </div>
-                            <span class="text-sm font-medium">
+                            <span>
                                 Remember me
                             </span>
                         </label>
@@ -79,7 +79,7 @@
                 <p class="text-center mt-3">
                     Don't have an account?
                     <Link
-                        class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
+                        class="text-link"
                         :href="route('register')"
                         text="Register"
                     />

resources/js/Pages/Register/Show.vue

@@ -90,7 +90,7 @@
                 <p class="text-center">
                     Already have an account?
                     <Link
-                        class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
+                        class="text-link"
                         :href="route('login')"
                         text="Log In"
                     />

resources/js/Pages/ResetPassword/Show.vue

@@ -42,7 +42,7 @@
                 <p class="text-center">
                     Remembered your password?
                     <Link
-                        class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
+                        class="text-link"
                         :href="route('login')"
                         text="Login"
                     />