diff --git a/extensions/theme-defaults/package.json b/extensions/theme-defaults/package.json index 3669964e82..95ee03eeca 100644 --- a/extensions/theme-defaults/package.json +++ b/extensions/theme-defaults/package.json @@ -13,11 +13,18 @@ }, "contributes": { "themes": [ - { - "label": "High Contrast", - "uiTheme": "hc-black", - "path": "./themes/hc_black.json" - } + { + "id": "Default High Contrast", + "label": "%hcColorThemeLabel%", + "uiTheme": "hc-black", + "path": "./themes/hc_black.json" + }, + { + "id": "Default High Contrast Light", + "label": "%lightHcColorThemeLabel%", + "uiTheme": "hc-light", + "path": "./themes/hc_light.json" + } ] }, "iconThemes": [ diff --git a/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css b/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css index d2608a912d..8a3ad52c6b 100644 --- a/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css +++ b/src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css @@ -4,7 +4,8 @@ *--------------------------------------------------------------------------------------------*/ -.vs .chevron-right.codicon { +.vs .chevron-right.codicon, +.hc-light .chevron-right.codicon { background-image: url("chevron_right.svg"); } diff --git a/src/sql/base/browser/ui/dropdownList/media/dropdownList.css b/src/sql/base/browser/ui/dropdownList/media/dropdownList.css index 50e4521a90..19edebd784 100644 --- a/src/sql/base/browser/ui/dropdownList/media/dropdownList.css +++ b/src/sql/base/browser/ui/dropdownList/media/dropdownList.css @@ -20,6 +20,10 @@ padding-right: 10px; } +.hc-light .monaco-dropdown > .dropdown-icon{ + content: url("dropdownarrow.svg"); +} + .vs-dark .monaco-dropdown > .dropdown-icon, .hc-black .monaco-dropdown > .dropdown-icon { content: url("dropdownarrow_inverse.svg"); diff --git a/src/sql/base/browser/ui/panel/media/panel.css b/src/sql/base/browser/ui/panel/media/panel.css index 7c9a6551f1..7f7a41d1d2 100644 --- a/src/sql/base/browser/ui/panel/media/panel.css +++ b/src/sql/base/browser/ui/panel/media/panel.css @@ -83,6 +83,10 @@ panel { outline: 1px dashed #f38518; outline-offset: -3px; } +.hc-light .tabbedPanel .tabList .tab-header:hover:not(.selected) { + background-color: #dcdcdc; + outline: none; +} .tabbedPanel.horizontal > .title .tabList .tab .tabLabel, .tabbedPanel.vertical > .title .tabList .tab .tabLabel { @@ -216,7 +220,8 @@ panel { cursor: pointer; } -.vs .tabbedPanel .tab-action.collapse { +.vs .tabbedPanel .tab-action.collapse, +.hc-light .tabbedPanel .tab-action.collapse { background-image: url("collapse.svg"); } @@ -225,7 +230,8 @@ panel { background-image: url("collapse_inverse.svg"); } -.vs .tabbedPanel .tab-action.expand { +.vs .tabbedPanel .tab-action.expand, +.hc-light .tabbedPanel .tab-action.expand { background-image: url("expand.svg"); } diff --git a/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css b/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css index 4221d3c7d4..75c2550f15 100644 --- a/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css +++ b/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css @@ -29,7 +29,9 @@ properties-container .columnLayout.property { } properties-container .propertyName, -properties-container .splitter { +.hc-light properties-container .propertyName, +properties-container .splitter, +.hc-light properties-container .splitter { opacity: 0.6; font-size: 12px; flex: 0 0 auto diff --git a/src/sql/base/browser/ui/table/media/slickColorTheme.css b/src/sql/base/browser/ui/table/media/slickColorTheme.css index afdcb7d03c..bbf9ecd5db 100644 --- a/src/sql/base/browser/ui/table/media/slickColorTheme.css +++ b/src/sql/base/browser/ui/table/media/slickColorTheme.css @@ -155,54 +155,91 @@ } /* icons */ +.hc-light .codicon.extendFullScreen { + /* ExtendToFullScreen_16x_vscode_inverse.svg */ + background-image: url("extendFullScreen.svg"); +} + .vs-dark .codicon.extendFullScreen, .hc-black .codicon.extendFullScreen { /* ExtendToFullScreen_16x_vscode_inverse.svg */ background-image: url("extendFullScreen_inverse.svg"); } +.hc-light .codicon.exitFullScreen { + background-image: url("exitFullScreen.svg"); +} + .vs-dark .codicon.exitFullScreen, .hc-black .codicon.exitFullScreen { /* ExitFullScreen_16x_vscode_inverse.svg */ background-image: url("exitFullScreen_inverse.svg"); } +.hc-light .codicon.saveJson { + background-image: url("saveJson.svg"); +} + .vs-dark .codicon.saveJson, .hc-black .codicon.saveJson { /* ResultToJSON_16x_vscode_inverse.svg */ background-image: url("saveJson_inverse.svg"); } +.hc-light .codicon.saveCsv { + background-image: url("saveCsv.svg"); +} + .vs-dark .codicon.saveCsv, .hc-black .codicon.saveCsv { /* ResultToCSV_16x_vscode_inverse.svg */ background-image: url("saveCsv_inverse.svg"); } +.hc-light .codicon.saveExcel { + background-image: url("saveExcel.svg"); +} + .vs-dark .codicon.saveExcel, .hc-black .codicon.saveExcel { /* ResultToXlsx_16x_vscode_inverse.svg */ background-image: url("saveExcel_inverse.svg"); } +.hc-light .codicon.saveMarkdown { + background-image: url("saveMarkdown.svg"); +} + .vs-dark .codicon.saveMarkdown, .hc-black .codicon.saveMarkdown { /* ResultToMarkdown_16x_vscode_inverse.svg */ background-image: url("saveMarkdown_inverse.svg"); } +.hc-light .codicon.saveXml { + background-image: url("saveXml.svg"); +} + .vs-dark .codicon.saveXml, .hc-black .codicon.saveXml { /* ResultToXml_16x_vscode_inverse.svg */ background-image: url("saveXml_inverse.svg"); } +.hc-light .codicon.viewChart { + background-image: url("viewChart.svg"); +} + .vs-dark .codicon.viewChart, .hc-black .codicon.viewChart { /* ResultToXlsx_16x_vscode */ background-image: url("viewChart_inverse.svg"); } +.hc-light .codicon.viewVisualizer { + background-image: url("viewVisualizer.svg"); +} + .vs-dark .codicon.viewVisualizer, .hc-black .codicon.viewVisualizer { background-image: url("viewVisualizer_inverse.svg"); diff --git a/src/sql/base/browser/ui/table/media/table.css b/src/sql/base/browser/ui/table/media/table.css index 8eff94c95a..903c3621a3 100644 --- a/src/sql/base/browser/ui/table/media/table.css +++ b/src/sql/base/browser/ui/table/media/table.css @@ -24,7 +24,9 @@ } .vs .slick-header-menuicon.ascending, -.vs .monaco-table .slick-sort-indicator-asc { +.hc-light .slick-header-menuicon.ascending, +.vs .monaco-table .slick-sort-indicator-asc, +.hc-light .monaco-table .slick-sort-indicator-asc { background-image: url('sort_asc.svg'); } @@ -36,7 +38,9 @@ } .vs .slick-header-menuicon.descending, -.vs .monaco-table .slick-sort-indicator-desc { +.hc-light .slick-header-menuicon.descending, +.vs .monaco-table .slick-sort-indicator-desc, +.hc-light .monaco-table .slick-sort-indicator-desc { background-image: url('sort_desc.svg'); } @@ -71,12 +75,17 @@ padding: 0px; } +.hc-light .slick-header-menubutton { + background-image: url('down.svg'); +} + .vs-dark .slick-header-menubutton, .hc-black .slick-header-menubutton { background-image: url('down-inverse.svg'); } -.slick-header-menubutton.filtered { +.slick-header-menubutton.filtered, +.hc-light .slick-header-menubutton.filtered { background-image: url('filter.svg'); } @@ -97,6 +106,10 @@ position: absolute; } +.hc-light .slick-header-menu { + background: none repeat scroll 0 0 #F3F2F1; +} + .vs-dark .slick-header-menu { background: none repeat scroll 0 0 #333333; } diff --git a/src/sql/base/browser/ui/taskbar/media/icons.css b/src/sql/base/browser/ui/taskbar/media/icons.css index 14e2bf69e0..596cce5a15 100644 --- a/src/sql/base/browser/ui/taskbar/media/icons.css +++ b/src/sql/base/browser/ui/taskbar/media/icons.css @@ -3,7 +3,8 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.vs .monaco-toolbar .action-label.toolbar-toggle-more { +.vs .monaco-toolbar .action-label.toolbar-toggle-more, +.hc-light .monaco-toolbar .action-label.toolbar-toggle-more { background-image: url('ellipsis.svg'); } @@ -13,24 +14,28 @@ } .vs .codicon.start, +.hc-light .codicon.start, .vs-dark .codicon.start, .hc-black .codicon.start { background-image: url('start.svg'); } .vs .codicon.add, +.hc-light .codicon.add, .vs-dark .codicon.add, .hc-black .codicon.add { background-image: url('add.svg'); } .vs .codicon.stop, +.hc-light .codicon.stop, .vs-dark .codicon.stop, .hc-black .codicon.stop { background-image: url('stop.svg'); } -.vs .codicon.disconnect { +.vs .codicon.disconnect, +.hc-light .codicon.disconnect { background-image: url('disconnect.svg'); } @@ -40,7 +45,8 @@ background-repeat: no-repeat; } -.vs .codicon.connect { +.vs .codicon.connect, +.hc-light .codicon.connect { background-image: url('connect.svg'); } @@ -50,7 +56,8 @@ background-repeat: no-repeat; } -.vs .codicon.changeConnection { +.vs .codicon.changeConnection, +.hc-light .codicon.changeConnection { background-image: url('change_connection.svg'); } @@ -61,15 +68,19 @@ } .vs .codicon.estimatedQueryPlan, -.vs .codicon.actualQueryPlan { +.hc-light .codicon.estimatedQueryPlan, +.vs .codicon.actualQueryPlan, +.hc-light .codicon.actualQueryPlan { background-image: url('query-plan.svg'); } -.vs .codicon.disabledActualExecutionPlan { +.vs .codicon.disabledActualExecutionPlan, +.hc-light .codicon.disabledActualExecutionPlan { background-image: url('disabled-actual-execution-plan.svg'); } -.vs .codicon.enabledActualExecutionPlan { +.vs .codicon.enabledActualExecutionPlan, +.hc-light .codicon.enabledActualExecutionPlan { background-image: url('enabled-actual-execution-plan.svg'); } @@ -90,7 +101,8 @@ background-image: url('enabled-actual-execution-plan-inverse.svg'); } -.vs .codicon.createInsight { +.vs .codicon.createInsight, +.hc-light .codicon.createInsight { background-image: url('create_insight.svg'); } @@ -99,7 +111,8 @@ background-image: url('create_insight_inverse.svg'); } -.vs .codicon.copyImage { +.vs .codicon.copyImage, +.hc-light .codicon.copyImage { background-image: url('copy_image.svg'); } @@ -108,7 +121,8 @@ background-image: url('copy_image_inverse.svg'); } -.vs .codicon.saveAsImage { +.vs .codicon.saveAsImage, +.hc-light .codicon.saveAsImage { background-image: url('save_as_image.svg'); } @@ -117,7 +131,8 @@ background-image: url('save_as_image_inverse.svg'); } -.vs .codicon.enablesqlcmd { +.vs .codicon.enablesqlcmd, +.hc-light .codicon.enablesqlcmd { background-image: url('enable_sqlcmd.svg'); } @@ -127,7 +142,8 @@ background-repeat: no-repeat; } -.vs .codicon.disablesqlcmd { +.vs .codicon.disablesqlcmd, +.hc-light .codicon.disablesqlcmd { background-image: url('disable_sqlcmd.svg'); } diff --git a/src/sql/base/browser/ui/taskbar/media/taskbar.css b/src/sql/base/browser/ui/taskbar/media/taskbar.css index bfbb12b00b..4f335168fe 100644 --- a/src/sql/base/browser/ui/taskbar/media/taskbar.css +++ b/src/sql/base/browser/ui/taskbar/media/taskbar.css @@ -108,7 +108,8 @@ box-sizing: border-box; } -.hc-black .carbon-taskbar .overflow { +.hc-black .carbon-taskbar .overflow, +.hc-light .carbon-taskbar .overflow { box-shadow: none; } diff --git a/src/sql/base/parts/tree/browser/loading-hc-light.svg b/src/sql/base/parts/tree/browser/loading-hc-light.svg new file mode 100644 index 0000000000..4c6f51f2cc --- /dev/null +++ b/src/sql/base/parts/tree/browser/loading-hc-light.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + diff --git a/src/sql/base/parts/tree/browser/tree-collapsed-hc-light.svg b/src/sql/base/parts/tree/browser/tree-collapsed-hc-light.svg new file mode 100644 index 0000000000..b817f118e3 --- /dev/null +++ b/src/sql/base/parts/tree/browser/tree-collapsed-hc-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/sql/base/parts/tree/browser/tree-expanded-hc-light.svg b/src/sql/base/parts/tree/browser/tree-expanded-hc-light.svg new file mode 100644 index 0000000000..fe330f5710 --- /dev/null +++ b/src/sql/base/parts/tree/browser/tree-expanded-hc-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/sql/base/parts/tree/browser/tree.css b/src/sql/base/parts/tree/browser/tree.css index 4e5ac5fe96..c891ae0921 100644 --- a/src/sql/base/parts/tree/browser/tree.css +++ b/src/sql/base/parts/tree/browser/tree.css @@ -72,21 +72,42 @@ left: -16px; } +.hc-light .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before { + background-image: url('tree-collapsed-hc-light.svg'); +} + .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.expanded > .content:before { background-image: url('tree-expanded-light.svg'); } +.hc-light .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.expanded > .content:before { + background-image: url('tree-expanded-hc-light.svg'); +} + .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected.expanded:not(.loading) > .content:before { background-image: url('tree-expanded-hc.svg'); } +.hc-light .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected.expanded:not(.loading) > .content:before { + background-image: url('tree-expanded-hc-light.svg'); +} + .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected:not(.loading) > .content:before { background-image: url('tree-collapsed-hc.svg'); } +.hc-light .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected:not(.loading) > .content:before { + background-image: url('tree-collapsed-hc-light.svg'); +} + .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before { background-image: url('loading.svg'); } + +.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row.has-children.loading > .content:before { + background-image: url('loading-hc-light.svg'); +} + .vs-dark .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before { background-image: url('tree-collapsed-dark.svg'); } diff --git a/src/sql/media/icons/common-icons.css b/src/sql/media/icons/common-icons.css index 47cd368c77..af394af723 100644 --- a/src/sql/media/icons/common-icons.css +++ b/src/sql/media/icons/common-icons.css @@ -3,7 +3,8 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.vs .codicon.settings { +.vs .codicon.settings, +.hc-light .codicon.settings { background-image: url("settings.svg"); } @@ -13,18 +14,21 @@ } .vs .codicon.backup, +.hc-light .codicon.backup, .vs-dark .codicon.backup, .hc-black .codicon.backup { background: url("backup.svg") center center no-repeat; } .vs .codicon.restore, +.hc-light .codicon.restore, .vs-dark .codicon.restore, .hc-black .codicon.restore { background: url("restore.svg") center center no-repeat; } -.vs .codicon.database { +.vs .codicon.database, +.hc-light .codicon.database { background: url("database.svg") center center no-repeat; } @@ -34,6 +38,7 @@ } .vs-dark .codicon.icon-dashboard-view::before, +.hc-light .codicon.icon-dashboard-view::before, .hc-black .codicon.icon-dashboard-view::before, .vs .codicon.icon-dashboard-view::before { -webkit-mask-image: url("dashboard_view.svg"); @@ -41,12 +46,14 @@ } .vs .codicon.error, +.hc-light .codicon.error, .vs-dark .codicon.error, .hc-black .codicon.error { background: url("globalerror_red.svg") center center no-repeat; } -.vs .codicon.file { +.vs .codicon.file, +.hc-light .codicon.file { background: url("file.svg") center center no-repeat; } @@ -55,7 +62,8 @@ background: url("file_inverse.svg") center center no-repeat; } -.vs .codicon.new-database { +.vs .codicon.new-database, +.hc-light .codicon.new-database { background: url("new_database.svg") center center no-repeat; } @@ -64,7 +72,8 @@ background: url("new_database_inverse.svg") center center no-repeat; } -.vs .codicon.server-page { +.vs .codicon.server-page, +.hc-light .codicon.server-page { background: url("server_page.svg") center center no-repeat; } @@ -74,30 +83,35 @@ } .vs .codicon.globalError, +.hc-light .codicon.globalError, .vs-dark .codicon.globalError, .hc-black .codicon.globalError { background: url("globalerror.svg") center center no-repeat; } .vs .sql.codicon.error, +.hc-light .sql.codicon.error, .vs-dark .sql.codicon.error, .hc-black .sql.codicon.error { content: url("status_error.svg"); } .vs .sql.codicon.warning, +.hc-light .sql.codicon.warning, .vs-dark .sql.codicon.warning, .hc-black .sql.codicon.warning { content: url("status_warning.svg"); } .vs .sql.codicon.info, +.hc-light .sql.codicon.info, .vs-dark .sql.codicon.info, .hc-black .sql.codicon.info { content: url("status_info.svg"); } -.vs .codicon.help { +.vs .codicon.help, +.hc-light .codicon.help { content: url("help.svg"); } @@ -107,7 +121,8 @@ } .codicon.info-icon, -.vs .codicon.info-icon { +.vs .codicon.info-icon, +.hc-light .codicon.info-icon { background-image: url("info.svg"); } @@ -117,18 +132,21 @@ } .vs .codicon.success, +.hc-light .codicon.success, .vs-dark .codicon.success, .hc-black .codicon.success { content: url("status_success.svg"); } .vs .codicon.canceled, +.hc-light .codicon.canceled, .vs-dark .codicon.canceled, .hc-black .codicon.canceled { content: url("status_cancelled.svg"); } -.vs .codicon.in-progress { +.vs .codicon.in-progress, +.hc-light .codicon.in-progress { content: url("loading.svg"); } @@ -138,6 +156,7 @@ } .vs .codicon.scriptToClipboard, +.hc-light .codicon.scriptToClipboard, .vs-dark .codicon.scriptToClipboard, .hc-black .codicon.scriptToClipboard { background-image: url("script_to_clipboard.svg"); @@ -146,7 +165,9 @@ } .vs .codicon:not(.masked-icon).close, -.vs .codicon:not(.masked-icon).remove { +.vs .codicon:not(.masked-icon).remove, +.hc-light .codicon:not(.masked-icon).close, +.hc-light .codicon:not(.masked-icon).remove { background: url('close.svg') center center no-repeat !important; } @@ -157,7 +178,8 @@ background: url("close_inverse.svg") center center no-repeat !important; } -.vs .codicon.filter { +.vs .codicon.filter, +.hc-light .codicon.filter { background: url("filter.svg") center center no-repeat !important; } @@ -166,7 +188,8 @@ background: url("filter_inverse.svg") center center no-repeat !important; } -.vs .codicon.filterLabel { +.vs .codicon.filterLabel, +.hc-light .codicon.filterLabel { background-image: url("filter.svg"); } @@ -175,7 +198,8 @@ background-image: url("filter_inverse.svg"); } -.vs .codicon.clear-filter { +.vs .codicon.clear-filter, +.hc-light .codicon.clear-filter { background-image: url("clearfilter.svg"); } @@ -185,12 +209,14 @@ } .vs .codicon.warning-badge, +.hc-light .codicon.warning-badge, .vs-dark .codicon.warning-badge, .hc-black .codicon.warning-badge { background: url("status_warning.svg") center center no-repeat; } .vs .codicon.refresh, +.hc-light .codicon.refresh, .vs-dark .codicon.refresh, .hc-black .codicon.refresh { background: url("refresh.svg") no-repeat; @@ -201,7 +227,8 @@ background: url("ellipsis-inverse.svg") center center no-repeat; } -.vs .codicon.toggle-more { +.vs .codicon.toggle-more, +.hc-light .codicon.toggle-more { background: url("ellipsis.svg") center center no-repeat; } @@ -210,23 +237,27 @@ background: url("new_inverse.svg") center center no-repeat; } -.vs .codicon:not(.masked-icon).new { +.vs .codicon:not(.masked-icon).new, +.hc-light .codicon:not(.masked-icon).new { background: url("new.svg") center center no-repeat; } .vs .codicon.new-query, +.hc-light .codicon.new-query, .vs-dark .codicon.new-query, .hc-black .codicon.new-query { background: url("newquery.svg") center center no-repeat; } .vs .codicon.info, +.hc-light .codicon.info, .hc-black .codicon.info, .vs-dark .codicon.info { background: url("info.svg") center center no-repeat; } .vs .codicon.edit, +.hc-light .codicon.edit, .hc-black .codicon.edit, .vs-dark .codicon.edit { background: url("edit.svg") center center no-repeat; @@ -237,7 +268,8 @@ background: url("pin_inverse.svg") center center no-repeat; } -.vs .codicon.pin { +.vs .codicon.pin, +.hc-light .codicon.pin { background: url("pin.svg") center center no-repeat; } @@ -246,7 +278,8 @@ background: url("unpin_inverse.svg") center center no-repeat; } -.vs .codicon.unpin { +.vs .codicon.unpin, +.hc-light .codicon.unpin { background: url("unpin.svg") center center no-repeat; } @@ -255,11 +288,13 @@ background: url("book_inverse.svg") center center no-repeat; } -.vs .codicon.bookreport { +.vs .codicon.bookreport, +.hc-light .codicon.bookreport { background: url("book.svg") center center no-repeat; } -.vs .sql.codicon.pause { +.vs .sql.codicon.pause, +.hc-light .sql.codicon.pause { background-image: url("pause.svg"); } @@ -268,7 +303,8 @@ background-image: url("pause_inverse.svg"); } -.vs .sql.codicon.continue { +.vs .sql.codicon.continue, +.hc-light .sql.codicon.continue { background-image: url("continue.svg"); } @@ -277,7 +313,8 @@ background-image: url("continue_inverse.svg"); } -.vs .sql.codicon.checked { +.vs .sql.codicon.checked, +.hc-light .sql.codicon.checked { background-image: url("check.svg"); } @@ -286,7 +323,8 @@ background-image: url("check_inverse.svg"); } -.vs .sql.codicon.start { +.vs .sql.codicon.start, +.hc-light .sql.codicon.start { background-image: url("start.svg"); } @@ -295,7 +333,8 @@ background-image: url("start_inverse.svg"); } -.vs .sql.codicon.stop { +.vs .sql.codicon.stop, +.hc-light .sql.codicon.stop { background-image: url("stop.svg"); } @@ -309,24 +348,29 @@ background: url("export_inverse.svg") center center no-repeat; } -.vs .codicon.export { +.vs .codicon.export, +.hc-light .codicon.export { background: url("export.svg") center center no-repeat; } /* Notebook cells */ -.codicon.toolbarIconRunInactive { +.codicon.toolbarIconRunInactive, +.hc-light .codicon.toolbarIconRunInactive { background-image: url("execute_cell_grey.svg"); } -.codicon.toolbarIconRun { +.codicon.toolbarIconRun, +.hc-light .codicon.toolbarIconRun { background-image: url("execute_cell.svg"); } -.codicon.toolbarIconRunError { +.codicon.toolbarIconRunError, +.hc-light .codicon.toolbarIconRunError { background-image: url("execute_cell_error.svg"); } -.codicon.toolbarIconStop { +.codicon.toolbarIconStop, +.hc-light .codicon.toolbarIconStop { background-image: url("stop_cell_solidanimation.svg"); } @@ -502,7 +546,8 @@ Includes non-masked style declarations. */ mask-image: url("packages.svg"); } -.codicon.arrow-up { +.codicon.arrow-up, +.hc-light .codicon.arrow-up { background-image: url("chevron_up.svg"); } @@ -511,7 +556,8 @@ Includes non-masked style declarations. */ background-image: url("chevron_up_inverse.svg"); } -.codicon:not(.masked-icon).arrow-down { +.codicon:not(.masked-icon).arrow-down, +.hc-light .codicon:not(.masked-icon).arrow-down { background-image: url("chevron_down.svg"); } diff --git a/src/sql/media/overwriteVsIcons.css b/src/sql/media/overwriteVsIcons.css index b13d3a0c02..551a180db4 100644 --- a/src/sql/media/overwriteVsIcons.css +++ b/src/sql/media/overwriteVsIcons.css @@ -7,7 +7,8 @@ background-size: 10px; } -.monaco-workbench.vs .tab > .tab-close .action-label.close-editor-action { +.monaco-workbench.vs .tab > .tab-close .action-label.close-editor-action, +.monaco-workbench.hc-light .tab > .tab-close .action-label.close-editor-action { background: url('icons/close.svg') center center no-repeat; } diff --git a/src/sql/platform/actions/browser/menuEntryActionViewItem.ts b/src/sql/platform/actions/browser/menuEntryActionViewItem.ts index af8a5ea89b..67a3c22c95 100644 --- a/src/sql/platform/actions/browser/menuEntryActionViewItem.ts +++ b/src/sql/platform/actions/browser/menuEntryActionViewItem.ts @@ -61,7 +61,7 @@ export class LabeledMenuItemActionItem extends MenuEntryActionViewItem { iconClass = ICON_PATH_TO_CSS_RULES.get(iconPathMapKey)!; } else { iconClass = ids.nextId(); - createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.light || item.icon.dark)} !important`); + createCSSRule(`.codicon.${iconClass}, .hc-light .codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.light || item.icon.dark)} !important`); createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.dark)} !important`); ICON_PATH_TO_CSS_RULES.set(iconPathMapKey, iconClass); } diff --git a/src/sql/platform/theme/common/colorRegistry.ts b/src/sql/platform/theme/common/colorRegistry.ts index 8a8b24ee31..1270080742 100644 --- a/src/sql/platform/theme/common/colorRegistry.ts +++ b/src/sql/platform/theme/common/colorRegistry.ts @@ -3,12 +3,12 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { contrastBorder, registerColor } from 'vs/platform/theme/common/colorRegistry'; +import { contrastBorder, focusBorder, registerColor } from 'vs/platform/theme/common/colorRegistry'; import { Color, RGBA } from 'vs/base/common/color'; import * as nls from 'vs/nls'; // Common -export const GroupHeaderBackground = registerColor('groupHeaderBackground', { dark: '#252526', light: '#F3F3F3', hcDark: '#000000', hcLight: '#000000' }, nls.localize('groupHeaderBackground', "Background color of the group header.")); +export const GroupHeaderBackground = registerColor('groupHeaderBackground', { dark: '#252526', light: '#F3F3F3', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('groupHeaderBackground', "Background color of the group header.")); // -- Welcome Page Colors export const tileBoxShadowColor = new Color(new RGBA(0, 1, 4, 0.13)); @@ -21,7 +21,7 @@ export const gradientTwoColorOne = new Color(new RGBA(156, 48, 48, 0)); export const gradientTwoColorTwo = new Color(new RGBA(255, 255, 255, 0.1)); // -- Tiles -export const tileBorder = registerColor('tileBorder', { light: '#fff', dark: '#8A8886', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('tileBorder', "The border color of tiles")); +export const tileBorder = registerColor('tileBorder', { light: '#fff', dark: '#8A8886', hcDark: '#2B56F2', hcLight: contrastBorder }, nls.localize('tileBorder', "The border color of tiles")); export const tileBoxShadow = registerColor('tileBoxShadow', { light: tileBoxShadowColor, dark: tileBoxShadowColor, hcDark: tileBoxShadowColor, hcLight: tileBoxShadowColor }, nls.localize('tileBoxShadow', "The tile box shadow color")); // -- Buttons @@ -39,29 +39,29 @@ export const gradientTwo = registerColor('gradientTwo', { light: gradientTwoColo export const gradientBackground = registerColor('gradientBackground', { light: '#fff', dark: 'transparent', hcDark: 'transparent', hcLight: 'transparent' }, nls.localize('gradientBackground', "The background color for the banner image gradient")); // --- Notebook Colors -export const notebookToolbarIcon = registerColor('notebook.notebookToolbarIcon', { light: '#0078D4', dark: '#3AA0F3', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.notebookToolbarIcon', "Notebook: Main toolbar icons")); -export const notebookToolbarSelectBorder = registerColor('notebook.notebookToolbarSelectBorder', { light: '#A5A5A5', dark: '#8A8886', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('notebook.notebookToolbarSelectBorder', "Notebook: Main toolbar select box border")); -export const notebookToolbarSelectBackground = registerColor('notebook.notebookToolbarSelectBackground', { light: '#FFFFFF', dark: '#1B1A19', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.notebookToolbarSelectBackground', "Notebook: Main toolbar select box background")); -export const notebookToolbarLines = registerColor('notebook.notebookToolbarLines', { light: '#D6D6D6', dark: '#323130', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('notebook.notebookToolbarLines', "Notebook: Main toolbar bottom border and separator")); -export const dropdownArrow = registerColor('notebook.dropdownArrow', { light: '#A5A5A5', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.dropdownArrow', "Notebook: Main toolbar dropdown arrow")); -export const buttonMenuArrow = registerColor('notebook.buttonMenuArrow', { light: '#000000', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.buttonMenuArrow', "Notebook: Main toolbar custom buttonMenu dropdown arrow")); +export const notebookToolbarIcon = registerColor('notebook.notebookToolbarIcon', { light: '#0078D4', dark: '#3AA0F3', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.notebookToolbarIcon', "Notebook: Main toolbar icons")); +export const notebookToolbarSelectBorder = registerColor('notebook.notebookToolbarSelectBorder', { light: '#A5A5A5', dark: '#8A8886', hcDark: '#2B56F2', hcLight: focusBorder }, nls.localize('notebook.notebookToolbarSelectBorder', "Notebook: Main toolbar select box border")); +export const notebookToolbarSelectBackground = registerColor('notebook.notebookToolbarSelectBackground', { light: '#FFFFFF', dark: '#1B1A19', hcDark: '#000000', hcLight: '#fff' }, nls.localize('notebook.notebookToolbarSelectBackground', "Notebook: Main toolbar select box background")); +export const notebookToolbarLines = registerColor('notebook.notebookToolbarLines', { light: '#D6D6D6', dark: '#323130', hcDark: '#2B56F2', hcLight: focusBorder }, nls.localize('notebook.notebookToolbarLines', "Notebook: Main toolbar bottom border and separator")); +export const dropdownArrow = registerColor('notebook.dropdownArrow', { light: '#A5A5A5', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.dropdownArrow', "Notebook: Main toolbar dropdown arrow")); +export const buttonMenuArrow = registerColor('notebook.buttonMenuArrow', { light: '#000000', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.buttonMenuArrow', "Notebook: Main toolbar custom buttonMenu dropdown arrow")); -export const toolbarBackground = registerColor('notebook.toolbarBackground', { light: '#F5F5F5', dark: '#252423', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.toolbarBackground', "Notebook: Markdown toolbar background")); -export const toolbarIcon = registerColor('notebook.toolbarIcon', { light: '#323130', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.toolbarIcon', "Notebook: Markdown toolbar icons")); -export const toolbarBottomBorder = registerColor('notebook.toolbarBottomBorder', { light: '#D4D4D4', dark: '#323130', hcDark: '#E86E58', hcLight: '#E86E58' }, nls.localize('notebook.toolbarBottomBorder', "Notebook: Markdown toolbar bottom border")); +export const toolbarBackground = registerColor('notebook.toolbarBackground', { light: '#F5F5F5', dark: '#252423', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('notebook.toolbarBackground', "Notebook: Markdown toolbar background")); +export const toolbarIcon = registerColor('notebook.toolbarIcon', { light: '#323130', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.toolbarIcon', "Notebook: Markdown toolbar icons")); +export const toolbarBottomBorder = registerColor('notebook.toolbarBottomBorder', { light: '#D4D4D4', dark: '#323130', hcDark: '#E86E58', hcLight: focusBorder }, nls.localize('notebook.toolbarBottomBorder', "Notebook: Markdown toolbar bottom border")); // Notebook: All cells -export const cellBorder = registerColor('notebook.cellBorder', { light: '#0078D4', dark: '#3AA0F3', hcDark: '#E86E58', hcLight: '#E86E58' }, nls.localize('notebook.cellBorder', "Notebook: Active cell border")); +export const cellBorder = registerColor('notebook.cellBorder', { light: '#0078D4', dark: '#3AA0F3', hcDark: '#E86E58', hcLight: focusBorder }, nls.localize('notebook.cellBorder', "Notebook: Active cell border")); // Notebook: Markdown cell -export const markdownEditorBackground = registerColor('notebook.markdownEditorBackground', { light: '#FFFFFF', dark: '#1B1A19', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.markdownEditorBackground', "Notebook: Markdown editor background")); -export const splitBorder = registerColor('notebook.splitBorder', { light: '#E6E6E6', dark: '#323130', hcDark: '#872412', hcLight: '#872412' }, nls.localize('notebook.splitBorder', "Notebook: Border between Markdown editor and preview")); +export const markdownEditorBackground = registerColor('notebook.markdownEditorBackground', { light: '#FFFFFF', dark: '#1B1A19', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('notebook.markdownEditorBackground', "Notebook: Markdown editor background")); +export const splitBorder = registerColor('notebook.splitBorder', { light: '#E6E6E6', dark: '#323130', hcDark: '#872412', hcLight: focusBorder }, nls.localize('notebook.splitBorder', "Notebook: Border between Markdown editor and preview")); // Notebook: Code cell -export const codeEditorBackground = registerColor('notebook.codeEditorBackground', { light: '#F5F5F5', dark: '#333333', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.codeEditorBackground', "Notebook: Code editor background")); -export const codeEditorBackgroundActive = registerColor('notebook.codeEditorBackgroundActive', { light: '#FFFFFF', dark: null, hcDark: null, hcLight: null }, nls.localize('notebook.codeEditorBackgroundActive', "Notebook: Code editor background of active cell")); -export const codeEditorLineNumber = registerColor('notebook.codeEditorLineNumber', { light: '#A19F9D', dark: '#A19F9D', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.codeEditorLineNumber', "Notebook: Code editor line numbers")); -export const codeEditorToolbarIcon = registerColor('notebook.codeEditorToolbarIcon', { light: '#999999', dark: '#A19F9D', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.codeEditorToolbarIcon', "Notebook: Code editor toolbar icons")); -export const codeEditorToolbarBackground = registerColor('notebook.codeEditorToolbarBackground', { light: '#EEEEEE', dark: '#333333', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.codeEditorToolbarBackground', "Notebook: Code editor toolbar background")); -export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbarBorder', { light: '#C8C6C4', dark: '#333333', hcDark: '#000000', hcLight: '#000000' }, nls.localize('notebook.codeEditorToolbarBorder', "Notebook: Code editor toolbar right border")); +export const codeEditorBackground = registerColor('notebook.codeEditorBackground', { light: '#F5F5F5', dark: '#333333', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('notebook.codeEditorBackground', "Notebook: Code editor background")); +export const codeEditorBackgroundActive = registerColor('notebook.codeEditorBackgroundActive', { light: '#FFFFFF', dark: null, hcDark: null, hcLight: '#ffffff' }, nls.localize('notebook.codeEditorBackgroundActive', "Notebook: Code editor background of active cell")); +export const codeEditorLineNumber = registerColor('notebook.codeEditorLineNumber', { light: '#A19F9D', dark: '#A19F9D', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.codeEditorLineNumber', "Notebook: Code editor line numbers")); +export const codeEditorToolbarIcon = registerColor('notebook.codeEditorToolbarIcon', { light: '#999999', dark: '#A19F9D', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('notebook.codeEditorToolbarIcon', "Notebook: Code editor toolbar icons")); +export const codeEditorToolbarBackground = registerColor('notebook.codeEditorToolbarBackground', { light: '#EEEEEE', dark: '#333333', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('notebook.codeEditorToolbarBackground', "Notebook: Code editor toolbar background")); +export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbarBorder', { light: '#C8C6C4', dark: '#333333', hcDark: '#000000', hcLight: '#6fc3df' }, nls.localize('notebook.codeEditorToolbarBorder', "Notebook: Code editor toolbar right border")); export const notebookCellTagBackground = registerColor('notebook.notebookCellTagBackground', { light: '#0078D4', dark: '#0078D4', hcDark: '#0078D4', hcLight: '#0078D4' }, nls.localize('notebook.notebookCellTagBackground', "Tag background color.")); export const notebookCellTagForeground = registerColor('notebook.notebookCellTagForeground', { light: '#FFFFFF', dark: '#FFFFFF', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('notebook.notebookCellTagForeground', "Tag foreground color.")); @@ -70,24 +70,24 @@ export const notebookFindMatchHighlight = registerColor('notebook.findMatchHighl export const notebookFindRangeHighlight = registerColor('notebook.findRangeHighlightBackground', { dark: '#FFA500', light: '#FFA500', hcDark: null, hcLight: null }, nls.localize('notebookFindRangeHighlight', "Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations."), true); // Info Box -export const infoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information.")); -export const infoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning.")); -export const infoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error.")); -export const infoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success.")); +export const infoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information.")); +export const infoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning.")); +export const infoBoxErrorBackground = registerColor('infoBox.errorBackground', { light: '#FEF0F1', dark: '#300306', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoBox.errorBackground', "InfoBox: The background color when the notification type is error.")); +export const infoBoxSuccessBackground = registerColor('infoBox.successBackground', { light: '#F8FFF0', dark: '#1B3300', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoBox.successBackground', "InfoBox: The background color when the notification type is success.")); // Info Button -export const infoButtonForeground = registerColor('infoButton.foreground', { dark: '#FFFFFF', light: '#000000', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('infoButton.foreground', "Info button foreground color.")); -export const infoButtonBackground = registerColor('infoButton.background', { dark: '#1B1A19', light: '#FFFFFF', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoButton.background', "Info button background color.")); +export const infoButtonForeground = registerColor('infoButton.foreground', { dark: '#FFFFFF', light: '#000000', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('infoButton.foreground', "Info button foreground color.")); +export const infoButtonBackground = registerColor('infoButton.background', { dark: '#1B1A19', light: '#FFFFFF', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoButton.background', "Info button background color.")); export const infoButtonBorder = registerColor('infoButton.border', { dark: '#1B1A19', light: '#FFFFFF', hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('infoButton.border', "Info button border color.")); -export const infoButtonHoverBackground = registerColor('infoButton.hoverBackground', { dark: '#282625', light: '#F3F2F1', hcDark: '#000000', hcLight: '#000000' }, nls.localize('infoButton.hoverBackground', "Info button hover background color.")); +export const infoButtonHoverBackground = registerColor('infoButton.hoverBackground', { dark: '#282625', light: '#F3F2F1', hcDark: '#000000', hcLight: '#ffffff' }, nls.localize('infoButton.hoverBackground', "Info button hover background color.")); // Callout Dialog -export const calloutDialogForeground = registerColor('calloutDialog.foreground', { light: '#616161', dark: '#CCCCCC', hcDark: '#FFFFFF', hcLight: '#FFFFFF' }, nls.localize('calloutDialogForeground', 'Callout dialog foreground.')); +export const calloutDialogForeground = registerColor('calloutDialog.foreground', { light: '#616161', dark: '#CCCCCC', hcDark: '#FFFFFF', hcLight: '#000000' }, nls.localize('calloutDialogForeground', 'Callout dialog foreground.')); export const calloutDialogInteriorBorder = registerColor('calloutDialog.interiorBorder', { light: '#D6D6D6', dark: '#323130', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('calloutDialogInteriorBorder', "Callout dialog interior borders used for separating elements.")); export const calloutDialogExteriorBorder = registerColor('calloutDialog.exteriorBorder', { light: '#CCCCCC', dark: '#CCCCCC', hcDark: '#2B56F2', hcLight: '#2B56F2' }, nls.localize('calloutDialogExteriorBorder', "Callout dialog exterior borders to provide contrast against notebook UI.")); -export const calloutDialogHeaderFooterBackground = registerColor('calloutDialog.headerFooterBackground', { light: '#FFFFFF', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.black }, nls.localize('calloutDialogHeaderFooterBackground', 'Callout dialog header and footer background.')); -export const calloutDialogBodyBackground = registerColor('calloutDialog.bodyBackground', { light: '#FFFFFF', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.black }, nls.localize('calloutDialogBodyBackground', "Callout dialog body background.")); +export const calloutDialogHeaderFooterBackground = registerColor('calloutDialog.headerFooterBackground', { light: '#FFFFFF', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.white }, nls.localize('calloutDialogHeaderFooterBackground', 'Callout dialog header and footer background.')); +export const calloutDialogBodyBackground = registerColor('calloutDialog.bodyBackground', { light: '#FFFFFF', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.white }, nls.localize('calloutDialogBodyBackground', "Callout dialog body background.")); export const calloutDialogShadowColor = registerColor('calloutDialog.shadow', { light: '#000000', dark: '#FFFFFF', hcDark: '#000000', hcLight: '#000000' }, nls.localize('calloutDialogShadowColor', 'Callout dialog box shadow color.')); // Designer -export const DesignerPaneSeparator = registerColor('designer.paneSeparator', { light: '#DDDDDD', dark: '#8A8886', hcDark: contrastBorder, hcLight: '#000000' }, nls.localize('designer.paneSeparator', 'The pane separator color.')); +export const DesignerPaneSeparator = registerColor('designer.paneSeparator', { light: '#DDDDDD', dark: '#8A8886', hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('designer.paneSeparator', 'The pane separator color.')); diff --git a/src/sql/platform/theme/common/colors.ts b/src/sql/platform/theme/common/colors.ts index 7cc33e7100..242fdbafe8 100644 --- a/src/sql/platform/theme/common/colors.ts +++ b/src/sql/platform/theme/common/colors.ts @@ -3,26 +3,26 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { registerColor, foreground } from 'vs/platform/theme/common/colorRegistry'; +import { registerColor, foreground, activeContrastBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; 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)), hcDark: '#333334', hcLight: '#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)), hcDark: '#e5e5e5', hcLight: '#e5e5e5' }, 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)), hcDark: '#333334', hcLight: '#fff' }, 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)), hcDark: '#e5e5e5', hcLight: '#000' }, nls.localize('tableHeaderForeground', "Table header foreground color")); export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hcDark: null, hcLight: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active")); export const tableCellOutline = registerColor('table.cell.outline', { dark: '#e3e4e229', light: '#33333333', hcDark: '#e3e4e229', hcLight: '#e3e4e229' }, nls.localize('tableCellOutline', 'Color of the outline of a cell.')); -export const disabledInputBackground = registerColor('input.disabled.background', { dark: '#444444', light: '#dcdcdc', hcDark: Color.black, hcLight: Color.black }, nls.localize('disabledInputBoxBackground', "Disabled Input box background.")); +export const disabledInputBackground = registerColor('input.disabled.background', { dark: '#444444', light: '#dcdcdc', hcDark: Color.black, hcLight: Color.white }, nls.localize('disabledInputBoxBackground', "Disabled Input box background.")); export const disabledInputForeground = registerColor('input.disabled.foreground', { dark: '#888888', light: '#888888', hcDark: foreground, hcLight: foreground }, nls.localize('disabledInputBoxForeground', "Disabled Input box foreground.")); -export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hcDark: null, hcLight: null }, nls.localize('buttonFocusOutline', "Button outline color when focused.")); -export const disabledCheckboxForeground = registerColor('checkbox.disabled.foreground', { dark: '#888888', light: '#888888', hcDark: Color.black, hcLight: Color.black }, nls.localize('disabledCheckboxforeground', "Disabled checkbox foreground.")); +export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hcDark: null, hcLight: activeContrastBorder }, nls.localize('buttonFocusOutline', "Button outline color when focused.")); +export const disabledCheckboxForeground = registerColor('checkbox.disabled.foreground', { dark: '#888888', light: '#888888', hcDark: Color.black, hcLight: Color.white }, nls.localize('disabledCheckboxforeground', "Disabled checkbox foreground.")); // SQL Agent Colors -export const tableBackground = registerColor('agent.tableBackground', { light: '#fffffe', dark: '#333333', hcDark: Color.black, hcLight: Color.black }, nls.localize('agentTableBackground', "SQL Agent Table background color.")); -export const cellBackground = registerColor('agent.cellBackground', { light: '#faf5f8', dark: Color.black, hcDark: Color.black, hcLight: Color.black }, nls.localize('agentCellBackground', "SQL Agent table cell background color.")); +export const tableBackground = registerColor('agent.tableBackground', { light: '#fffffe', dark: '#333333', hcDark: Color.black, hcLight: Color.white }, nls.localize('agentTableBackground', "SQL Agent Table background color.")); +export const cellBackground = registerColor('agent.cellBackground', { light: '#faf5f8', dark: Color.black, hcDark: Color.black, hcLight: Color.white }, nls.localize('agentCellBackground', "SQL Agent table cell background color.")); export const tableHoverBackground = registerColor('agent.tableHoverColor', { light: '#dcdcdc', dark: '#444444', hcDark: null, hcLight: null }, nls.localize('agentTableHoverBackground', "SQL Agent table hover background color.")); -export const jobsHeadingBackground = registerColor('agent.jobsHeadingColor', { light: '#f4f4f4', dark: '#444444', hcDark: '#2b56f2', hcLight: '#2b56f2' }, nls.localize('agentJobsHeadingColor', "SQL Agent heading background color.")); -export const cellBorderColor = registerColor('agent.cellBorderColor', { light: null, dark: null, hcDark: '#2b56f2', hcLight: '#2b56f2' }, nls.localize('agentCellBorderColor', "SQL Agent table cell border color.")); +export const jobsHeadingBackground = registerColor('agent.jobsHeadingColor', { light: '#f4f4f4', dark: '#444444', hcDark: '#2b56f2', hcLight: '#ffffff' }, nls.localize('agentJobsHeadingColor', "SQL Agent heading background color.")); +export const cellBorderColor = registerColor('agent.cellBorderColor', { light: null, dark: null, hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('agentCellBorderColor', "SQL Agent table cell border color.")); export const resultsErrorColor = registerColor('results.error.color', { light: '#f44242', dark: '#f44242', hcDark: '#f44242', hcLight: '#f44242' }, nls.localize('resultsErrorColor', "Results messages error color.")); diff --git a/src/sql/workbench/browser/modal/media/calloutDialog.css b/src/sql/workbench/browser/modal/media/calloutDialog.css index a93108923a..a6d064dfe9 100644 --- a/src/sql/workbench/browser/modal/media/calloutDialog.css +++ b/src/sql/workbench/browser/modal/media/calloutDialog.css @@ -24,6 +24,8 @@ .modal.callout-dialog .modal-content .row { margin-bottom: 16px; } + +.hc-light .modal.callout-dialog .modal-dialog, .hc-black .modal.callout-dialog .modal-dialog { box-shadow: none; } @@ -55,9 +57,12 @@ width: 26px; } +.hc-light .callout-arrow:before, .hc-black .callout-arrow:before { box-shadow: none; } + +.hc-light .callout-arrow.from-left:before, .hc-black .callout-arrow.from-left:before { box-shadow: none; } diff --git a/src/sql/workbench/browser/modal/media/modal.css b/src/sql/workbench/browser/modal/media/modal.css index 61daed1e4c..231802653d 100644 --- a/src/sql/workbench/browser/modal/media/modal.css +++ b/src/sql/workbench/browser/modal/media/modal.css @@ -219,16 +219,16 @@ margin: 3px 10px 3px 3px; } -.modal.flyout-dialog .dialog-message.info .dialog-message-button > a:focus, -.modal.flyout-dialog .dialog-message.error .dialog-message-button > a:focus { +.modal.flyout-dialog .dialog-message.info .dialog-message-button>a:focus, +.modal.flyout-dialog .dialog-message.error .dialog-message-button>a:focus { outline-color: #FFFFFF; } -.modal.flyout-dialog .dialog-message.warning .dialog-message-button > a:focus { +.modal.flyout-dialog .dialog-message.warning .dialog-message-button>a:focus { outline-color: #000000; } -.modal.flyout-dialog .dialog-message-button > a { +.modal.flyout-dialog .dialog-message-button>a { background-position-x: 2px !important; background-color: inherit !important; color: inherit !important; @@ -298,11 +298,32 @@ background: url('error_notification_inverse.svg') center center no-repeat; } +.hc-light .dialog-message.info .dialog-message-icon { + background: url('info_notification.svg') center center no-repeat !important; +} + +.hc-light .dialog-message.error .dialog-message-icon { + background: url('error_notification.svg') center center no-repeat !important; +} + +.hc-light .dialog-message.warning .dialog-message-icon { + background: url('warning_notification.svg') center center no-repeat !important; +} + +.hc-light .copy-message-icon { + background: url('copy.svg') center center no-repeat !important; +} + +.hc-light .close-message-icon { + background: url('close.svg') center center no-repeat !important; +} + .codicon.masked-icon.browse-local { display: inline-block; height: 25px; width: 25px; } + .codicon.masked-icon.browse-local:before { height: 25px; width: 25px; diff --git a/src/sql/workbench/browser/modal/media/optionsDialog.css b/src/sql/workbench/browser/modal/media/optionsDialog.css index aa6fe931a0..c069ac6810 100644 --- a/src/sql/workbench/browser/modal/media/optionsDialog.css +++ b/src/sql/workbench/browser/modal/media/optionsDialog.css @@ -47,7 +47,8 @@ align-items: center; } -.backButtonIcon { +.backButtonIcon, +.hc-light .backButtonIcon { content: url('back.svg'); width: 20px; margin-right: 10px; @@ -73,7 +74,8 @@ background-size: 16px; } -.vs .optionsDialog-options .optionsDialog-description .modal-title { +.vs .optionsDialog-options .optionsDialog-description .modal-title, +.hc-light .optionsDialog-options .optionsDialog-description .modal-title { background-image: url('info_notification.svg') } diff --git a/src/sql/workbench/browser/modal/modal.ts b/src/sql/workbench/browser/modal/modal.ts index 5d0d7863d1..f796606fda 100644 --- a/src/sql/workbench/browser/modal/modal.ts +++ b/src/sql/workbench/browser/modal/modal.ts @@ -754,6 +754,8 @@ export abstract class Modal extends Disposable implements IThemable { box-shadow: 0px 3.2px 7.2px rgba(${shadowRgb.rgba.r}, ${shadowRgb.rgba.g}, ${shadowRgb.rgba.b}, 0.132), 0px 0.6px 1.8px rgba(${shadowRgb.rgba.r}, ${shadowRgb.rgba.g}, ${shadowRgb.rgba.b}, 0.108); } + + .hc-light .modal.callout-dialog .modal-dialog, .hc-black .modal.callout-dialog .modal-dialog { border-color: rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1); } @@ -764,6 +766,8 @@ export abstract class Modal extends Disposable implements IThemable { background-color: ${this._dialogBodyBackground}; border-color: transparent transparent rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 0.5) rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 0.5); } + + .hc-light .callout-arrow:before, .hc-black .callout-arrow:before { border-color: transparent transparent rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1) rgba(${exteriorBorderRgb.rgba.r}, ${exteriorBorderRgb.rgba.g}, ${exteriorBorderRgb.rgba.b}, 1); } diff --git a/src/sql/workbench/browser/modelComponents/iconUtils.ts b/src/sql/workbench/browser/modelComponents/iconUtils.ts index 0a03960287..41eb7ae53e 100644 --- a/src/sql/workbench/browser/modelComponents/iconUtils.ts +++ b/src/sql/workbench/browser/modelComponents/iconUtils.ts @@ -25,7 +25,7 @@ export function createIconCssClass(iconPath: IconPath, className?: string): stri removeCSSRulesContainingSelector(iconClass); const icon = getLightIconUri(iconPath); const iconDark = getDarkIconUri(iconPath) || icon; - createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(icon)}`); + createCSSRule(`.icon.${iconClass}, .hc-light .icon.${iconClass}`, `background-image: ${asCSSUrl(icon)}`); createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(iconDark)}`); return iconClass; } diff --git a/src/sql/workbench/browser/modelComponents/media/editor.css b/src/sql/workbench/browser/modelComponents/media/editor.css index 14bfafd4c8..be81b24d5d 100644 --- a/src/sql/workbench/browser/modelComponents/media/editor.css +++ b/src/sql/workbench/browser/modelComponents/media/editor.css @@ -24,6 +24,10 @@ modelview-diff-editor-component { font-size: 11px } +.hc-light .modelview-diff-editor-title-background { + background-color: #6fc3df; +} + .vs-dark .modelview-diff-editor-title-background { background-color: #434343; } @@ -34,4 +38,4 @@ modelview-diff-editor-component { .modelview-diff-editor-title-background { background-color: #d5d5d5; -} \ No newline at end of file +} diff --git a/src/sql/workbench/browser/modelComponents/media/groupLayout.css b/src/sql/workbench/browser/modelComponents/media/groupLayout.css index 6b1c0ae2bf..f785cdf17e 100644 --- a/src/sql/workbench/browser/modelComponents/media/groupLayout.css +++ b/src/sql/workbench/browser/modelComponents/media/groupLayout.css @@ -27,7 +27,8 @@ cursor: pointer; } -.vs .modelview-group-header-collapsible.expanded { +.vs .modelview-group-header-collapsible.expanded, +.hc-light .modelview-group-header-collapsible.expanded { background-image: url("expanded.svg"); } @@ -36,7 +37,8 @@ background-image: url("expanded_inverse.svg"); } -.vs .modelview-group-header-collapsible.collapsed { +.vs .modelview-group-header-collapsible.collapsed, +.hc-light .modelview-group-header-collapsible.collapsed { background-image: url("collapsed.svg"); } diff --git a/src/sql/workbench/browser/modelComponents/media/loadingComponent.css b/src/sql/workbench/browser/modelComponents/media/loadingComponent.css index 9e74fb2cef..ff2808f541 100644 --- a/src/sql/workbench/browser/modelComponents/media/loadingComponent.css +++ b/src/sql/workbench/browser/modelComponents/media/loadingComponent.css @@ -14,7 +14,8 @@ margin-left: 5px; } -.vs .modelview-loadingComponent-spinner { +.vs .modelview-loadingComponent-spinner, +.hc-light .modelview-loadingComponent-spinner { content: url("loading.svg"); } diff --git a/src/sql/workbench/browser/modelComponents/media/markdown.css b/src/sql/workbench/browser/modelComponents/media/markdown.css index 68e12bd63c..3c6a90b1b7 100644 --- a/src/sql/workbench/browser/modelComponents/media/markdown.css +++ b/src/sql/workbench/browser/modelComponents/media/markdown.css @@ -56,15 +56,18 @@ modelview-dom-component .showEditorSelection li.code-line:hover:before { left: -30px; } -modelview-dom-component .showEditorSelection .code-active-line:before { +modelview-dom-component .showEditorSelection .code-active-line:before, +.monaco-workbench.hc-light modelview-dom-component .showEditorSelection .code-active-line:before { border-left: 3px solid rgba(0, 0, 0, 0.15); } -modelview-dom-component .showEditorSelection .code-line:hover:before { +modelview-dom-component .showEditorSelection .code-line:hover:before, +.monaco-workbench.hc-light modelview-dom-component .showEditorSelection .code-line:hover:before { border-left: 3px solid rgba(0, 0, 0, 0.40); } -modelview-dom-component .showEditorSelection .code-line .code-line:hover:before { +modelview-dom-component .showEditorSelection .code-line .code-line:hover:before, +.monaco-workbench.hc-light modelview-dom-component .showEditorSelection .code-line .code-line:hover:before { border-left: none; } @@ -91,6 +94,14 @@ modelview-dom-component .showEditorSelection .code-line .code-line:hover:before border-left: 3px solid rgba(255, 160, 0, 1); } +.hc-light modelview-dom-component .showEditorSelection .code-active-line:before { + border-left: 3px solid #6fc3df; +} + +.hc-light modelview-dom-component .showEditorSelection .code-line:hover:before { + border-left: 3px solid #6fc3df; +} + modelview-dom-component .showEditorSelection .code-line .code-line:hover:before { border-left: none; } @@ -205,6 +216,14 @@ modelview-dom-component pre { background-color: rgba(220, 220, 220, 0.4); } +.monaco-workbench.hc-light modelview-dom-component pre { + background-color: rgba(255, 255, 255); +} + +.monaco-workbench.hc-light modelview-dom-component h1 { + border-color: rgba(255, 255, 255); +} + .monaco-workbench.vs-dark modelview-dom-component pre { background-color: rgba(10, 10, 10, 0.4); } diff --git a/src/sql/workbench/browser/modelComponents/media/text.css b/src/sql/workbench/browser/modelComponents/media/text.css index b6407ac2a0..1fbb909cbb 100644 --- a/src/sql/workbench/browser/modelComponents/media/text.css +++ b/src/sql/workbench/browser/modelComponents/media/text.css @@ -17,7 +17,7 @@ modelview-text div#textContainer { margin-left: 5px; } -.vs .modelview-text-tooltip { +.vs .modelview-text-tooltip, .hc-light .modelview-text-tooltip { background-image: url('info.svg') } @@ -36,7 +36,7 @@ modelview-text div#textContainer { margin-left: 14px; } -.vs .modelview-text-tooltip .modelview-text-tooltip-content { +.vs .modelview-text-tooltip .modelview-text-tooltip-content, .hc-light .modelview-text-tooltip .modelview-text-tooltip-content { background-color: #f5f5f5; } diff --git a/src/sql/workbench/contrib/accounts/browser/accountManagement.contribution.ts b/src/sql/workbench/contrib/accounts/browser/accountManagement.contribution.ts index 3e6d9dccd0..4e6bcabc53 100644 --- a/src/sql/workbench/contrib/accounts/browser/accountManagement.contribution.ts +++ b/src/sql/workbench/contrib/accounts/browser/accountManagement.contribution.ts @@ -68,7 +68,7 @@ ExtensionsRegistry.registerExtensionPoint({ } else { const light = resources.joinPath(extension.description.extensionLocation, icon.light); const dark = resources.joinPath(extension.description.extensionLocation, icon.dark); - createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`); + createCSSRule(`.codicon.${iconClass}, .hc-light .codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`); createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`); } } diff --git a/src/sql/workbench/contrib/assessment/browser/media/asmt.css b/src/sql/workbench/contrib/assessment/browser/media/asmt.css index 8995831ff8..869b5bfd7e 100644 --- a/src/sql/workbench/contrib/assessment/browser/media/asmt.css +++ b/src/sql/workbench/contrib/assessment/browser/media/asmt.css @@ -98,7 +98,8 @@ asmtview-component .asmtview-grid .slick-cell.error-row { margin-left: 5px; } -.vs asmtview-component .action-label.codicon.exportAsScriptIcon { +.vs asmtview-component .action-label.codicon.exportAsScriptIcon, +.hc-light asmtview-component .action-label.codicon.exportAsScriptIcon { background-image: url("newquery.svg"); } @@ -107,7 +108,8 @@ asmtview-component .asmtview-grid .slick-cell.error-row { background-image: url("newquery_inverse.svg"); } -.vs asmtview-component .action-label.codicon.asmt-learnmore { +.vs asmtview-component .action-label.codicon.asmt-learnmore, +.hc-light asmtview-component .action-label.codicon.asmt-learnmore { background-image: url("configuredashboard.svg"); } diff --git a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.css b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.css index a33a51d584..dd6de2f61d 100644 --- a/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.css +++ b/src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.css @@ -53,7 +53,8 @@ dashboard-page .editor-toolbar { background-size: 8px; } -.dashboardEditor breadcrumb { +.dashboardEditor breadcrumb, +.hc-light .dashboardEditor breadcrumb { font-size: 13px; color: #323130; } diff --git a/src/sql/workbench/contrib/dashboard/browser/dashboardIconUtil.ts b/src/sql/workbench/contrib/dashboard/browser/dashboardIconUtil.ts index 9b05fede90..8d1ac7e2b4 100644 --- a/src/sql/workbench/contrib/dashboard/browser/dashboardIconUtil.ts +++ b/src/sql/workbench/contrib/dashboard/browser/dashboardIconUtil.ts @@ -21,7 +21,7 @@ export function createCSSRuleForIcon(icon: IUserFriendlyIcon, extension: IExtens } else { const light = resources.joinPath(extension.description.extensionLocation, icon.light); const dark = resources.joinPath(extension.description.extensionLocation, icon.dark); - createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`); + createCSSRule(`.codicon.${iconClass}, .hc-light .codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`); createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`); } } diff --git a/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css b/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css index c576069e5e..ad0434905a 100644 --- a/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css +++ b/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css @@ -25,6 +25,7 @@ } /* High Contrast Theming */ +.monaco-workbench.hc-light .server-explorer-viewlet .server-group, .monaco-workbench.hc-black .server-explorer-viewlet .server-group { line-height: 20px; } @@ -134,7 +135,9 @@ } .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page, -.monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page { +.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page, +.monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page, +.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page { background: url('default_server.svg') center center no-repeat; } diff --git a/src/sql/workbench/contrib/editData/browser/media/editData.css b/src/sql/workbench/contrib/editData/browser/media/editData.css index e9d8101134..dd40332907 100644 --- a/src/sql/workbench/contrib/editData/browser/media/editData.css +++ b/src/sql/workbench/contrib/editData/browser/media/editData.css @@ -152,6 +152,22 @@ slick-grid.active .editDataGrid .slick-cell.selected { --color-grid-dirty-text: #000; } +.hc-light .slickgridContainer { + --color-content: #101010; + --color-content-disabled: grey; + --color-error: #E81123; + --color-success: #7CD300; + --color-bg-header: hsla(0,0%,50%,.2); /* used for pane toolbars */ + --color-resize-handle: #000000; + --color-bg-content-header: #ffffff; /* used for color of grid headers */ + --color-cell-border-active: #6fc3df; + --color-cell-bg-grid-selected: rgb(173, 214, 255); + --color-grid-link: #0078D7; + --color-grid-link-hover: #0b93ff; + --color-grid-dirty-background: #FFF; + --color-grid-dirty-text: #000; +} + .vs-dark .slickgridContainer { --color-content: #E5E5E5; --color-content-disabled: grey; @@ -183,3 +199,6 @@ slick-grid.active .editDataGrid .slick-cell.selected { --color-grid-dirty-background: #CCC; --color-grid-dirty-text: #101010; } + + + diff --git a/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css b/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css index d53460fb9c..a11d556e2e 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css +++ b/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css @@ -316,7 +316,8 @@ However we always want it to be the width of the container it is resizing. z-index: 3; } -.eps-container .ep-save-plan-icon { +.eps-container .ep-save-plan-icon, +.hc-light .eps-container .ep-save-plan-icon { background-image: url(../images/actionIcons/save.svg); background-size: 16px 16px; background-position: center; @@ -331,7 +332,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-open-properties-icon { +.eps-container .ep-open-properties-icon, +.hc-light .eps-container .ep-open-properties-icon { background-image: url(../images/actionIcons/openProperties.svg); background-size: 16px 16px; background-position: center; @@ -346,7 +348,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-open-query-icon { +.eps-container .ep-open-query-icon, +.hc-light .eps-container .ep-open-query-icon { background-image: url(../images/actionIcons/openQuery.svg); background-size: 16px 16px; background-position: center; @@ -361,7 +364,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-open-plan-file-icon { +.eps-container .ep-open-plan-file-icon, +.hc-light .eps-container .ep-open-plan-file-icon { background-image: url(../images/actionIcons/openPlanFile.svg); background-size: 16px 16px; background-position: center; @@ -378,7 +382,9 @@ However we always want it to be the width of the container it is resizing. .eps-container .ep-search-icon, -.top-operations-tab .ep-search-icon { +.top-operations-tab .ep-search-icon, +.hc-light .eps-container .ep-search-icon, +.hc-light .top-operations-tab .ep-search-icon { background-image: url(../images/actionIcons/search.svg); background-size: 16px 16px; background-position: center; @@ -396,7 +402,9 @@ However we always want it to be the width of the container it is resizing. } .eps-container .ep-filter-icon, -.top-operations-tab .ep-filter-icon { +.top-operations-tab .ep-filter-icon, +.hc-light .eps-container .ep-filter-icon, +.hc-light .top-operations-tab .ep-filter-icon { background-image: url(../images/actionIcons/filter.svg); background-size: 16px 16px; background-position: center; @@ -413,7 +421,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-sort-alphabetically-icon { +.eps-container .ep-sort-alphabetically-icon, +.hc-light .eps-container .ep-sort-alphabetically-icon { background-image: url(../images/actionIcons/sortAlphabetically.svg); background-size: 16px 16px; background-position: center; @@ -428,7 +437,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-sort-reverse-alphabetically-icon { +.eps-container .ep-sort-reverse-alphabetically-icon, +.hc-light .eps-container .ep-sort-reverse-alphabetically-icon { background-image: url(../images/actionIcons/sortReverseAlphabetically.svg); background-size: 16px 16px; background-position: center; @@ -443,7 +453,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-sort-display-order-icon { +.eps-container .ep-sort-display-order-icon, +.hc-light .eps-container .ep-sort-display-order-icon { background-image: url(../images/actionIcons/sortByDisplayOrder.svg); background-size: 16px 16px; background-position: center; @@ -458,7 +469,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-zoom-in-icon { +.eps-container .ep-zoom-in-icon, +.hc-light .eps-container .ep-zoom-in-icon { background-image: url(../images/actionIcons/zoomIn.svg); background-size: 16px 16px; background-position: center; @@ -473,7 +485,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-zoom-out-icon { +.eps-container .ep-zoom-out-icon, +.hc-light .eps-container .ep-zoom-out-icon { background-image: url(../images/actionIcons/zoomOut.svg); background-size: 16px 16px; background-position: center; @@ -488,7 +501,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-custom-zoom-icon { +.eps-container .ep-custom-zoom-icon, +.hc-light .eps-container .ep-custom-zoom-icon { background-image: url(../images/actionIcons/customZoom.svg); background-size: 16px 16px; background-position: center; @@ -503,7 +517,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-zoom-to-fit-icon { +.eps-container .ep-zoom-to-fit-icon, +.hc-light .eps-container .ep-zoom-to-fit-icon { background-image: url(../images/actionIcons/zoomToFit.svg); background-size: 16px 16px; background-position: center; @@ -518,21 +533,24 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-zoom-icon { +.eps-container .ep-zoom-icon, +.hc-light .eps-container .ep-zoom-icon { background-image: url(../images/actionIcons/zoom.svg); background-size: 16px 16px; background-position: center; background-repeat: no-repeat; } -.eps-container .ep-zoom-icon { +.eps-container .ep-zoom-icon, +.hc-light .eps-container .ep-zoom-icon { background-image: url(../images/actionIcons/zoomDark.svg); background-size: 16px 16px; background-position: center; background-repeat: no-repeat; } -.eps-container .ep-highlight-expensive-operation-icon { +.eps-container .ep-highlight-expensive-operation-icon, +.hc-light .eps-container .ep-highlight-expensive-operation-icon { background-image: url(../images/actionIcons/highlightExpensiveOperation.svg); background-size: 16px 16px; background-position: center; @@ -547,7 +565,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-enable-tooltip-icon { +.eps-container .ep-enable-tooltip-icon, +.hc-light .eps-container .ep-enable-tooltip-icon { background-image: url(../images/actionIcons/enableTooltip.svg); background-size: 16px 16px; background-position: center; @@ -562,7 +581,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-disable-tooltip-icon { +.eps-container .ep-disable-tooltip-icon, +.hc-light .eps-container .ep-disable-tooltip-icon { background-image: url(../images/actionIcons/disableTooltip.svg); background-size: 16px 16px; background-position: center; @@ -577,7 +597,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-add-icon { +.eps-container .ep-add-icon, +.hc-light .eps-container .ep-add-icon { background-image: url(../images/actionIcons/add.svg); background-size: 16px 16px; background-position: center; @@ -592,14 +613,16 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-settings-icon { +.eps-container .ep-settings-icon, +.hc-light .eps-container .ep-settings-icon { background-image: url(../images/actionIcons/settings.svg); background-size: 16px 16px; background-position: center; background-repeat: no-repeat; } -.ep-split-screen-horizontally-icon { +.ep-split-screen-horizontally-icon, +.hc-light .ep-split-screen-horizontally-icon { background-image: url(../images/actionIcons/splitScreenHorizontally.svg); background-size: 16px 16px; background-position: center; @@ -614,7 +637,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-split-screen-vertically-icon { +.eps-container .ep-split-screen-vertically-icon, +.hc-light .eps-container .ep-split-screen-vertically-icon { background-image: url(../images/actionIcons/splitScreenVertically.svg); background-size: 16px 16px; background-position: center; @@ -629,7 +653,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-reset-zoom-icon { +.eps-container .ep-reset-zoom-icon, +.hc-light .eps-container .ep-reset-zoom-icon { background-image: url(../images/actionIcons/resetZoom.svg); background-size: 16px 16px; background-position: center; @@ -645,7 +670,8 @@ However we always want it to be the width of the container it is resizing. } -.eps-container .ep-plan-compare-icon { +.eps-container .ep-plan-compare-icon, +.hc-light .eps-container .ep-plan-compare-icon { background-image: url(../images/actionIcons/execution-plan-compare.svg); background-size: 16px 16px; background-position: center; @@ -660,7 +686,8 @@ However we always want it to be the width of the container it is resizing. background-repeat: no-repeat; } -.eps-container .ep-properties-different { +.eps-container .ep-properties-different, +.hc-light .eps-container .ep-properties-different { background-image: url(../images/actionIcons/different.svg); background-size: 16px 16px; background-position: center; @@ -689,7 +716,8 @@ However we always want it to be the width of the container it is resizing. margin-left: -28px; } -.eps-container .ep-properties-down-arrow { +.eps-container .ep-properties-down-arrow, +.hc-light .eps-container .ep-properties-down-arrow { background-image: url(../images/actionIcons/downArrow.svg); background-size: 16px 16px; background-position: center; @@ -708,7 +736,8 @@ However we always want it to be the width of the container it is resizing. height: 16px; } -.eps-container .ep-properties-up-arrow { +.eps-container .ep-properties-up-arrow, +.hc-light .eps-container .ep-properties-up-arrow { background-image: url(../images/actionIcons/upArrow.svg); background-size: 16px 16px; background-position: center; @@ -727,7 +756,8 @@ However we always want it to be the width of the container it is resizing. height: 16px; } -.eps-container .ep-top-operations { +.eps-container .ep-top-operations, +.hc-light .eps-container .ep-top-operations { background-image: url(../images/actionIcons/topOperations.svg); background-size: 16px 16px; background-position: center; @@ -851,7 +881,6 @@ However we always want it to be the width of the container it is resizing. height: fit-content; } - .eps-container .comparison-editor .plan-comparison-container .split-view-container .plan-container .plan-diagram { flex: 1; overflow: scroll; diff --git a/src/sql/workbench/contrib/jobManagement/browser/media/jobHistory.css b/src/sql/workbench/contrib/jobManagement/browser/media/jobHistory.css index 739cd2c395..0b8b05cb13 100644 --- a/src/sql/workbench/contrib/jobManagement/browser/media/jobHistory.css +++ b/src/sql/workbench/contrib/jobManagement/browser/media/jobHistory.css @@ -46,6 +46,10 @@ notebookhistory-component .all-jobs { color: #ffffff; } +.hc-light .overview-container .overview-tab { + color: #000000; +} + .overview-container > .overview-tab { position: relative; margin-bottom: 1px; @@ -75,6 +79,11 @@ input#accordion{ border: 1px solid #2b56f2; } +.hc-light .overview-container .overview-tab label { + background: #ffffff; + border: 1px solid #6fc3df; +} + .overview-container .overview-tab label { position: relative; display: block; @@ -96,6 +105,12 @@ input#accordion{ border: 1px solid #2b56f2; } +.hc-light .overview-tab .accordion-content, +.grid-arrow { + background: #ffffff; + border: 1px solid #6fc3df; +} + .overview-tab .accordion-content { max-height: 0; overflow: hidden; @@ -136,7 +151,8 @@ input#accordion:checked ~ .accordion-content, transition: all 0.3s; } -.all-jobs > .back-button-icon { +.all-jobs > .back-button-icon, +.hc-light .all-jobs > .back-button-icon { content: url("back.svg"); width: 20px; margin-right: 10px; @@ -151,7 +167,8 @@ input#accordion:checked ~ .accordion-content, content: url("back_inverse.svg"); } -.vs .action-label.codicon.newStepIcon { +.vs .action-label.codicon.newStepIcon, +.hc-light .action-label.codicon.newStepIcon { background-image: url("new.svg"); } @@ -168,7 +185,9 @@ notebookhistory-component .vs-dark .codicon.edit { } jobhistory-component .vs .codicon.edit, -notebookhistory-component .vs .codicon.edit { +jobhistory-component .hc-light .codicon.edit, +notebookhistory-component .vs .codicon.edit, +notebookhistory-component .hc-light .codicon.edit { background-image: url("edit.svg"); } @@ -231,6 +250,10 @@ table.step-list tr.step-row td { border-left: 3px solid #2b56f2; } +.hc-light .history-details > .job-steps { + border-left: 3px solid #6fc3df; +} + .history-details > .job-steps > table.step-list { padding-bottom: 10px; display: flex; @@ -331,6 +354,11 @@ notebookhistory-component > .agent-actionbar-container { border-top: 3px solid #2b56f2; } +.hc-light jobhistory-component > .agent-actionbar-container, +.hc-light notebookhistory-component > .agent-actionbar-container { + border-top: 3px solid #6fc3df; +} + jobhistory-component .step-table.prev-run-list .monaco-tree-wrapper @@ -374,7 +402,8 @@ notebookhistory-component height: 50px; } -.notebook-grid-item:hover { +.notebook-grid-item:hover, +.hc-light .notebook-grid-item:hover { background: #dcdcdc !important; } @@ -396,6 +425,11 @@ notebookhistory-component background-repeat: no-repeat; } +.hc-light .notebook-grid-item > .img-success { + background-image: url(./NotebookSuccess_16x.svg); + background-position: center; +} + .vs-dark .notebook-grid-item > .img-success, .hc-black .notebook-grid-item > .img-success { background-image: url(./NotebookSuccess_16x_white.svg); @@ -415,6 +449,11 @@ notebookhistory-component background-repeat: no-repeat; } +.hc-light .notebook-grid-item > .img-failure { + background-image: url(./NotebookFail_16x.svg); + background-position: center; +} + .vs-dark .notebook-grid-item > .img-failure, .hc-black .notebook-grid-item > .img-failure { background-image: url(./NotebookFail_16x_white.svg); @@ -435,6 +474,11 @@ notebookhistory-component cursor: pointer; } +.hc-light .notebook-grid-item > .img-error { + background-image: url(./NotebookError_16x.svg); + background-position: center; +} + .vs-dark .notebook-grid-item > .img-error, .hc-black .notebook-grid-item > .img-error { background-image: url(./NotebookError_16x_white.svg); @@ -475,3 +519,8 @@ notebookhistory-component background: #000000; border: 1px solid #2b56f2; } + +.hc-light .grid-title { + background: #ffffff; + border: 1px solid #6fc3df; +} diff --git a/src/sql/workbench/contrib/jobManagement/browser/media/jobStepsView.css b/src/sql/workbench/contrib/jobManagement/browser/media/jobStepsView.css index 085d46cf5a..229a4b5302 100644 --- a/src/sql/workbench/contrib/jobManagement/browser/media/jobStepsView.css +++ b/src/sql/workbench/contrib/jobManagement/browser/media/jobStepsView.css @@ -70,7 +70,8 @@ content: url("step_inverse.svg"); } -.steps-header > .steps-icon { +.steps-header > .steps-icon, +.hc-light .steps-header > .steps-icon { content: url("step.svg"); } @@ -100,6 +101,13 @@ jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row { background: none !important; } +.hc-light jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row, +.hc-light jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.focused, +.hc-light jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.selected, +.hc-light jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.focused.selected { + background: #ffffff !important; +} + jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row, jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.focused, jobstepsview-component .steps-tree .monaco-tree-wrapper .monaco-tree-row.step-column-row.selected, diff --git a/src/sql/workbench/contrib/jobManagement/browser/media/jobs.css b/src/sql/workbench/contrib/jobManagement/browser/media/jobs.css index 9fa23fe50d..60c985e0c9 100644 --- a/src/sql/workbench/contrib/jobManagement/browser/media/jobs.css +++ b/src/sql/workbench/contrib/jobManagement/browser/media/jobs.css @@ -30,6 +30,10 @@ notebooksview-component { border-bottom: 3px solid #2b56f2; } +.hc-light .job-heading-container { + border-bottom: 3px solid #6fc3df; +} + .jobview-grid { height: calc(100% - 75px); width: 100%; @@ -69,6 +73,23 @@ notebooksview-component { border: 1px solid #2b56f2; } +.hc-light + #jobsDiv + jobsview-component + .jobview-grid + .grid-canvas + .ui-widget-content.slick-row + .slick-cell, +.hc-light + #notebooksDiv + notebooksview-component + .jobnotebooksview-grid + .grid-canvas + .ui-widget-content.slick-row + .slick-cell { + border: 1px solid #6fc3df; +} + #jobsDiv jobsview-component .jobview-grid @@ -268,7 +289,8 @@ notebooksview-component { margin-left: 20px; } -.jobsview-icon { +.jobsview-icon, +.hc-light .jobsview-icon { background-image: url("./job.svg"); } @@ -277,7 +299,8 @@ notebooksview-component { background-image: url("./job_inverse.svg"); } -.notebooksview-icon { +.notebooksview-icon, +.hc-light .notebooksview-icon { background-image: url("./notebook.svg"); } @@ -286,7 +309,8 @@ notebooksview-component { background-image: url("./notebook_inverse.svg"); } -.alertsview-icon { +.alertsview-icon, +.hc-light .alertsview-icon { background-image: url("./alert.svg"); } @@ -295,7 +319,8 @@ notebooksview-component { background-image: url("./alert_inverse.svg"); } -.proxiesview-icon { +.proxiesview-icon, +.hc-light .proxiesview-icon { background-image: url("./proxy.svg"); } @@ -304,7 +329,8 @@ notebooksview-component { background-image: url("./proxy_inverse.svg"); } -.operatorsview-icon { +.operatorsview-icon, +.hc-light .operatorsview-icon { background-image: url("./operator.svg"); } @@ -342,6 +368,14 @@ agentview-component border-left: 1px dotted #2b56f2; } +.hc-light + .jobview-grid + > .monaco-table + .slick-header-columns + .slick-resizable-handle { + border-left: 1px dotted #6fc3df; +} + .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle { border-left: 1px dotted #444444; } @@ -519,6 +553,57 @@ agentview-component background: none !important; } +.hc-light + #jobsDiv + .jobview-grid + > .monaco-table + .slick-viewport + > .grid-canvas + > .ui-widget-content.slick-row:hover + > .slick-cell, +.hc-light + #jobsDiv + .jobview-grid + > .monaco-table + .slick-viewport + > .grid-canvas + > .ui-widget-content.slick-row + > .slick-cell.hovered, +.hc-light + #jobsDiv + .jobview-grid + > .monaco-table + .slick-viewport + > .grid-canvas + > .ui-widget-content.slick-row.hovered + > .slick-cell, +.hc-light + #notebooksDiv + .jobnotebooksview-grid + > .monaco-table + .slick-viewport + > .grid-canvas + > .ui-widget-content.slick-row:hover + > .slick-cell, +.hc-light + #notebooksDiv + .jobnotebooksview-grid + > .monaco-table + .slick-viewport + > .grid-canvas + > .ui-widget-content.slick-row + > .slick-cell.hovered, +.hc-light + #notebooksDiv + .jobnotebooksview-grid + > .monaco-table + .slick-viewport + > .grid-canvas + > .ui-widget-content.slick-row.hovered + > .slick-cell { + background: #fff !important; +} + table.jobprevruns div.bar, table.jobprevruns div.bar0, table.jobprevruns div.bar1, @@ -574,7 +659,8 @@ table.jobprevruns > tbody { display: block; } -.vs .action-label.codicon.refreshIcon { +.vs .action-label.codicon.refreshIcon, +.hc-light .action-label.codicon.refreshIcon { background-image: url("refresh.svg"); } @@ -583,7 +669,8 @@ table.jobprevruns > tbody { background-image: url("refresh_inverse.svg"); } -.vs .action-label.codicon.openNotebook { +.vs .action-label.codicon.openNotebook, +.hc-light .action-label.codicon.openNotebook { background-image: url("open_notebook.svg"); } diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css b/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css index dea639dbd5..677d70370a 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css @@ -49,6 +49,7 @@ cell-toolbar-component .carbon-taskbar.monaco-toolbar .monaco-action-bar ul.acti cell-toolbar-component .codicon.masked-icon, .vs cell-toolbar-component .codicon.masked-icon, .vs-dark cell-toolbar-component .codicon.masked-icon, -.hc-black cell-toolbar-component .codicon.masked-icon { +.hc-black cell-toolbar-component .codicon.masked-icon, +.hc-light cell-toolbar-component .codicon.masked-icon { background-image: none; } diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/code.css b/src/sql/workbench/contrib/notebook/browser/cellViews/code.css index 4c3d27f68e..1a169ff25f 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/code.css +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/code.css @@ -44,7 +44,8 @@ code-component .toolbar .carbon-taskbar.monaco-toolbar .monaco-action-bar .codic background-position: center; } -.notebook-cell:not(.active):hover code-component .toolbarIconRun { +.notebook-cell:not(.active):hover code-component .toolbarIconRun, +.hc-light .notebook-cell:not(.active):hover code-component .toolbarIconRun { background-image: url('./media/execute_cell_grey.svg'); } .vs-dark .notebook-cell:not(.active):hover code-component .toolbarIconRun { diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/media/markdown.css b/src/sql/workbench/contrib/notebook/browser/cellViews/media/markdown.css index c3f6219d56..de65e6ff9e 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/markdown.css +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/markdown.css @@ -89,6 +89,18 @@ border-left: none; } +.hc-light .notebook-preview .showEditorSelection .code-active-line:before { + border-left: 3px solid rgba(111, 195, 223, 0.4); +} + +.hc-light .notebook-preview .showEditorSelection .code-line:hover:before { + border-left: 3px solid rgba(111, 195, 223, 0.60); +} + +.hc-light .notebook-preview .showEditorSelection .code-line .code-line:hover:before { + border-left: none; +} + .notebook-preview img { max-width: 100%; max-height: 100%; @@ -209,6 +221,14 @@ border-color: rgb(0, 0, 0); } +.hc-light .notebook-preview pre { + background-color: rgb(255, 255, 255); +} + +.hc-light .notebook-preview h1 { + border-color: rgb(255, 255, 255); +} + .notebook-preview table > thead > tr > th { border-color: rgba(0, 0, 0, 0.69); } diff --git a/src/sql/workbench/contrib/notebook/browser/notebook.css b/src/sql/workbench/contrib/notebook/browser/notebook.css index 2d43362d0b..c177dc4ad4 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebook.css +++ b/src/sql/workbench/contrib/notebook/browser/notebook.css @@ -107,7 +107,8 @@ } /* non-preview */ -.notebookEditor :not(.in-preview) .codicon.icon-add { +.notebookEditor :not(.in-preview) .codicon.icon-add, +.hc-light .notebookEditor :not(.in-preview) .codicon.icon-add { background-image: url("./media/light/add.svg"); } @@ -116,7 +117,8 @@ background-image: url("./media/dark/add_inverse.svg"); } -.notebookEditor :not(.in-preview) .codicon.icon-run-cells { +.notebookEditor :not(.in-preview) .codicon.icon-run-cells, +.hc-light .notebookEditor :not(.in-preview) .codicon.icon-run-cells { background-image: url("./media/light/run_cells.svg"); } @@ -125,7 +127,8 @@ background-image: url("./media/dark/run_cells_inverse.svg"); } -.notebookEditor :not(.in-preview) .codicon.icon-trusted { +.notebookEditor :not(.in-preview) .codicon.icon-trusted, +.hc-light .notebookEditor :not(.in-preview) .codicon.icon-trusted { background-image: url("./media/light/trusted.svg"); } @@ -133,7 +136,9 @@ .hc-black .notebookEditor :not(.in-preview) .codicon.icon-trusted { background-image: url("./media/dark/trusted_inverse.svg"); } -.notebookEditor :not(.in-preview) .codicon.icon-notTrusted { + +.notebookEditor :not(.in-preview) .codicon.icon-notTrusted, +.hc-light .notebookEditor :not(.in-preview) .codicon.icon-notTrusted { background-image: url("./media/light/nottrusted.svg"); } @@ -142,7 +147,8 @@ background-image: url("./media/dark/nottrusted_inverse.svg"); } -.notebookEditor :not(.in-preview) .codicon.icon-show-cells { +.notebookEditor :not(.in-preview) .codicon.icon-show-cells, +.hc-light .notebookEditor :not(.in-preview) .codicon.icon-show-cells { background-image: url("./media/light/show_code.svg"); } @@ -151,7 +157,8 @@ background-image: url("./media/dark/show_code_inverse.svg"); } -.notebookEditor :not(.in-preview) .codicon.icon-hide-cells { +.notebookEditor :not(.in-preview) .codicon.icon-hide-cells, +.hc-light .notebookEditor :not(.in-preview) .codicon.icon-hide-cells { background-image: url("./media/light/hide_code.svg"); } @@ -160,7 +167,8 @@ background-image: url("./media/dark/hide_code_inverse.svg"); } -.notebookEditor :not(.in-preview) .codicon.icon-clear-results { +.notebookEditor :not(.in-preview) .codicon.icon-clear-results, +.hc-light .notebookEditor :not(.in-preview) .codicon.icon-clear-results { background-image: url("./media/light/clear_results.svg"); } @@ -170,6 +178,7 @@ } .notebookEditor .in-preview .codicon.masked-icon, +.hc-light .nodebookEditor .in-preview .codicon.masked-icon, .vs-dark .notebookEditor .in-preview .codicon.icon-clear-results, .hc-black .notebookEditor .in-preview .codicon.icon-clear-results { background-image: none; @@ -215,7 +224,8 @@ min-height: 39px; } -.monaco-workbench .notebook-action.new-notebook { +.monaco-workbench .notebook-action.new-notebook, +.monaco-workbench.hc-light .notebook-action.new-notebook { background: url("./media/light/new_notebook.svg") center center no-repeat; } diff --git a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts index 66e0ca536c..450f9b9054 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts +++ b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts @@ -72,11 +72,13 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf const hcOutline = theme.getColor(contrastBorder); if (outline) { collector.addRule(` - .hc-black .notebookEditor .notebook-cell:not(.active) code-component { + .hc-black .notebookEditor .notebook-cell:not(.active) code-component, + .hc-light .notebookEditor .notebook-cell:not(.active) code-component { border-color: ${hcOutline}; border-width: 0px 0px 1px 0px; } - .hc-black .notebookEditor .notebook-cell:not(.active) { + .hc-black .notebookEditor .notebook-cell:not(.active), + .hc-light .notebookEditor .notebook-cell:not(.active) { outline-color: ${hcOutline}; outline-width: 1px; outline-style: solid; diff --git a/src/sql/workbench/contrib/notebook/browser/notebookViews/cellToolbar.css b/src/sql/workbench/contrib/notebook/browser/notebookViews/cellToolbar.css index 1388f5b1bd..63aa8ae869 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebookViews/cellToolbar.css +++ b/src/sql/workbench/contrib/notebook/browser/notebookViews/cellToolbar.css @@ -48,7 +48,8 @@ .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon, .vs .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon, .vs-dark .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon, -.hc-black .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon { +.hc-black .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon, +.hc-light .nb-grid-stack .grid-stack-item .notebook-cell .actionbar .codicon.masked-icon { background-image: none; } diff --git a/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts b/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts index 4b73c2c03e..0aed970cbb 100644 --- a/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts @@ -6,7 +6,7 @@ import { OnInit, Component, Input, Inject, ViewChild, ElementRef, ChangeDetectorRef, forwardRef } from '@angular/core'; import * as azdata from 'azdata'; -import { IGridDataProvider, getResultsString, getTableHeaderString } from 'sql/workbench/services/query/common/gridDataProvider'; +import { IGridDataProvider, getResultsString } from 'sql/workbench/services/query/common/gridDataProvider'; import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IEditorService } from 'vs/workbench/services/editor/common/editorService'; @@ -410,16 +410,7 @@ export class DataResourceDataProvider implements IGridDataProvider { let results = await getResultsString(this, selection, includeHeaders, tableView); this._clipboardService.writeText(results); } catch (error) { - this._notificationService.error(localize('copyFailed', "Copy failed with error: {0}", getErrorMessage(error))); - } - } - - async copyHeaders(selection: Slick.Range[]): Promise { - try { - const results = getTableHeaderString(this, selection); - await this._clipboardService.writeText(results); - } catch (error) { - this._notificationService.error(localize('copyFailed', "Copy failed with error: {0}", getErrorMessage(error))); + this._notificationService.error(localize('copyFailed', "Copy failed with error {0}", getErrorMessage(error))); } } diff --git a/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css b/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css index fc2cee9659..170a0e9126 100644 --- a/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css +++ b/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css @@ -4,7 +4,8 @@ *--------------------------------------------------------------------------------------------*/ /* Icons for various registered servers actions */ -.monaco-workbench .actions-container .action-label.add-server-action { +.monaco-workbench .actions-container .action-label.add-server-action, +.monaco-workbench.hc-light .actions-container .action-label.add-server-action { background-image: url('add_server.svg') !important; } @@ -13,7 +14,8 @@ background-image: url('add_server_inverse.svg') !important; } -.monaco-workbench .dataExplorer-viewlet .actions-container .action-label.add-server-group-action { +.monaco-workbench .dataExplorer-viewlet .actions-container .action-label.add-server-group-action, +.monaco-workbench.hc-light .dataExplorer-viewlet .actions-container .action-label.add-server-group-action { background-image: url('new_servergroup.svg') !important; } @@ -22,7 +24,8 @@ background-image: url('new_servergroup_inverse.svg') !important; } -.monaco-workbench .actions-container .action-label.active-connections-action { +.monaco-workbench .actions-container .action-label.active-connections-action, +.monaco-workbench.hc-light .actions-container .action-label.active-connections-action { background-image: url('connected_active_server.svg') !important; } @@ -31,7 +34,8 @@ background-image: url('connected_active_server_inverse.svg') !important; } -.monaco-workbench .actions-container .action-label.server-page { +.monaco-workbench .actions-container .action-label.server-page, +.monaco-workbench.hc-light .actions-container .action-label.server-page { background-image: url('server_page.svg') !important; } diff --git a/src/sql/workbench/contrib/query/browser/actions.ts b/src/sql/workbench/contrib/query/browser/actions.ts index 65c5dbc0a4..1323620865 100644 --- a/src/sql/workbench/contrib/query/browser/actions.ts +++ b/src/sql/workbench/contrib/query/browser/actions.ts @@ -23,6 +23,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur import { IStorageService } from 'vs/platform/storage/common/storage'; import { getChartMaxRowCount, notifyMaxRowCountExceeded } from 'sql/workbench/contrib/charts/browser/utils'; import { IEncodingSupport } from 'vs/workbench/services/textfile/common/textfiles'; +import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; export interface IGridActionContext { gridDataProvider: IGridDataProvider; @@ -126,13 +127,19 @@ export class CopyHeadersAction extends Action { private static ID = 'grid.copyHeaders'; private static LABEL = localize('copyHeaders', 'Copy Headers'); - constructor() { + constructor( + @IClipboardService private clipboardService: IClipboardService + ) { super(CopyHeadersAction.ID, CopyHeadersAction.LABEL); } public override async run(context: IGridActionContext): Promise { - const selection = mapForNumberColumn(context.selection); - await context.gridDataProvider.copyHeaders(selection); + // Starting at index 1 to ignore the first column of row numbers + const columnHeaders = context.table.columns.slice(1, context.table.columns.length) + .map(c => c.name ? c.name : '') + .join(','); + + await this.clipboardService.writeText(columnHeaders); } } diff --git a/src/sql/workbench/contrib/query/browser/modelViewTab/media/dialogModal.css b/src/sql/workbench/contrib/query/browser/modelViewTab/media/dialogModal.css index a03311f828..c0f404a16e 100644 --- a/src/sql/workbench/contrib/query/browser/modelViewTab/media/dialogModal.css +++ b/src/sql/workbench/contrib/query/browser/modelViewTab/media/dialogModal.css @@ -45,7 +45,8 @@ background-position: center; } -.vs .footer-button .validating { +.vs .footer-button .validating, +.hc-light .footer-button .validating { background-image: url("loading.svg"); } diff --git a/src/sql/workbench/contrib/query/browser/modelViewTab/media/wizardNavigation.css b/src/sql/workbench/contrib/query/browser/modelViewTab/media/wizardNavigation.css index b1d782d622..0cefbd1f07 100644 --- a/src/sql/workbench/contrib/query/browser/modelViewTab/media/wizardNavigation.css +++ b/src/sql/workbench/contrib/query/browser/modelViewTab/media/wizardNavigation.css @@ -17,6 +17,13 @@ background-color: unset; } +.hc-light .wizardNavigation-container { + border-right-color: #6fc3df; + border-right-style: solid; + border-right-width: 1px; + background-color: unset; +} + .wizardNavigation-pageNumber { flex-grow: 1; display: flex; @@ -51,6 +58,14 @@ border-color: white; } +.hc-light .wizardNavigation-dot { + flex-grow: 1; + background-color: unset; + border-style: solid; + border-width: 1px; + border-color: black; +} + .wizardNavigation-connector { width: 3px; display: inline-block; @@ -62,6 +77,10 @@ display: none; } +.hc-light .wizardNavigation-connector { + display: none; +} + .wizardNavigation-connector.active, .wizardNavigation-dot.active { background-color: rgb(9, 109, 201); @@ -73,16 +92,33 @@ border-style: solid; } +.hc-light .wizardNavigation-dot.active { + border-color: #6fc3df; + background-color: unset; + border-style: solid; +} + .hc-black .wizardNavigation-dot.active:hover, .hc-black .wizardNavigation-dot.active.currentPage:hover { border-color: #F38518; border-style: dashed; } +.hc-light .wizardNavigation-dot.active:hover, +.hc-light .wizardNavigation-dot.active.currentPage:hover { + border-color: #0F4A85; + border-style: dashed; +} + .wizardNavigation-dot.active.currentPage { border-style: double; } +.hc-light .wizardNavigation-dot.active.currentPage { + border-style: solid; + border-color: #0F4A85; +} + .hc-black .wizardNavigation-dot.active.currentPage { border-style: solid; border-color: #F38518; @@ -90,4 +126,4 @@ .wizardNavigation-connector.invisible { visibility: hidden; -} \ No newline at end of file +} diff --git a/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css b/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css index 260f92862a..9b054f766f 100644 --- a/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css +++ b/src/sql/workbench/contrib/tasks/browser/media/tasksPanel.css @@ -50,7 +50,8 @@ display: inline-block; } -.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.not-started { +.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.not-started, +.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.not-started { background-image: url('status_queuedtask.svg'); } @@ -59,7 +60,8 @@ background-image: url('status_queuedtask_inverse.svg'); } -.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.in-progress { +.vs .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.in-progress, +.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.in-progress { background-image: url("loading.svg"); } @@ -68,14 +70,17 @@ background-image: url("loading_inverse.svg"); } -.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.success { +.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.success, +.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.success { background-image: url("status_success.svg"); } -.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.canceled { +.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.canceled, +.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.canceled { background-image: url("status_cancelled.svg"); } -.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.error { +.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.error, +.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.error { background-image: url("error.svg"); } diff --git a/src/sql/workbench/contrib/views/browser/treeView.ts b/src/sql/workbench/contrib/views/browser/treeView.ts index 6456539ea4..e068d454c7 100644 --- a/src/sql/workbench/contrib/views/browser/treeView.ts +++ b/src/sql/workbench/contrib/views/browser/treeView.ts @@ -808,7 +808,8 @@ class TreeRenderer extends Disposable implements ITreeRenderer): Promise; - /** - * Sends a copy request to copy table headers to the clipboard - * @param selection The selection range to copy - */ - copyHeaders(selection: Slick.Range[]): Promise; - /** * Gets the EOL terminator to use for this data type. */ @@ -106,8 +100,11 @@ export async function getResultsString(provider: IGridDataProvider, selection: S // Make sure all these tasks have executed await Promise.all(actionedTasks); - headers = sortMapEntriesByColumnOrder(headers); - rows = sortMapEntriesByColumnOrder(rows); + const sortResults = (e1: [number, any], e2: [number, any]) => { + return e1[0] - e2[0]; + }; + headers = new Map([...headers].sort(sortResults)); + rows = new Map([...rows].sort(sortResults)); let copyString = ''; if (includeHeaders) { @@ -135,42 +132,6 @@ export async function getResultsString(provider: IGridDataProvider, selection: S return copyString; } -export function getTableHeaderString(provider: IGridDataProvider, selection: Slick.Range[]): string { - let headers: Map = new Map(); // Maps a column index -> header - - selection.forEach((range) => { - let startCol = range.fromCell; - let columnHeaders = provider.getColumnHeaders(range); - if (columnHeaders !== undefined) { - let idx = 0; - for (let header of columnHeaders) { - headers.set(startCol + idx, header); - idx++; - } - } - }); - - headers = sortMapEntriesByColumnOrder(headers) - - const copyString = Array.from(headers.values()) - .map(colHeader => colHeader ? colHeader : '') - .join('\t'); - - return copyString; -} - -/** - * Ensures that table entries in the map appear in column order instead of the order that they were selected. - * @param map Contains the entries selected in a table - * @returns Sorted map with entries appearing in column order. - */ -function sortMapEntriesByColumnOrder(map: Map): Map { - const leftToRight = (e1: [number, any], e2: [number, any]) => { - return e1[0] - e2[0]; - }; - - return new Map([...map].sort(leftToRight)); -} function removeNewLines(inputString: string): string { // This regex removes all newlines in all OS types diff --git a/src/sql/workbench/services/query/common/queryRunner.ts b/src/sql/workbench/services/query/common/queryRunner.ts index cf5895cf26..608dc72830 100644 --- a/src/sql/workbench/services/query/common/queryRunner.ts +++ b/src/sql/workbench/services/query/common/queryRunner.ts @@ -21,7 +21,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur import { URI } from 'vs/base/common/uri'; import * as perf from 'vs/base/common/performance'; import { mssqlProviderName } from 'sql/platform/connection/common/constants'; -import { IGridDataProvider, getResultsString, getTableHeaderString } from 'sql/workbench/services/query/common/gridDataProvider'; +import { IGridDataProvider, getResultsString } from 'sql/workbench/services/query/common/gridDataProvider'; import { getErrorMessage } from 'vs/base/common/errors'; import { ILogService } from 'vs/platform/log/common/log'; import { IRange, Range } from 'vs/editor/common/core/range'; @@ -564,16 +564,7 @@ export class QueryGridDataProvider implements IGridDataProvider { const results = await getResultsString(this, selection, includeHeaders, tableView); await this._clipboardService.writeText(results); } catch (error) { - this._notificationService.error(nls.localize('copyFailed', "Copy failed with error: {0}", getErrorMessage(error))); - } - } - - async copyHeaders(selection: Slick.Range[]): Promise { - try { - const results = getTableHeaderString(this, selection); - await this._clipboardService.writeText(results); - } catch (error) { - this._notificationService.error(nls.localize('copyFailed', "Copy failed with error: {0}", getErrorMessage(error))); + this._notificationService.error(nls.localize('copyFailed', "Copy failed with error {0}", getErrorMessage(error))); } } diff --git a/src/sql/workbench/services/tasks/browser/tasksRegistry.ts b/src/sql/workbench/services/tasks/browser/tasksRegistry.ts index 725a811f2f..3cae17435c 100644 --- a/src/sql/workbench/services/tasks/browser/tasksRegistry.ts +++ b/src/sql/workbench/services/tasks/browser/tasksRegistry.ts @@ -62,7 +62,7 @@ export const TaskRegistry: ITaskRegistry = new class implements ITaskRegistry { // TODO } else if (item.icon?.dark) { // at the very least we need a dark icon iconClass = ids.nextId(); - createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.light || item.icon.dark)}`); + createCSSRule(`.codicon.${iconClass}, .hc-light .codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.light || item.icon.dark)}`); createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(item.icon.dark)}`); this.taskIdToIconClassNameMap.set(item.id, iconClass); } diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 6fb696632e..47ea8b8b9f 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -269,20 +269,20 @@ export const checkboxBorder = registerColor('checkbox.border', { dark: selectBor // {{SQL CARBON EDIT}} - ADS custom button styles // Existing VSCode button colors, reuse the color ids with modified color values -export const buttonForeground = registerColor('button.foreground', { dark: Color.white, light: Color.white, hcLight: Color.white, hcDark: Color.white }, nls.localize('buttonForeground', "Button foreground color.")); +export const buttonForeground = registerColor('button.foreground', { dark: Color.white, light: Color.white, hcLight: Color.black, hcDark: Color.white }, nls.localize('buttonForeground', "Button foreground color.")); export const buttonBackground = registerColor('button.background', { dark: '#0E639C', light: '#007ACC', hcLight: null, hcDark: null }, nls.localize('buttonBackground', "Button background color.")); export const buttonHoverBackground = registerColor('button.hoverBackground', { dark: lighten(buttonBackground, 0.2), light: darken(buttonBackground, 0.2), hcLight: null, hcDark: null }, nls.localize('buttonHoverBackground', "Button background color when hovering.")); export const buttonBorder = registerColor('button.border', { dark: contrastBorder, light: contrastBorder, hcLight: contrastBorder, hcDark: contrastBorder }, nls.localize('buttonBorder', "Button border color.")); -export const buttonSecondaryForeground = registerColor('button.secondaryForeground', { dark: Color.white, light: Color.white, hcLight: Color.white, hcDark: Color.white }, nls.localize('buttonSecondaryForeground', "Secondary button foreground color.")); +export const buttonSecondaryForeground = registerColor('button.secondaryForeground', { dark: Color.white, light: Color.white, hcLight: Color.black, hcDark: Color.white }, nls.localize('buttonSecondaryForeground', "Secondary button foreground color.")); export const buttonSecondaryBackground = registerColor('button.secondaryBackground', { dark: '#3A3D41', light: '#5F6A79', hcLight: null, hcDark: null }, nls.localize('buttonSecondaryBackground', "Secondary button background color.")); export const buttonSecondaryHoverBackground = registerColor('button.secondaryHoverBackground', { dark: lighten(buttonSecondaryBackground, 0.2), light: darken(buttonSecondaryBackground, 0.2), hcLight: null, hcDark: null }, nls.localize('buttonSecondaryHoverBackground', "Secondary button background color when hovering.")); // new button colors introduced by ADS export const buttonSecondaryBorder = registerColor('button.secondaryBorder', { dark: '#4894FE', light: '#8A8886', hcLight: contrastBorder, hcDark: contrastBorder }, nls.localize('button.secondaryBorder', "Secondary button border color.")); -export const buttonDisabledBorder = registerColor('button.disabledBorder', { dark: new Color(new RGBA(127, 127, 127, 0.1)), light: '#F3F2F1', hcLight: '#00FF00', hcDark: '#00FF00' }, nls.localize('button.secondaryBorder', "Secondary button border color.")); -export const buttonDisabledForeground = registerColor('button.disabledForeground', { dark: new Color(new RGBA(127, 127, 127, 0.7)), light: '#A19F9D', hcLight: '#00FF00', hcDark: '#00FF00' }, nls.localize('button.disabledForeground', "Disabled button foreground color.")); +export const buttonDisabledBorder = registerColor('button.disabledBorder', { dark: new Color(new RGBA(127, 127, 127, 0.1)), light: '#F3F2F1', hcLight: disabledForeground, hcDark: '#00FF00' }, nls.localize('button.secondaryBorder', "Secondary button border color.")); +export const buttonDisabledForeground = registerColor('button.disabledForeground', { dark: new Color(new RGBA(127, 127, 127, 0.7)), light: '#A19F9D', hcLight: disabledForeground, hcDark: '#00FF00' }, nls.localize('button.disabledForeground', "Disabled button foreground color.")); export const buttonDisabledBackground = registerColor('button.disabledBackground', { dark: new Color(new RGBA(127, 127, 127, 0.1)), light: '#F3F2F1', hcLight: Color.black, hcDark: Color.black }, nls.localize('button.disabledBackground', "Disablbed button background color.")); // {{SQL CARBON EDIT}} - end of ADS custom button styles