refactor: restructure styles and components for improved theming and consistency

2026-01-13 22:01:49 -06:00
parent e04d39fe17
commit 21a269998d
13 changed files with 209 additions and 161 deletions
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -0,0 +1,77 @@
+@tailwind components;
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors
+      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+      disabled:pointer-events-none disabled:opacity-50
+      [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
+  }
+
+  .btn-primary {
+    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6;
+  }
+
+  .btn-ghost {
+    @apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6;
+  }
+
+  .btn-outline {
+    @apply border border-primary border-2 bg-white text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50  px-6;
+  }
+
+  .btn-accent {
+    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50  px-6;
+  }
+
+  .btn-destructive {
+    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50  px-6;
+  }
+
+  .btn-link {
+    @apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6;
+  }
+
+  .btn-sm {
+    @apply h-8 rounded-full px-3 text-xs disabled:opacity-50 px-6;
+  }
+
+  .btn-md {
+    @apply h-9 px-4 py-2 rounded-full disabled:opacity-50 px-6;
+  }
+
+  .btn-lg {
+    @apply h-10 rounded-full px-8 disabled:opacity-50;
+  }
+
+  .btn-icon {
+    @apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
+  }
+  .btn-util-green {
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white rounded-xl h-12 px-6;
+  }
+
+  .btn-util-purple {
+    @apply bg-brand-purple  hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6;
+  }
+
+  .btn-light-orange {
+    @apply bg-brand-light-orange  hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6;
+  }
+  .btn-pink {
+    @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6;
+  }
+.btn-lavender {
+    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender
+  }
+  .badge {
+    @apply px-3 py-1 rounded-full text-sm font-medium ;
+  }
+  .badge-green {
+    @apply bg-[var(--green-light)] text-white;
+  }
+}