|
import {
|
|
extendTheme,
|
|
NumberDecrementStepper,
|
|
NumberIncrementStepper,
|
|
NumberInput,
|
|
NumberInputField,
|
|
NumberInputStepper,
|
|
Select,
|
|
Switch
|
|
} from '@chakra-ui/react';
|
|
|
|
import { colors } from './colors';
|
|
import { space } from './space';
|
|
import { ChakraButton } from './Components/Button';
|
|
|
|
export const theme = extendTheme({
|
|
colors,
|
|
// edit Input defaultProps
|
|
space,
|
|
sizes: space,
|
|
styles: {
|
|
global: {
|
|
// make all elements padding and margin animate
|
|
'*': {
|
|
transition: 'padding 0.2s ease, margin 0.2s ease-out'
|
|
},
|
|
// make all elements have a transparent focus border
|
|
'input:focus': {
|
|
boxShadow: 'none !important',
|
|
borderColor: 'transparent !important'
|
|
},
|
|
// make all elements have a transparent focus border
|
|
'textarea:focus': {
|
|
boxShadow: 'none !important',
|
|
borderColor: 'transparent !important'
|
|
},
|
|
// make all elements have a transparent focus border
|
|
'select:focus': {
|
|
boxShadow: 'none !important',
|
|
borderColor: 'transparent !important'
|
|
},
|
|
// make all elements have a transparent focus border
|
|
'button:focus': {
|
|
boxShadow: 'none !important',
|
|
borderColor: 'transparent !important'
|
|
},
|
|
// make all elements have a transparent focus border
|
|
'div:focus': {
|
|
boxShadow: 'none !important',
|
|
borderColor: 'transparent !important'
|
|
},
|
|
// make all elements have a transparent focus border
|
|
'a:focus': {
|
|
boxShadow: 'none !important',
|
|
borderColor: 'transparent !important'
|
|
},
|
|
// make all elements have a transparent focus border
|
|
'span:focus': {
|
|
boxShadow: 'none !important',
|
|
borderColor: 'transparent !important'
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
Button: ChakraButton,
|
|
Input: {
|
|
defaultProps: {
|
|
// focusBorderColor: "transparent",
|
|
// outline: "0px solid",
|
|
// border: "0px solid",
|
|
},
|
|
baseStyle: {
|
|
// "padding-inline-start": "0px",
|
|
field: {
|
|
// "padding-inline-start": "0px",
|
|
}
|
|
}
|
|
},
|
|
Select: {
|
|
baseStyle: {
|
|
field: {
|
|
// "padding-inline-start": "0px",
|
|
},
|
|
icon: {
|
|
// height: "8px",
|
|
width: '14px'
|
|
}
|
|
}
|
|
},
|
|
Switch: {
|
|
baseStyle: {
|
|
track: {
|
|
background: 'grays.medium',
|
|
_checked: {
|
|
background: 'chakras.throat'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
NumberInput: {
|
|
baseStyle: {
|
|
field: {
|
|
width: 'auto'
|
|
// border: "none",
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
Switch.defaultProps = {
|
|
...Switch.defaultProps,
|
|
as: 'div'
|
|
};
|
|
|
|
Select.defaultProps = {
|
|
...Select.defaultProps,
|
|
focusBorderColor: 'transparent',
|
|
outline: '0px solid',
|
|
border: 'none',
|
|
ps: '0px',
|
|
px: '0px',
|
|
sx: {
|
|
paddingInlineStart: '0px',
|
|
paddingInlineEnd: '24px'
|
|
}
|
|
};
|
|
|
|
NumberInput.defaultProps = {
|
|
...NumberInput.defaultProps,
|
|
variant: 'unstyled'
|
|
};
|
|
|
|
NumberInputField.defaultProps = {
|
|
...NumberInputField.defaultProps,
|
|
height: '100%',
|
|
pr: 3,
|
|
fontSize: 'inherit'
|
|
// variant: "unstyled",
|
|
};
|
|
|
|
NumberInputStepper.defaultProps = {
|
|
...NumberInputStepper.defaultProps,
|
|
border: 'none',
|
|
color: 'grays.medium'
|
|
};
|
|
|
|
NumberIncrementStepper.defaultProps = {
|
|
...NumberIncrementStepper.defaultProps,
|
|
border: 'none'
|
|
};
|
|
NumberDecrementStepper.defaultProps = {
|
|
...NumberDecrementStepper.defaultProps,
|
|
border: 'none'
|
|
};
|