|
import {
|
|
extendTheme,
|
|
NumberDecrementStepper,
|
|
NumberIncrementStepper,
|
|
NumberInput,
|
|
NumberInputField,
|
|
NumberInputStepper,
|
|
Select,
|
|
Switch,
|
|
} from "@chakra-ui/react"
|
|
|
|
import { colors } from "./colors"
|
|
|
|
export const theme = extendTheme({
|
|
colors,
|
|
// edit Input defaultProps
|
|
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: {
|
|
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",
|
|
}
|