Merge pull request #196333 from microsoft/ddossett/zestful-roadrunner

Update chat avatar styles

Author: daviddossett

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

@@ -37,6 +37,8 @@
 		"--vscode-charts-purple",
 		"--vscode-charts-red",
 		"--vscode-charts-yellow",
+		"--vscode-chat-avatarBackground",
+		"--vscode-chat-avatarForeground",
 		"--vscode-chat-requestBorder",
 		"--vscode-chat-slashCommandBackground",
 		"--vscode-chat-slashCommandForeground",
@@ -696,8 +698,6 @@
 		"--vscode-tree-indentGuidesStroke",
 		"--vscode-tree-tableColumnsBorder",
 		"--vscode-tree-tableOddRowsBackground",
-		"--vscode-voiceRecording-background",
-		"--vscode-voiceRecording-dimmedBackground",
 		"--vscode-walkThrough-embeddedEditorBackground",
 		"--vscode-walkthrough-stepTitle-foreground",
 		"--vscode-welcomePage-background",
@@ -784,4 +784,4 @@
 		"--z-index-notebook-sticky-scroll",
 		"--zoom-factor"
 	]
-}
+}

src/vs/workbench/contrib/chat/browser/chatListRenderer.ts

@@ -351,7 +351,7 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 			avatarImgIcon.src = FileAccess.uriToBrowserUri(element.avatarIconUri).toString(true);
 			templateData.avatarContainer.replaceChildren(dom.$('.avatar', undefined, avatarImgIcon));
 		} else {
-			const defaultIcon = isRequestVM(element) ? Codicon.account : Codicon.hubot;
+			const defaultIcon = isRequestVM(element) ? Codicon.account : Codicon.copilot;
 			const avatarIcon = dom.$(ThemeIcon.asCSSSelector(defaultIcon));
 			templateData.avatarContainer.replaceChildren(dom.$('.avatar.codicon-avatar', undefined, avatarIcon));
 		}

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

@@ -91,10 +91,11 @@
 	width: 24px;
 	height: 24px;
 	border-radius: 50%;
+	outline: 1px solid var(--vscode-chat-requestBorder)
 }
 
 .interactive-item-container .header .avatar.codicon-avatar {
-	background: var(--vscode-badge-background);
+	background: var(--vscode-chat-avatarBackground);
 }
 
 .interactive-item-container .header .avatar+.avatar {
@@ -108,7 +109,8 @@
 }
 
 .interactive-item-container .header .avatar .codicon {
-	color: var(--vscode-badge-foreground) !important;
+	color: var(--vscode-chat-avatarForeground);
+	font-size: 14px;
 }
 
 .monaco-list-row:not(.focused) .interactive-item-container:not(:hover) .header .monaco-toolbar,

src/vs/workbench/contrib/chat/common/chatColors.ts

@@ -5,11 +5,11 @@
 
 import { Color, RGBA } from 'vs/base/common/color';
 import { localize } from 'vs/nls';
-import { badgeBackground, badgeForeground, registerColor } from 'vs/platform/theme/common/colorRegistry';
+import { badgeBackground, badgeForeground, contrastBorder, foreground, registerColor } from 'vs/platform/theme/common/colorRegistry';
 
 export const chatRequestBorder = registerColor(
 	'chat.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, },
+	{ dark: new Color(new RGBA(255, 255, 255, 0.10)), light: new Color(new RGBA(0, 0, 0, 0.10)), hcDark: contrastBorder, hcLight: contrastBorder, },
 	localize('chat.requestBorder', 'The border color of a chat request.')
 );
 
@@ -24,3 +24,15 @@ export const chatSlashCommandForeground = registerColor(
 	{ dark: badgeForeground, light: badgeForeground, hcDark: Color.black, hcLight: badgeForeground },
 	localize('chat.slashCommandForeground', 'The foreground color of a chat slash command.')
 );
+
+export const chatAvatarBackground = registerColor(
+	'chat.avatarBackground',
+	{ dark: '#1f1f1f', light: '#f2f2f2', hcDark: Color.black, hcLight: Color.white, },
+	localize('chat.avatarBackground', 'The background color of a chat avatar.')
+);
+
+export const chatAvatarForeground = registerColor(
+	'chat.avatarForeground',
+	{ dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground, },
+	localize('chat.avatarForeground', 'The foreground color of a chat avatar.')
+);