Variable explorer supports high contrast color themes (microsoft#13009)

Author: IanMatthewHuff

news/2 Fixes/12766.md

@@ -0,0 +1 @@
+Make the data science variable explorer support high contrast color theme.

src/datascience-ui/interactive-common/variableExplorer.tsx

@@ -113,7 +113,7 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
  key: 'buttons',
  name: '',
  type: 'boolean',
- width: 34,
+ width: 36,
  sortable: false,
  resizable: false,
  formatter: (
@@ -275,7 +275,7 @@ export class VariableExplorer extends React.Component<IVariableExplorerProps, IV
  }
 
  private getRowHeight() {
- return this.props.fontSize + 9;
+ return this.props.fontSize + 11;
  }
 
  private setInitialHeight() {

src/datascience-ui/interactive-common/variableExplorerCellFormatter.css

@@ -12,4 +12,21 @@
 
 .react-grid-variable-explorer-cell-numeric {
  color: var(--code-numeric-color, var(--vscode-editor-foreground));
+}
+
+/* High contrast uses an inverse for selection highlights, so just use foreground when hovering */
+body.vscode-high-contrast .react-grid-Row:hover .react-grid-variable-explorer-cell-variable {
+ color: var(--override-selection-foreground, var(--vscode-editor-selectionForeground));
+}
+
+body.vscode-high-contrast .react-grid-Row:hover .react-grid-variable-explorer-cell-type {
+ color: var(--override-selection-foreground, var(--vscode-editor-selectionForeground));
+}
+
+body.vscode-high-contrast .react-grid-Row:hover .react-grid-variable-explorer-cell-string {
+ color: var(--override-selection-foreground, var(--vscode-editor-selectionForeground));
+}
+
+body.vscode-high-contrast .react-grid-Row:hover .react-grid-variable-explorer-cell-numeric {
+ color: var(--override-selection-foreground, var(--vscode-editor-selectionForeground));
 }

src/datascience-ui/interactive-common/variableExplorerGrid.less

@@ -78,3 +78,50 @@
 #variable-explorer-data-grid .rdg-selected {
  visibility: hidden;
 }
+
+// High contrast theme changes
+
+// Notifications-background and line-highlight-border don't work in high contrast mode, so skip the header color in high contrast themes
+body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Header {
+ background-color: var(--override-background, var(--vscode-editor-background));
+ border-color: var(--override-foreground, var(--vscode-editor-foreground));
+}
+
+body.vscode-high-contrast #variable-explorer-data-grid .react-grid-HeaderCell {
+ background-color: var(--override-background, var(--vscode-editor-background));
+ border-color: var(--override-foreground, var(--vscode-editor-foreground));
+}
+
+body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Row--odd {
+ background-color: var(--override-background, var(--vscode-editor-background));
+ border-color: var(--override-foreground, var(--vscode-editor-foreground));
+}
+
+// Since we have removed zebra striping in HC mode, add back in grid lines
+body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Cell {
+ border-style: solid;
+ border-width: 1px;
+ border-color: var(--override-foreground, var(--vscode-editor-foreground));
+}
+
+
+// HC inverts selection colors, so use the selection foreground color on hover
+body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Cell:hover {
+ color: var(--override-selection-foreground, var(--vscode-editor-selectionForeground));
+}
+
+body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Row:hover {
+ color: var(--override-selection-foreground, var(--vscode-editor-selectionForeground));
+}
+
+body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Row:hover .react-grid-Cell {
+ color: var(--override-selection-foreground, var(--vscode-editor-selectionForeground));
+}
+
+// HC inverts selection, which messes up our icons, just keep them with the same foreground / background combo
+body.vscode-high-contrast #variable-explorer-data-grid .react-grid-Row:hover .react-grid-Cell .variable-explorer-button-cell {
+ color: var(--override-foreground, var(--vscode-editor-foreground));
+ background-color: var(--override-background, var(--vscode-editor-background));
+}
+
+