Reverse background colors on interactive session (microsoft#178165)

* Reverse background colors on interactive session

* Only apply borders to requests

Author: daviddossett

build/lib/stylelint/vscode-known-variables.json

@@ -304,9 +304,8 @@
 		"--vscode-inputValidation-warningBackground",
 		"--vscode-inputValidation-warningBorder",
 		"--vscode-inputValidation-warningForeground",
-		"--vscode-interactive-responseActiveBackground",
-		"--vscode-interactive-responseBackground",
-		"--vscode-interactive-responseBorder",
+		"--vscode-interactive-requestBackground",
+		"--vscode-interactive-requestBorder",
 		"--vscode-interactiveEditor-border",
 		"--vscode-interactiveEditor-shadow",
 		"--vscode-interactiveEditorInput-background",
@@ -729,4 +728,4 @@
 		"--z-index-run-button-container",
 		"--zoom-factor"
 	]
-}
+}

src/vs/workbench/contrib/interactiveSession/browser/media/interactiveSession.css

@@ -3,10 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.interactive-list .monaco-list-row:not(:first-of-type) .interactive-item-container {
-	border-top: 1px solid var(--vscode-interactive-responseBorder);
-}
-
 .interactive-list .monaco-list-row .monaco-tl-twistie {
 	/* Hide twisties */
 	display: none !important;
@@ -96,7 +92,7 @@
 .interactive-list .interactive-item-container .value table,
 .interactive-list .interactive-item-container .value table td,
 .interactive-list .interactive-item-container .value table th {
-	border: 1px solid var(--vscode-interactive-responseBorder);
+	border: 1px solid var(--vscode-interactive-requestBorder);
 	border-collapse: collapse;
 	padding: 4px 6px;
 }
@@ -114,9 +110,10 @@
 	overflow: hidden;
 }
 
-.interactive-list .monaco-list-row .interactive-response,
-.interactive-list .monaco-list-row .interactive-welcome {
-	background-color: var(--vscode-interactive-responseBackground);
+.interactive-list .monaco-list-row .interactive-request {
+	background-color: var(--vscode-interactive-requestBackground);
+	border-bottom: 1px solid var(--vscode-interactive-requestBorder);
+	border-top: 1px solid var(--vscode-interactive-requestBorder);
 }
 
 .interactive-list .monaco-list-row .value {
@@ -218,7 +215,7 @@
 	right: 10px;
 	height: 26px;
 	background-color: var(--vscode-interactive-result-editor-background-color);
-	border: 1px solid var(--vscode-interactive-responseBorder);
+	border: 1px solid var(--vscode-interactive-requestBorder);
 	z-index: 100;
 }
 
@@ -285,7 +282,7 @@
 	padding: 12px 0px;
 	display: flex;
 	flex-direction: column;
-	border-top: solid 1px var(--vscode-interactive-responseBorder);
+	border-top: solid 1px var(--vscode-interactive-requestBorder);
 }
 
 .interactive-session .interactive-session-followups {

src/vs/workbench/contrib/interactiveSession/common/interactiveSessionColors.ts

@@ -8,20 +8,14 @@ import { localize } from 'vs/nls';
 import { registerColor } from 'vs/platform/theme/common/colorRegistry';
 
 
-export const interactiveResponseBackground = registerColor(
-	'interactive.responseBackground',
+export const interactiveRequestBackground = registerColor(
+	'interactive.requestBackground',
 	{ dark: new Color(new RGBA(255, 255, 255, 0.03)), light: new Color(new RGBA(0, 0, 0, 0.03)), hcDark: null, hcLight: null, },
-	localize('interactive.responseBackground', 'The resting background color of an interactive response.')
+	localize('interactive.requestBackground', 'The background color of an interactive request.')
 );
 
-export const interactiveResponseActiveBackground = registerColor(
-	'interactive.responseActiveBackground',
+export const interactiveRequestBorder = registerColor(
+	'interactive.requestBorder',
 	{ dark: new Color(new RGBA(255, 255, 255, 0.10)), light: new Color(new RGBA(0, 0, 0, 0.10)), hcDark: null, hcLight: null, },
-	localize('interactive.responseActiveBackground', 'The active background color of an interactive response. Used when the response shows a fade out animation on load.')
-);
-
-export const interactiveResponseBorder = registerColor(
-	'interactive.responseBorder',
-	{ dark: new Color(new RGBA(255, 255, 255, 0.10)), light: new Color(new RGBA(0, 0, 0, 0.10)), hcDark: null, hcLight: null, },
-	localize('interactive.responseBorder', 'The border color of an interactive response.')
+	localize('interactive.requestBorder', 'The border color of an interactive request.')
 );