feat: Create centralized way to style with tailwindcss

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

@@ -17,21 +17,14 @@ export const Avatar = withAs(
     return (
       <Component
         {...rest}
-        className={cn([
-          "grid aspect-square place-items-center overflow-hidden rounded-full border object-cover",
-          className,
-        ])}
+        className={cn(["rustlanges-avatar", className])}
         style={{
           width: size,
           height: size,
           ...style,
         }}
       >
-        <img
-          className="aspect-square h-full w-full"
-          src={avatarUrl}
-          alt={alt}
-        />
+        <img className="rustlanges-avatar__img" src={avatarUrl} alt={alt} />
       </Component>
     );
   }

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,
 };
 

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

@@ -16,9 +16,8 @@ export const Button = withAs((Component, props: ButtonProps) => {
   return (
     <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",
+        variants[variant],
+        "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;

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

@@ -12,12 +12,7 @@ export const Chip = (props: ChipProps) => {
   const { label, variant = "featured", className, ...attr } = props;
   return (
     <div
-      className={cn(
-        ...variants[variant],
-        "flex w-fit cursor-default items-center justify-center gap-1 transition",
-        "[&>svg]:size-3.5",
-        className
-      )}
+      className={cn(variants[variant], "rustlanges-chip", className)}
       {...attr}
     >
       {icons[variant] ? React.createElement(icons[variant]) : null}

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

@@ -1,41 +1,11 @@
 import { Location, StarBold } from "@/icons";
 
 export const variants = {
-  featured: [
-    "border rounded-[20px]",
-    "bg-primary-400 border-black text-black",
-    "min-h-[32px]",
-    "text-sm",
-    "p-[4px] px-[12px]",
-  ],
-  numeric: [
-    "border rounded-[20px]",
-    "bg-primary-200 border-black text-black",
-    "min-h-[32px]",
-    "text-sm",
-    "p-[4px] px-[12px]",
-  ],
-  description: [
-    "border rounded-[20px]",
-    "bg-secondary-200 border-black text-black",
-    "min-h-[32px]",
-    "text-sm",
-    "p-[4px] px-[12px]",
-  ],
-  location: [
-    "border rounded-[20px]",
-    "bg-secondary-200 border-black text-black",
-    "min-h-[24px]",
-    "text-sm",
-    "p-[2px] px-[12px]",
-  ],
-  small: [
-    "border rounded-[20px]",
-    "bg-secondary-200 border-black text-black",
-    "min-h-[22px]",
-    "text-xs",
-    "p-[2px] px-[8px]",
-  ],
+  featured: "rustlanges-chip--featured",
+  numeric: "rustlanges-chip--numeric",
+  description: "rustlanges-chip--description",
+  location: "rustlanges-chip--location",
+  small: "rustlanges-chip--small",
 };
 
 export type ChipVariants = keyof typeof variants;

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

@@ -24,8 +24,8 @@ export const Collaborators = ({
   const hasMaxCollaborators = numberOfCollaborators > MAX_COLLABORATORS;
   const extraCollaborators = numberOfCollaborators - MAX_COLLABORATORS;
   return (
-    <div className="flex h-12 w-full items-center justify-between">
-      <div className="flex w-fit items-center">
+    <div className="rustlanges-collaborators">
+      <div className="rustlanges-collaborators__avatars">
         {collaborators.slice(0, MAX_COLLABORATORS).map((collaborator, idx) => {
           const space = idx ? 12 : 0;
           return (

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

@@ -23,37 +23,32 @@ export const DropdownState = ({ value, onChange }: DropdownStateProps) => {
   const Icon = open ? ArrowUp : ArrowDown;
 
   return (
-    <div className="relative grid w-fit">
+    <div className="rustlanges-dropdown">
       <button
         onClick={handleOpen}
         className={cn([
-          "shadow-rb-black text-paragraph-2 flex h-6 items-center gap-1 overflow-hidden rounded-sm border border-black",
+          "text-paragraph-2 rustlanges-dropdown__view",
           DROPDOWN_STATUS_VARIANTS[value],
-          "text-[12px]",
         ])}
       >
-        <div className="ml-2 size-1 rounded-full" />
+        <div className="rustlanges-dropdown__view-dot" />
         <span className="mr-2">{BADGE_TEXT[value]}</span>
-        <Icon
-          className={cn([
-            "size-6 rounded-r-sm border-l border-l-black",
-            "bg-white text-black",
-            "dark:bg-dark dark:text-neutral-50",
-          ])}
-        />
+        <Icon className={cn(["rustlanges-dropdown__view-icon"])} />
       </button>
       <div
         className={cn([
-          "absolute left-0 top-full mt-2 w-full transition duration-200",
-          open ? "visible opacity-100" : "invisible opacity-0",
+          "rustlanges-dropdown__content",
+          open
+            ? "rustlanges-dropdown__content--open"
+            : "rustlanges-dropdown__content--closed",
         ])}
       >
         {open && (
-          <ul className="options shadow-rb-black dark:bg-dark grid gap-1.5 rounded-sm border border-black bg-white px-2 py-1.5 transition">
+          <ul className="rustlanges-dropdown__list">
             {DROPDOWN_OPTIONS.map(opt => (
               <li
                 key={opt.value}
-                className="option cursor-pointer"
+                className="rustlanges-dropdown__list-item"
                 onClick={() => handleSelect(opt.value)}
               >
                 <Badge type="text" variant={opt.value} />

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

@@ -10,24 +10,12 @@ type FlapProps = {
 export const Flap = ({ label, variant, className, ...rest }: FlapProps) => {
   const Icon = FLAP_ICONS[variant];
   return (
-    <div
-      title={label}
-      className={cn([
-        "relative flex justify-center gap-2",
-        "h-6 w-20 px-5",
-        "desktop:w-[167.5px] desktop:h-[47.5px] desktop:px-8",
-        className,
-      ])}
-      {...rest}
-    >
+    <div title={label} className={cn(["rustlanges-flap", className])} {...rest}>
       <svg
         viewBox="0 0 145 49"
         fill="none"
         preserveAspectRatio="none"
-        className={cn([
-          "desktop:px-3 absolute left-0 top-0 z-0 h-full w-full px-1",
-          FLAP_VARIANTS[variant],
-        ])}
+        className={cn(["rustlanges-flap__svg", FLAP_VARIANTS[variant]])}
       >
         <path
           d="M120.962 5.00869L141.872 30.4082C147.78 37.5847 142.676 48.3997 133.38 48.3997L12.488 48.3996C3.19249 48.3996 -1.91244 37.5847 3.99561 30.4082L24.906 5.00869C26.9955 2.47056 30.1108 1.00009 33.3984 1.00009L112.47 1.0001C115.757 1.0001 118.872 2.47057 120.962 5.00869Z"
@@ -37,14 +25,12 @@ export const Flap = ({ label, variant, className, ...rest }: FlapProps) => {
       </svg>
       <span
         className={cn([
-          "z-10 flex h-fit w-full items-center justify-center gap-2 text-center font-medium text-neutral-950",
-          !!Icon && "desktop:*:even:block pt-[3px] *:even:hidden",
-          "desktop:pt-1",
-          "[&>svg]:h-3 [&>svg]:w-3",
+          "rustlanges-flap__view",
+          !!Icon && "rustlanges-flap__view--icon",
         ])}
       >
         {Icon ? <Icon /> : null}
-        <span className="text-paragraph-2 desktop:pt-0 line-clamp-1 pt-px">
+        <span className="text-paragraph-2 rustlanges-flap__view-text">
           {label}
         </span>
       </span>

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

@@ -1,9 +1,9 @@
 import { StarBold } from "@/icons";
 
 export const FLAP_VARIANTS = {
-  highlight: "text-primary-400",
-  numeric: "text-primary-200",
-  descriptive: "text-secondary-400",
+  highlight: "rustlanges-flap--highlight",
+  numeric: "rustlanges-flap--numeric",
+  descriptive: "rustlanges-flap--descriptive",
 };
 
 export const FLAP_ICONS = {

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

@@ -12,12 +12,7 @@ export const Level = withAs(
     return (
       <Component
         {...rest}
-        className={cn([
-          "rounded-xl border border-black px-2 leading-[150%]",
-          "desktop:text-sm text-xxs",
-          LEVEL_VARIANTS[variant],
-          className,
-        ])}
+        className={cn(["rustlanges-level", LEVEL_VARIANTS[variant], className])}
       >
         {LEVEL_LABELS[variant]}
       </Component>

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

@@ -1,8 +1,8 @@
 export const LEVEL_VARIANTS = {
-  n1: "bg-primary-100",
-  n2: "bg-primary-300",
-  n3: "bg-primary-500",
-  op: "bg-secondary-400",
+  n1: "rustlanges-level--n1",
+  n2: "rustlanges-level--n2",
+  n3: "rustlanges-level--n3",
+  op: "rustlanges-level--op",
 };
 
 export const LEVEL_LABELS = {

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

@@ -6,15 +6,7 @@ type RadioProps = InputHTMLAttributes<HTMLInputElement>;
 export const Radio = ({ className, ...rest }: RadioProps) => {
   return (
     <input
-      className={cn([
-        "shadow-rb-black aspect-square appearance-none transition",
-        "flex size-4 items-center justify-center rounded-full border border-black",
-        "after:absolute after:size-2 after:rounded-full after:transition",
-        "dark:bg-dark bg-white",
-        "after:bg-gray dark:after:bg-neutral-500",
-        "checked:after:bg-primary-500",
-        className,
-      ])}
+      className={cn(["rustlanges-radio", className])}
       type="radio"
       {...rest}
     />

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

@@ -1,6 +1,5 @@
 import { withAs } from "@/utils/hoc";
 import { cn } from "@/utils/tw-merge";
-import { TAG_VARIANTS } from "./tag.const";
 
 type TagProps = {
   label?: string;
@@ -13,8 +12,8 @@ export const Tag = withAs(
     return (
       <Component
         className={cn([
-          selected ? TAG_VARIANTS.selected : TAG_VARIANTS.default,
-          "grid h-7 cursor-pointer place-items-center rounded-[20px] border px-2 text-xs font-semibold transition",
+          selected ? "rustlanges-tag--selected" : "rustlanges-tag--default",
+          "rustlanges-tag",
           className,
         ])}
         {...rest}