From 495b4ee7c298430b4118a10db1c8a2d9bc317d88 Mon Sep 17 00:00:00 2001 From: Abbie Petchtes Date: Wed, 11 Apr 2018 12:36:00 -0700 Subject: [PATCH] fix all high constrast issues in sqlops (#1115) --- extensions/theme-carbon/themes/dark_carbon.json | 2 +- extensions/theme-carbon/themes/light_carbon.json | 2 +- src/sql/base/browser/ui/panel/media/panel.css | 2 +- src/sql/base/browser/ui/panel/panelStyles.ts | 6 +++--- src/sql/base/browser/ui/table/table.ts | 2 +- src/sql/common/theme/colors.ts | 8 +++++--- src/sql/common/theme/styler.ts | 4 ++-- src/sql/parts/dashboard/common/dashboardPanel.css | 4 ++++ .../taskHistory/viewlet/media/taskHistoryViewlet.css | 2 +- src/vs/platform/theme/common/colorRegistry.ts | 4 +++- 10 files changed, 22 insertions(+), 14 deletions(-) diff --git a/extensions/theme-carbon/themes/dark_carbon.json b/extensions/theme-carbon/themes/dark_carbon.json index da67180cf6..99aae6ff41 100644 --- a/extensions/theme-carbon/themes/dark_carbon.json +++ b/extensions/theme-carbon/themes/dark_carbon.json @@ -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", diff --git a/extensions/theme-carbon/themes/light_carbon.json b/extensions/theme-carbon/themes/light_carbon.json index 544d130df9..898a6e3c8b 100644 --- a/extensions/theme-carbon/themes/light_carbon.json +++ b/extensions/theme-carbon/themes/light_carbon.json @@ -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", diff --git a/src/sql/base/browser/ui/panel/media/panel.css b/src/sql/base/browser/ui/panel/media/panel.css index 725778a5c5..c51c48f1f4 100644 --- a/src/sql/base/browser/ui/panel/media/panel.css +++ b/src/sql/base/browser/ui/panel/media/panel.css @@ -71,7 +71,7 @@ panel { } .tabbedPanel .tabList .tab .tabLabel { - opacity: 0.6; + opacity: 0.8; } .tabbedPanel .tabList .tab .tabLabel.icon { diff --git a/src/sql/base/browser/ui/panel/panelStyles.ts b/src/sql/base/browser/ui/panel/panelStyles.ts index 532ec0f998..5e64c428c0 100644 --- a/src/sql/base/browser/ui/panel/panelStyles.ts +++ b/src/sql/base/browser/ui/panel/panelStyles.ts @@ -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 { diff --git a/src/sql/base/browser/ui/table/table.ts b/src/sql/base/browser/ui/table/table.ts index ab16ddb381..573495d8b7 100644 --- a/src/sql/base/browser/ui/table/table.ts +++ b/src/sql/base/browser/ui/table/table.ts @@ -256,7 +256,7 @@ export class Table 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 */ diff --git a/src/sql/common/theme/colors.ts b/src/sql/common/theme/colors.ts index b32349bc2f..cfd563b305 100644 --- a/src/sql/common/theme/colors.ts +++ b/src/sql/common/theme/colors.ts @@ -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.")); \ No newline at end of file +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")); \ No newline at end of file diff --git a/src/sql/common/theme/styler.ts b/src/sql/common/theme/styler.ts index ba5b57e79c..bccc45d40f 100644 --- a/src/sql/common/theme/styler.ts +++ b/src/sql/common/theme/styler.ts @@ -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, diff --git a/src/sql/parts/dashboard/common/dashboardPanel.css b/src/sql/parts/dashboard/common/dashboardPanel.css index 5de4d65f2c..8a26e95d18 100644 --- a/src/sql/parts/dashboard/common/dashboardPanel.css +++ b/src/sql/parts/dashboard/common/dashboardPanel.css @@ -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; diff --git a/src/sql/parts/taskHistory/viewlet/media/taskHistoryViewlet.css b/src/sql/parts/taskHistory/viewlet/media/taskHistoryViewlet.css index cce4819631..3f297c873b 100644 --- a/src/sql/parts/taskHistory/viewlet/media/taskHistoryViewlet.css +++ b/src/sql/parts/taskHistory/viewlet/media/taskHistoryViewlet.css @@ -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 { diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index cee882e486..10f8fddd61 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -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."));