feat(gui-v2): add color-transition shortcut to windi

packages/nc-gui-v2/app.vue

@@ -59,13 +59,14 @@ const signOut = () => {
               <template #activator="{ props }">
                 <MdiDotsVertical class="md:text-xl cursor-pointer" @click="props.onClick" />
               </template>
-              <v-list class="!py-0 nc-user-menu min-w-32">
+
+              <v-list class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800)">
                 <nuxt-link
                   v-t="['c:navbar:user:email']"
-                  class="group hover:bg-gray-200 flex items-center p-2"
+                  class="group hover:(bg-gray-200) dark:(hover:bg-gray-600) flex items-center p-2 no-underline"
                   to="/user/settings"
                 >
-                  <MdiAt class="mt-1 transition-colors duration-150 ease-in group-hover:text-success" />&nbsp;
+                  <MdiAt class="mt-1 color-transition group-hover:text-success" />&nbsp;
                   <span class="prose">{{ email }}</span>
                 </nuxt-link>
 
@@ -73,10 +74,10 @@ const signOut = () => {
 
                 <div
                   v-t="['a:navbar:user:sign-out']"
-                  class="group flex flex-row cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                  class="group flex flex-row cursor-pointer hover:bg-gray-200 dark:(hover:bg-gray-600) flex items-center p-2"
                   @click="signOut"
                 >
-                  <MdiLogout class="transition-colors duration-150 ease-in group-hover:text-red-500" />&nbsp;
+                  <MdiLogout class="color-transition dark:text-white group-hover:(!text-red-500)" />&nbsp;
                   <span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
                 </div>
               </v-list>

packages/nc-gui-v2/components/general/Share.vue

@@ -292,6 +292,6 @@ const openUrl = (url: string) => {
 }
 
 a {
-  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) transition-color ease-in duration-100;
+  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) color-transition;
 }
 </style>

packages/nc-gui-v2/components/general/Social.vue

@@ -46,7 +46,7 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
 
 <style scoped>
 .icon {
-  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) transition-color ease-in duration-100;
+  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) color-transition;
 }
 
 .discourse {

packages/nc-gui-v2/pages/projects/index.vue

@@ -46,7 +46,7 @@ const activePage = $ref(navDrawerOptions[0].title)
             <v-menu class="select-none">
               <template #activator="{ props }">
                 <div
-                  class="bg-white hover:(!bg-gray-100) dark:(!bg-primary !text-white shadow-gray-600 hover:!bg-primary/75) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
+                  class="color-transition hover:(bg-gray-100 dark:bg-secondary/25) dark:(bg-secondary/50 !text-white shadow-gray-600) mr-auto select-none flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow prose-lg font-semibold"
                   @click="props.onClick"
                 >
                   <MdiPlus class="text-primary dark:(!text-white) text-2xl" />
@@ -112,16 +112,16 @@ const activePage = $ref(navDrawerOptions[0].title)
         </div>
 
         <div class="self-end flex text-4xl mb-1">
-          <MaterialSymbolsFormatListBulletedRounded
-            :class="route.name === 'projects-index-list' ? 'text-primary' : ''"
-            class="transition-color ease-in duration-100 cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/projects/list')"
-          />
           <MaterialSymbolsGridView
-            :class="route.name === 'projects-index' ? 'text-primary' : ''"
+            :class="route.name === 'projects-index' ? 'text-primary dark:(!text-secondary/75)' : ''"
-            class="transition-color ease-in duration-100 cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
             @click="navigateTo('/projects')"
           />
+          <MaterialSymbolsFormatListBulletedRounded
+            :class="route.name === 'projects-index-list' ? 'text-primary dark:(!text-secondary/75)' : ''"
+            class="color-transition cursor-pointer p-2 hover:bg-gray-300/50 rounded-full"
+            @click="navigateTo('/projects/list')"
+          />
         </div>
       </div>
 

packages/nc-gui-v2/pages/projects/index/index.vue

@@ -95,7 +95,7 @@ const formatTitle = (title: string) =>
 
 <style scoped>
 .thumbnail {
-  @apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[150px] w-full max-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease-in duration-100 hover:(after:opacity-100 shadow-none);
+  @apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[150px] w-full max-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center color-transition hover:(after:opacity-100 shadow-none);
 }
 
 .thumbnail::after {

packages/nc-gui-v2/pages/projects/index/list.vue

@@ -28,7 +28,7 @@ const openProject = async (project: ProjectType) => {
 
     <template v-for="project of projects" :key="project.id">
       <div
-        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 color-transition"
         @click="openProject(project)"
       >
         <div class="font-semibold">{{ project.title || 'Untitled' }}</div>

packages/nc-gui-v2/pages/signin.vue

@@ -134,7 +134,7 @@ const resetError = () => {
                   ? '!opacity-50 !cursor-default'
                   : 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
               ]"
-              class="ml-1 border-1 border-solid border-gray-300 transition-color duration-100 ease-in rounded-lg p-4 bg-gray-100/50"
+              class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
               type="submit"
             >
               <span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span>

packages/nc-gui-v2/pages/signup.vue

@@ -130,7 +130,7 @@ const resetError = () => {
                   ? '!opacity-50 !cursor-default'
                   : 'shadow-md hover:(text-primary bg-primary/10 dark:text-white dark:!bg-primary/50)',
               ]"
-              class="ml-1 border-1 border-solid border-gray-300 transition-color duration-100 ease-in rounded-lg p-4 bg-gray-100/50"
+              class="ml-1 border-1 border-solid border-gray-300 color-transition rounded-lg p-4 bg-gray-100/50"
               type="submit"
             >
               <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>

packages/nc-gui-v2/windi.config.ts

@@ -43,6 +43,7 @@ export default defineConfig({
   },
 
   shortcuts: {
+    'color-transition': 'transition-color duration-100 ease-in',
     'scrollbar-thin-primary': 'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white',
   },