Refactor button styles for consistency#316004
Draft
mrleemurray wants to merge 2 commits into
Draft
Conversation
…ross themes Co-authored-by: Copilot <copilot@github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors secondary button border styling to improve visual consistency across the workbench, sessions window, and default themes by introducing and adopting a dedicated button.secondaryBorder token.
Changes:
- Introduces a new default for
button.secondaryBorderand wires it throughdefaultButtonStyles. - Updates secondary button consumers (extensions action buttons, Agents window “New Session” button, sessions changes view) to use the secondary border token.
- Updates 2026 default themes to define
button.secondaryBorderand adjustsbutton.border.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/extensions/browser/extensionsActions.ts | Switches extensionButton.border to use buttonSecondaryBorder. |
| src/vs/sessions/contrib/changes/browser/media/changesView.css | Adds secondary border color styling for session action buttons. |
| src/vs/sessions/common/theme.ts | Updates Agents window New Session button border token to use buttonSecondaryBorder. |
| src/vs/platform/theme/common/colors/inputColors.ts | Changes default button.secondaryBorder to a theme-appropriate translucent foreground value. |
| src/vs/platform/theme/browser/defaultStyles.ts | Uses buttonSecondaryBorder for defaultButtonStyles.buttonSecondaryBorder. |
| src/vs/base/browser/ui/button/button.css | Ensures .monaco-text-button.secondary picks up --vscode-button-secondaryBorder. |
| extensions/theme-defaults/themes/2026-light.json | Adds button.secondaryBorder and changes button.border. |
| extensions/theme-defaults/themes/2026-dark.json | Adds button.secondaryBorder and changes button.border. |
Comment on lines
50
to
56
| buttonHoverBackground: asCssVariable(buttonHoverBackground), | ||
| buttonSecondaryForeground: asCssVariable(buttonSecondaryForeground), | ||
| buttonSecondaryBackground: asCssVariable(buttonSecondaryBackground), | ||
| buttonSecondaryHoverBackground: asCssVariable(buttonSecondaryHoverBackground), | ||
| buttonSecondaryBorder: asCssVariable(buttonBorder), | ||
| buttonSecondaryBorder: asCssVariable(buttonSecondaryBorder), | ||
| buttonBorder: asCssVariable(buttonBorder), | ||
| }; |
Comment on lines
229
to
234
| .changes-view-body .chat-editing-session-actions .monaco-button.secondary.monaco-text-button { | ||
| background-color: var(--vscode-button-secondaryBackground); | ||
| color: var(--vscode-button-secondaryForeground); | ||
| border-color: var(--vscode-button-secondaryBorder); | ||
| } | ||
|
|
Comment on lines
21
to
+28
| "button.background": "#0069CC", | ||
| "button.foreground": "#FFFFFF", | ||
| "button.hoverBackground": "#0063C1", | ||
| "button.border": "#EEEEF1", | ||
| "button.border": "#0069CC", | ||
| "button.secondaryBackground": "#EAEAEA", | ||
| "button.secondaryForeground": "#202020", | ||
| "button.secondaryHoverBackground": "#F2F3F4", | ||
| "button.secondaryBorder": "#EAEAEA", |
Comment on lines
21
to
27
| "button.background": "#297AA0", | ||
| "button.foreground": "#FFFFFF", | ||
| "button.hoverBackground": "#2B7DA3", | ||
| "button.border": "#333536FF", | ||
| "button.border": "#297AA0", | ||
| "button.secondaryHoverBackground": "#FFFFFF10", | ||
| "button.secondaryBorder": "#333536", | ||
| "checkbox.background": "#242526", |
Contributor
Screenshot ChangesBase: Changed (70)
|
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceSelectedEmpty/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceSelectedCheckedEmpty/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceSelectedCheckedEmpty/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceSelectedFilled/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceSelectedFilled/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceSelectedCheckedFilled/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceSelectedCheckedFilled/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/UserSelectedEmpty/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/UserSelectedEmpty/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/UserSelectedCheckedEmpty/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/UserSelectedCheckedEmpty/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/UserSelectedFilled/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/UserSelectedFilled/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/UserSelectedCheckedFilled/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/UserSelectedCheckedFilled/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceUnavailableEmpty/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceUnavailableEmpty/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceUnavailableCheckedEmpty/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceUnavailableCheckedEmpty/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceUnavailableFilled/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceUnavailableFilled/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceUnavailableCheckedFilled/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/WorkspaceUnavailableCheckedFilled/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/ExistingWorkspaceTaskLocked/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/ExistingWorkspaceTaskLocked/Light
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/ExistingUserTaskLockedChecked/Dark
| Before | After |
|---|---|
 |
 |
sessions/runScriptCustomTaskWidget/ExistingUserTaskLockedChecked/Light
| Before | After |
|---|---|
 |
 |
sessions/sessionsPolicyBlocked/PolicyBlocked/Dark
| Before | After |
|---|---|
 |
 |
sessions/sessionsPolicyBlocked/PolicyBlocked/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/PendingToolApproval/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/PendingToolApproval/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginBrowseMode/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginBrowseMode/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Light
| Before | After |
|---|---|
 |
 |
baseUI/Buttons/Dark
| Before | After |
|---|---|
 |
 |
baseUI/Buttons/Light
| Before | After |
|---|---|
 |
 |
baseUI/ButtonBar/Dark
| Before | After |
|---|---|
 |
 |
baseUI/ButtonBar/Light
| Before | After |
|---|---|
 |
 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Update button styles and colors to enhance consistency across different themes. This change improves the visual coherence of secondary buttons throughout the application.