update pay function
This commit is contained in:
25
boilerplate-chakra-pro-main/theme/additions/card/card.ts
Normal file
25
boilerplate-chakra-pro-main/theme/additions/card/card.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
const Card = {
|
||||
baseStyle: (props: any) => ({
|
||||
p: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
borderRadius: '14px',
|
||||
minWidth: '0px',
|
||||
wordWrap: 'break-word',
|
||||
bg: mode('#ffffff', 'navy.800')(props),
|
||||
boxShadow: mode(
|
||||
'14px 17px 40px 4px rgba(112, 144, 176, 0.08)',
|
||||
'unset',
|
||||
)(props),
|
||||
backgroundClip: 'border-box',
|
||||
}),
|
||||
};
|
||||
|
||||
export const CardComponent = {
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
};
|
||||
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' },
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
11
boilerplate-chakra-pro-main/theme/foundations/breakpoints.js
Normal file
11
boilerplate-chakra-pro-main/theme/foundations/breakpoints.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import { createBreakpoints } from '@chakra-ui/theme-tools';
|
||||
|
||||
export const breakpoints = createBreakpoints({
|
||||
sm: '320px',
|
||||
'2sm': '380px',
|
||||
md: '768px',
|
||||
lg: '960px',
|
||||
xl: '1200px',
|
||||
'2xl': '1600px',
|
||||
'3xl': '1920px',
|
||||
});
|
||||
109
boilerplate-chakra-pro-main/theme/styles.ts
Normal file
109
boilerplate-chakra-pro-main/theme/styles.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import { mode } from '@chakra-ui/theme-tools';
|
||||
export const globalStyles = {
|
||||
colors: {
|
||||
brand: {
|
||||
100: '#E9E3FF',
|
||||
200: '#422AFB',
|
||||
300: '#422AFB',
|
||||
400: '#7551FF',
|
||||
500: '#422AFB',
|
||||
600: '#3311DB',
|
||||
700: '#02044A',
|
||||
800: '#190793',
|
||||
900: '#11047A',
|
||||
},
|
||||
brandScheme: {
|
||||
100: '#E9E3FF',
|
||||
200: '#7551FF',
|
||||
300: '#7551FF',
|
||||
400: '#7551FF',
|
||||
500: '#422AFB',
|
||||
600: '#3311DB',
|
||||
700: '#02044A',
|
||||
800: '#190793',
|
||||
900: '#02044A',
|
||||
},
|
||||
brandTabs: {
|
||||
100: '#E9E3FF',
|
||||
200: '#422AFB',
|
||||
300: '#422AFB',
|
||||
400: '#422AFB',
|
||||
500: '#422AFB',
|
||||
600: '#3311DB',
|
||||
700: '#02044A',
|
||||
800: '#190793',
|
||||
900: '#02044A',
|
||||
},
|
||||
secondaryGray: {
|
||||
100: '#E0E5F2',
|
||||
200: '#E2E8F0',
|
||||
300: '#F4F7FE',
|
||||
400: '#E9EDF7',
|
||||
500: '#718096',
|
||||
600: '#A3AED0',
|
||||
700: '#707EAE',
|
||||
800: '#707EAE',
|
||||
900: '#1B2559',
|
||||
},
|
||||
red: {
|
||||
50: '#FFF5F5',
|
||||
100: '#FEEFEE',
|
||||
500: '#EE5D50',
|
||||
600: '#E31A1A',
|
||||
},
|
||||
blue: {
|
||||
50: '#EFF4FB',
|
||||
500: '#3965FF',
|
||||
},
|
||||
orange: {
|
||||
100: '#FFF6DA',
|
||||
500: '#FFB547',
|
||||
},
|
||||
green: {
|
||||
100: '#E6FAF5',
|
||||
500: '#01B574',
|
||||
},
|
||||
white: {
|
||||
50: '#ffffff',
|
||||
100: '#ffffff',
|
||||
200: '#ffffff',
|
||||
300: '#ffffff',
|
||||
400: '#ffffff',
|
||||
500: '#ffffff',
|
||||
600: '#ffffff',
|
||||
700: '#ffffff',
|
||||
800: '#ffffff',
|
||||
900: '#ffffff',
|
||||
},
|
||||
navy: {
|
||||
50: '#d0dcfb',
|
||||
100: '#aac0fe',
|
||||
200: '#a3b9f8',
|
||||
300: '#728fea',
|
||||
400: '#3652ba',
|
||||
500: '#1b3bbb',
|
||||
600: '#24388a',
|
||||
700: '#1B254B',
|
||||
800: '#111c44',
|
||||
900: '#0b1437',
|
||||
},
|
||||
gray: {
|
||||
100: '#FAFCFE',
|
||||
},
|
||||
},
|
||||
styles: {
|
||||
global: (props: any) => ({
|
||||
body: {
|
||||
overflowX: 'hidden',
|
||||
bg: mode('#fdfeff', 'navy.900')(props),
|
||||
fontFamily: 'Plus Jakarta Sans',
|
||||
},
|
||||
input: {
|
||||
color: 'gray.700',
|
||||
},
|
||||
html: {
|
||||
fontFamily: 'Plus Jakarta Sans',
|
||||
},
|
||||
}),
|
||||
},
|
||||
};
|
||||
26
boilerplate-chakra-pro-main/theme/theme.tsx
Normal file
26
boilerplate-chakra-pro-main/theme/theme.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { CardComponent } from './additions/card/card';
|
||||
import { badgeStyles } from './components/badge';
|
||||
import { buttonStyles } from './components/button';
|
||||
import { inputStyles } from './components/input';
|
||||
import { linkStyles } from './components/link';
|
||||
import { progressStyles } from './components/progress';
|
||||
import { switchStyles } from './components/switch';
|
||||
import { textareaStyles } from './components/textarea';
|
||||
import { breakpoints } from './foundations/breakpoints';
|
||||
import { globalStyles } from './styles';
|
||||
import { extendTheme, HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
|
||||
|
||||
export default extendTheme(
|
||||
{ breakpoints }, // breakpoints
|
||||
globalStyles,
|
||||
badgeStyles, // badge styles
|
||||
buttonStyles, // button styles
|
||||
linkStyles, // link styles
|
||||
progressStyles, // progress styles
|
||||
inputStyles, // input styles
|
||||
textareaStyles, // textarea styles
|
||||
switchStyles, // switch styles
|
||||
CardComponent, // card component
|
||||
);
|
||||
|
||||
export interface CustomCardProps extends HTMLChakraProps<'div'>, ThemingProps {}
|
||||
Reference in New Issue
Block a user