fix: Consistent color transitions and Tailwind updates (#7179)

fix: color transitions and tailwind updates

Author: canerakdas

apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css

@@ -12,14 +12,15 @@
   }
 
   a {
-    @apply flex-shrink
-      flex-grow;
+    @apply shrink
+      grow;
   }
 
   &,
   > a,
   > a:hover {
     @apply text-neutral-800
+      motion-safe:transition-colors
       dark:text-neutral-200;
   }
 
@@ -30,8 +31,8 @@
   .separator {
     @apply size-4
       max-w-fit
-      flex-shrink-0
-      flex-grow
+      shrink-0
+      grow
       text-neutral-600
       dark:text-neutral-400;
   }

apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css

@@ -1,5 +1,5 @@
 .link {
-  @apply max-w-fit 
+  @apply max-w-fit
     truncate;
 
   &.active {
@@ -9,6 +9,7 @@
       py-1
       font-semibold
       text-white
+      motion-safe:transition-colors
       dark:text-white;
 
     &:hover {

apps/site/components/Common/Button/index.module.css

@@ -6,7 +6,8 @@
     gap-2
     py-2.5
     text-center
-    font-semibold;
+    font-semibold
+    motion-safe:transition-colors;
 
   svg {
     @apply size-5;

apps/site/components/Common/CodeTabs/index.module.css

@@ -32,6 +32,7 @@
         gap-2
         text-center
         text-neutral-200
+        motion-safe:transition-colors
         lg:flex;
 
       & > .icon {

apps/site/components/Common/LanguageDropDown/index.module.css

@@ -4,6 +4,7 @@
     rounded-md
     p-2
     text-neutral-700
+    motion-safe:transition-colors
     dark:text-neutral-300;
 
   &:hover {

apps/site/components/Common/Pagination/PaginationListItem/index.module.css

@@ -11,6 +11,7 @@
     px-3
     py-2.5
     text-neutral-800
+    motion-safe:transition-colors
     dark:text-neutral-200;
 
   &:hover {

apps/site/components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css

@@ -13,11 +13,12 @@ a.item {
 
   &:hover {
     @apply text-neutral-900
+      motion-safe:transition-colors
       dark:text-white;
   }
 
   svg {
-    @apply flex-shrink-0
+    @apply shrink-0
       fill-neutral-200
       stroke-white
       stroke-[4]

apps/site/components/Common/ThemeToggle/index.module.css

@@ -3,6 +3,7 @@
     rounded-md
     p-2
     text-neutral-700
+    motion-safe:transition-colors
     dark:text-neutral-300;
 
   &:hover {

apps/site/components/Containers/NavBar/NavItem/index.module.css

@@ -4,7 +4,8 @@
     gap-2
     rounded
     px-3
-    py-2;
+    py-2
+    motion-safe:transition-colors;
 
   .label {
     @apply text-base

apps/site/styles/base.css

@@ -1,6 +1,5 @@
 * {
-  @apply subpixel-antialiased
-    motion-safe:transition-colors;
+  @apply subpixel-antialiased;
 }
 
 html,

apps/site/tailwind.config.ts

@@ -153,7 +153,7 @@ export default {
       },
     },
   },
-  darkMode: ['class', '[data-theme="dark"]'],
+  darkMode: ['selector', '[data-theme="dark"]'],
   plugins: [
     require('@savvywombat/tailwindcss-grid-areas'),
     require('@tailwindcss/container-queries'),