Modern UI: Update surface border color to use opaque defaults and add corresponding tests (#331177)

Update surface border color to use opaque defaults and add corresponding tests

Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com>

Author: mrleemurray

src/vs/workbench/common/theme.ts

@@ -676,8 +676,8 @@ export const SURFACE_BACKGROUND = registerColor('surface.background', {
 export const SURFACE_FOREGROUND = registerColor('surface.foreground', SIDE_BAR_FOREGROUND, localize('surfaceForeground', "Foreground color of framed container surfaces (\"cards\"), such as the floating workbench panels in the modern layout."));
 
 export const SURFACE_BORDER = registerColor('surface.border', {
-	dark: transparent(foreground, 0.1),
-	light: transparent(foreground, 0.1),
+	dark: opaque(transparent(foreground, 0.1), SURFACE_BACKGROUND),
+	light: opaque(transparent(foreground, 0.1), SURFACE_BACKGROUND),
 	hcDark: contrastBorder,
 	hcLight: contrastBorder
 }, localize('surfaceBorder', "Border color of framed container surfaces (\"cards\"), such as the floating workbench panels in the modern layout."));

src/vs/workbench/contrib/styleOverrides/test/browser/styleOverrides.contribution.test.ts

@@ -425,6 +425,31 @@ suite('StyleOverridesContribution', () => {
 		});
 	});
 
+	test('uses opaque surface border defaults', () => {
+		const darkTheme = ColorThemeData.createUnloadedTheme('vs-dark');
+		const lightTheme = ColorThemeData.createUnloadedTheme('vs');
+		const darkSurfaceBorder = darkTheme.getColor(SURFACE_BORDER);
+		const darkEditorBorder = darkTheme.getColor(EDITOR_BORDER);
+		const lightSurfaceBorder = lightTheme.getColor(SURFACE_BORDER);
+		const lightEditorBorder = lightTheme.getColor(EDITOR_BORDER);
+
+		assert.deepStrictEqual({
+			darkSurfaceBorderIsOpaque: darkSurfaceBorder?.isOpaque(),
+			darkEditorBorderIsOpaque: darkEditorBorder?.isOpaque(),
+			darkEditorBorderMatchesSurface: darkEditorBorder?.equals(darkSurfaceBorder ?? null),
+			lightSurfaceBorderIsOpaque: lightSurfaceBorder?.isOpaque(),
+			lightEditorBorderIsOpaque: lightEditorBorder?.isOpaque(),
+			lightEditorBorderMatchesSurface: lightEditorBorder?.equals(lightSurfaceBorder ?? null),
+		}, {
+			darkSurfaceBorderIsOpaque: true,
+			darkEditorBorderIsOpaque: true,
+			darkEditorBorderMatchesSurface: true,
+			lightSurfaceBorderIsOpaque: true,
+			lightEditorBorderIsOpaque: true,
+			lightEditorBorderMatchesSurface: true,
+		});
+	});
+
 	test('hides collapsed primary side bar grips without hiding constrained auxiliary sash grips', () => {
 		const root = document.createElement('div');
 		root.className = 'monaco-workbench style-override nosidebar nopanel';