80 lines
1.5 KiB
TypeScript
80 lines
1.5 KiB
TypeScript
import { extendTheme } from '@chakra-ui/react';
|
|
|
|
const overrides = {
|
|
colors: {
|
|
primary: {
|
|
50: "#F1F8ED",
|
|
100: "#D9EACC",
|
|
200: "#C0DDAC",
|
|
300: "#A8D08B",
|
|
400: "#8FC26B",
|
|
500: "#77B54A",
|
|
600: "#5F913B",
|
|
700: "#476D2C",
|
|
800: "#2F481E",
|
|
900: "#18240F"
|
|
},
|
|
secondary: {
|
|
50: "#E7F7FD",
|
|
100: "#BCEAFB",
|
|
200: "#91DCF8",
|
|
300: "#66CEF5",
|
|
400: "#3BC1F2",
|
|
500: "#0FB3F0",
|
|
600: "#0C8FC0",
|
|
700: "#096B90",
|
|
800: "#064860",
|
|
900: "#032430"
|
|
}
|
|
},
|
|
fonts: {
|
|
heading: `'Open Sans', sans-serif`,
|
|
},
|
|
styles: {
|
|
global: {
|
|
body: {
|
|
bg: 'gray.100'
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
Input: {
|
|
variants: {
|
|
filled: {
|
|
field: {
|
|
borderRadius: 12,
|
|
bgColor: 'primary.50',
|
|
color: 'primary.600',
|
|
_hover: {
|
|
borderColor: 'primary.100',
|
|
bgColor: 'primary.50',
|
|
},
|
|
_focus: {
|
|
borderColor: 'primary.200',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
Select: {
|
|
variants: {
|
|
filled: {
|
|
field: {
|
|
borderRadius: 12,
|
|
bgColor: 'primary.50',
|
|
color: 'primary.600',
|
|
_hover: {
|
|
borderColor: 'primary.100',
|
|
bgColor: 'primary.50',
|
|
},
|
|
_focus: {
|
|
borderColor: 'primary.200',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
export default extendTheme(overrides); |