Theme Transition

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

@@ -46,7 +46,6 @@ export default function TextInputField(props: TextInputFieldProps) {
           isPassword && "pr-10",
 
           // borders and colors
-          "transition-colors",
           error
             ? "border-error text-error" // error
             : "border-foreground", // default
@@ -66,7 +65,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-transform duration-200 ease-in-out",
           outlined ? "left-4" : "left-1",
           classname,
 

src/features/event/editor/weekday-calendar.tsx

@@ -87,7 +87,6 @@ export default function WeekdayCalendar({
               onClick={() => handleRangeSelect(day)}
               className={cn(
                 "aspect-square w-10 items-center justify-center rounded-full text-center",
-                "transition-all duration-200",
                 isSelected ? "bg-accent text-white" : "hover:bg-gray-500/50",
               )}
             >

src/styles/globals.css

@@ -13,4 +13,17 @@ body {
   background: var(--background);
   color: var(--foreground);
   font-family: var(--font-nunito);
+
+  transition-property:
+    color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+*,
+*::before,
+*::after {
+  transition-property: background-color, border-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
 }

src/styles/tailwind.css

@@ -2,6 +2,9 @@
 
 /* COLOR PALETTE */
 @theme {
+  --color-pure-white: oklch(1 0 0);
+  --color-dark-purple: oklch(0.3295 0.0403 287.95);
+
   --color-white: oklch(0.9702 0 0);
   --color-violet: oklch(0.368 0.0393 288.29);
   --color-bone: oklch(0.904 0.0293 82.59);
@@ -66,7 +69,7 @@
     --foreground: var(--color-violet);
     --accent: var(--color-blue);
     --accent-text: var(--color-blue-500);
-    --panel-color: oklch(1 0 0);
+    --panel-color: var(--color-pure-white);
     --loading-color: var(--color-gray-200);
   }
 
@@ -75,8 +78,8 @@
     --foreground: var(--color-bone);
     --accent: var(--color-red);
     --accent-text: var(--color-red-100);
-    --panel-color: oklch(0.3295 0.0403 287.95);
-    --loading-color: oklch(0.3295 0.0403 287.95);
+    --panel-color: var(--color-dark-purple);
+    --loading-color: var(--color-dark-purple);
   }
 }