From 29f57fd5b8feb7aaaa2ab1d0a36612f2b4ce6f91 Mon Sep 17 00:00:00 2001
From: Dmytro Kireiev <dmytro.kireiev@gmail.com>
Date: Thu, 19 Oct 2023 15:16:01 +0300
Subject: [PATCH] fix: update base Button [MDS-718] (#2440)

---
 docs/app/components/server/accordion/page.tsx |  12 +-
 .../components/server/button/description.md   |   8 ++
 .../server/button/examples/Animations.tsx     |  18 +++
 .../server/button/examples/Default.tsx        |   3 +
 .../server/button/examples/Disabled.tsx       |   3 +
 .../server/button/examples/FullWidth.tsx      |   8 ++
 .../server/button/examples/Icons.tsx          |   9 ++
 .../server/button/examples/Multiline.tsx      |  12 ++
 .../server/button/examples/Sizes.tsx          |  11 ++
 .../server/button/examples/Variants.tsx       |   9 ++
 docs/app/components/server/button/page.tsx    |  64 +++++++++++
 docs/app/components/shared/QuickNav.tsx       |  11 ++
 docs/app/components/types.ts                  | 103 ++++++++++--------
 workspaces/base/src/button/Button.tsx         |  11 +-
 .../private/types/ButtonSettingsProps.ts      |   2 +-
 .../button/private/types/ButtonVariants.ts    |   8 +-
 .../buttonAnimations/AnimationContent.tsx     |   4 +-
 .../utils/buttonSizes/getButtonSize.ts        |   2 +-
 .../buttonStyles/getButtonCommonStyles.ts     |   2 +-
 .../utils/buttonStyles/getButtonVariants.ts   |  34 ++++--
 .../buttonStyles/getIconHorizontalPosition.ts |  18 +--
 .../utils/buttonStyles/getLoaderColor.ts      |  15 +++
 .../src/button/styles/ButtonComponent.tsx     |   2 +-
 workspaces/base/src/button/styles/Hover.tsx   |   2 +-
 .../base/src/button/styles/IconLeft.tsx       |   2 +-
 .../base/src/button/styles/IconRight.tsx      |   2 +-
 26 files changed, 289 insertions(+), 86 deletions(-)
 create mode 100644 docs/app/components/server/button/description.md
 create mode 100644 docs/app/components/server/button/examples/Animations.tsx
 create mode 100644 docs/app/components/server/button/examples/Default.tsx
 create mode 100644 docs/app/components/server/button/examples/Disabled.tsx
 create mode 100644 docs/app/components/server/button/examples/FullWidth.tsx
 create mode 100644 docs/app/components/server/button/examples/Icons.tsx
 create mode 100644 docs/app/components/server/button/examples/Multiline.tsx
 create mode 100644 docs/app/components/server/button/examples/Sizes.tsx
 create mode 100644 docs/app/components/server/button/examples/Variants.tsx
 create mode 100644 docs/app/components/server/button/page.tsx
 create mode 100644 docs/app/components/shared/QuickNav.tsx
 create mode 100644 workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts

diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx
index 7a565fbf94..b5324b9879 100644
--- a/docs/app/components/server/accordion/page.tsx
+++ b/docs/app/components/server/accordion/page.tsx
@@ -3,24 +3,18 @@ import { Default } from '@/app/components/server/accordion/examples/Default';
 import { Disabled } from '@/app/components/server/accordion/examples/Disabled';
 import { Sizes } from '@/app/components/server/accordion/examples/Sizes';
 import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
 
-function QuickNav({ items }: {items: string[]}) {
-  return <ul>
-    {items.map(item => <li key={item}><a href={`#${item}`}>{item}</a></li>)}
-  </ul>
-}
-
 export default async function Home() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.accordion.examples);
-
   return (
-    <div className="max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
       <h1 className="font-medium text-moon-32">Accordion</h1>
       <MDX markdown={server.accordion.description} />
-      <QuickNav items={examplesList}/>
+      <QuickNav items={examplesList} />
       <ExampleSection
         title="Default"
         component={<Default />}
diff --git a/docs/app/components/server/button/description.md b/docs/app/components/server/button/description.md
new file mode 100644
index 0000000000..64d6721bd3
--- /dev/null
+++ b/docs/app/components/server/button/description.md
@@ -0,0 +1,8 @@
+Buttons allow users to take actions, and make choices, with a single tap.
+
+Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
+
+Modal windows
+Forms
+Cards
+Toolbars
diff --git a/docs/app/components/server/button/examples/Animations.tsx b/docs/app/components/server/button/examples/Animations.tsx
new file mode 100644
index 0000000000..ef9b623977
--- /dev/null
+++ b/docs/app/components/server/button/examples/Animations.tsx
@@ -0,0 +1,18 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Animations = () => (
+  <>
+    <Button animation="progress" variant="outline">
+      Progress
+    </Button>
+    <Button animation="success" variant="outline">
+      Success
+    </Button>
+    <Button animation="error" variant="outline">
+      Error
+    </Button>
+    <Button animation="pulse" variant="outline">
+      Pulse
+    </Button>
+  </>
+);
diff --git a/docs/app/components/server/button/examples/Default.tsx b/docs/app/components/server/button/examples/Default.tsx
new file mode 100644
index 0000000000..d2bffc8e77
--- /dev/null
+++ b/docs/app/components/server/button/examples/Default.tsx
@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Default = () => <Button>Default</Button>;
diff --git a/docs/app/components/server/button/examples/Disabled.tsx b/docs/app/components/server/button/examples/Disabled.tsx
new file mode 100644
index 0000000000..163423deab
--- /dev/null
+++ b/docs/app/components/server/button/examples/Disabled.tsx
@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Disabled = () => <Button disabled>Disabled</Button>;
diff --git a/docs/app/components/server/button/examples/FullWidth.tsx b/docs/app/components/server/button/examples/FullWidth.tsx
new file mode 100644
index 0000000000..6ab181403e
--- /dev/null
+++ b/docs/app/components/server/button/examples/FullWidth.tsx
@@ -0,0 +1,8 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const FullWidth = () => (
+  <Button iconRight={<OtherFrame />} fullWidth>
+    Full width
+  </Button>
+);
diff --git a/docs/app/components/server/button/examples/Icons.tsx b/docs/app/components/server/button/examples/Icons.tsx
new file mode 100644
index 0000000000..33c832b146
--- /dev/null
+++ b/docs/app/components/server/button/examples/Icons.tsx
@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const Icons = () => (
+  <>
+    <Button iconLeft={<OtherFrame />}>IconLeft</Button>
+    <Button iconRight={<OtherFrame />}>IconRight</Button>
+  </>
+);
diff --git a/docs/app/components/server/button/examples/Multiline.tsx b/docs/app/components/server/button/examples/Multiline.tsx
new file mode 100644
index 0000000000..526b9889b6
--- /dev/null
+++ b/docs/app/components/server/button/examples/Multiline.tsx
@@ -0,0 +1,12 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Multiline = () => (
+  <Button size="xl" className="py-3">
+    <span className="flex flex-col gap-1">
+      <span className="leading-none">Button text</span>
+      <span className="text-moon-9 font-normal leading-[12px]">
+        Placeholder text
+      </span>
+    </span>
+  </Button>
+);
diff --git a/docs/app/components/server/button/examples/Sizes.tsx b/docs/app/components/server/button/examples/Sizes.tsx
new file mode 100644
index 0000000000..95831ea1ed
--- /dev/null
+++ b/docs/app/components/server/button/examples/Sizes.tsx
@@ -0,0 +1,11 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Sizes = () => (
+  <>
+    <Button size="xs">Size XS</Button>
+    <Button size="sm">Size SM</Button>
+    <Button>Default size MD</Button>
+    <Button size="lg">Size LG</Button>
+    <Button size="xl">Size XL</Button>
+  </>
+);
diff --git a/docs/app/components/server/button/examples/Variants.tsx b/docs/app/components/server/button/examples/Variants.tsx
new file mode 100644
index 0000000000..df384a83b9
--- /dev/null
+++ b/docs/app/components/server/button/examples/Variants.tsx
@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Variants = () => (
+  <>
+    <Button>Default is Fill</Button>
+    <Button variant="outline">Outline</Button>
+    <Button variant="ghost">Ghost</Button>
+  </>
+);
diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx
new file mode 100644
index 0000000000..dc88a8f0f4
--- /dev/null
+++ b/docs/app/components/server/button/page.tsx
@@ -0,0 +1,64 @@
+import { Animations } from '@/app/components/server/button/examples/Animations';
+import { Default } from '@/app/components/server/button/examples/Default';
+import { Disabled } from '@/app/components/server/button/examples/Disabled';
+import { FullWidth } from '@/app/components/server/button/examples/FullWidth';
+import { Icons } from '@/app/components/server/button/examples/Icons';
+import { Multiline } from '@/app/components/server/button/examples/Multiline';
+import { Sizes } from '@/app/components/server/button/examples/Sizes';
+import { Variants } from '@/app/components/server/button/examples/Variants';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.button.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Button</h1>
+      <MDX markdown={server.button.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.button.examples.Default}
+      />
+      <ExampleSection
+        title="Sizes"
+        component={<Sizes />}
+        code={server.button.examples.Sizes}
+      />
+      <ExampleSection
+        title="Variants"
+        component={<Variants />}
+        code={server.button.examples.Variants}
+      />
+      <ExampleSection
+        title="Icons"
+        component={<Icons />}
+        code={server.button.examples.Icons}
+      />
+      <ExampleSection
+        title="FullWidth"
+        component={<FullWidth />}
+        code={server.button.examples.FullWidth}
+      />
+      <ExampleSection
+        title="Disabled"
+        component={<Disabled />}
+        code={server.button.examples.Disabled}
+      />
+      <ExampleSection
+        title="Animations"
+        component={<Animations />}
+        code={server.button.examples.Animations}
+      />
+      <ExampleSection
+        title="Multiline"
+        component={<Multiline />}
+        code={server.button.examples.Multiline}
+      />
+    </div>
+  );
+}
diff --git a/docs/app/components/shared/QuickNav.tsx b/docs/app/components/shared/QuickNav.tsx
new file mode 100644
index 0000000000..b6fe5e45dc
--- /dev/null
+++ b/docs/app/components/shared/QuickNav.tsx
@@ -0,0 +1,11 @@
+const QuickNav = ({ items }: { items: string[] }) => (
+  <ul>
+    {items.map((item) => (
+      <li key={item}>
+        <a href={`#${item}`}>{item}</a>
+      </li>
+    ))}
+  </ul>
+);
+
+export default QuickNav;
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
index 057efe37da..05beff9403 100644
--- a/docs/app/components/types.ts
+++ b/docs/app/components/types.ts
@@ -1,46 +1,59 @@
 export interface Examples {
-  "client": {
-    "accordion": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    },
-    "button": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    }
-  },
-  "server": {
-    "accordion": {
-      "description": "string",
-      "examples": {
-        "ContentOutsideSizes": "string",
-        "Default": "string",
-        "Disabled": "string",
-        "Sizes": "string"
-      }
-    },
-    "avatar": {
-      "description": "string",
-      "examples": {
-        "Active": "string",
-        "Default": "string"
-      }
-    },
-    "tag": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    }
-  },
-  "shared": {
-    "fonts": {
-      "DMSans-Regular": "string",
-      "DMSans-Semibold": "string"
-    }
-  }
-};
+  client: {
+    accordion: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+    button: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+  };
+  server: {
+    accordion: {
+      description: 'string';
+      examples: {
+        ContentOutsideSizes: 'string';
+        Default: 'string';
+        Disabled: 'string';
+        Sizes: 'string';
+      };
+    };
+    button: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+        Sizes: 'string';
+        Variants: 'string';
+        Icons: 'string';
+        FullWidth: 'string';
+        Disabled: 'string';
+        Animations: 'string';
+        Multiline: 'string';
+      };
+    };
+    avatar: {
+      description: 'string';
+      examples: {
+        Active: 'string';
+        Default: 'string';
+      };
+    };
+    tag: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+  };
+  shared: {
+    fonts: {
+      'DMSans-Regular': 'string';
+      'DMSans-Semibold': 'string';
+    };
+  };
+}
diff --git a/workspaces/base/src/button/Button.tsx b/workspaces/base/src/button/Button.tsx
index 873944e592..33b87110d5 100644
--- a/workspaces/base/src/button/Button.tsx
+++ b/workspaces/base/src/button/Button.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import mergeClassnames from '../mergeClassnames/mergeClassnames';
+import type ButtonProps from './private/types/ButtonProps';
+import type ButtonVariants from './private/types/ButtonVariants';
 import AnimationContent from './private/utils/buttonAnimations/AnimationContent';
 import getButtonSize from './private/utils/buttonSizes/getButtonSize';
 import ButtonComponent from './styles/ButtonComponent';
 import Hover from './styles/Hover';
 import IconLeft from './styles/IconLeft';
 import IconRight from './styles/IconRight';
-import type ButtonProps from './private/types/ButtonProps';
-import type ButtonVariants from './private/types/ButtonVariants';
+import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 export type Props<C extends React.ElementType> = React.PropsWithChildren<
   ButtonProps<C>
@@ -16,7 +16,7 @@ export type Props<C extends React.ElementType> = React.PropsWithChildren<
 
 const Button = <C extends React.ElementType = 'button'>({
   children,
-  variant = 'primary',
+  variant = 'fill',
   size = 'md',
   iconLeft,
   iconRight,
@@ -31,7 +31,7 @@ const Button = <C extends React.ElementType = 'button'>({
     animation === 'progress' || animation === 'success';
   if (!children) {
     return (
-      <span className="relative cursor-pointer [&_.hover]:hover:bg-bulma/[.07]">
+      <span className="relative cursor-pointer [&_.hover]:hover:bg-heles">
         <ButtonComponent
           size={size}
           variant={variant as ButtonVariants}
@@ -79,6 +79,7 @@ const Button = <C extends React.ElementType = 'button'>({
           animation={animation}
           size={size}
           fullWidth={fullWidth}
+          variant={variant}
         />
       ) : (
         <>
diff --git a/workspaces/base/src/button/private/types/ButtonSettingsProps.ts b/workspaces/base/src/button/private/types/ButtonSettingsProps.ts
index 5965bebaf0..45b38bf7c8 100644
--- a/workspaces/base/src/button/private/types/ButtonSettingsProps.ts
+++ b/workspaces/base/src/button/private/types/ButtonSettingsProps.ts
@@ -1,4 +1,4 @@
-import ButtonAnimations from './ButtonAnimations';
+import type ButtonAnimations from './ButtonAnimations';
 import type ButtonSizes from './ButtonSizes';
 import type ButtonVariants from './ButtonVariants';
 
diff --git a/workspaces/base/src/button/private/types/ButtonVariants.ts b/workspaces/base/src/button/private/types/ButtonVariants.ts
index 1ad1e2d6d5..06ca8b14c1 100644
--- a/workspaces/base/src/button/private/types/ButtonVariants.ts
+++ b/workspaces/base/src/button/private/types/ButtonVariants.ts
@@ -1,3 +1,9 @@
-type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type ButtonVariants =
+  | 'fill'
+  | 'outline'
+  | 'ghost'
+  | 'primary'
+  | 'secondary'
+  | 'tertiary';
 
 export default ButtonVariants;
diff --git a/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx b/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx
index cd9ed3a307..862c4941c9 100644
--- a/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx
+++ b/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx
@@ -7,6 +7,7 @@ import IconRight from '../../../styles/IconRight';
 import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 import getIconSize from '../buttonSizes/getIconSize';
 import getLoaderSize from '../buttonSizes/getLoaderSize';
+import getLoaderColor from '../buttonStyles/getLoaderColor';
 
 const AnimationContent = ({
   children,
@@ -15,6 +16,7 @@ const AnimationContent = ({
   animation,
   size,
   fullWidth,
+  variant,
 }: ButtonSettingsProps) => (
   <span className="block h-full pointer-events-none">
     <span
@@ -24,7 +26,7 @@ const AnimationContent = ({
       )}
     >
       {animation === 'progress' && (
-        <Loader color="currentColor" size={getLoaderSize(size)} />
+        <Loader size={getLoaderSize(size)} color={getLoaderColor(variant)} />
       )}
       {animation === 'success' && (
         <GenericCheckAlternative
diff --git a/workspaces/base/src/button/private/utils/buttonSizes/getButtonSize.ts b/workspaces/base/src/button/private/utils/buttonSizes/getButtonSize.ts
index 1d715ccd1b..7f7a97f000 100644
--- a/workspaces/base/src/button/private/utils/buttonSizes/getButtonSize.ts
+++ b/workspaces/base/src/button/private/utils/buttonSizes/getButtonSize.ts
@@ -1,9 +1,9 @@
-import mergeClassnames from '../../../../mergeClassnames/mergeClassnames';
 import getLgPadding from './getLgPadding';
 import getMdPadding from './getMdPadding';
 import getSmPadding from './getSmPadding';
 import getXlPadding from './getXlPadding';
 import getXsPadding from './getXsPadding';
+import mergeClassnames from '../../../../mergeClassnames/mergeClassnames';
 import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 
 const getButtonSize = ({
diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts b/workspaces/base/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts
index e122464b01..dfd3ebaee0 100644
--- a/workspaces/base/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts
+++ b/workspaces/base/src/button/private/utils/buttonStyles/getButtonCommonStyles.ts
@@ -10,7 +10,7 @@ const getButtonCommonStyles = (
     disabled
       ? 'opacity-60 cursor-not-allowed'
       : 'active:scale-90 [&_+_span]:active:scale-90',
-    '[&_.hover]:hover:bg-bulma/[.07]'
+    '[&_.hover]:hover:bg-heles'
   );
 
 export default getButtonCommonStyles;
diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getButtonVariants.ts b/workspaces/base/src/button/private/utils/buttonStyles/getButtonVariants.ts
index a8b249ee82..e7ed6608e0 100644
--- a/workspaces/base/src/button/private/utils/buttonStyles/getButtonVariants.ts
+++ b/workspaces/base/src/button/private/utils/buttonStyles/getButtonVariants.ts
@@ -4,20 +4,36 @@ import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 const getButtonVariants = ({
   variant,
   disabled,
-}: ButtonSettingsProps): string => {
-  if (variant === 'secondary') {
-    return 'btn-secondary';
+  animation,
+}: Pick<ButtonSettingsProps, 'variant' | 'disabled' | 'animation'>): string => {
+  if (variant === 'secondary' || variant === 'outline') {
+    return animation === 'error'
+      ? mergeClassnames(
+          'text-chichi bg-transparent ring-inset ring-1 ring-chichi',
+          !disabled && 'hover:bg-chichi-10'
+        )
+      : mergeClassnames(
+          'text-bulma bg-transparent ring-inset ring-1 ring-trunks',
+          !disabled && 'hover:ring-bulma'
+        );
   }
   if (variant === 'tertiary') {
-    return 'btn-tertiary';
+    return animation === 'error' ? 'text-goten bg-chichi' : 'text-goten bg-hit';
   }
   if (variant === 'ghost') {
-    return mergeClassnames(
-      'text-trunks bg-transparent',
-      !disabled && 'hover:text-bulma'
-    );
+    return animation === 'error'
+      ? mergeClassnames(
+          'text-chichi bg-transparent',
+          !disabled && 'hover:bg-chichi-10'
+        )
+      : mergeClassnames(
+          'text-trunks bg-transparent',
+          !disabled && 'hover:text-bulma'
+        );
   }
-  return 'btn-primary';
+  return animation === 'error'
+    ? 'text-goten bg-chichi'
+    : 'text-goten bg-piccolo';
 };
 
 export default getButtonVariants;
diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts b/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts
index 43edfebcc5..4548cd2798 100644
--- a/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts
+++ b/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts
@@ -6,31 +6,31 @@ const getIconHorizontalPosition = ({
   iconRight,
   iconLeft,
   size,
-}: Props): string => {
+}: Pick<Props, 'iconRight' | 'iconLeft' | 'size'>): string => {
   if (iconRight) {
     switch (size) {
       case 'xs':
       case 'sm':
-        return 'ltr:right-1 rtl:left-1';
+        return 'end-1';
       case 'lg':
-        return 'ltr:right-3 rtl:left-3';
+        return 'end-3';
       case 'xl':
-        return 'ltr:right-4 rtl:left-4';
+        return 'end-4';
       default:
-        return 'ltr:right-2 rtl:left-2';
+        return 'end-2';
     }
   }
   if (iconLeft) {
     switch (size) {
       case 'xs':
       case 'sm':
-        return 'ltr:left-1 rtl:right-1';
+        return 'start-1';
       case 'lg':
-        return 'ltr:left-3 rtl:right-3';
+        return 'start-3';
       case 'xl':
-        return 'ltr:left-4 rtl:right-4';
+        return 'start-4';
       default:
-        return 'ltr:left-2 rtl:right-2';
+        return 'start-2';
     }
   }
   return '';
diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts b/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts
new file mode 100644
index 0000000000..c7826486ec
--- /dev/null
+++ b/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts
@@ -0,0 +1,15 @@
+import type ButtonVariants from '../../types/ButtonVariants';
+
+const getLoaderColor = (variant?: ButtonVariants): string => {
+  switch (variant) {
+    case 'secondary':
+    case 'outline':
+      return 'border-bulma';
+    case 'ghost':
+      return 'border-trunks';
+    default:
+      return 'border-goten';
+  }
+};
+
+export default getLoaderColor;
diff --git a/workspaces/base/src/button/styles/ButtonComponent.tsx b/workspaces/base/src/button/styles/ButtonComponent.tsx
index 2a40708e3d..606e96e3eb 100644
--- a/workspaces/base/src/button/styles/ButtonComponent.tsx
+++ b/workspaces/base/src/button/styles/ButtonComponent.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
+import type ButtonProps from '../private/types/ButtonProps';
 import getAnimation from '../private/utils/buttonAnimations/getAnimation';
 import getButtonSize from '../private/utils/buttonSizes/getButtonSize';
 import getButtonCommonStyles from '../private/utils/buttonStyles/getButtonCommonStyles';
 import getButtonVariants from '../private/utils/buttonStyles/getButtonVariants';
-import type ButtonProps from '../private/types/ButtonProps';
 
 const ButtonComponent = <C extends React.ElementType>({
   variant,
diff --git a/workspaces/base/src/button/styles/Hover.tsx b/workspaces/base/src/button/styles/Hover.tsx
index e9c68d9262..a47a6b79fd 100644
--- a/workspaces/base/src/button/styles/Hover.tsx
+++ b/workspaces/base/src/button/styles/Hover.tsx
@@ -10,7 +10,7 @@ const Hover = ({ className }: HoverProps) => (
     className={mergeClassnames(
       'hover z-[-1] block absolute inset-0 pointer-events-none',
       'transition-[background-color_0.2s_ease-in-out]',
-      'hover:bg-bulma/[.07]',
+      'hover:bg-heles',
       className
     )}
   />
diff --git a/workspaces/base/src/button/styles/IconLeft.tsx b/workspaces/base/src/button/styles/IconLeft.tsx
index dd01596403..a4bba78590 100644
--- a/workspaces/base/src/button/styles/IconLeft.tsx
+++ b/workspaces/base/src/button/styles/IconLeft.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
+import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 import getIconSize from '../private/utils/buttonSizes/getIconSize';
 import getIconHorizontalPosition from '../private/utils/buttonStyles/getIconHorizontalPosition';
-import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 
 const IconLeft = ({ fullWidth, iconLeft, size }: ButtonSettingsProps) => (
   <span
diff --git a/workspaces/base/src/button/styles/IconRight.tsx b/workspaces/base/src/button/styles/IconRight.tsx
index 3153f9d4ac..73112926b1 100644
--- a/workspaces/base/src/button/styles/IconRight.tsx
+++ b/workspaces/base/src/button/styles/IconRight.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import mergeClassnames from '../../mergeClassnames/mergeClassnames';
+import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 import getIconSize from '../private/utils/buttonSizes/getIconSize';
 import getIconHorizontalPosition from '../private/utils/buttonStyles/getIconHorizontalPosition';
-import type ButtonSettingsProps from '../private/types/ButtonSettingsProps';
 
 const IconRight = ({ fullWidth, iconRight, size }: ButtonSettingsProps) => (
   <span