Skip to content

Commit d9df0ff

Browse files
alexdimaalexdima
authored
Move rules to CSS (microsoft#165169) (microsoft#166708)
1 parent 661d83d commit d9df0ff

File tree

10 files changed

+49
-55
lines changed

10 files changed

+49
-55
lines changed

‎src/vs/editor/browser/controller/textAreaHandler.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,5 @@
3434
.monaco-editor .inputarea.ime-input {
3535
z-index: 10;
3636
caret-color: var(--vscode-editorCursor-foreground);
37+
color: var(--vscode-editor-foreground);
3738
}

‎src/vs/editor/browser/viewParts/lines/viewLines.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,13 @@
6363
width: 100%;
6464
}
6565

66+
.monaco-editor .mtkw {
67+
color: var(--vscode-editorWhitespace-foreground) !important;
68+
}
69+
6670
.monaco-editor .mtkz {
6771
display: inline-block;
72+
color: var(--vscode-editorWhitespace-foreground) !important;
6873
}
6974

7075
/* TODO@tokenization bootstrap fix */

‎src/vs/editor/browser/viewParts/margin/margin.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Microsoft Corporation. All rights reserved.
3+
* Licensed under the MIT License. See License.txt in the project root for license information.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
.monaco-editor .margin {
7+
background-color: var(--vscode-editorGutter-background);
8+
}

‎src/vs/editor/browser/viewParts/margin/margin.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
*--------------------------------------------------------------------------------------------*/
55

6+
import 'vs/css!./margin';
67
import { FastDomNode, createFastDomNode } from 'vs/base/browser/fastDomNode';
78
import { ViewPart } from 'vs/editor/browser/view/viewPart';
89
import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/browser/view/renderingContext';

‎src/vs/editor/browser/widget/media/editor.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,17 @@
2121
position: relative;
2222
overflow: visible;
2323
-webkit-text-size-adjust: 100%;
24+
color: var(--vscode-editor-foreground);
25+
background-color: var(--vscode-editor-background);
26+
}
27+
.monaco-editor-background {
28+
background-color: var(--vscode-editor-background);
29+
}
30+
.monaco-editor .rangeHighlight {
31+
background-color: var(--vscode-editor-rangeHighlightBackground);
32+
}
33+
.monaco-editor .symbolHighlight {
34+
background-color: var(--vscode-editor-symbolHighlightBackground);
2435
}
2536

2637
/* -------------------- Misc -------------------- */

‎src/vs/editor/common/core/editorColorRegistry.ts

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import * as nls from 'vs/nls';
77
import { Color, RGBA } from 'vs/base/common/color';
8-
import { activeContrastBorder, editorBackground, editorForeground, registerColor, editorWarningForeground, editorInfoForeground, editorWarningBorder, editorInfoBorder, contrastBorder, editorFindMatchHighlight } from 'vs/platform/theme/common/colorRegistry';
8+
import { activeContrastBorder, editorBackground, registerColor, editorWarningForeground, editorInfoForeground, editorWarningBorder, editorInfoBorder, contrastBorder, editorFindMatchHighlight } from 'vs/platform/theme/common/colorRegistry';
99
import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
1010
import { isHighContrast } from 'vs/platform/theme/common/theme';
1111

@@ -84,49 +84,19 @@ export const editorUnicodeHighlightBackground = registerColor('editorUnicodeHigh
8484
// contains all color rules that used to defined in editor/browser/widget/editor.css
8585
registerThemingParticipant((theme, collector) => {
8686
const background = theme.getColor(editorBackground);
87-
if (background) {
88-
collector.addRule(`.monaco-editor, .monaco-editor-background { background-color: ${background}; }`);
89-
}
90-
9187
const lineHighlight = theme.getColor(editorLineHighlight);
9288
const imeBackground = (lineHighlight && !lineHighlight.isTransparent() ? lineHighlight : background);
9389
if (imeBackground) {
9490
collector.addRule(`.monaco-editor .inputarea.ime-input { background-color: ${imeBackground}; }`);
9591
}
9692

97-
const foreground = theme.getColor(editorForeground);
98-
if (foreground) {
99-
collector.addRule(`.monaco-editor, .monaco-editor .inputarea.ime-input { color: ${foreground}; }`);
100-
}
101-
102-
const gutter = theme.getColor(editorGutter);
103-
if (gutter) {
104-
collector.addRule(`.monaco-editor .margin { background-color: ${gutter}; }`);
105-
}
106-
107-
const rangeHighlight = theme.getColor(editorRangeHighlight);
108-
if (rangeHighlight) {
109-
collector.addRule(`.monaco-editor .rangeHighlight { background-color: ${rangeHighlight}; }`);
110-
}
111-
11293
const rangeHighlightBorder = theme.getColor(editorRangeHighlightBorder);
11394
if (rangeHighlightBorder) {
11495
collector.addRule(`.monaco-editor .rangeHighlight { border: 1px ${isHighContrast(theme.type) ? 'dotted' : 'solid'} ${rangeHighlightBorder}; }`);
11596
}
11697

117-
const symbolHighlight = theme.getColor(editorSymbolHighlight);
118-
if (symbolHighlight) {
119-
collector.addRule(`.monaco-editor .symbolHighlight { background-color: ${symbolHighlight}; }`);
120-
}
121-
12298
const symbolHighlightBorder = theme.getColor(editorSymbolHighlightBorder);
12399
if (symbolHighlightBorder) {
124100
collector.addRule(`.monaco-editor .symbolHighlight { border: 1px ${isHighContrast(theme.type) ? 'dotted' : 'solid'} ${symbolHighlightBorder}; }`);
125101
}
126-
127-
const invisibles = theme.getColor(editorWhitespaces);
128-
if (invisibles) {
129-
collector.addRule(`.monaco-editor .mtkw { color: ${invisibles} !important; }`);
130-
collector.addRule(`.monaco-editor .mtkz { color: ${invisibles} !important; }`);
131-
}
132102
});

‎src/vs/editor/contrib/wordHighlighter/browser/wordHighlighter.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Microsoft Corporation. All rights reserved.
3+
* Licensed under the MIT License. See License.txt in the project root for license information.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
.monaco-editor .focused .selectionHighlight {
7+
background-color: var(--vscode-editor-selectionHighlightBackground);
8+
}
9+
.monaco-editor .wordHighlight {
10+
background-color: var(--vscode-editor-wordHighlightBackground);
11+
}
12+
.monaco-editor .wordHighlightStrong {
13+
background-color: var(--vscode-editor-wordHighlightStrongBackground);
14+
}

‎src/vs/editor/contrib/wordHighlighter/browser/wordHighlighter.ts

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
*--------------------------------------------------------------------------------------------*/
55

6+
import 'vs/css!./wordHighlighter';
67
import { alert } from 'vs/base/browser/ui/aria/aria';
78
import * as arrays from 'vs/base/common/arrays';
89
import { CancelablePromise, createCancelablePromise, first, timeout } from 'vs/base/common/async';
@@ -33,8 +34,8 @@ import { LanguageFeatureRegistry } from 'vs/editor/common/languageFeatureRegistr
3334
import { ILanguageFeaturesService } from 'vs/editor/common/services/languageFeatures';
3435
import { isHighContrast } from 'vs/platform/theme/common/theme';
3536

36-
const editorWordHighlight = registerColor('editor.wordHighlightBackground', { dark: '#575757B8', light: '#57575740', hcDark: null, hcLight: null }, nls.localize('wordHighlight', 'Background color of a symbol during read-access, like reading a variable. The color must not be opaque so as not to hide underlying decorations.'), true);
37-
const editorWordHighlightStrong = registerColor('editor.wordHighlightStrongBackground', { dark: '#004972B8', light: '#0e639c40', hcDark: null, hcLight: null }, nls.localize('wordHighlightStrong', 'Background color of a symbol during write-access, like writing to a variable. The color must not be opaque so as not to hide underlying decorations.'), true);
37+
registerColor('editor.wordHighlightBackground', { dark: '#575757B8', light: '#57575740', hcDark: null, hcLight: null }, nls.localize('wordHighlight', 'Background color of a symbol during read-access, like reading a variable. The color must not be opaque so as not to hide underlying decorations.'), true);
38+
registerColor('editor.wordHighlightStrongBackground', { dark: '#004972B8', light: '#0e639c40', hcDark: null, hcLight: null }, nls.localize('wordHighlightStrong', 'Background color of a symbol during write-access, like writing to a variable. The color must not be opaque so as not to hide underlying decorations.'), true);
3839
const editorWordHighlightBorder = registerColor('editor.wordHighlightBorder', { light: null, dark: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder }, nls.localize('wordHighlightBorder', 'Border color of a symbol during read-access, like reading a variable.'));
3940
const editorWordHighlightStrongBorder = registerColor('editor.wordHighlightStrongBorder', { light: null, dark: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder }, nls.localize('wordHighlightStrongBorder', 'Border color of a symbol during write-access, like writing to a variable.'));
4041
const overviewRulerWordHighlightForeground = registerColor('editorOverviewRuler.wordHighlightForeground', { dark: '#A0A0A0CC', light: '#A0A0A0CC', hcDark: '#A0A0A0CC', hcLight: '#A0A0A0CC' }, nls.localize('overviewRulerWordHighlightForeground', 'Overview ruler marker color for symbol highlights. The color must not be opaque so as not to hide underlying decorations.'), true);
@@ -661,20 +662,9 @@ registerEditorAction(TriggerWordHighlightAction);
661662
registerThemingParticipant((theme, collector) => {
662663
const selectionHighlight = theme.getColor(editorSelectionHighlight);
663664
if (selectionHighlight) {
664-
collector.addRule(`.monaco-editor .focused .selectionHighlight { background-color: ${selectionHighlight}; }`);
665665
collector.addRule(`.monaco-editor .selectionHighlight { background-color: ${selectionHighlight.transparent(0.5)}; }`);
666666
}
667667

668-
const wordHighlight = theme.getColor(editorWordHighlight);
669-
if (wordHighlight) {
670-
collector.addRule(`.monaco-editor .wordHighlight { background-color: ${wordHighlight}; }`);
671-
}
672-
673-
const wordHighlightStrong = theme.getColor(editorWordHighlightStrong);
674-
if (wordHighlightStrong) {
675-
collector.addRule(`.monaco-editor .wordHighlightStrong { background-color: ${wordHighlightStrong}; }`);
676-
}
677-
678668
const selectionHighlightBorder = theme.getColor(editorSelectionHighlightBorder);
679669
if (selectionHighlightBorder) {
680670
collector.addRule(`.monaco-editor .selectionHighlight { border: 1px ${isHighContrast(theme.type) ? 'dotted' : 'solid'} ${selectionHighlightBorder}; box-sizing: border-box; }`);

‎src/vs/editor/standalone/browser/inspectTokens/inspectTokens.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,14 @@
88
user-select: text;
99
-webkit-user-select: text;
1010
padding: 10px;
11+
color: var(--vscode-editorHoverWidget-foreground);
12+
background-color: var(--vscode-editorHoverWidget-background);
1113
}
1214

13-
.tokens-inspect-separator {
15+
.monaco-editor .tokens-inspect-widget .tokens-inspect-separator {
1416
height: 1px;
1517
border: 0;
18+
background-color: var(--vscode-editorHoverWidget-border);
1619
}
1720

1821
.monaco-editor .tokens-inspect-widget .tm-token {

‎src/vs/editor/standalone/browser/inspectTokens/inspectTokens.ts

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { FontStyle, StandardTokenType, TokenMetadata } from 'vs/editor/common/en
1919
import { NullState, nullTokenize, nullTokenizeEncoded } from 'vs/editor/common/languages/nullTokenize';
2020
import { ILanguageService } from 'vs/editor/common/languages/language';
2121
import { IStandaloneThemeService } from 'vs/editor/standalone/common/standaloneTheme';
22-
import { editorHoverBackground, editorHoverBorder, editorHoverForeground } from 'vs/platform/theme/common/colorRegistry';
22+
import { editorHoverBorder } from 'vs/platform/theme/common/colorRegistry';
2323
import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
2424
import { InspectTokensNLS } from 'vs/editor/common/standaloneStrings';
2525
import { isHighContrast } from 'vs/platform/theme/common/theme';
@@ -337,14 +337,5 @@ registerThemingParticipant((theme, collector) => {
337337
if (border) {
338338
const borderWidth = isHighContrast(theme.type) ? 2 : 1;
339339
collector.addRule(`.monaco-editor .tokens-inspect-widget { border: ${borderWidth}px solid ${border}; }`);
340-
collector.addRule(`.monaco-editor .tokens-inspect-widget .tokens-inspect-separator { background-color: ${border}; }`);
341-
}
342-
const background = theme.getColor(editorHoverBackground);
343-
if (background) {
344-
collector.addRule(`.monaco-editor .tokens-inspect-widget { background-color: ${background}; }`);
345-
}
346-
const foreground = theme.getColor(editorHoverForeground);
347-
if (foreground) {
348-
collector.addRule(`.monaco-editor .tokens-inspect-widget { color: ${foreground}; }`);
349340
}
350341
});

0 commit comments

Comments
 (0)