fix: format styling (Announcements.tsx, AutoApproveMenu.tsx). Adding vscStyles.ts (RooCodeInc#1288)

* fix: format styling (Announcements.tsx).  Adding vscStyles.ts

* prettier for unrelated files

* removing some styled components

* comment tweak

* Update mcp-quickstart.md

* update post merge

* VSC prefix

Author: brownrw8

webview-ui/src/components/chat/Announcement.tsx

@@ -2,6 +2,7 @@ import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { memo } from "react"
 import { useTranslation } from "react-i18next"
 import { Trans } from "react-i18next"
+import { getAsVar, VSC_DESCRIPTION_FOREGROUND, VSC_INACTIVE_SELECTION_BACKGROUND } from "../../utils/vscStyles"
 
 interface AnnouncementProps {
 	version: string
@@ -18,7 +19,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 	return (
 		<div
 			style={{
-				backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+				backgroundColor: getAsVar(VSC_INACTIVE_SELECTION_BACKGROUND),
 				borderRadius: "3px",
 				padding: "12px 16px",
 				margin: "5px 15px 5px 15px",
@@ -104,7 +105,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 			<div
 				style={{
 					height: "1px",
-					background: "var(--vscode-foreground)",
+					background: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 					opacity: 0.1,
 					margin: "8px 0",
 				}}

webview-ui/src/components/chat/AutoApproveMenu.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { AutoApprovalSettings } from "../../../../src/shared/AutoApprovalSettings"
 import { vscode } from "../../utils/vscode"
+import { getAsVar, VSC_FOREGROUND, VSC_TITLEBAR_INACTIVE_FOREGROUND, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
 
 interface AutoApproveMenuProps {
 	style?: React.CSSProperties
@@ -128,7 +129,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 				padding: "0 15px",
 				userSelect: "none",
 				borderTop: isExpanded
-					? `0.5px solid color-mix(in srgb, var(--vscode-titleBar-inactiveForeground) 20%, transparent)`
+					? `0.5px solid color-mix(in srgb, ${getAsVar(VSC_TITLEBAR_INACTIVE_FOREGROUND)} 20%, transparent)`
 					: "none",
 				overflowY: "auto",
 				...style,
@@ -186,7 +187,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					}}>
 					<span
 						style={{
-							color: "var(--vscode-foreground)",
+							color: getAsVar(VSC_FOREGROUND),
 							whiteSpace: "nowrap",
 						}}>
 						Auto-approve:
@@ -213,7 +214,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					<div
 						style={{
 							marginBottom: "10px",
-							color: "var(--vscode-descriptionForeground)",
+							color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 							fontSize: "12px",
 						}}>
 						Auto-approve allows Cline to perform the following actions without asking for permission. Please use with
@@ -232,7 +233,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							<div
 								style={{
 									marginLeft: "28px",
-									color: "var(--vscode-descriptionForeground)",
+									color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 									fontSize: "12px",
 								}}>
 								{action.description}
@@ -242,7 +243,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					<div
 						style={{
 							height: "0.5px",
-							background: "var(--vscode-titleBar-inactiveForeground)",
+							background: getAsVar(VSC_TITLEBAR_INACTIVE_FOREGROUND),
 							margin: "15px 0",
 							opacity: 0.2,
 						}}
@@ -254,7 +255,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 							gap: "8px",
 							marginTop: "10px",
 							marginBottom: "8px",
-							color: "var(--vscode-foreground)",
+							color: getAsVar(VSC_FOREGROUND),
 						}}>
 						<span style={{ flexShrink: 1, minWidth: 0 }}>Max Requests:</span>
 						<VSCodeTextField
@@ -280,7 +281,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 					</div>
 					<div
 						style={{
-							color: "var(--vscode-descriptionForeground)",
+							color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 							fontSize: "12px",
 							marginBottom: "10px",
 						}}>
@@ -298,7 +299,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 						<div
 							style={{
 								marginLeft: "28px",
-								color: "var(--vscode-descriptionForeground)",
+								color: getAsVar(VSC_DESCRIPTION_FOREGROUND),
 								fontSize: "12px",
 							}}>
 							Receive system notifications when Cline requires approval to proceed or when a task is completed.
@@ -314,12 +315,12 @@ const CollapsibleSection = styled.div<{ isHovered?: boolean }>`
 	display: flex;
 	align-items: center;
 	gap: 4px;
-	color: ${(props) => (props.isHovered ? "var(--vscode-foreground)" : "var(--vscode-descriptionForeground)")};
+	color: ${(props) => (props.isHovered ? getAsVar(VSC_FOREGROUND) : getAsVar(VSC_DESCRIPTION_FOREGROUND))};
 	flex: 1;
 	min-width: 0;
 
 	&:hover {
-		color: var(--vscode-foreground);
+		color: ${getAsVar(VSC_FOREGROUND)};
 	}
 `
 

webview-ui/src/utils/vscStyles.ts

@@ -0,0 +1,41 @@
+export const VSC_INPUT_BACKGROUND = "--vscode-input-background"
+export const VSC_SIDEBAR_BACKGROUND = "--vscode-sideBar-background"
+export const VSC_FOREGROUND = "--vscode-foreground"
+export const VSC_EDITOR_FOREGROUND = "--vscode-editor-foreground"
+export const VSC_FOREGROUND_MUTED = "--vscode-foreground-muted"
+export const VSC_DESCRIPTION_FOREGROUND = "--vscode-descriptionForeground"
+export const VSC_INPUT_PLACEHOLDER_FOREGROUND = "--vscode-input-placeholderForeground"
+export const VSC_BUTTON_BACKGROUND = "--vscode-button-background"
+export const VSC_BUTTON_FOREGROUND = "--vscode-button-foreground"
+export const VSC_EDITOR_BACKGROUND = "--vscode-editor-background"
+export const VSC_LIST_SELECTION_BACKGROUND = "--vscode-list-activeSelectionBackground"
+export const VSC_FOCUS_BORDER = "--vscode-focus-border"
+export const VSC_LIST_ACTIVE_FOREGROUND = "--vscode-quickInputList-focusForeground"
+export const VSC_QUICK_INPUT_BACKGROUND = "--vscode-quickInput-background"
+export const VSC_INPUT_BORDER = "--vscode-input-border"
+export const VSC_INPUT_BORDER_FOCUS = "--vscode-focusBorder"
+export const VSC_BADGE_BACKGROUND = "--vscode-badge-background"
+export const VSC_BADGE_FOREGROUND = "--vscode-badge-foreground"
+export const VSC_SIDEBAR_BORDER = "--vscode-sideBar-border"
+export const VSC_DIFF_REMOVED_LINE_BACKGROUND = "--vscode-diffEditor-removedLineBackground"
+export const VSC_DIFF_INSERTED_LINE_BACKGROUND = "--vscode-diffEditor-insertedLineBackground"
+export const VSC_INACTIVE_SELECTION_BACKGROUND = "--vscode-editor-inactiveSelectionBackground"
+export const VSC_TITLEBAR_INACTIVE_FOREGROUND = "--vscode-titleBar-inactiveForeground"
+
+export function getAsVar(varName: string): string {
+	return `var(${varName})`
+}
+
+export function hexToRGB(hexColor: string): { r: number; g: number; b: number } {
+	const hex = hexColor.replace(/^#/, "").slice(0, 6)
+	const [r, g, b] = [0, 2, 4].map((offset) => parseInt(hex.slice(offset, offset + 2), 16))
+	return { r, g, b }
+}
+
+export function colorToHex(colorVar: string): string {
+	const value = getComputedStyle(document.documentElement).getPropertyValue(colorVar).trim()
+	if (value.startsWith("#")) return value.slice(0, 7)
+
+	const rgbValues = value.match(/\d+/g)?.slice(0, 3).map(Number) || []
+	return `#${rgbValues.map((x) => x.toString(16).padStart(2, "0")).join("")}`
+}