fix: adjust filter bar colour (#1666)

- add full accent-100-1400 hsl colours
- use accent colours with transparency to more closely match original
grid design for filter bar colour
- use those variables in the filter input field, with a hacky stacked
solid colour linear gradient, such that transperncy has the colour
underneath as canvas would
- --dh-color-grid-row-hover-bg was too dark, bumped up one level (no
longer the same as elsewhere, but grid stripes are lighter so it needs
more contrast

packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css

@@ -15,7 +15,7 @@
   /* Row */
   --dh-color-grid-row-0-bg: var(--dh-color-gray-300);
   --dh-color-grid-row-1-bg: var(--dh-color-gray-100);
-  --dh-color-grid-row-hover-bg: var(--dh-color-highlight-hover);
+  --dh-color-grid-row-hover-bg: var(--dh-color-gray-400);
   --dh-color-grid-row-hover-bg-selected: var(
     --dh-color-highlight-selected-hover
   );
@@ -49,12 +49,19 @@
   --dh-color-grid-string-null: var(--dh-color-gray-600);
 
   /* Filter Bar */
-  --dh-color-grid-filter-bar-active-bg: var(--dh-color-accent-300);
+  --dh-color-grid-filter-bar-active-bg: hsla(
+    var(--dh-color-accent-700-hsl),
+    0.5
+  );
   --dh-color-grid-filter-bar-active: var(--dh-color-accent-600);
   --dh-color-grid-filter-bar-expanded-bg: var(--dh-color-gray-200);
-  --dh-color-grid-filter-bar-expanded-active-bg: var(--dh-color-accent-100);
-  --dh-color-grid-filter-bar-expanded-active-cell-bg: var(
-    --dh-color-accent-200
+  --dh-color-grid-filter-bar-expanded-active-bg: hsla(
+    var(--dh-color-accent-1000-hsl),
+    0.19
+  );
+  --dh-color-grid-filter-bar-expanded-active-cell-bg: hsla(
+    var(--dh-color-accent-700-hsl),
+    0.32
   );
   --dh-color-grid-filter-bar-separator: var(--dh-color-gray-600);
   --dh-color-grid-filter-bar-error: var(--dh-color-visual-negative);

packages/components/src/theme/theme-dark/theme-dark-semantic.css

@@ -6,6 +6,21 @@
   --dh-color-foreground-hsl: var(--dh-color-white-hsl);
 
   --dh-color-accent-hsl: var(--dh-color-blue-600-hsl);
+  --dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl);
+  --dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl);
+  --dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl);
+  --dh-color-accent-400-hsl: var(--dh-color-blue-400-hsl);
+  --dh-color-accent-500-hsl: var(--dh-color-blue-500-hsl);
+  --dh-color-accent-600-hsl: var(--dh-color-blue-600-hsl);
+  --dh-color-accent-700-hsl: var(--dh-color-blue-700-hsl);
+  --dh-color-accent-800-hsl: var(--dh-color-blue-800-hsl);
+  --dh-color-accent-900-hsl: var(--dh-color-blue-900-hsl);
+  --dh-color-accent-1000-hsl: var(--dh-color-blue-1000-hsl);
+  --dh-color-accent-1100-hsl: var(--dh-color-blue-1100-hsl);
+  --dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl);
+  --dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl);
+  --dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl);
+
   --dh-color-info-hsl: var(--dh-color-cyan-1000-hsl);
   --dh-color-neutral-hsl: var(--dh-color-gray-500-hsl);
   --dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl);
@@ -69,20 +84,20 @@
   --dh-color-contrast-light: hsl(var(--dh-color-contrast-light-hsl));
 
   /** Accent Colors */
-  --dh-color-accent-100: var(--dh-color-blue-100);
-  --dh-color-accent-200: var(--dh-color-blue-200);
-  --dh-color-accent-300: var(--dh-color-blue-300);
-  --dh-color-accent-400: var(--dh-color-blue-400);
-  --dh-color-accent-500: var(--dh-color-blue-500);
-  --dh-color-accent-600: var(--dh-color-blue-600);
-  --dh-color-accent-700: var(--dh-color-blue-700);
-  --dh-color-accent-800: var(--dh-color-blue-800);
-  --dh-color-accent-900: var(--dh-color-blue-900);
-  --dh-color-accent-1000: var(--dh-color-blue-1000);
-  --dh-color-accent-1100: var(--dh-color-blue-1100);
-  --dh-color-accent-1200: var(--dh-color-blue-1200);
-  --dh-color-accent-1300: var(--dh-color-blue-1300);
-  --dh-color-accent-1400: var(--dh-color-blue-1400);
+  --dh-color-accent-100: hsl(var(--dh-color-accent-100-hsl));
+  --dh-color-accent-200: hsl(var(--dh-color-accent-200-hsl));
+  --dh-color-accent-300: hsl(var(--dh-color-accent-300-hsl));
+  --dh-color-accent-400: hsl(var(--dh-color-accent-400-hsl));
+  --dh-color-accent-500: hsl(var(--dh-color-accent-500-hsl));
+  --dh-color-accent-600: hsl(var(--dh-color-accent-600-hsl));
+  --dh-color-accent-700: hsl(var(--dh-color-accent-700-hsl));
+  --dh-color-accent-800: hsl(var(--dh-color-accent-800-hsl));
+  --dh-color-accent-900: hsl(var(--dh-color-accent-900-hsl));
+  --dh-color-accent-1000: hsl(var(--dh-color-accent-1000-hsl));
+  --dh-color-accent-1100: hsl(var(--dh-color-accent-1100-hsl));
+  --dh-color-accent-1200: hsl(var(--dh-color-accent-1200-hsl));
+  --dh-color-accent-1300: hsl(var(--dh-color-accent-1300-hsl));
+  --dh-color-accent-1400: hsl(var(--dh-color-accent-1400-hsl));
 
   /* Accent Background */
   --dh-color-accent-default-bg: hsl(var(--dh-color-accent-hsl));

packages/iris-grid/src/FilterInputField.scss

@@ -56,13 +56,29 @@
     }
 
     &.iris-grid-has-filter {
-      // same as filter-bar-expanded-active-bg
-      background: scale-color($primary, $saturation: -75%, $lightness: -60%);
+      // This is a hack to get the filter bar inputs to match the canvas rendered equivalent
+      // --dh-color-filter-bar-expanded-active-bg relies on transparency of being drawn overtop of
+      // the grid background. Since we can't do that here, we need to mimic the effect by stacking
+      // backgrounds using a single color linear gradients as a hack. Performance is not an issue
+      // since it only applies to the selected filter bar cell.
+      background: linear-gradient(
+          var(--dh-color-grid-filter-bar-expanded-active-bg) 100%,
+          var(--dh-color-grid-filter-bar-expanded-active-bg)
+        ),
+        linear-gradient(var(--dh-color-grid-bg) 100%, var(--dh-color-grid-bg));
     }
 
     &.active {
-      //same as filter-bar-expanded-active-cell-bg
-      background: scale-color($primary, $saturation: -50%, $lightness: -40%);
+      // the canvas color to mimic here is based on the above, with yet another color stacked on top in
+      background: linear-gradient(
+          var(--dh-color-grid-filter-bar-expanded-active-cell-bg) 100%,
+          var(--dh-color-grid-filter-bar-expanded-active-cell-bg)
+        ),
+        linear-gradient(
+          var(--dh-color-grid-filter-bar-expanded-active-bg) 100%,
+          var(--dh-color-grid-filter-bar-expanded-active-bg)
+        ),
+        linear-gradient(var(--dh-color-grid-bg) 100%, var(--dh-color-grid-bg));
     }
 
     &:focus {