diff options
Diffstat (limited to 'subprojects/frontend/src/theme')
-rw-r--r-- | subprojects/frontend/src/theme/ThemeProvider.tsx | 65 |
1 files changed, 43 insertions, 22 deletions
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index 3a0703fe..0c780e85 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx | |||
@@ -43,11 +43,15 @@ interface HighlightPalette { | |||
43 | 43 | ||
44 | declare module '@mui/material/styles' { | 44 | declare module '@mui/material/styles' { |
45 | interface TypographyVariants { | 45 | interface TypographyVariants { |
46 | fontWeightEditorNormal: number; | ||
47 | fontWeightEditorBold: number; | ||
46 | editor: TypographyStyle; | 48 | editor: TypographyStyle; |
47 | } | 49 | } |
48 | 50 | ||
49 | // eslint-disable-next-line @typescript-eslint/no-shadow -- Augment imported interface. | 51 | // eslint-disable-next-line @typescript-eslint/no-shadow -- Augment imported interface. |
50 | interface TypographyVariantsOptions { | 52 | interface TypographyVariantsOptions { |
53 | fontWeightEditorNormal: number; | ||
54 | fontWeightEditorBold: number; | ||
51 | editor: TypographyStyle; | 55 | editor: TypographyStyle; |
52 | } | 56 | } |
53 | 57 | ||
@@ -63,11 +67,14 @@ declare module '@mui/material/styles' { | |||
63 | } | 67 | } |
64 | 68 | ||
65 | const typography: TypographyVariantsOptions = { | 69 | const typography: TypographyVariantsOptions = { |
70 | fontWeightEditorNormal: 400, | ||
71 | fontWeightEditorBold: 600, | ||
66 | editor: { | 72 | editor: { |
67 | fontFamily: | 73 | fontFamily: |
68 | '"JetBrains MonoVariable", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace', | 74 | '"JetBrains MonoVariable", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace', |
69 | fontFeatureSettings: '"liga", "calt"', | 75 | fontFeatureSettings: '"liga", "calt"', |
70 | fontSize: '1rem', | 76 | // `rem` for JetBrains MonoVariable make the text too large in Safari. |
77 | fontSize: '16px', | ||
71 | fontWeight: 400, | 78 | fontWeight: 400, |
72 | lineHeight: 1.5, | 79 | lineHeight: 1.5, |
73 | letterSpacing: 0, | 80 | letterSpacing: 0, |
@@ -78,10 +85,20 @@ const typography: TypographyVariantsOptions = { | |||
78 | const components: Components = { | 85 | const components: Components = { |
79 | MuiButton: { | 86 | MuiButton: { |
80 | styleOverrides: { | 87 | styleOverrides: { |
81 | root: { '&.rounded': { borderRadius: '50em' } }, | 88 | root: { |
82 | text: { '&.rounded': { padding: '6px 16px' } }, | 89 | '&.rounded': { borderRadius: '50em' }, |
83 | textSizeSmall: { '&.rounded': { padding: '4px 10px' } }, | 90 | '.MuiButton-startIcon': { marginRight: 6 }, |
84 | textSizeLarge: { '&.rounded': { padding: '8px 22px' } }, | 91 | '.MuiButton-endIcon': { marginLeft: 6 }, |
92 | }, | ||
93 | text: { '&.rounded': { padding: '6px 14px' } }, | ||
94 | textSizeSmall: { | ||
95 | fontSize: '0.875rem', | ||
96 | '&.rounded': { padding: '4px 8px' }, | ||
97 | }, | ||
98 | textSizeLarge: { | ||
99 | fontSize: '1rem', | ||
100 | '&.rounded': { padding: '8px 20px' }, | ||
101 | }, | ||
85 | }, | 102 | }, |
86 | }, | 103 | }, |
87 | MuiToggleButton: { | 104 | MuiToggleButton: { |
@@ -142,31 +159,31 @@ const lightTheme = createResponsiveTheme({ | |||
142 | success: { main: '#50a14f' }, | 159 | success: { main: '#50a14f' }, |
143 | info: { main: '#4078f2' }, | 160 | info: { main: '#4078f2' }, |
144 | background: { | 161 | background: { |
145 | default: '#ffffff', | 162 | default: '#fff', |
146 | paper: '#ffffff', | 163 | paper: '#fff', |
147 | }, | 164 | }, |
148 | text: { | 165 | text: { |
149 | primary: '#35373e', | 166 | primary: '#19202b', |
150 | secondary: '#696c77', | 167 | secondary: '#696c77', |
151 | disabled: '#8e8f97', | 168 | disabled: '#a0a1a7', |
152 | }, | 169 | }, |
153 | divider: alpha('#35373e', 0.21), | 170 | divider: alpha('#19202b', 0.16), |
154 | outer: { | 171 | outer: { |
155 | background: '#fafafa', | 172 | background: '#f5f5f5', |
156 | border: '#d4d4d6', | 173 | border: '#d6d7d9', |
157 | }, | 174 | }, |
158 | highlight: { | 175 | highlight: { |
159 | number: '#0084bc', | 176 | number: '#0084bc', |
160 | parameter: '#6a3e3e', | 177 | parameter: '#6a3e3e', |
161 | comment: '#8e8f97', | 178 | comment: '#a0a1a7', |
162 | activeLine: '#fafafa', | 179 | activeLine: '#f5f5f5', |
163 | selection: '#c8e4fb', | 180 | selection: '#c8e4fb', |
164 | lineNumber: '#8e8f97', | 181 | lineNumber: '#a0a1a7', |
165 | foldPlaceholder: alpha('#35373e', 0.08), | 182 | foldPlaceholder: alpha('#19202b', 0.08), |
166 | activeLintRange: alpha('#f2a60d', 0.28), | 183 | activeLintRange: alpha('#f2a60d', 0.28), |
167 | occurences: { | 184 | occurences: { |
168 | read: alpha('#35373e', 0.16), | 185 | read: alpha('#19202b', 0.16), |
169 | write: alpha('#35373e', 0.16), | 186 | write: alpha('#19202b', 0.16), |
170 | }, | 187 | }, |
171 | search: { | 188 | search: { |
172 | match: '#00bcd4', | 189 | match: '#00bcd4', |
@@ -178,7 +195,11 @@ const lightTheme = createResponsiveTheme({ | |||
178 | }); | 195 | }); |
179 | 196 | ||
180 | const darkTheme = createResponsiveTheme({ | 197 | const darkTheme = createResponsiveTheme({ |
181 | typography, | 198 | typography: { |
199 | ...typography, | ||
200 | fontWeightEditorNormal: 350, | ||
201 | fontWeightEditorBold: 550, | ||
202 | }, | ||
182 | components: { | 203 | components: { |
183 | ...components, | 204 | ...components, |
184 | MuiSnackbarContent: { | 205 | MuiSnackbarContent: { |
@@ -218,7 +239,7 @@ const darkTheme = createResponsiveTheme({ | |||
218 | text: { | 239 | text: { |
219 | primary: '#ebebff', | 240 | primary: '#ebebff', |
220 | secondary: '#abb2bf', | 241 | secondary: '#abb2bf', |
221 | disabled: '#828997', | 242 | disabled: '#5c6370', |
222 | }, | 243 | }, |
223 | divider: alpha('#abb2bf', 0.24), | 244 | divider: alpha('#abb2bf', 0.24), |
224 | outer: { | 245 | outer: { |
@@ -228,10 +249,10 @@ const darkTheme = createResponsiveTheme({ | |||
228 | highlight: { | 249 | highlight: { |
229 | number: '#6188a6', | 250 | number: '#6188a6', |
230 | parameter: '#c8ae9d', | 251 | parameter: '#c8ae9d', |
231 | comment: '#828997', | 252 | comment: '#5c6370', |
232 | activeLine: '#21252b', | 253 | activeLine: '#21252b', |
233 | selection: '#3e4453', | 254 | selection: '#3e4453', |
234 | lineNumber: '#828997', | 255 | lineNumber: '#5c6370', |
235 | foldPlaceholder: alpha('#ebebff', 0.12), | 256 | foldPlaceholder: alpha('#ebebff', 0.12), |
236 | activeLintRange: alpha('#fbc346', 0.28), | 257 | activeLintRange: alpha('#fbc346', 0.28), |
237 | occurences: { | 258 | occurences: { |