feat: update ui

Author: FabulousCodingFox

src/app.css

@@ -16,4 +16,16 @@
   --color-gray-800: oklch(0.274 0.006 286.033);
   --color-gray-900: oklch(0.21 0.006 285.885);
   --color-gray-950: oklch(0.141 0.005 285.823);
+
+  --color-primary-50: oklch(0.979 0.021 166.113);
+  --color-primary-100: oklch(0.95 0.052 163.051);
+  --color-primary-200: oklch(0.905 0.093 164.15);
+  --color-primary-300: oklch(0.845 0.143 164.978);
+  --color-primary-400: oklch(0.765 0.177 163.223);
+  --color-primary-500: oklch(0.696 0.17 162.48);
+  --color-primary-600: oklch(0.596 0.145 163.225);
+  --color-primary-700: oklch(0.508 0.118 165.612);
+  --color-primary-800: oklch(0.432 0.095 166.913);
+  --color-primary-900: oklch(0.378 0.077 168.94);
+  --color-primary-950: oklch(0.262 0.051 172.552);
 }

src/components/ExportButton.svelte

@@ -27,7 +27,7 @@
     onclick={handleClick}
     disabled={blocked}
     type="button"
-    class="flex items-center justify-center gap-x-2 rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:cursor-not-allowed disabled:opacity-50"
+    class="flex items-center justify-center gap-x-2 rounded-md bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-primary-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
   >
     {#if blocked}
       <ArrowPathIcon aria-hidden="true" class="-ml-0.5 size-5 animate-spin" />

src/components/FileInfo.svelte

@@ -20,22 +20,22 @@
   }
 </script>
 
-<div class="rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/20">
+<div class="rounded-lg border border-primary-200 bg-primary-50 p-4 dark:border-primary-800 dark:bg-primary-900/20">
   <div class="flex items-center justify-between">
     <div class="flex items-center space-x-3">
-      <div class="flex-shrink-0">
-        <DocumentArrowUpIcon class="size-5 text-green-600 dark:text-green-400" />
+      <div class="shrink-0">
+        <DocumentArrowUpIcon class="size-5 text-primary-600 dark:text-primary-400" />
       </div>
       <div class="min-w-0 flex-1">
-        <p class="text-sm font-medium text-green-800 dark:text-green-200">
+        <p class="text-sm font-medium text-primary-800 dark:text-primary-200">
           {m.fileinfo_loaded({ filename: fileName })}
         </p>
-        <p class="text-sm text-green-600 dark:text-green-300">
+        <p class="text-sm text-primary-600 dark:text-primary-300">
           {m.fileinfo_ready_edit()}
         </p>
       </div>
     </div>
-    <button type="button" onclick={handleClick} disabled={blocked} class="text-sm font-medium text-green-700 hover:text-green-900 disabled:cursor-not-allowed disabled:opacity-50 dark:text-green-300 dark:hover:text-green-100">
+    <button type="button" onclick={handleClick} disabled={blocked} class="text-sm font-medium text-primary-700 hover:text-primary-900 disabled:cursor-not-allowed disabled:opacity-50 dark:text-primary-300 dark:hover:text-primary-100">
       {m.fileinfo_load_different()}
     </button>
   </div>

src/components/Nav.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { languages, themes, type LocalSettingsStore } from '$lib';
   import { m } from '$lib/paraglide/messages';
-  import { NavigationMenu, Select } from 'bits-ui';
+  import { Dialog, NavigationMenu, Select } from 'bits-ui';
   import { getContext } from 'svelte';
   import { page } from '$app/state';
 
@@ -17,7 +17,7 @@
       {href}
       {active}
       class={active
-        ? 'inline-flex h-full items-center border-b-2 border-indigo-600 px-1 pt-1 text-sm font-medium text-gray-900 dark:border-indigo-500 dark:text-white'
+        ? 'inline-flex h-full items-center border-b-2 border-primary-600 px-1 pt-1 text-sm font-medium text-gray-900 dark:border-primary-500 dark:text-white'
         : 'inline-flex h-full items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-300 dark:hover:border-white/20 dark:hover:text-white'}>{text}</NavigationMenu.Link
     >
   </NavigationMenu.Item>
@@ -41,11 +41,11 @@
           <Select.Trigger
             aria-haspopup="listbox"
             type="button"
-            class="grid cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus-visible:outline-indigo-500"
+            class="grid cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus-visible:outline-primary-500"
           >
             <div class="col-start-1 row-start-1 flex items-center gap-3 pr-6">
               <currentThemeObject.icon class="size-5 shrink-0 rounded-full" width="20" height="20" />
-              <span class="block truncate">{currentThemeObject.name}</span>
+              <span class="hidden truncate md:block">{currentThemeObject.name}</span>
             </div>
             <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
               <path
@@ -60,13 +60,13 @@
               {#each Object.values(themes) as theme (theme.id)}
                 <Select.Item
                   value={theme.id}
-                  class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-indigo-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-indigo-500 dark:focus:text-white"
+                  class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-primary-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-primary-500 dark:focus:text-white"
                 >
                   <div class="flex items-center">
                     <theme.icon class="size-5 shrink-0 rounded-full text-gray-900 dark:text-white" width="20" height="20" />
                     <span class="ml-3 block truncate font-normal group-aria-selected/option:font-semibold">{theme.name}</span>
                   </div>
-                  <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden dark:text-indigo-400">
+                  <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden dark:text-primary-400">
                     <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
                       <path d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" fill-rule="evenodd" />
                     </svg>
@@ -81,7 +81,7 @@
           <Select.Trigger
             aria-haspopup="listbox"
             type="button"
-            class="grid cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus-visible:outline-indigo-500"
+            class="grid cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus-visible:outline-primary-500"
           >
             <div class="col-start-1 row-start-1 flex items-center gap-3 pr-6">
               <!--temp fix-->
@@ -92,7 +92,7 @@
               {:else}
                 <enhanced:img src={languages.en.flag} alt="" class="size-5 shrink-0 rounded-full bg-gray-100 dark:bg-gray-700 dark:-outline-offset-1 dark:outline-white/10" />
               {/if}
-              <span class="block truncate">{currentLanguageObject.name}</span>
+              <span class="hidden truncate md:block">{currentLanguageObject.name}</span>
             </div>
             <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
               <path
@@ -107,13 +107,13 @@
               {#each Object.values(languages) as lang (lang.id)}
                 <Select.Item
                   value={lang.id}
-                  class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-indigo-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-indigo-500 dark:focus:text-white"
+                  class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-primary-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-primary-500 dark:focus:text-white"
                 >
                   <div class="flex items-center">
                     <enhanced:img src={lang.flag} alt="" class="size-5 shrink-0 rounded-full" />
                     <span class="ml-3 block truncate font-normal group-aria-selected/option:font-semibold">{lang.name}</span>
                   </div>
-                  <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden dark:text-indigo-400">
+                  <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-primary-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden dark:text-primary-400">
                     <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
                       <path d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" fill-rule="evenodd" />
                     </svg>
@@ -125,22 +125,32 @@
         </Select.Root>
       </div>
       <div class="-mr-2 flex items-center sm:hidden">
-        <!-- Mobile menu button -->
-        <button
-          type="button"
-          command="--toggle"
-          commandfor="mobile-menu"
-          class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-2 focus:-outline-offset-1 focus:outline-indigo-600"
-        >
-          <span class="absolute -inset-0.5"></span>
-          <span class="sr-only">Open main menu</span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6 in-aria-expanded:hidden">
-            <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6 not-in-aria-expanded:hidden">
-            <path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-        </button>
+        <Dialog.Root>
+          <Dialog.Trigger
+            type="button"
+            command="--toggle"
+            commandfor="mobile-menu"
+            class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-2 focus:-outline-offset-1 focus:outline-primary-600"
+          >
+            <span class="absolute -inset-0.5"></span>
+            <span class="sr-only">Open main menu</span>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6">
+              <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </Dialog.Trigger>
+          <Dialog.Portal>
+            <Dialog.Overlay class="fixed inset-0 z-50 bg-black/80" />
+            <Dialog.Content class="fixed inset-0 z-50 overflow-auto bg-white p-4 dark:bg-gray-800">
+              <div class="space-y-1 pt-2 pb-3">
+                <!-- Current: "bg-primary-50 border-primary-600 text-primary-700", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700" -->
+                <a href="#" class="block border-l-4 border-primary-600 bg-primary-50 py-2 pr-4 pl-3 text-base font-medium text-primary-700">Dashboard</a>
+                <a href="#" class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700">Team</a>
+                <a href="#" class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700">Projects</a>
+                <a href="#" class="block border-l-4 border-transparent py-2 pr-4 pl-3 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700">Calendar</a>
+              </div>
+            </Dialog.Content>
+          </Dialog.Portal>
+        </Dialog.Root>
       </div>
     </div>
   </div>

src/components/Sidebar.svelte

@@ -14,7 +14,7 @@
                   type="button"
                   onclick={() => (value = sidebarItem.tab)}
                   class={'group flex w-full cursor-pointer gap-x-3 rounded-md p-2 text-sm/6 font-semibold ' +
-                    (sidebarItem.tab === value ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white')}
+                    (sidebarItem.tab === value ? 'bg-gray-50 text-primary-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-primary-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white')}
                 >
                   {#if sidebarItem.icon}
                     <sidebarItem.icon width="24" height="24" class="size-6 shrink-0" />

src/components/UploadForm.svelte

@@ -212,7 +212,7 @@
     disabled={isProcessing}
     onclick={() => inputElement.click()}
     bind:this={buttonElement}
-    class={'relative mt-16 block w-full cursor-pointer rounded-lg border-2 p-12 text-center transition-all duration-200 focus:outline-2 focus:outline-offset-2 focus:outline-indigo-500 ' +
+    class={'relative mt-16 block w-full cursor-pointer rounded-lg border-2 p-12 text-center transition-all duration-200 focus:outline-2 focus:outline-offset-2 focus:outline-primary-500 ' +
       (isProcessing
         ? 'cursor-not-allowed border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800'
         : draggedOver

src/components/editors/InputNumber.svelte

@@ -17,7 +17,7 @@
       type="number"
       {max}
       {min}
-      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500"
     />
   </div>
 </div>