From 88d2178cd5f8aa8b86cfe52dcaad290d3018772c Mon Sep 17 00:00:00 2001 From: David Dossett Date: Wed, 30 Nov 2022 13:53:51 -0800 Subject: [PATCH 1/5] Add border to quick pick to match menus --- src/vs/base/parts/quickinput/browser/quickInput.ts | 6 +++--- src/vs/platform/quickinput/browser/quickInput.ts | 4 ++-- src/vs/platform/theme/common/colorRegistry.ts | 1 + 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/vs/base/parts/quickinput/browser/quickInput.ts b/src/vs/base/parts/quickinput/browser/quickInput.ts index f0a8d48412620..313bb5086aeb2 100644 --- a/src/vs/base/parts/quickinput/browser/quickInput.ts +++ b/src/vs/base/parts/quickinput/browser/quickInput.ts @@ -68,7 +68,7 @@ export interface IQuickInputWidgetStyles { quickInputBackground?: Color; quickInputForeground?: Color; quickInputTitleBackground?: Color; - contrastBorder?: Color; + widgetBorder?: Color; widgetShadow?: Color; } @@ -1816,13 +1816,13 @@ export class QuickInputController extends Disposable { quickInputTitleBackground, quickInputBackground, quickInputForeground, - contrastBorder, + widgetBorder, widgetShadow, } = this.styles.widget; this.ui.titleBar.style.backgroundColor = quickInputTitleBackground ? quickInputTitleBackground.toString() : ''; this.ui.container.style.backgroundColor = quickInputBackground ? quickInputBackground.toString() : ''; this.ui.container.style.color = quickInputForeground ? quickInputForeground.toString() : ''; - this.ui.container.style.border = contrastBorder ? `1px solid ${contrastBorder}` : ''; + this.ui.container.style.border = widgetBorder ? `1px solid ${widgetBorder}` : ''; this.ui.container.style.boxShadow = widgetShadow ? `0 0 8px 2px ${widgetShadow}` : ''; this.ui.count.style(this.styles.countBadge); this.ui.list.style(this.styles.list); diff --git a/src/vs/platform/quickinput/browser/quickInput.ts b/src/vs/platform/quickinput/browser/quickInput.ts index a6a0f7ec7ccc4..6cff30f712c79 100644 --- a/src/vs/platform/quickinput/browser/quickInput.ts +++ b/src/vs/platform/quickinput/browser/quickInput.ts @@ -17,7 +17,7 @@ import { QuickAccessController } from 'vs/platform/quickinput/browser/quickAcces import { IQuickAccessController } from 'vs/platform/quickinput/common/quickAccess'; import { IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInputButton, IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, QuickPickInput } from 'vs/platform/quickinput/common/quickInput'; import { defaultButtonStyles, defaultInputBoxStyles, defaultKeybindingLabelStyles, defaultProgressBarStyles, defaultToggleStyles } from 'vs/platform/theme/browser/defaultStyles'; -import { activeContrastBorder, badgeBackground, badgeForeground, contrastBorder, pickerGroupBorder, pickerGroupForeground, quickInputBackground, quickInputForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, quickInputTitleBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { activeContrastBorder, badgeBackground, badgeForeground, contrastBorder, pickerGroupBorder, pickerGroupForeground, quickInputBackground, quickInputForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, quickInputTitleBackground, widgetBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { computeStyles } from 'vs/platform/theme/common/styler'; import { IThemeService, Themable } from 'vs/platform/theme/common/themeService'; @@ -190,7 +190,7 @@ export class QuickInputService extends Themable implements IQuickInputService { quickInputBackground, quickInputForeground, quickInputTitleBackground, - contrastBorder, + widgetBorder, widgetShadow }), }, diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 203b79689b402..aba52a9a08f76 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -240,6 +240,7 @@ export const textCodeBlockBackground = registerColor('textCodeBlock.background', // ----- widgets export const widgetShadow = registerColor('widget.shadow', { dark: transparent(Color.black, .36), light: transparent(Color.black, .16), hcDark: null, hcLight: null }, nls.localize('widgetShadow', 'Shadow color of widgets such as find/replace inside the editor.')); +export const widgetBorder = registerColor('widget.border', { dark: '#ffffff15', light: transparent(Color.black, .16), hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('widgetBorder', 'Border color of widgets such as find/replace inside the editor.')); export const inputBackground = registerColor('input.background', { dark: '#3C3C3C', light: Color.white, hcDark: Color.black, hcLight: Color.white }, nls.localize('inputBoxBackground', "Input box background.")); export const inputForeground = registerColor('input.foreground', { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground }, nls.localize('inputBoxForeground', "Input box foreground.")); From 352373afae9e9c87e249e77a0cc44053e384d0d0 Mon Sep 17 00:00:00 2001 From: David Dossett Date: Wed, 30 Nov 2022 15:29:35 -0800 Subject: [PATCH 2/5] Add more borders and border radius to widgets --- src/vs/editor/contrib/find/browser/findWidget.css | 1 + src/vs/editor/contrib/find/browser/findWidget.ts | 7 ++++++- .../browser/parts/editor/breadcrumbsPicker.ts | 4 +++- .../parts/notifications/media/notificationsList.css | 6 ++++++ .../parts/notifications/media/notificationsToasts.css | 1 + src/vs/workbench/common/theme.ts | 10 +++++----- src/vs/workbench/contrib/debug/browser/debugToolBar.ts | 4 ++-- .../contrib/debug/browser/media/debugToolBar.css | 1 + 8 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/vs/editor/contrib/find/browser/findWidget.css b/src/vs/editor/contrib/find/browser/findWidget.css index 2a7478d362e6c..a1bfbe07e68c7 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.css +++ b/src/vs/editor/contrib/find/browser/findWidget.css @@ -14,6 +14,7 @@ padding: 0 4px; box-sizing: border-box; transform: translateY(calc(-100% - 10px)); /* shadow (10px) */ + border-radius: 3px; } .monaco-workbench.reduce-motion .monaco-editor .find-widget { diff --git a/src/vs/editor/contrib/find/browser/findWidget.ts b/src/vs/editor/contrib/find/browser/findWidget.ts index 5d4b9f76f638b..91b520437fc30 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.ts +++ b/src/vs/editor/contrib/find/browser/findWidget.ts @@ -36,7 +36,7 @@ import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/c import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage'; -import { asCssValue, contrastBorder, editorFindMatch, editorFindMatchBorder, editorFindMatchHighlight, editorFindMatchHighlightBorder, editorFindRangeHighlight, editorFindRangeHighlightBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, editorWidgetResizeBorder, errorForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, toolbarHoverBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { asCssValue, contrastBorder, editorFindMatch, editorFindMatchBorder, editorFindMatchHighlight, editorFindMatchHighlightBorder, editorFindRangeHighlight, editorFindRangeHighlightBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, editorWidgetResizeBorder, errorForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, toolbarHoverBackground, widgetBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { registerIcon, widgetClose } from 'vs/platform/theme/common/iconRegistry'; import { IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService'; import { isHighContrast } from 'vs/platform/theme/common/theme'; @@ -1387,6 +1387,11 @@ registerThemingParticipant((theme, collector) => { collector.addRule(`.monaco-editor .find-widget { box-shadow: 0 0 8px 2px ${widgetShadowColor}; }`); } + const widgetBorderColor = theme.getColor(widgetBorder); + if (widgetBorderColor) { + collector.addRule(`.monaco-editor .find-widget { border: 1px solid ${widgetBorderColor}; }`); + } + const findMatchHighlightBorder = theme.getColor(editorFindMatchHighlightBorder); if (findMatchHighlightBorder) { collector.addRule(`.monaco-editor .findMatch { border: 1px ${isHighContrast(theme.type) ? 'dotted' : 'solid'} ${findMatchHighlightBorder}; box-sizing: border-box; }`); diff --git a/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts b/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts index 4f4e5b1c52a8e..9ca0b4310a585 100644 --- a/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts +++ b/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts @@ -17,7 +17,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur import { FileKind, IFileService, IFileStat } from 'vs/platform/files/common/files'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { WorkbenchDataTree, WorkbenchAsyncDataTree } from 'vs/platform/list/browser/listService'; -import { breadcrumbsPickerBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { breadcrumbsPickerBackground, widgetBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { isWorkspace, isWorkspaceFolder, IWorkspace, IWorkspaceContextService, IWorkspaceFolder } from 'vs/platform/workspace/common/workspace'; import { ResourceLabels, IResourceLabel, DEFAULT_LABELS_CONTAINER } from 'vs/workbench/browser/labels'; import { BreadcrumbsConfig } from 'vs/workbench/browser/parts/editor/breadcrumbs'; @@ -95,7 +95,9 @@ export abstract class BreadcrumbsPicker { this._treeContainer = document.createElement('div'); this._treeContainer.style.background = color ? color.toString() : ''; this._treeContainer.style.paddingTop = '2px'; + this._treeContainer.style.borderRadius = '3px'; this._treeContainer.style.boxShadow = `0 0 8px 2px ${this._themeService.getColorTheme().getColor(widgetShadow)}`; + this._treeContainer.style.border = `1px solid ${this._themeService.getColorTheme().getColor(widgetBorder)}`; this._domNode.appendChild(this._treeContainer); this._layoutInfo = { maxHeight, width, arrowSize, arrowOffset, inputHeight: 0 }; diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsList.css b/src/vs/workbench/browser/parts/notifications/media/notificationsList.css index 87b72a07b53c5..5fbed49c534d8 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsList.css +++ b/src/vs/workbench/browser/parts/notifications/media/notificationsList.css @@ -9,6 +9,7 @@ color: var(--vscode-notifications-foreground); background: var(--vscode-notifications-background); outline-color: var(--vscode-contrastBorder); + border-radius: inherit; } .monaco-workbench .notifications-list-container .notification-list-item { @@ -18,6 +19,7 @@ padding: 10px 5px; height: 100%; box-sizing: border-box; + border-radius: 4px; } .monaco-workbench .notifications-list-container .notification-offset-helper { @@ -27,6 +29,10 @@ word-wrap: break-word; /* never overflow long words, but break to next line */ } +.monaco-workbench .notifications-list-container .monaco-scrollable-element { + border-radius: 4px; +} + /** Notification: Main Row */ .monaco-workbench .notifications-list-container .notification-list-item > .notification-list-item-main-row { diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css b/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css index 58b74fb0785d0..4bf459b359954 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css +++ b/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css @@ -30,6 +30,7 @@ transform: translate3d(0px, 100%, 0px); /* move the notification 50px to the bottom (to prevent bleed through) */ opacity: 0; /* fade the toast in */ transition: transform 300ms ease-out, opacity 300ms ease-out; + border-radius: 4px; } .monaco-workbench.reduce-motion > .notifications-toasts .notification-toast-container > .notification-toast { diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 63f1659745455..2e7d0fed7466e 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { localize } from 'vs/nls'; -import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder, activeContrastBorder, editorWidgetForeground, editorErrorForeground, editorWarningForeground, editorInfoForeground, treeIndentGuidesStroke, errorForeground, listActiveSelectionBackground, listActiveSelectionForeground, editorForeground, toolbarHoverBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry'; +import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder, activeContrastBorder, editorWidgetForeground, editorErrorForeground, editorWarningForeground, editorInfoForeground, treeIndentGuidesStroke, errorForeground, listActiveSelectionBackground, listActiveSelectionForeground, editorForeground, toolbarHoverBackground, inputBorder, widgetBorder } from 'vs/platform/theme/common/colorRegistry'; import { IColorTheme } from 'vs/platform/theme/common/themeService'; import { Color } from 'vs/base/common/color'; import { ColorScheme } from 'vs/platform/theme/common/theme'; @@ -799,15 +799,15 @@ export const MENUBAR_SELECTION_BORDER = registerColor('menubar.selectionBorder', // < --- Notifications --- > export const NOTIFICATIONS_CENTER_BORDER = registerColor('notificationCenter.border', { - dark: null, - light: null, + dark: widgetBorder, + light: widgetBorder, hcDark: contrastBorder, hcLight: contrastBorder }, localize('notificationCenterBorder', "Notifications center border color. Notifications slide in from the bottom right of the window.")); export const NOTIFICATIONS_TOAST_BORDER = registerColor('notificationToast.border', { - dark: null, - light: null, + dark: widgetBorder, + light: widgetBorder, hcDark: contrastBorder, hcLight: contrastBorder }, localize('notificationToastBorder', "Notification toast border color. Notifications slide in from the bottom right of the window.")); diff --git a/src/vs/workbench/contrib/debug/browser/debugToolBar.ts b/src/vs/workbench/contrib/debug/browser/debugToolBar.ts index 32b27bc55edec..d599dec036944 100644 --- a/src/vs/workbench/contrib/debug/browser/debugToolBar.ts +++ b/src/vs/workbench/contrib/debug/browser/debugToolBar.ts @@ -27,7 +27,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { INotificationService } from 'vs/platform/notification/common/notification'; import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { widgetBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { IThemeService, Themable, ThemeIcon } from 'vs/platform/theme/common/themeService'; import { IWorkbenchContribution } from 'vs/workbench/common/contributions'; import { FocusSessionActionViewItem } from 'vs/workbench/contrib/debug/browser/debugActionViewItems'; @@ -195,7 +195,7 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution { const widgetShadowColor = this.getColor(widgetShadow); this.$el.style.boxShadow = widgetShadowColor ? `0 0 8px 2px ${widgetShadowColor}` : ''; - const contrastBorderColor = this.getColor(contrastBorder); + const contrastBorderColor = this.getColor(widgetBorder); const borderColor = this.getColor(debugToolBarBorder); if (contrastBorderColor) { diff --git a/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css b/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css index 746a06f7318e5..f32eaab62f8ef 100644 --- a/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css +++ b/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css @@ -9,6 +9,7 @@ height: 32px; display: flex; padding-left: 7px; + border-radius: 4px; } .monaco-workbench .debug-toolbar .monaco-action-bar .action-item { From ab73c657ee81d4c6d2e7daba66f89acaf4c45357 Mon Sep 17 00:00:00 2001 From: David Dossett Date: Thu, 1 Dec 2022 09:18:25 -0800 Subject: [PATCH 3/5] More border updates --- src/vs/editor/contrib/rename/browser/renameInputField.css | 1 + src/vs/editor/contrib/rename/browser/renameInputField.ts | 4 +++- src/vs/platform/theme/common/colorRegistry.ts | 2 +- .../parts/notifications/media/notificationsCenter.css | 7 +++++++ .../browser/parts/notifications/notificationsCenter.ts | 1 + src/vs/workbench/contrib/feedback/browser/feedback.ts | 1 + .../workbench/contrib/feedback/browser/media/feedback.css | 1 + 7 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/vs/editor/contrib/rename/browser/renameInputField.css b/src/vs/editor/contrib/rename/browser/renameInputField.css index 9000a713ec2eb..86ae64351f85b 100644 --- a/src/vs/editor/contrib/rename/browser/renameInputField.css +++ b/src/vs/editor/contrib/rename/browser/renameInputField.css @@ -6,6 +6,7 @@ .monaco-editor .rename-box { z-index: 100; color: inherit; + border-radius: 4px; } .monaco-editor .rename-box.preview { diff --git a/src/vs/editor/contrib/rename/browser/renameInputField.ts b/src/vs/editor/contrib/rename/browser/renameInputField.ts index 64b88fb6f822b..7cbb8b95c88e2 100644 --- a/src/vs/editor/contrib/rename/browser/renameInputField.ts +++ b/src/vs/editor/contrib/rename/browser/renameInputField.ts @@ -14,7 +14,7 @@ import { ScrollType } from 'vs/editor/common/editorCommon'; import { localize } from 'vs/nls'; import { IContextKey, IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; -import { editorWidgetBackground, inputBackground, inputBorder, inputForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { editorWidgetBackground, inputBackground, inputBorder, inputForeground, widgetBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; export const CONTEXT_RENAME_INPUT_VISIBLE = new RawContextKey('renameInputVisible', false, localize('renameInputVisible', "Whether the rename input widget is visible")); @@ -99,8 +99,10 @@ export class RenameInputField implements IContentWidget { } const widgetShadowColor = theme.getColor(widgetShadow); + const widgetBorderColor = theme.getColor(widgetBorder); this._domNode.style.backgroundColor = String(theme.getColor(editorWidgetBackground) ?? ''); this._domNode.style.boxShadow = widgetShadowColor ? ` 0 0 8px 2px ${widgetShadowColor}` : ''; + this._domNode.style.border = widgetBorderColor ? `1px solid ${widgetBorderColor}` : ''; this._domNode.style.color = String(theme.getColor(inputForeground) ?? ''); this._input.style.backgroundColor = String(theme.getColor(inputBackground) ?? ''); diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index aba52a9a08f76..f615ef60972c0 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -240,7 +240,7 @@ export const textCodeBlockBackground = registerColor('textCodeBlock.background', // ----- widgets export const widgetShadow = registerColor('widget.shadow', { dark: transparent(Color.black, .36), light: transparent(Color.black, .16), hcDark: null, hcLight: null }, nls.localize('widgetShadow', 'Shadow color of widgets such as find/replace inside the editor.')); -export const widgetBorder = registerColor('widget.border', { dark: '#ffffff15', light: transparent(Color.black, .16), hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('widgetBorder', 'Border color of widgets such as find/replace inside the editor.')); +export const widgetBorder = registerColor('widget.border', { dark: '#303031', light: transparent(Color.black, .16), hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('widgetBorder', 'Border color of widgets such as find/replace inside the editor.')); export const inputBackground = registerColor('input.background', { dark: '#3C3C3C', light: Color.white, hcDark: Color.black, hcLight: Color.white }, nls.localize('inputBoxBackground', "Input box background.")); export const inputForeground = registerColor('input.foreground', { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground }, nls.localize('inputBoxForeground', "Input box foreground.")); diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css b/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css index bd6c9dd956525..0355e6595c5d9 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css +++ b/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css @@ -10,6 +10,7 @@ bottom: 31px; display: none; overflow: hidden; + border-radius: 4px; } .monaco-workbench.nostatusbar > .notifications-center { @@ -42,3 +43,9 @@ .monaco-workbench > .notifications-center > .notifications-center-header > .notifications-center-header-toolbar .actions-container { justify-content: flex-end; } + +.monaco-workbench .notifications-center .notifications-list-container, +.monaco-workbench .notifications-center .notifications-list-container .monaco-scrollable-element, +.monaco-workbench .notifications-center .notifications-list-container .notification-list-item { + border-radius: 0; +} diff --git a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts index ae1ffea2aa397..0179f9978214c 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts @@ -275,6 +275,7 @@ export class NotificationsCenter extends Themable implements INotificationsCente const headerBackground = this.getColor(NOTIFICATIONS_CENTER_HEADER_BACKGROUND); this.notificationsCenterHeader.style.background = headerBackground ? headerBackground.toString() : ''; + } } diff --git a/src/vs/workbench/contrib/feedback/browser/feedback.ts b/src/vs/workbench/contrib/feedback/browser/feedback.ts index dad00b3f8cc2f..357f8e1e5fbc0 100644 --- a/src/vs/workbench/contrib/feedback/browser/feedback.ts +++ b/src/vs/workbench/contrib/feedback/browser/feedback.ts @@ -295,6 +295,7 @@ export class FeedbackWidget extends Disposable { this.feedbackForm.style.backgroundColor = colors.editorWidgetBackground ? colors.editorWidgetBackground.toString() : ''; this.feedbackForm.style.color = colors.editorWidgetForeground ? colors.editorWidgetForeground.toString() : ''; this.feedbackForm.style.boxShadow = colors.widgetShadow ? `0 0 8px 2px ${colors.widgetShadow}` : ''; + this.feedbackForm.style.border = colors.widgetBorder ? `1px solid ${colors.widgetBorder}` : ''; } if (this.feedbackDescriptionInput) { this.feedbackDescriptionInput.style.backgroundColor = colors.inputBackground ? colors.inputBackground.toString() : ''; diff --git a/src/vs/workbench/contrib/feedback/browser/media/feedback.css b/src/vs/workbench/contrib/feedback/browser/media/feedback.css index e619571200fb9..78b27371995ed 100644 --- a/src/vs/workbench/contrib/feedback/browser/media/feedback.css +++ b/src/vs/workbench/contrib/feedback/browser/media/feedback.css @@ -9,6 +9,7 @@ right: 6px; padding: 1em; cursor: default; + border-radius: 4px; } .monaco-workbench .feedback-form h2 { From 071b1b3b7c0e1f4df9067e192276cd992c9d245b Mon Sep 17 00:00:00 2001 From: David Dossett Date: Thu, 1 Dec 2022 11:26:13 -0800 Subject: [PATCH 4/5] Move color defaults to themes --- extensions/theme-defaults/themes/dark_vs.json | 1 + extensions/theme-defaults/themes/light_vs.json | 1 + src/vs/editor/contrib/find/browser/findWidget.css | 2 +- src/vs/platform/theme/common/colorRegistry.ts | 2 +- 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/extensions/theme-defaults/themes/dark_vs.json b/extensions/theme-defaults/themes/dark_vs.json index ab05161619f1d..5ebcba773aa9d 100644 --- a/extensions/theme-defaults/themes/dark_vs.json +++ b/extensions/theme-defaults/themes/dark_vs.json @@ -24,6 +24,7 @@ "tab.lastPinnedBorder": "#ccc3", "list.activeSelectionIconForeground": "#FFF", "terminal.inactiveSelectionBackground": "#3A3D41", + "widget.border": "#303031", }, "tokenColors": [ { diff --git a/extensions/theme-defaults/themes/light_vs.json b/extensions/theme-defaults/themes/light_vs.json index 9e894251ed4f6..a49407758682b 100644 --- a/extensions/theme-defaults/themes/light_vs.json +++ b/extensions/theme-defaults/themes/light_vs.json @@ -30,6 +30,7 @@ "list.activeSelectionIconForeground": "#FFF", "list.focusAndSelectionOutline": "#90C2F9", "terminal.inactiveSelectionBackground": "#E5EBF1", + "widget.border": "#d4d4d4" }, "tokenColors": [ { diff --git a/src/vs/editor/contrib/find/browser/findWidget.css b/src/vs/editor/contrib/find/browser/findWidget.css index a1bfbe07e68c7..48ee9adfa0ff2 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.css +++ b/src/vs/editor/contrib/find/browser/findWidget.css @@ -54,7 +54,7 @@ .monaco-editor .find-widget > .find-part, .monaco-editor .find-widget > .replace-part { - margin: 4px 0 0 17px; + margin: 3px 0 0 17px; font-size: 12px; display: flex; } diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index f615ef60972c0..882b4d603c8b9 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -240,7 +240,7 @@ export const textCodeBlockBackground = registerColor('textCodeBlock.background', // ----- widgets export const widgetShadow = registerColor('widget.shadow', { dark: transparent(Color.black, .36), light: transparent(Color.black, .16), hcDark: null, hcLight: null }, nls.localize('widgetShadow', 'Shadow color of widgets such as find/replace inside the editor.')); -export const widgetBorder = registerColor('widget.border', { dark: '#303031', light: transparent(Color.black, .16), hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('widgetBorder', 'Border color of widgets such as find/replace inside the editor.')); +export const widgetBorder = registerColor('widget.border', { dark: null, light: null, hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('widgetBorder', 'Border color of widgets such as find/replace inside the editor.')); export const inputBackground = registerColor('input.background', { dark: '#3C3C3C', light: Color.white, hcDark: Color.black, hcLight: Color.white }, nls.localize('inputBoxBackground', "Input box background.")); export const inputForeground = registerColor('input.foreground', { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground }, nls.localize('inputBoxForeground', "Input box foreground.")); From f3d09b3ca0bedf5e8be23ae3fc2565b5425ab13b Mon Sep 17 00:00:00 2001 From: David Dossett Date: Tue, 13 Dec 2022 10:03:35 -0800 Subject: [PATCH 5/5] Address feedback --- extensions/theme-defaults/themes/dark_plus_experimental.json | 1 + extensions/theme-defaults/themes/light_plus_experimental.json | 1 + src/vs/base/parts/quickinput/browser/media/quickInput.css | 2 +- src/vs/editor/contrib/find/browser/findWidget.css | 3 ++- src/vs/editor/contrib/find/browser/findWidget.ts | 2 +- src/vs/editor/contrib/rename/browser/renameInputField.css | 3 +-- 6 files changed, 7 insertions(+), 5 deletions(-) diff --git a/extensions/theme-defaults/themes/dark_plus_experimental.json b/extensions/theme-defaults/themes/dark_plus_experimental.json index 755deffe0ba51..5879a684bf0b8 100644 --- a/extensions/theme-defaults/themes/dark_plus_experimental.json +++ b/extensions/theme-defaults/themes/dark_plus_experimental.json @@ -134,5 +134,6 @@ "titleBar.inactiveBackground": "#1f1f1f", "titleBar.inactiveForeground": "#8b949e", "welcomePage.tileBackground": "#ffffff0f", + "widgetBorder": "#ffffff15", }, } diff --git a/extensions/theme-defaults/themes/light_plus_experimental.json b/extensions/theme-defaults/themes/light_plus_experimental.json index f718217b12c6f..d1640dff2479e 100644 --- a/extensions/theme-defaults/themes/light_plus_experimental.json +++ b/extensions/theme-defaults/themes/light_plus_experimental.json @@ -150,5 +150,6 @@ "titleBar.inactiveBackground": "#f8f8f8", "titleBar.inactiveForeground": "#8b949e", "welcomePage.tileBackground": "#f3f3f3", + "wdgetBorder": "#0000001a", }, } diff --git a/src/vs/base/parts/quickinput/browser/media/quickInput.css b/src/vs/base/parts/quickinput/browser/media/quickInput.css index d96bd3dffb27d..16f17a8bf7703 100644 --- a/src/vs/base/parts/quickinput/browser/media/quickInput.css +++ b/src/vs/base/parts/quickinput/browser/media/quickInput.css @@ -11,7 +11,7 @@ right: 0; margin: 0 auto; -webkit-app-region: no-drag; - border-radius: 4px; + border-radius: 6px; } .quick-input-titlebar { diff --git a/src/vs/editor/contrib/find/browser/findWidget.css b/src/vs/editor/contrib/find/browser/findWidget.css index 48ee9adfa0ff2..767b0659fdb56 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.css +++ b/src/vs/editor/contrib/find/browser/findWidget.css @@ -14,7 +14,8 @@ padding: 0 4px; box-sizing: border-box; transform: translateY(calc(-100% - 10px)); /* shadow (10px) */ - border-radius: 3px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; } .monaco-workbench.reduce-motion .monaco-editor .find-widget { diff --git a/src/vs/editor/contrib/find/browser/findWidget.ts b/src/vs/editor/contrib/find/browser/findWidget.ts index bd94cc4bda3ed..772aa647cc86e 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.ts +++ b/src/vs/editor/contrib/find/browser/findWidget.ts @@ -1391,7 +1391,7 @@ registerThemingParticipant((theme, collector) => { const widgetBorderColor = theme.getColor(widgetBorder); if (widgetBorderColor) { - collector.addRule(`.monaco-editor .find-widget { border: 1px solid ${widgetBorderColor}; }`); + collector.addRule(`.monaco-editor .find-widget { border-left: 1px solid ${widgetBorderColor}; border-right: 1px solid ${widgetBorderColor}; border-bottom: 1px solid ${widgetBorderColor}; }`); } const findMatchHighlightBorder = theme.getColor(editorFindMatchHighlightBorder); diff --git a/src/vs/editor/contrib/rename/browser/renameInputField.css b/src/vs/editor/contrib/rename/browser/renameInputField.css index 86ae64351f85b..1b5de07fab00f 100644 --- a/src/vs/editor/contrib/rename/browser/renameInputField.css +++ b/src/vs/editor/contrib/rename/browser/renameInputField.css @@ -10,12 +10,11 @@ } .monaco-editor .rename-box.preview { - padding: 3px 3px 0 3px; + padding: 4px 4px 0 4px; } .monaco-editor .rename-box .rename-input { padding: 3px; - width: calc(100% - 6px); border-radius: 2px; }