Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3697 | Rev 3703 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3596 stevensc 1 
import { createTheme } from '@mui/material';
2 
 
3 
import { accordionStyles } from './components/accordion';
4 
import { listStyles } from './components/list';
5 
import {
6 
  fontFamilyPrimary,
7 
  heading1Styles,
8 
  heading2Styles,
9 
  heading3Styles,
10 
  heading4Styles,
11 
  overlineStyles,
12 
  paragraphStyles,
13 
  typographyStyles
14 
} from './components/typography';
15 
import { menuStyles } from './components/menu';
16 
import { tabsStyles } from './components/tabs';
17 
import { inputStyles } from './components/input';
18 
 
19 
import colors from './config/colors';
20 
import { rootSelectStyles, selectSelectStyles } from './components/select';
21 
 
22 
export const defaultTheme = createTheme({
23 
  typography: {
24 
    htmlFontSize: 14,
25 
    fontFamily: fontFamilyPrimary,
26 
    h1: heading1Styles,
27 
    h2: heading2Styles,
28 
    h3: heading3Styles,
29 
    h4: heading4Styles,
30 
    body1: paragraphStyles,
31 
    body2: paragraphStyles,
32 
    overline: overlineStyles
33 
  },
34 
  shape: { borderRadius: 10 },
35 
  shadows: { 1: 'rgba(0, 0, 0, 0.2) 1px 1px 1px -1px, rgba(0, 0, 0, 0.2) 1px 2px 4px' },
36 
  spacing: 12,
37 
  components: {
38 
    MuiFormControl: {
39 
      styleOverrides: {
40 
        root: {
3697 stevensc 41 
          '&:not(:last-child)': {
3596 stevensc 42 
            marginBottom: '1rem'
43 
          }
44 
        }
45 
      }
46 
    },
47 
    MuiButton: {
48 
      styleOverrides: {
49 
        root: ({ theme }) => ({
50 
          display: 'flex',
51 
          alignItems: 'center',
52 
          justifyContent: 'center',
53 
          gap: theme.spacing(0.5),
54 
          padding: theme.spacing(0.33, 1),
55 
          lineHeight: 1.25,
56 
          borderWidth: 0,
57 
          borderRadius: '30px',
58 
          color: colors.font.primary,
59 
          cursor: 'pointer',
60 
          textAlign: 'center',
61 
          textTransform: 'capitalize',
62 
          '&:disabled': {
63 
            cursor: 'no-drop',
64 
            backgroundColor: '#dddddd',
65 
            color: '#a3a1a1'
66 
          },
67 
          '&>svg': {
68 
            color: 'currentColor',
69 
            fontSize: '1.3rem'
70 
          }
71 
        }),
72 
        containedPrimary: {
73 
          backgroundColor: colors.button.background.primary,
74 
          color: colors.button.text.primary,
75 
          ':hover': {
76 
            backgroundColor: colors.button.background.primary,
77 
            opacity: 0.9
78 
          }
79 
        },
80 
        containedSecondary: {
81 
          backgroundColor: colors.button.background.secondary,
82 
          color: colors.button.text.secondary,
83 
          ':hover': {
84 
            backgroundColor: colors.button.background.secondary,
85 
            opacity: 0.9
86 
          }
87 
        },
88 
        containedInfo: {
89 
          backgroundColor: colors.button.background.tertiary,
90 
          color: colors.button.text.tertiary,
91 
          ':hover': {
92 
            backgroundColor: colors.button.background.tertiary,
93 
            opacity: 0.9
94 
          }
95 
        },
96 
        containedInherit: {
97 
          backgroundColor: 'transparent',
98 
          color: 'rgba(0, 0, 0, 0.54)',
99 
          ':hover': {
100 
            backgroundColor: 'rgba(0, 0, 0, 0.04)'
101 
          }
102 
        }
103 
      },
104 
      defaultProps: { variant: 'contained', color: 'inherit' }
105 
    },
106 
    MuiDrawer: {
107 
      styleOverrides: {
108 
        paper: {
109 
          backgroundColor: colors.main
110 
        }
111 
      }
112 
    },
113 
    MuiPaper: {
114 
      styleOverrides: {
115 
        root: ({ theme }) => ({
116 
          boxShadow: theme.shadows[1],
117 
          backgroundColor: colors.main
118 
        })
119 
      }
120 
    },
121 
    MuiAccordion: {
122 
      styleOverrides: {
123 
        root: accordionStyles
124 
      }
125 
    },
126 
    MuiFormLabel: {
127 
      styleOverrides: {
128 
        root: {
129 
          fontWeight: 'bold',
130 
          color: colors.font.primary
131 
        }
132 
      }
133 
    },
134 
    MuiInputLabel: {
135 
      styleOverrides: {
136 
        root: {
137 
          position: 'relative',
138 
          top: 'auto',
139 
          left: 'auto',
140 
          transform: 'none'
141 
        }
142 
      }
143 
    },
144 
    MuiInputBase: {
145 
      styleOverrides: {
146 
        root: inputStyles,
147 
        colorSecondary: {
148 
          backgroundColor: colors.main
149 
        }
150 
      },
151 
      variants: [
152 
        {
153 
          props: { variant: 'search' },
154 
          style: { borderRadius: 20 }
155 
        }
156 
      ],
157 
      defaultProps: {
158 
        size: 'small'
159 
      }
160 
    },
161 
    MuiSelect: {
162 
      styleOverrides: {
163 
        root: rootSelectStyles,
164 
        select: selectSelectStyles
165 
      }
166 
    },
167 
    MuiOutlinedInput: {
168 
      styleOverrides: {
169 
        notchedOutline: {
170 
          display: 'none'
171 
        }
172 
      }
173 
    },
174 
    MuiTypography: {
175 
      styleOverrides: {
176 
        root: typographyStyles
177 
      }
178 
    },
179 
    MuiList: {
180 
      styleOverrides: {
181 
        root: listStyles
182 
      }
183 
    },
184 
    MuiMenu: {
185 
      styleOverrides: {
186 
        root: menuStyles
187 
      }
188 
    },
189 
    MuiSvgIcon: {
190 
      defaultProps: { fontSize: 'small' }
191 
    },
192 
    MuiAppBar: {
193 
      styleOverrides: {
194 
        root: {
195 
          backgroundColor: colors.main,
196 
          boxShadow: 1,
197 
          zIndex: 50
198 
        }
199 
      }
200 
    },
201 
    MuiCard: {
202 
      styleOverrides: {
203 
        root: {
204 
          boxShadow: 'none',
205 
          position: 'relative',
206 
          borderRadius: {
207 
            xs: 0,
208 
            sm: 10
209 
          },
210 
          backgroundColor: colors.main
211 
        }
212 
      }
213 
    },
214 
    MuiIconButton: {
215 
      styleOverrides: {
216 
        root: {
217 
          color: colors.icon.primary
218 
        }
219 
      }
220 
    },
221 
    MuiLinearProgress: {
222 
      styleOverrides: {
223 
        root: {
224 
          backgroundColor: colors.main,
225 
          borderRadius: 10,
226 
          flex: 1,
227 
          '& .MuiLinearProgress-bar': {
228 
            backgroundColor: colors.button.background.primary,
229 
            borderRadius: 10
230 
          }
231 
        }
232 
      }
233 
    },
234 
    MuiCardActions: {
235 
      styleOverrides: {
236 
        root: {
237 
          padding: '0.5rem',
238 
          justifyContent: 'space-around',
239 
          gap: '0.5rem',
240 
          '& > button': { flex: 1, flexWrap: 'wrap' },
241 
          borderTop: `1px solid ${colors.border.primary}`
242 
        }
243 
      }
244 
    },
245 
    MuiCardHeader: {
246 
      styleOverrides: {
247 
        avatar: ({ theme }) => ({
248 
          marginRight: theme.spacing(0.5)
249 
        })
250 
      }
251 
    },
252 
    MuiAvatarGroup: {
253 
      styleOverrides: {
254 
        root: {
255 
          flexDirection: 'row',
256 
          '& .MuiAvatar-root:last-child': {
257 
            marginLeft: '-8px'
258 
          }
259 
        }
260 
      }
261 
    },
262 
    MuiChip: {
263 
      styleOverrides: {
264 
        root: {
265 
          backgroundColor: colors.button.background.primary
266 
        },
267 
        label: {
268 
          color: colors.button.text.primary
269 
        }
270 
      }
271 
    },
272 
    MuiTabs: {
273 
      styleOverrides: {
274 
        root: tabsStyles
275 
      }
276 
    }
277 
  }
278 
});