wip

apps/shelve/app/components/landing/Features.vue

@@ -56,15 +56,15 @@ const features = [
       >
         <div class="flex items-center">
           <div class="flex items-center justify-center rounded border border-white/5 bg-white/5 p-1">
-            <UIcon :name="feature.icon" class="size-5 fill-white text-gray-300" />
+            <UIcon :name="feature.icon" class="size-5 fill-white text-neutral-300" />
           </div>
 
-          <div class="ml-4 text-gray-300">
-            {{ feature.title }}<span v-if="feature.soon" class="ml-1 text-xs text-gray-400">(soon)</span>
+          <div class="ml-4 text-neutral-300">
+            {{ feature.title }}<span v-if="feature.soon" class="ml-1 text-xs text-neutral-400">(soon)</span>
           </div>
         </div>
 
-        <div class="ml-11 pl-0.5 text-sm text-gray-500">
+        <div class="ml-11 pl-0.5 text-sm text-neutral-500">
           {{ feature.description }}
         </div>
       </div>

apps/shelve/app/components/project/Create.vue

@@ -119,7 +119,7 @@ function importProject() {
               </div>
               <div v-else class="flex flex-col gap-4">
                 <div v-if="teams.length !== 0" class="flex flex-col gap-4">
-                  <div v-for="team in teams" :key="team.id" class="divide-y divide-gray-100 dark:divide-gray-800">
+                  <div v-for="team in teams" :key="team.id" class="divide-y divide-neutral-100 dark:divide-neutral-800">
                     <ProjectTeamAssign :team :project-id="0" is-emit @add-team="addTeam" />
                   </div>
                 </div>

apps/shelve/app/components/project/CreateVariables.vue

@@ -88,7 +88,7 @@ const border = computed(() => {
   if (dragOver.value) {
     return 'border-[0.5px] border-primary border-dashed'
   }
-  return 'border-[0.5px] border-neutral-200 dark:border-gray-800'
+  return 'border-[0.5px] border-neutral-200 dark:border-neutral-800'
 })
 
 const handleFileUpload = (event: Event) => {
@@ -225,12 +225,12 @@ const handlePasswordGenerated = (password: string, index: number) => {
             <h2 class="text-lg font-semibold">
               Environment Variables
             </h2>
-            <p class="text-sm font-normal text-gray-500">
+            <p class="text-sm font-normal text-neutral-500">
               Manage your environment variables
             </p>
           </div>
           <UDropdownMenu :items>
-            <UButton color="gray" variant="ghost" icon="heroicons:ellipsis-horizontal-20-solid" />
+            <UButton color="neutral" variant="ghost" icon="heroicons:ellipsis-horizontal-20-solid" />
           </UDropdownMenu>
         </div>
       </template>
@@ -253,13 +253,13 @@ const handlePasswordGenerated = (password: string, index: number) => {
           </h3>
         </div>
         <!--        <UDivider class="my-1" />-->
-        <p class="text-xs font-normal text-gray-500">
+        <p class="text-xs font-normal text-neutral-500">
           🤫 You can also paste all your environment variables (.env) as key value pairs to prefilled the form
         </p>
         <div class="mb-4 flex flex-col gap-2">
           <div class="hidden items-center sm:flex">
-            <span class="w-full text-sm font-normal text-gray-500">Key</span>
-            <span class="w-full text-sm font-normal text-gray-500">Value</span>
+            <span class="w-full text-sm font-normal text-neutral-500">Key</span>
+            <span class="w-full text-sm font-normal text-neutral-500">Value</span>
             <div class="w-[100px]" />
           </div>
           <div v-for="variable in variablesToCreate" :key="variable" class="flex flex-col gap-4">

apps/shelve/app/components/project/MainSection.vue

@@ -131,29 +131,29 @@ function getProjectManager(manager: string) {
           </UModal>
         </div>
         <UDropdownMenu v-if="project.ownerId === user?.id" :items>
-          <UButton color="gray" variant="ghost" icon="heroicons:ellipsis-horizontal-20-solid" />
+          <UButton color="neutral" variant="ghost" icon="heroicons:ellipsis-horizontal-20-solid" />
         </UDropdownMenu>
       </div>
       <div v-if="project.projectManager || project.repository || project.homepage" class="mt-6 flex flex-wrap gap-4 sm:flex-row sm:items-center">
         <NuxtLink v-if="project.projectManager" target="_blank" :to="project.projectManager">
           <UButton
-            color="gray"
+            color="neutral"
             :icon="getProjectManager(project.projectManager)?.icon"
             :label="`Open ${getProjectManager(project.projectManager)?.label}`"
             :ui="{ leadingIcon: 'dark:fill-white fill-black' }"
           />
         </NuxtLink>
         <NuxtLink v-if="project.repository" target="_blank" :to="project.repository">
           <UButton
-            color="gray"
+            color="neutral"
             icon="custom:github"
             label="Open repository"
             :ui="{ leadingIcon: 'dark:fill-white fill-black' }"
           />
         </NuxtLink>
         <NuxtLink v-if="project.homepage" target="_blank" :to="project.homepage">
           <UButton
-            color="gray"
+            color="neutral"
             icon="heroicons:home"
             label="Open homepage"
           />
@@ -180,13 +180,13 @@ function getProjectManager(manager: string) {
               <h2 class="text-lg font-semibold leading-7">
                 Are you sure you want to delete this project?
               </h2>
-              <p class="text-sm leading-6 text-gray-500">
+              <p class="text-sm leading-6 text-neutral-500">
                 This action cannot be undone.
               </p>
             </div>
             <FormGroup v-model="projectName" :label="`Type the project name '${project.name}' to confirm`" />
             <div class="flex justify-end gap-4">
-              <UButton color="gray" variant="ghost" @click="showDelete = false">
+              <UButton color="neutral" variant="ghost" @click="showDelete = false">
                 Cancel
               </UButton>
               <UButton color="red" type="submit" trailing :loading="deleteLoading" :disabled="projectName !== project.name">

apps/shelve/app/components/vault/Decrypt.vue

@@ -47,7 +47,7 @@ async function decryptEnvFile() {
           block
           label="Decrypt"
           type="submit"
-          color="gray"
+          color="neutral"
           :loading
         />
       </div>
@@ -65,10 +65,10 @@ async function decryptEnvFile() {
       </div>
     </template>
     <div class="mt-4 flex w-full items-center justify-between gap-2">
-      <span v-if="timeLeft" class="text-sm font-semibold text-gray-500/80">
+      <span v-if="timeLeft" class="text-sm font-semibold text-neutral-500/80">
         Time left: {{ timeLeft }}
       </span>
-      <span v-if="readsLeft" class="text-sm font-semibold text-gray-500/80">
+      <span v-if="readsLeft" class="text-sm font-semibold text-neutral-500/80">
         Reads left: {{ readsLeft }}
       </span>
     </div>

apps/shelve/app/components/vault/Encrypt.vue

@@ -44,7 +44,7 @@ const border = computed(() => {
   if (dragOver.value) {
     return 'border-[0.5px] border-primary border-dashed'
   }
-  return 'border-[0.5px] border-gray-200 dark:border-gray-800'
+  return 'border-[0.5px] border-neutral-200 dark:border-neutral-800'
 })
 
 const handleFileUpload = (event: Event) => {
@@ -101,7 +101,9 @@ function handleDrop(event: DragEvent) {
     </div>
     <div class="mt-2 flex w-full items-end justify-between gap-2">
       <UTooltip
-        :ui="{ width: 'max-w-4xl' }"
+        :content="{
+          side: 'top',
+        }"
         text="Reads are used to limit the number of times a secret can be read."
       >
         <UFormField label="Reads">
@@ -114,7 +116,9 @@ function handleDrop(event: DragEvent) {
         </UFormField>
       </UTooltip>
       <UTooltip
-        :ui="{ width: 'max-w-4xl' }"
+        :content="{
+          side: 'top',
+        }"
         text="TTL is the time period after which the secret will be deleted."
       >
         <UFormField label="TTL">
@@ -133,7 +137,7 @@ function handleDrop(event: DragEvent) {
         block
         label="Encrypt"
         type="submit"
-        color="gray"
+        color="neutral"
         :loading
       />
     </div>

apps/shelve/app/components/vault/Faq.vue

@@ -19,12 +19,12 @@ const items = [
       <h3 class="main-gradient text-2xl">
         <LandingScrambleText label="FAQ" />
       </h3>
-      <p class="max-w-lg text-center text-sm text-gray-500 sm:text-base">
+      <p class="max-w-lg text-center text-sm text-neutral-500 sm:text-base">
         Frequently asked questions about Vault.
       </p>
     </div>
     <UAccordion
-      color="gray"
+      color="neutral"
       variant="ghost"
       size="sm"
       :items

apps/shelve/app/pages/app/settings.vue

@@ -77,20 +77,20 @@ watch(reduceMotion, () => {
           class="flex cursor-pointer flex-col gap-2 rounded-lg border border-neutral-700 bg-[#131113] p-4 shadow-md hover:border-neutral-600 hover:bg-neutral-900"
           @click="$colorMode.preference = 'dark'"
         >
-          <h3 class="text-lg font-semibold text-gray-100">
+          <h3 class="text-lg font-semibold text-neutral-100">
             Sideral Night
           </h3>
-          <p class="text-sm text-gray-400">
+          <p class="text-sm text-neutral-400">
             Sideral Night theme is the theme for all people who like keeping it dark.
           </p>
           <div class="mt-2 flex flex-col gap-1">
             <div class="flex gap-2">
-              <div class="h-3 w-1/2 rounded-full bg-gray-700" />
-              <div class="h-3 w-1/4 rounded-full bg-gray-700" />
+              <div class="h-3 w-1/2 rounded-full bg-neutral-700" />
+              <div class="h-3 w-1/4 rounded-full bg-neutral-700" />
             </div>
             <div class="flex gap-2">
-              <div class="h-3 w-1/4 rounded-full bg-gray-700" />
-              <div class="h-3 w-1/2 rounded-full bg-gray-700" />
+              <div class="h-3 w-1/4 rounded-full bg-neutral-700" />
+              <div class="h-3 w-1/2 rounded-full bg-neutral-700" />
             </div>
           </div>
         </div>

apps/shelve/app/pages/docs.vue

@@ -13,10 +13,10 @@ useHead({
     <div class="w-full border-y border-neutral-500/20">
       <div class="mx-auto max-w-4xl">
         <CrossedDiv encrypted-text>
-          <h3 class="main-gradient font-geist-mono text-2xl font-bold sm:text-4xl">
+          <h3 class="main-gradient font-geist-mono text-2xl sm:text-3xl">
             <LandingScrambleText label="// The documentation is coming soon" />
           </h3>
-          <p class="max-w-lg text-sm leading-6 text-neutral-300">
+          <p class="max-w-lg text-sm leading-6 text-neutral-500">
             We are working hard to provide you with the best documentation possible.
           </p>
         </CrossedDiv>

apps/shelve/app/pages/roadmap.vue

@@ -11,7 +11,7 @@ const appConfig = useAppConfig()
 
 const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiLCJjYW5jZWxsZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXR1cyIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoiSHVnb1JDRCIsIm5hbWUiOiJzaGVsdmUifQ=='
 
-const src = computed(() => `https://volta.net/embed/${token}?gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
+const src = computed(() => `https://volta.net/embed/${token}?neutral=${appConfig.ui.neutral}&primary=${appConfig.ui.primary}`)
 </script>
 
 <template>

apps/shelve/app/pages/vault.vue

@@ -32,14 +32,14 @@ const sealMode = computed(() => id.value)
 <template>
   <div class="mx-auto my-8 flex h-full flex-col items-center justify-around gap-2 sm:my-0">
     <div class="flex w-full flex-col items-center justify-center">
-      <div class="w-full border-y border-gray-500/20">
+      <div class="w-full border-y border-neutral-500/20">
         <div class="mx-auto flex max-w-2xl justify-center px-5 sm:px-0">
           <CrossedDiv encrypted-text class="w-full">
             <div>
               <h1 class="main-gradient cursor-pointer text-3xl" @click="$router.push('/vault')">
                 <LandingScrambleText label="Vault" />
               </h1>
-              <p class="text-gray-500">
+              <p class="text-neutral-500">
                 Vault is a small utility to share secrets.
               </p>
             </div>