diff --git a/extensions/theme-carbon/themes/dark_carbon.json b/extensions/theme-carbon/themes/dark_carbon.json index 1f0285cc14..674c8b176d 100644 --- a/extensions/theme-carbon/themes/dark_carbon.json +++ b/extensions/theme-carbon/themes/dark_carbon.json @@ -4,66 +4,69 @@ "type": "dark", "colors": { - // base - "foreground": "#fffffe", - "focusBorder": "#0E639C", + // base + "foreground": "#fffffe", + "focusBorder": "#0078d7", "selection.background": "#3062d6", - //text colors - "textLinkForeground": "#30B4FF", - "textLinkActiveForeground": "#30B4FF", + //text colors + "textLinkForeground": "#30b4ff", + "textLinkActiveForeground": "#30b4ff", - //Button control - "button.background": "#00BCF2", - "button.foreground": "#212121", - "button.hoverBackground": "#0099BC", + //Button control + "button.background": "#0078d7cc", + "button.foreground": "#ffffff", + "button.hoverBackground": "#0078d7", - // TODO add support for these - // "button.secondaryBackground": "#c8c8c8", - // "button.secondaryHoverBackground": "#a6a6a6", - // "button.secondaryForeground": "#333333", - // "button.disabledBackground": "#444444" , - // "button.disabledForeground": "#888888" , + // TODO add support for these + // "button.secondaryBackground": "#c8c8c8", + // "button.secondaryHoverBackground": "#a6a6a6", + // "button.secondaryForeground": "#333333", + // "button.disabledBackground": "#444444" , + // "button.disabledForeground": "#888888" , - //Dropdown Control - "dropdown.background": "#212121", - "dropdown.foreground": "#fffffe", - "dropdown.border": "#888888", + //Checkbox + "checkbox.disabled.foreground": "#888888", - //Input Control - "input.background": "#212121", + //Dropdown Control + "dropdown.background": "#212121", + "dropdown.foreground": "#fffffe", + "dropdown.border": "#888888", + + //Input Control + "input.background": "#212121", "input.border": "#888888", "input.disabled.background": "#444444", "input.disabled.foreground": "#888888", - "inputOption.activeBorder": "#007ACC", - "input.placeholderForeground": "#888888", - "inputValidation.errorBackground": "#D02E00", - "inputValidation.errorBorder": "#D02E00", + "inputOption.activeBorder": "#0078d7", + "input.placeholderForeground": "#888888", + "inputValidation.errorBackground": "#b62e00", + "inputValidation.errorBorder": "#b62e00", - //List and trees - "list.activeSelectionBackground": "#3062d6", - "list.hoverBackground": "#444444", - "pickerGroup.border": "#00BCF2", + //List and trees + "list.activeSelectionBackground": "#3062d6", + "list.hoverBackground": "#444444", + "pickerGroup.border": "#0078d7", "activityBar.background": "#444444", "sideBar.background": "#333333", - "sideBarTitle.foreground": "#BBBBBB", - "input.placeholderForeground": "#A6A6A6", - "editorGroupHeader.tabsBackground": "#444444", - "editor.background": "#212121", - "editor.foreground": "#ffffff", - "editorWidget.background": "#444444", - "editorLink.activeForeground": "#30B4FF", - "editorGroup.border": "#333333", - "editorGroup.background": "#212121", - "editorIndentGuide.activeBackground": "#707070", - "tab.activeBackground": "#212121", - "tab.activeForeground": "#ffffff", - "tab.inactiveBackground": "#444444", - "tab.inactiveForeground": "#b6b6b6", + "sideBarTitle.foreground": "#bbbbbb", + "input.placeholderForeground": "#a6a6a6", + "editorGroupHeader.tabsBackground": "#444444", + "editor.background": "#212121", + "editor.foreground": "#ffffff", + "editorWidget.background": "#444444", + "editorLink.activeForeground": "#30b4ff", + "editorGroup.border": "#333333", + "editorGroup.background": "#212121", + "editorIndentGuide.activeBackground": "#707070", + "tab.activeBackground": "#212121", + "tab.activeForeground": "#ffffff", + "tab.inactiveBackground": "#444444", + "tab.inactiveForeground": "#b6b6b6", "tab.border": "#3c3c3c", - "panel.background": "#212121", - "panel.border": "#515151", - "panelTitle.activeForeground": "#ffffff", + "panel.background": "#212121", + "panel.border": "#515151", + "panelTitle.activeForeground": "#ffffff", "panelTitle.inactiveForeground": "#888888" }, "tokenColors": [ diff --git a/extensions/theme-carbon/themes/light_carbon.json b/extensions/theme-carbon/themes/light_carbon.json index fa2dc6183c..4db0a032b2 100644 --- a/extensions/theme-carbon/themes/light_carbon.json +++ b/extensions/theme-carbon/themes/light_carbon.json @@ -5,18 +5,18 @@ "colors": { // base "foreground": "#4a4a4a", - "focusBorder": "#00BCF2", - "selection.background": "#C9D0D9", + "focusBorder": "#0078d7", + "selection.background": "#c9d0d9", "widget.shadow": "#666666", // text colors - "textLinkForeground": "#3062D6", - "textLinkActiveForeground": "#3062D6", + "textLinkForeground": "#3062d6", + "textLinkActiveForeground": "#3062d6", //Button control - "button.background": "#00BCF2", - "button.foreground": "#212121", - "button.hoverBackground": "#0099BC", + "button.background": "#0078d7cc", + "button.foreground": "#ffffff", + "button.hoverBackground": "#0078d7", // TODO add support for these // "button.secondaryBackground": "#c8c8c8", @@ -25,35 +25,38 @@ // "button.disabledBackground": "#eaeaea", // "button.disabledForeground": "#888888", + //Checkbox + "checkbox.disabled.foreground": "#888888", + //Dropdown Control - "dropdown.background": "#fffffe", + "dropdown.background": "#ffffff", "dropdown.foreground": "#4a4a4a", - "dropdown.border": "#C8C8C8", + "dropdown.border": "#c8c8c8", //badge "badge.background": "#777777", "badge.foreground": "#ffffff", //Input Control - "input.background": "#fffffe", + "input.background": "#ffffff", "input.border": "#c8c8c8", "input.disabled.background": "#dcdcdc", "input.disabled.foreground": "#888888", "inputOption.activeBorder": "#666666", "input.placeholderForeground": "#767676", "inputValidation.errorBackground": "#ffeaea", - "inputValidation.errorBorder": "#f1897f", + "inputValidation.errorBorder": "#b62e00", //List and tree "list.activeSelectionBackground": "#3062d6", "list.hoverBackground": "#dcdcdc", - "pickerGroup.border": "#00BCF2", + "pickerGroup.border": "#0078d7", // Workbench: Activity Bar "activityBar.background": "#212121", // Workbench: Side Bar - "sideBar.background": "#EAEAEA", + "sideBar.background": "#eaeaea", "editorGroupHeader.tabsBackground": "#f4f4f4", "editor.background": "#fffffe", "editor.foreground": "#212121", @@ -64,15 +67,15 @@ "editorIndentGuide.activeBackground": "#939393", // Workbench: Tabs - "tab.activeBackground": "#FFFFFE", - "tab.activeForeground": "#4A4A4A", + "tab.activeBackground": "#ffffff", + "tab.activeForeground": "#4a4a4a", "tab.inactiveBackground": "#f4f4f4", "tab.inactiveForeground": "#707070", - "tab.border": "#EAEAEA", + "tab.border": "#eaeaea", "tab.unfocusedInactiveForeground": "#888888", "tab.unfocusedActiveForeground": "#212121", - "panel.background": "#FFFFFE", - "panel.border": "#C8C8C8", + "panel.background": "#ffffff", + "panel.border": "#c8c8c8", "panelTitle.activeForeground": "#212121", "panelTitle.inactiveForeground": "#757575" }, diff --git a/src/sql/base/browser/ui/checkbox/checkbox.ts b/src/sql/base/browser/ui/checkbox/checkbox.ts index f4a3d36dba..00064391c7 100644 --- a/src/sql/base/browser/ui/checkbox/checkbox.ts +++ b/src/sql/base/browser/ui/checkbox/checkbox.ts @@ -3,6 +3,7 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +import { Color } from 'vs/base/common/color'; import { Event, Emitter } from 'vs/base/common/event'; import { KeyCode } from 'vs/base/common/keyCodes'; import { Widget } from 'vs/base/browser/ui/widget'; @@ -15,9 +16,14 @@ export interface ICheckboxOptions { ariaLabel?: string; } +export interface ICheckboxStyles { + disabledCheckboxForeground?: Color; +} + export class Checkbox extends Widget { private _el: HTMLInputElement; private _label: HTMLSpanElement; + private disabledCheckboxForeground: Color; private _onChange = new Emitter(); public readonly onChange: Event = this._onChange.event; @@ -65,6 +71,7 @@ export class Checkbox extends Widget { public set enabled(val: boolean) { this._el.disabled = !val; + this.updateStyle(); } public get enabled(): boolean { @@ -90,4 +97,13 @@ export class Checkbox extends Widget { public enable(): void { this.enabled = true; } + + public style(styles: ICheckboxStyles): void { + this.disabledCheckboxForeground = styles.disabledCheckboxForeground; + this.updateStyle(); + } + + private updateStyle(): void { + this._label.style.color = !this.enabled && this.disabledCheckboxForeground ? this.disabledCheckboxForeground.toString() : 'inherit'; + } } diff --git a/src/sql/base/browser/ui/modal/modal.ts b/src/sql/base/browser/ui/modal/modal.ts index 44f8a153d3..016e9968ce 100644 --- a/src/sql/base/browser/ui/modal/modal.ts +++ b/src/sql/base/browser/ui/modal/modal.ts @@ -27,7 +27,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService'; export const MODAL_SHOWING_KEY = 'modalShowing'; export const MODAL_SHOWING_CONTEXT = new RawContextKey>(MODAL_SHOWING_KEY, []); -const INFO_ALT_TEXT = localize('infoAltText', 'Infomation'); +const INFO_ALT_TEXT = localize('infoAltText', 'Information'); const WARNING_ALT_TEXT = localize('warningAltText', 'Warning'); const ERROR_ALT_TEXT = localize('errorAltText', 'Error'); const SHOW_DETAILS_TEXT = localize('showMessageDetails', 'Show Details'); diff --git a/src/sql/common/theme/colors.ts b/src/sql/common/theme/colors.ts index eb42ca596d..0e9cd3638b 100644 --- a/src/sql/common/theme/colors.ts +++ b/src/sql/common/theme/colors.ts @@ -12,6 +12,7 @@ export const tableHeaderForeground = registerColor('table.headerForeground', { d 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 disabledCheckboxForeground = registerColor('checkbox.disabled.foreground', { dark: '#888888', light: '#888888', hc: Color.black }, nls.localize('disabledCheckboxforeground', "Disabled checkbox foreground.")); 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")); diff --git a/src/sql/common/theme/styler.ts b/src/sql/common/theme/styler.ts index df2b8e936f..d0a7936576 100644 --- a/src/sql/common/theme/styler.ts +++ b/src/sql/common/theme/styler.ts @@ -255,3 +255,10 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic buttonFocusOutline: (style && style.buttonFocusOutline) || sqlcolors.buttonFocusOutline }, widget); } + +export function attachCheckboxStyler(widget: IThemable, themeService: IThemeService, style?: { disabledCheckboxForeground?: cr.ColorIdentifier }) + : IDisposable { + return attachStyler(themeService, { + disabledCheckboxForeground: (style && style.disabledCheckboxForeground) || sqlcolors.disabledCheckboxForeground + }, widget); +} diff --git a/src/sql/parts/connection/connectionDialog/connectionWidget.ts b/src/sql/parts/connection/connectionDialog/connectionWidget.ts index 28880ade97..332f055a4e 100644 --- a/src/sql/parts/connection/connectionDialog/connectionWidget.ts +++ b/src/sql/parts/connection/connectionDialog/connectionWidget.ts @@ -17,7 +17,7 @@ import { IConnectionProfile } from 'sql/parts/connection/common/interfaces'; import { ConnectionOptionSpecialType } from 'sql/workbench/api/common/sqlExtHostTypes'; import * as Constants from 'sql/parts/connection/common/constants'; import { ConnectionProfileGroup, IConnectionProfileGroup } from 'sql/parts/connection/common/connectionProfileGroup'; -import { attachInputBoxStyler, attachButtonStyler, attachEditableDropdownStyler } from 'sql/common/theme/styler'; +import { attachButtonStyler, attachCheckboxStyler, attachEditableDropdownStyler, attachInputBoxStyler } from 'sql/common/theme/styler'; import { Dropdown } from 'sql/base/browser/ui/editableDropdown/dropdown'; import { IConnectionManagementService } from 'sql/parts/connection/common/connectionManagement'; import { ICapabilitiesService } from 'sql/services/capabilities/capabilitiesService'; @@ -274,6 +274,7 @@ export class ConnectionWidget { this._toDispose.push(attachInputBoxStyler(this._passwordInputBox, this._themeService)); this._toDispose.push(styler.attachSelectBoxStyler(this._serverGroupSelectBox, this._themeService)); this._toDispose.push(attachButtonStyler(this._advancedButton, this._themeService)); + this._toDispose.push(attachCheckboxStyler(this._rememberPasswordCheckBox, this._themeService)); if (this._authTypeSelectBox) { // Theme styler diff --git a/src/sql/parts/disasterRecovery/backup/backup.component.ts b/src/sql/parts/disasterRecovery/backup/backup.component.ts index 909a0cc9fe..c6d5da6153 100644 --- a/src/sql/parts/disasterRecovery/backup/backup.component.ts +++ b/src/sql/parts/disasterRecovery/backup/backup.component.ts @@ -14,7 +14,7 @@ import { ModalFooterStyle } from 'sql/base/browser/ui/modal/modal'; import { CategoryView } from 'sql/base/browser/ui/modal/optionsDialog'; import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; import { SplitView } from 'sql/base/browser/ui/splitview/splitview'; -import { attachButtonStyler, attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'sql/common/theme/styler'; +import { attachButtonStyler, attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler, attachCheckboxStyler } from 'sql/common/theme/styler'; import { IConnectionProfile } from 'sql/parts/connection/common/interfaces'; import * as BackupConstants from 'sql/parts/disasterRecovery/backup/constants'; import { IBackupService, IBackupUiService, TaskExecutionMode } from 'sql/parts/disasterRecovery/backup/common/backupService'; @@ -523,6 +523,11 @@ export class BackupComponent { this._toDispose.push(attachInputBoxStyler(this.mediaNameBox, this.themeService)); this._toDispose.push(attachInputBoxStyler(this.mediaDescriptionBox, this.themeService)); this._toDispose.push(attachInputBoxStyler(this.backupRetainDaysBox, this.themeService)); + this._toDispose.push(attachCheckboxStyler(this.copyOnlyCheckBox, this.themeService)); + this._toDispose.push(attachCheckboxStyler(this.encryptCheckBox, this.themeService)); + this._toDispose.push(attachCheckboxStyler(this.verifyCheckBox, this.themeService)); + this._toDispose.push(attachCheckboxStyler(this.checksumCheckBox, this.themeService)); + this._toDispose.push(attachCheckboxStyler(this.continueOnErrorCheckBox, this.themeService)); this._toDispose.push(this.backupTypeSelectBox.onDidSelect(selected => this.onBackupTypeChanged())); this.addButtonClickHandler(this.addPathButton, () => this.onAddClick()); diff --git a/src/sql/parts/disasterRecovery/restore/restoreDialog.ts b/src/sql/parts/disasterRecovery/restore/restoreDialog.ts index 7b61e80710..39fc2a7757 100644 --- a/src/sql/parts/disasterRecovery/restore/restoreDialog.ts +++ b/src/sql/parts/disasterRecovery/restore/restoreDialog.ts @@ -33,7 +33,7 @@ import { Table } from 'sql/base/browser/ui/table/table'; import { TableDataView } from 'sql/base/browser/ui/table/tableDataView'; import * as DialogHelper from 'sql/base/browser/ui/modal/dialogHelper'; import { Modal } from 'sql/base/browser/ui/modal/modal'; -import { attachButtonStyler, attachModalDialogStyler, attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler } from 'sql/common/theme/styler'; +import { attachButtonStyler, attachModalDialogStyler, attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler, attachCheckboxStyler } from 'sql/common/theme/styler'; import * as TelemetryKeys from 'sql/common/telemetryKeys'; import * as BackupConstants from 'sql/parts/disasterRecovery/backup/constants'; import { RestoreViewModel, RestoreOptionParam, SouceDatabaseNamesParam } from 'sql/parts/disasterRecovery/restore/restoreViewModel'; @@ -532,6 +532,7 @@ export class RestoreDialog extends Modal { ariaLabel: label }); }); + this._register(attachCheckboxStyler(checkbox, this._themeService)); return checkbox; } diff --git a/src/sql/parts/modelComponents/checkbox.component.ts b/src/sql/parts/modelComponents/checkbox.component.ts index d8fe0ca504..b58744fd59 100644 --- a/src/sql/parts/modelComponents/checkbox.component.ts +++ b/src/sql/parts/modelComponents/checkbox.component.ts @@ -14,6 +14,8 @@ import { ComponentBase } from 'sql/parts/modelComponents/componentBase'; import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces'; import { Checkbox, ICheckboxOptions } from 'sql/base/browser/ui/checkbox/checkbox'; import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; +import { attachCheckboxStyler } from 'sql/common/theme/styler'; +import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; @Component({ selector: 'modelview-checkbox', @@ -30,7 +32,8 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone constructor( @Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface, @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, - @Inject(forwardRef(() => ElementRef)) el: ElementRef) { + @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, + @Inject(forwardRef(() => ElementRef)) el: ElementRef,) { super(changeRef, el); } @@ -55,6 +58,7 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone args: e }); })); + this._register(attachCheckboxStyler(this._input, this.themeService)); } }