@hero-design/rn 8.105.4 → 8.106.0

package/src/components/Button/StyledButton.tsx

@@ -5,162 +5,290 @@ import { TouchableHighlight, View } from 'react-native';
 import { scale } from '../../utils/scale';
 import Icon from '../Icon';
 import Typography from '../Typography';
+import {
+  transformKebabCaseToCamelCase,
+  type CamelCase,
+} from '../../utils/helpers';
 
-type Intent = 'primary' | 'secondary' | 'danger' | 'white';
+type Intent = 'primary' | 'secondary' | 'danger' | 'white' | 'inverted';
 
 type ThemeVariant =
   | 'filled-primary'
   | 'filled-secondary'
   | 'filled-danger'
   | 'filled-white'
+  | 'filled-inverted'
   | 'outlined-primary'
   | 'outlined-secondary'
   | 'outlined-danger'
   | 'outlined-white'
+  | 'outlined-inverted'
   | 'text-primary'
   | 'text-secondary'
   | 'text-danger'
-  | 'text-white';
-
-const getButtonHeight = (themeIsCompact: boolean) => {
-  switch (themeIsCompact) {
-    case true:
-      return scale(36);
-    default:
-      return scale(60);
+  | 'text-white'
+  | 'text-inverted';
+
+const getButtonSize = (themeIsCompact: boolean, themeIsMedium?: boolean) => {
+  if (themeIsCompact) return scale(36);
+
+  if (themeIsMedium) return scale(48);
+
+  return scale(60);
+};
+
+const getTextButtonPaddingVertical = (
+  theme: Theme,
+  themeInlineText: boolean,
+  themeIsCompact: boolean
+) => {
+  if (themeInlineText) {
+    return 0;
+  }
+  if (themeIsCompact) {
+    return theme.__hd__.button.space.compact.buttonPaddingVertical;
+  }
+  return theme.__hd__.button.space.default.textButtonPadding;
+};
+
+const getTextButtonPaddingHorizontal = (
+  theme: Theme,
+  themeInlineText: boolean,
+  themeIsCompact: boolean
+) => {
+  if (themeInlineText) {
+    return 0;
+  }
+  if (themeIsCompact) {
+    return theme.__hd__.button.space.compact.buttonPaddingHorizontal;
   }
+  return theme.__hd__.button.space.default.textButtonPadding;
+};
+
+const genDisabledStyles = (disabled: boolean, loading: boolean) => {
+  if (!disabled || loading) return;
+
+  return { opacity: 0.25 };
 };
 
 const genFilledContainerStyles = (
   theme: Theme,
-  intent: Intent,
-  disabled: boolean,
+  intent: Capitalize<Intent>,
   loading: boolean,
-  compact: boolean
+  compact: boolean,
+  medium: boolean,
+  iconOnly: boolean
 ): ReactNativeStyle => {
   const backgroundColorStyling = () => {
-    if (!loading && disabled) {
+    const colorKey = `filled${intent}` as const;
+    if (loading) {
+      return {
+        backgroundColor: theme.__hd__.button.colors.pressedBackground[colorKey],
+      };
+    }
+
+    return {
+      backgroundColor: theme.__hd__.button.colors.background[colorKey],
+    };
+  };
+
+  const paddingStyling = (): ReactNativeStyle => {
+    if (iconOnly)
+      return {
+        alignSelf: 'flex-start',
+        width: getButtonSize(compact, medium),
+        borderRadius: theme.__hd__.button.radii.rounded,
+      };
+
+    if (compact)
       return {
-        backgroundColor: theme.__hd__.button.colors.disabledBorder,
+        alignSelf: 'flex-start',
+        paddingVertical:
+          theme.__hd__.button.space.compact.buttonPaddingVertical,
+        paddingHorizontal: theme.__hd__.button.space.default.buttonPadding,
+        borderRadius: theme.__hd__.button.radii.default,
+      };
+
+    if (medium) {
+      return {
+        alignSelf: 'flex-start',
+        borderRadius: theme.__hd__.button.radii.default,
+        paddingHorizontal: theme.__hd__.button.space.medium.buttonPadding,
       };
     }
 
-    return { backgroundColor: theme.__hd__.button.colors[intent] };
+    return {
+      alignSelf: 'stretch',
+      padding: theme.__hd__.button.space.default.buttonPadding,
+      borderRadius: theme.__hd__.button.radii.default,
+    };
   };
 
   return {
-    height: getButtonHeight(compact),
+    height: getButtonSize(compact, medium),
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    ...(compact
-      ? {
-          alignSelf: 'flex-start',
-          paddingVertical:
-            theme.__hd__.button.space.compact.buttonPaddingVertical,
-          paddingHorizontal: theme.__hd__.button.space.default.buttonPadding,
-        }
-      : {
-          alignSelf: 'stretch',
-          padding: theme.__hd__.button.space.default.buttonPadding,
-        }),
-    borderRadius: theme.__hd__.button.radii.default,
+    ...paddingStyling(),
     ...backgroundColorStyling(),
   };
 };
 
 const genOutlineContainerStyles = (
   theme: Theme,
-  intent: Intent,
-  disabled: boolean,
+  intent: Capitalize<Intent>,
   loading: boolean,
-  compact: boolean
+  compact: boolean,
+  medium: boolean,
+  iconOnly: boolean
 ): ReactNativeStyle => {
   const borderColorStyling = () => {
-    if (!loading && disabled) {
+    const colorKey = `outlined${intent}` as const;
+    if (loading) {
+      return {
+        borderColor: theme.__hd__.button.colors.border[colorKey],
+        backgroundColor: theme.__hd__.button.colors.pressedBackground[colorKey],
+      };
+    }
+
+    return { borderColor: theme.__hd__.button.colors.border[colorKey] };
+  };
+
+  const paddingStyling = (): ReactNativeStyle => {
+    if (iconOnly)
+      return {
+        alignSelf: 'flex-start',
+        width: getButtonSize(compact, medium),
+        borderRadius: theme.__hd__.button.radii.rounded,
+      };
+
+    if (compact)
+      return {
+        alignSelf: 'flex-start',
+        paddingVertical:
+          theme.__hd__.button.space.compact.buttonPaddingVertical -
+          theme.__hd__.button.borderWidth.default,
+        paddingHorizontal:
+          theme.__hd__.button.space.default.buttonPadding -
+          theme.__hd__.button.borderWidth.default,
+        borderRadius: theme.__hd__.button.radii.default,
+      };
+
+    if (medium) {
       return {
-        borderColor: theme.__hd__.button.colors.disabledBorder,
+        alignSelf: 'flex-start',
+        borderRadius: theme.__hd__.button.radii.default,
+        paddingHorizontal:
+          theme.__hd__.button.space.medium.buttonPaddingHorizontal -
+          theme.__hd__.button.borderWidth.default,
       };
     }
 
-    return { borderColor: theme.__hd__.button.colors[intent] };
+    return {
+      alignSelf: 'stretch',
+      padding:
+        theme.__hd__.button.space.default.buttonPadding -
+        theme.__hd__.button.borderWidth.default,
+      borderRadius: theme.__hd__.button.radii.default,
+    };
   };
 
   return {
-    height: getButtonHeight(compact),
+    height: getButtonSize(compact, medium),
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    ...(compact
-      ? {
-          alignSelf: 'flex-start',
-          paddingVertical:
-            theme.__hd__.button.space.compact.buttonPaddingVertical -
-            theme.__hd__.button.borderWidth.default,
-          paddingHorizontal:
-            theme.__hd__.button.space.default.buttonPadding -
-            theme.__hd__.button.borderWidth.default,
-        }
-      : {
-          alignSelf: 'stretch',
-          padding:
-            theme.__hd__.button.space.default.buttonPadding -
-            theme.__hd__.button.borderWidth.default,
-        }),
+    ...paddingStyling(),
     borderWidth: theme.__hd__.button.borderWidth.default,
-    borderRadius: theme.__hd__.button.radii.default,
     backgroundColor: 'transparent',
     ...borderColorStyling(),
   };
 };
 
-const getTextButtonPaddingVertical = (
+const getTextContainerStyles = (
   theme: Theme,
-  themeInlineText: boolean,
-  themeIsCompact: boolean
-) => {
-  if (themeInlineText) {
-    return 0;
-  }
-  if (themeIsCompact) {
-    return theme.__hd__.button.space.compact.buttonPaddingVertical;
-  }
-  return theme.__hd__.button.space.default.textButtonPadding;
-};
+  intent: Capitalize<Intent>,
+  loading: boolean,
+  inlineText: boolean,
+  compact: boolean,
+  medium: boolean,
+  iconOnly: boolean
+): ReactNativeStyle => {
+  const colorKey = `text${intent}` as const;
 
-const getTextButtonPaddingHorizontal = (
-  theme: Theme,
-  themeInlineText: boolean,
-  themeIsCompact: boolean
-) => {
-  if (themeInlineText) {
-    return 0;
-  }
-  if (themeIsCompact) {
-    return theme.__hd__.button.space.compact.buttonPaddingHorizontal;
-  }
-  return theme.__hd__.button.space.default.textButtonPadding;
+  const paddingStyles = (): ReactNativeStyle => {
+    if (iconOnly) {
+      return {
+        alignSelf: 'flex-start',
+        borderRadius: theme.__hd__.button.radii.rounded,
+        width: inlineText ? undefined : getButtonSize(compact, medium),
+      };
+    }
+
+    if (compact) {
+      return {
+        alignSelf: 'flex-start',
+        paddingVertical: getTextButtonPaddingVertical(
+          theme,
+          inlineText,
+          compact
+        ),
+        paddingHorizontal: getTextButtonPaddingHorizontal(
+          theme,
+          inlineText,
+          compact
+        ),
+      };
+    }
+
+    if (medium) {
+      return {
+        alignSelf: 'flex-start',
+        paddingHorizontal: inlineText
+          ? 0
+          : theme.__hd__.button.space.medium.textButtonPadding,
+      };
+    }
+
+    return {
+      padding: inlineText
+        ? 0
+        : theme.__hd__.button.space.default.textButtonPadding,
+    };
+  };
+
+  return {
+    height: inlineText ? undefined : getButtonSize(compact, medium),
+    borderRadius: theme.__hd__.button.radii.rounded,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor:
+      !inlineText && loading
+        ? theme.__hd__.button.colors.pressedBackground[colorKey]
+        : 'transparent',
+    borderWidth: 0,
+    ...paddingStyles(),
+  };
 };
 
 const genTextStyles = (
   theme: Theme,
-  intent: Intent,
-  disabled?: boolean,
+  themeButtonVariant: CamelCase<ThemeVariant>,
+  intent?: Capitalize<Intent>,
   isPressed?: boolean
 ): ReactNativeStyle => {
-  if (disabled) {
-    return {
-      color: theme.__hd__.button.colors.disabledText,
-    };
-  }
+  if (isPressed && intent) {
+    const colorKey = `inlineText${intent}` as const;
 
-  if (isPressed) {
     return {
-      color: theme.__hd__.button.colors.pressedText[intent],
+      color: theme.__hd__.button.colors.pressedText[colorKey],
     };
   }
 
-  return { color: theme.__hd__.button.colors[intent] };
+  return {
+    color: theme.__hd__.button.colors.text[themeButtonVariant],
+  };
 };
 
 const StyledButtonContainer = styled(TouchableHighlight)<{
@@ -169,6 +297,8 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
   loading?: boolean;
   themeInlineText?: boolean;
   themeIsCompact?: boolean;
+  themeIsMedium?: boolean;
+  themeIsIconOnly?: boolean;
 }>(
   ({
     disabled = false,
@@ -177,187 +307,209 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
     themeInlineText = false,
     theme,
     themeIsCompact = false,
+    themeIsMedium = false,
+    themeIsIconOnly = false,
   }) => {
     switch (themeButtonVariant) {
       case 'filled-primary':
-        return genFilledContainerStyles(
-          theme,
-          'primary',
-          disabled,
-          loading,
-          themeIsCompact
-        );
+        return {
+          ...genFilledContainerStyles(
+            theme,
+            'Primary',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'filled-secondary':
-        return genFilledContainerStyles(
-          theme,
-          'secondary',
-          disabled,
-          loading,
-          themeIsCompact
-        );
+        return {
+          ...genFilledContainerStyles(
+            theme,
+            'Secondary',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'filled-danger':
-        return genFilledContainerStyles(
-          theme,
-          'danger',
-          disabled,
-          loading,
-          themeIsCompact
-        );
+        return {
+          ...genFilledContainerStyles(
+            theme,
+            'Danger',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'filled-white':
-        return genFilledContainerStyles(
-          theme,
-          'white',
-          disabled,
-          loading,
-          themeIsCompact
-        );
+        return {
+          ...genFilledContainerStyles(
+            theme,
+            'White',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
+      case 'filled-inverted':
+        return {
+          ...genFilledContainerStyles(
+            theme,
+            'Inverted',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'outlined-primary':
-        return genOutlineContainerStyles(
-          theme,
-          'primary',
-          disabled,
-          loading,
-          themeIsCompact
-        );
+        return {
+          ...genOutlineContainerStyles(
+            theme,
+            'Primary',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'outlined-secondary':
-        return genOutlineContainerStyles(
-          theme,
-          'secondary',
-          disabled,
-          loading,
-          themeIsCompact
-        );
+        return {
+          ...genOutlineContainerStyles(
+            theme,
+            'Secondary',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'outlined-danger':
-        return genOutlineContainerStyles(
-          theme,
-          'danger',
-          disabled,
-          loading,
-          themeIsCompact
-        );
+        return {
+          ...genOutlineContainerStyles(
+            theme,
+            'Danger',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'outlined-white':
-        return genOutlineContainerStyles(
-          theme,
-          'white',
-          disabled,
-          loading,
-          themeIsCompact
-        );
+        return {
+          ...genOutlineContainerStyles(
+            theme,
+            'White',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
+
+      case 'outlined-inverted':
+        return {
+          ...genOutlineContainerStyles(
+            theme,
+            'Inverted',
+            loading,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'text-primary':
+        return {
+          ...getTextContainerStyles(
+            theme,
+            'Primary',
+            loading,
+            themeInlineText,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'text-secondary':
+        return {
+          ...getTextContainerStyles(
+            theme,
+            'Secondary',
+            loading,
+            themeInlineText,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
+        };
       case 'text-danger':
-      case 'text-white':
         return {
-          height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
-          borderRadius: theme.__hd__.button.radii.text,
-          flexDirection: 'row',
-          justifyContent: 'center',
-          alignItems: 'center',
-          ...(themeIsCompact
-            ? {
-                alignSelf: 'flex-start',
-                paddingVertical: getTextButtonPaddingVertical(
-                  theme,
-                  themeInlineText,
-                  themeIsCompact
-                ),
-                paddingHorizontal: getTextButtonPaddingHorizontal(
-                  theme,
-                  themeInlineText,
-                  themeIsCompact
-                ),
-              }
-            : {
-                padding: themeInlineText
-                  ? 0
-                  : theme.__hd__.button.space.default.textButtonPadding,
-              }),
-
-          borderWidth: 0,
-          backgroundColor:
-            loading && !themeInlineText && themeButtonVariant !== 'text-white'
-              ? theme.__hd__.button.colors.textLoadingBackground
-              : 'transparent',
+          ...getTextContainerStyles(
+            theme,
+            'Danger',
+            loading,
+            themeInlineText,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
         };
-    }
-  }
-);
-
-const genWhiteTextStyles = ({
-  variant,
-  disabled,
-  theme,
-}: {
-  variant: ThemeVariant;
-  disabled?: boolean;
-  theme: Theme;
-}) => {
-  if (disabled) {
-    switch (variant) {
-      case 'filled-white': {
+      case 'text-white':
         return {
-          color: theme.__hd__.button.colors.invertedText,
+          ...getTextContainerStyles(
+            theme,
+            'White',
+            loading,
+            themeInlineText,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
         };
-      }
-      case 'outlined-white':
-      case 'text-white': {
+      case 'text-inverted':
         return {
-          color: theme.__hd__.button.colors.disabledText,
+          ...getTextContainerStyles(
+            theme,
+            'Inverted',
+            loading,
+            themeInlineText,
+            themeIsCompact,
+            themeIsMedium,
+            themeIsIconOnly
+          ),
+          ...genDisabledStyles(disabled, loading),
         };
-      }
     }
   }
-
-  switch (variant) {
-    case 'filled-white': {
-      return {
-        color: theme.__hd__.button.colors.primary,
-      };
-    }
-
-    case 'outlined-white':
-    case 'text-white': {
-      return {
-        color: theme.__hd__.button.colors.invertedText,
-      };
-    }
-  }
-};
+);
 
 const StyledButtonText = styled(Typography.Title)<{
   disabled?: boolean;
   themeButtonVariant: ThemeVariant;
-}>(({ disabled, themeButtonVariant, theme }) => {
+}>(({ themeButtonVariant, theme }) => {
   const themeStyling = () => {
-    switch (themeButtonVariant) {
-      case 'filled-primary':
-      case 'filled-secondary':
-      case 'filled-danger':
-        return {
-          color: theme.__hd__.button.colors.invertedText,
-        };
-      case 'outlined-primary':
-        return genTextStyles(theme, 'primary', disabled);
-      case 'outlined-secondary':
-        return genTextStyles(theme, 'secondary', disabled);
-      case 'outlined-danger':
-        return genTextStyles(theme, 'danger', disabled);
+    const camelCaseThemeVariant =
+      transformKebabCaseToCamelCase(themeButtonVariant);
 
-      case 'text-primary':
-        return genTextStyles(theme, 'primary', disabled);
-      case 'text-secondary':
-        return genTextStyles(theme, 'secondary', disabled);
-      case 'text-danger':
-        return genTextStyles(theme, 'danger', disabled);
-      case 'filled-white':
-      case 'outlined-white':
-      case 'text-white':
-        return genWhiteTextStyles({
-          variant: themeButtonVariant,
-          disabled,
-          theme,
-        });
-    }
+    return genTextStyles(theme, camelCaseThemeVariant);
   };
   return {
     flexShrink: 1,
@@ -380,44 +532,46 @@ const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
     | 'text-primary'
     | 'text-secondary'
     | 'text-danger'
-    | 'text-white';
+    | 'text-white'
+    | 'text-inverted';
   themeIsPressed?: boolean;
   themeIsCompact: boolean;
-}>(
-  ({ disabled, themeButtonVariant, themeIsPressed, theme, themeIsCompact }) => {
-    const themeStyling = () => {
-      switch (themeButtonVariant) {
-        case 'text-primary':
-          return genTextStyles(theme, 'primary', disabled, themeIsPressed);
-        case 'text-secondary':
-          return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
-        case 'text-danger':
-          return genTextStyles(theme, 'danger', disabled, themeIsPressed);
-        case 'text-white':
-          return genWhiteTextStyles({
-            variant: 'text-white',
-            disabled,
-            theme,
-          });
-      }
-    };
-    return {
-      flexShrink: 1,
-      lineHeight:
-        theme.__hd__.button.lineHeights.titleOfTextVariant[
-          themeIsCompact ? 'compact' : 'default'
-        ],
-      textAlign: 'center',
-      textAlignVertical: 'center',
-      ...themeStyling(),
-    };
-  }
-);
+}>(({ themeButtonVariant, themeIsPressed, theme, themeIsCompact }) => {
+  const themeStyling = () => {
+    const themeVariant = transformKebabCaseToCamelCase(themeButtonVariant);
+    switch (themeButtonVariant) {
+      case 'text-primary':
+        return genTextStyles(theme, themeVariant, 'Primary', themeIsPressed);
+      case 'text-secondary':
+        return genTextStyles(theme, themeVariant, 'Secondary', themeIsPressed);
+      case 'text-danger':
+        return genTextStyles(theme, themeVariant, 'Danger', themeIsPressed);
+      case 'text-white':
+        return genTextStyles(theme, themeVariant, 'White', themeIsPressed);
+      case 'text-inverted':
+        return genTextStyles(theme, themeVariant, 'Inverted', themeIsPressed);
+    }
+  };
+
+  return {
+    flexShrink: 1,
+    lineHeight:
+      theme.__hd__.button.lineHeights.titleOfTextVariant[
+        themeIsCompact ? 'compact' : 'default'
+      ],
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    ...themeStyling(),
+  };
+});
 
 const StyledButtonIconWrapper = styled(View)<{
   themePosition: 'left' | 'right';
   themeIsCompact?: boolean;
-}>(({ themePosition, theme, themeIsCompact }) => {
+  themeIsIconOnly?: boolean;
+}>(({ themePosition, theme, themeIsCompact, themeIsIconOnly }) => {
+  if (themeIsIconOnly) return {};
+
   switch (themePosition) {
     case 'left':
       return {
@@ -439,47 +593,41 @@ const StyledButtonIcon = styled(Icon)<{
   themeButtonVariant: ThemeVariant;
   themeIsPressed?: boolean;
   themeIsCompact?: boolean;
-}>(
-  ({ disabled, themeButtonVariant, themeIsPressed, theme, themeIsCompact }) => {
-    const themeStyling = () => {
-      switch (themeButtonVariant) {
-        case 'filled-primary':
-        case 'filled-secondary':
-        case 'filled-danger':
-          return {
-            color: theme.__hd__.button.colors.invertedText,
-          };
-        case 'outlined-primary':
-          return genTextStyles(theme, 'primary', disabled);
-        case 'outlined-secondary':
-          return genTextStyles(theme, 'secondary', disabled);
-        case 'outlined-danger':
-          return genTextStyles(theme, 'danger', disabled);
-        case 'text-primary':
-          return genTextStyles(theme, 'primary', disabled, themeIsPressed);
-        case 'text-secondary':
-          return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
-        case 'text-danger':
-          return genTextStyles(theme, 'danger', disabled, themeIsPressed);
-        case 'filled-white':
-        case 'outlined-white':
-        case 'text-white':
-          return genWhiteTextStyles({
-            variant: themeButtonVariant,
-            disabled,
-            theme,
-          });
-      }
-    };
+}>(({ themeButtonVariant, themeIsPressed, theme, themeIsCompact }) => {
+  const themeStyling = () => {
+    const themeVariant = transformKebabCaseToCamelCase(themeButtonVariant);
 
-    return {
-      fontSize: themeIsCompact
-        ? theme.__hd__.button.sizes.iconSize.compact
-        : theme.__hd__.button.sizes.iconSize.default,
-      ...themeStyling(),
-    };
-  }
-);
+    switch (themeButtonVariant) {
+      case 'filled-primary':
+      case 'outlined-primary':
+      case 'text-primary':
+        return genTextStyles(theme, themeVariant, 'Primary', themeIsPressed);
+      case 'filled-secondary':
+      case 'outlined-secondary':
+      case 'text-secondary':
+        return genTextStyles(theme, themeVariant, 'Secondary', themeIsPressed);
+      case 'filled-danger':
+      case 'outlined-danger':
+      case 'text-danger':
+        return genTextStyles(theme, themeVariant, 'Danger', themeIsPressed);
+      case 'filled-white':
+      case 'outlined-white':
+      case 'text-white':
+        return genTextStyles(theme, themeVariant, 'White', themeIsPressed);
+      case 'filled-inverted':
+      case 'outlined-inverted':
+      case 'text-inverted':
+        return genTextStyles(theme, themeVariant, 'Inverted', themeIsPressed);
+    }
+  };
+
+  return {
+    fontSize: themeIsCompact
+      ? theme.__hd__.button.sizes.iconSize.compact
+      : theme.__hd__.button.sizes.iconSize.default,
+    ...themeStyling(),
+  };
+});
 
 export {
   StyledButtonContainer,
@@ -489,4 +637,4 @@ export {
   StyledButtonTitleOfVariantText,
   StyledSmallButtonText,
 };
-export type { Intent, ThemeVariant };
+export type { Intent, ThemeVariant, CamelCase };