Clear Color Transitions

src/app/dashboard/page-client.tsx

@@ -92,7 +92,7 @@ function DashboardTabButton({
         "text-nowrap rounded-full px-4 py-2",
         currentTab === value
           ? "bg-accent text-white"
-          : "hover:bg-accent/25 cursor-pointer transition",
+          : "hover:bg-accent/25 cursor-pointer",
         !isMobile && "w-full text-left",
       )}
       onClick={() => setTab(value)}

src/app/page.tsx

@@ -5,7 +5,7 @@ import LinkButton from "@/features/button/components/link";
 
 export default function Home() {
   return (
-    <main className="min-h-screen transition-colors duration-300">
+    <main className="min-h-screen">
       {/* Hero Section */}
       <section className="relative overflow-hidden px-4 pb-20 pt-32 sm:px-6 lg:px-8">
         <div className="mx-auto max-w-7xl text-center">

src/components/text-input-field.tsx

@@ -60,7 +60,6 @@ export default function TextInputField(props: TextInputFieldProps) {
           isPassword && "pr-10",
 
           // borders and colors
-          "transition-colors",
           error
             ? "border-error text-error" // error
             : "border-foreground", // default
@@ -80,7 +79,7 @@ export default function TextInputField(props: TextInputFieldProps) {
         htmlFor={id}
         className={cn(
           "absolute origin-[0_0] cursor-text px-1",
-          "transition-all duration-200 ease-in-out",
+          "transition-[top,scale] duration-200 ease-in-out",
           outlined ? "left-4" : "left-1",
           classname,
 

src/features/toast/base.tsx

@@ -56,7 +56,7 @@ export default function BaseToast({
           }}
           className={cn(
             "col-start-3 row-span-2 flex h-6 w-6 items-center justify-center rounded-full",
-            "opacity-0 transition-all",
+            "opacity-0 transition-opacity duration-200 ease-in-out",
             "focus:opacity-100 group-hover:opacity-100",
             "hover:bg-black/20 focus:outline-none focus:ring-2 focus:ring-white/50",
           )}