diff --git a/extensions/theme-defaults/themes/2026-dark.json b/extensions/theme-defaults/themes/2026-dark.json index 5f17ea0f46833..c9b1f102f5d01 100644 --- a/extensions/theme-defaults/themes/2026-dark.json +++ b/extensions/theme-defaults/themes/2026-dark.json @@ -21,8 +21,9 @@ "button.background": "#297AA0", "button.foreground": "#FFFFFF", "button.hoverBackground": "#2B7DA3", - "button.border": "#333536FF", + "button.border": "#297AA0", "button.secondaryHoverBackground": "#FFFFFF10", + "button.secondaryBorder": "#333536", "checkbox.background": "#242526", "checkbox.border": "#333536", "checkbox.foreground": "#8C8C8C", diff --git a/extensions/theme-defaults/themes/2026-light.json b/extensions/theme-defaults/themes/2026-light.json index 40ee59eb2bc8f..8cba580379023 100644 --- a/extensions/theme-defaults/themes/2026-light.json +++ b/extensions/theme-defaults/themes/2026-light.json @@ -21,10 +21,11 @@ "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", "checkbox.background": "#EAEAEA", "checkbox.border": "#D8D8D8", "checkbox.foreground": "#606060", diff --git a/src/vs/base/browser/ui/button/button.css b/src/vs/base/browser/ui/button/button.css index 0ec4cbb4712dd..f8f02ab6152b6 100644 --- a/src/vs/base/browser/ui/button/button.css +++ b/src/vs/base/browser/ui/button/button.css @@ -19,6 +19,10 @@ overflow-wrap: normal; } +.monaco-text-button.secondary { + border-color: var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent)); +} + .monaco-text-button.small { line-height: 14px; font-size: 11px; @@ -115,6 +119,10 @@ align-items: center; } +.monaco-button-dropdown > .monaco-button.monaco-dropdown-button.secondary { + border-color: var(--vscode-button-secondaryBorder, var(--vscode-button-border, transparent)); +} + .monaco-button-dropdown > .monaco-button.monaco-text-button { border-radius: 4px 0 0 4px; } @@ -177,6 +185,8 @@ .monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator { background-color: var(--vscode-button-secondaryBackground); + border-top-color: var(--vscode-button-secondaryBorder, var(--vscode-button-border)); + border-bottom-color: var(--vscode-button-secondaryBorder, var(--vscode-button-border)); } .monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div { diff --git a/src/vs/platform/theme/browser/defaultStyles.ts b/src/vs/platform/theme/browser/defaultStyles.ts index fdc98de1cf6e9..063beb95f610d 100644 --- a/src/vs/platform/theme/browser/defaultStyles.ts +++ b/src/vs/platform/theme/browser/defaultStyles.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { IButtonStyles } from '../../../base/browser/ui/button/button.js'; import { IKeybindingLabelStyles } from '../../../base/browser/ui/keybindingLabel/keybindingLabel.js'; -import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssVariable, widgetShadow, buttonForeground, buttonSeparator, buttonBackground, buttonHoverBackground, buttonSecondaryForeground, buttonSecondaryBackground, buttonSecondaryHoverBackground, buttonBorder, progressBarBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputActiveOptionBackground, editorWidgetBackground, editorWidgetForeground, contrastBorder, checkboxBorder, checkboxBackground, checkboxForeground, problemsErrorIconForeground, problemsWarningIconForeground, problemsInfoIconForeground, inputBackground, inputForeground, inputBorder, textLinkForeground, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationErrorBorder, inputValidationErrorBackground, inputValidationErrorForeground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFilterWidgetShadow, badgeBackground, badgeForeground, breadcrumbsBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, activeContrastBorder, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropOverBackground, listFocusAndSelectionOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, tableColumnsBorder, tableOddRowsBackgroundColor, treeIndentGuidesStroke, asCssVariableWithDefault, editorWidgetBorder, focusBorder, pickerGroupForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, selectBackground, selectBorder, selectForeground, selectListBackground, treeInactiveIndentGuidesStroke, menuBorder, menuForeground, menuBackground, menuSelectionBorder, menuSeparatorBackground, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, listDropBetweenBackground, radioActiveBackground, radioActiveForeground, radioInactiveBackground, radioInactiveForeground, radioInactiveBorder, radioInactiveHoverBackground, radioActiveBorder, checkboxDisabledBackground, checkboxDisabledForeground, widgetBorder } from '../common/colorRegistry.js'; +import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssVariable, widgetShadow, buttonForeground, buttonSeparator, buttonBackground, buttonHoverBackground, buttonSecondaryForeground, buttonSecondaryBackground, buttonSecondaryHoverBackground, buttonBorder, progressBarBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputActiveOptionBackground, editorWidgetBackground, editorWidgetForeground, contrastBorder, checkboxBorder, checkboxBackground, checkboxForeground, problemsErrorIconForeground, problemsWarningIconForeground, problemsInfoIconForeground, inputBackground, inputForeground, inputBorder, textLinkForeground, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationErrorBorder, inputValidationErrorBackground, inputValidationErrorForeground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFilterWidgetShadow, badgeBackground, badgeForeground, breadcrumbsBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, activeContrastBorder, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropOverBackground, listFocusAndSelectionOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, tableColumnsBorder, tableOddRowsBackgroundColor, treeIndentGuidesStroke, asCssVariableWithDefault, editorWidgetBorder, focusBorder, pickerGroupForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, selectBackground, selectBorder, selectForeground, selectListBackground, treeInactiveIndentGuidesStroke, menuBorder, menuForeground, menuBackground, menuSelectionBorder, menuSeparatorBackground, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, listDropBetweenBackground, radioActiveBackground, radioActiveForeground, radioInactiveBackground, radioInactiveForeground, radioInactiveBorder, radioInactiveHoverBackground, radioActiveBorder, checkboxDisabledBackground, checkboxDisabledForeground, widgetBorder, buttonSecondaryBorder } from '../common/colorRegistry.js'; import { IProgressBarStyles } from '../../../base/browser/ui/progressbar/progressbar.js'; import { ICheckboxStyles, IToggleStyles } from '../../../base/browser/ui/toggle/toggle.js'; import { IDialogStyles } from '../../../base/browser/ui/dialog/dialog.js'; @@ -51,7 +51,7 @@ export const defaultButtonStyles: IButtonStyles = { buttonSecondaryForeground: asCssVariable(buttonSecondaryForeground), buttonSecondaryBackground: asCssVariable(buttonSecondaryBackground), buttonSecondaryHoverBackground: asCssVariable(buttonSecondaryHoverBackground), - buttonSecondaryBorder: asCssVariable(buttonBorder), + buttonSecondaryBorder: asCssVariable(buttonSecondaryBorder), buttonBorder: asCssVariable(buttonBorder), }; diff --git a/src/vs/platform/theme/common/colors/inputColors.ts b/src/vs/platform/theme/common/colors/inputColors.ts index 9e6e2681d433f..9f7aedf44cb86 100644 --- a/src/vs/platform/theme/common/colors/inputColors.ts +++ b/src/vs/platform/theme/common/colors/inputColors.ts @@ -139,7 +139,7 @@ export const buttonSecondaryBackground = registerColor('button.secondaryBackgrou nls.localize('buttonSecondaryBackground', "Secondary button background color.")); export const buttonSecondaryBorder = registerColor('button.secondaryBorder', - contrastBorder, + { dark: transparent(foreground, 0.15), light: transparent(foreground, 0.15), hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('buttonSecondaryBorder', "Secondary button border color.")); export const buttonSecondaryHoverBackground = registerColor('button.secondaryHoverBackground', diff --git a/src/vs/sessions/common/theme.ts b/src/vs/sessions/common/theme.ts index d6ed3b6226915..981961d7ea8aa 100644 --- a/src/vs/sessions/common/theme.ts +++ b/src/vs/sessions/common/theme.ts @@ -15,7 +15,7 @@ import { registerColor, transparent } from '../../platform/theme/common/colorUti import { contrastBorder, focusBorder } from '../../platform/theme/common/colorRegistry.js'; import { editorWidgetBorder, editorBackground, toolbarHoverBackground } from '../../platform/theme/common/colors/editorColors.js'; import { foreground } from '../../platform/theme/common/colors/baseColors.js'; -import { buttonBackground, buttonBorder, inputBackground, inputBorder, inputForeground, inputPlaceholderForeground } from '../../platform/theme/common/colors/inputColors.js'; +import { buttonBackground, buttonSecondaryBorder, inputBackground, inputBorder, inputForeground, inputPlaceholderForeground } from '../../platform/theme/common/colors/inputColors.js'; import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND } from '../../workbench/common/theme.js'; // ============================================================================ @@ -126,7 +126,7 @@ export const agentsNewSessionButtonForeground = registerColor( ); export const agentsNewSessionButtonBorder = registerColor( - 'agentsNewSessionButton.border', buttonBorder, + 'agentsNewSessionButton.border', buttonSecondaryBorder, localize('agentsNewSessionButton.border', 'Border color of the New Session button in the agent sessions sidebar.') ); diff --git a/src/vs/sessions/contrib/changes/browser/media/changesView.css b/src/vs/sessions/contrib/changes/browser/media/changesView.css index d7895de28598d..4c3c7ca6cd524 100644 --- a/src/vs/sessions/contrib/changes/browser/media/changesView.css +++ b/src/vs/sessions/contrib/changes/browser/media/changesView.css @@ -229,6 +229,7 @@ .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); } .changes-view-body .chat-editing-session-actions.outside-card .monaco-button-dropdown > .monaco-button.secondary.monaco-text-button { diff --git a/src/vs/workbench/contrib/extensions/browser/extensionsActions.ts b/src/vs/workbench/contrib/extensions/browser/extensionsActions.ts index bdf319de98ebf..e7dab00f7e5db 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionsActions.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionsActions.ts @@ -29,7 +29,7 @@ import { CommandsRegistry, ICommandService } from '../../../../platform/commands import { ConfigurationTarget, IConfigurationService } from '../../../../platform/configuration/common/configuration.js'; import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from '../../../../platform/theme/common/themeService.js'; import { ThemeIcon } from '../../../../base/common/themables.js'; -import { buttonBackground, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, registerColor, editorWarningForeground, editorInfoForeground, editorErrorForeground, buttonSeparator, buttonBorder, contrastBorder } from '../../../../platform/theme/common/colorRegistry.js'; +import { buttonBackground, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, registerColor, editorWarningForeground, editorInfoForeground, editorErrorForeground, buttonSeparator, contrastBorder, buttonSecondaryBorder } from '../../../../platform/theme/common/colorRegistry.js'; import { IJSONEditingService } from '../../../services/configuration/common/jsonEditing.js'; import { ITextEditorSelection } from '../../../../platform/editor/common/editor.js'; import { ITextModelService } from '../../../../editor/common/services/resolverService.js'; @@ -3409,8 +3409,8 @@ registerColor('extensionButton.hoverBackground', { }, localize('extensionButtonHoverBackground', "Button background hover color for extension actions.")); registerColor('extensionButton.border', { - dark: buttonBorder, - light: buttonBorder, + dark: buttonSecondaryBorder, + light: buttonSecondaryBorder, hcDark: contrastBorder, hcLight: contrastBorder }, localize('extensionButtonBorder', "Button border color for extension actions."));