diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-10-30 17:59:06 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-10-31 19:26:14 +0100 |
commit | 4b73a3c96ff0007a03e55bd5abde2a5879c52eba (patch) | |
tree | 849bd51b7233cf3acc54f03c59068877c760cb83 /language-web/src/main | |
parent | chore(web): refactor UpdateService (diff) | |
download | refinery-4b73a3c96ff0007a03e55bd5abde2a5879c52eba.tar.gz refinery-4b73a3c96ff0007a03e55bd5abde2a5879c52eba.tar.zst refinery-4b73a3c96ff0007a03e55bd5abde2a5879c52eba.zip |
feat(web): use theme colors in error markers
Diffstat (limited to 'language-web/src/main')
-rw-r--r-- | language-web/src/main/js/editor/EditorParent.ts | 193 |
1 files changed, 112 insertions, 81 deletions
diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts index 0a25214b..240c73e9 100644 --- a/language-web/src/main/js/editor/EditorParent.ts +++ b/language-web/src/main/js/editor/EditorParent.ts | |||
@@ -1,88 +1,119 @@ | |||
1 | import { styled } from '@mui/material/styles'; | 1 | import { styled } from '@mui/material/styles'; |
2 | 2 | ||
3 | export const EditorParent = styled('div')(({ theme }) => ({ | 3 | /** |
4 | background: theme.palette.background.default, | 4 | * Returns a squiggly underline background image encoded as a CSS `url()` data URI with Base64. |
5 | '&, .cm-editor': { | 5 | * |
6 | height: '100%', | 6 | * Based on |
7 | }, | 7 | * https://github.com/codemirror/lint/blob/f524b4a53b0183bb343ac1e32b228d28030d17af/src/lint.ts#L501 |
8 | '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': { | 8 | * |
9 | fontSize: 16, | 9 | * @param color the color of the underline |
10 | fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace', | 10 | * @returns the CSS `url()` |
11 | fontFeatureSettings: '"liga", "calt"', | 11 | */ |
12 | fontWeight: 400, | 12 | function underline(color: string) { |
13 | letterSpacing: 0, | 13 | const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3"> |
14 | textRendering: 'optimizeLegibility', | 14 | <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width=".7"/> |
15 | }, | 15 | </svg>`; |
16 | '.cm-scroller': { | 16 | const svgBase64 = window.btoa(svg); |
17 | color: theme.palette.text.secondary, | 17 | return `url('data:image/svg+xml;base64,${svgBase64}')`; |
18 | }, | 18 | } |
19 | '.cm-gutters': { | 19 | |
20 | export const EditorParent = styled('div')(({ theme }) => { | ||
21 | const codeMirrorLintStyle: Record<string, unknown> = {}; | ||
22 | (['error', 'warning', 'info'] as const).forEach((severity) => { | ||
23 | const color = theme.palette[severity].main; | ||
24 | codeMirrorLintStyle[`.cm-diagnostic-${severity}`] = { | ||
25 | borderLeftColor: color, | ||
26 | }; | ||
27 | codeMirrorLintStyle[`.cm-lintRange-${severity}`] = { | ||
28 | backgroundImage: underline(color), | ||
29 | }; | ||
30 | }); | ||
31 | |||
32 | return { | ||
20 | background: theme.palette.background.default, | 33 | background: theme.palette.background.default, |
21 | color: theme.palette.text.disabled, | 34 | '&, .cm-editor': { |
22 | border: 'none', | 35 | height: '100%', |
23 | }, | 36 | }, |
24 | '.cm-specialChar': { | 37 | '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': { |
25 | color: theme.palette.secondary.main, | 38 | fontSize: 16, |
26 | }, | 39 | fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace', |
27 | '.cm-activeLine': { | 40 | fontFeatureSettings: '"liga", "calt"', |
28 | background: 'rgba(0, 0, 0, 0.3)', | 41 | fontWeight: 400, |
29 | }, | 42 | letterSpacing: 0, |
30 | '.cm-activeLineGutter': { | 43 | textRendering: 'optimizeLegibility', |
31 | background: 'rgba(0, 0, 0, 0.3)', | 44 | }, |
32 | color: theme.palette.text.primary, | 45 | '.cm-scroller': { |
33 | }, | 46 | color: theme.palette.text.secondary, |
34 | '.cm-cursor, .cm-cursor-primary': { | 47 | }, |
35 | borderColor: theme.palette.primary.main, | 48 | '.cm-gutters': { |
36 | background: theme.palette.common.black, | 49 | background: theme.palette.background.default, |
37 | }, | 50 | color: theme.palette.text.disabled, |
38 | '.cm-selectionBackground': { | 51 | border: 'none', |
39 | background: '#3e4453', | 52 | }, |
40 | }, | 53 | '.cm-specialChar': { |
41 | '.cm-focused': { | 54 | color: theme.palette.secondary.main, |
42 | outline: 'none', | 55 | }, |
56 | '.cm-activeLine': { | ||
57 | background: 'rgba(0, 0, 0, 0.3)', | ||
58 | }, | ||
59 | '.cm-activeLineGutter': { | ||
60 | background: 'rgba(0, 0, 0, 0.3)', | ||
61 | color: theme.palette.text.primary, | ||
62 | }, | ||
63 | '.cm-cursor, .cm-cursor-primary': { | ||
64 | borderColor: theme.palette.primary.main, | ||
65 | background: theme.palette.common.black, | ||
66 | }, | ||
43 | '.cm-selectionBackground': { | 67 | '.cm-selectionBackground': { |
44 | background: '#3e4453', | 68 | background: '#3e4453', |
45 | }, | 69 | }, |
46 | }, | 70 | '.cm-focused': { |
47 | '.cm-panels-top': { | 71 | outline: 'none', |
48 | color: theme.palette.text.secondary, | 72 | '.cm-selectionBackground': { |
49 | }, | 73 | background: '#3e4453', |
50 | '.cm-panel': { | 74 | }, |
51 | background: theme.palette.background.paper, | 75 | }, |
52 | borderTop: `1px solid ${theme.palette.divider}`, | 76 | '.cm-panels-top': { |
53 | 'button[name="close"]': { | ||
54 | color: theme.palette.text.secondary, | 77 | color: theme.palette.text.secondary, |
55 | cursor: 'pointer', | 78 | }, |
56 | }, | 79 | '.cm-panel': { |
57 | }, | 80 | background: theme.palette.background.paper, |
58 | '.cm-foldPlaceholder': { | 81 | borderTop: `1px solid ${theme.palette.divider}`, |
59 | background: theme.palette.background.paper, | 82 | 'button[name="close"]': { |
60 | borderColor: theme.palette.text.disabled, | 83 | color: theme.palette.text.secondary, |
61 | color: theme.palette.text.secondary, | 84 | cursor: 'pointer', |
62 | }, | 85 | }, |
63 | '.cmt-comment': { | 86 | }, |
64 | fontStyle: 'italic', | 87 | '.cm-foldPlaceholder': { |
65 | color: theme.palette.text.disabled, | 88 | background: theme.palette.background.paper, |
66 | }, | 89 | borderColor: theme.palette.text.disabled, |
67 | '.cmt-number': { | 90 | color: theme.palette.text.secondary, |
68 | color: '#6188a6', | 91 | }, |
69 | }, | 92 | '.cmt-comment': { |
70 | '.cmt-string': { | 93 | fontStyle: 'italic', |
71 | color: theme.palette.secondary.dark, | 94 | color: theme.palette.text.disabled, |
72 | }, | 95 | }, |
73 | '.cmt-keyword': { | 96 | '.cmt-number': { |
74 | color: theme.palette.primary.main, | 97 | color: '#6188a6', |
75 | }, | 98 | }, |
76 | '.cmt-typeName, .cmt-atom': { | 99 | '.cmt-string': { |
77 | color: theme.palette.text.primary, | 100 | color: theme.palette.secondary.dark, |
78 | }, | 101 | }, |
79 | '.cmt-variableName': { | 102 | '.cmt-keyword': { |
80 | color: '#c8ae9d', | 103 | color: theme.palette.primary.main, |
81 | }, | 104 | }, |
82 | '.cm-completionIcon': { | 105 | '.cmt-typeName, .cmt-atom': { |
83 | width: 16, | 106 | color: theme.palette.text.primary, |
84 | padding: 0, | 107 | }, |
85 | marginRight: '0.5em', | 108 | '.cmt-variableName': { |
86 | textAlign: 'center', | 109 | color: '#c8ae9d', |
87 | }, | 110 | }, |
88 | })); | 111 | '.cm-completionIcon': { |
112 | width: 16, | ||
113 | padding: 0, | ||
114 | marginRight: '0.5em', | ||
115 | textAlign: 'center', | ||
116 | }, | ||
117 | ...codeMirrorLintStyle, | ||
118 | }; | ||
119 | }); | ||