diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 593ef241b40..a536f51563d 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -203,8 +203,18 @@ "--vscode-editorHoverWidget-foreground", "--vscode-editorHoverWidget-highlightForeground", "--vscode-editorHoverWidget-statusBarBackground", - "--vscode-editorIndentGuide-activeBackground", - "--vscode-editorIndentGuide-background", + "--vscode-editorIndentGuide-activeBackground1", + "--vscode-editorIndentGuide-activeBackground2", + "--vscode-editorIndentGuide-activeBackground3", + "--vscode-editorIndentGuide-activeBackground4", + "--vscode-editorIndentGuide-activeBackground5", + "--vscode-editorIndentGuide-activeBackground6", + "--vscode-editorIndentGuide-background1", + "--vscode-editorIndentGuide-background2", + "--vscode-editorIndentGuide-background3", + "--vscode-editorIndentGuide-background4", + "--vscode-editorIndentGuide-background5", + "--vscode-editorIndentGuide-background6", "--vscode-editorInfo-background", "--vscode-editorInfo-border", "--vscode-editorInfo-foreground", diff --git a/src/vs/editor/browser/viewParts/indentGuides/indentGuides.css b/src/vs/editor/browser/viewParts/indentGuides/indentGuides.css index fa78807bf71..ed132669757 100644 --- a/src/vs/editor/browser/viewParts/indentGuides/indentGuides.css +++ b/src/vs/editor/browser/viewParts/indentGuides/indentGuides.css @@ -7,11 +7,3 @@ position: absolute; box-sizing: border-box; } - -.monaco-editor .lines-content .core-guide-indent { - box-shadow: 1px 0 0 0 var(--vscode-editorIndentGuide-background) inset; -} - -.monaco-editor .lines-content .core-guide-indent-active { - box-shadow: 1px 0 0 0 var(--vscode-editorIndentGuide-activeBackground, --vscode-editorIndentGuide-background) inset; -} diff --git a/src/vs/editor/browser/viewParts/indentGuides/indentGuides.ts b/src/vs/editor/browser/viewParts/indentGuides/indentGuides.ts index 43caef8a5cd..a93cf75a530 100644 --- a/src/vs/editor/browser/viewParts/indentGuides/indentGuides.ts +++ b/src/vs/editor/browser/viewParts/indentGuides/indentGuides.ts @@ -5,7 +5,7 @@ import 'vs/css!./indentGuides'; import { DynamicViewOverlay } from 'vs/editor/browser/view/dynamicViewOverlay'; -import { editorBracketHighlightingForeground1, editorBracketHighlightingForeground2, editorBracketHighlightingForeground3, editorBracketHighlightingForeground4, editorBracketHighlightingForeground5, editorBracketHighlightingForeground6, editorBracketPairGuideActiveBackground1, editorBracketPairGuideActiveBackground2, editorBracketPairGuideActiveBackground3, editorBracketPairGuideActiveBackground4, editorBracketPairGuideActiveBackground5, editorBracketPairGuideActiveBackground6, editorBracketPairGuideBackground1, editorBracketPairGuideBackground2, editorBracketPairGuideBackground3, editorBracketPairGuideBackground4, editorBracketPairGuideBackground5, editorBracketPairGuideBackground6 } from 'vs/editor/common/core/editorColorRegistry'; +import { editorBracketHighlightingForeground1, editorBracketHighlightingForeground2, editorBracketHighlightingForeground3, editorBracketHighlightingForeground4, editorBracketHighlightingForeground5, editorBracketHighlightingForeground6, editorBracketPairGuideActiveBackground1, editorBracketPairGuideActiveBackground2, editorBracketPairGuideActiveBackground3, editorBracketPairGuideActiveBackground4, editorBracketPairGuideActiveBackground5, editorBracketPairGuideActiveBackground6, editorBracketPairGuideBackground1, editorBracketPairGuideBackground2, editorBracketPairGuideBackground3, editorBracketPairGuideBackground4, editorBracketPairGuideBackground5, editorBracketPairGuideBackground6, editorIndentGuide1, editorIndentGuide2, editorIndentGuide3, editorIndentGuide4, editorIndentGuide5, editorIndentGuide6, editorActiveIndentGuide1, editorActiveIndentGuide2, editorActiveIndentGuide3, editorActiveIndentGuide4, editorActiveIndentGuide5, editorActiveIndentGuide6 } from 'vs/editor/common/core/editorColorRegistry'; import { RenderingContext } from 'vs/editor/browser/view/renderingContext'; import { ViewContext } from 'vs/editor/common/viewModel/viewContext'; import * as viewEvents from 'vs/editor/common/viewEvents'; @@ -224,7 +224,7 @@ export class IndentGuidesOverlay extends DynamicViewOverlay { new IndentGuide( indentGuide, -1, - isActive ? 'core-guide-indent-active' : 'core-guide-indent', + `core-guide-indent lvl-${(indentLvl - 1) % 30}` + (isActive ? ' indent-active' : ''), null, -1, -1, @@ -270,6 +270,14 @@ registerThemingParticipant((theme, collector) => { ]; const colorProvider = new BracketPairGuidesClassNames(); + const indentColors = [ + { indentColor: editorIndentGuide1, indentColorActive: editorActiveIndentGuide1 }, + { indentColor: editorIndentGuide2, indentColorActive: editorActiveIndentGuide2 }, + { indentColor: editorIndentGuide3, indentColorActive: editorActiveIndentGuide3 }, + { indentColor: editorIndentGuide4, indentColorActive: editorActiveIndentGuide4 }, + { indentColor: editorIndentGuide5, indentColorActive: editorActiveIndentGuide5 }, + { indentColor: editorIndentGuide6, indentColorActive: editorActiveIndentGuide6 }, + ]; const colorValues = colors .map(c => { @@ -291,6 +299,25 @@ registerThemingParticipant((theme, collector) => { }) .filter(isDefined); + const indentColorValues = indentColors + .map(c => { + const indentColor = theme.getColor(c.indentColor); + const indentColorActive = theme.getColor(c.indentColorActive); + + const effectiveIndentColor = transparentToUndefined(indentColor); + const effectiveIndentColorActive = transparentToUndefined(indentColorActive); + + if (!effectiveIndentColor || !effectiveIndentColorActive) { + return undefined; + } + + return { + indentColor: effectiveIndentColor, + indentColorActive: effectiveIndentColorActive, + }; + }) + .filter(isDefined); + if (colorValues.length > 0) { for (let level = 0; level < 30; level++) { const colors = colorValues[level % colorValues.length]; @@ -305,4 +332,14 @@ registerThemingParticipant((theme, collector) => { collector.addRule(`.monaco-editor .horizontal-top.${colorProvider.activeClassName} { border-top: 1px solid var(--guide-color-active); }`); collector.addRule(`.monaco-editor .horizontal-bottom.${colorProvider.activeClassName} { border-bottom: 1px solid var(--guide-color-active); }`); } + + if (indentColorValues.length > 0) { + for (let level = 0; level < 30; level++) { + const colors = indentColorValues[level % indentColorValues.length]; + collector.addRule(`.monaco-editor .lines-content .core-guide-indent.lvl-${level} { --indent-color: ${colors.indentColor}; --indent-color-active: ${colors.indentColorActive}; }`); + } + + collector.addRule(`.monaco-editor .lines-content .core-guide-indent { box-shadow: 1px 0 0 0 var(--indent-color) inset; }`); + collector.addRule(`.monaco-editor .lines-content .core-guide-indent.indent-active { box-shadow: 1px 0 0 0 var(--indent-color-active) inset; }`); + } }); diff --git a/src/vs/editor/common/core/editorColorRegistry.ts b/src/vs/editor/common/core/editorColorRegistry.ts index 30e2cdd1dd4..a5c766a9019 100644 --- a/src/vs/editor/common/core/editorColorRegistry.ts +++ b/src/vs/editor/common/core/editorColorRegistry.ts @@ -21,10 +21,22 @@ export const editorSymbolHighlightBorder = registerColor('editor.symbolHighlight export const editorCursorForeground = registerColor('editorCursor.foreground', { dark: '#AEAFAD', light: Color.black, hcDark: Color.white, hcLight: '#0F4A85' }, nls.localize('caret', 'Color of the editor cursor.')); export const editorCursorBackground = registerColor('editorCursor.background', null, nls.localize('editorCursorBackground', 'The background color of the editor cursor. Allows customizing the color of a character overlapped by a block cursor.')); export const editorWhitespaces = registerColor('editorWhitespace.foreground', { dark: '#e3e4e229', light: '#33333333', hcDark: '#e3e4e229', hcLight: '#CCCCCC' }, nls.localize('editorWhitespaces', 'Color of whitespace characters in the editor.')); -export const editorIndentGuides = registerColor('editorIndentGuide.background', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorIndentGuides', 'Color of the editor indentation guides.')); -export const editorActiveIndentGuides = registerColor('editorIndentGuide.activeBackground', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorActiveIndentGuide', 'Color of the active editor indentation guides.')); export const editorLineNumbers = registerColor('editorLineNumber.foreground', { dark: '#858585', light: '#237893', hcDark: Color.white, hcLight: '#292929' }, nls.localize('editorLineNumbers', 'Color of editor line numbers.')); +export const editorIndentGuide1 = registerColor('editorIndentGuide.background1', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorIndentGuides1', 'Color of the editor indentation guides (1).')); +export const editorIndentGuide2 = registerColor('editorIndentGuide.background2', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides2', 'Color of the editor indentation guides (2).')); +export const editorIndentGuide3 = registerColor('editorIndentGuide.background3', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides3', 'Color of the editor indentation guides (3).')); +export const editorIndentGuide4 = registerColor('editorIndentGuide.background4', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides4', 'Color of the editor indentation guides (4).')); +export const editorIndentGuide5 = registerColor('editorIndentGuide.background5', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides5', 'Color of the editor indentation guides (5).')); +export const editorIndentGuide6 = registerColor('editorIndentGuide.background6', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides6', 'Color of the editor indentation guides (6).')); + +export const editorActiveIndentGuide1 = registerColor('editorIndentGuide.activeBackground1', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorActiveIndentGuide1', 'Color of the active editor indentation guides (1).')); +export const editorActiveIndentGuide2 = registerColor('editorIndentGuide.activeBackground2', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide2', 'Color of the active editor indentation guides (2).')); +export const editorActiveIndentGuide3 = registerColor('editorIndentGuide.activeBackground3', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide3', 'Color of the active editor indentation guides (3).')); +export const editorActiveIndentGuide4 = registerColor('editorIndentGuide.activeBackground4', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide4', 'Color of the active editor indentation guides (4).')); +export const editorActiveIndentGuide5 = registerColor('editorIndentGuide.activeBackground5', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide5', 'Color of the active editor indentation guides (5).')); +export const editorActiveIndentGuide6 = registerColor('editorIndentGuide.activeBackground6', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide6', 'Color of the active editor indentation guides (6).')); + const deprecatedEditorActiveLineNumber = registerColor('editorActiveLineNumber.foreground', { dark: '#c6c6c6', light: '#0B216F', hcDark: activeContrastBorder, hcLight: activeContrastBorder }, nls.localize('editorActiveLineNumber', 'Color of editor active line number'), false, nls.localize('deprecatedEditorActiveLineNumber', 'Id is deprecated. Use \'editorLineNumber.activeForeground\' instead.')); export const editorActiveLineNumber = registerColor('editorLineNumber.activeForeground', { dark: deprecatedEditorActiveLineNumber, light: deprecatedEditorActiveLineNumber, hcDark: deprecatedEditorActiveLineNumber, hcLight: deprecatedEditorActiveLineNumber }, nls.localize('editorActiveLineNumber', 'Color of editor active line number')); export const editorDimmedLineNumber = registerColor('editorLineNumber.dimmedForeground', { dark: null, light: null, hcDark: null, hcLight: null }, nls.localize('editorDimmedLineNumber', 'Color of the final editor line when editor.renderFinalNewline is set to dimmed.')); diff --git a/src/vs/editor/standalone/common/themes.ts b/src/vs/editor/standalone/common/themes.ts index e283e315d2c..e5f9b91bf22 100644 --- a/src/vs/editor/standalone/common/themes.ts +++ b/src/vs/editor/standalone/common/themes.ts @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { editorActiveIndentGuides, editorIndentGuides } from 'vs/editor/common/core/editorColorRegistry'; +import { editorActiveIndentGuide1, editorIndentGuide1 } from 'vs/editor/common/core/editorColorRegistry'; import { IStandaloneThemeData } from 'vs/editor/standalone/common/standaloneTheme'; import { editorBackground, editorForeground, editorInactiveSelection, editorSelectionHighlight } from 'vs/platform/theme/common/colorRegistry'; @@ -71,8 +71,8 @@ export const vs: IStandaloneThemeData = { [editorBackground]: '#FFFFFE', [editorForeground]: '#000000', [editorInactiveSelection]: '#E5EBF1', - [editorIndentGuides]: '#D3D3D3', - [editorActiveIndentGuides]: '#939393', + [editorIndentGuide1]: '#D3D3D3', + [editorActiveIndentGuide1]: '#939393', [editorSelectionHighlight]: '#ADD6FF4D' } }; @@ -142,8 +142,8 @@ export const vs_dark: IStandaloneThemeData = { [editorBackground]: '#1E1E1E', [editorForeground]: '#D4D4D4', [editorInactiveSelection]: '#3A3D41', - [editorIndentGuides]: '#404040', - [editorActiveIndentGuides]: '#707070', + [editorIndentGuide1]: '#404040', + [editorActiveIndentGuide1]: '#707070', [editorSelectionHighlight]: '#ADD6FF26' } }; @@ -204,8 +204,8 @@ export const hc_black: IStandaloneThemeData = { colors: { [editorBackground]: '#000000', [editorForeground]: '#FFFFFF', - [editorIndentGuides]: '#FFFFFF', - [editorActiveIndentGuides]: '#FFFFFF', + [editorIndentGuide1]: '#FFFFFF', + [editorActiveIndentGuide1]: '#FFFFFF', } }; /* -------------------------------- End hc-black theme -------------------------------- */ @@ -263,8 +263,8 @@ export const hc_light: IStandaloneThemeData = { colors: { [editorBackground]: '#FFFFFF', [editorForeground]: '#292929', - [editorIndentGuides]: '#292929', - [editorActiveIndentGuides]: '#292929', + [editorIndentGuide1]: '#292929', + [editorActiveIndentGuide1]: '#292929', } }; /* -------------------------------- End hc-light theme -------------------------------- */ diff --git a/src/vs/workbench/services/themes/common/themeCompatibility.ts b/src/vs/workbench/services/themes/common/themeCompatibility.ts index 503d6fa50dd..21c643584f0 100644 --- a/src/vs/workbench/services/themes/common/themeCompatibility.ts +++ b/src/vs/workbench/services/themes/common/themeCompatibility.ts @@ -64,8 +64,8 @@ addSettingMapping('lineHighlight', editorColorRegistry.editorLineHighlight); addSettingMapping('rangeHighlight', editorColorRegistry.editorRangeHighlight); addSettingMapping('caret', editorColorRegistry.editorCursorForeground); addSettingMapping('invisibles', editorColorRegistry.editorWhitespaces); -addSettingMapping('guide', editorColorRegistry.editorIndentGuides); -addSettingMapping('activeGuide', editorColorRegistry.editorActiveIndentGuides); +addSettingMapping('guide', editorColorRegistry.editorIndentGuide1); +addSettingMapping('activeGuide', editorColorRegistry.editorActiveIndentGuide1); const ansiColorMap = ['ansiBlack', 'ansiRed', 'ansiGreen', 'ansiYellow', 'ansiBlue', 'ansiMagenta', 'ansiCyan', 'ansiWhite', 'ansiBrightBlack', 'ansiBrightRed', 'ansiBrightGreen', 'ansiBrightYellow', 'ansiBrightBlue', 'ansiBrightMagenta', 'ansiBrightCyan', 'ansiBrightWhite'