feat: Monaco theming (#1560)

- Base color palette now uses hsl colors with a single
`--dh-color-xxx-hue` variable defining each of the base colors (see not
in testing section below)
- Updated Monaco theme to consume --dh-color variables
- Refined default dark theme a bit with more semantic variables mostly
in support of Monaco.
- Utils for normalizing colors + deriving css variables

**Methodology for Resolving Css Variables and Normalizing Colors**
ThemeUtils.resolveCssVariablesInRecord(record, targetEl)
- Add tmp div to target element for resolving variables
- Extract distinct `var` expressions from values in given record
- For each distinct `var` expression, create a tmp css variable on the
temp div
- Call getComputedStyle() on the tmp div
- For each value on the given record
- Replace `var` expressions with resolved values. Values are resolved
using `getPropertyValue()` on the result of `getComputedStyle()` in
previous step.
  - Normalize any color values to 8 character hex
- Convert to rgb/a - ColorUtils.asRgbOrRgbaString() - create a
non-attached div element, set its background color then read the
background color
    - Parse rgb/a and convert to hex with math

**Testing**
The MonacoTheme object now gets passed through a normalization function.
You can see the before and after in the debug logs "Monaco theme:" and
"Monaco theme derived:". The inputs are various `var(--dh-`
expressions`, and the outputs should all be 8 character hex values.

> Note: The new base color palette is hsl based derived from original
hex colors Don created in his theming work. A mapping of the original
hex to the new hsl version can be found here:
> https://bmingles.github.io/deephaven-theming-spike/
> 

resolves #1542

BREAKING CHANGE: Theme variables have to be present on body to avoid
Monaco init failing

Author: bmingles

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

@@ -1,12 +1,22 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import '@deephaven/components/scss/BaseStyleSheet.scss';
-import { LoadingOverlay } from '@deephaven/components';
+import {
+  LoadingOverlay,
+  preloadTheme,
+  ThemeData,
+  ThemeProvider,
+} from '@deephaven/components';
 import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
 import logInit from '../log/LogInit';
 
 logInit();
 
+preloadTheme();
+
+// Provide a non-null array to ThemeProvider to tell it to initialize
+const customThemes: ThemeData[] = [];
+
 // eslint-disable-next-line react-refresh/only-export-components
 const StyleGuideRoot = React.lazy(() => import('./StyleGuideRoot'));
 
@@ -24,9 +34,11 @@ const apiURL = new URL(
 ReactDOM.render(
   <ApiBootstrap apiUrl={apiURL.href} setGlobally>
     <Suspense fallback={<LoadingOverlay />}>
-      <FontBootstrap>
-        <StyleGuideRoot />
-      </FontBootstrap>
+      <ThemeProvider themes={customThemes}>
+        <FontBootstrap>
+          <StyleGuideRoot />
+        </FontBootstrap>
+      </ThemeProvider>
     </Suspense>
   </ApiBootstrap>,
   document.getElementById('root')

packages/components/scss/BaseStyleSheet.scss

@@ -20,7 +20,7 @@ html {
 
 body {
   min-height: 100%;
-  background-color: var(--dh-background-color, $background);
+  background-color: var(--dh-color-background, $background);
   color: $foreground;
   margin: 0;
   padding: 0;
@@ -30,7 +30,7 @@ body {
 }
 
 #root {
-  background-color: var(--dh-background-color, $background);
+  background-color: var(--dh-color-background, $background);
 
   .app {
     height: 100vh;

packages/components/src/LoadingSpinner.scss

@@ -2,7 +2,7 @@
 .loading-spinner {
   --primary-color: var(
     --dh-loading-spinner-primary-color,
-    var(--dh-accent-color, #4c7dee)
+    var(--dh-color-accent, #4c7dee)
   );
   --secondary-color: var(
     --dh-loading-spinner-secondary-color,

packages/components/src/theme/ThemeModel.ts

@@ -7,8 +7,8 @@ export const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;
 
 // Css properties that are used in preload data with default values.
 export const DEFAULT_PRELOAD_DATA_VARIABLES = {
-  '--dh-accent-color': '#4c7dee', // dark theme --dh-color-blue-700
-  '--dh-background-color': '#1a171a', // dark theme --dh-color-gray-50
+  '--dh-color-accent': '#4c7dee', // dark theme --dh-color-blue-700
+  '--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50
 } satisfies Record<`--dh-${string}`, string>;
 
 export const THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';

packages/components/src/theme/ThemeProvider.tsx

@@ -36,7 +36,7 @@ export function ThemeProvider({
 
   const activeThemes = useMemo(
     () =>
-      // Themes remain inactive until a non-null themes value is provided. This
+      // Themes remain inactive until a non-null themes array is provided. This
       // avoids the default base theme overriding the preload if we are waiting
       // on additional themes to be available.
       themes == null