feat(styles): Migrate Badge from ReactJS

Author: Brayan-724

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

@@ -20,13 +20,12 @@ export const Badge = withAs(
       <Component
         {...rest}
         className={cn([
-          "text-paragraph-2 flex w-fit items-center gap-1 rounded-full border-[0.8px] border-black px-2",
+          "text-paragraph-2 rustlanges-badge",
           BADGE_VARIANTS[variant],
           BADGE_TYPE[type],
-          "desktop:text-[12px] text-[10px]",
         ])}
       >
-        <div className="size-1 rounded-full" />
+        <div className="rustlanges-badge__dot" />
         <span>{displayValue()}</span>
       </Component>
     );

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

@@ -1,25 +1,13 @@
 export const BADGE_VARIANTS = {
-  completed: [
-    "bg-success-100 text-success-600 [&>div]:bg-success-600",
-    "dark:bg-success-950 dark:text-success-400 [&>div]:bg-success-600",
-  ],
-  reading: [
-    "bg-warning-100 text-warning-500 [&>div]:bg-warning-500",
-    "dark:bg-warning-950 dark:text-warning-300 [&>div]:bg-warning-300",
-  ],
-  pending: [
-    "bg-error-100 text-error-600 [&>div]:bg-error-600",
-    "dark:bg-error-950 dark:text-error-300 [&>div]:bg-error-300",
-  ],
-  unread: [
-    "bg-neutral-100 text-neutral-500 [&>div]:bg-neutral-500",
-    "dark:bg-neutral-950 dark:text-neutral-300 [&>div]:bg-neutral-300",
-  ],
+  completed: "rustlanges-badge--variant-completed",
+  reading: "rustlanges-badge--variant-reading",
+  pending: "rustlanges-badge--variant-pending",
+  unread: "rustlanges-badge--variant-unread",
 };
 
 export const BADGE_TYPE = {
-  default: "[&>span]:hidden size-4 px-0! justify-center",
-  numeric: "flex-row-reverse ",
+  default: "rustlanges-badge--type-default",
+  numeric: "rustlanges-badge--type-numeric",
   text: undefined,
 };
 

styles/components.css

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

styles/components/badge.css

@@ -0,0 +1,50 @@
+@layer components {
+  .rustlanges-badge {
+    @apply flex w-fit items-center gap-1 rounded-full border-[0.8px] border-black px-2;
+
+    font-size: 10px;
+    @variant desktop {
+      font-size: 12px;
+    }
+  }
+
+  .rustlanges-badge__dot {
+    @apply size-1 rounded-full;
+  }
+
+  .rustlanges-badge--type-default {
+    @apply px-0! size-4 justify-center [&>span]:hidden;
+  }
+
+  .rustlanges-badge--type-numeric {
+    @apply flex-row-reverse;
+  }
+
+  .rustlanges-badge--variant-completed {
+    @apply bg-success-100 text-success-600 [&>div]:bg-success-600;
+    @variant dark {
+      @apply bg-success-950 text-success-400 [&>div]:bg-success-600;
+    }
+  }
+
+  .rustlanges-badge--variant-reading {
+    @apply bg-warning-100 text-warning-500 [&>div]:bg-warning-500;
+    @variant dark {
+      @apply bg-warning-950 text-warning-300 [&>div]:bg-warning-300;
+    }
+  }
+
+  .rustlanges-badge--variant-pending {
+    @apply bg-error-100 text-error-600 [&>div]:bg-error-600;
+    @variant dark {
+      @apply bg-error-950 text-error-300 [&>div]:bg-error-300;
+    }
+  }
+
+  .rustlanges-badge--variant-unread {
+    @apply bg-neutral-100 text-neutral-500 [&>div]:bg-neutral-500;
+    @variant dark {
+      @apply bg-neutral-950 text-neutral-300 [&>div]:bg-neutral-300;
+    }
+  }
+}

styles/components/text.css

@@ -91,6 +91,7 @@
     font-weight: 600;
     line-height: 160%;
     letter-spacing: 0.28%;
+
     @apply desktop:text-[16px];
   }