Adding light contrast theme (#22028)

* Adding light contrast theme

* fixing oe icons

* Fixing more files

* Converting ep files to support hc light

* Revert "Copy Headers for Selected Columns (#21622)"

This reverts commit f74d6f6d9b.

* Adding more css rules

* Fixing modal

* Fixing azure icons

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");
 }
 

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");

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");
 }
 

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

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");

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;
 }

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');
 }
 

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;
 }
 

src/sql/base/parts/tree/browser/loading-hc-light.svg

@@ -0,0 +1,31 @@
+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      0% { opacity: 1; }
+      100% { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:black;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>

src/sql/base/parts/tree/browser/tree-collapsed-hc-light.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 7.99999L5.71461 12.3573L6.33333 12.976L11 8.30935V7.69063L6.33333 3.02396L5.71461 3.64268L10.0719 7.99999Z" fill="black"/>
+</svg>

src/sql/base/parts/tree/browser/tree-expanded-hc-light.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.97602 10.0719L12.3333 5.71461L12.952 6.33333L8.28538 11L7.66666 11L3 6.33333L3.61872 5.71461L7.97602 10.0719Z" fill="black"/>
+</svg>

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');
 }