Chat code block pill token updates (#250531)

* update colors for icon labels  to meet accessibility color contrast requirements

* - update colors for added and removed labels to pass color contrast requirements
- added the used tokens to vscode-known-variables

* fixing margin-left

* update editor gutter colors for added and deleted resources, removed the previously added gitDecoration tokens from known variables

* update editor gutter colors for added and deleted lines in dark_modern and updated the fallback colors for editorGutterDeletedBackground

* undoing changes to editorGutterAddedBackground and editorGutterDeletedBackground

* add foreground colors for added and deleted lines in chat code blocks in chatColors.ts

* add chat foreground colors for added and deleted lines in vscode-known-variables.json

* rename chat color variables for added and removed lines in chat code block pill

---------

Co-authored-by: Justin Chen <54879025+justschen@users.noreply.github.com>

Author: kkbrooks

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

@@ -59,6 +59,8 @@
 		"--vscode-chat-requestCodeBorder",
 		"--vscode-chat-slashCommandBackground",
 		"--vscode-chat-slashCommandForeground",
+		"--vscode-chat-linesAddedForeground",
+		"--vscode-chat-linesRemovedForeground",
 		"--vscode-checkbox-background",
 		"--vscode-checkbox-border",
 		"--vscode-checkbox-disabled-background",
@@ -957,4 +959,4 @@
 		"--animation-opacity",
 		"--chat-setup-dialog-glow-angle"
 	]
-}
+}

src/vs/base/browser/ui/iconLabel/iconlabel.css

@@ -60,12 +60,12 @@
 }
 
 .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
-	opacity: .7;
+	color: var(--vscode-peekViewTitleDescription-foreground);
 	white-space: pre;
 }
 
 .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
-	opacity: .7;
+	color: var(--vscode-peekViewTitleDescription-foreground);
 	margin-left: 0.5em;
 	font-size: 0.9em;
 	white-space: pre; /* enable to show labels that include multiple whitespaces */

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

@@ -58,11 +58,11 @@ span.label-detail {
 span.label-added {
 	font-weight: bold;
 	padding-left: 4px;
-	color: var(--vscode-editorGutter-addedBackground);
+	color: var(--vscode-chat-linesAddedForeground);
 }
 
 span.label-removed {
 	font-weight: bold;
 	padding-left: 4px;
-	color: var(--vscode-editorGutter-deletedBackground);
+	color: var(--vscode-chat-linesRemovedForeground);
 }

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

@@ -57,3 +57,13 @@ export const chatEditedFileForeground = registerColor(
 export const chatRequestCodeBorder = registerColor('chat.requestCodeBorder', { dark: '#004972B8', light: '#0e639c40', hcDark: null, hcLight: null }, localize('chat.requestCodeBorder', 'Border color of code blocks within the chat request bubble.'), true);
 
 export const chatRequestBubbleBackground = registerColor('chat.requestBubbleBackground', { light: transparent(editorSelectionBackground, 0.3), dark: transparent(editorSelectionBackground, 0.3), hcDark: null, hcLight: null }, localize('chat.requestBubbleBackground', "Background color of the chat request bubble."), true);
+
+export const chatLinesAddedForeground = registerColor(
+	'chat.linesAddedForeground',
+	{ dark: '#54B054', light: '#107C10', hcDark: '#54B054', hcLight: '#107C10' },
+	localize('chat.linesAddedForeground', 'Foreground color of lines added in chat code block pill.'), true);
+
+export const chatLinesRemovedForeground = registerColor(
+	'chat.linesRemovedForeground',
+	{ dark: '#FC6A6A', light: '#BC2F32', hcDark: '#F48771', hcLight: '#B5200D' },
+	localize('chat.linesRemovedForeground', 'Foreground color of lines removed in chat code block pill.'), true);