@rovula/ui 0.0.19 → 0.0.21

package/src/_theme/variables/xspector/typography.css

@@ -0,0 +1,178 @@
+:root[data-theme="xspector"] {
+  /* TYPE */
+  --h1-family: "Poppins";
+  --h1-size: 64px;
+  --h1-size-rem: 4rem;
+  --h1-weight: 700;
+  --h1-style: normal;
+  --h1-line-height: 80px;
+  --h1-line-height-rem: 5rem;
+  --h2-family: "Poppins";
+  --h2-size: 48px;
+  --h2-size-rem: 3rem;
+  --h2-weight: 700;
+  --h2-style: normal;
+  --h2-line-height: 60px;
+  --h2-line-height-rem: 3.75rem;
+  --h3-family: "Poppins";
+  --h3-size: 32px;
+  --h3-size-rem: 2rem;
+  --h3-weight: 700;
+  --h3-style: normal;
+  --h3-line-height: 48px;
+  --h3-line-height-rem: 3rem;
+  --h4-family: "Poppins";
+  --h4-size: 24px;
+  --h4-size-rem: 1.5rem;
+  --h4-weight: 700;
+  --h4-style: normal;
+  --h4-line-height: 32px;
+  --h4-line-height-rem: 2rem;
+  --h5-family: "Poppins";
+  --h5-size: 20px;
+  --h5-size-rem: 1.25rem;
+  --h5-weight: 700;
+  --h5-style: normal;
+  --h5-line-height: 28px;
+  --h5-line-height-rem: 1.75rem;
+  --h6-family: "Poppins";
+  --h6-size: 18px;
+  --h6-size-rem: 1.125rem;
+  --h6-weight: 700;
+  --h6-style: normal;
+  --h6-line-height: 24px;
+  --h6-line-height-rem: 1.5rem;
+  --subtitle1-family: "Poppins";
+  --subtitle1-size: 16px;
+  --subtitle1-size-rem: 1rem;
+  --subtitle1-weight: 400;
+  --subtitle1-style: normal;
+  --subtitle1-line-height: 24px;
+  --subtitle1-line-height-rem: 1.5rem;
+  --subtitle2-family: "Poppins";
+  --subtitle2-size: 16px;
+  --subtitle2-size-rem: 1rem;
+  --subtitle2-weight: 500;
+  --subtitle2-style: normal;
+  --subtitle2-line-height: 24px;
+  --subtitle2-line-height-rem: 1.5rem;
+  --subtitle3-family: "Poppins";
+  --subtitle3-size: 16px;
+  --subtitle3-size-rem: 1rem;
+  --subtitle3-weight: 600;
+  --subtitle3-style: normal;
+  --subtitle3-line-height: 24px;
+  --subtitle3-line-height-rem: 1.5rem;
+  --subtitle4-family: "Poppins";
+  --subtitle4-size: 14px;
+  --subtitle4-size-rem: 0.875rem;
+  --subtitle4-weight: 400;
+  --subtitle4-style: normal;
+  --subtitle4-line-height: 22px;
+  --subtitle4-line-height-rem: 1.375rem;
+  --subtitle5-family: "Poppins";
+  --subtitle5-size: 14px;
+  --subtitle5-size-rem: 0.875rem;
+  --subtitle5-weight: 500;
+  --subtitle5-style: normal;
+  --subtitle5-line-height: 22px;
+  --subtitle5-line-height-rem: 1.375rem;
+  --subtitle6-family: "Poppins";
+  --subtitle6-size: 14px;
+  --subtitle6-size-rem: 0.875rem;
+  --subtitle6-weight: 600;
+  --subtitle6-style: normal;
+  --subtitle6-line-height: 22px;
+  --subtitle6-line-height-rem: 1.375rem;
+  --body1-family: "Poppins";
+  --body1-size: 16px;
+  --body1-size-rem: 1rem;
+  --body1-weight: 400;
+  --body1-style: normal;
+  --body1-line-height: 20px;
+  --body1-line-height-rem: 1.25rem;
+  --body2-family: "Poppins";
+  --body2-size: 16px;
+  --body2-size-rem: 1rem;
+  --body2-weight: 500;
+  --body2-style: normal;
+  --body2-line-height: 20px;
+  --body2-line-height-rem: 1.25rem;
+  --body3-family: "Poppins";
+  --body3-size: 14px;
+  --body3-size-rem: 0.875rem;
+  --body3-weight: 400;
+  --body3-style: normal;
+  --body3-line-height: 18px;
+  --body3-line-height-rem: 1.125rem;
+  --body4-family: "Poppins";
+  --body4-size: 14px;
+  --body4-size-rem: 0.875rem;
+  --body4-weight: 500;
+  --body4-style: normal;
+  --body4-line-height: 18px;
+  --body4-line-height-rem: 1.125rem;
+  --small1-family: "Poppins";
+  --small1-size: 12px;
+  --small1-size-rem: 0.75rem;
+  --small1-weight: 400;
+  --small1-style: normal;
+  --small1-line-height: 14px;
+  --small1-line-height-rem: 0.875rem;
+  --small2-family: "Poppins";
+  --small2-size: 12px;
+  --small2-size-rem: 0.75rem;
+  --small2-weight: 500;
+  --small2-style: normal;
+  --small2-line-height: 14px;
+  --small2-line-height-rem: 0.875rem;
+  --small3-family: "Poppins";
+  --small3-size: 12px;
+  --small3-size-rem: 0.75rem;
+  --small3-weight: 600;
+  --small3-style: normal;
+  --small3-line-height: 14px;
+  --small3-line-height-rem: 0.875rem;
+  --small4-family: "Poppins";
+  --small4-size: 10px;
+  --small4-size-rem: 0.625rem;
+  --small4-weight: 400;
+  --small4-style: normal;
+  --small4-line-height: 12px;
+  --small4-line-height-rem: 0.75rem;
+  --small5-family: "Poppins";
+  --small5-size: 10px;
+  --small5-size-rem: 0.625rem;
+  --small5-weight: 500;
+  --small5-style: normal;
+  --small5-line-height: 12px;
+  --small5-line-height-rem: 0.75rem;
+  --label-label1-family: "Poppins";
+  --label-label1-size: 12px;
+  --label-label1-size-rem: 0.75rem;
+  --label-label1-weight: 400;
+  --label-label1-style: normal;
+  --label-label1-line-height: 12px;
+  --label-label1-line-height-rem: 0.75rem;
+  --label-label2-family: "Poppins";
+  --label-label2-size: 10px;
+  --label-label2-size-rem: 0.625rem;
+  --label-label2-weight: 400;
+  --label-label2-style: normal;
+  --label-label2-line-height: 10px;
+  --label-label2-line-height-rem: 0.625rem;
+  --button-button-l-family: "Poppins";
+  --button-button-l-size: 16px;
+  --button-button-l-size-rem: 1rem;
+  --button-button-l-weight: 700;
+  --button-button-l-style: normal;
+  --button-button-l-line-height: 24px;
+  --button-button-l-line-height-rem: 1.5rem;
+  --button-button-ms-family: "Poppins";
+  --button-button-ms-size: 14px;
+  --button-button-ms-size-rem: 0.875rem;
+  --button-button-ms-weight: 700;
+  --button-button-ms-style: normal;
+  --button-button-ms-line-height: 22px;
+  --button-button-ms-line-height-rem: 1.375rem;
+}

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -50,7 +50,7 @@ export const Preview = {
       ...args,
     };
     return (
-      <div className="flex flex-col gap-2 w-full  bg-black p-20">
+      <div className="flex flex-col gap-2 w-full  p-20">
         <div className="flex flex-row justify-between items-center">
           <h6 className="w-[20px] text-white">Default:</h6>
           <div className="flex flex-row gap-2 ">

package/src/components/ActionButton/ActionButton.styles copy.ts

@@ -0,0 +1,95 @@
+import { cva } from "class-variance-authority";
+
+export const actionButtonVariants = cva(
+  ["rounded box-border flex items-center justify-center"],
+  {
+    variants: {
+      variant: {
+        solid: [
+          "bg-secondary-default border-secondary-default text-secondary-foreground fill-secondary-foreground",
+          "hover:bg-secondary-hover hover:border-secondary-hover",
+          "active:bg-secondary-pressed active:border-secondary-pressed",
+        ],
+        outline: [
+          "border bg-transparent disabled:bg-transparent disabled:border-disable-outline",
+          "text-secondary-default fill-secondary-default border-secondary-stroke",
+          "hover:bg-secondary-hover-bg hover:border-secondary-hover hover:text-secondary-hover hover:fill-secondary-hover",
+          "active:bg-secondary-hover-bg active:border-secondary-pressed active:text-secondary-pressed active:fill-secondary-pressed",
+        ],
+        icon: [
+          "bg-transparent disabled:bg-transparent rounded-full",
+          "text-secondary-default fill-secondary-default",
+          "hover:bg-secondary-hover-bg hover:text-secondary-hover hover:fill-secondary-hover",
+          "active:text-secondary-pressed active:fill-secondary-pressed",
+        ],
+      },
+      size: {
+        xs: "p-[2px] w-[18px] h-[18px]",
+        sm: "px-2 py-1 w-[38px] h-[30px]",
+        md: "px-3 py-2 w-[46px] h-[38px]",
+        lg: "px-4 py-3 w-[64px] h-[56px]",
+      },
+      disabled: {
+        false: "",
+      },
+      active: {
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "solid",
+        active: true,
+        className: [
+          "bg-primary-default border-primary-default text-primary-foreground fill-primary-foreground",
+          "hover:bg-primary-hover hover:border-primary-hover",
+          "active:bg-primary-pressed active:border-primary-pressed",
+        ],
+      },
+      {
+        variant: "outline",
+        active: true,
+        className: [
+          "text-primary-default fill-primary-default border-primary-stroke",
+          "hover:bg-primary-hover-bg hover:border-primary-hover hover:text-primary-hover hover:fill-primary-hover",
+          "active:bg-primary-hover-bg active:border-primary-pressed active:text-primary-pressed active:fill-primary-pressed",
+        ],
+      },
+      {
+        variant: "icon",
+        active: true,
+        className: [
+          "text-primary-default fill-primary-default",
+          "hover:bg-primary-hover-bg hover:text-primary-hover hover:fill-primary-hover",
+          "active:text-primary-pressed active:fill-primary-pressed",
+        ],
+      },
+      {
+        size: "lg",
+        variant: "icon",
+        className: "w-[56px] h-[56px]",
+      },
+      {
+        size: "md",
+        variant: "icon",
+        className: "w-[38px] h-[38px]",
+      },
+      {
+        size: "sm",
+        variant: "icon",
+        className: "w-[30px] h-[30px]",
+      },
+      {
+        disabled: true,
+        className:
+          "pointer-events-none border-transparent bg-disable-solid text-disable-outline fill-disable-outline",
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "solid",
+      disabled: false,
+      active: false,
+    },
+  }
+);

package/src/components/ActionButton/ActionButton.styles.ts

@@ -1,19 +1,26 @@
 import { cva } from "class-variance-authority";
 
 export const actionButtonVariants = cva(
-  ["bg-primary rounded box-border flex items-center justify-center"],
+  ["rounded-md box-border flex items-center justify-center"],
   {
     variants: {
       variant: {
-        solid:
-          " bg-secondary-20 hover:bg-secondary-5 fill-secondary-foreground text-secondary-foreground",
+        solid: [
+          "bg-action-button-solid-default border-action-button-solid-default text-action-button-solid-default fill-action-button-solid-default",
+          "hover:bg-action-button-solid-hover hover:border-action-button-solid-hover hover:text-action-button-solid-hover hover:fill-action-button-solid-hover",
+          "active:bg-action-button-solid-pressed active:border-action-button-solid-pressed active:text-action-button-solid-pressed active:fill-action-button-solid-pressed",
+        ],
         outline: [
-          "bg-transparent border border-main-transparent-secondary-32 fill-secondary-70 text-secondary-70",
-          "hover:bg-main-transparent-secondary-8 hover:border-main-secondary-48 hover:fill-secondary-5 hover:text-secondary-5",
+          "border",
+          "bg-action-button-outline-default border-action-button-outline-default text-action-button-outline-default fill-action-button-outline-default",
+          "hover:bg-action-button-outline-hover hover:border-action-button-outline-hover hover:text-action-button-outline-hover hover:fill-action-button-outline-hover",
+          "active:bg-action-button-outline-pressed active:border-action-button-outline-pressed active:text-action-button-outline-pressed active:fill-action-button-outline-pressed",
         ],
         icon: [
-          "rounded-full bg-transparent fill-secondary-70 text-secondary-70",
-          "hover:bg-main-transparent-secondary-8 hover:fill-secondary-5 hover:text-secondary-5",
+          "rounded-full",
+          "bg-action-button-icon-default border-action-button-icon-default text-action-button-icon-default fill-action-button-icon-default",
+          "hover:bg-action-button-icon-hover hover:border-action-button-icon-hover hover:text-action-button-icon-hover hover:fill-action-button-icon-hover",
+          "active:bg-action-button-icon-pressed active:border-action-button-icon-pressed active:text-action-button-icon-pressed active:fill-action-button-icon-pressed",
         ],
       },
       size: {
@@ -23,35 +30,39 @@ export const actionButtonVariants = cva(
         lg: "px-4 py-3 w-[64px] h-[56px]",
       },
       disabled: {
-        true: "pointer-events-none border-grey2-500/[.32] text-grey2-500/[.32] fill-red-500",
+        false: "",
       },
       active: {
         false: "",
       },
     },
     compoundVariants: [
-      {
-        variant: "solid",
-        disabled: true,
-        className: "bg-grey2-500 text-textcolor-medium fill-textcolor-medium",
-      },
       {
         variant: "solid",
         active: true,
-        className:
-          "bg-primary-120 hover:bg-primary-100 text-primary-foreground",
+        className: [
+          "bg-action-button-solid-active border-action-button-solid-active text-action-button-solid-active fill-action-button-solid-active",
+          "hover:bg-action-button-solid-active-hover hover:border-action-button-solid-active-hover hover:text-action-button-solid-active-hover hover:fill-action-button-solid-active-hover",
+          "active:bg-action-button-solid-active-pressed active:border-action-button-solid-active-pressed active:text-action-button-solid-active-pressed active:fill-action-button-solid-active-pressed",
+        ],
       },
       {
         variant: "outline",
         active: true,
-        className:
-          "border-main-transparent-primary-48 hover:bg-main-transparent-primary-8 hover:text-primary text-primary",
+        className: [
+          "bg-action-button-outline-active border-action-button-outline-active text-action-button-outline-active fill-action-button-outline-active",
+          "hover:bg-action-button-outline-active-hover hover:border-action-button-outline-active-hover hover:text-action-button-outline-active-hover hover:fill-action-button-outline-active-hover",
+          "active:bg-action-button-outline-active-pressed active:border-action-button-outline-active-pressed active:text-action-button-outline-active-pressed active:fill-action-button-outline-active-pressed",
+        ],
       },
       {
         variant: "icon",
         active: true,
-        className:
-          "border-main-transparent-primary-48 hover:bg-main-transparent-primary-8 hover:text-primary text-primary",
+        className: [
+          "bg-action-button-icon-active border-action-button-icon-active text-action-button-icon-active fill-action-button-icon-active",
+          "hover:bg-action-button-icon-active-hover hover:border-action-button-icon-active-hover hover:text-action-button-icon-active-hover hover:fill-action-button-icon-active-hover",
+          "active:bg-action-button-icon-active-pressed active:border-action-button-icon-active-pressed active:text-action-button-icon-active-pressed active:fill-action-button-icon-active-pressed",
+        ],
       },
       {
         size: "lg",
@@ -68,6 +79,30 @@ export const actionButtonVariants = cva(
         variant: "icon",
         className: "w-[30px] h-[30px]",
       },
+      {
+        variant: "solid",
+        disabled: true,
+        className: [
+          "pointer-events-none",
+          "bg-action-button-solid-disabled border-action-button-solid-disabled text-action-button-solid-disabled fill-action-button-solid-disabled",
+        ],
+      },
+      {
+        variant: "outline",
+        disabled: true,
+        className: [
+          "pointer-events-none",
+          "bg-action-button-outline-disabled border-action-button-outline-disabled text-action-button-outline-disabled fill-action-button-outline-disabled",
+        ],
+      },
+      {
+        variant: "icon",
+        disabled: true,
+        className: [
+          "pointer-events-none",
+          "bg-action-button-icon-disabled border-action-button-icon-disabled text-action-button-icon-disabled fill-action-button-icon-disabled",
+        ],
+      },
     ],
     defaultVariants: {
       size: "md",

package/src/components/ActionButton/ActionButton.tsx

@@ -29,7 +29,7 @@ const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
         aria-disabled={disabled || undefined}
         disabled={disabled}
         tabIndex={disabled ? -1 : 0}
-        className={cn(actionButtonClassname, className)}
+        className={cn(".action-button", actionButtonClassname, className)}
       >
         {children}
       </button>

package/src/components/AlertDialog/AlertDialog.tsx

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 bg-popup-overlay z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 bg-base-popup-curtain z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -37,7 +37,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed text-textcolor-grey-dark left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border bg-popup-background p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-[var(--popup-rounded)]",
+        "fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border border-base-popup bg-base-popup p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",
         className
       )}
       {...props}

package/src/components/Avatar/Avatar.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const avatarVariants = cva(
   [
-    "flex items-center justify-center bg-grey2-700 text-white typography-subtitile2 truncate",
+    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitile2 truncate",
   ],
   {
     variants: {

package/src/components/Button/Button.styles copy.ts

@@ -0,0 +1,214 @@
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  [
+    // "inline-flex items-center justify-center align-middle no-underline transition-colors ease-in-out duration-300",
+    // "font-sans appearance-none select-none rounded-sm border font-medium tracking-[.02857em]",
+    // "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
+    // "gap-2 font-bold text-white hover:bg-opacity-90 active:scale-[98%]",
+    "gap-2 font-bold text-white outline-none",
+    "transition ease-in-out duration-45",
+  ],
+  {
+    variants: {
+      color: {
+        primary: [
+          "bg-primary-default border-primary-default text-primary-foreground fill-primary-foreground",
+          "hover:bg-primary-hover hover:border-primary-hover",
+          "active:bg-primary-pressed active:border-primary-pressed",
+        ],
+        secondary: [
+          "bg-secondary-default border-secondary-default text-secondary-foreground fill-secondary-foreground",
+          "hover:bg-secondary-hover hover:border-secondary-hover",
+          "active:bg-secondary-pressed active:border-secondary-pressed",
+        ],
+        tertiary: [
+          "bg-tertiary-default border-tertiary-default text-tertiary-foreground fill-tertiary-foreground",
+          "hover:bg-tertiary-hover hover:border-tertiary-hover",
+          "active:bg-tertiary-pressed active:border-tertiary-pressed",
+        ],
+        success: [
+          "bg-success-default border-success-default text-success-foreground fill-success-foreground",
+          "hover:bg-success-hover hover:border-success-hover",
+          "active:bg-success-pressed active:border-success-pressed",
+        ],
+        info: [
+          "bg-info-default border-info-default text-info-foreground fill-info-foreground",
+          "hover:bg-info-hover hover:border-info-hover",
+          "active:bg-info-pressed active:border-info-pressed",
+        ],
+        warning: [
+          "bg-warning-default border-warning-default text-warning-foreground fill-warning-foreground",
+          "hover:bg-warning-hover hover:border-warning-hover",
+          "active:bg-warning-pressed active:border-warning-pressed",
+        ],
+        error: [
+          "bg-error-default border-error-default text-error-foreground fill-error-foreground",
+          "hover:bg-error-hover hover:border-error-hover",
+          "active:bg-error-pressed active:border-error-pressed",
+        ],
+      },
+      size: {
+        sm: "px-3 py-1 text-sm rounded-sm",
+        md: "px-4 py-2 text-sm rounded-md",
+        lg: "px-6 py-4 text-base rounded-lg",
+      },
+      variant: {
+        solid: "border",
+        outline: "border bg-transparent disabled:border-disable-outline",
+        flat: "bg-transparent",
+        link: "bg-transparent underline underline-offset-4",
+      },
+      disabled: {
+        true: "pointer-events-none border-transparent bg-disable-solid text-disable-outline fill-disable-outline",
+      },
+      fullwidth: {
+        true: "w-full",
+      },
+    },
+    compoundVariants: [
+      // --- Outline ---
+      {
+        variant: "outline",
+        color: "primary",
+        className: [
+          "text-primary-default fill-primary-default border-primary-stroke",
+          "hover:bg-primary-hover-bg hover:border-primary-hover hover:text-primary-hover hover:fill-primary-hover",
+          "active:bg-primary-hover-bg active:border-primary-pressed active:text-primary-pressed active:fill-primary-pressed",
+        ],
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        className: [
+          "text-secondary-default fill-secondary-default border-secondary-stroke",
+          "hover:bg-secondary-hover-bg hover:border-secondary-hover hover:text-secondary-hover hover:fill-secondary-hover",
+          "active:bg-secondary-hover-bg active:border-secondary-pressed active:text-secondary-pressed active:fill-secondary-pressed",
+        ],
+      },
+      {
+        variant: "outline",
+        color: "tertiary",
+        className: [
+          "text-tertiary-default fill-tertiary-default border-tertiary-stroke",
+          "hover:bg-tertiary-hover-bg hover:border-tertiary-hover hover:text-tertiary-hover hover:fill-tertiary-hover",
+          "active:bg-tertiary-hover-bg active:border-tertiary-pressed active:text-tertiary-pressed active:fill-tertiary-pressed",
+        ],
+      },
+      {
+        variant: "outline",
+        color: "success",
+        className: [
+          "text-success-default fill-success-default border-success-stroke",
+          "hover:bg-success-hover-bg hover:border-success-hover hover:text-success-hover hover:fill-success-hover",
+          "active:bg-success-hover-bg active:border-success-pressed active:text-success-pressed active:fill-success-pressed",
+        ],
+      },
+      {
+        variant: "outline",
+        color: "info",
+        className: [
+          "text-info-default fill-info-default border-info-stroke",
+          "hover:bg-info-hover-bg hover:border-info-hover hover:text-info-hover hover:fill-info-hover",
+          "active:bg-info-hover-bg active:border-info-pressed active:text-info-pressed active:fill-info-pressed",
+        ],
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        className: [
+          "text-warning-default fill-warning-default border-warning-stroke",
+          "hover:bg-warning-hover-bg hover:border-warning-hover hover:text-warning-hover hover:fill-warning-hover",
+          "active:bg-warning-hover-bg active:border-warning-pressed active:text-warning-pressed active:fill-warning-pressed",
+        ],
+      },
+      {
+        variant: "outline",
+        color: "error",
+        className: [
+          "text-error-default fill-error-default border-error-stroke",
+          "hover:bg-error-hover-bg hover:border-error-hover hover:text-error-hover hover:fill-error-hover",
+          "active:bg-error-hover-bg active:border-error-pressed active:text-error-pressed active:fill-error-pressed",
+        ],
+      },
+      // --- Flat, link ---
+      {
+        variant: ["flat", "link"],
+        color: "primary",
+        className: [
+          "text-primary-default fill-primary-default",
+          "hover:bg-primary-hover-bg hover:text-primary-hover hover:fill-primary-hover",
+          "active:bg-transparent active:text-primary-pressed active:fill-primary-pressed",
+        ],
+      },
+      {
+        variant: ["flat", "link"],
+        color: "secondary",
+        className: [
+          "text-secondary-default fill-secondary-default",
+          "hover:bg-secondary-hover-bg hover:text-secondary-hover hover:fill-secondary-hover",
+          "active:bg-transparent active:text-secondary-pressed active:fill-secondary-pressed",
+        ],
+      },
+      {
+        variant: ["flat", "link"],
+        color: "tertiary",
+        className: [
+          "text-tertiary-default fill-tertiary-default",
+          "hover:bg-tertiary-hover-bg hover:text-tertiary-hover hover:fill-tertiary-hover",
+          "active:bg-transparent active:text-tertiary-pressed active:fill-tertiary-pressed",
+        ],
+      },
+      {
+        variant: ["flat", "link"],
+        color: "success",
+        className: [
+          "text-success-default fill-success-default",
+          "hover:bg-success-hover-bg hover:text-success-hover hover:fill-success-hover",
+          "active:bg-transparent active:text-success-pressed active:fill-success-pressed",
+        ],
+      },
+      {
+        variant: ["flat", "link"],
+        color: "info",
+        className: [
+          "text-info-default fill-info-default",
+          "hover:bg-info-hover-bg hover:text-info-hover hover:fill-info-hover",
+          "active:bg-transparent active:text-info-pressed active:fill-info-pressed",
+        ],
+      },
+      {
+        variant: ["flat", "link"],
+        color: "warning",
+        className: [
+          "text-warning-default fill-warning-default",
+          "hover:bg-warning-hover-bg hover:text-warning-hover hover:fill-warning-hover",
+          "active:bg-transparent active:text-warning-pressed active:fill-warning-pressed",
+        ],
+      },
+      {
+        variant: ["flat", "link"],
+        color: "error",
+        className: [
+          "text-error-default fill-error-default",
+          "hover:bg-error-hover-bg hover:text-error-hover hover:fill-error-hover",
+          "active:bg-transparent active:text-error-pressed active:fill-error-pressed",
+        ],
+      },
+      // --- Disabled --
+      {
+        variant: ["outline", "flat", "link"],
+        disabled: true,
+        className: [
+          "bg-transtarent border-disabled-outline text-disable-outline fill-disable-outline",
+        ],
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      variant: "solid",
+      fullwidth: true,
+    },
+  }
+);