npx @tailwindcss/upgrade

≈ tailwindcss v4.1.14

│ ↳ Upgrading from Tailwind CSS `v4.1.14`

│ Searching for CSS files in the current directory and its subdirectories…

│ Migrating stylesheets…

│ ↳ Migrated stylesheet: `./webview-ui/src/index.css`

│ Updating dependencies…

│ ↳ Updated package: `tailwindcss`

│ ↳ Updated package: `@tailwindcss/vite`

│ Migrating templates…

│ ↳ Migrated templates for: `./webview-ui/src/index.css`

│ Verify the changes and commit them to your repository.

.clinerules/workflows/extension-release.md

@@ -122,9 +122,9 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 					title="Previous Updates:"
 					classNames={{
 						trigger: "bg-transparent border-0 pl-0 pb-0 w-fit",
-						title: "font-bold text-[var(--vscode-foreground)]",
+						title: "font-bold text-(--vscode-foreground)",
 						indicator:
-							"text-[var(--vscode-foreground)] mb-0.5 -rotate-180 data-[open=true]:-rotate-90 rtl:rotate-0 rtl:data-[open=true]:-rotate-90",
+							"text-(--vscode-foreground) mb-0.5 -rotate-180 data-[open=true]:-rotate-90 rtl:rotate-0 rtl:data-[open=true]:-rotate-90",
 					}}>
 					<ul style={ulStyle}>
 						<li>

package.json

@@ -435,6 +435,7 @@
 		"@sap-ai-sdk/orchestration": "^1.17.0",
 		"@sentry/browser": "^9.12.0",
 		"@streamparser/json": "^0.0.22",
+		"@tailwindcss/vite": "^4.1.14",
 		"@types/uuid": "^10.0.0",
 		"@vscode/codicons": "^0.0.36",
 		"archiver": "^7.0.1",
@@ -479,6 +480,7 @@
 		"serialize-error": "^11.0.3",
 		"simple-git": "^3.27.0",
 		"strip-ansi": "^7.1.2",
+		"tailwindcss": "^4.1.14",
 		"tree-sitter-wasms": "^0.1.11",
 		"ts-morph": "^25.0.1",
 		"turndown": "^7.2.0",

webview-ui/src/components/account/AccountView.tsx

@@ -48,7 +48,7 @@ const AccountView = ({ onDone, clineUser, organizations, activeOrganization }: A
 				</h3>
 				<VSCodeButton onClick={onDone}>Done</VSCodeButton>
 			</div>
-			<div className="flex-grow overflow-hidden pr-[8px] flex flex-col">
+			<div className="grow overflow-hidden pr-[8px] flex flex-col">
 				<div className="h-full mb-1.5">
 					{clineUser?.uid ? (
 						<ClineAccountView
@@ -310,17 +310,15 @@ export const ClineAccountView = ({ clineUser, userOrganizations, activeOrganizat
 						{/* {user.photoUrl ? (
 								<img src={user.photoUrl} alt="Profile" className="size-16 rounded-full mr-4" />
 							) : ( */}
-						<div className="size-16 rounded-full bg-[var(--vscode-button-background)] flex items-center justify-center text-2xl text-[var(--vscode-button-foreground)] mr-4">
+						<div className="size-16 rounded-full bg-(--vscode-button-background) flex items-center justify-center text-2xl text-(--vscode-button-foreground) mr-4">
 							{displayName?.[0] || email?.[0] || "?"}
 						</div>
 						{/* )} */}
 
 						<div className="flex flex-col">
-							{displayName && (
-								<h2 className="text-[var(--vscode-foreground)] m-0 text-lg font-medium">{displayName}</h2>
-							)}
+							{displayName && <h2 className="text-(--vscode-foreground) m-0 text-lg font-medium">{displayName}</h2>}
 
-							{email && <div className="text-sm text-[var(--vscode-descriptionForeground)]">{email}</div>}
+							{email && <div className="text-sm text-(--vscode-descriptionForeground)">{email}</div>}
 
 							<div className="flex gap-2 items-center mt-1">
 								{isLockedByRemoteConfig ? (
@@ -389,7 +387,7 @@ export const ClineAccountView = ({ clineUser, userOrganizations, activeOrganizat
 
 				<VSCodeDivider className="mt-6 mb-3 w-full" />
 
-				<div className="flex-grow flex flex-col min-h-0 pb-[0px]">
+				<div className="grow flex flex-col min-h-0 pb-[0px]">
 					<CreditsHistoryTable
 						isLoading={isLoading}
 						paymentsData={paymentsData}

webview-ui/src/components/account/AccountWelcomeView.tsx

@@ -19,7 +19,7 @@ export const AccountWelcomeView = () => {
 				Sign up with Cline
 			</VSCodeButton>
 
-			<p className="text-[var(--vscode-descriptionForeground)] text-xs text-center m-0">
+			<p className="text-(--vscode-descriptionForeground) text-xs text-center m-0">
 				By continuing, you agree to the <VSCodeLink href="https://cline.bot/tos">Terms of Service</VSCodeLink> and{" "}
 				<VSCodeLink href="https://cline.bot/privacy">Privacy Policy.</VSCodeLink>
 			</p>

webview-ui/src/components/account/CreditBalance.tsx

@@ -15,11 +15,9 @@ export const CreditBalance = ({ balance, fetchCreditBalance, creditUrl, lastFetc
 		<div
 			className="w-full flex flex-col items-center"
 			title={`Last updated: ${new Date(lastFetchTime).toLocaleTimeString()}`}>
-			<div className="text-sm text-[var(--vscode-descriptionForeground)] mb-3 font-azeret-mono font-light">
-				CURRENT BALANCE
-			</div>
+			<div className="text-sm text-(--vscode-descriptionForeground) mb-3 font-azeret-mono font-light">CURRENT BALANCE</div>
 
-			<div className="text-4xl font-bold text-[var(--vscode-foreground)] mb-6 flex items-center gap-2">
+			<div className="text-4xl font-bold text-(--vscode-foreground) mb-6 flex items-center gap-2">
 				{balance === null ? <span>----</span> : <StyledCreditDisplay balance={balance} />}
 				<VSCodeButton
 					appearance="icon"

webview-ui/src/components/account/CreditsHistoryTable.tsx

@@ -15,9 +15,9 @@ const CreditsHistoryTable = ({ isLoading, usageData, paymentsData, showPayments
 	const [activeTab, setActiveTab] = useState<"usage" | "payments">("usage")
 
 	return (
-		<div className="flex flex-col flex-grow h-full">
+		<div className="flex flex-col grow h-full">
 			{/* Tabs container */}
-			<div className="flex border-b border-[var(--vscode-panel-border)]">
+			<div className="flex border-b border-(--vscode-panel-border)">
 				<TabButton isActive={activeTab === "usage"} onClick={() => setActiveTab("usage")}>
 					USAGE HISTORY
 				</TabButton>
@@ -29,10 +29,10 @@ const CreditsHistoryTable = ({ isLoading, usageData, paymentsData, showPayments
 			</div>
 
 			{/* Content container */}
-			<div className="mt-[15px] mb-[0px] rounded-md overflow-auto flex-grow">
+			<div className="mt-[15px] mb-[0px] rounded-md overflow-auto grow">
 				{isLoading ? (
 					<div className="flex justify-center items-center p-4">
-						<div className="text-[var(--vscode-descriptionForeground)]">Loading...</div>
+						<div className="text-(--vscode-descriptionForeground)">Loading...</div>
 					</div>
 				) : (
 					<>
@@ -67,7 +67,7 @@ const CreditsHistoryTable = ({ isLoading, usageData, paymentsData, showPayments
 								</VSCodeDataGrid>
 							) : (
 								<div className="flex justify-center items-center p-4">
-									<div className="text-[var(--vscode-descriptionForeground)]">No usage history</div>
+									<div className="text-(--vscode-descriptionForeground)">No usage history</div>
 								</div>
 							))}
 
@@ -97,7 +97,7 @@ const CreditsHistoryTable = ({ isLoading, usageData, paymentsData, showPayments
 								</VSCodeDataGrid>
 							) : (
 								<div className="flex justify-center items-center p-4">
-									<div className="text-[var(--vscode-descriptionForeground)]">No payment history</div>
+									<div className="text-(--vscode-descriptionForeground)">No payment history</div>
 								</div>
 							))}
 					</>

webview-ui/src/components/account/StyledCreditDisplay.tsx

@@ -54,7 +54,7 @@ export const StyledCreditDisplay = ({ balance }: { balance: number }) => {
 	return (
 		<span className="font-azeret-mono font-light tabular-nums">
 			{wholePart}.{firstTwoDecimals}
-			<span className="text-[var(--vscode-descriptionForeground)]">{lastTwoDecimals}</span>
+			<span className="text-(--vscode-descriptionForeground)">{lastTwoDecimals}</span>
 		</span>
 	)
 }

webview-ui/src/components/browser/BrowserSettingsMenu.tsx

@@ -163,7 +163,7 @@ export const BrowserSettingsMenu = () => {
 			{showInfoPopover && (
 				// InfoPopover - Dropdown container with connection details
 				<div
-					className="absolute top-[30px] right-0 z-[100] w-[60dvw] max-w-[250px] rounded p-2.5 shadow-lg"
+					className="absolute top-[30px] right-0 z-100 w-[60dvw] max-w-[250px] rounded p-2.5 shadow-lg"
 					ref={popoverRef}
 					style={{
 						backgroundColor: "var(--vscode-editorWidget-background)",

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

@@ -161,9 +161,9 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 						aria-label="Previous Updates"
 						classNames={{
 							trigger: "bg-transparent border-0 pl-0 pb-0 w-fit",
-							title: "font-bold text-[var(--vscode-foreground)]",
+							title: "font-bold text-(--vscode-foreground)",
 							indicator:
-								"text-[var(--vscode-foreground)] mb-0.5 -rotate-180 data-[open=true]:-rotate-90 rtl:rotate-0 rtl:data-[open=true]:-rotate-90",
+								"text-(--vscode-foreground) mb-0.5 -rotate-180 data-[open=true]:-rotate-90 rtl:rotate-0 rtl:data-[open=true]:-rotate-90",
 						}}
 						key="1"
 						title="Previous Updates:">

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

@@ -1622,7 +1622,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						value={inputValue}
 					/>
 					{!inputValue && selectedImages.length === 0 && selectedFiles.length === 0 && (
-						<div className="text-[10px] absolute bottom-5 left-5 right-16 text-[var(--vscode-input-placeholderForeground)]/50 whitespace-nowrap overflow-hidden text-ellipsis pointer-events-none z-1">
+						<div className="text-[10px] absolute bottom-5 left-5 right-16 text-(--vscode-input-placeholderForeground)/50 whitespace-nowrap overflow-hidden text-ellipsis pointer-events-none z-1">
 							Type @ for context, / for slash commands & workflows, hold shift to drag in files/images
 						</div>
 					)}

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

@@ -366,7 +366,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					/>
 				)}
 			</div>
-			<footer className="bg-[var(--vscode-sidebar-background)]" style={{ gridRow: "2" }}>
+			<footer className="bg-(--vscode-sidebar-background)" style={{ gridRow: "2" }}>
 				<AutoApproveBar />
 				<ActionButtons
 					chatState={chatState}

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

@@ -50,7 +50,7 @@ const CreditLimitError: React.FC<CreditLimitErrorProps> = ({
 
 	// We have to divide because the balance is stored in microcredits
 	return (
-		<div className="p-2 border-none rounded-md mb-2 bg-[var(--vscode-textBlockQuote-background)]">
+		<div className="p-2 border-none rounded-md mb-2 bg-(--vscode-textBlockQuote-background)">
 			<div className="mb-3 font-azeret-mono">
 				<div className="text-error mb-2">{message}</div>
 				<div className="mb-3">

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

@@ -29,14 +29,14 @@ export const ErrorBlockTitle = ({
 	const icon =
 		apiReqCancelReason != null ? (
 			apiReqCancelReason === "user_cancelled" ? (
-				getIconSpan("error", "text-[var(--vscode-descriptionForeground)]")
+				getIconSpan("error", "text-(--vscode-descriptionForeground)")
 			) : (
-				getIconSpan("error", "text-[var(--vscode-errorForeground)]")
+				getIconSpan("error", "text-(--vscode-errorForeground)")
 			)
 		) : cost != null ? (
-			getIconSpan("check", "text-[var(--vscode-charts-green)]")
+			getIconSpan("check", "text-(--vscode-charts-green)")
 		) : apiRequestFailedMessage ? (
-			getIconSpan("error", "text-[var(--vscode-errorForeground)]")
+			getIconSpan("error", "text-(--vscode-errorForeground)")
 		) : (
 			<ProgressIndicator />
 		)
@@ -47,24 +47,24 @@ export const ErrorBlockTitle = ({
 		// Handle cancellation states first
 		if (apiReqCancelReason === "user_cancelled") {
 			details.title = "API Request Cancelled"
-			details.classNames.push("text-[var(--vscode-foreground)]")
+			details.classNames.push("text-(--vscode-foreground)")
 		} else if (apiReqCancelReason != null) {
 			details.title = "API Request Failed"
-			details.classNames.push("text-[var(--vscode-errorForeground)]")
+			details.classNames.push("text-(--vscode-errorForeground)")
 		} else if (cost != null) {
 			// Handle completed request
 			details.title = "API Request"
-			details.classNames.push("text-[var(--vscode-foreground)]")
+			details.classNames.push("text-(--vscode-foreground)")
 		} else if (apiRequestFailedMessage) {
 			// Handle failed request
 			const clineError = ClineError.parse(apiRequestFailedMessage)
 			const titleText = clineError?.isErrorType(ClineErrorType.Balance) ? "Credit Limit Reached" : "API Request Failed"
 			details.title = titleText
-			details.classNames.push("font-bold text-[var(--vscode-errorForeground)]")
+			details.classNames.push("font-bold text-(--vscode-errorForeground)")
 		} else if (retryStatus) {
 			// Handle retry state
 			details.title = "API Request"
-			details.classNames.push("text-[var(--vscode-foreground)]")
+			details.classNames.push("text-(--vscode-foreground)")
 		}
 
 		return <span className={details.classNames.join(" ")}>{details.title}</span>

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

@@ -47,7 +47,7 @@ const ErrorRow = memo(({ message, errorType, apiRequestFailedMessage, apiReqStre
 
 					if (clineError?.isErrorType(ClineErrorType.RateLimit)) {
 						return (
-							<p className="m-0 whitespace-pre-wrap text-[var(--vscode-errorForeground)] wrap-anywhere">
+							<p className="m-0 whitespace-pre-wrap text-(--vscode-errorForeground) wrap-anywhere">
 								{clineErrorMessage}
 								{requestId && <div>Request ID: {requestId}</div>}
 							</p>
@@ -61,7 +61,7 @@ const ErrorRow = memo(({ message, errorType, apiRequestFailedMessage, apiReqStre
 
 					// Default error display
 					return (
-						<p className="m-0 whitespace-pre-wrap text-[var(--vscode-errorForeground)] wrap-anywhere">
+						<p className="m-0 whitespace-pre-wrap text-(--vscode-errorForeground) wrap-anywhere">
 							{errorMessageToDisplay}
 							{requestId && <div>Request ID: {requestId}</div>}
 							{clineErrorMessage?.toLowerCase()?.includes("powershell") && (
@@ -83,9 +83,7 @@ const ErrorRow = memo(({ message, errorType, apiRequestFailedMessage, apiReqStre
 									<br />
 									{/* The user is signed in or not using cline provider */}
 									{clineUser && !isClineProvider ? (
-										<span className="mb-4 text-[var(--vscode-descriptionForeground)]">
-											(Click "Retry" below)
-										</span>
+										<span className="mb-4 text-(--vscode-descriptionForeground)">(Click "Retry" below)</span>
 									) : (
 										<VSCodeButton className="w-full mb-4" onClick={handleSignIn}>
 											Sign in to Cline
@@ -98,20 +96,18 @@ const ErrorRow = memo(({ message, errorType, apiRequestFailedMessage, apiReqStre
 				}
 
 				// Regular error message
-				return (
-					<p className="m-0 whitespace-pre-wrap text-[var(--vscode-errorForeground)] wrap-anywhere">{message.text}</p>
-				)
+				return <p className="m-0 whitespace-pre-wrap text-(--vscode-errorForeground) wrap-anywhere">{message.text}</p>
 
 			case "diff_error":
 				return (
-					<div className="flex flex-col p-2 rounded text-xs opacity-80 bg-[var(--vscode-textBlockQuote-background)] text-[var(--vscode-foreground)]">
+					<div className="flex flex-col p-2 rounded text-xs opacity-80 bg-(--vscode-textBlockQuote-background) text-(--vscode-foreground)">
 						<div>The model used search patterns that don't match anything in the file. Retrying...</div>
 					</div>
 				)
 
 			case "clineignore_error":
 				return (
-					<div className="flex flex-col p-2 rounded text-xs bg-[var(--vscode-textBlockQuote-background)] text-[var(--vscode-foreground)] opacity-80">
+					<div className="flex flex-col p-2 rounded text-xs bg-(--vscode-textBlockQuote-background) text-(--vscode-foreground) opacity-80">
 						<div>
 							Cline tried to access <code>{message.text}</code> which is blocked by the <code>.clineignore</code>
 							file.

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

@@ -7,7 +7,7 @@ interface NewTaskPreviewProps {
 
 const NewTaskPreview: React.FC<NewTaskPreviewProps> = ({ context }) => {
 	return (
-		<div className="bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)] rounded-[3px] p-[14px] pb-[6px]">
+		<div className="bg-(--vscode-badge-background) text-(--vscode-badge-foreground) rounded-[3px] p-[14px] pb-[6px]">
 			<span style={{ fontWeight: "bold" }}>Task</span>
 			<MarkdownBlock markdown={context} />
 		</div>

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

@@ -28,7 +28,7 @@ const ContentRow = styled.div`
 `
 
 const TextContainer = styled.div`
-	flex-grow: 1;
+	grow: 1;
 	margin: 0 2px; /* Further reduced space around text */
 	white-space: pre-wrap;
 	word-break: break-word;
@@ -45,7 +45,7 @@ const TextContainer = styled.div`
 
 const DismissButton = styled(VSCodeButton)`
 	/* margin-left: auto; */ /* Removed as ContentRow handles spacing */
-	flex-shrink: 0; /* Prevent button from shrinking */
+	shrink: 0; /* Prevent button from shrinking */
 	min-width: 22px;
 	height: 22px;
 	padding: 0;
@@ -58,7 +58,7 @@ const DismissButton = styled(VSCodeButton)`
 const ReplyIcon = styled.span`
 	color: var(--vscode-descriptionForeground);
 	margin-right: 2px; /* Further reduced space between icon and text */
-	flex-shrink: 0;
+	shrink: 0;
 	font-size: 13px; /* Make icon even smaller */
 	/* transform: translateY(-1px); */ /* Removed vertical transform */
 `

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

@@ -17,7 +17,7 @@ const ReportBugPreview: React.FC<ReportBugPreviewProps> = ({ data }) => {
 	}, [data])
 
 	return (
-		<div className="bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)] rounded-[3px] p-[14px]">
+		<div className="bg-(--vscode-badge-background) text-(--vscode-badge-foreground) rounded-[3px] p-[14px]">
 			<h3 className="font-bold text-base mb-3 mt-0">{bugData.title || "Bug Report"}</h3>
 
 			<div className="space-y-3 text-sm">

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

@@ -72,7 +72,7 @@ const ServersToggleModal: React.FC = () => {
 
 			{isVisible && (
 				<div
-					className="fixed left-[15px] right-[15px] border border-[var(--vscode-editorGroup-border)] p-3 rounded z-[1000] overflow-y-auto"
+					className="fixed left-[15px] right-[15px] border border-(--vscode-editorGroup-border) p-3 rounded z-1000 overflow-y-auto"
 					style={{
 						bottom: `calc(100vh - ${menuPosition}px + 6px)`,
 						background: CODE_BLOCK_BG_COLOR,
@@ -80,7 +80,7 @@ const ServersToggleModal: React.FC = () => {
 						overscrollBehavior: "contain",
 					}}>
 					<div
-						className="fixed w-[10px] h-[10px] z-[-1] rotate-45 border-r border-b border-[var(--vscode-editorGroup-border)]"
+						className="fixed w-[10px] h-[10px] z-[-1] rotate-45 border-r border-b border-(--vscode-editorGroup-border)"
 						style={{
 							bottom: `calc(100vh - ${menuPosition}px)`,
 							right: arrowPosition,

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

@@ -58,18 +58,18 @@ const SlashCommandMenu: React.FC<SlashCommandMenuProps> = ({
 
 		return (
 			<>
-				<div className="text-xs text-[var(--vscode-descriptionForeground)] px-3 py-1 font-bold border-b border-[var(--vscode-editorGroup-border)]">
+				<div className="text-xs text-(--vscode-descriptionForeground) px-3 py-1 font-bold border-b border-(--vscode-editorGroup-border)">
 					{title}
 				</div>
 				{commands.map((command, index) => {
 					const itemIndex = index + indexOffset
 					return (
 						<div
-							className={`slash-command-menu-item py-2 px-3 cursor-pointer flex flex-col border-b border-[var(--vscode-editorGroup-border)] ${
+							className={`slash-command-menu-item py-2 px-3 cursor-pointer flex flex-col border-b border-(--vscode-editorGroup-border) ${
 								itemIndex === selectedIndex
-									? "bg-[var(--vscode-quickInputList-focusBackground)] text-[var(--vscode-quickInputList-focusForeground)]"
+									? "bg-(--vscode-quickInputList-focusBackground) text-(--vscode-quickInputList-focusForeground)"
 									: ""
-							} hover:bg-[var(--vscode-list-hoverBackground)]`}
+							} hover:bg-(--vscode-list-hoverBackground)`}
 							id={`slash-command-menu-item-${itemIndex}`}
 							key={command.name}
 							onClick={() => handleClick(command)}
@@ -78,7 +78,7 @@ const SlashCommandMenu: React.FC<SlashCommandMenuProps> = ({
 								<span className="ph-no-capture">/{command.name}</span>
 							</div>
 							{showDescriptions && command.description && (
-								<div className="text-[0.85em] text-[var(--vscode-descriptionForeground)] whitespace-normal overflow-hidden text-ellipsis">
+								<div className="text-[0.85em] text-(--vscode-descriptionForeground) whitespace-normal overflow-hidden text-ellipsis">
 									<span className="ph-no-capture">{command.description}</span>
 								</div>
 							)}
@@ -91,10 +91,10 @@ const SlashCommandMenu: React.FC<SlashCommandMenuProps> = ({
 
 	return (
 		<div
-			className="absolute bottom-[calc(100%-10px)] left-[15px] right-[15px] overflow-x-hidden z-[1000]"
+			className="absolute bottom-[calc(100%-10px)] left-[15px] right-[15px] overflow-x-hidden z-1000"
 			onMouseDown={onMouseDown}>
 			<div
-				className="bg-[var(--vscode-dropdown-background)] border border-[var(--vscode-editorGroup-border)] rounded-[3px] shadow-[0_4px_10px_rgba(0,0,0,0.25)] flex flex-col overflow-y-auto"
+				className="bg-(--vscode-dropdown-background) border border-(--vscode-editorGroup-border) rounded-[3px] shadow-[0_4px_10px_rgba(0,0,0,0.25)] flex flex-col overflow-y-auto"
 				ref={menuRef}
 				style={{ maxHeight: "min(200px, calc(50vh))", overscrollBehavior: "contain" }}>
 				{filteredCommands.length > 0 ? (
@@ -104,7 +104,7 @@ const SlashCommandMenu: React.FC<SlashCommandMenuProps> = ({
 					</>
 				) : (
 					<div className="py-2 px-3 cursor-default flex flex-col">
-						<div className="text-[0.85em] text-[var(--vscode-descriptionForeground)]">No matching commands found</div>
+						<div className="text-[0.85em] text-(--vscode-descriptionForeground)">No matching commands found</div>
 					</div>
 				)}
 			</div>

webview-ui/src/components/chat/auto-approve-menu/AutoApproveBar.tsx

@@ -58,12 +58,12 @@ const AutoApproveBar = ({ style }: AutoApproveBarProps) => {
 		return [
 			...favorites.map((favId) => renderFavoritedItem(favId)),
 			minusFavorites.length > 0 ? (
-				<span className="text-[color:var(--vscode-foreground-muted)] pl-[10px] opacity-60" key="separator">
+				<span className="text-(--vscode-foreground-muted) pl-[10px] opacity-60" key="separator">
 					✓
 				</span>
 			) : null,
 			...minusFavorites.map((action, index) => (
-				<span className="text-[color:var(--vscode-foreground-muted)] opacity-60" key={action?.id}>
+				<span className="text-(--vscode-foreground-muted) opacity-60" key={action?.id}>
 					{action?.shortName}
 					{index < minusFavorites.length - 1 && ","}
 				</span>

webview-ui/src/components/chat/auto-approve-menu/AutoApproveModal.tsx

@@ -125,10 +125,10 @@ const AutoApproveModal: React.FC<AutoApproveModalProps> = ({
 	return (
 		<div className="overflow-hidden" ref={modalRef}>
 			<div
-				className="fixed left-[15px] right-[15px] border border-[var(--vscode-editorGroup-border)] rounded z-[1000] flex flex-col"
+				className="fixed left-[15px] right-[15px] border border-(--vscode-editorGroup-border) rounded z-1000 flex flex-col"
 				style={calculateModalStyle()}>
 				<div
-					className="fixed w-[10px] h-[10px] z-[-1] rotate-45 border-r border-b border-[var(--vscode-editorGroup-border)]"
+					className="fixed w-[10px] h-[10px] z-[-1] rotate-45 border-r border-b border-(--vscode-editorGroup-border)"
 					style={{
 						bottom: `calc(100vh - ${menuPosition}px)`,
 						right: arrowPosition,
@@ -149,7 +149,7 @@ const AutoApproveModal: React.FC<AutoApproveModalProps> = ({
 					</div>
 
 					<div className="mb-2.5">
-						<span className="text-[color:var(--vscode-foreground)] font-medium">Actions:</span>
+						<span className="text-(--vscode-foreground) font-medium">Actions:</span>
 					</div>
 
 					<div
@@ -184,7 +184,7 @@ const AutoApproveModal: React.FC<AutoApproveModalProps> = ({
 					</div>
 
 					<div className="mb-2.5">
-						<span className="text-[color:var(--vscode-foreground)] font-medium">Quick Settings:</span>
+						<span className="text-(--vscode-foreground) font-medium">Quick Settings:</span>
 					</div>
 
 					<AutoApproveMenuItem

webview-ui/src/components/chat/chat-view/components/layout/ActionButtons.tsx

@@ -121,7 +121,7 @@ export const ActionButtons: React.FC<ActionButtonsProps> = ({
 				<VSCodeButton
 					appearance="icon"
 					aria-label={showScrollToBottom ? "Scroll to bottom" : "Scroll to top"}
-					className="text-lg text-[var(--vscode-primaryButton-foreground)] bg-[color-mix(in_srgb,var(--vscode-toolbar-hoverBackground)_55%,transparent)] rounded-[3px] overflow-hidden cursor-pointer flex justify-center items-center flex-1 h-[25px] hover:bg-[color-mix(in_srgb,var(--vscode-toolbar-hoverBackground)_90%,transparent)] active:bg-[color-mix(in_srgb,var(--vscode-toolbar-hoverBackground)_70%,transparent)] border-0"
+					className="text-lg text-(--vscode-primaryButton-foreground) bg-[color-mix(in_srgb,var(--vscode-toolbar-hoverBackground)_55%,transparent)] rounded-[3px] overflow-hidden cursor-pointer flex justify-center items-center flex-1 h-[25px] hover:bg-[color-mix(in_srgb,var(--vscode-toolbar-hoverBackground)_90%,transparent)] active:bg-[color-mix(in_srgb,var(--vscode-toolbar-hoverBackground)_70%,transparent)] border-0"
 					onClick={showScrollToBottom ? handleScrollToBottom : handleScrollToTop}
 					onKeyDown={(e) => {
 						if (e.key === "Enter" || e.key === " ") {
@@ -150,7 +150,7 @@ export const ActionButtons: React.FC<ActionButtonsProps> = ({
 			{primaryText && primaryAction && (
 				<VSCodeButton
 					appearance="primary"
-					className={secondaryText ? "flex-1 mr-[6px]" : "flex-[2]"}
+					className={secondaryText ? "flex-1 mr-[6px]" : "flex-2"}
 					disabled={!canInteract}
 					onClick={() => handleActionClick(primaryAction, inputValue, selectedImages, selectedFiles)}>
 					{primaryText}
@@ -159,7 +159,7 @@ export const ActionButtons: React.FC<ActionButtonsProps> = ({
 			{secondaryText && secondaryAction && (
 				<VSCodeButton
 					appearance="secondary"
-					className={primaryText ? "flex-1" : "flex-[2]"}
+					className={primaryText ? "flex-1" : "flex-2"}
 					disabled={!canInteract}
 					onClick={() => handleActionClick(secondaryAction, inputValue, selectedImages, selectedFiles)}>
 					{secondaryText}

webview-ui/src/components/chat/chat-view/components/layout/MessagesArea.tsx

@@ -62,7 +62,7 @@ export const MessagesArea: React.FC<MessagesAreaProps> = ({
 
 	return (
 		<div className="overflow-hidden flex flex-col h-full">
-			<div className="flex-grow flex" ref={scrollContainerRef}>
+			<div className="grow flex" ref={scrollContainerRef}>
 				<Virtuoso
 					atBottomStateChange={(isAtBottom) => {
 						setIsAtBottom(isAtBottom)

webview-ui/src/components/chat/task-header/CheckpointError.tsx

@@ -28,7 +28,7 @@ export const CheckpointError: React.FC<CheckpointErrorProps> = ({
 	return (
 		<div className="flex items-center justify-center w-full">
 			<Alert
-				className="rounded-sm border-0 bg-[var(--vscode-inputValidation-errorBackground)] text-[var(--vscode-inputValidation-errorForeground)] pl-1 pr-1.5 py-1"
+				className="rounded-sm border-0 bg-(--vscode-inputValidation-errorBackground) text-(--vscode-inputValidation-errorForeground) pl-1 pr-1.5 py-1"
 				color="warning"
 				description={
 					<div className="flex gap-2">

webview-ui/src/components/chat/task-header/TaskHeader.tsx

@@ -100,10 +100,10 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 			{/* Task Header */}
 			<div
 				className={cn(
-					"relative overflow-hidden cursor-pointer rounded-sm flex flex-col gap-1.5 z-10 pt-2 pb-2 px-2 hover:opacity-100 bg-[var(--vscode-toolbar-hoverBackground)]/65",
+					"relative overflow-hidden cursor-pointer rounded-sm flex flex-col gap-1.5 z-10 pt-2 pb-2 px-2 hover:opacity-100 bg-(--vscode-toolbar-hoverBackground)/65",
 					{
 						"opacity-100 border-1": isTaskExpanded, // No hover effects when expanded, add border
-						"hover:bg-[var(--vscode-toolbar-hoverBackground)] border-1": !isTaskExpanded, // Hover effects only when collapsed
+						"hover:bg-(--vscode-toolbar-hoverBackground) border-1": !isTaskExpanded, // Hover effects only when collapsed
 					},
 				)}
 				style={{
@@ -128,14 +128,14 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 							</div>
 						)}
 					</div>
-					<div className="flex items-center select-none flex-grow min-w-0 gap-1 justify-between">
+					<div className="flex items-center select-none grow min-w-0 gap-1 justify-between">
 						{!isTaskExpanded && (
-							<div className="text-sm whitespace-nowrap overflow-hidden text-ellipsis flex-grow min-w-0">
+							<div className="text-sm whitespace-nowrap overflow-hidden text-ellipsis grow min-w-0">
 								<span className="ph-no-capture">{highlightText(task.text, false)}</span>
 							</div>
 						)}
 					</div>
-					<div className="inline-flex items-center justify-end select-none flex-shrink-0">
+					<div className="inline-flex items-center justify-end select-none shrink-0">
 						{isCostAvailable && (
 							<div
 								className="mr-1 px-1 py-0.25 rounded-full inline-flex shrink-0 text-badge-background bg-badge-foreground/80 items-center"
@@ -150,7 +150,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 				{/* Expand/Collapse Task Details */}
 				{isTaskExpanded && (
 					<div className="flex flex-col break-words" key={`task-details-${currentTaskItem?.id}`}>
-						<div className="whitespace-nowrap overflow-hidden text-ellipsis flex-grow min-w-0 max-h-20 overflow-y-auto scroll-smooth">
+						<div className="whitespace-nowrap overflow-hidden text-ellipsis grow min-w-0 max-h-20 overflow-y-auto scroll-smooth">
 							<div
 								className={
 									"ph-no-capture overflow-hidden whitespace-pre-wrap break-words px-0.5 text-sm cursor-pointer mt-1"

webview-ui/src/components/chat/task-header/TaskTimelineTooltip.tsx

@@ -154,7 +154,7 @@ const TaskTimelineTooltip = ({ message, children }: TaskTimelineTooltipProps) =>
 	return (
 		<Tooltip
 			classNames={{
-				base: "bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-widget-border)] py-1 rounded-[3px] max-w-[calc(100dvw-2rem)] text-xs",
+				base: "bg-(--vscode-editor-background) text-(--vscode-editor-foreground) border-(--vscode-widget-border) py-1 rounded-[3px] max-w-[calc(100dvw-2rem)] text-xs",
 			}}
 			closeDelay={100}
 			content={

webview-ui/src/components/cline-rules/ClineRulesToggleModal.tsx

@@ -214,7 +214,7 @@ const ClineRulesToggleModal: React.FC = () => {
 
 			{isVisible && (
 				<div
-					className="fixed left-[15px] right-[15px] border border-[var(--vscode-editorGroup-border)] p-3 rounded z-[1000] overflow-y-auto"
+					className="fixed left-[15px] right-[15px] border border-(--vscode-editorGroup-border) p-3 rounded z-1000 overflow-y-auto"
 					style={{
 						bottom: `calc(100vh - ${menuPosition}px + 6px)`,
 						background: CODE_BLOCK_BG_COLOR,
@@ -222,7 +222,7 @@ const ClineRulesToggleModal: React.FC = () => {
 						overscrollBehavior: "contain",
 					}}>
 					<div
-						className="fixed w-[10px] h-[10px] z-[-1] rotate-45 border-r border-b border-[var(--vscode-editorGroup-border)]"
+						className="fixed w-[10px] h-[10px] z-[-1] rotate-45 border-r border-b border-(--vscode-editorGroup-border)"
 						style={{
 							bottom: `calc(100vh - ${menuPosition}px)`,
 							right: arrowPosition,
@@ -253,7 +253,7 @@ const ClineRulesToggleModal: React.FC = () => {
 					</div>
 
 					{/* Description text */}
-					<div className="text-xs text-[var(--vscode-descriptionForeground)] mb-4">
+					<div className="text-xs text-(--vscode-descriptionForeground) mb-4">
 						{currentView === "rules" ? (
 							<p>
 								Rules allow you to provide Cline with system-level guidance. Think of them as a persistent way to
@@ -271,7 +271,7 @@ const ClineRulesToggleModal: React.FC = () => {
 								such as deploying a service or submitting a PR. To invoke a workflow, type{" "}
 								<span
 									className=" 
-								text-[var(--vscode-foreground)] font-bold">
+								text-(--vscode-foreground) font-bold">
 									/workflow-name
 								</span>{" "}
 								in the chat.{" "}

webview-ui/src/components/cline-rules/NewRuleRow.tsx

@@ -92,13 +92,13 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal, ruleType }) => {
 			onClick={() => !isExpanded && setIsExpanded(true)}
 			ref={componentRef}>
 			<div
-				className={`flex items-center p-2 rounded bg-[var(--vscode-input-background)] transition-all duration-300 ease-in-out h-[18px] ${
+				className={`flex items-center p-2 rounded bg-(--vscode-input-background) transition-all duration-300 ease-in-out h-[18px] ${
 					isExpanded ? "shadow-sm" : ""
 				}`}>
 				{isExpanded ? (
 					<form className="flex flex-1 items-center" onSubmit={handleSubmit}>
 						<input
-							className="flex-1 bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-0 outline-0 rounded focus:outline-none focus:ring-0 focus:border-transparent"
+							className="flex-1 bg-(--vscode-input-background) text-(--vscode-input-foreground) border-0 outline-0 rounded focus:outline-none focus:ring-0 focus:border-transparent"
 							onChange={(e) => setFilename(e.target.value)}
 							onKeyDown={handleKeyDown}
 							placeholder={
@@ -127,7 +127,7 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal, ruleType }) => {
 					</form>
 				) : (
 					<>
-						<span className="flex-1 text-[var(--vscode-descriptionForeground)] bg-[var(--vscode-input-background)] italic text-xs">
+						<span className="flex-1 text-(--vscode-descriptionForeground) bg-(--vscode-input-background) italic text-xs">
 							{ruleType === "workflow" ? "New workflow file..." : "New rule file..."}
 						</span>
 						<div className="flex items-center ml-2 space-x-2">
@@ -146,7 +146,7 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal, ruleType }) => {
 					</>
 				)}
 			</div>
-			{isExpanded && error && <div className="text-[var(--vscode-errorForeground)] text-xs mt-1 ml-2">{error}</div>}
+			{isExpanded && error && <div className="text-(--vscode-errorForeground) text-xs mt-1 ml-2">{error}</div>}
 		</div>
 	)
 }

webview-ui/src/components/cline-rules/RuleRow.tsx

@@ -75,7 +75,7 @@ const RuleRow: React.FC<{
 	return (
 		<div className="mb-2.5">
 			<div
-				className={`flex items-center p-2 rounded bg-[var(--vscode-textCodeBlock-background)] h-[18px] ${
+				className={`flex items-center p-2 rounded bg-(--vscode-textCodeBlock-background) h-[18px] ${
 					enabled ? "opacity-100" : "opacity-60"
 				}`}>
 				<span className="flex-1 overflow-hidden break-all whitespace-normal flex items-center mr-1" title={rulePath}>
@@ -89,8 +89,8 @@ const RuleRow: React.FC<{
 						aria-checked={enabled}
 						className={`w-[20px] h-[10px] rounded-[5px] relative cursor-pointer transition-colors duration-200 ${
 							enabled
-								? "bg-[var(--vscode-testing-iconPassed)] opacity-90"
-								: "bg-[var(--vscode-titleBar-inactiveForeground)] opacity-50"
+								? "bg-(--vscode-testing-iconPassed) opacity-90"
+								: "bg-(--vscode-titleBar-inactiveForeground) opacity-50"
 						}`}
 						onClick={() => toggleRule(rulePath, !enabled)}
 						onKeyDown={(e) => {
@@ -102,7 +102,7 @@ const RuleRow: React.FC<{
 						role="switch"
 						tabIndex={0}>
 						<div
-							className={`w-[6px] h-[6px] bg-white border border-[#66666699] rounded-full absolute top-[1px] transition-all duration-200 ${
+							className={`w-[6px] h-[6px] bg-white border border-[#66666699] rounded-full absolute top-px transition-all duration-200 ${
 								enabled ? "left-[12px]" : "left-[2px]"
 							}`}
 						/>

webview-ui/src/components/cline-rules/RulesToggleList.tsx

@@ -45,7 +45,7 @@ const RulesToggleList = ({
 			) : (
 				<>
 					{showNoRules && (
-						<div className="flex flex-col items-center gap-3 my-3 text-[var(--vscode-descriptionForeground)]">
+						<div className="flex flex-col items-center gap-3 my-3 text-(--vscode-descriptionForeground)">
 							{ruleType === "workflow" ? "No workflows found" : "No rules found"}
 						</div>
 					)}

webview-ui/src/components/common/AlertDialog.tsx

@@ -37,7 +37,7 @@ export function AlertDialogContent({ className, children, ...props }: React.HTML
 			className={`fixed top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] ${className}`}
 			onClick={(e) => e.stopPropagation()}
 			{...props}>
-			<div className="bg-[var(--vscode-editor-background)] rounded-sm gap-3 border border-[var(--vscode-panel-border)] p-6 shadow-lg sm:max-w-lg">
+			<div className="bg-(--vscode-editor-background) rounded-sm gap-3 border border-(--vscode-panel-border) p-6 shadow-lg sm:max-w-lg">
 				{children}
 			</div>
 		</div>
@@ -55,14 +55,14 @@ export function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<
 export function AlertDialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
 	return (
 		<h2
-			className={`text-base font-medium text-[var(--vscode-editor-foreground)] flex items-center gap-2 text-left ${className}`}
+			className={`text-base font-medium text-(--vscode-editor-foreground) flex items-center gap-2 text-left ${className}`}
 			{...props}
 		/>
 	)
 }
 
 export function AlertDialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-	return <p className={`text-[var(--vscode-descriptionForeground)] text-sm text-left ${className}`} {...props} />
+	return <p className={`text-(--vscode-descriptionForeground) text-sm text-left ${className}`} {...props} />
 }
 
 export function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof VSCodeButton>) {
@@ -101,7 +101,7 @@ export function UnsavedChangesDialog({
 			<AlertDialogContent>
 				<AlertDialogHeader>
 					<AlertDialogTitle>
-						<AlertTriangle className="w-5 h-5 text-[var(--vscode-errorForeground)]" />
+						<AlertTriangle className="w-5 h-5 text-(--vscode-errorForeground)" />
 						{title}
 					</AlertDialogTitle>
 					<AlertDialogDescription>{description}</AlertDialogDescription>

webview-ui/src/components/common/CheckmarkControl.tsx

@@ -313,7 +313,7 @@ const Container = styled.div<{ isMenuOpen?: boolean; $isCheckedOut?: boolean }>`
 const Label = styled.span<{ $isCheckedOut?: boolean }>`
 	color: ${(props) => (props.$isCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)")};
 	font-size: 9px;
-	flex-shrink: 0;
+	shrink: 0;
 `
 
 const DottedLine = styled.div<{ small?: boolean; $isCheckedOut?: boolean }>`
@@ -333,7 +333,7 @@ const ButtonGroup = styled.div`
 	display: flex;
 	align-items: center;
 	gap: 4px;
-	flex-shrink: 0;
+	shrink: 0;
 `
 
 const CustomButton = styled.button<{ disabled?: boolean; isActive?: boolean; $isCheckedOut?: boolean }>`

webview-ui/src/components/common/DangerButton.tsx

@@ -7,13 +7,13 @@ const DangerButton: React.FC<DangerButtonProps> = (props) => {
 		<VSCodeButton
 			{...props}
 			className={`
-				!bg-[#c42b2b] 
-				!border-[#c42b2b] 
-				!text-white
-				hover:!bg-[#a82424] 
-				hover:!border-[#a82424]
-				active:!bg-[#8f1f1f] 
-				active:!border-[#8f1f1f]
+				bg-[#c42b2b]! 
+				border-[#c42b2b]! 
+				text-white!
+				hover:bg-[#a82424]! 
+				hover:border-[#a82424]!
+				active:bg-[#8f1f1f]! 
+				active:border-[#8f1f1f]!
 				${props.className || ""}
 			`}
 		/>

webview-ui/src/components/common/MarkdownBlock.tsx

@@ -19,7 +19,7 @@ const ActModeHighlight: React.FC = () => {
 
 	return (
 		<span
-			className={`text-[var(--vscode-textLink-foreground)] inline-flex items-center gap-1 ${
+			className={`text-(--vscode-textLink-foreground) inline-flex items-center gap-1 ${
 				mode === "plan" ? "hover:opacity-90 cursor-pointer" : "cursor-default opacity-60"
 			}`}
 			onClick={() => {
@@ -33,8 +33,8 @@ const ActModeHighlight: React.FC = () => {
 				}
 			}}
 			title={mode === "plan" ? "Click to toggle to Act Mode" : "Already in Act Mode"}>
-			<div className="p-1 rounded-[12px] bg-[var(--vscode-editor-background)] flex items-center justify-end w-4 border-[1px] border-[var(--vscode-input-border)]">
-				<div className="rounded-full bg-[var(--vscode-textLink-foreground)] w-2 h-2" />
+			<div className="p-1 rounded-[12px] bg-(--vscode-editor-background) flex items-center justify-end w-4 border border-(--vscode-input-border)">
+				<div className="rounded-full bg-(--vscode-textLink-foreground) w-2 h-2" />
 			</div>
 			Act Mode (⌘⇧A)
 		</span>
@@ -385,7 +385,7 @@ const MarkdownBlock = memo(({ markdown, compact }: MarkdownBlockProps) => {
 							<>
 								<code {...props} />
 								<button
-									className="codicon codicon-link-external bg-transparent border-0 appearance-none p-0 ml-0.5 leading-none align-middle opacity-70 hover:opacity-100 transition-opacity text-[1em] relative top-[1px] text-[var(--vscode-textPreformat-foreground)] translate-y-[-2px]"
+									className="codicon codicon-link-external bg-transparent border-0 appearance-none p-0 ml-0.5 leading-none align-middle opacity-70 hover:opacity-100 transition-opacity text-[1em] relative top-px text-(--vscode-textPreformat-foreground) translate-y-[-2px]"
 									onClick={() => FileServiceClient.openFileRelativePath({ value: filePath })}
 									title={`Open ${filePath} in editor`}
 									type="button"

webview-ui/src/components/common/SettingsButton.tsx

@@ -22,7 +22,7 @@ const StyledButton = styled(VSCodeButton)`
 
 	i.codicon {
 		margin-right: 6px;
-		flex-shrink: 0;
+		shrink: 0;
 		font-size: 16px !important;
 	}
 `

webview-ui/src/components/common/SuccessButton.tsx

@@ -7,13 +7,13 @@ const SuccessButtonTW: React.FC<SuccessButtonTWProps> = (props) => {
 		<VSCodeButton
 			{...props}
 			className={`
-				!bg-[#176f2c] 
-				!border-[#176f2c] 
-				!text-white
-				hover:!bg-[#197f31] 
-				hover:!border-[#197f31]
-				active:!bg-[#156528] 
-				active:!border-[#156528]
+				bg-[#176f2c]! 
+				border-[#176f2c]! 
+				text-white!
+				hover:bg-[#197f31]! 
+				hover:border-[#197f31]!
+				active:bg-[#156528]! 
+				active:border-[#156528]!
 				${props.className || ""}
 			`
 				.replace(/\s+/g, " ")

webview-ui/src/components/common/Tab.tsx

@@ -9,7 +9,7 @@ export const Tab = ({ className, children, ...props }: TabProps) => (
 )
 
 export const TabHeader = ({ className, children, ...props }: TabProps) => (
-	<div className={`px-5 py-2.5 border-b border-[var(--vscode-panel-border)] ${className}`} {...props}>
+	<div className={`px-5 py-2.5 border-b border-(--vscode-panel-border) ${className}`} {...props}>
 		{children}
 	</div>
 )

webview-ui/src/components/history/HistoryView.tsx

@@ -29,16 +29,16 @@ interface CustomFilterRadioProps {
 const CustomFilterRadio = ({ checked, onChange, icon, label }: CustomFilterRadioProps) => {
 	return (
 		<div
-			className="flex items-center cursor-pointer py-[0.3em] px-0 mr-[10px] text-[var(--vscode-font-size)] select-none"
+			className="flex items-center cursor-pointer py-[0.3em] px-0 mr-[10px] text-(--vscode-font-size) select-none"
 			onClick={onChange}>
 			<div
-				className={`w-[14px] h-[14px] rounded-full border border-[var(--vscode-checkbox-border)] relative flex justify-center items-center mr-[6px] ${
-					checked ? "bg-[var(--vscode-checkbox-background)]" : "bg-transparent"
+				className={`w-[14px] h-[14px] rounded-full border border-(--vscode-checkbox-border) relative flex justify-center items-center mr-[6px] ${
+					checked ? "bg-(--vscode-checkbox-background)" : "bg-transparent"
 				}`}>
-				{checked && <div className="w-[6px] h-[6px] rounded-full bg-[var(--vscode-checkbox-foreground)]" />}
+				{checked && <div className="w-[6px] h-[6px] rounded-full bg-(--vscode-checkbox-foreground)" />}
 			</div>
 			<span className="flex items-center gap-[3px]">
-				<div className={`codicon codicon-${icon} text-[var(--vscode-button-background)] text-base`} />
+				<div className={`codicon codicon-${icon} text-(--vscode-button-background) text-base`} />
 				{label}
 			</span>
 		</div>

webview-ui/src/components/mcp/configuration/tabs/add-server/AddLocalServerForm.tsx

@@ -11,7 +11,7 @@ type AddLocalServerFormProps = {
 const AddLocalServerForm = ({ onServerAdded }: AddLocalServerFormProps) => {
 	return (
 		<FormContainer>
-			<div className="text-[var(--vscode-foreground)]">
+			<div className="text-(--vscode-foreground)">
 				Add a local MCP server by configuring it in <code>cline_mcp_settings.json</code>. You'll need to specify the
 				server name, command, arguments, and any required environment variables in the JSON configuration. Learn more
 				<VSCodeLink href={LINKS.DOCUMENTATION.LOCAL_MCP_SERVER_DOCS} style={{ display: "inline" }}>

webview-ui/src/components/mcp/configuration/tabs/add-server/AddRemoteServerForm.tsx

@@ -65,7 +65,7 @@ const AddRemoteServerForm = ({ onServerAdded }: { onServerAdded: () => void }) =
 
 	return (
 		<div className="p-4 px-5">
-			<div className="text-[var(--vscode-foreground)] mb-2">
+			<div className="text-(--vscode-foreground) mb-2">
 				Add a remote MCP server by providing a name and its URL endpoint. Learn more{" "}
 				<VSCodeLink href={LINKS.DOCUMENTATION.REMOTE_MCP_SERVER_DOCS} style={{ display: "inline" }}>
 					here.
@@ -101,7 +101,7 @@ const AddRemoteServerForm = ({ onServerAdded }: { onServerAdded: () => void }) =
 					</VSCodeTextField>
 				</div>
 
-				{error && <div className="mb-3 text-[var(--vscode-errorForeground)]">{error}</div>}
+				{error && <div className="mb-3 text-(--vscode-errorForeground)">{error}</div>}
 
 				<div className="flex items-center mt-3 w-full">
 					<VSCodeButton className="w-full" disabled={isSubmitting} type="submit">
@@ -109,7 +109,7 @@ const AddRemoteServerForm = ({ onServerAdded }: { onServerAdded: () => void }) =
 					</VSCodeButton>
 
 					{showConnectingMessage && (
-						<div className="ml-3 text-[var(--vscode-notificationsInfoIcon-foreground)] text-sm">
+						<div className="ml-3 text-(--vscode-notificationsInfoIcon-foreground) text-sm">
 							Connecting to server... This may take a few seconds.
 						</div>
 					)}

webview-ui/src/components/mcp/configuration/tabs/installed/ServersToggleList.tsx

@@ -27,7 +27,7 @@ const ServersToggleList = ({
 			))}
 		</div>
 	) : (
-		<div className="flex flex-col items-center gap-3 my-5 text-[var(--vscode-descriptionForeground)]">
+		<div className="flex flex-col items-center gap-3 my-5 text-(--vscode-descriptionForeground)">
 			No MCP servers installed
 		</div>
 	)

webview-ui/src/components/menu/Navbar.tsx

@@ -79,7 +79,7 @@ export const Navbar = () => {
 						onClick={() => tab.navigate()}
 						style={{ padding: "0px", height: "20px" }}>
 						<div className="flex items-center gap-1 text-xs whitespace-nowrap min-w-0 w-full">
-							<tab.icon className="text-[var(--vscode-foreground)]" size={18} strokeWidth={1} />
+							<tab.icon className="text-(--vscode-foreground)" size={18} strokeWidth={1} />
 						</div>
 					</VSCodeButton>
 				</HeroTooltip>

webview-ui/src/components/settings/ApiOptions.tsx

@@ -302,7 +302,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 							<label htmlFor="api-provider">
 								<span style={{ fontWeight: 500 }}>API Provider</span>
 							</label>
-							<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+							<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 						</div>
 					</HeroTooltip>
 				) : (

webview-ui/src/components/settings/BasetenModelPicker.tsx

@@ -241,7 +241,7 @@ const BasetenModelPicker: React.FC<BasetenModelPickerProps> = ({ isPopup, curren
 					</VSCodeTextField>
 					{isDropdownVisible && (
 						<div
-							className="absolute top-[calc(100%-3px)] left-0 w-[calc(100%-2px)] max-h-[200px] overflow-y-auto border border-[var(--vscode-list-activeSelectionBackground)] rounded-b-[3px]"
+							className="absolute top-[calc(100%-3px)] left-0 w-[calc(100%-2px)] max-h-[200px] overflow-y-auto border border-(--vscode-list-activeSelectionBackground) rounded-b-[3px]"
 							ref={dropdownListRef}
 							style={{
 								backgroundColor: "var(--vscode-dropdown-background)",
@@ -249,8 +249,8 @@ const BasetenModelPicker: React.FC<BasetenModelPickerProps> = ({ isPopup, curren
 							}}>
 							{modelSearchResults.map((item, index) => (
 								<div
-									className={`px-2.5 py-1.5 cursor-pointer break-all whitespace-normal hover:bg-[var(--vscode-list-activeSelectionBackground)] ${
-										index === selectedIndex ? "bg-[var(--vscode-list-activeSelectionBackground)]" : ""
+									className={`px-2.5 py-1.5 cursor-pointer break-all whitespace-normal hover:bg-(--vscode-list-activeSelectionBackground) ${
+										index === selectedIndex ? "bg-(--vscode-list-activeSelectionBackground)" : ""
 									}`}
 									key={item.id}
 									onClick={() => {
@@ -272,7 +272,7 @@ const BasetenModelPicker: React.FC<BasetenModelPickerProps> = ({ isPopup, curren
 			{hasInfo ? (
 				<ModelInfoView isPopup={isPopup} modelInfo={selectedModelInfo} selectedModelId={selectedModelId} />
 			) : (
-				<p className="text-xs mt-0 text-[var(--vscode-descriptionForeground)]">
+				<p className="text-xs mt-0 text-(--vscode-descriptionForeground)">
 					The extension automatically fetches the latest list of models available on{" "}
 					<VSCodeLink className="inline text-inherit" href="https://www.baseten.co/products/model-apis/">
 						Baseten.

webview-ui/src/components/settings/GroqModelPicker.tsx

@@ -223,7 +223,7 @@ const GroqModelPicker: React.FC<GroqModelPickerProps> = ({ isPopup, currentMode
 					</VSCodeTextField>
 					{isDropdownVisible && (
 						<div
-							className="absolute top-[calc(100%-3px)] left-0 w-[calc(100%-2px)] max-h-[200px] overflow-y-auto border border-[var(--vscode-list-activeSelectionBackground)] rounded-b-[3px]"
+							className="absolute top-[calc(100%-3px)] left-0 w-[calc(100%-2px)] max-h-[200px] overflow-y-auto border border-(--vscode-list-activeSelectionBackground) rounded-b-[3px]"
 							ref={dropdownListRef}
 							style={{
 								backgroundColor: "var(--vscode-dropdown-background)",
@@ -231,8 +231,8 @@ const GroqModelPicker: React.FC<GroqModelPickerProps> = ({ isPopup, currentMode
 							}}>
 							{modelSearchResults.map((item, index) => (
 								<div
-									className={`px-2.5 py-1.5 cursor-pointer break-all whitespace-normal hover:bg-[var(--vscode-list-activeSelectionBackground)] ${
-										index === selectedIndex ? "bg-[var(--vscode-list-activeSelectionBackground)]" : ""
+									className={`px-2.5 py-1.5 cursor-pointer break-all whitespace-normal hover:bg-(--vscode-list-activeSelectionBackground) ${
+										index === selectedIndex ? "bg-(--vscode-list-activeSelectionBackground)" : ""
 									}`}
 									dangerouslySetInnerHTML={{
 										__html: item.html,
@@ -254,7 +254,7 @@ const GroqModelPicker: React.FC<GroqModelPickerProps> = ({ isPopup, currentMode
 			{hasInfo ? (
 				<ModelInfoView isPopup={isPopup} modelInfo={selectedModelInfo} selectedModelId={selectedModelId} />
 			) : (
-				<p className="text-xs mt-0 text-[var(--vscode-descriptionForeground)]">
+				<p className="text-xs mt-0 text-(--vscode-descriptionForeground)">
 					The extension automatically fetches the latest list of models available on{" "}
 					<VSCodeLink className="inline text-inherit" href="https://console.groq.com/docs/models">
 						Groq.

webview-ui/src/components/settings/HuggingFaceModelPicker.tsx

@@ -171,7 +171,7 @@ const HuggingFaceModelPicker: React.FC<HuggingFaceModelPickerProps> = ({ isPopup
 
 				<div className="relative w-full" ref={dropdownRef}>
 					<VSCodeTextField
-						className="w-full relative z-[1000]"
+						className="w-full relative z-1000"
 						id="hf-model-search"
 						onFocus={() => setIsDropdownVisible(true)}
 						onInput={(e: any) => {
@@ -204,13 +204,13 @@ const HuggingFaceModelPicker: React.FC<HuggingFaceModelPickerProps> = ({ isPopup
 						<div
 							className={`absolute top-[calc(100%-3px)] left-0 w-[calc(100%-2px)] ${
 								isPopup ? "max-h-[90px]" : "max-h-[200px]"
-							} overflow-y-auto bg-[var(--vscode-dropdown-background)] border border-[var(--vscode-list-activeSelectionBackground)] z-[999] rounded-b-[3px]`}
+							} overflow-y-auto bg-(--vscode-dropdown-background) border border-(--vscode-list-activeSelectionBackground) z-999 rounded-b-[3px]`}
 							ref={dropdownListRef}>
 							{modelSearchResults.map((result, index) => (
 								<div
 									className={`p-[5px_10px] cursor-pointer break-all whitespace-normal ${
-										index === selectedIndex ? "bg-[var(--vscode-list-activeSelectionBackground)]" : ""
-									} hover:bg-[var(--vscode-list-activeSelectionBackground)]`}
+										index === selectedIndex ? "bg-(--vscode-list-activeSelectionBackground)" : ""
+									} hover:bg-(--vscode-list-activeSelectionBackground)`}
 									key={result.id}
 									onClick={() => {
 										handleModelChange(result.id)
@@ -219,7 +219,7 @@ const HuggingFaceModelPicker: React.FC<HuggingFaceModelPickerProps> = ({ isPopup
 									onMouseEnter={() => setSelectedIndex(index)}
 									ref={(el: HTMLDivElement | null) => (itemRefs.current[index] = el)}>
 									<div
-										className="[&_.model-item-highlight]:bg-[var(--vscode-editor-findMatchHighlightBackground)] [&_.model-item-highlight]:text-inherit"
+										className="[&_.model-item-highlight]:bg-(--vscode-editor-findMatchHighlightBackground) [&_.model-item-highlight]:text-inherit"
 										dangerouslySetInnerHTML={{ __html: result.html }}
 									/>
 								</div>

webview-ui/src/components/settings/PreferredLanguageSetting.tsx

@@ -41,7 +41,7 @@ const PreferredLanguageSetting: React.FC = () => {
 				<VSCodeOption value="Traditional Chinese - 繁體中文">Traditional Chinese - 繁體中文</VSCodeOption>
 				<VSCodeOption value="Turkish - Türkçe">Turkish - Türkçe</VSCodeOption>
 			</VSCodeDropdown>
-			<p className="text-xs text-[var(--vscode-descriptionForeground)] mt-1">
+			<p className="text-xs text-(--vscode-descriptionForeground) mt-1">
 				The language that Cline should use for communication.
 			</p>
 		</div>

webview-ui/src/components/settings/SettingsView.tsx

@@ -33,11 +33,11 @@ const IS_DEV = process.env.IS_DEV
 // Styles for the tab system
 const settingsTabsContainer = "flex flex-1 overflow-hidden [&.narrow_.tab-label]:hidden"
 const settingsTabList =
-	"w-48 data-[compact=true]:w-12 flex-shrink-0 flex flex-col overflow-y-auto overflow-x-hidden border-r border-[var(--vscode-sideBar-background)]"
+	"w-48 data-[compact=true]:w-12 shrink-0 flex flex-col overflow-y-auto overflow-x-hidden border-r border-(--vscode-sideBar-background)"
 const settingsTabTrigger =
-	"whitespace-nowrap overflow-hidden min-w-0 h-12 px-4 py-3 box-border flex items-center border-l-2 border-transparent text-[var(--vscode-foreground)] opacity-70 bg-transparent hover:bg-[var(--vscode-list-hoverBackground)] data-[compact=true]:w-12 data-[compact=true]:p-4 cursor-pointer"
+	"whitespace-nowrap overflow-hidden min-w-0 h-12 px-4 py-3 box-border flex items-center border-l-2 border-transparent text-(--vscode-foreground) opacity-70 bg-transparent hover:bg-(--vscode-list-hoverBackground) data-[compact=true]:w-12 data-[compact=true]:p-4 cursor-pointer"
 const settingsTabTriggerActive =
-	"opacity-100 border-l-2 border-l-[var(--vscode-focusBorder)] border-t-0 border-r-0 border-b-0 bg-[var(--vscode-list-activeSelectionBackground)]"
+	"opacity-100 border-l-2 border-l-(--vscode-focusBorder) border-t-0 border-r-0 border-b-0 bg-(--vscode-list-activeSelectionBackground)"
 
 // Tab definitions
 interface SettingsTab {

webview-ui/src/components/settings/common/BaseUrlField.tsx

@@ -43,7 +43,7 @@ export const BaseUrlField = ({
 				<VSCodeCheckbox checked={isEnabled} disabled={disabled} onChange={handleToggle}>
 					{label}
 				</VSCodeCheckbox>
-				{showLockIcon && <i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />}
+				{showLockIcon && <i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />}
 			</div>
 
 			{isEnabled && (

webview-ui/src/components/settings/providers/BedrockProvider.tsx

@@ -103,7 +103,7 @@ export const BedrockProvider = ({ showModelOptions, isPopup, currentMode }: Bedr
 							<label htmlFor="aws-region-dropdown">
 								<span style={{ fontWeight: 500 }}>AWS Region</span>
 							</label>
-							<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm flex items-center" />
+							<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm flex items-center" />
 						</div>
 						<VSCodeDropdown
 							disabled={true}
@@ -201,7 +201,7 @@ export const BedrockProvider = ({ showModelOptions, isPopup, currentMode }: Bedr
 									}}>
 									Use custom VPC endpoint
 								</VSCodeCheckbox>
-								<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+								<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 							</div>
 
 							{awsEndpointSelected && (
@@ -255,7 +255,7 @@ export const BedrockProvider = ({ showModelOptions, isPopup, currentMode }: Bedr
 								}}>
 								Use cross-region inference
 							</VSCodeCheckbox>
-							<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+							<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 						</div>
 					</HeroTooltip>
 				) : (
@@ -284,7 +284,7 @@ export const BedrockProvider = ({ showModelOptions, isPopup, currentMode }: Bedr
 									}}>
 									Use global inference profile
 								</VSCodeCheckbox>
-								<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+								<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 							</div>
 						</HeroTooltip>
 					) : (
@@ -311,7 +311,7 @@ export const BedrockProvider = ({ showModelOptions, isPopup, currentMode }: Bedr
 									}}>
 									Use prompt caching
 								</VSCodeCheckbox>
-								<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+								<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 							</div>
 						</HeroTooltip>
 					) : (

webview-ui/src/components/settings/providers/OcaModelPicker.tsx

@@ -110,7 +110,7 @@ const OcaModelPicker: React.FC<OcaModelPickerProps> = ({
 				}
 			`}</style>
 			<label className="font-medium text-[12px] mt-[10px] mb-[2px]">Model</label>
-			<div className="relative z-[100] flex items-center gap-2 mb-1">
+			<div className="relative z-100 flex items-center gap-2 mb-1">
 				<VSCodeDropdown
 					className="flex-1 text-[12px] min-h-[24px]"
 					id="model-id"
@@ -151,7 +151,7 @@ const OcaModelPicker: React.FC<OcaModelPickerProps> = ({
 				</VSCodeButton>
 			</div>
 			{lastRefreshedText ? (
-				<div className="text-[11px] text-[var(--vscode-descriptionForeground)] mt-0 mb-2">
+				<div className="text-[11px] text-(--vscode-descriptionForeground) mt-0 mb-2">
 					Last refreshed at {lastRefreshedText}
 				</div>
 			) : null}
@@ -171,7 +171,7 @@ const OcaRestrictivePopup: React.FC<{
 	onAcknowledge: () => void
 	bannerText?: string | null
 }> = React.memo(({ onAcknowledge, bannerText }) => (
-	<div className="fixed top-0 left-0 w-screen h-screen z-[2000] [background:rgba(0,0,0,0.25)] flex items-center justify-center">
+	<div className="fixed top-0 left-0 w-screen h-screen z-2000 [background:rgba(0,0,0,0.25)] flex items-center justify-center">
 		<div
 			aria-labelledby="oca-popup-title"
 			aria-modal="true"
@@ -183,7 +183,7 @@ const OcaRestrictivePopup: React.FC<{
 			<h4 className={`mb-2 [color:var(${VSC_DESCRIPTION_FOREGROUND},#b3b3b3)] font-semibold`}>
 				Disclaimer: Prohibited Data Submission
 			</h4>
-			<div className="overflow-y-auto flex-1 pr-2 mb-4 text-[13px] leading-[1.5] [color:var(--vscode-foreground,#222)] [mask-image:linear-gradient(to_bottom,black_96%,transparent_100%)]">
+			<div className="overflow-y-auto flex-1 pr-2 mb-4 text-[13px] leading-normal text-(--vscode-foreground,#222) mask-[linear-gradient(to_bottom,black_96%,transparent_100%)]">
 				{bannerText && <div dangerouslySetInnerHTML={{ __html: bannerText }} />}
 			</div>
 			<div className="text-right">

webview-ui/src/components/settings/providers/OcaProvider.tsx

@@ -306,7 +306,7 @@ export const OcaProvider = ({ isPopup, currentMode }: OcaProviderProps) => {
 						}}>
 						Sign in with Oracle Code Assist
 					</VSCodeButton>
-					<p className="text-xs mt-0 text-[var(--vscode-descriptionForeground)]">
+					<p className="text-xs mt-0 text-(--vscode-descriptionForeground)">
 						Please ask your IT administrator to set up Oracle Code Assist as a model provider. Oracle Employees,
 						please see the{" "}
 						<VSCodeLink

webview-ui/src/components/settings/providers/OpenAICompatible.tsx

@@ -75,7 +75,7 @@ export const OpenAICompatibleProvider = ({ showModelOptions, isPopup, currentMod
 					<div className="mb-2.5">
 						<div className="flex items-center gap-2 mb-1">
 							<span style={{ fontWeight: 500 }}>Base URL</span>
-							<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+							<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 						</div>
 						<DebouncedTextField
 							disabled={true}
@@ -134,7 +134,7 @@ export const OpenAICompatibleProvider = ({ showModelOptions, isPopup, currentMod
 								<HeroTooltip content="This setting is managed by your organization's remote configuration">
 									<div className="flex items-center gap-2">
 										<span style={{ fontWeight: 500 }}>Custom Headers</span>
-										<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+										<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 									</div>
 								</HeroTooltip>
 								<VSCodeButton disabled={true}>Add Header</VSCodeButton>

webview-ui/src/components/settings/providers/SapAiCoreProvider.tsx

@@ -137,7 +137,7 @@ export const SapAiCoreProvider = ({ showModelOptions, isPopup, currentMode }: Sa
 				<span className="font-medium">AI Core Client Id</span>
 			</DebouncedTextField>
 			{apiConfiguration?.sapAiCoreClientId && (
-				<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+				<p className="text-xs text-(--vscode-descriptionForeground)">
 					Client Id is set. To change it, please re-enter the value.
 				</p>
 			)}
@@ -151,7 +151,7 @@ export const SapAiCoreProvider = ({ showModelOptions, isPopup, currentMode }: Sa
 				<span className="font-medium">AI Core Client Secret</span>
 			</DebouncedTextField>
 			{apiConfiguration?.sapAiCoreClientSecret && (
-				<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+				<p className="text-xs text-(--vscode-descriptionForeground)">
 					Client Secret is set. To change it, please re-enter the value.
 				</p>
 			)}
@@ -180,7 +180,7 @@ export const SapAiCoreProvider = ({ showModelOptions, isPopup, currentMode }: Sa
 				<span className="font-medium">AI Core Resource Group</span>
 			</DebouncedTextField>
 
-			<p className="text-xs mt-1.5 text-[var(--vscode-descriptionForeground)]">
+			<p className="text-xs mt-1.5 text-(--vscode-descriptionForeground)">
 				These credentials are stored locally and only used to make API requests from this extension.
 				<VSCodeLink
 					className="inline"
@@ -200,7 +200,7 @@ export const SapAiCoreProvider = ({ showModelOptions, isPopup, currentMode }: Sa
 						<span className="font-medium">Orchestration Mode</span>
 					</div>
 
-					<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+					<p className="text-xs text-(--vscode-descriptionForeground)">
 						When enabled, provides access to all available models without requiring individual deployments.
 						<br />
 						<br />
@@ -213,12 +213,12 @@ export const SapAiCoreProvider = ({ showModelOptions, isPopup, currentMode }: Sa
 				<>
 					<div className="flex flex-col gap-1.5">
 						{isLoadingModels ? (
-							<div className="text-xs text-[var(--vscode-descriptionForeground)]">Loading models...</div>
+							<div className="text-xs text-(--vscode-descriptionForeground)">Loading models...</div>
 						) : modelError ? (
-							<div className="text-xs text-[var(--vscode-errorForeground)]">
+							<div className="text-xs text-(--vscode-errorForeground)">
 								{modelError}
 								<button
-									className="ml-2 text-[11px] px-1.5 py-0.5 bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)] border-none rounded-sm cursor-pointer"
+									className="ml-2 text-[11px] px-1.5 py-0.5 bg-(--vscode-button-background) text-(--vscode-button-foreground) border-none rounded-sm cursor-pointer"
 									onClick={fetchSapAiCoreModels}>
 									Retry
 								</button>
@@ -226,7 +226,7 @@ export const SapAiCoreProvider = ({ showModelOptions, isPopup, currentMode }: Sa
 						) : hasRequiredCredentials ? (
 							<>
 								{sapAiCoreModelDeployments.length === 0 && (
-									<div className="text-xs text-[var(--vscode-errorForeground)] mb-2">
+									<div className="text-xs text-(--vscode-errorForeground) mb-2">
 										Unable to fetch models from SAP AI Core service instance. Please check your SAP AI Core
 										configuration or ensure your deployments are deployed and running in the service instance
 									</div>
@@ -247,7 +247,7 @@ export const SapAiCoreProvider = ({ showModelOptions, isPopup, currentMode }: Sa
 								/>
 							</>
 						) : (
-							<div className="text-xs text-[var(--vscode-errorForeground)]">
+							<div className="text-xs text-(--vscode-errorForeground)">
 								Please configure your SAP AI Core credentials to see available models.
 							</div>
 						)}

webview-ui/src/components/settings/sections/ApiConfigurationSection.tsx

@@ -25,7 +25,7 @@ const ApiConfigurationSection = ({ renderSectionHeader }: ApiConfigurationSectio
 				{/* Tabs container */}
 				{planActSeparateModelsSetting ? (
 					<div className="rounded-md mb-5">
-						<div className="flex gap-[1px] mb-[10px] -mt-2 border-0 border-b border-solid border-[var(--vscode-panel-border)]">
+						<div className="flex gap-px mb-[10px] -mt-2 border-0 border-b border-solid border-(--vscode-panel-border)">
 							<TabButton
 								disabled={currentTab === "plan"}
 								isActive={currentTab === "plan"}
@@ -79,7 +79,7 @@ const ApiConfigurationSection = ({ renderSectionHeader }: ApiConfigurationSectio
 						}}>
 						Use different models for Plan and Act modes
 					</VSCodeCheckbox>
-					<p className="text-xs mt-[5px] text-[var(--vscode-descriptionForeground)]">
+					<p className="text-xs mt-[5px] text-(--vscode-descriptionForeground)">
 						Switching between Plan and Act mode will persist the API and model used in the previous mode. This may be
 						helpful e.g. when using a strong reasoning model to architect a plan for a cheaper coding model to act on.
 					</p>

webview-ui/src/components/settings/sections/DebugSection.tsx

@@ -23,7 +23,7 @@ const DebugSection = ({ onResetState, renderSectionHeader }: DebugSectionProps)
 					style={{ backgroundColor: "var(--vscode-errorForeground)", color: "black" }}>
 					Reset Global State
 				</VSCodeButton>
-				<p className="text-xs mt-[5px] text-[var(--vscode-descriptionForeground)]">
+				<p className="text-xs mt-[5px] text-(--vscode-descriptionForeground)">
 					This will reset all global state and secret storage in the extension.
 				</p>
 			</Section>

webview-ui/src/components/settings/sections/FeatureSettingsSection.tsx

@@ -48,7 +48,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 							}}>
 							Enable Checkpoints
 						</VSCodeCheckbox>
-						<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+						<p className="text-xs text-(--vscode-descriptionForeground)">
 							Enables extension to save checkpoints of workspace throughout the task. Uses git under the hood which
 							may not work well with large workspaces.
 						</p>
@@ -66,7 +66,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 										}}>
 										Enable MCP Marketplace
 									</VSCodeCheckbox>
-									<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+									<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 								</div>
 							</HeroTooltip>
 						) : (
@@ -80,13 +80,13 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 								Enable MCP Marketplace
 							</VSCodeCheckbox>
 						)}
-						<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+						<p className="text-xs text-(--vscode-descriptionForeground)">
 							Enables the MCP Marketplace tab for discovering and installing MCP servers.
 						</p>
 					</div>
 					<div style={{ marginTop: 10 }}>
 						<label
-							className="block text-sm font-medium text-[var(--vscode-foreground)] mb-1"
+							className="block text-sm font-medium text-(--vscode-foreground) mb-1"
 							htmlFor="mcp-display-mode-dropdown">
 							MCP Display Mode
 						</label>
@@ -96,7 +96,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 							onChange={(newMode: McpDisplayMode) => updateSetting("mcpDisplayMode", newMode)}
 							value={mcpDisplayMode}
 						/>
-						<p className="text-xs mt-[5px] text-[var(--vscode-descriptionForeground)]">
+						<p className="text-xs mt-[5px] text-(--vscode-descriptionForeground)">
 							Controls how MCP responses are displayed: plain text, rich formatting with links/images, or markdown
 							rendering.
 						</p>
@@ -110,13 +110,13 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 							}}>
 							Collapse MCP Responses
 						</VSCodeCheckbox>
-						<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+						<p className="text-xs text-(--vscode-descriptionForeground)">
 							Sets the default display mode for MCP response panels
 						</p>
 					</div>
 					<div style={{ marginTop: 10 }}>
 						<label
-							className="block text-sm font-medium text-[var(--vscode-foreground)] mb-1"
+							className="block text-sm font-medium text-(--vscode-foreground) mb-1"
 							htmlFor="openai-reasoning-effort-dropdown">
 							OpenAI Reasoning Effort
 						</label>
@@ -133,7 +133,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 							<VSCodeOption value="medium">Medium</VSCodeOption>
 							<VSCodeOption value="high">High</VSCodeOption>
 						</VSCodeDropdown>
-						<p className="text-xs mt-[5px] text-[var(--vscode-descriptionForeground)]">
+						<p className="text-xs mt-[5px] text-(--vscode-descriptionForeground)">
 							Reasoning effort for the OpenAI family of models(applies to all OpenAI model providers)
 						</p>
 					</div>
@@ -146,7 +146,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 							}}>
 							Enable strict plan mode
 						</VSCodeCheckbox>
-						<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+						<p className="text-xs text-(--vscode-descriptionForeground)">
 							Enforces strict tool use while in plan mode, preventing file edits.
 						</p>
 					</div>
@@ -160,7 +160,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 								}}>
 								Enable Focus Chain
 							</VSCodeCheckbox>
-							<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+							<p className="text-xs text-(--vscode-descriptionForeground)">
 								Enables enhanced task progress tracking and automatic focus chain list management throughout
 								tasks.
 							</p>
@@ -169,7 +169,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 					{focusChainSettings?.enabled && (
 						<div style={{ marginTop: 10, marginLeft: 20 }}>
 							<label
-								className="block text-sm font-medium text-[var(--vscode-foreground)] mb-1"
+								className="block text-sm font-medium text-(--vscode-foreground) mb-1"
 								htmlFor="focus-chain-remind-interval">
 								Focus Chain Reminder Interval
 							</label>
@@ -187,7 +187,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 								}}
 								value={String(focusChainSettings?.remindClineInterval || 6)}
 							/>
-							<p className="text-xs mt-[5px] text-[var(--vscode-descriptionForeground)]">
+							<p className="text-xs mt-[5px] text-(--vscode-descriptionForeground)">
 								Interval (in messages) to remind Cline about its focus chain checklist (1-100). Lower values
 								provide more frequent reminders.
 							</p>
@@ -258,10 +258,10 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 							}}>
 							Enable Auto Compact
 						</VSCodeCheckbox>
-						<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+						<p className="text-xs text-(--vscode-descriptionForeground)">
 							Enables advanced context management system which uses LLM based condensing for next-gen models.{" "}
 							<a
-								className="text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]"
+								className="text-(--vscode-textLink-foreground) hover:text-(--vscode-textLink-activeForeground)"
 								href="https://docs.cline.bot/features/auto-compact"
 								rel="noopener noreferrer"
 								target="_blank">
@@ -280,7 +280,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 								Enable Multi-Root Workspace
 							</VSCodeCheckbox>
 							<p className="text-xs">
-								<span className="text-[var(--vscode-errorForeground)]">Experimental: </span>{" "}
+								<span className="text-(--vscode-errorForeground)">Experimental: </span>{" "}
 								<span className="text-description">Allows cline to work across multiple workspaces.</span>
 							</p>
 						</div>
@@ -296,7 +296,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 								Enable Hooks
 							</VSCodeCheckbox>
 							<p className="text-xs">
-								<span className="text-[var(--vscode-errorForeground)]">Experimental: </span>{" "}
+								<span className="text-(--vscode-errorForeground)">Experimental: </span>{" "}
 								<span className="text-description">
 									Allows execution of hooks from .clinerules/hooks/ directory.
 								</span>
@@ -316,7 +316,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 										}}>
 										Enable YOLO Mode
 									</VSCodeCheckbox>
-									<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+									<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 								</div>
 							</HeroTooltip>
 						) : (
@@ -330,7 +330,7 @@ const FeatureSettingsSection = ({ renderSectionHeader }: FeatureSettingsSectionP
 								Enable YOLO Mode
 							</VSCodeCheckbox>
 						)}
-						<p className="text-xs text-[var(--vscode-errorForeground)]">
+						<p className="text-xs text-(--vscode-errorForeground)">
 							EXPERIMENTAL & DANGEROUS: This mode disables safety checks and user confirmations. Cline will
 							automatically approve all actions without asking. Use with extreme caution.
 						</p>

webview-ui/src/components/settings/sections/GeneralSettingsSection.tsx

@@ -32,7 +32,7 @@ const GeneralSettingsSection = ({ renderSectionHeader }: GeneralSettingsSectionP
 									}}>
 									Allow error and usage reporting
 								</VSCodeCheckbox>
-								<i className="codicon codicon-lock text-[var(--vscode-descriptionForeground)] text-sm" />
+								<i className="codicon codicon-lock text-(--vscode-descriptionForeground) text-sm" />
 							</div>
 						</HeroTooltip>
 					) : (
@@ -47,7 +47,7 @@ const GeneralSettingsSection = ({ renderSectionHeader }: GeneralSettingsSectionP
 							Allow error and usage reporting
 						</VSCodeCheckbox>
 					)}
-					<p className="text-xs mt-[5px] text-[var(--vscode-descriptionForeground)]">
+					<p className="text-xs mt-[5px] text-(--vscode-descriptionForeground)">
 						Help improve Cline by sending usage data and error reports. No code, prompts, or personal information are
 						ever sent. See our{" "}
 						<VSCodeLink

webview-ui/src/components/settings/sections/TerminalSettingsSection.tsx

@@ -91,7 +91,7 @@ export const TerminalSettingsSection: React.FC<TerminalSettingsSectionProps> = (
 								</VSCodeOption>
 							))}
 						</VSCodeDropdown>
-						<p className="text-xs text-[var(--vscode-descriptionForeground)] mt-1">
+						<p className="text-xs text-(--vscode-descriptionForeground) mt-1">
 							Select the default terminal Cline will use. 'Default' uses your VSCode global setting.
 						</p>
 					</div>
@@ -108,9 +108,9 @@ export const TerminalSettingsSection: React.FC<TerminalSettingsSectionProps> = (
 									value={inputValue}
 								/>
 							</div>
-							{inputError && <div className="text-[var(--vscode-errorForeground)] text-xs mt-1">{inputError}</div>}
+							{inputError && <div className="text-(--vscode-errorForeground) text-xs mt-1">{inputError}</div>}
 						</div>
-						<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+						<p className="text-xs text-(--vscode-descriptionForeground)">
 							Set how long Cline waits for shell integration to activate before executing commands. Increase this
 							value if you experience terminal connection timeouts.
 						</p>
@@ -124,17 +124,17 @@ export const TerminalSettingsSection: React.FC<TerminalSettingsSectionProps> = (
 								Enable aggressive terminal reuse
 							</VSCodeCheckbox>
 						</div>
-						<p className="text-xs text-[var(--vscode-descriptionForeground)]">
+						<p className="text-xs text-(--vscode-descriptionForeground)">
 							When enabled, Cline will reuse existing terminal windows that aren't in the current working directory.
 							Disable this if you experience issues with task lockout after a terminal command.
 						</p>
 					</div>
 					<TerminalOutputLineLimitSlider />
-					<div className="mt-5 p-3 bg-[var(--vscode-textBlockQuote-background)] rounded border border-[var(--vscode-textBlockQuote-border)]">
+					<div className="mt-5 p-3 bg-(--vscode-textBlockQuote-background) rounded border border-(--vscode-textBlockQuote-border)">
 						<p className="text-[13px] m-0">
 							<strong>Having terminal issues?</strong> Check our{" "}
 							<a
-								className="text-[var(--vscode-textLink-foreground)] underline hover:no-underline"
+								className="text-(--vscode-textLink-foreground) underline hover:no-underline"
 								href="https://docs.cline.bot/troubleshooting/terminal-quick-fixes"
 								rel="noopener noreferrer"
 								target="_blank">
@@ -142,7 +142,7 @@ export const TerminalSettingsSection: React.FC<TerminalSettingsSectionProps> = (
 							</a>{" "}
 							or the{" "}
 							<a
-								className="text-[var(--vscode-textLink-foreground)] underline hover:no-underline"
+								className="text-(--vscode-textLink-foreground) underline hover:no-underline"
 								href="https://docs.cline.bot/troubleshooting/terminal-integration-guide"
 								rel="noopener noreferrer"
 								target="_blank">

webview-ui/src/components/welcome/HomeHeader.tsx

@@ -38,7 +38,7 @@ const HomeHeader = ({ shouldShowQuickWins = false }: HomeHeaderProps) => {
 			{shouldShowQuickWins && (
 				<div className="mt-4">
 					<button
-						className="flex items-center gap-2 px-4 py-2 rounded-full border border-border-panel bg-white/[0.02] hover:bg-list-background-hover transition-colors duration-150 ease-in-out text-code-foreground text-sm font-medium cursor-pointer"
+						className="flex items-center gap-2 px-4 py-2 rounded-full border border-border-panel bg-white/2 hover:bg-list-background-hover transition-colors duration-150 ease-in-out text-code-foreground text-sm font-medium cursor-pointer"
 						onClick={handleTakeATour}
 						type="button">
 						Take a Tour

webview-ui/src/components/welcome/QuickWinCard.tsx

@@ -8,7 +8,7 @@ interface QuickWinCardProps {
 
 const renderIcon = (iconName?: string) => {
 	if (!iconName) {
-		return <span className="codicon codicon-rocket !text-[28px] !leading-[1]"></span>
+		return <span className="codicon codicon-rocket text-[28px]! leading-none!"></span>
 	}
 
 	let iconClass = "codicon-rocket"
@@ -25,25 +25,23 @@ const renderIcon = (iconName?: string) => {
 		default:
 			break
 	}
-	return <span className={`codicon ${iconClass} !text-[28px] !leading-[1]`}></span>
+	return <span className={`codicon ${iconClass} text-[28px]! leading-none!`}></span>
 }
 
 const QuickWinCard: React.FC<QuickWinCardProps> = ({ task, onExecute }) => {
 	return (
 		<div
-			className="flex items-center mb-2 py-0 px-5 space-x-3 rounded-full cursor-pointer group transition-colors duration-150 ease-in-out bg-white/[0.02] border border-[var(--vscode-panel-border)] hover:bg-[var(--vscode-list-hoverBackground)]"
+			className="flex items-center mb-2 py-0 px-5 space-x-3 rounded-full cursor-pointer group transition-colors duration-150 ease-in-out bg-white/2 border border-(--vscode-panel-border) hover:bg-(--vscode-list-hoverBackground)"
 			onClick={() => onExecute()}>
-			<div className="flex-shrink-0 flex items-center justify-center w-6 h-6 text-[var(--vscode-icon-foreground)]">
+			<div className="shrink-0 flex items-center justify-center w-6 h-6 text-(--vscode-icon-foreground)">
 				{renderIcon(task.icon)}
 			</div>
 
-			<div className="flex-grow min-w-0">
-				<h3 className="text-sm font-medium truncate text-[var(--vscode-editor-foreground)] leading-tight mb-0 mt-0 pt-3">
+			<div className="grow min-w-0">
+				<h3 className="text-sm font-medium truncate text-(--vscode-editor-foreground) leading-tight mb-0 mt-0 pt-3">
 					{task.title}
 				</h3>
-				<p className="text-xs truncate text-[var(--vscode-descriptionForeground)] leading-tight mt-[1px]">
-					{task.description}
-				</p>
+				<p className="text-xs truncate text-(--vscode-descriptionForeground) leading-tight mt-px">{task.description}</p>
 			</div>
 		</div>
 	)

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -49,7 +49,7 @@ const WelcomeView = memo(() => {
 					create new tools and extend my own capabilities.
 				</p>
 
-				<p className="text-[var(--vscode-descriptionForeground)]">
+				<p className="text-(--vscode-descriptionForeground)">
 					Sign up for an account to get started for free, or use an API key that provides access to models like Claude
 					Sonnet.
 				</p>