diff --git a/extensions/theme-abyss/themes/abyss-color-theme.json b/extensions/theme-abyss/themes/abyss-color-theme.json index ab38aea7ebc..1f037d0f78f 100644 --- a/extensions/theme-abyss/themes/abyss-color-theme.json +++ b/extensions/theme-abyss/themes/abyss-color-theme.json @@ -253,7 +253,7 @@ // Base // "foreground": "", - "focusedElementOutline": "#596F99", + "focusBorder": "#596F99", "infoBorder": "#384078", "infoBackground": "#051336", "warningBackground": "#5B7E7A", diff --git a/extensions/theme-quietlight/themes/quietlight-color-theme.json b/extensions/theme-quietlight/themes/quietlight-color-theme.json index 20c4bfddc78..5658f7294b5 100644 --- a/extensions/theme-quietlight/themes/quietlight-color-theme.json +++ b/extensions/theme-quietlight/themes/quietlight-color-theme.json @@ -453,7 +453,7 @@ } ], "colors": { - "focusedElementOutline": "#A6B39B", + "focusBorder": "#A6B39B", "activityBarBackground": "#3E4932", "pickerGroupForeground": "#A6B39B", "pickerGroupBorder": "#749351", diff --git a/extensions/theme-red/themes/Red-color-theme.json b/extensions/theme-red/themes/Red-color-theme.json index 8266a06395e..ee68c095080 100644 --- a/extensions/theme-red/themes/Red-color-theme.json +++ b/extensions/theme-red/themes/Red-color-theme.json @@ -32,7 +32,7 @@ "peekViewResultsBackground": "#400000", "peekViewEditorBackground": "#300000", // UI - "focusedElementOutline": "#ff6666aa", + "focusBorder": "#ff6666aa", "buttonBackground": "#885555", "buttonHoverBackground": "#aa5555", "dropdownBackground": "#580000", diff --git a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json index f9fba765d28..fbdd247de90 100644 --- a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json +++ b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json @@ -295,7 +295,7 @@ // Base // "foreground": "", - "focusedElementOutline": "#2AA19899", + "focusBorder": "#2AA19899", "infoBorder": "#384078", "infoBackground": "#051336", "warningBackground": "#5B7E7A", diff --git a/extensions/theme-solarized-light/themes/solarized-light-color-theme.json b/extensions/theme-solarized-light/themes/solarized-light-color-theme.json index e5a4193950d..42b05f7962c 100644 --- a/extensions/theme-solarized-light/themes/solarized-light-color-theme.json +++ b/extensions/theme-solarized-light/themes/solarized-light-color-theme.json @@ -308,7 +308,7 @@ "inputBoxBackground": "#DDD6C1", "inputBoxForeground": "#586E75", "inputBoxActiveOptionBorder": "#2AA19899", - "focusedElementOutline": "#2AA19899", + "focusBorder": "#2AA19899", "titleBarActiveBackground": "#002C39", "titleBarInactiveBackground": "#002C39", "statusBarForeground": "#586E75", diff --git a/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json b/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json index 9d031b2c619..8ed7c467c5b 100644 --- a/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json +++ b/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json @@ -1,7 +1,7 @@ { "type": "dark", "colors": { - "focusedElementOutline": "#bbdaff", + "focusBorder": "#bbdaff", "inputBoxBackground": "#001733", "dropdownBackground": "#001733", "listFocusBackground": "#ffffff60", diff --git a/src/vs/editor/contrib/rename/browser/renameInputField.ts b/src/vs/editor/contrib/rename/browser/renameInputField.ts index cf5ae3696bc..241d5f6c51d 100644 --- a/src/vs/editor/contrib/rename/browser/renameInputField.ts +++ b/src/vs/editor/contrib/rename/browser/renameInputField.ts @@ -13,7 +13,7 @@ import { TPromise } from 'vs/base/common/winjs.base'; import { Range } from 'vs/editor/common/core/range'; import { ContentWidgetPositionPreference, ICodeEditor, IContentWidget, IContentWidgetPosition } from 'vs/editor/browser/editorBrowser'; import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService'; -import { inputBackground, inputBorder, inputForeground, widgetShadow, focus } from 'vs/platform/theme/common/colorRegistry'; +import { inputBackground, inputBorder, inputForeground, widgetShadow, focusBorder } from 'vs/platform/theme/common/colorRegistry'; import { Position } from 'vs/editor/common/core/position'; export default class RenameInputField implements IContentWidget, IDisposable { @@ -79,7 +79,7 @@ export default class RenameInputField implements IContentWidget, IDisposable { const background = theme.getColor(inputBackground); const foreground = theme.getColor(inputForeground); const widgetShadowColor = theme.getColor(widgetShadow); - const border = theme.getColor(inputBorder) || theme.getColor(focus); + const border = theme.getColor(inputBorder) || theme.getColor(focusBorder); this._inputField.style.backgroundColor = background ? background.toString() : null; this._inputField.style.color = foreground ? foreground.toString() : null; diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 335acae14a7..95527238938 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -120,11 +120,10 @@ export function registerColor(id: string, defaults: ColorDefaults, description: // ----- base colors export const foreground = registerColor('foreground', { dark: '#CCCCCC', light: '#6C6C6C', hc: '#FFFFFF' }, nls.localize('foreground', "Overall foreground color. This color is only used if not overridden by a component.")); -export const focus = registerColor('focusedElementOutline', { - dark: Color.fromRGBA(new RGBA(14, 99, 156)).transparent(0.6), - light: Color.fromRGBA(new RGBA(0, 122, 204)).transparent(0.4), - hc: '#F38518' -}, nls.localize('focusedElementOutline', "Overall outline/border color for focused elements. This color is only used if not overridden by a component.")); +export const focusBorder = registerColor('focusBorder', { dark: Color.fromRGBA(new RGBA(14, 99, 156)).transparent(0.6), light: Color.fromRGBA(new RGBA(0, 122, 204)).transparent(0.4), hc: '#F38518' }, nls.localize('focusBorder', "Overall border color for focused elements. This color is only used if not overridden by a component.")); + +export const highContrastBorder = registerColor('highContrastBorder', { light: null, dark: null, hc: '#6FC3DF' }, nls.localize('highContrastBorder', "Border color to separate components when high contrast theme is enabled.")); +export const highContrastOutline = registerColor('highContrastOutline', { light: null, dark: null, hc: focusBorder }, nls.localize('highContrastOutline', "Outline color for active components when high contrast theme is enabled.")); export const infoBackground = registerColor('infoBackground', { dark: '#063B49', light: '#D6ECF2', hc: Color.black }, nls.localize('infoBackground', "Overall info background color. This color is only used if not overridden by a component.")); export const infoBorder = registerColor('infoBorder', { dark: '#55AAFF', light: '#009CCC', hc: '#6FC3DF' }, nls.localize('infoBorder', "Overall info border color. This color is only used if not overridden by a component.")); @@ -133,15 +132,7 @@ export const warningBorder = registerColor('warningBorder', { dark: '#B89500', l export const errorBackground = registerColor('errorBackground', { dark: '#5A1D1D', light: '#F2DEDE', hc: Color.black }, nls.localize('errorBackground', "Overall error background color. This color is only used if not overridden by a component.")); export const errorBorder = registerColor('errorBorder', { dark: '#BE1100', light: '#E51400', hc: '#BE1100' }, nls.localize('errorBorder', "Overall error border color. This color is only used if not overridden by a component.")); -/** - * Commonly used High contrast colors. - */ -export const highContrastBorder = registerColor('highContrastBorder', { light: null, dark: null, hc: '#6FC3DF' }, nls.localize('highContrastBorder', "Border color to separate components when high contrast theme is enabled.")); -export const highContrastOutline = registerColor('highContrastOutline', { light: null, dark: null, hc: focus }, nls.localize('highContrastOutline', "Outline color for active components when high contrast theme is enabled.")); - -/** - * Widgets - */ +// ----- widgets export const widgetShadow = registerColor('widgetShadow', { dark: '#000000', light: '#A8A8A8', hc: null }, nls.localize('widgetShadow', 'Shadow color of widgets such as find/replace inside the editor.')); export const inputBackground = registerColor('inputBoxBackground', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('inputBoxBackground', "Input box background.")); diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts index 8873c77e160..40a0350ef41 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarActions.ts @@ -25,7 +25,7 @@ import { IViewletService, } from 'vs/workbench/services/viewlet/browser/viewlet' import { IPartService, Parts } from 'vs/workbench/services/part/common/partService'; import { IThemeService, ITheme, registerThemingParticipant, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND, ACTIVITY_BAR_FOREGROUND } from 'vs/workbench/common/theme'; -import { highContrastBorder, highContrastOutline, focus } from 'vs/platform/theme/common/colorRegistry'; +import { highContrastBorder, highContrastOutline, focusBorder } from 'vs/platform/theme/common/colorRegistry'; export class ActivityAction extends Action { private badge: IBadge; @@ -670,7 +670,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { // Styling without outline color else { - const focusBorder = theme.getColor(focus); + const focusBorderColor = theme.getColor(focusBorder); collector.addRule(` .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item.active .action-label, @@ -684,7 +684,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { } .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:focus:before { - border-left-color: ${focusBorder}; + border-left-color: ${focusBorderColor}; } `); } diff --git a/src/vs/workbench/browser/parts/panel/panelPart.ts b/src/vs/workbench/browser/parts/panel/panelPart.ts index 3307b77a164..3ce6923d55d 100644 --- a/src/vs/workbench/browser/parts/panel/panelPart.ts +++ b/src/vs/workbench/browser/parts/panel/panelPart.ts @@ -26,7 +26,7 @@ import { ActionsOrientation, ActionBar } from 'vs/base/browser/ui/actionbar/acti import { ClosePanelAction, PanelAction, ToggleMaximizedPanelAction } from 'vs/workbench/browser/parts/panel/panelActions'; import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { PANEL_BACKGROUND, PANEL_BORDER_COLOR, PANEL_ACTIVE_TITLE_COLOR, PANEL_INACTIVE_TITLE_COLOR, PANEL_ACTIVE_TITLE_BORDER } from 'vs/workbench/common/theme'; -import { highContrastOutline, focus, highContrastBorder } from 'vs/platform/theme/common/colorRegistry'; +import { highContrastOutline, focusBorder, highContrastBorder } from 'vs/platform/theme/common/colorRegistry'; export class PanelPart extends CompositePart implements IPanelService { @@ -214,11 +214,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { `); // Title focus - const focusBorder = theme.getColor(focus); + const focusBorderColor = theme.getColor(focusBorder); collector.addRule(` .monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item .action-label:focus { color: ${titleActive}; - border-bottom-color: ${focusBorder} !important; + border-bottom-color: ${focusBorderColor} !important; border-bottom: 1px solid; outline: none; } diff --git a/src/vs/workbench/electron-browser/shell.ts b/src/vs/workbench/electron-browser/shell.ts index 25bba3ae9f3..09186e64206 100644 --- a/src/vs/workbench/electron-browser/shell.ts +++ b/src/vs/workbench/electron-browser/shell.ts @@ -104,7 +104,7 @@ import 'vs/platform/opener/browser/opener.contribution'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { WorkbenchThemeService } from 'vs/workbench/services/themes/electron-browser/workbenchThemeService'; import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; -import { foreground, focus, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, listHighlightForeground } from 'vs/platform/theme/common/colorRegistry'; +import { foreground, focusBorder, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, listHighlightForeground } from 'vs/platform/theme/common/colorRegistry'; /** * Services that we require for the Shell @@ -589,7 +589,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { } // Focus outline - const focusOutline = theme.getColor(focus); + const focusOutline = theme.getColor(focusBorder); if (focusOutline) { collector.addRule(` .monaco-shell [tabindex="0"]:focus,