feat(styles): Migrate Button from ReactJS

Author: Brayan-724

js/react/lib/components/button/button.component.tsx

@@ -17,8 +17,7 @@ export const Button = withAs((Component, props: ButtonProps) => {
     <Component
       className={cn(
         ...variants[variant],
-        "text-button flex h-12 w-fit cursor-pointer items-center justify-center gap-2.5 px-8 transition disabled:cursor-not-allowed",
-        "[&>svg]:size-6",
+        "text-button rustlanges-button",
         className
       )}
       {...attr}

js/react/lib/components/button/button.const.ts

@@ -1,31 +1,8 @@
 export const variants = {
-  primary: [
-    "border rounded-2xl",
-    "bg-primary-500 border-black text-black shadow-rb-black",
-    "dark:bg-primary-300",
-    "hover:bg-primary-600 dark:hover:bg-primary-400 active:shadow-none",
-    "disabled:bg-neutral-100 disabled:shadow-none disabled:border-neutral-400 disabled:text-neutral-400",
-    "dark:disabled:bg-neutral-950",
-  ],
-  secondary: [
-    "border rounded-2xl",
-    "bg-light text-neutral-950 border-neutral-950 shadow-rb-neutral-950",
-    "dark:bg-dark dark:text-light dark:border-light dark:shadow-rb-neutral-50",
-    "hover:shadow-rb-primary-500 hover:border-primary-500 hover:text-primary-500",
-    "disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-neutral-400! disabled:shadow-none",
-    "dark:disabled:bg-neutral-950",
-    "active:shadow-none",
-  ],
-  text: [
-    "text-neutral-950 hover:text-primary-600",
-    "dark:text-light dark:hover:text-primary-300",
-  ],
-  icon: [
-    "rounded-full border aspect-square p-2! !h-fit",
-    "bg-light border-black text-black",
-    "dark:bg-dark dark:border-light dark:text-light",
-    "hover:text-primary-500 hover:border-primary-500",
-  ],
+  primary: "rustlanges-button--primary",
+  secondary: "rustlanges-button--secondary",
+  text: "rustlanges-button--text",
+  icon: "rustlanges-button--icon",
 };
 
 export type ButtonVariants = keyof typeof variants;

styles/components.css

@@ -1,3 +1,4 @@
 @import "./components/avatar.css";
 @import "./components/badge.css";
+@import "./components/button.css";
 @import "./components/text.css";

styles/components/button.css

@@ -0,0 +1,63 @@
+@layer components {
+  .rustlanges-button {
+    @apply flex h-12 w-fit cursor-pointer items-center justify-center gap-2.5 px-8 transition [&>svg]:size-6;
+
+    @variant disabled {
+      @apply cursor-not-allowed;
+    }
+  }
+
+  .rustlanges-button--primary {
+    @apply rounded-2xl border;
+    @apply bg-primary-500 shadow-rb-black border-black text-black;
+    @apply hover:bg-primary-600 active:shadow-none;
+
+    @variant disabled {
+      @apply border-neutral-400 bg-neutral-100 text-neutral-400 shadow-none;
+    }
+
+    @variant dark {
+      @apply bg-primary-300 hover:bg-primary-400 disabled:bg-neutral-950;
+    }
+  }
+
+  .rustlanges-button--secondary {
+    @apply rounded-2xl border;
+    @apply bg-light shadow-rb-neutral-950 border-neutral-950 text-neutral-950;
+    @apply active:shadow-none;
+
+    @variant disabled {
+      @apply border-neutral-400! bg-neutral-100 text-neutral-400 shadow-none;
+    }
+
+    @variant hover {
+      @apply shadow-rb-primary-500 border-primary-500 text-primary-500;
+    }
+
+    @variant dark {
+      @apply bg-dark text-light border-light shadow-rb-neutral-50;
+      @apply disabled:bg-neutral-950;
+    }
+  }
+
+  .rustlanges-button--text {
+    @apply hover:text-primary-600 text-neutral-950;
+
+    @variant dark {
+      @apply text-light hover:text-primary-300;
+    }
+  }
+
+  .rustlanges-button--icon {
+    @apply p-2! aspect-square !h-fit rounded-full border;
+    @apply bg-light border-black text-black;
+
+    @variant hover {
+      @apply text-primary-500 border-primary-500;
+    }
+
+    @variant dark {
+      @apply bg-dark border-light text-light;
+    }
+  }
+}