Fix ButtonLink (#263)

* fix styles of ButtonLink * refactor button styles
aboutbits · Aug 9, 2023 · c1eba0e · c1eba0e
1 parent 2bb0965
commit c1eba0e
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -32,9 +32,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <button
         className={classNames(
           button.button.base,
-          !props.disabled
-            ? button.modeVariantTone[mode][variant][tone]
-            : button.modeVariantTone[mode][variant].disabled,
+          props.disabled
+            ? button.modeVariantTone[mode][variant].disabled
+            : button.modeVariantTone[mode][variant][tone],
           button.button.variantSize.base,
           button.button.variantSize[variant][size],
           className,

diff --git a/src/components/button/ButtonIcon.tsx b/src/components/button/ButtonIcon.tsx
@@ -34,9 +34,7 @@ export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
           !props.disabled
             ? button.modeVariantTone[mode][variant][tone]
             : button.modeVariantTone[mode][variant].disabled,
-          button.buttonIcon.variantSize[
-            variant === ButtonVariant.Ghost ? variant : 'base'
-          ][size],
+          button.buttonIcon.variantSize[variant][size],
           className,
         )}
         aria-label={label}

diff --git a/src/components/button/ButtonIconLink.tsx b/src/components/button/ButtonIconLink.tsx
@@ -41,9 +41,7 @@ export const ButtonIconLink = forwardRef<
     !disabled
       ? button.modeVariantTone[mode][variant][tone]
       : button.modeVariantTone[mode][variant].disabled,
-    button.buttonIcon.variantSize[
-      variant === ButtonVariant.Ghost ? variant : 'base'
-    ][size],
+    button.buttonIcon.variantSize[variant][size],
     className,
   )
 

diff --git a/src/components/button/ButtonLink.tsx b/src/components/button/ButtonLink.tsx
@@ -40,9 +40,8 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       disabled
         ? button.modeVariantTone[mode][variant].disabled
         : button.modeVariantTone[mode][variant][tone],
-      button.button.variantSize[
-        variant === ButtonVariant.Ghost ? variant : 'base'
-      ][size],
+      button.button.variantSize.base,
+      button.button.variantSize[variant][size],
       className,
     )
 

diff --git a/src/components/button/theme.ts b/src/components/button/theme.ts
@@ -60,7 +60,7 @@ export default {
       },
     },
     variantSize: {
-      base: {
+      [ButtonVariant.Solid]: {
         [Size.Sm]: 'p-1.5',
         [Size.Md]: 'p-2',
         [Size.Lg]: 'p-3',
@@ -70,6 +70,11 @@ export default {
         [Size.Md]: 'p-2-1px border',
         [Size.Lg]: 'p-3-1px border',
       },
+      [ButtonVariant.Transparent]: {
+        [Size.Sm]: 'p-1.5',
+        [Size.Md]: 'p-2',
+        [Size.Lg]: 'p-3',
+      },
     },
   },
   modeVariantTone: {