mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
9ec01aa280
* Update styles of form inputs * update token info form * update demo values * fix preset for sepolia * update screenshots
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
|
|
import { mode, transparentize } from '@chakra-ui/theme-tools';
|
|
|
|
export default function getFormStyles(props: StyleFunctionProps) {
|
|
return {
|
|
input: {
|
|
empty: {
|
|
// there is no text in the empty input
|
|
// color: ???,
|
|
bgColor: props.bgColor || mode('white', 'black')(props),
|
|
borderColor: mode('gray.100', 'gray.700')(props),
|
|
},
|
|
hover: {
|
|
color: mode('gray.800', 'gray.50')(props),
|
|
bgColor: props.bgColor || mode('white', 'black')(props),
|
|
borderColor: mode('gray.200', 'gray.500')(props),
|
|
},
|
|
focus: {
|
|
color: mode('gray.800', 'gray.50')(props),
|
|
bgColor: props.bgColor || mode('white', 'black')(props),
|
|
borderColor: mode('blue.400', 'blue.400')(props),
|
|
},
|
|
filled: {
|
|
color: mode('gray.800', 'gray.50')(props),
|
|
bgColor: props.bgColor || mode('white', 'black')(props),
|
|
borderColor: mode('gray.300', 'gray.600')(props),
|
|
},
|
|
readOnly: {
|
|
color: mode('gray.800', 'gray.50')(props),
|
|
bgColor: mode('gray.200', 'gray.800')(props),
|
|
borderColor: mode('gray.200', 'gray.800')(props),
|
|
},
|
|
// we use opacity to show the disabled state
|
|
disabled: {
|
|
opacity: 0.2,
|
|
},
|
|
error: {
|
|
color: mode('gray.800', 'gray.50')(props),
|
|
bgColor: props.bgColor || mode('white', 'black')(props),
|
|
borderColor: mode('red.500', 'red.500')(props),
|
|
},
|
|
},
|
|
placeholder: {
|
|
'default': {
|
|
color: mode('gray.500', 'gray.500')(props),
|
|
},
|
|
disabled: {
|
|
color: transparentize('gray.500', 0.2)(props.theme),
|
|
},
|
|
error: {
|
|
color: mode('red.500', 'red.500')(props),
|
|
},
|
|
},
|
|
};
|
|
}
|