Replace static colors with VSCode CSS variables (#1682)

* Remove light colors

* Replace most colors with VSCode variable equivalents

Co-authored-by: mattseddon <[email protected]>

Author: rogermparent

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

@@ -12,27 +12,14 @@ $edge-padding: 0.8rem;
 $cell-padding: 0.5rem;
 $workspace-row-edge-margin: $edge-padding - $cell-padding;
 
-// Dark Theme
-
-$row-bg-alt-color: var(--vscode-sideBar-background);
-$header-bg-color: #303031;
-$meta-cell-color: #a0a0a0;
-$toggle-color: rgba(255, 255, 255, 0.21);
-$spinner-color: rgb(255, 255, 255);
 $metrics-color: #fbd38d;
 $params-color: #90cdf4;
-
-// Light theme
-
-$header-bg-color-light: #e1e1e1;
-$border-color-light: #7f7f7f;
-$metrics-color-light: #ce9f4c;
-$params-color-light: #76add1;
-$toggle-color-light: rgba(0, 0, 0, 0.21);
-$spinner-color-light: #000;
+$row-bg-alt-color: var(--vscode-sideBar-background);
+$header-bg-color: var(--vscode-dropdown-background);
+$meta-cell-color: var(--vscode-descriptionForeground);
+$changed-color: var(--vscode-gitDecoration-modifiedResourceForeground);
 
 // Extendable Silent Rules
-
 %expandableRowArrow {
   width: 8px;
   height: 8px;
@@ -45,10 +32,6 @@ $spinner-color-light: #000;
   border-left: unset;
   transition: transform 0.2s, right 0.2s, bottom 0.2s;
   margin: 12px 6px;
-
-  :global(.vscode-light) & {
-    border-color: $toggle-color-light;
-  }
 }
 
 %truncateLeftParent {
@@ -118,11 +101,7 @@ $spinner-color-light: #000;
     }
 
     .workspaceWithChanges.normalExperiment & {
-      background-color: $metrics-color;
-
-      :global(.vscode-light) & {
-        background-color: $metrics-color-light;
-      }
+      background-color: $changed-color;
     }
 
     .unselectedExperiment & {
@@ -138,11 +117,7 @@ $spinner-color-light: #000;
     }
 
     .workspaceWithChanges.unselectedExperiment & {
-      border: 1px solid $metrics-color;
-
-      :global(.vscode-light) & {
-        border: 1px solid $metrics-color-light;
-      }
+      border: 1px solid $changed-color;
     }
 
     .queuedExperiment & {
@@ -158,26 +133,13 @@ $spinner-color-light: #000;
       border-top: 1.5px solid currentColor;
       animation: spin 1s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
       background-color: $bg-color;
-
-      @at-root {
-        :global(.vscode-light) & {
-          border-right-color: $spinner-color-light;
-          border-top-color: $spinner-color-light;
-        }
-      }
     }
     .runningExperiment.oddRow & {
       background-color: $row-bg-alt-color;
     }
     .workspaceWithChanges.runningExperiment & {
-      border-right-color: $metrics-color;
-      border-top-color: $metrics-color;
-      @at-root {
-        :global(.vscode-light) & {
-          border-right-color: $metrics-color-light;
-          border-top-color: $metrics-color-light;
-        }
-      }
+      border-right-color: $changed-color;
+      border-top-color: $changed-color;
     }
 
     .runningExperiment.oddRow > .firstCell & {
@@ -305,19 +267,11 @@ $spinner-color-light: #000;
       .paramHeaderCell,
       &.paramHeaderCell {
         color: $params-color;
-
-        :global(.vscode-light) & {
-          color: $params-color-light;
-        }
       }
 
       .metricHeaderCell,
       &.metricHeaderCell {
         color: $metrics-color;
-
-        :global(.vscode-light) & {
-          color: $metrics-color-light;
-        }
       }
     }
 
@@ -384,11 +338,7 @@ $spinner-color-light: #000;
   }
 
   .workspaceChange {
-    color: $metrics-color;
-
-    :global(.vscode-light) & {
-      color: $metrics-color-light;
-    }
+    color: $changed-color;
   }
 
   .td,
@@ -423,10 +373,6 @@ $spinner-color-light: #000;
   .placeholderHeaderCell {
     background-color: $header-bg-color;
     border-right: 2px solid $bg-color;
-
-    :global(.vscode-light) & {
-      background-color: $header-bg-color-light;
-    }
   }
 
   .headerCell {

webview/src/shared/components/emptyState/styles.module.scss

@@ -17,10 +17,4 @@
   opacity: 0.8;
   letter-spacing: 0.04em;
   color: $watermark-color;
-
-  @at-root {
-    :global(.vscode-light) & {
-      color: $watermark-color-light;
-    }
-  }
 }

webview/src/shared/variables.scss

@@ -1,11 +1,4 @@
 $fg-color: var(--vscode-editor-foreground);
 $bg-color: var(--vscode-editor-background);
 $bullet-size: 9px;
-
-// Dark
-
-$watermark-color: rgba(255, 255, 255, 0.6);
-
-// Light
-
-$watermark-color-light: rgba(0, 0, 0, 0.68);
+$watermark-color: var(--vscode-descriptionForeground);