fix all high constrast issues in sqlops (#1115)

This commit is contained in:
Abbie Petchtes
2018-04-11 12:36:00 -07:00
committed by GitHub
parent 7833c28b7a
commit 495b4ee7c2
10 changed files with 22 additions and 14 deletions

View File

@@ -56,7 +56,7 @@
"tab.activeBackground": "#212121",
"tab.activeForeground": "#ffffff",
"tab.inactiveBackground": "#444444",
"tab.inactiveForeground": "#888888",
"tab.inactiveForeground": "#b6b6b6",
"tab.border": "#3c3c3c",
"panel.background": "#212121",
"panel.border": "#515151",

View File

@@ -66,7 +66,7 @@
"tab.activeBackground": "#FFFFFE",
"tab.activeForeground": "#4A4A4A",
"tab.inactiveBackground": "#f4f4f4",
"tab.inactiveForeground": "#888888",
"tab.inactiveForeground": "#707070",
"tab.border": "#EAEAEA",
"tab.unfocusedInactiveForeground": "#888888",
"tab.unfocusedActiveForeground": "#212121",

View File

@@ -71,7 +71,7 @@ panel {
}
.tabbedPanel .tabList .tab .tabLabel {
opacity: 0.6;
opacity: 0.8;
}
.tabbedPanel .tabList .tab .tabLabel.icon {

View File

@@ -5,13 +5,13 @@
import 'vs/css!./media/panel';
import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
import { PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER } from 'vs/workbench/common/theme';
import { TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER } from 'vs/workbench/common/theme';
import { activeContrastBorder, focusBorder } from 'vs/platform/theme/common/colorRegistry';
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
// Title Active
const titleActive = theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND);
const titleActive = theme.getColor(TAB_ACTIVE_FOREGROUND);
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
if (titleActive || titleActiveBorder) {
collector.addRule(`
@@ -28,7 +28,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
}
// Title Inactive
const titleInactive = theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND);
const titleInactive = theme.getColor(TAB_INACTIVE_FOREGROUND);
if (titleInactive) {
collector.addRule(`
.tabbedPanel > .title > .tabList .tab .tabLabel {

View File

@@ -256,7 +256,7 @@ export class Table<T extends Slick.SlickData> implements IThemable {
}
if (styles.listSelectionOutline) {
content.push(`.monaco-table .${this._idPrefix} .slick-row .selected { outline: 1px dotted ${styles.listSelectionOutline}; outline-offset: -1px; }`);
content.push(`.monaco-table .${this._idPrefix} .slick-row .selected.active { outline: 1px dotted ${styles.listSelectionOutline}; outline-offset: -1px; }`);
}
/* Commented out andresse 8/17/2017; keeping for reference as we iterate on the table styling */

View File

@@ -7,8 +7,10 @@ import { registerColor, foreground } from 'vs/platform/theme/common/colorRegistr
import { Color, RGBA } from 'vs/base/common/color';
import * as nls from 'vs/nls';
export const tableHeaderBackground = registerColor('table.headerBackground', { dark: new Color(new RGBA(51, 51, 52)), light: new Color(new RGBA(245, 245, 245)), hc: null }, nls.localize('tableHeaderBackground', 'Table header background color'));
export const tableHeaderForeground = registerColor('table.headerForeground', { dark: new Color(new RGBA(229, 229, 229)), light: new Color(new RGBA(16, 16, 16)), hc: null }, nls.localize('tableHeaderForeground', 'Table header foreground color'));
export const tableHeaderBackground = registerColor('table.headerBackground', { dark: new Color(new RGBA(51, 51, 52)), light: new Color(new RGBA(245, 245, 245)), hc: '#333334' }, nls.localize('tableHeaderBackground', 'Table header background color'));
export const tableHeaderForeground = registerColor('table.headerForeground', { dark: new Color(new RGBA(229, 229, 229)), light: new Color(new RGBA(16, 16, 16)), hc: '#e5e5e5' }, nls.localize('tableHeaderForeground', 'Table header foreground color'));
export const disabledInputBackground = registerColor('input.disabled.background', { dark: '#444444', light: '#dcdcdc', hc: Color.black }, nls.localize('disabledInputBoxBackground', "Disabled Input box background."));
export const disabledInputForeground = registerColor('input.disabled.foreground', { dark: '#888888', light: '#888888', hc: foreground }, nls.localize('disabledInputBoxForeground', "Disabled Input box foreground."));
export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hc: null }, nls.localize('buttonFocusOutline', "Button outline color when focused."));
export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hc: null }, nls.localize('buttonFocusOutline', "Button outline color when focused."));
export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active"));

View File

@@ -146,9 +146,9 @@ export function attachTableStyler(widget: IThemable, themeService: IThemeService
return attachStyler(themeService, {
listFocusBackground: (style && style.listFocusBackground) || cr.listFocusBackground,
listFocusForeground: (style && style.listFocusForeground) || cr.listFocusForeground,
listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || cr.lighten(cr.listActiveSelectionBackground, 0.1),
listActiveSelectionBackground: (style && style.listActiveSelectionBackground) || cr.listActiveSelectionBackground,
listActiveSelectionForeground: (style && style.listActiveSelectionForeground) || cr.listActiveSelectionForeground,
listFocusAndSelectionBackground: style && style.listFocusAndSelectionBackground || cr.listActiveSelectionBackground,
listFocusAndSelectionBackground: style && style.listFocusAndSelectionBackground || sqlcolors.listFocusAndSelectionBackground,
listFocusAndSelectionForeground: (style && style.listFocusAndSelectionForeground) || cr.listActiveSelectionForeground,
listInactiveFocusBackground: (style && style.listInactiveFocusBackground),
listInactiveSelectionBackground: (style && style.listInactiveSelectionBackground) || cr.listInactiveSelectionBackground,

View File

@@ -13,6 +13,10 @@ panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .ta
border-bottom: 0px solid;
}
panel.dashboard-panel > .tabbedPanel .tabList .tab .tabLabel {
opacity: 1;
}
panel.dashboard-panel > .tabbedPanel > .title > .title-actions,
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
box-sizing: border-box;

View File

@@ -5,7 +5,7 @@
.empty-task-message {
padding: 10px 22px 0 22px;
opacity: 0.5;
opacity: 0.8;
}
.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group {

View File

@@ -150,7 +150,9 @@ export const descriptionForeground = registerColor('descriptionForeground', { li
export const focusBorder = registerColor('focusBorder', { dark: Color.fromHex('#0E639C').transparent(0.6), light: Color.fromHex('#007ACC').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 contrastBorder = registerColor('contrastBorder', { light: null, dark: null, hc: '#6FC3DF' }, nls.localize('contrastBorder', "An extra border around elements to separate them from others for greater contrast."));
// {{SQL CARBON EDIT}} -- Update contrastBorder color for HC
export const contrastBorder = registerColor('contrastBorder', { light: null, dark: null, hc: '#2b56f2' }, nls.localize('contrastBorder', "An extra border around elements to separate them from others for greater contrast."));
export const activeContrastBorder = registerColor('contrastActiveBorder', { light: null, dark: null, hc: focusBorder }, nls.localize('activeContrastBorder', "An extra border around active elements to separate them from others for greater contrast."));
export const selectionBackground = registerColor('selection.background', { light: null, dark: null, hc: null }, nls.localize('selectionBackground', "The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor."));