Add selectionBackground defaults

[roblourens]

The selectionBackground color token controls the background color of text selection outside of the editor. So this affects text in native input elements like search, selecting text in the debug console, settings editor, other places. If one isn't defined, it comes from the OS and is different between macOS and windows. Maybe the OS picks different colors in some scenarios, like for different windows themes.

e.g. in Dark+

MacOS

Windows

I think that adding defaults for this token would be a good idea just so it looks consistent. It's also an issue for editor instances pretending to be input boxes - the settings and extensions input boxes that use the suggest widget. If selectionBackground isn't configured, they don't know the native selection color and fall back on the editor selection background which doesn't always look good in that context, so setting a default selectionBackground will make those input consistent with the native inputs. But maybe people like the native text selection look?

@misolori
@Tyriar
?

[miguelsolorio]

I'd be curious to play with this to get a feel for it. Do you have any colors in mind? I could see us using
#007acc:

[roblourens]

I figure we either pick the windows or mac color and call it the default.

One oddity of setting selectionBackground is that the way we apply this to the text selection with the ::selection selector, it seems to always have some slight transparency.

[Tyriar]

👍 for as consistent as we can get it across all the text fields.

It's also different in Dark+ in the setting search input box, that one isn't picking up the color I set in my theme 😕

[roblourens]

It should be in the latest insiders. The color will be slightly different due to the opacity issue but should be basically the same.

[roblourens]

I don't know that it's a big deal, but I'll pass it off to you @misolori to decide

[panayot-cankov]

Yeah, it somewhat dup of mine issue, I probably didn't find this one as I was searching for selection.foreground. So if selection.background is getting set always and will have a default, can we do selection.foreground as well?

• Add selection.foreground and let WebViews style textareas like those in settings and the search panel #131696

[panayot-cankov]

Is this "up for grabs" or something? It is in the backlog since Dec 5, 2019.

[panayot-cankov]

Hey, about the opacity - there is some sort of workaround that seems to work in chromium, to increase the opacity to a pretty close to 1 number, but not exactly 1, and 0.999 doesn't work either. This worked for my WebView input:

input::selection {
  background: var(--vscode-selection-background, rgba(12, 105, 216, 0.998));
  color: var(--vscode-selection-foreground, rgba(255, 255, 255, 1));
}

Mind the selection.foreground is not implemented. But I get the background color I set.

[panayot-cankov]

And if you are ok with 0.8 for selection opacity, something like this may be the default:

input::selection {
  background: var(--vscode-selection-background, rgba(0, 118, 255, 0.8));
  color: var(--vscode-selection-foreground, rgba(255, 255, 255, 1));
}

[miguelsolorio]

Taking a look at this one more time, and I've been playing around different colors (tried windows/mac defaults) and I think it'll be best to pick a new color that will be the standard. I also made sure that these passed the color contrast ratio, which the native defaults did not 😄

Blue accent

This fits in with our current accent color (status bar, links, focus) but is also overused and can be similar to our search input options

Faded foreground

This takes our current foreground color and applies an opacity to it and is more neutral

I also removed the opacity logic that was causing differences in the settings input, that was from here:

vscode/src/vs/workbench/contrib/codeEditor/browser/suggestEnabledInput/suggestEnabledInput.ts

Lines 422 to 432 in 3772b59

	let selectionColor = theme.getColor(selectionBackground);
	if (selectionColor) {
	selectionColor = selectionColor.transparent(0.4);
	} else {
	selectionColor = theme.getColor(editorSelectionBackground);
	}
	if (selectionColor) {
	collector.addRule(`.suggest-input-container .monaco-editor .focused .selected-text { background-color: ${selectionColor}; }`);
	}