full update

src/lib/ui/buttonStyles.ts

@@ -0,0 +1,66 @@
+import { cn } from "@/lib/utils";
+
+/** Shared Modstagram button design — border #C3C3C3, accent #FC8EAC */
+export const BTN_BORDER = "border-[#C3C3C3]";
+
+export const btnBase =
+  "btn-modern gentle-transition font-semibold active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50";
+
+export const btnDefault = cn(
+  btnBase,
+  "rounded-3xl bg-white/90 px-4 text-foreground",
+  BTN_BORDER,
+  "hover:bg-white dark:bg-neutral-900/90 dark:hover:bg-neutral-900"
+);
+
+export const btnPrimary = cn(
+  btnBase,
+  "btn-modern--primary rounded-3xl px-4 text-white",
+  BTN_BORDER
+);
+
+export const btnSecondary = cn(btnDefault, "font-medium text-foreground/90");
+
+export const btnFilterChip = cn(
+  btnBase,
+  "rounded-3xl bg-white/90 px-4 py-1.5 text-xs font-semibold",
+  BTN_BORDER,
+  "dark:bg-neutral-900/90"
+);
+
+export const btnFilterChipActive = cn(
+  btnBase,
+  "btn-modern--selected rounded-3xl px-4 py-1.5 text-xs font-semibold text-white",
+  BTN_BORDER
+);
+
+export function filterChipClass(active: boolean, className?: string) {
+  return cn(active ? btnFilterChipActive : btnFilterChip, className);
+}
+
+export function toggleBtnClass(active: boolean, className?: string) {
+  return cn(
+    btnBase,
+    "rounded-3xl px-4",
+    BTN_BORDER,
+    active ? "btn-modern--selected text-white" : "bg-white/90 text-foreground dark:bg-neutral-900/90",
+    className
+  );
+}
+
+export function selectionCardClass(active: boolean, className?: string) {
+  return cn(
+    "w-full max-w-full p-2",
+    active && "btn-modern--selected text-white",
+    className
+  );
+}
+
+/** Compact profile / grid action buttons */
+export const profileActionBtnClass = cn(
+  btnDefault,
+  "flex h-7 md:h-8 w-full max-w-full items-center justify-center rounded-3xl px-2 text-center text-[12px] font-semibold md:text-sm max-sm:text-[8px]"
+);
+
+export const btnHeightSm = "h-9";
+export const btnHeightMd = "h-10";