Gitiles
Code Review Sign In
review.jami.net / jami-web / deabd2876cfcc7bc63eb26fe30f17508d6179d95 / . / client / src / themes / default.js
blob: 4de4f945286232c6738e55789489a046941d69fb [file] [log] [blame]
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]1import { createTheme } from "@mui/material";
2
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]3const theme = createTheme({
4 palette: {
5 primary: {
6 light: "#E5EEF5", // same as "#0056991A"
7 main: "#0071C9",
8 dark: "#005699",
9 },
10 error: {
11 main: "#CC0022",
12 },
13 success: {
14 main: "#009980",
15 },
16 },
17})
18
19export default createTheme(theme, {
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]20 typography: {
21 fontFamily: "Ubuntu",
22 h1: {
23 fontWeight: 400,
24 fontSize: "26px",
25 lineHeight: "36px",
26 },
27 h2: {
28 fontWeight: 400,
29 fontSize: "22px",
30 lineHeight: "30px",
31 },
32 h3: {
33 fontWeight: 400,
34 fontSize: "18px",
35 lineHeight: "26px",
36 },
37 h4: {
38 fontWeight: 500,
39 fontSize: "15px",
40 lineHeight: "22px",
41 },
42 h5: {
43 fontWeight: 500,
44 fontSize: "13px",
45 lineHeight: "19px",
46 },
47 body1: {
48 fontWeight: 400,
49 fontSize: "15px",
50 lineHeight: "22px"
51 },
52 body2: {
53 fontWeight: 400,
54 fontSize: "13px",
55 lineHeight: "19px",
56 },
57 caption: {
58 fontWeight: 400,
59 fontSize: "12px",
60 lineHeight: "16px",
61 },
62 },
63 components: {
64 MuiButton: {
65 styleOverrides: {
66 root: {
67 height: "46px",
68 fontWeight: 700,
69 fontSize: "15px",
70 lineHeight: "17px",
71 textTransform: "none",
72 },
73 sizeSmall: {
74 height: "36px",
75 },
76 contained: {
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]77 background: theme.palette.primary.dark,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]78 "&:hover": {
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]79 background: theme.palette.primary.main,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]80 },
81 },
82 outlined: {
83 background: "#FFF",
84 borderColor: "#0056995C",
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]85 color: theme.palette.primary.dark,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]86 "&:hover": {
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]87 background: theme.palette.primary.light,
88 borderColor: theme.palette.primary.dark,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]89 },
90 },
91 text: {
92 background: "#fff",
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]93 color: theme.palette.primary.dark,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]94 "&:hover": {
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]95 background: theme.palette.primary.light,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]96 },
97 },
98 },
99 },
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]100 MuiSwitch: {
101 defaultProps: {
102 disableRipple: true,
103 },
104 styleOverrides: {
105 root: {
106 width: "60px",
107 height: "30px",
108 padding: 0,
109 },
110 switchBase: {
111 padding: 0,
112 "&.Mui-checked": {
113 transform: `translateX(30px)`,
114 },
115 },
116 thumb: {
117 width: "28px",
118 height: "28px",
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]119 border: `1px solid ${theme.palette.primary.dark}`,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]120 ".Mui-checked.Mui-checked &": {
121 width: "30px",
122 height: "30px",
123 border: "none",
124 }
125 },
126 track: {
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]127 backgroundColor: theme.palette.primary.light,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]128 borderRadius: "30px",
129 opacity: 1,
130 ".Mui-checked.Mui-checked + &": {
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]131 backgroundColor: theme.palette.primary.light,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]132 opacity: 1,
133 }
134 },
135 colorPrimary: {
136 color: "#fff",
137 "&.Mui-checked": {
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]138 color: theme.palette.primary.dark,
idillon-sfl837ea0b2022-08-25 11:35:29 -0400[diff] [blame]139 },
140 },
141 },
142 },
143 MuiCssBaseline: {
144 styleOverrides: `
145 @font-face {
146 font-family: "Ubuntu";
147 src: url("./fonts/Ubuntu-Th.ttf");
148 font-weight: 100;
149 font-style: normal;
150 }
151 @font-face {
152 font-family: "Ubuntu";
153 src: url("./fonts/Ubuntu-L.ttf");
154 font-weight: 300;
155 font-style: normal;
156 }
157 @font-face {
158 font-family: "Ubuntu";
159 src: url("./fonts/Ubuntu-LI.ttf");
160 font-weight: 300;
161 font-style: italic;
162 }
163 @font-face {
164 font-family: "Ubuntu";
165 src: url("./fonts/Ubuntu-R.ttf");
166 font-weight: 400;
167 font-style: normal;
168 }
169 @font-face {
170 font-family: "Ubuntu";
171 src: url("./fonts/Ubuntu-RI.ttf");
172 font-weight: 400;
173 font-style: italic;
174 }
175 @font-face {
176 font-family: "Ubuntu";
177 src: url("./fonts/Ubuntu-M.ttf");
178 font-weight: 500;
179 font-style: normal;
180 }
181 @font-face {
182 font-family: "Ubuntu";
183 src: url("./fonts/Ubuntu-MI.ttf");
184 font-weight: 500;
185 font-style: italic;
186 }
187 @font-face {
188 font-family: "Ubuntu";
189 src: url("./fonts/Ubuntu-B.ttf");
190 font-weight: 700;
191 font-style: normal;
192 }
193 @font-face {
194 font-family: "Ubuntu";
195 src: url("./fonts/Ubuntu-BI.ttf");
196 font-weight: 700;
197 font-style: italic;
198 }
199 `,
200 },
201 },
idillon-sfldeabd282022-08-25 22:50:03 -0400[diff] [blame^]202})