Use vscode tree.tableColumnsBorder to add contrast in light themes (#1803)

* Use vscode tree.tableColumnsBorder to add contrast in light themes

* Add variable to storybook test-vscode-styles.scss

* Remove border bottom for leaf headers

Author: wolmir

webview/src/experiments/components/table/TableHeader.tsx

@@ -104,6 +104,7 @@ const TableHeaderCell: React.FC<{
           [styles.paramHeaderCell]: column.group === ColumnType.PARAMS,
           [styles.metricHeaderCell]: column.group === ColumnType.METRICS,
           [styles.firstLevelHeader]: isFirstLevelHeader(column.id),
+          [styles.leafHeader]: column.headers === undefined,
           ...sortingClasses()
         }
       )

webview/src/experiments/components/table/styles.module.scss

@@ -370,15 +370,19 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
 
   .placeholderHeaderCell {
     background-color: $header-bg-color;
-    border-right: 2px solid $bg-color;
+    border-right: 2px solid $header-border-color;
   }
 
   .headerCell {
     @extend .placeholderHeaderCell;
     color: $header-fg-color;
     text-align: center;
-    border-bottom: 2px solid $bg-color;
+    border-bottom: 2px solid $header-border-color;
     padding: 0.31rem $cell-padding;
+
+    &.leafHeader {
+      border-bottom: none;
+    }
   }
 
   .sortingHeaderCellAsc {

webview/src/shared/variables.scss

@@ -12,6 +12,7 @@ $row-bg-color: $bg-color;
 $header-fg-color: $fg-color;
 $row-bg-alt-color: var(--vscode-sideBar-background);
 $header-bg-color: var(--vscode-dropdown-background);
+$header-border-color: var(--vscode-tree-tableColumnsBorder);
 $meta-cell-color: var(--vscode-descriptionForeground);
 
 $hover-background-color: var(--vscode-list-hoverBackground);

webview/src/stories/test-vscode-styles.scss

@@ -102,6 +102,7 @@ html {
   --vscode-listFilterWidget-noMatchesOutline: #be1100;
   --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
   --vscode-tree-indentGuidesStroke: #585858;
+  --vscode-tree-tableColumnsBorder: #1e1e1e;
   --vscode-list-deemphasizedForeground: #8c8c8c;
   --vscode-menu-foreground: #cccccc;
   --vscode-menu-background: #252526;