1import { extendTheme } from '@chakra-ui/react';
2export const theme = extendTheme({
3 shadows: { outline: '0 0 0 2px var(--chakra-colors-primary-200)' },
4 fonts: {
5 body: 'Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
6 },
7 colors: {
8 'light-border': '#d2d2d4',
9 'dark-bg': '#1A202C',
10 primary: {
11 50: '#9cb7f2',
12 100: '#88a9ef',
13 200: '#749aec',
14 300: '#618ce9',
15 400: '#4d7de7',
16 500: '#396fe4',
17 600: '#3364cd',
18 700: '#2e59b6',
19 800: '#284ea0',
20 900: '#224389',
21 },
22 gray: {
23 750: '#222C3B',
24 },
25 },
26 components: {
27 Alert: {
28 baseStyle: {
29 container: {
30 borderRadius: '6px',
31 fontSize: 'sm',
32 },
33 },
34 },
35 Select: {
36 baseStyle: {
37 field: {
38 _dark: {
39 borderColor: 'gray.600',
40 borderRadius: '6px',
41 },
42 _light: {
43 borderRadius: '6px',
44 },
45 },
46 },
47 },
48 FormHelperText: {
49 baseStyle: {
50 fontSize: 'xs',
51 },
52 },
53 FormLabel: {
54 baseStyle: {
55 fontSize: 'sm',
56 fontWeight: 'medium',
57 mb: '1',
58 _dark: { color: 'gray.300' },
59 },
60 },
61 Input: {
62 baseStyle: {
63 addon: {
64 _dark: {
65 borderColor: 'gray.600',
66 _placeholder: {
67 color: 'gray.500',
68 },
69 },
70 },
71 field: {
72 _focusVisible: {
73 boxShadow: 'none',
74 borderColor: 'primary.200',
75 outlineColor: 'primary.200',
76 },
77 _dark: {
78 borderColor: 'gray.600',
79 _disabled: {
80 color: 'gray.400',
81 borderColor: 'gray.500',
82 },
83 _placeholder: {
84 color: 'gray.500',
85 },
86 },
87 },
88 },
89 },
90 Table: {
91 baseStyle: {
92 table: {
93 borderCollapse: 'separate',
94 borderSpacing: 0,
95 },
96 thead: {
97 borderBottomColor: 'light-border',
98 },
99 th: {
100 background: '#F9FAFB',
101 borderColor: 'light-border !important',
102 borderBottomColor: 'light-border !important',
103 borderTop: '1px solid ',
104 borderTopColor: 'light-border !important',
105 _first: {
106 borderLeft: '1px solid',
107 borderColor: 'light-border !important',
108 },
109 _last: {
110 borderRight: '1px solid',
111 borderColor: 'light-border !important',
112 },
113 _dark: {
114 borderColor: 'gray.600 !important',
115 background: 'gray.750',
116 },
117 },
118 td: {
119 transition: 'all .1s ease-out',
120 borderColor: 'light-border',
121 borderBottomColor: 'light-border !important',
122 _first: {
123 borderLeft: '1px solid',
124 borderColor: 'light-border',
125 _dark: {
126 borderColor: 'gray.600',
127 },
128 },
129 _last: {
130 borderRight: '1px solid',
131 borderColor: 'light-border',
132 _dark: {
133 borderColor: 'gray.600',
134 },
135 },
136 _dark: {
137 borderColor: 'gray.600',
138 borderBottomColor: 'gray.600 !important',
139 },
140 },
141 tr: {
142 '&.interactive': {
143 cursor: 'pointer',
144 _hover: {
145 '& > td': {
146 bg: 'gray.200',
147 },
148 _dark: {
149 '& > td': {
150 bg: 'gray.750',
151 },
152 },
153 },
154 },
155 _last: {
156 '& > td': {
157 _first: {
158 borderBottomLeftRadius: '8px',
159 },
160 _last: {
161 borderBottomRightRadius: '8px',
162 },
163 },
164 },
165 },
166 },
167 },
168 },
169});