refactor: restructure styles and components for improved theming and consistency

src/styles/utilities.css

@@ -0,0 +1,62 @@
+@tailwind utilities;
+
+@layer utilities {
+  @supports selector(::-webkit-scrollbar) {
+    .scrollbar-dashboard::-webkit-scrollbar {
+      width: 2px;
+    }
+
+    .scrollbar-dashboard::-webkit-scrollbar-thumb {
+      background-color: #ddd8eb;
+      border-radius: 9999px;
+    }
+    .scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
+      height: 2px;
+    }
+
+    .scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
+      background-color: #ddd8eb;
+      border-radius: 9999px;
+    }
+    .hide-scrollbar-x::-webkit-scrollbar:horizontal {
+      height: 0px;
+    }
+  }
+  .ui-checkbox {
+    @apply appearance-none
+           w-5 h-5
+           rounded
+           border-2 border-[var(--neutral-800)]
+           bg-[hsl(var(--background))]
+           cursor-pointer
+           inline-grid place-content-center;
+  }
+
+  /* checked */
+  .ui-checkbox:checked {
+    @apply bg-brand-purple
+           border-brand-purple;
+  }
+
+  /* checkmark */
+  .ui-checkbox::after {
+    content: "";
+    @apply w-2.5 h-2.5 scale-0 transition-transform bg-white;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
+  }
+
+  .ui-checkbox:checked::after {
+    @apply scale-100;
+  }
+
+  /* focus */
+  .ui-checkbox:focus-visible {
+    @apply outline-none ring-2 ring-brand-purple
+           ring-offset-2 ring-offset-[hsl(var(--background))];
+  }
+
+  /* disabled */
+  .ui-checkbox:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+}