diff --git a/packages/react/src/components/GayaButton/GayaButton.styles.ts b/packages/react/src/components/GayaButton/GayaButton.styles.ts
index 6239c1eaf..648172682 100644
--- a/packages/react/src/components/GayaButton/GayaButton.styles.ts
+++ b/packages/react/src/components/GayaButton/GayaButton.styles.ts
@@ -5,7 +5,7 @@
 import { createUseStyles } from 'react-jss'
 import { Theme } from '@naturacosmeticos/natds-themes'
 import { buildTheme } from '../../ThemeProvider'
-import { GayaButtonColor, GayaButtonProps } from './GayaButton.props'
+import { GayaButtonProps } from './GayaButton.props'
 import { BrandTypes } from '../../brandTypes/brandTypes'
 
 type GayaButtonStyleProps = Pick<GayaButtonProps, 'size' | 'showIcon' | 'iconPosition' | 'variant' | 'fullWidth' | 'display' | 'disabled'| 'brand' | 'textTransform' | 'color' | 'mode'>
@@ -20,285 +20,6 @@ const getPaddingStyles = (theme: Theme) => ({ size }: GayaButtonStyleProps) => {
   return size && padding[size]
 }
 
-/* const onColorGet = (color: ButtonColor) => {
-  switch (color) {
-    case 'primary':
-      return 'onPrimary'
-    case 'onPrimary':
-      return 'primary'
-    case 'secondary':
-      return 'onSecondary'
-    case 'onSecondary':
-      return 'secondary'
-    case 'surfaceInverse':
-      return 'onSurfaceInverse'
-    case 'onSurfaceInverse':
-      return 'surfaceInverse'
-    default:
-      return 'primary'
-  }
-}
-const onColorGetOutlined = (color: ButtonColor) => {
-  switch (color) {
-    case 'primary':
-      return 'highEmphasis'
-    case 'onPrimary':
-      return 'onPrimary'
-    case 'secondary':
-      return 'highEmphasis'
-    case 'onSecondary':
-      return 'onSecondary'
-    case 'surfaceInverse':
-      return 'surfaceInverse'
-    case 'onSurfaceInverse':
-      return 'onSurfaceInverse'
-    default:
-      return 'primary'
-  }
-}
-
-const getColorVariant = (theme: Theme, { variant, color }:ButtonStyleProps) => {
-  switch (variant) {
-    case 'contained': {
-      return {
-        back: color ? theme.color[color] : theme.color.primary,
-        border: theme.button[variant].color.enable.border,
-        color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary,
-        hover: {
-          primary: {
-            // back: `${theme.color.primaryDark}`,
-            // boder: theme.button[variant].color.hover.border,
-            // label: `${theme.color.onPrimaryDark}`
-            back: color ? theme.color[color] : theme.color.primary,
-            border: theme.button[variant].color.enable.border,
-            color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
-          },
-          onPrimary: {
-            // back: theme.color.neutralLight,
-            // boder: theme.button[variant].color.hover.border,
-            // label: theme.color.primary
-            back: color ? theme.color[color] : theme.color.primary,
-            border: theme.button[variant].color.enable.border,
-            color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
-          },
-          secondary: {
-            // back: theme.color.secondaryDark,
-            // boder: theme.button[variant].color.hover.border,
-            // label: theme.color.onSecondaryDark
-            back: color ? theme.color[color] : theme.color.primary,
-            border: theme.button[variant].color.enable.border,
-            color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
-          },
-          onSecondary: {
-            // back: theme.color.neutralLight,
-            // boder: theme.button[variant].color.hover.border,
-            // label: theme.color.secondary
-            back: color ? theme.color[color] : theme.color.primary,
-            border: theme.button[variant].color.enable.border,
-            color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
-          },
-          surfaceInverse: {
-            // back: theme.color.neutralDark,
-            // boder: theme.button[variant].color.hover.border,
-            // label: theme.color.onSurfaceInverse
-            back: color ? theme.color[color] : theme.color.primary,
-            border: theme.button[variant].color.enable.border,
-            color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
-          },
-          onSurfaceInverse: {
-            // back: theme.color.neutralLight,
-            // boder: theme.button[variant].color.hover.border,
-            // label: theme.color.surfaceInverse
-            back: color ? theme.color[color] : theme.color.primary,
-            border: theme.button[variant].color.enable.border,
-            color: color ? theme.color[onColorGet(color)] : theme.color.onPrimary
-          }
-        },
-        focus: {
-          primary: {
-            back: `${theme.color.primaryDarkest}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.onPrimaryDarkest}`
-          },
-          onPrimary: {
-            back: theme.color.neutralMedium,
-            boder: theme.button[variant].color.hover.border,
-            label: theme.color.primary
-          },
-          secondary: {
-            back: theme.color.secondaryDarkest,
-            boder: theme.button[variant].color.hover.border,
-            label: theme.color.onSecondaryDarkest
-          },
-          onSecondary: {
-            back: theme.color.neutralMedium,
-            boder: theme.button[variant].color.hover.border,
-            label: theme.color.secondary
-          },
-          surfaceInverse: {
-            back: theme.color.neutralMedium,
-            boder: theme.button[variant].color.hover.border,
-            label: theme.color.onSurfaceInverse
-          },
-          onSurfaceInverse: {
-            back: theme.color.neutralMedium,
-            boder: theme.button[variant].color.hover.border,
-            label: theme.color.surfaceInverse
-          }
-        }
-      }
-    }
-    case 'outlined': {
-      return {
-        back: theme.button[variant].color.enable.background,
-        border: color ? theme.color[color] : theme.color.primary,
-        color: color ? theme.color[onColorGetOutlined(color)] : theme.color.highlight,
-        hover: {
-          primary: {
-            back: theme.color.neutralMedium,
-            boder: theme.color.primary,
-            label: `${theme.color.highEmphasis}`
-          },
-          onPrimary: {
-            back: theme.color.neutralMedium,
-            boder: theme.color.onPrimary,
-            label: `${theme.color.highEmphasis}`
-          },
-          secondary: {
-            back: theme.color.neutralMedium,
-            boder: theme.color.secondary,
-            label: `${theme.color.highEmphasis}`
-          },
-          onSecondary: {
-            back: theme.color.neutralMedium,
-            boder: theme.color.onSecondary,
-            label: `${theme.color.highEmphasis}`
-          },
-          surfaceInverse: {
-            back: theme.color.neutralMedium,
-            boder: theme.color.surfaceInverse,
-            label: `${theme.color.highEmphasis}`
-          },
-          onSurfaceInverse: {
-            back: theme.color.neutralMedium,
-            boder: theme.color.onSurfaceInverse,
-            label: `${theme.color.highEmphasis}`
-          }
-        },
-        focus: {
-          primary: {
-            back: theme.color.neutralDark,
-            boder: theme.color.primary,
-            label: `${theme.color.lowLight}`
-          },
-          onPrimary: {
-            back: theme.color.neutralDark,
-            boder: theme.color.onPrimary,
-            label: `${theme.color.lowLight}`
-          },
-          secondary: {
-            back: theme.color.neutralDark,
-            boder: theme.color.secondary,
-            label: `${theme.color.lowLight}`
-          },
-          onSecondary: {
-            back: theme.color.neutralDark,
-            boder: theme.color.onSecondary,
-            label: `${theme.color.lowLight}`
-          },
-          surfaceInverse: {
-            back: theme.color.neutralDark,
-            boder: theme.color.surfaceInverse,
-            label: `${theme.color.lowLight}`
-          },
-          onSurfaceInverse: {
-            back: theme.color.neutralDark,
-            boder: theme.color.onSurfaceInverse,
-            label: `${theme.color.lowLight}`
-          }
-        }
-      }
-    }
-    case 'text': {
-      return {
-        back: theme.button[variant].color.enable.background,
-        border: theme.button[variant].color.enable.border,
-        color: color ? theme.color[onColorGetOutlined(color)] : theme.color.highEmphasis,
-        hover: {
-          primary: {
-            back: `${theme.color.neutralMedium}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.highEmphasis}`
-          },
-          onPrimary: {
-            back: `${theme.color.neutralMedium}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.highEmphasis}`
-          },
-          secondary: {
-            back: `${theme.color.neutralMedium}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.highEmphasis}`
-          },
-          onSecondary: {
-            back: `${theme.color.neutralMedium}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.highEmphasis}`
-          },
-          surfaceInverse: {
-            back: `${theme.color.neutralMedium}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.highEmphasis}`
-          },
-          onSurfaceInverse: {
-            back: `${theme.color.neutralMedium}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.highEmphasis}`
-          }
-        },
-        focus: {
-          primary: {
-            back: `${theme.color.neutralDark}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.lowLight}`
-          },
-          onPrimary: {
-            back: `${theme.color.neutralDark}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.lowLight}`
-          },
-          secondary: {
-            back: `${theme.color.neutralDark}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.lowLight}`
-          },
-          onSecondary: {
-            back: `${theme.color.neutralDark}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.lowLight}`
-          },
-          surfaceInverse: {
-            back: `${theme.color.neutralDark}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.lowLight}`
-          },
-          onSurfaceInverse: {
-            back: `${theme.color.neutralDark}`,
-            boder: theme.button[variant].color.hover.border,
-            label: `${theme.color.lowLight}`
-          }
-        }
-      }
-    }
-    default:
-      return {
-        back: color && theme.color.primary,
-        border: theme.button.contained.color.enable.border,
-        color: color && theme.color[onColorGet('primary')]
-      }
-  }
-} */
-
 const getColorBrand = (theme: Theme) => (brand: BrandTypes | undefined, { variant, color, mode }: GayaButtonStyleProps) => {
   const colorTheme = buildTheme(brand, mode)