fix: Fixing grid colors and grays (#1621)

- Styleguide didn't have 850 actually mapped.
- dh-gray-100 is mapped to content-bg but doesn't have a Bootstrap
gray-xxx counterpart, so I added a Gray-8XX for illustration while we
are still mapping things
- Grid row was mapped to dh-gray-200 but should have been dh-gray-300
- I added calculations for the hsl for grays instead of the all zero hue
based ones I had before. They are still not exact but closer. I'm
looking into fixing the rounding error.

#1572

Author: bmingles

packages/code-studio/src/styleguide/Colors.tsx

@@ -12,6 +12,7 @@ function Colors(): React.ReactElement {
     ['700', '400'],
     ['800', '300'],
     ['850', '200'],
+    ['8XX', '100'],
     ['900', '75'],
   ].map(([swatch, dh]) => (
     <div

packages/code-studio/src/styleguide/StyleGuide.scss

@@ -60,6 +60,11 @@ pre {
   }
 }
 
+.gray-swatch-850 {
+  color: color-yiq($gray-850);
+  background-color: $gray-850;
+}
+
 .style-guide-container {
   background-color: $content-bg;
   padding: 1rem;

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

@@ -1,17 +1,17 @@
 :root {
   /* Gray */
-  --dh-color-gray-hue: 0deg;
-  --dh-color-gray-50: hsl(var(--dh-color-gray-hue) 6% 10%);
-  --dh-color-gray-75: hsl(var(--dh-color-gray-hue) 5% 13%);
-  --dh-color-gray-100: hsl(var(--dh-color-gray-hue) 5% 17%);
-  --dh-color-gray-200: hsl(var(--dh-color-gray-hue) 4% 19%);
-  --dh-color-gray-300: hsl(var(--dh-color-gray-hue) 4% 21%);
-  --dh-color-gray-400: hsl(var(--dh-color-gray-hue) 2% 25%);
-  --dh-color-gray-500: hsl(var(--dh-color-gray-hue) 1% 36%);
-  --dh-color-gray-600: hsl(var(--dh-color-gray-hue) 0% 57%);
-  --dh-color-gray-700: hsl(var(--dh-color-gray-hue) 1% 75%);
-  --dh-color-gray-800: hsl(var(--dh-color-gray-hue) 6% 94%);
-  --dh-color-gray-900: hsl(var(--dh-color-gray-hue) 25% 98%);
+  --dh-color-gray-hue: 219deg;
+  --dh-color-gray-50: hsl(calc(var(--dh-color-gray-hue) + 81deg), 6%, 10%);
+  --dh-color-gray-75: hsl(calc(var(--dh-color-gray-hue) + 61deg), 5%, 13%);
+  --dh-color-gray-100: hsl(calc(var(--dh-color-gray-hue) + 66deg), 5%, 17%);
+  --dh-color-gray-200: hsl(calc(var(--dh-color-gray-hue) + 66deg), 4%, 19%);
+  --dh-color-gray-300: hsl(calc(var(--dh-color-gray-hue) + 66deg), 4%, 21%);
+  --dh-color-gray-400: hsl(calc(var(--dh-color-gray-hue) + 61deg), 2%, 25%);
+  --dh-color-gray-500: hsl(calc(var(--dh-color-gray-hue) + 51deg), 1%, 36%);
+  --dh-color-gray-600: hsl(calc(var(--dh-color-gray-hue) + 81deg), 0%, 57%);
+  --dh-color-gray-700: hsl(calc(var(--dh-color-gray-hue) - 219deg), 1%, 75%);
+  --dh-color-gray-800: hsl(calc(var(--dh-color-gray-hue) - 159deg), 6%, 94%);
+  --dh-color-gray-900: hsl(calc(var(--dh-color-gray-hue) - 159deg), 25%, 98%);
 
   /** Black & White */
   --dh-color-black: var(--dh-color-gray-50);

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

@@ -13,7 +13,7 @@
   --dh-color-grid-header-bar-casing: var(--dh-color-gray-50);
 
   /* Row */
-  --dh-color-grid-row-0-bg: var(--dh-color-gray-200);
+  --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-selected: var(
@@ -23,7 +23,7 @@
   /* Selection */
   --dh-color-grid-selection: var(--dh-color-highlight-selected);
   --dh-color-grid-selection-outline: var(--dh-color-accent-900);
-  --dh-color-grid-selection-outline-casing: var(--dh-gray-50);
+  --dh-color-grid-selection-outline-casing: var(--dh-color-gray-50);
 
   /** Sroll Bar */
   --dh-color-grid-scroll-bar-active-selection-tick: var(--dh-color-accent-400);