Have command decorations use same red as scm decorations

[Tyriar]

[Tyriar]

Actually the default is right, it's just really dark by default on Dark+. @misolori we should probably tweak for contrast?

[Tyriar]

Also should we fallback to SCM colors so themes get the defaults if they're already set, or is that weird having terminal success/fail depend on scm added/deleted. It would be nice if we had some core colors for these sorts of common things so we could depend on platform/base instead of editor.

[meganrogge]

Is there some other styling impacting how it looks in the editor vs the terminal? The color looks quite different.

[Tyriar]

This is what I see in Dark+/Insiders:

[meganrogge]

Oh I'm using my custom theme

[miguelsolorio]

The SCM colors are being tweaked as part of #142809 I'd just make sure you are inheriting the color token and it should be updated automatically

[meganrogge]

I think we're statically doing it at the moment - couldn't find where that code is located

[meganrogge]

think I found it

[miguelsolorio]

Those are stored here:

vscode/src/vs/workbench/contrib/scm/browser/dirtydiffDecorator.ts

Lines 851 to 867 in 1770970

	export const editorGutterModifiedBackground = registerColor('editorGutter.modifiedBackground', {
	dark: new Color(new RGBA(12, 125, 157)),
	light: new Color(new RGBA(102, 175, 224)),
	hc: new Color(new RGBA(0, 155, 249))
	}, nls.localize('editorGutterModifiedBackground', "Editor gutter background color for lines that are modified."));
	export const editorGutterAddedBackground = registerColor('editorGutter.addedBackground', {
	dark: new Color(new RGBA(88, 124, 12)),
	light: new Color(new RGBA(129, 184, 139)),
	hc: new Color(new RGBA(51, 171, 78))
	}, nls.localize('editorGutterAddedBackground', "Editor gutter background color for lines that are added."));
	export const editorGutterDeletedBackground = registerColor('editorGutter.deletedBackground', {
	dark: new Color(new RGBA(148, 21, 27)),
	light: new Color(new RGBA(202, 75, 81)),
	hc: new Color(new RGBA(252, 93, 109))
	}, nls.localize('editorGutterDeletedBackground', "Editor gutter background color for lines that are deleted."));

And an example of how it's used in notebooks:

vscode/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts

Lines 3264 to 3274 in 1770970

	const modifiedBackground = theme.getColor(editorGutterModifiedBackground);
	if (modifiedBackground) {
	collector.addRule(`
	.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-cell-modified .cell-focus-indicator {
	background-color: ${modifiedBackground} !important;
	}
	.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.markdown-cell-row.nb-cell-modified {
	background-color: ${modifiedBackground} !important;
	}`);
	}

[meganrogge]

We should also decide if we want to show the "skipped" decoration, which color to use. Currently we use

vscode/src/vs/workbench/contrib/terminal/common/terminalColorRegistry.ts

Lines 40 to 44 in 2ac67c7

	export const TERMINAL_COMMAND_DECORATION_SKIPPED_BACKGROUND_COLOR = registerColor('terminalCommandDecoration.skippedBackground', {
	light: '#00000040',
	dark: '#ffffff40',
	hc: '#ffffff80'
	}, nls.localize('terminalCommandDecoration.skippedBackground', 'The terminal command decoration background color when the command was skipped (undefined exit code).'));

[Tyriar]

@meganrogge oh we still want new terminal theme keys, just to fallback to the gutter colors, like this:

vscode/src/vs/workbench/contrib/terminal/common/terminalColorRegistry.ts

Lines 45 to 49 in 2ac67c7

	export const TERMINAL_BORDER_COLOR = registerColor('terminal.border', {
	dark: PANEL_BORDER,
	light: PANEL_BORDER,
	hc: PANEL_BORDER
	}, nls.localize('terminal.border', 'The color of the border that separates split panes within the terminal. This defaults to panel.border.'));

[Tyriar]

WRT the layer breaker, let's copy the gutter colors directly into the new theme colors instead of referencing them as we want theme authors to have control over what they are. The long term fix here is having a set of base theme colors we can depend upon in common

[Tyriar]

We want the following:

• terminalCommandDecoration.defaultBackground (grey)
• terminalCommandDecoration.successBackground (blue)
• terminalCommandDecoration.errorBackground (red)

[Tyriar]

To verify ensure these theme keys work as expected:

terminalCommandDecoration.defaultBackground (grey)
terminalCommandDecoration.successBackground (blue)
terminalCommandDecoration.errorBackground (red)