update pay function
This commit is contained in:
32
boilerplate-chakra-pro-main/theme/components/badge.ts
Normal file
32
boilerplate-chakra-pro-main/theme/components/badge.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
export const badgeStyles = {
|
||||
components: {
|
||||
Badge: {
|
||||
baseStyle: {
|
||||
borderRadius: '10px',
|
||||
lineHeight: '100%',
|
||||
padding: '7px',
|
||||
paddingLeft: '12px',
|
||||
paddingRight: '12px',
|
||||
},
|
||||
variants: {
|
||||
outline: () => ({
|
||||
borderRadius: '16px',
|
||||
}),
|
||||
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),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
509
boilerplate-chakra-pro-main/theme/components/button.ts
Normal file
509
boilerplate-chakra-pro-main/theme/components/button.ts
Normal file
@@ -0,0 +1,509 @@
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
207
boilerplate-chakra-pro-main/theme/components/input.ts
Normal file
207
boilerplate-chakra-pro-main/theme/components/input.ts
Normal file
@@ -0,0 +1,207 @@
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
export const inputStyles = {
|
||||
components: {
|
||||
Input: {
|
||||
baseStyle: {
|
||||
field: {
|
||||
fontWeight: 400,
|
||||
borderRadius: '14px',
|
||||
},
|
||||
},
|
||||
|
||||
variants: {
|
||||
main: (props: any) => ({
|
||||
field: {
|
||||
bg: mode('transparent', 'navy.800')(props),
|
||||
border: '1px solid',
|
||||
color: mode('#120F43', 'white')(props),
|
||||
borderColor: mode('gray.200', 'whiteAlpha.100')(props),
|
||||
borderRadius: '14px',
|
||||
fontSize: 'sm',
|
||||
p: '20px',
|
||||
_placeholder: { color: 'secondaryGray.400' },
|
||||
},
|
||||
}),
|
||||
auth: (props: any) => ({
|
||||
field: {
|
||||
fontWeight: '500',
|
||||
color: mode('#120F43', 'white')(props),
|
||||
bg: mode('transparent', 'transparent')(props),
|
||||
border: '1px solid',
|
||||
borderColor: mode('gray.200', 'rgba(135, 140, 189, 0.3)')(props),
|
||||
borderRadius: '14px',
|
||||
_placeholder: {
|
||||
color: 'gray.500',
|
||||
fontWeight: '400',
|
||||
},
|
||||
},
|
||||
}),
|
||||
authSecondary: () => ({
|
||||
field: {
|
||||
bg: 'transparent',
|
||||
border: '1px solid',
|
||||
borderColor: 'gray.200',
|
||||
borderRadius: '14px',
|
||||
_placeholder: { color: 'gray.500' },
|
||||
},
|
||||
}),
|
||||
search: () => ({
|
||||
field: {
|
||||
border: 'none',
|
||||
py: '11px',
|
||||
borderRadius: 'inherit',
|
||||
_placeholder: { color: 'gray.500' },
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
NumberInput: {
|
||||
baseStyle: {
|
||||
field: {
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
|
||||
variants: {
|
||||
main: () => ({
|
||||
field: {
|
||||
bg: 'transparent',
|
||||
border: '1px solid',
|
||||
|
||||
borderColor: 'gray.200',
|
||||
borderRadius: '14px',
|
||||
_placeholder: { color: 'gray.500' },
|
||||
},
|
||||
}),
|
||||
auth: () => ({
|
||||
field: {
|
||||
bg: 'transparent',
|
||||
border: '1px solid',
|
||||
|
||||
borderColor: 'gray.200',
|
||||
borderRadius: '14px',
|
||||
_placeholder: { color: 'gray.500' },
|
||||
},
|
||||
}),
|
||||
authSecondary: () => ({
|
||||
field: {
|
||||
bg: 'transparent',
|
||||
border: '1px solid',
|
||||
|
||||
borderColor: 'gray.200',
|
||||
borderRadius: '14px',
|
||||
_placeholder: { color: 'gray.500' },
|
||||
},
|
||||
}),
|
||||
search: () => ({
|
||||
field: {
|
||||
border: 'none',
|
||||
py: '11px',
|
||||
borderRadius: 'inherit',
|
||||
_placeholder: { color: 'gray.500' },
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
Select: {
|
||||
baseStyle: {
|
||||
field: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
|
||||
variants: {
|
||||
main: (props: any) => ({
|
||||
field: {
|
||||
bg: mode('transparent', 'navy.800')(props),
|
||||
border: '1px solid',
|
||||
color: 'gray.500',
|
||||
borderColor: mode('gray.200', 'whiteAlpha.100')(props),
|
||||
borderRadius: '14px',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
icon: {
|
||||
color: 'gray.500',
|
||||
},
|
||||
}),
|
||||
mini: (props: any) => ({
|
||||
field: {
|
||||
bg: mode('transparent', 'navy.800')(props),
|
||||
border: '0px solid transparent',
|
||||
fontSize: '0px',
|
||||
p: '10px',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
icon: {
|
||||
color: 'gray.500',
|
||||
},
|
||||
}),
|
||||
subtle: () => ({
|
||||
box: {
|
||||
width: 'unset',
|
||||
},
|
||||
field: {
|
||||
bg: 'transparent',
|
||||
border: '0px solid',
|
||||
color: 'gray.500',
|
||||
borderColor: 'transparent',
|
||||
width: 'max-content',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
icon: {
|
||||
color: 'gray.500',
|
||||
},
|
||||
}),
|
||||
transparent: (props: any) => ({
|
||||
field: {
|
||||
bg: 'transparent',
|
||||
border: '0px solid',
|
||||
width: 'min-content',
|
||||
color: mode('gray.500', 'gray.500')(props),
|
||||
borderColor: 'transparent',
|
||||
padding: '0px',
|
||||
paddingLeft: '8px',
|
||||
paddingRight: '20px',
|
||||
fontWeight: '700',
|
||||
fontSize: '14px',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
icon: {
|
||||
transform: 'none !important',
|
||||
position: 'unset !important',
|
||||
width: 'unset',
|
||||
color: 'gray.500',
|
||||
right: '0px',
|
||||
},
|
||||
}),
|
||||
auth: () => ({
|
||||
field: {
|
||||
bg: 'transparent',
|
||||
border: '1px solid',
|
||||
borderColor: 'gray.200',
|
||||
borderRadius: '14px',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
}),
|
||||
authSecondary: (props: any) => ({
|
||||
field: {
|
||||
bg: 'transparent',
|
||||
border: '1px solid',
|
||||
|
||||
borderColor: 'gray.200',
|
||||
borderRadius: '14px',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
}),
|
||||
search: (props: any) => ({
|
||||
field: {
|
||||
border: 'none',
|
||||
py: '11px',
|
||||
borderRadius: 'inherit',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
24
boilerplate-chakra-pro-main/theme/components/link.ts
Normal file
24
boilerplate-chakra-pro-main/theme/components/link.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
export const linkStyles = {
|
||||
components: {
|
||||
Link: {
|
||||
baseStyle: {
|
||||
textDecoration: 'none',
|
||||
boxShadow: 'none',
|
||||
_focus: {
|
||||
boxShadow: 'none'
|
||||
},
|
||||
_active: {
|
||||
boxShadow: 'none'
|
||||
},
|
||||
_hover: {
|
||||
textDecoration: 'none',
|
||||
border: 'none'
|
||||
}
|
||||
},
|
||||
_hover: {
|
||||
textDecoration: 'none',
|
||||
border: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
43
boilerplate-chakra-pro-main/theme/components/progress.ts
Normal file
43
boilerplate-chakra-pro-main/theme/components/progress.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
export const progressStyles = {
|
||||
components: {
|
||||
Progress: {
|
||||
baseStyle: {
|
||||
field: {
|
||||
fontWeight: 400,
|
||||
w: '16px',
|
||||
h: '16px',
|
||||
borderRadius: '20px',
|
||||
_checked: { transform: 'translate(20px, 0px)' }
|
||||
},
|
||||
track: {
|
||||
w: '40px',
|
||||
h: '20px',
|
||||
borderRadius: '20px',
|
||||
_focus: {
|
||||
boxShadow: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
variants: {
|
||||
table: (props: any) => ({
|
||||
field: {
|
||||
bg: 'brand.500',
|
||||
borderRadius: '16px',
|
||||
fontSize: 'sm'
|
||||
},
|
||||
track: {
|
||||
borderRadius: '20px',
|
||||
bg: mode('blue.50', 'whiteAlpha.50')(props),
|
||||
h: '8px',
|
||||
w: '54px'
|
||||
},
|
||||
thumb: {
|
||||
w: '250px'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
36
boilerplate-chakra-pro-main/theme/components/switch.ts
Normal file
36
boilerplate-chakra-pro-main/theme/components/switch.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
export const switchStyles = {
|
||||
components: {
|
||||
Switch: {
|
||||
baseStyle: {
|
||||
thumb: {
|
||||
fontWeight: 400,
|
||||
borderRadius: '50%',
|
||||
w: '16px',
|
||||
h: '16px',
|
||||
_checked: { transform: 'translate(20px, 0px)' },
|
||||
},
|
||||
track: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
boxSizing: 'border-box',
|
||||
w: '40px',
|
||||
h: '20px',
|
||||
p: '2px',
|
||||
ps: '2px',
|
||||
_focus: {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
variants: {
|
||||
main: (props: any) => ({
|
||||
track: {
|
||||
bg: mode('gray.300', '#120F43')(props),
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
55
boilerplate-chakra-pro-main/theme/components/textarea.ts
Normal file
55
boilerplate-chakra-pro-main/theme/components/textarea.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
export const textareaStyles = {
|
||||
components: {
|
||||
Textarea: {
|
||||
baseStyle: {
|
||||
field: {
|
||||
fontWeight: 400,
|
||||
borderRadius: '8px',
|
||||
},
|
||||
},
|
||||
|
||||
variants: {
|
||||
main: (props: any) => ({
|
||||
field: {
|
||||
bg: mode('transparent', 'navy.800')(props),
|
||||
border: '1px solid !important',
|
||||
color: mode('#120F43', 'white')(props),
|
||||
borderColor: mode('gray.200', 'whiteAlpha.100')(props),
|
||||
borderRadius: '16px',
|
||||
fontSize: 'sm',
|
||||
p: '20px',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
}),
|
||||
auth: () => ({
|
||||
field: {
|
||||
bg: 'white',
|
||||
border: '1px solid',
|
||||
borderColor: 'gray.200',
|
||||
borderRadius: '16px',
|
||||
_placeholder: { color: 'gray.500' },
|
||||
},
|
||||
}),
|
||||
authSecondary: () => ({
|
||||
field: {
|
||||
bg: 'white',
|
||||
border: '1px solid',
|
||||
|
||||
borderColor: 'gray.200',
|
||||
borderRadius: '16px',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
}),
|
||||
search: () => ({
|
||||
field: {
|
||||
border: 'none',
|
||||
py: '11px',
|
||||
borderRadius: 'inherit',
|
||||
_placeholder: { color: '#120F43' },
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user