diff options
author | Kristóf Marussy <kristof@marussy.com> | 2022-08-12 19:54:46 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2022-08-12 19:54:46 +0200 |
commit | d22c3b0c257f5daf5b401988a35ab9ce981a2341 (patch) | |
tree | 0a661c927c37b52197326d1c05e211daf9bd19e5 /subprojects/frontend/src/editor/EditorParent.ts | |
parent | fix(language): rule parsing test (diff) | |
download | refinery-d22c3b0c257f5daf5b401988a35ab9ce981a2341.tar.gz refinery-d22c3b0c257f5daf5b401988a35ab9ce981a2341.tar.zst refinery-d22c3b0c257f5daf5b401988a35ab9ce981a2341.zip |
refactor(frontend): move from Webpack to Vite
Also overhaulds the building and linting for frontend assets.
Diffstat (limited to 'subprojects/frontend/src/editor/EditorParent.ts')
-rw-r--r-- | subprojects/frontend/src/editor/EditorParent.ts | 74 |
1 files changed, 55 insertions, 19 deletions
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts index 9aaf541a..dbc35a0d 100644 --- a/subprojects/frontend/src/editor/EditorParent.ts +++ b/subprojects/frontend/src/editor/EditorParent.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { styled } from '@mui/material/styles'; | 1 | import { alpha, styled } from '@mui/material/styles'; |
2 | 2 | ||
3 | /** | 3 | /** |
4 | * Returns a squiggly underline background image encoded as a CSS `url()` data URI with Base64. | 4 | * Returns a squiggly underline background image encoded as a CSS `url()` data URI with Base64. |
@@ -17,7 +17,9 @@ function underline(color: string) { | |||
17 | return `url('data:image/svg+xml;base64,${svgBase64}')`; | 17 | return `url('data:image/svg+xml;base64,${svgBase64}')`; |
18 | } | 18 | } |
19 | 19 | ||
20 | export const EditorParent = styled('div')(({ theme }) => { | 20 | export default styled('div', { |
21 | name: 'EditorParent', | ||
22 | })(({ theme }) => { | ||
21 | const codeMirrorLintStyle: Record<string, unknown> = {}; | 23 | const codeMirrorLintStyle: Record<string, unknown> = {}; |
22 | (['error', 'warning', 'info'] as const).forEach((severity) => { | 24 | (['error', 'warning', 'info'] as const).forEach((severity) => { |
23 | const color = theme.palette[severity].main; | 25 | const color = theme.palette[severity].main; |
@@ -37,19 +39,20 @@ export const EditorParent = styled('div')(({ theme }) => { | |||
37 | '.cm-content': { | 39 | '.cm-content': { |
38 | padding: 0, | 40 | padding: 0, |
39 | }, | 41 | }, |
40 | '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': { | 42 | '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': |
41 | fontSize: 16, | 43 | { |
42 | fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace', | 44 | fontSize: 16, |
43 | fontFeatureSettings: '"liga", "calt"', | 45 | fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace', |
44 | fontWeight: 400, | 46 | fontFeatureSettings: '"liga", "calt"', |
45 | letterSpacing: 0, | 47 | fontWeight: 400, |
46 | textRendering: 'optimizeLegibility', | 48 | letterSpacing: 0, |
47 | }, | 49 | textRendering: 'optimizeLegibility', |
50 | }, | ||
48 | '.cm-scroller': { | 51 | '.cm-scroller': { |
49 | color: theme.palette.text.secondary, | 52 | color: theme.palette.text.secondary, |
50 | }, | 53 | }, |
51 | '.cm-gutters': { | 54 | '.cm-gutters': { |
52 | background: 'rgba(255, 255, 255, 0.1)', | 55 | background: 'transparent', |
53 | color: theme.palette.text.disabled, | 56 | color: theme.palette.text.disabled, |
54 | border: 'none', | 57 | border: 'none', |
55 | }, | 58 | }, |
@@ -57,7 +60,19 @@ export const EditorParent = styled('div')(({ theme }) => { | |||
57 | color: theme.palette.secondary.main, | 60 | color: theme.palette.secondary.main, |
58 | }, | 61 | }, |
59 | '.cm-activeLine': { | 62 | '.cm-activeLine': { |
60 | background: 'rgba(0, 0, 0, 0.3)', | 63 | background: alpha(theme.palette.text.secondary, 0.06), |
64 | }, | ||
65 | '.cm-foldGutter': { | ||
66 | color: alpha(theme.palette.text.primary, 0), | ||
67 | transition: theme.transitions.create('color', { | ||
68 | duration: theme.transitions.duration.short, | ||
69 | }), | ||
70 | '@media (hover: none)': { | ||
71 | color: theme.palette.text.primary, | ||
72 | }, | ||
73 | }, | ||
74 | '.cm-gutters:hover .cm-foldGutter': { | ||
75 | color: theme.palette.text.primary, | ||
61 | }, | 76 | }, |
62 | '.cm-activeLineGutter': { | 77 | '.cm-activeLineGutter': { |
63 | background: 'transparent', | 78 | background: 'transparent', |
@@ -66,8 +81,7 @@ export const EditorParent = styled('div')(({ theme }) => { | |||
66 | color: theme.palette.text.primary, | 81 | color: theme.palette.text.primary, |
67 | }, | 82 | }, |
68 | '.cm-cursor, .cm-cursor-primary': { | 83 | '.cm-cursor, .cm-cursor-primary': { |
69 | borderColor: theme.palette.primary.main, | 84 | borderLeft: `2px solid ${theme.palette.primary.main}`, |
70 | background: theme.palette.common.black, | ||
71 | }, | 85 | }, |
72 | '.cm-selectionBackground': { | 86 | '.cm-selectionBackground': { |
73 | background: '#3e4453', | 87 | background: '#3e4453', |
@@ -115,9 +129,26 @@ export const EditorParent = styled('div')(({ theme }) => { | |||
115 | }, | 129 | }, |
116 | }, | 130 | }, |
117 | '.cm-foldPlaceholder': { | 131 | '.cm-foldPlaceholder': { |
118 | background: theme.palette.background.paper, | ||
119 | borderColor: theme.palette.text.disabled, | ||
120 | color: theme.palette.text.secondary, | 132 | color: theme.palette.text.secondary, |
133 | backgroundColor: alpha(theme.palette.text.secondary, 0), | ||
134 | border: `1px solid ${alpha(theme.palette.text.secondary, 0.5)}`, | ||
135 | borderRadius: theme.shape.borderRadius, | ||
136 | transition: theme.transitions.create( | ||
137 | ['background-color', 'border-color', 'color'], | ||
138 | { | ||
139 | duration: theme.transitions.duration.short, | ||
140 | }, | ||
141 | ), | ||
142 | '&:hover': { | ||
143 | backgroundColor: alpha( | ||
144 | theme.palette.text.secondary, | ||
145 | theme.palette.action.hoverOpacity, | ||
146 | ), | ||
147 | borderColor: theme.palette.text.secondary, | ||
148 | '@media (hover: none)': { | ||
149 | backgroundColor: 'transparent', | ||
150 | }, | ||
151 | }, | ||
121 | }, | 152 | }, |
122 | '.tok-comment': { | 153 | '.tok-comment': { |
123 | fontStyle: 'italic', | 154 | fontStyle: 'italic', |
@@ -168,9 +199,14 @@ export const EditorParent = styled('div')(({ theme }) => { | |||
168 | }, | 199 | }, |
169 | '.cm-tooltip-autocomplete': { | 200 | '.cm-tooltip-autocomplete': { |
170 | background: theme.palette.background.paper, | 201 | background: theme.palette.background.paper, |
171 | boxShadow: `0px 2px 4px -1px rgb(0 0 0 / 20%), | 202 | ...(theme.palette.mode === 'dark' && { |
172 | 0px 4px 5px 0px rgb(0 0 0 / 14%), | 203 | overflow: 'hidden', |
173 | 0px 1px 10px 0px rgb(0 0 0 / 12%)`, | 204 | borderRadius: theme.shape.borderRadius, |
205 | // https://github.com/mui/material-ui/blob/10c72729c7d03bab8cdce6eb422642684c56dca2/packages/mui-material/src/Paper/Paper.js#L18 | ||
206 | backgroundImage: | ||
207 | 'linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))', | ||
208 | }), | ||
209 | boxShadow: theme.shadows[4], | ||
174 | '.cm-completionIcon': { | 210 | '.cm-completionIcon': { |
175 | color: theme.palette.text.secondary, | 211 | color: theme.palette.text.secondary, |
176 | }, | 212 | }, |