Skip to content

Commit 5ad11ee

Browse files
bollwyvlbollwyvl
committed
use more theme variables, start per-theme work
1 parent 75fd503 commit 5ad11ee

File tree

6 files changed

+99
-44
lines changed

6 files changed

+99
-44
lines changed

‎packages/jupyterlab-lsp/style/highlight.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import url('./variables/base.css');
2+
@import url('./variables/cm-themes.css');
3+
@import url('./variables/jupyterlab-dark.css');
4+
@import url('./variables/jupyterlab-light.css');
5+
6+
.cm-lsp-diagnostic {
7+
text-decoration-line: underline;
8+
/* For Chrome */
9+
text-decoration-skip-ink: none;
10+
}
11+
12+
.cm-lsp-diagnostic-Error {
13+
/*
14+
"wavy" would be ideal, but there seems to be a bug in Chrome which makes it
15+
fail to render the last character see:
16+
https://stackoverflow.com/questions/57559588/how-to-make-the-wavy-underline-extend-cover-all-the-characters-in-chrome
17+
an alternative would be to use background image trick to simulate the underline
18+
*/
19+
20+
text-decoration-style: var(
21+
--jp-editor-mirror-lsp-diagnostic-decoration-style
22+
);
23+
text-decoration-color: var(
24+
--jp-editor-mirror-lsp-diagnostic-error-decoration-color
25+
);
26+
}
27+
28+
.cm-lsp-diagnostic-Warning {
29+
text-decoration-style: var(
30+
--jp-editor-mirror-lsp-diagnostic-decoration-style
31+
);
32+
text-decoration-color: var(
33+
--jp-editor-mirror-lsp-diagnostic-warning-decoration-color
34+
);
35+
}
36+
37+
.cm-lsp-diagnostic-Information {
38+
text-decoration-style: var(
39+
--jp-editor-mirror-lsp-diagnostic-decoration-style
40+
);
41+
text-decoration-color: var(
42+
--jp-editor-mirror-lsp-diagnostic-information-decoration-color
43+
);
44+
}
45+
46+
.cm-lsp-diagnostic-Hint {
47+
text-decoration-style: var(
48+
--jp-editor-mirror-lsp-diagnostic-decoration-style
49+
);
50+
text-decoration-color: var(
51+
--jp-editor-mirror-lsp-diagnostic-hint-decoration-color
52+
);
53+
}
54+
55+
/* hover */
56+
.cm-lsp-hover-available {
57+
text-decoration: var(--jp-editor-mirror-lsp-hover-decoration-style);
58+
text-decoration-color: var(--jp-editor-mirror-lsp-hover-decoration-color);
59+
}
60+
61+
/* highlight */
62+
.cm-lsp-highlight {
63+
background-color: var(--jp-editor-mirror-lsp-highlight-background-color);
64+
}

‎packages/jupyterlab-lsp/style/index.css

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1 @@
1-
.cm-lsp-diagnostic {
2-
text-decoration-line: underline;
3-
/* For Chrome */
4-
text-decoration-skip-ink: none;
5-
}
6-
7-
.cm-lsp-diagnostic-Error {
8-
/*
9-
"wavy" would be ideal, but there seems to be a bug in Chrome which makes it fail to render the last character
10-
see: https://stackoverflow.com/questions/57559588/how-to-make-the-wavy-underline-extend-cover-all-the-characters-in-chrome
11-
an alternative would be to use background image trick to simulate the underline
12-
*/
13-
14-
text-decoration-style: dashed;
15-
text-decoration-color: red;
16-
}
17-
18-
.cm-lsp-diagnostic-Warning {
19-
text-decoration-style: dashed;
20-
text-decoration-color: orange;
21-
}
22-
23-
.cm-lsp-diagnostic-Information {
24-
text-decoration-style: dashed;
25-
text-decoration-color: yellowgreen;
26-
}
27-
28-
.cm-lsp-diagnostic-Hint {
29-
text-decoration-style: dashed;
30-
text-decoration-color: green;
31-
}
32-
33-
.cm-lsp-hover-available {
34-
text-decoration: underline;
35-
text-decoration-color: blue;
36-
}
37-
38-
.cm-lsp-highlight {
39-
background-color: var(--jp-layout-color2);
40-
}
41-
42-
.CodeMirror-activeline .cm-lsp-highlight {
43-
outline: 1px dotted var(--jp-layout-color3);
44-
}
1+
@import url('./highlight.css');

‎packages/jupyterlab-lsp/style/variables/base.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
:root {
2+
/* highlight */
3+
--jp-editor-mirror-lsp-highlight-background-color: var(--jp-layout-color2);
4+
/* diagnostics */
5+
--jp-editor-mirror-lsp-diagnostic-decoration-style: dashed;
6+
--jp-editor-mirror-lsp-diagnostic-error-decoration-color: var(
7+
--jp-error-color1
8+
);
9+
--jp-editor-mirror-lsp-diagnostic-warning-decoration-color: var(
10+
--jp-warn-color1
11+
);
12+
--jp-editor-mirror-lsp-diagnostic-information-decoration-color: var(
13+
--jp-info-color1
14+
);
15+
--jp-editor-mirror-lsp-diagnostic-hint-decoration-color: var(
16+
--jp-success-color1
17+
);
18+
/* hover */
19+
--jp-editor-mirror-lsp-hover-decoration-style: dotted;
20+
--jp-editor-mirror-lsp-hover-decoration-color: var(--jp-brand-color1);
21+
}

‎packages/jupyterlab-lsp/style/variables/cm-themes.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.cm-s-abcdef {
2+
--jp-editor-mirror-lsp-highlight-background-color: rgba(144, 199, 255, 0.2);
3+
}
4+
5+
.cm-s-zenburn {
6+
--jp-editor-mirror-lsp-highlight-background-color: rgba(239, 231, 171, 0.2);
7+
}

‎packages/jupyterlab-lsp/style/variables/jupyterlab-dark.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body[data-jp-theme-light='false'] .cm-s-jupyter {
2+
--jp-editor-mirror-lsp-highlight-background-color: var(--jp-layout-color2);
3+
}

‎packages/jupyterlab-lsp/style/variables/jupyterlab-light.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body[data-jp-theme-light='true'] .cm-s-jupyter {
2+
--jp-editor-mirror-lsp-highlight-background-color: var(--jp-layout-color2);
3+
}

0 commit comments

Comments
 (0)