Skip to content

Commit

Permalink
Update colors to meet color contrast ratio, also fixes #51984
Browse files Browse the repository at this point in the history
  • Loading branch information
Miguel Solorio committed Jul 9, 2018
1 parent f71de35 commit 5b57b2d
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 7 deletions.
2 changes: 1 addition & 1 deletion src/vs/platform/theme/common/colorRegistry.ts
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export const selectBorder = registerColor('dropdown.border', { dark: selectBackg

export const listFocusBackground = registerColor('list.focusBackground', { dark: '#062F4A', light: '#DFF0FF', hc: null }, nls.localize('listFocusBackground', "List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
export const listFocusForeground = registerColor('list.focusForeground', { dark: null, light: null, hc: null }, nls.localize('listFocusForeground', "List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
export const listActiveSelectionBackground = registerColor('list.activeSelectionBackground', { dark: '#094771', light: '#3399FF', hc: null }, nls.localize('listActiveSelectionBackground', "List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
export const listActiveSelectionBackground = registerColor('list.activeSelectionBackground', { dark: '#094771', light: '#2477CE', hc: null }, nls.localize('listActiveSelectionBackground', "List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
export const listActiveSelectionForeground = registerColor('list.activeSelectionForeground', { dark: Color.white, light: Color.white, hc: null }, nls.localize('listActiveSelectionForeground', "List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
export const listInactiveSelectionBackground = registerColor('list.inactiveSelectionBackground', { dark: '#3F3F46', light: '#CCCEDB', hc: null }, nls.localize('listInactiveSelectionBackground', "List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not."));
export const listInactiveSelectionForeground = registerColor('list.inactiveSelectionForeground', { dark: null, light: null, hc: null }, nls.localize('listInactiveSelectionForeground', "List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not."));
Expand Down
6 changes: 3 additions & 3 deletions src/vs/platform/theme/common/styler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
'use strict';

import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, progressBarBackground } from 'vs/platform/theme/common/colorRegistry';
import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground } from 'vs/platform/theme/common/colorRegistry';
import { IDisposable } from 'vs/base/common/lifecycle';
import { Color } from 'vs/base/common/color';
import { mixin } from 'vs/base/common/objects';
Expand Down Expand Up @@ -177,7 +177,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
inputValidationErrorBackground: (style && style.inputValidationErrorBackground) || inputValidationErrorBackground,
listFocusBackground: (style && style.listFocusBackground) || listFocusBackground,
listFocusForeground: (style && style.listFocusForeground) || listFocusForeground,
listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || lighten(listActiveSelectionBackground, 0.1),
listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || listActiveSelectionBackground,
listActiveSelectionForeground: (style && style.listActiveSelectionForeground) || listActiveSelectionForeground,
listFocusAndSelectionBackground: style && style.listFocusAndSelectionBackground || listActiveSelectionBackground,
listFocusAndSelectionForeground: (style && style.listFocusAndSelectionForeground) || listActiveSelectionForeground,
Expand Down Expand Up @@ -219,7 +219,7 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService,
export const defaultListStyles: IColorMapping = {
listFocusBackground: listFocusBackground,
listFocusForeground: listFocusForeground,
listActiveSelectionBackground: lighten(listActiveSelectionBackground, 0.1),
listActiveSelectionBackground: listActiveSelectionBackground,
listActiveSelectionForeground: listActiveSelectionForeground,
listFocusAndSelectionBackground: listActiveSelectionBackground,
listFocusAndSelectionForeground: listActiveSelectionForeground,
Expand Down
4 changes: 2 additions & 2 deletions src/vs/workbench/common/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export const EDITOR_GROUP_BORDER = registerColor('editorGroup.border', {

export const EDITOR_DRAG_AND_DROP_BACKGROUND = registerColor('editorGroup.dropBackground', {
dark: Color.fromHex('#53595D').transparent(0.5),
light: Color.fromHex('#3399FF').transparent(0.18),
light: Color.fromHex('#2677CB').transparent(0.18),
hc: null
}, nls.localize('editorDragAndDropBackground', "Background color when dragging editors around. The color should have transparency so that the editor contents can still shine through."));

Expand Down Expand Up @@ -201,7 +201,7 @@ export const PANEL_ACTIVE_TITLE_BORDER = registerColor('panelTitle.activeBorder'

export const PANEL_DRAG_AND_DROP_BACKGROUND = registerColor('panel.dropBackground', {
dark: Color.white.transparent(0.12),
light: Color.fromHex('#3399FF').transparent(0.18),
light: Color.fromHex('#2677CB').transparent(0.18),
hc: Color.white.transparent(0.12)
}, nls.localize('panelDragAndDropBackground', "Drag and drop feedback color for the panel title items. The color should have transparency so that the panel entries can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal."));

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@
flex: 1;
font-size: 90%;
padding-right: 6px;
opacity: 0.8;
opacity: 0.9;
font-weight: 600;
}

Expand Down

0 comments on commit 5b57b2d

Please sign in to comment.