From 8de45c4b6a70dc841f758209b0f24a8a6462c0c5 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Mon, 8 Jun 2026 11:30:16 +0100 Subject: [PATCH 1/2] Refactor chat widget styles to use CSS variables for font sizes and weights Co-authored-by: Copilot --- .../media/chatConfirmationWidget.css | 22 ++++++++++------ .../chatContentParts/media/chatPlanReview.css | 2 +- .../media/chatQuestionCarousel.css | 26 ++++++++++--------- .../media/chatToolConfirmationCarousel.css | 2 +- .../input/media/chatGoalBannerWidget.css | 4 +-- .../media/chatInputNotificationWidget.css | 10 +++---- 6 files changed, 37 insertions(+), 29 deletions(-) diff --git a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatConfirmationWidget.css b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatConfirmationWidget.css index 6edbfe4576a83f..d09238101857aa 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatConfirmationWidget.css +++ b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatConfirmationWidget.css @@ -98,9 +98,9 @@ } .chat-confirmation-widget-message h3 { - font-weight: 600; + font-weight: var(--vscode-agents-fontWeight-semiBold); margin: 4px 0 8px; - font-size: 12px; + font-size: var(--vscode-agents-fontSize-label1); } .chat-confirmation-widget .chat-confirmation-widget-title .rendered-markdown p a { @@ -108,7 +108,8 @@ } .chat-confirmation-widget-title small { - font-size: 1em; + font-size: var(--vscode-agents-fontSize-body2); + font-weight: var(--vscode-agents-fontWeight-regular); opacity: 0.7; &::before { @@ -236,6 +237,11 @@ justify-content: space-between; column-gap: 10px; + .chat-title { + font-size: var(--vscode-agents-fontSize-heading3); + font-weight: var(--vscode-agents-fontWeight-semiBold); + } + .rendered-markdown { line-height: 24px !important; @@ -301,7 +307,7 @@ flex: 1; min-width: 0; color: var(--vscode-descriptionForeground); - font-size: 12px; + font-size: var(--vscode-agents-fontSize-label1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -344,8 +350,8 @@ display: inline-flex; gap: 4px; margin-left: 6px; - font-size: 11px; - font-weight: 500; + font-size: var(--vscode-agents-fontSize-label2); + font-weight: var(--vscode-agents-fontWeight-semiBold); flex-shrink: 0; } @@ -449,7 +455,7 @@ } .monaco-button-dropdown > .monaco-button.monaco-dropdown-button.codicon[class*='codicon-'] { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); } } @@ -485,7 +491,7 @@ } .codicon { - font-size: 12px; + font-size: var(--vscode-codiconFontSize-compact); } &:hover { diff --git a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatPlanReview.css b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatPlanReview.css index 3067e707276335..891cf12a8290ff 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatPlanReview.css +++ b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatPlanReview.css @@ -65,7 +65,7 @@ .interactive-session .chat-plan-review-container .chat-plan-review-title-label { flex: 1; min-width: 0; - font-weight: 500; + font-weight: var(--vscode-agents-fontWeight-semiBold); font-size: var(--vscode-chat-font-size-body-s); white-space: nowrap; overflow: hidden; diff --git a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css index 79ed08b2398f79..82c589c69c081c 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css +++ b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css @@ -79,8 +79,8 @@ word-break: break-word; overflow-wrap: anywhere; white-space: normal; - font-weight: 500; - font-size: var(--vscode-chat-font-size-body-s); + font-weight: var(--vscode-agents-fontWeight-semiBold); + font-size: var(--vscode-agents-fontSize-heading3); margin: 0; .rendered-markdown { @@ -179,7 +179,7 @@ .interactive-session .chat-question-carousel-container .chat-question-input-container { display: flex; flex-direction: column; - padding: 8px; + padding: 8px 8px 8px 16px; min-width: 0; &::after { @@ -204,7 +204,7 @@ .chat-question-list-item { display: flex; align-items: center; - gap: 12px; + gap: 8px; padding: 6px 8px; cursor: pointer; border-radius: var(--vscode-cornerRadius-medium); @@ -228,7 +228,8 @@ /* Label in list item */ .chat-question-list-label { - font-size: var(--vscode-chat-font-size-body-s); + font-size: var(--vscode-agents-fontSize-body2); + font-weight: var(--vscode-agents-fontWeight-semiBold); flex: 1; word-wrap: break-word; overflow-wrap: break-word; @@ -237,12 +238,12 @@ } .chat-question-list-label-title { - font-weight: 500; + font-weight: var(--vscode-agents-fontWeight-semiBold); line-height: 1.4; } .chat-question-list-label-desc { - font-weight: normal; + font-weight: var(--vscode-agents-fontWeight-regular); color: var(--vscode-descriptionForeground); } } @@ -252,8 +253,8 @@ .chat-question-list-number { line-height: 1.4; - font-size: var(--vscode-chat-font-size-body-s); - font-weight: 500; + font-size: var(--vscode-agents-fontSize-body2); + font-weight: var(--vscode-agents-fontWeight-semiBold); } .chat-question-list-checkbox { @@ -330,7 +331,7 @@ flex-direction: row; align-items: center; padding: 4px 8px; - gap: 12px; + gap: 8px; .chat-question-freeform-number { height: fit-content; @@ -373,7 +374,8 @@ /* todo: change to use keybinding service so we don't have to recreate this */ .chat-question-list-number, .chat-question-freeform-number { - font-size: var(--vscode-chat-font-size-body-s); + font-size: var(--vscode-agents-fontSize-body2); + font-weight: var(--vscode-agents-fontWeight-semiBold); color: var(--vscode-descriptionForeground); flex-shrink: 0; min-width: 1ch; @@ -443,7 +445,7 @@ } .chat-question-submit-hint { - font-size: 11px; + font-size: var(--vscode-agents-fontSize-body2); color: var(--vscode-descriptionForeground); } diff --git a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatToolConfirmationCarousel.css b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatToolConfirmationCarousel.css index e550cddca78290..9d94129450481c 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatToolConfirmationCarousel.css +++ b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatToolConfirmationCarousel.css @@ -68,7 +68,7 @@ } .chat-tool-carousel-collapsed-title { - font-weight: 500; + font-weight: var(--vscode-agents-fontWeight-semiBold); font-size: var(--vscode-chat-font-size-body-s); white-space: nowrap; color: var(--vscode-foreground); diff --git a/src/vs/workbench/contrib/chat/browser/widget/input/media/chatGoalBannerWidget.css b/src/vs/workbench/contrib/chat/browser/widget/input/media/chatGoalBannerWidget.css index 3b1a45e4d8c664..a4fe17ea68c29d 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/input/media/chatGoalBannerWidget.css +++ b/src/vs/workbench/contrib/chat/browser/widget/input/media/chatGoalBannerWidget.css @@ -25,7 +25,7 @@ border-top-right-radius: 4px; background-color: color-mix(in srgb, var(--vscode-focusBorder) 6%, var(--vscode-editorWidget-background)); color: var(--vscode-foreground); - font-size: 12px; + font-size: var(--vscode-agents-fontSize-label1); line-height: 18px; min-width: 0; } @@ -39,7 +39,7 @@ .chat-goal-banner .chat-goal-banner-label { flex-shrink: 0; - font-weight: 600; + font-weight: var(--vscode-agents-fontWeight-semiBold); } .chat-goal-banner .chat-goal-banner-text { diff --git a/src/vs/workbench/contrib/chat/browser/widget/input/media/chatInputNotificationWidget.css b/src/vs/workbench/contrib/chat/browser/widget/input/media/chatInputNotificationWidget.css index f956b496fbbea1..791d468f83cba8 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/input/media/chatInputNotificationWidget.css +++ b/src/vs/workbench/contrib/chat/browser/widget/input/media/chatInputNotificationWidget.css @@ -81,8 +81,8 @@ /* Title */ .chat-input-notification .chat-input-notification-title { - font-size: 12px; - font-weight: 600; + font-size: var(--vscode-agents-fontSize-label1); + font-weight: var(--vscode-agents-fontWeight-semiBold); line-height: 18px; color: var(--vscode-foreground); flex: 1; @@ -105,7 +105,7 @@ .chat-input-notification .chat-input-notification-title-markdown code { font-family: var(--monaco-monospace-font); - font-size: 11px; + font-size: var(--vscode-agents-fontSize-body2); padding: 0 3px; border-radius: 3px; background: var(--vscode-textCodeBlock-background); @@ -121,7 +121,7 @@ /* Description */ .chat-input-notification .chat-input-notification-description { - font-size: 12px; + font-size: var(--vscode-agents-fontSize-label1); line-height: 18px; color: var(--vscode-descriptionForeground); flex: 1 1 auto; @@ -142,7 +142,7 @@ /* Action buttons */ .chat-input-notification .chat-input-notification-action-button { - font-size: 11px; + font-size: var(--vscode-agents-fontSize-label2); padding: 4px 12px; min-width: unset; width: auto; From 5bace8ca469663c51d072288a3fe66f5ce03f64f Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Mon, 8 Jun 2026 12:19:03 +0100 Subject: [PATCH 2/2] Update padding for chat question input container in carousel --- .../widget/chatContentParts/media/chatQuestionCarousel.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css index 82c589c69c081c..cd0d2c2bea6daf 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css +++ b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css @@ -179,7 +179,7 @@ .interactive-session .chat-question-carousel-container .chat-question-input-container { display: flex; flex-direction: column; - padding: 8px 8px 8px 16px; + padding: 8px 16px; min-width: 0; &::after {