feat: dark mode

Author: safwansamsudeen

components.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {};
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

frontend/src/App.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="w-screen h-screen antialiased">
-    <div class="bg-black text-white text-sm text-center py-2 sm:hidden">
+  <div
+    class="w-screen h-screen antialiased"
+    dark
+  >
+    <div
+      class="bg-surface-black text-ink-white text-sm text-center py-2 sm:hidden"
+    >
       Drive works best on desktop.
     </div>
     <div
@@ -13,7 +18,7 @@
       />
       <div
         id="dropzone"
-        class="flex flex-col h-screen flex-grow overflow-hidden"
+        class="flex flex-col h-screen flex-grow overflow-hidden bg-surface-white"
       >
         <router-view
           :key="$route.fullPath"

frontend/src/components/ActivityTree.vue

@@ -7,7 +7,7 @@
       v-if="group.length && Object.keys(groupedActivityLog).length > 1"
       class="px-5 pb-2 gap-x-2"
     >
-      <span class="text-base text-gray-600 font-medium leading-6">
+      <span class="text-base text-ink-gray-5 font-medium leading-6">
         {{ __(i) }}
       </span>
       <div
@@ -21,8 +21,10 @@
           :label="activity.full_name"
         />
         <div class="flex flex-col items-start justify-center">
-          <span class="text-sm text-gray-900">{{ __(activity.message) }}</span>
-          <span class="text-xs text-gray-600 mb-3">{{
+          <span class="text-sm text-ink-gray-9">{{
+            __(activity.message)
+          }}</span>
+          <span class="text-xs text-ink-gray-5 mb-3">{{
             activity.creation
           }}</span>
 
@@ -35,7 +37,7 @@
                 :strike-through="true"
               />
 
-              <ArrowRight class="text-gray-500 h-4" />
+              <ArrowRight class="text-ink-gray-4 h-4" />
               <ActivityTreeItem
                 :activity="activity"
                 :entity="entity"

frontend/src/components/ActivityTreeItem.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    :title="title ? title : entity.title"
+    class="border max-w-[220px] rounded-[7px] px-1 py-1 flex items-center justify-center gap-x-1 overflow-clip"
+  >
+    <svg
+      v-if="!strikeThrough && entity.is_group"
+      class="h-3.5 mr-0.5"
+      :draggable="false"
+      :style="{ fill: entity.color }"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_1942_59507)">
+        <path
+          d="M7.83412 2.88462H1.5C1.22386 2.88462 1 3.10847 1 3.38462V12.5C1 13.6046 1.89543 14.5 3 14.5H13C14.1046 14.5 15 13.6046 15 12.5V2C15 1.72386 14.7761 1.5 14.5 1.5H9.94008C9.88623 1.5 9.83382 1.51739 9.79065 1.54957L8.13298 2.78547C8.04664 2.84984 7.94182 2.88462 7.83412 2.88462Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1942_59507">
+          <rect
+            width="16"
+            height="16"
+            fill="white"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+    <img
+      v-else-if="!strikeThrough"
+      loading="lazy"
+      class="h-full"
+      :src="getIconUrl(entity.file_type)"
+      :draggable="false"
+    />
+    <span
+      class="text-sm line-clamp-1 text-ink-gray-6"
+      :class="strikeThrough ? 'line-through ' : ' '"
+      >{{ title ? title : entity.title }}</span
+    >
+  </div>
+</template>
+<script setup>
+import { getIconUrl } from "../utils/getIconUrl"
+
+defineProps({
+  title: {
+    type: String,
+    default: "File",
+    required: false,
+  },
+  activity: {
+    type: Object,
+    required: true,
+  },
+  entity: {
+    type: Object,
+    required: true,
+  },
+  strikeThrough: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+})
+</script>

frontend/src/components/ActivityTreeShare.vue

@@ -4,8 +4,8 @@
     class="border max-w-[220px] rounded-[7px] px-1 py-1 gap-x-1 flex items-center justify-center overflow-clip text-sm"
     :class="
       activity.action_type === 'share_remove'
-        ? 'strike-div text-gray-500'
-        : 'text-gray-700'
+        ? 'strike-div text-ink-gray-4'
+        : 'text-ink-gray-7'
     "
   >
     <Avatar
@@ -24,7 +24,7 @@
           : activity.new_value
       }}</span>
       <span>∙</span>
-      <span class="text-gray-600">
+      <span class="text-ink-gray-5">
         {{
           activity.meta_value === "1"
             ? "View"
@@ -40,8 +40,8 @@
     class="border max-w-[220px] rounded-[7px] px-1 py-1 gap-x-1 flex items-center justify-center overflow-clip text-sm"
     :class="
       activity.action_type === 'share_remove'
-        ? 'strike-div text-gray-400'
-        : 'text-gray-800'
+        ? 'strike-div text-ink-gray-3'
+        : 'text-ink-gray-8'
     "
   >
     <GeneralAccess
@@ -56,7 +56,7 @@
         activity.document_field === "everyone" ? "Organization" : "Public"
       }}</span>
       <span>∙</span>
-      <span class="text-gray-600">{{
+      <span class="text-ink-gray-5">{{
         activity.meta_value === "1"
           ? "View"
           : activity.meta_value === "2"

frontend/src/components/AppSwitcher.vue

@@ -6,8 +6,8 @@
     <template #target="{ togglePopover }">
       <button
         :class="[
-          active ? 'bg-gray-100' : 'text-gray-800',
-          'group w-full flex h-7 items-center justify-between rounded px-2 text-base hover:bg-gray-100',
+          active ? 'bg-surface-gray-2' : 'text-ink-gray-8',
+          'group w-full flex h-7 items-center justify-between rounded px-2 text-base hover:bg-surface-gray-2',
         ]"
         @click.prevent="togglePopover()"
       >
@@ -20,22 +20,22 @@
     </template>
     <template #body>
       <div
-        class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
+        class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
       >
         <div
           v-for="app in apps.data"
           :key="app.name"
         >
           <a
             :href="app.route"
-            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-1 hover:bg-gray-100"
+            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-1 hover:bg-surface-gray-2"
           >
             <img
               class="size-8"
               :src="app.logo"
             />
             <div
-              class="text-sm text-gray-700"
+              class="text-sm text-ink-gray-7"
               @click="app.onClick"
             >
               {{ app.title }}

frontend/src/components/BottomBar.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="border-r bg-gray-50 transition-all">
+  <div class="border-r bg-surface-menu-bar transition-all">
     <div
       ondragstart="return false;"
       ondrop="return false;"
-      class="grid grid-cols-6 h-14 items-center border-y border-gray-300 standalone:pb-4 px-1"
+      class="grid grid-cols-6 h-14 items-center border-y border-outline-gray-2 standalone:pb-4 px-1"
     >
       <router-link
         v-for="item in sidebarItems"
@@ -15,15 +15,15 @@
           class="flex flex-col items-center justify-center py-3 transition active:scale-95 rounded"
           :class="[
             item.highlight()
-              ? 'bg-white shadow-sm border-[0.5px] border-gray-300'
-              : ' hover:bg-gray-100',
+              ? 'bg-surface-white shadow-sm border-[0.5px] border-outline-gray-2'
+              : ' hover:bg-surface-gray-2',
           ]"
           :href="href"
           @click="navigate && $emit('toggleMobileSidebar')"
         >
           <component
             :is="item.icon"
-            class="stroke-1.5 self-center w-auto h-5.5 text-gray-800"
+            class="stroke-1.5 self-center w-auto h-5.5 text-ink-gray-8"
           />
         </a>
       </router-link>

frontend/src/components/CTADeleteDialog.vue

@@ -4,7 +4,7 @@
     :options="{ title: 'Are you sure?', size: 'sm' }"
   >
     <template #body-content>
-      <p class="text-gray-600">
+      <p class="text-ink-gray-5">
         {{ current.message }}
       </p>
       <div class="flex mt-5">

frontend/src/components/ContextMenu.vue

@@ -20,7 +20,7 @@
       "
     >
       <div v-if="item.divider">
-        <hr class="my-1 bg-gray-300" />
+        <hr class="my-1 bg-surface-gray-4" />
       </div>
       <button
         v-else
@@ -33,7 +33,7 @@
         />
         <span
           class="whitespace-nowrap"
-          :class="item.danger ? 'text-red-600' : 'text-ink-gray-7'"
+          :class="item.danger ? 'text-ink-red-4' : 'text-ink-gray-7'"
         >
           {{ item.label }}
         </span>

frontend/src/components/DeleteDialog.vue

@@ -4,7 +4,7 @@
     :options="{ title: 'Delete Forever?', size: 'sm' }"
   >
     <template #body-content>
-      <p class="text-gray-600">
+      <p class="text-ink-gray-5">
         {{ entities.length === 1 ? `This item` : `${entities.length} items` }}
         will be deleted forever. This is an irreversible process.
       </p>