diff options
Diffstat (limited to 'src/components/Button.tsx')
-rw-r--r-- | src/components/Button.tsx | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 54d9eaf3b..ed963026c 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -21,6 +21,7 @@ export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient' export type ButtonColor = | 'primary' | 'secondary' + | 'secondary_inverted' | 'negative' | 'gradient_sky' | 'gradient_midnight' @@ -235,6 +236,43 @@ export const Button = React.forwardRef<View, ButtonProps>( }) } } + } else if (color === 'secondary_inverted') { + if (variant === 'solid') { + if (!disabled) { + baseStyles.push({ + backgroundColor: t.palette.contrast_900, + }) + hoverStyles.push({ + backgroundColor: t.palette.contrast_950, + }) + } else { + baseStyles.push({ + backgroundColor: t.palette.contrast_700, + }) + } + } else if (variant === 'outline') { + baseStyles.push(a.border, t.atoms.bg, { + borderWidth: 1, + }) + + if (!disabled) { + baseStyles.push(a.border, { + borderColor: t.palette.contrast_300, + }) + hoverStyles.push(t.atoms.bg_contrast_50) + } else { + baseStyles.push(a.border, { + borderColor: t.palette.contrast_200, + }) + } + } else if (variant === 'ghost') { + if (!disabled) { + baseStyles.push(t.atoms.bg) + hoverStyles.push({ + backgroundColor: t.palette.contrast_25, + }) + } + } } else if (color === 'negative') { if (variant === 'solid') { if (!disabled) { @@ -344,6 +382,7 @@ export const Button = React.forwardRef<View, ButtonProps>( const gradient = { primary: tokens.gradients.sky, secondary: tokens.gradients.sky, + secondary_inverted: tokens.gradients.sky, negative: tokens.gradients.sky, gradient_sky: tokens.gradients.sky, gradient_midnight: tokens.gradients.midnight, @@ -499,6 +538,38 @@ export function useSharedButtonTextStyles() { }) } } + } else if (color === 'secondary_inverted') { + if (variant === 'solid' || variant === 'gradient') { + if (!disabled) { + baseStyles.push({ + color: t.palette.white, + }) + } else { + baseStyles.push({ + color: t.palette.contrast_400, + }) + } + } else if (variant === 'outline') { + if (!disabled) { + baseStyles.push({ + color: t.palette.contrast_600, + }) + } else { + baseStyles.push({ + color: t.palette.contrast_300, + }) + } + } else if (variant === 'ghost') { + if (!disabled) { + baseStyles.push({ + color: t.palette.contrast_600, + }) + } else { + baseStyles.push({ + color: t.palette.contrast_300, + }) + } + } } else if (color === 'negative') { if (variant === 'solid' || variant === 'gradient') { if (!disabled) { |