Update experiment table icons to use --vscode-descriptionForeground and use --vscode-editorLightBulb-foreground for selected stars (#2604)

* update queued icon, unselected bullet and spinner colors

* update indicator colors

* use description foreground as icon color

* add editor light bulb for selected star

Author: mattseddon

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

@@ -19,7 +19,7 @@ $bullet-size: calc(var(--design-unit) * 4px);
   left: 0;
   display: inline-block;
   position: absolute;
-  border: 2px solid $row-action-icon-color;
+  border: 2px solid $icon-color;
   border-top: unset;
   border-left: unset;
   transition: transform 0.2s, right 0.2s, bottom 0.2s;
@@ -102,7 +102,7 @@ $bullet-size: calc(var(--design-unit) * 4px);
   background: $checkbox-background;
   border-radius: $bullet-size;
   border: calc(var(--border-width) * 1px) solid $checkbox-border;
-  color: $fg-color;
+  color: $icon-color;
   cursor: pointer;
   display: flex;
   height: $bullet-size;
@@ -135,7 +135,7 @@ $bullet-size: calc(var(--design-unit) * 4px);
       width: 4px;
       height: 4px;
       vertical-align: middle;
-      border: 1px solid $fg-color;
+      border: 1px solid $icon-color;
       background-color: $checkbox-background;
     }
 
@@ -163,6 +163,7 @@ $bullet-size: calc(var(--design-unit) * 4px);
 }
 
 .queued {
+  color: $icon-color;
   display: flex;
   height: 16px;
   left: 2px;
@@ -331,7 +332,7 @@ $bullet-size: calc(var(--design-unit) * 4px);
 
       .expandedRowArrow,
       .contractedRowArrow {
-        border-color: $row-action-selected-icon-color;
+        border-color: $selected-icon-color;
       }
     }
   }
@@ -505,18 +506,6 @@ $bullet-size: calc(var(--design-unit) * 4px);
           margin-right: 2px;
         }
 
-        .starSwitch {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 14px;
-          cursor: pointer;
-
-          &[aria-checked='true'] {
-            opacity: 1;
-          }
-        }
-
         .indicatorIcon {
           display: inline-flex;
           align-items: center;
@@ -559,15 +548,27 @@ $bullet-size: calc(var(--design-unit) * 4px);
   }
 }
 
-.experimentCell .rowActions .starSwitch svg {
-  fill: $row-action-icon-color;
+.starSwitch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  cursor: pointer;
+
+  svg {
+    fill: $icon-color;
+
+    .rowSelected & {
+      fill: $selected-icon-color;
+    }
+  }
 
-  .rowSelected & {
-    fill: $row-action-selected-icon-color;
+  &[aria-checked='true'] svg {
+    fill: $row-action-star-checked;
   }
 }
 
-.cellHintTooltip {
+.starSwitch .cellHintTooltip {
   font-size: 0.65rem;
 }
 
@@ -763,10 +764,7 @@ $badge-size: 0.85rem;
   height: 1.5rem;
   cursor: pointer;
   svg {
-    fill: $watermark-color;
-  }
-  &.indicatorWithCount svg {
-    fill: $fg-color;
+    fill: $icon-color;
   }
 }
 

webview/src/shared/variables.scss

@@ -30,11 +30,12 @@ $accent-color: var(--button-primary-background);
 $indicator-badge-background: var(--vscode-activityBarBadge-background);
 $indicator-badge-foreground: var(--vscode-activityBarBadge-foreground);
 
-$row-action-icon-color: var(--vscode-icon-foreground);
-$row-action-selected-icon-color: var(
+$icon-color: var(--vscode-descriptionForeground);
+$selected-icon-color: var(
   --vscode-list-activeSelectionIconForeground,
-  var(--vscode-icon-foreground)
+  var(--vscode-descriptionForeground)
 );
+$row-action-star-checked: var(--vscode-editorLightBulb-foreground);
 
 $shadow: var(--vscode-widget-shadow);