Extract merge-conflict colors as workbench colors (#27299)

extensions/merge-conflict/src/mergeDecorator.ts

@@ -13,9 +13,6 @@ export default class MergeDectorator implements vscode.Disposable {
 
 	private decorationUsesWholeLine: boolean = true; // Useful for debugging, set to false to see exact match ranges
 
-	// TODO: Move to config?
-	private currentColorRgb = `32,200,94`;
-	private incomingColorRgb = `24,134,255`;
 	private config: interfaces.IExtensionConfiguration;
 	private tracker: interfaces.IDocumentMergeConflictTracker;
 
@@ -69,21 +66,19 @@ export default class MergeDectorator implements vscode.Disposable {
 		// Create decorators
 		if (config.enableDecorations || config.enableEditorOverview) {
 			this.decorations['current.content'] = vscode.window.createTextEditorDecorationType(
-				this.generateBlockRenderOptions(this.currentColorRgb, config)
+				this.generateBlockRenderOptions('merge.currentContentBackground', 'overviewRuler.currentContentForeground', config)
 			);
 
 			this.decorations['incoming.content'] = vscode.window.createTextEditorDecorationType(
-				this.generateBlockRenderOptions(this.incomingColorRgb, config)
+				this.generateBlockRenderOptions('merge.incomingContentBackground', 'overviewRuler.incomingContentForeground', config)
 			);
 		}
 
 		if (config.enableDecorations) {
 			this.decorations['current.header'] = vscode.window.createTextEditorDecorationType({
-				// backgroundColor: 'rgba(255, 0, 0, 0.01)',
-				// border: '2px solid red',
 				isWholeLine: this.decorationUsesWholeLine,
-				backgroundColor: `rgba(${this.currentColorRgb}, 1.0)`,
-				color: 'white',
+				backgroundColor: new vscode.ThemeColor('merge.currentHeaderBackground'),
+				color: new vscode.ThemeColor('editor.foreground'),
 				after: {
 					contentText: ' ' + localize('currentChange', '(Current change)'),
 					color: 'rgba(0, 0, 0, 0.7)'
@@ -91,14 +86,13 @@ export default class MergeDectorator implements vscode.Disposable {
 			});
 
 			this.decorations['splitter'] = vscode.window.createTextEditorDecorationType({
-				backgroundColor: 'rgba(0, 0, 0, 0.25)',
-				color: 'white',
+				color: new vscode.ThemeColor('editor.foreground'),
 				isWholeLine: this.decorationUsesWholeLine,
 			});
 
 			this.decorations['incoming.header'] = vscode.window.createTextEditorDecorationType({
-				backgroundColor: `rgba(${this.incomingColorRgb}, 1.0)`,
-				color: 'white',
+				backgroundColor: new vscode.ThemeColor('merge.incomingHeaderBackground'),
+				color: new vscode.ThemeColor('editor.foreground'),
 				isWholeLine: this.decorationUsesWholeLine,
 				after: {
 					contentText: ' ' + localize('incomingChange', '(Incoming change)'),
@@ -118,17 +112,17 @@ export default class MergeDectorator implements vscode.Disposable {
 		this.decorations = {};
 	}
 
-	private generateBlockRenderOptions(color: string, config: interfaces.IExtensionConfiguration): vscode.DecorationRenderOptions {
+	private generateBlockRenderOptions(backgroundColor: string, overviewRulerColor: string, config: interfaces.IExtensionConfiguration): vscode.DecorationRenderOptions {
 
-		let renderOptions: any = {};
+		let renderOptions: vscode.DecorationRenderOptions = {};
 
 		if (config.enableDecorations) {
-			renderOptions.backgroundColor = `rgba(${color}, 0.2)`;
+			renderOptions.backgroundColor = new vscode.ThemeColor(backgroundColor);
 			renderOptions.isWholeLine = this.decorationUsesWholeLine;
 		}
 
 		if (config.enableEditorOverview) {
-			renderOptions.overviewRulerColor = `rgba(${color}, 0.5)`;
+			renderOptions.overviewRulerColor = new vscode.ThemeColor(overviewRulerColor);
 			renderOptions.overviewRulerLane = vscode.OverviewRulerLane.Full;
 		}
 

src/vs/platform/theme/common/colorRegistry.ts

@@ -254,6 +254,24 @@ export const diffRemoved = registerColor('diffEditor.removedTextBackground', { d
 export const diffInsertedOutline = registerColor('diffEditor.insertedTextBorder', { dark: null, light: null, hc: '#33ff2eff' }, nls.localize('diffEditorInsertedOutline', 'Outline color for the text that got inserted.'));
 export const diffRemovedOutline = registerColor('diffEditor.removedTextBorder', { dark: null, light: null, hc: '#FF008F' }, nls.localize('diffEditorRemovedOutline', 'Outline color for text that got removed.'));
 
+/**
+ * Merge-conflict colors
+ */
+
+const headerTransparency = 1;
+const currentBaseColor = Color.fromHex('#20C85E').transparent(headerTransparency);
+const incomingBaseColor = Color.fromHex('#1886FF').transparent(headerTransparency);
+const contentTransparency = 0.2;
+const rulerTransparency = 0.5;
+
+export const mergeCurrentHeaderBackground = registerColor('merge.currentHeaderBackground', { dark: currentBaseColor, light: currentBaseColor, hc: currentBaseColor }, nls.localize('mergeCurrentHeaderBackground', 'Current header background in inline merge-conflict.'));
+export const mergeCurrentContentBackground = registerColor('merge.currentContentBackground', { dark: transparent(mergeCurrentHeaderBackground, contentTransparency), light: transparent(mergeCurrentHeaderBackground, contentTransparency), hc: transparent(mergeCurrentHeaderBackground, contentTransparency) }, nls.localize('mergeCurrentContentBackground', 'Current content background in inline merge-conflict.'));
+export const mergeIncomingHeaderBackground = registerColor('merge.incomingHeaderBackground', { dark: incomingBaseColor, light: incomingBaseColor, hc: incomingBaseColor }, nls.localize('mergeIncomingHeaderBackground', 'Incoming header background in inline merge-conflict.'));
+export const mergeIncomingContentBackground = registerColor('merge.incomingContentBackground', { dark: transparent(mergeIncomingHeaderBackground, contentTransparency), light: transparent(mergeIncomingHeaderBackground, contentTransparency), hc: transparent(mergeIncomingHeaderBackground, contentTransparency) }, nls.localize('mergeIncomingContentBackground', 'Incoming content background in inline merge-conflict.'));
+
+export const overviewRulerCurrentContentForeground = registerColor('overviewRuler.currentContentForeground', { dark: transparent(mergeCurrentHeaderBackground, rulerTransparency), light: transparent(mergeCurrentHeaderBackground, rulerTransparency), hc: transparent(mergeCurrentHeaderBackground, rulerTransparency) }, nls.localize('overviewRulerCurrentContentForeground', 'Current overview ruler foreground for inline merge-conflict.'));
+export const overviewRulerIncomingContentForeground = registerColor('overviewRuler.incomingContentForeground', { dark: transparent(mergeIncomingHeaderBackground, rulerTransparency), light: transparent(mergeIncomingHeaderBackground, rulerTransparency), hc: transparent(mergeIncomingHeaderBackground, rulerTransparency) }, nls.localize('overviewRulerIncomingContentForeground', 'Incoming overview ruler foreground for inline merge-conflict.'));
+
 // ----- color functions
 
 export function darken(colorValue: ColorValue, factor: number): ColorFunction {