510 lines
17 KiB
TypeScript
510 lines
17 KiB
TypeScript
import { mode } from '@chakra-ui/theme-tools';
|
|
export const buttonStyles = {
|
|
components: {
|
|
Button: {
|
|
baseStyle: {
|
|
borderRadius: '16px',
|
|
transition: '.25s all ease',
|
|
boxSizing: 'border-box',
|
|
_focus: {
|
|
boxShadow: 'none'
|
|
},
|
|
_active: {
|
|
boxShadow: 'none'
|
|
}
|
|
},
|
|
variants: {
|
|
transparent: (props: any) => ({
|
|
bg: mode('transparent', 'transparent')(props),
|
|
color: mode('#120F43', 'white')(props),
|
|
boxShadow: 'none',
|
|
_focus: {
|
|
bg: mode('none', 'whiteAlpha.200')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('gray.200', 'whiteAlpha.200')(props)
|
|
},
|
|
_hover: {
|
|
boxShadow: 'unset',
|
|
bg: mode('gray.100', 'whiteAlpha.100')(props)
|
|
}
|
|
}),
|
|
a: (props: any) => ({
|
|
bg: mode('transparent', 'transparent')(props),
|
|
color: mode('transparent', 'transparent')(props),
|
|
padding: 0,
|
|
_focus: {
|
|
bg: mode('transparent', 'transparent')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('transparent', 'transparent')(props)
|
|
},
|
|
_hover: {
|
|
boxShadow: 'unset',
|
|
textDecoration: 'underline',
|
|
bg: mode('transparent', 'transparent')(props)
|
|
}
|
|
}),
|
|
primary: (props: any) => ({
|
|
bg: 'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%) !important',
|
|
color: 'white',
|
|
boxShadow: 'none',
|
|
_focus: {
|
|
bg: mode(
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)',
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)'
|
|
)(props)
|
|
},
|
|
_active: {
|
|
bg: mode(
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)',
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)'
|
|
)(props)
|
|
},
|
|
_hover: {
|
|
boxShadow: '0px 21px 27px -10px rgba(96, 60, 255, 0.48) !important',
|
|
bg: mode(
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)',
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)'
|
|
)(props)
|
|
}
|
|
}),
|
|
green: (props: any) => ({
|
|
bg: 'linear-gradient(180deg, #38A169 0%, #25855A 100%) !important',
|
|
color: 'white',
|
|
boxShadow: 'none',
|
|
_focus: {
|
|
bg: mode(
|
|
'linear-gradient(180deg, #38A169 0%, #25855A 100%)',
|
|
'linear-gradient(180deg, #38A169 0%, #25855A 100%)'
|
|
)(props)
|
|
},
|
|
_active: {
|
|
bg: mode(
|
|
'linear-gradient(180deg, #38A169 0%, #25855A 100%)',
|
|
'linear-gradient(180deg, #38A169 0%, #25855A 100%)'
|
|
)(props)
|
|
},
|
|
_hover: {
|
|
boxShadow:
|
|
'0px 18px 23.143px -8.571px rgba(56, 161, 105, 0.48) !important',
|
|
bg: mode(
|
|
'linear-gradient(180deg, #38A169 0%, #25855A 100%)',
|
|
'linear-gradient(180deg, #38A169 0%, #25855A 100%)'
|
|
)(props)
|
|
}
|
|
}),
|
|
red: (props: any) => ({
|
|
bg: mode('red.50', 'whiteAlpha.100')(props),
|
|
color: mode('red.600', 'white')(props),
|
|
boxShadow: 'none',
|
|
_focus: {
|
|
bg: mode('red.50', 'whiteAlpha.100')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('red.50', 'whiteAlpha.100')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('red.100', 'whiteAlpha.200')(props)
|
|
}
|
|
}),
|
|
chakraLinear: (props: any) => ({
|
|
bg: mode(
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)',
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)'
|
|
)(props),
|
|
color: 'white',
|
|
boxShadow: 'none',
|
|
_focus: {
|
|
bg: mode(
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)',
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)'
|
|
)(props)
|
|
},
|
|
_active: {
|
|
bg: mode(
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)',
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)'
|
|
)(props)
|
|
},
|
|
_hover: {
|
|
boxShadow:
|
|
'0px 21px 27px -10px rgba(67, 200, 192, 0.47) !important',
|
|
bg: mode(
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)',
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)'
|
|
)(props)
|
|
}
|
|
}),
|
|
api: (props: any) => ({
|
|
bg: mode('#120F43', 'whiteAlpha.200')(props),
|
|
color: mode('white', 'white')(props),
|
|
_focus: {
|
|
bg: mode('#120F43', 'whiteAlpha.200')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('#120F43', 'whiteAlpha.400')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('navy.800', 'whiteAlpha.300')(props),
|
|
boxShadow: 'unset'
|
|
}
|
|
}),
|
|
brand: (props: any) => ({
|
|
bg: mode('brand.500', 'brand.400')(props),
|
|
color: 'white',
|
|
_focus: {
|
|
bg: mode('brand.500', 'brand.400')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('brand.500', 'brand.400')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('brand.600', 'brand.400')(props),
|
|
boxShadow: '0px 21px 27px -10px rgba(96, 60, 255, 0.48)'
|
|
}
|
|
}),
|
|
darkBrand: (props: any) => ({
|
|
bg: mode('brand.900', 'brand.400')(props),
|
|
color: 'white',
|
|
_focus: {
|
|
bg: mode('brand.900', 'brand.400')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('brand.900', 'brand.400')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('brand.800', 'brand.400')(props)
|
|
}
|
|
}),
|
|
lightBrand: (props: any) => ({
|
|
bg: mode('#F2EFFF', 'whiteAlpha.100')(props),
|
|
color: mode('brand.500', 'white')(props),
|
|
_focus: {
|
|
bg: mode('#F2EFFF', 'whiteAlpha.100')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('secondaryGray.300', 'whiteAlpha.100')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('secondaryGray.400', 'whiteAlpha.200')(props)
|
|
}
|
|
}),
|
|
light: (props: any) => ({
|
|
bg: mode('secondaryGray.300', 'whiteAlpha.100')(props),
|
|
color: mode('#120F43', 'white')(props),
|
|
_focus: {
|
|
bg: mode('secondaryGray.300', 'whiteAlpha.100')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('secondaryGray.300', 'whiteAlpha.100')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('secondaryGray.400', 'whiteAlpha.200')(props)
|
|
}
|
|
}),
|
|
action: (props: any) => ({
|
|
fontWeight: '500',
|
|
borderRadius: '50px',
|
|
bg: mode('secondaryGray.300', 'brand.400')(props),
|
|
color: mode('brand.500', 'white')(props),
|
|
_focus: {
|
|
bg: mode('secondaryGray.300', 'brand.400')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('secondaryGray.300', 'brand.400')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('gray.200', 'brand.400')(props)
|
|
}
|
|
}),
|
|
setup: (props: any) => ({
|
|
fontWeight: '600',
|
|
borderRadius: '50px',
|
|
bg: mode('transparent', 'brand.400')(props),
|
|
border: mode('1px solid', '0px solid')(props),
|
|
borderColor: mode('secondaryGray.400', 'transparent')(props),
|
|
color: mode('#120F43', 'white')(props),
|
|
_focus: {
|
|
bg: mode('transparent', 'brand.400')(props)
|
|
},
|
|
_active: { bg: mode('transparent', 'brand.400')(props) },
|
|
_hover: {
|
|
bg: mode('gray.200', 'brand.400')(props)
|
|
}
|
|
}),
|
|
outline: (props: any) => ({
|
|
fontWeight: '600',
|
|
borderRadius: '50px',
|
|
bg: mode('transparent', 'brand.400')(props),
|
|
border: mode('1px solid', '0px solid')(props),
|
|
borderColor: mode('white', 'transparent')(props),
|
|
color: 'white',
|
|
_focus: {
|
|
bg: mode('whiteAlpha.400', 'whiteAlpha.400')(props)
|
|
},
|
|
_active: { bg: mode('whiteAlpha.400', 'whiteAlpha.400')(props) },
|
|
_hover: {
|
|
bg: mode('whiteAlpha.300', 'whiteAlpha.300')(props)
|
|
}
|
|
}),
|
|
reset: (props: any) => ({
|
|
fontWeight: '500',
|
|
bg: '#FFF5F5 !important',
|
|
color: 'red.500',
|
|
borderRadius: '45px',
|
|
_hover: { bg: '#FEEFEE !important' },
|
|
_active: { bg: '#FFF5F5 !important' },
|
|
_focus: { bg: '#FEEFEE !important' }
|
|
}),
|
|
secondary: (props: any) => ({
|
|
bg: '#ffffff33 !important',
|
|
color: 'white',
|
|
_focus: {
|
|
bg: mode('#ffffff33', '#ffffff33')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('whiteAlpha.400', 'whiteAlpha.400')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('#ffffff4d', '#ffffff4d')(props)
|
|
}
|
|
}),
|
|
black: (props: any) => ({
|
|
bg: 'navy.700',
|
|
color: mode('white', 'white')(props),
|
|
_focus: {
|
|
bg: mode('navy.700', 'navy.700')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('navy.700', 'navy.700')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('navy.700', 'navy.700')(props),
|
|
boxShadow: '0px 18px 23px -8.57px rgba(10, 8, 38, 0.40) !important'
|
|
}
|
|
}),
|
|
checkout: (props: any) => ({
|
|
bg: '#120F43 !important',
|
|
color: mode('white', 'white')(props),
|
|
_focus: {
|
|
bg: mode('#120F43 !important', '#120F43 !important')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('#120F43 !important', '#120F43 !important')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('#120F43 !important', '#120F43 !important')(props),
|
|
boxShadow: '0px 18px 23px -8.57px rgba(10, 8, 38, 0.40) !important'
|
|
}
|
|
}),
|
|
checkoutDark: (props: any) => ({
|
|
bg: '#FFFFFF33 !important',
|
|
color: mode('white', 'white')(props),
|
|
_focus: {
|
|
bg: mode('#FFFFFF33 !important', '#FFFFFF33 !important')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('#FFFFFF33 !important', '#FFFFFF33 !important')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('#FFFFFF33 !important', '#FFFFFF33 !important')(props),
|
|
boxShadow: '0px 18px 23px -8.57px rgba(10, 8, 38, 0.40) !important'
|
|
}
|
|
})
|
|
}
|
|
},
|
|
MenuButton: {
|
|
baseStyle: {
|
|
borderRadius: '16px',
|
|
transition: '.25s all ease',
|
|
boxSizing: 'border-box',
|
|
_focus: {
|
|
boxShadow: 'none'
|
|
},
|
|
_active: {
|
|
boxShadow: 'none'
|
|
}
|
|
},
|
|
variants: {
|
|
transparent: (props: any) => ({
|
|
bg: mode('transparent', 'transparent')(props),
|
|
color: mode('#120F43', 'white')(props),
|
|
boxShadow: 'none',
|
|
_focus: {
|
|
bg: mode('gray.300', 'whiteAlpha.200')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('gray.300', 'whiteAlpha.200')(props)
|
|
},
|
|
_hover: {
|
|
boxShadow: 'unset',
|
|
bg: mode('gray.200', 'whiteAlpha.100')(props)
|
|
}
|
|
}),
|
|
primary: (props: any) => ({
|
|
bg: mode(
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)',
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)'
|
|
)(props),
|
|
color: 'white',
|
|
boxShadow: 'none',
|
|
_focus: {
|
|
bg: mode(
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)',
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)'
|
|
)(props)
|
|
},
|
|
_active: {
|
|
bg: mode(
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)',
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)'
|
|
)(props)
|
|
},
|
|
_hover: {
|
|
boxShadow: '0px 21px 27px -10px rgba(96, 60, 255, 0.48) !important',
|
|
bg: mode(
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%) !important',
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%) !important'
|
|
)(props),
|
|
_disabled: {
|
|
bg: mode(
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)',
|
|
'linear-gradient(15deg, #4A25E1 26.3%, #7B5AFF 86.4%)'
|
|
)(props)
|
|
}
|
|
}
|
|
}),
|
|
chakraLinear: (props: any) => ({
|
|
bg: mode(
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)',
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)'
|
|
)(props),
|
|
color: 'white',
|
|
boxShadow: 'none',
|
|
_focus: {
|
|
bg: mode(
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)',
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)'
|
|
)(props)
|
|
},
|
|
_active: {
|
|
bg: mode(
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)',
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)'
|
|
)(props)
|
|
},
|
|
_hover: {
|
|
boxShadow:
|
|
'0px 21px 27px -10px rgba(67, 200, 192, 0.47) !important',
|
|
bg: mode(
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)',
|
|
'linear-gradient(15.46deg, #7BCBD4 0%, #29C6B7 100%)'
|
|
)(props)
|
|
}
|
|
}),
|
|
outline: () => ({
|
|
borderRadius: '16px'
|
|
}),
|
|
api: (props: any) => ({
|
|
bg: mode('#120F43', 'white')(props),
|
|
color: mode('white', '#120F43')(props),
|
|
_focus: {
|
|
bg: mode('#120F43', 'white')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('#120F43', 'white')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('navy.800', 'whiteAlpha.800')(props),
|
|
boxShadow: 'unset'
|
|
}
|
|
}),
|
|
brand: (props: any) => ({
|
|
bg: mode('brand.500', 'brand.400')(props),
|
|
color: 'white',
|
|
_focus: {
|
|
bg: mode('brand.500', 'brand.400')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('brand.500', 'brand.400')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('brand.600', 'brand.400')(props),
|
|
boxShadow: '0px 21px 27px -10px rgba(96, 60, 255, 0.48)'
|
|
}
|
|
}),
|
|
darkBrand: (props: any) => ({
|
|
bg: mode('brand.900', 'brand.400')(props),
|
|
color: 'white',
|
|
_focus: {
|
|
bg: mode('brand.900', 'brand.400')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('brand.900', 'brand.400')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('brand.800', 'brand.400')(props)
|
|
}
|
|
}),
|
|
lightBrand: (props: any) => ({
|
|
bg: mode('#F2EFFF', 'whiteAlpha.100')(props),
|
|
color: mode('brand.500', 'white')(props),
|
|
_focus: {
|
|
bg: mode('#F2EFFF', 'whiteAlpha.100')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('secondaryGray.300', 'whiteAlpha.100')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('secondaryGray.400', 'whiteAlpha.200')(props)
|
|
}
|
|
}),
|
|
light: (props: any) => ({
|
|
bg: mode('secondaryGray.300', 'whiteAlpha.100')(props),
|
|
color: mode('#120F43', 'white')(props),
|
|
_focus: {
|
|
bg: mode('secondaryGray.300', 'whiteAlpha.100')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('secondaryGray.300', 'whiteAlpha.100')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('secondaryGray.400', 'whiteAlpha.200')(props)
|
|
}
|
|
}),
|
|
action: (props: any) => ({
|
|
fontWeight: '500',
|
|
borderRadius: '50px',
|
|
bg: mode('secondaryGray.300', 'brand.400')(props),
|
|
color: mode('brand.500', 'white')(props),
|
|
_focus: {
|
|
bg: mode('secondaryGray.300', 'brand.400')(props)
|
|
},
|
|
_active: {
|
|
bg: mode('secondaryGray.300', 'brand.400')(props)
|
|
},
|
|
_hover: {
|
|
bg: mode('gray.200', 'brand.400')(props)
|
|
}
|
|
}),
|
|
setup: (props: any) => ({
|
|
fontWeight: '500',
|
|
borderRadius: '50px',
|
|
bg: mode('transparent', 'brand.400')(props),
|
|
border: mode('1px solid', '0px solid')(props),
|
|
borderColor: mode('secondaryGray.400', 'transparent')(props),
|
|
color: mode('#120F43', 'white')(props),
|
|
_focus: {
|
|
bg: mode('transparent', 'brand.400')(props)
|
|
},
|
|
_active: { bg: mode('transparent', 'brand.400')(props) },
|
|
_hover: {
|
|
bg: mode('gray.200', 'brand.400')(props)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
};
|