diff options
author | 2022-08-17 21:43:29 +0200 | |
---|---|---|
committer | 2022-08-17 21:43:29 +0200 | |
commit | bb900e1bd40a6b7efd7a538114d985ea7f7e3e88 (patch) | |
tree | bb15a937ade92313dc654a640bc1de925442eff2 /subprojects/frontend/src/theme | |
parent | refactor(frondend): improve editor store and theme (diff) | |
download | refinery-bb900e1bd40a6b7efd7a538114d985ea7f7e3e88.tar.gz refinery-bb900e1bd40a6b7efd7a538114d985ea7f7e3e88.tar.zst refinery-bb900e1bd40a6b7efd7a538114d985ea7f7e3e88.zip |
feat(frontend): custom search panel
Also improves editor styling (to enable panel styling).
Diffstat (limited to 'subprojects/frontend/src/theme')
-rw-r--r-- | subprojects/frontend/src/theme/ThemeProvider.tsx | 104 |
1 files changed, 94 insertions, 10 deletions
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index dd4f5bb8..2ec9b9d4 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx | |||
@@ -2,9 +2,12 @@ import { | |||
2 | alpha, | 2 | alpha, |
3 | createTheme, | 3 | createTheme, |
4 | type Components, | 4 | type Components, |
5 | type CSSObject, | ||
5 | responsiveFontSizes, | 6 | responsiveFontSizes, |
6 | type ThemeOptions, | 7 | type ThemeOptions, |
7 | ThemeProvider as MaterialUiThemeProvider, | 8 | ThemeProvider as MaterialUiThemeProvider, |
9 | type TypographyStyle, | ||
10 | type TypographyVariantsOptions, | ||
8 | } from '@mui/material/styles'; | 11 | } from '@mui/material/styles'; |
9 | import { observer } from 'mobx-react-lite'; | 12 | import { observer } from 'mobx-react-lite'; |
10 | import React, { type ReactNode } from 'react'; | 13 | import React, { type ReactNode } from 'react'; |
@@ -22,13 +25,30 @@ interface HighlightPalette { | |||
22 | comment: string; | 25 | comment: string; |
23 | activeLine: string; | 26 | activeLine: string; |
24 | selection: string; | 27 | selection: string; |
28 | lineNumber: string; | ||
29 | foldPlaceholder: string; | ||
30 | activeLintRange: string; | ||
25 | occurences: { | 31 | occurences: { |
26 | read: string; | 32 | read: string; |
27 | write: string; | 33 | write: string; |
28 | }; | 34 | }; |
35 | search: { | ||
36 | match: string; | ||
37 | selected: string; | ||
38 | contrastText: string; | ||
39 | }; | ||
29 | } | 40 | } |
30 | 41 | ||
31 | declare module '@mui/material/styles' { | 42 | declare module '@mui/material/styles' { |
43 | interface TypographyVariants { | ||
44 | editor: TypographyStyle; | ||
45 | } | ||
46 | |||
47 | // eslint-disable-next-line @typescript-eslint/no-shadow -- Augment imported interface. | ||
48 | interface TypographyVariantsOptions { | ||
49 | editor: TypographyStyle; | ||
50 | } | ||
51 | |||
32 | interface Palette { | 52 | interface Palette { |
33 | outer: OuterPalette; | 53 | outer: OuterPalette; |
34 | highlight: HighlightPalette; | 54 | highlight: HighlightPalette; |
@@ -41,6 +61,18 @@ declare module '@mui/material/styles' { | |||
41 | } | 61 | } |
42 | 62 | ||
43 | function getMUIThemeOptions(darkMode: boolean): ThemeOptions { | 63 | function getMUIThemeOptions(darkMode: boolean): ThemeOptions { |
64 | const typography: TypographyVariantsOptions = { | ||
65 | editor: { | ||
66 | fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace', | ||
67 | fontFeatureSettings: '"liga", "calt"', | ||
68 | fontSize: '1rem', | ||
69 | fontWeight: 400, | ||
70 | lineHeight: 1.5, | ||
71 | letterSpacing: 0, | ||
72 | textRendering: 'optimizeLegibility', | ||
73 | }, | ||
74 | }; | ||
75 | |||
44 | const components: Components = { | 76 | const components: Components = { |
45 | MuiButton: { | 77 | MuiButton: { |
46 | styleOverrides: { | 78 | styleOverrides: { |
@@ -67,11 +99,37 @@ function getMUIThemeOptions(darkMode: boolean): ThemeOptions { | |||
67 | }, | 99 | }, |
68 | }, | 100 | }, |
69 | }, | 101 | }, |
102 | MuiTooltip: { | ||
103 | styleOverrides: { | ||
104 | tooltip: { | ||
105 | background: alpha('#212121', 0.93), | ||
106 | color: '#fff', | ||
107 | }, | ||
108 | arrow: { | ||
109 | color: alpha('#212121', 0.93), | ||
110 | }, | ||
111 | }, | ||
112 | }, | ||
70 | }; | 113 | }; |
71 | 114 | ||
72 | return darkMode | 115 | return darkMode |
73 | ? { | 116 | ? { |
74 | components, | 117 | typography, |
118 | components: { | ||
119 | ...components, | ||
120 | MuiTooltip: { | ||
121 | ...(components.MuiTooltip || {}), | ||
122 | styleOverrides: { | ||
123 | ...(components.MuiTooltip?.styleOverrides || {}), | ||
124 | tooltip: { | ||
125 | ...((components.MuiTooltip?.styleOverrides?.tooltip as | ||
126 | | CSSObject | ||
127 | | undefined) || {}), | ||
128 | color: '#ebebff', | ||
129 | }, | ||
130 | }, | ||
131 | }, | ||
132 | }, | ||
75 | palette: { | 133 | palette: { |
76 | mode: 'dark', | 134 | mode: 'dark', |
77 | primary: { main: '#56b6c2' }, | 135 | primary: { main: '#56b6c2' }, |
@@ -99,31 +157,57 @@ function getMUIThemeOptions(darkMode: boolean): ThemeOptions { | |||
99 | comment: '#6b717d', | 157 | comment: '#6b717d', |
100 | activeLine: '#21252b', | 158 | activeLine: '#21252b', |
101 | selection: '#3e4453', | 159 | selection: '#3e4453', |
160 | lineNumber: '#4b5263', | ||
161 | foldPlaceholder: alpha('#ebebff', 0.12), | ||
162 | activeLintRange: alpha('#fbc346', 0.28), | ||
102 | occurences: { | 163 | occurences: { |
103 | read: 'rgba(255, 255, 255, 0.15)', | 164 | read: alpha('#ebebff', 0.24), |
104 | write: 'rgba(255, 255, 128, 0.4)', | 165 | write: alpha('#ebebff', 0.24), |
166 | }, | ||
167 | search: { | ||
168 | match: '#33eaff', | ||
169 | selected: '#dd33fa', | ||
170 | contrastText: '#21252b', | ||
105 | }, | 171 | }, |
106 | }, | 172 | }, |
107 | }, | 173 | }, |
108 | } | 174 | } |
109 | : { | 175 | : { |
110 | components, | 176 | typography, |
177 | components: { | ||
178 | ...components, | ||
179 | MuiToolbar: { | ||
180 | styleOverrides: { | ||
181 | root: { | ||
182 | color: 'rgba(0, 0, 0, 0.54)', | ||
183 | }, | ||
184 | }, | ||
185 | }, | ||
186 | }, | ||
111 | palette: { | 187 | palette: { |
112 | mode: 'light', | 188 | mode: 'light', |
113 | primary: { main: '#0097a7' }, | 189 | primary: { main: '#0398a8' }, |
114 | outer: { | 190 | outer: { |
115 | background: '#f5f5f5', | 191 | background: '#f5f5f5', |
116 | border: '#d7d7d7', | 192 | border: '#cacaca', |
117 | }, | 193 | }, |
118 | highlight: { | 194 | highlight: { |
119 | number: '#1976d2', | 195 | number: '#3d79a2', |
120 | parameter: '#6a3e3e', | 196 | parameter: '#6a3e3e', |
121 | comment: alpha('#000', 0.38), | 197 | comment: 'rgba(0, 0, 0, 0.38)', |
122 | activeLine: '#f5f5f5', | 198 | activeLine: '#f5f5f5', |
123 | selection: '#c8e4fb', | 199 | selection: '#c8e4fb', |
200 | lineNumber: 'rgba(0, 0, 0, 0.38)', | ||
201 | foldPlaceholder: 'rgba(0, 0, 0, 0.12)', | ||
202 | activeLintRange: alpha('#ed6c02', 0.24), | ||
124 | occurences: { | 203 | occurences: { |
125 | read: '#ceccf7', | 204 | read: 'rgba(0, 0, 0, 0.12)', |
126 | write: '#f0d8a8', | 205 | write: 'rgba(0, 0, 0, 0.12)', |
206 | }, | ||
207 | search: { | ||
208 | match: '#00bcd4', | ||
209 | selected: '#d500f9', | ||
210 | contrastText: '#ffffff', | ||
127 | }, | 211 | }, |
128 | }, | 212 | }, |
129 | }, | 213 | }, |