feat: Theming - Spectrum variable mapping and light theme (#1680)

Theming - Spectrum variable mapping

resolves #1669

resolves #1539

---------

Co-authored-by: Don McKenzie <donmckenzie@deephaven.io>

Author: bmingles

packages/code-studio/src/main/AppMainContainer.scss

@@ -280,6 +280,7 @@ $nav-space: 4px; // give a gap around some buttons for focus area that are in na
   display: flex;
   width: 100%;
   justify-content: space-between;
+  align-items: center;
 
   .btn-link {
     font-size: $tab-font-size;

packages/code-studio/src/main/AppMainContainer.tsx

@@ -20,6 +20,7 @@ import {
   Button,
   InfoModal,
   LoadingSpinner,
+  Logo,
   BasicModal,
   DebouncedModal,
 } from '@deephaven/components';
@@ -91,7 +92,6 @@ import JSZip from 'jszip';
 import SettingsMenu from '../settings/SettingsMenu';
 import AppControlsMenu from './AppControlsMenu';
 import { getLayoutStorage, getServerConfigValues } from '../redux';
-import Logo from '../settings/community-wordmark-app.svg';
 import './AppMainContainer.scss';
 import WidgetList, { WindowMouseEvent } from './WidgetList';
 import EmptyDashboard from './EmptyDashboard';
@@ -740,12 +740,7 @@ export class AppMainContainer extends Component<
       >
         <nav className="nav-container">
           <div className="app-main-top-nav-menus">
-            <img
-              src={Logo}
-              alt="Deephaven Data Labs"
-              width="115px"
-              className="ml-1"
-            />
+            <Logo className="ml-1" style={{ maxHeight: '20px' }} />
             <div>
               <Button
                 kind="ghost"
@@ -800,10 +795,7 @@ export class AppMainContainer extends Component<
                 onClick={this.handleSettingsMenuShow}
                 icon={
                   <span className="fa-layers">
-                    <FontAwesomeIcon
-                      icon={vsGear}
-                      transform="grow-3 right-1 down-1"
-                    />
+                    <FontAwesomeIcon icon={vsGear} transform="grow-3" />
                     {isDisconnected && !isAuthFailed && (
                       <>
                         <FontAwesomeIcon

packages/code-studio/src/settings/LegalNotice.tsx

@@ -13,7 +13,7 @@ function LegalNotice(): ReactElement {
       <Button kind="ghost" onClick={toggle} icon={vsLaw}>
         Legal Notices
       </Button>
-      <Modal isOpen={modal} toggle={toggle} className="theme-bg-light">
+      <Modal isOpen={modal} toggle={toggle}>
         <ModalHeader toggle={toggle}>Legal Notice</ModalHeader>
         <ModalBody>
           <p>

packages/code-studio/src/settings/SettingsMenu.scss

@@ -1,6 +1,5 @@
 @import '@deephaven/components/scss/custom.scss';
 
-$settings-menu-bg: $gray-700;
 $settings-menu-width: 400px;
 $settings-menu-header-min-height: 60px;
 $settings-menu-padding: $spacer-3;
@@ -9,7 +8,7 @@ $settings-menu-header-color: var(--dh-color-fg);
 
 $settings-menu-collapse-trigger-color: var(--dh-color-fg);
 
-$settings-menu-rule-bg: $gray-600;
+$settings-menu-rule-bg: $gray-800;
 $settings-menu-rule-button-color: $gray-300;
 $settings-menu-rule-border: $gray-400;
 $settings-menu-rule-focused-border: $primary;
@@ -21,9 +20,12 @@ $input-btn-focus-box-shadow-over-primary: 0 0 0 0.2rem
 $settings-menu-z-index: $zindex-modal;
 
 .app-settings-menu {
+  --settings-menu-bg: var(--dh-color-surface-bg);
+  --dh-color-hr: var(--dh-color-gray-500);
+
   display: flex;
   flex-direction: column;
-  background: $settings-menu-bg;
+  background: var(--settings-menu-bg);
   box-shadow: $box-shadow;
   position: fixed;
   top: 0;
@@ -181,7 +183,7 @@ $settings-menu-z-index: $zindex-modal;
 .app-settings-footer {
   .app-settings-footer-section {
     padding: $settings-menu-padding 0;
-    border-top: 1px solid $gray-800;
+    border-top: 1px solid var(--dh-color-hr);
     .app-settings-footer-item:not(:last-child) {
       padding-bottom: $settings-menu-padding;
     }

packages/code-studio/src/settings/SettingsMenu.tsx

@@ -13,6 +13,7 @@ import {
 import {
   Button,
   CopyButton,
+  Logo,
   ThemeContext,
   ThemePicker,
   Tooltip,
@@ -24,7 +25,6 @@ import {
   makeMessage,
 } from '@deephaven/jsapi-utils';
 import { assertNotNull } from '@deephaven/utils';
-import Logo from './community-wordmark-app.svg';
 import FormattingSectionContent from './FormattingSectionContent';
 import LegalNotice from './LegalNotice';
 import SettingsMenuSection from './SettingsMenuSection';
@@ -147,6 +147,7 @@ export class SettingsMenu extends Component<
     const userDisplayName = user.displayName ?? user.name;
     const hasUserImage = user.image != null && user.image !== '';
     const showUserName = userDisplayName !== '';
+
     return (
       <div className="app-settings-menu">
         <header className="app-settings-menu-header">
@@ -345,16 +346,17 @@ export class SettingsMenu extends Component<
               </div>
             </div>
             <div className="app-settings-footer-section">
-              <div className="logo">
-                <a
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  href="https://deephaven.io"
-                  className="d-inline-block custom-link p-1"
-                >
-                  <img src={Logo} alt="Deephaven Data Labs" width="230px" />
-                </a>
-              </div>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href="https://deephaven.io"
+                style={{
+                  display: 'block',
+                  width: '61.8%',
+                }}
+              >
+                <Logo />
+              </a>
             </div>
           </div>
         </div>

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

@@ -5,6 +5,10 @@ import { Button, ButtonOld, SocketedButton } from '@deephaven/components';
 import { dhTruck } from '@deephaven/icons';
 import { sampleSectionIdAndClasses } from './utils';
 
+function noOp(): void {
+  return undefined;
+}
+
 interface ButtonsState {
   toggle: boolean;
 }
@@ -80,31 +84,38 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
     return (
       <div {...sampleSectionIdAndClasses('buttons-socketed')}>
         <h5>Socketed Buttons (for linker)</h5>
-        <SocketedButton style={{ marginBottom: '1rem', marginRight: '1rem' }}>
+        <SocketedButton
+          style={{ marginBottom: '1rem', marginRight: '1rem' }}
+          onClick={noOp}
+        >
           Unlinked
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           isLinked
+          onClick={noOp}
         >
           Linked
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           isLinkedSource
+          onClick={noOp}
         >
           Linked Source
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           isLinked
           isInvalid
+          onClick={noOp}
         >
           Error
         </SocketedButton>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
           disabled
+          onClick={noOp}
         >
           Disabled
         </SocketedButton>
@@ -130,7 +141,13 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
       >
         <h5>Inline Buttons</h5>
         Regular btn-inline:
-        <Button className="mx-2" kind="inline" icon={dhTruck} tooltip="test" />
+        <Button
+          className="mx-2"
+          kind="inline"
+          icon={dhTruck}
+          tooltip="test"
+          onClick={noOp}
+        />
         Toggle button (class active):
         <Button
           className="mx-2"
@@ -143,21 +160,23 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
           tooltip="test"
         />
         Disabled:
-        <Button className="mx-2" kind="inline" disabled>
+        <Button className="mx-2" kind="inline" disabled onClick={noOp}>
           Disabled
         </Button>
         With Text:
-        <Button className="mx-2" kind="inline" icon={dhTruck}>
+        <Button className="mx-2" kind="inline" icon={dhTruck} onClick={noOp}>
           <span>Text Button</span>
         </Button>
         <br />
         <br />
         <span>btn-link-icon (no text):</span>
-        <Button kind="ghost" icon={dhTruck} tooltip="test" />
+        <Button kind="ghost" icon={dhTruck} tooltip="test" onClick={noOp} />
         <span className="mx-2">btn-link:</span>
-        <Button kind="ghost">Text Button </Button>
+        <Button kind="ghost" onClick={noOp}>
+          Text Button
+        </Button>
         <span className="mx-2">btn-link (text w/ optional with icon):</span>
-        <Button kind="ghost" icon={dhTruck}>
+        <Button kind="ghost" icon={dhTruck} onClick={noOp}>
           Text Button
         </Button>
       </div>

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

@@ -42,7 +42,7 @@ function Modals(): React.ReactElement {
       </div>
       <h2 className="ui-title">Custom Modal</h2>
       <div style={{ padding: '1rem' }}>
-        <div className="modal-dialog theme-bg-light" role="dialog">
+        <div className="modal-dialog" role="dialog">
           <div className="modal-content">
             <div className="modal-header">
               <h5 className="modal-title">Modal title</h5>

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React, { Key, useCallback, useEffect, useState } from 'react';
 import {
   ActionButton,
@@ -12,6 +13,7 @@ import { vsMenu } from '@deephaven/icons';
 import {
   MENU_CATEGORY_DATA_ATTRIBUTE,
   NO_MENU_DATA_ATTRIBUTE,
+  SPECTRUM_COMPARISON_SAMPLES_ID,
   SPECTRUM_COMPONENT_SAMPLES_ID,
 } from './constants';
 
@@ -26,18 +28,18 @@ type LinkCategory = { category: string; items: Link[] };
  * menu category. These will be queried by the SamplesMenu component to build
  * up the menu sections.
  */
-export function SampleMenuCategory({
-  'data-menu-category': dataMenuCategory,
-}: Record<typeof MENU_CATEGORY_DATA_ATTRIBUTE, string>): JSX.Element {
-  return <div data-menu-category={dataMenuCategory} />;
+export function SampleMenuCategory(
+  props: Record<typeof MENU_CATEGORY_DATA_ATTRIBUTE, string>
+): JSX.Element {
+  return <div {...props} />;
 }
 
 /**
  * Creates a menu from h2, h3 elements on the page and assigns them each an id
  * for hash navigation purposes. If the current hash matches one of the ids, it
  * will scroll to that element. This handles the initial page load scenario.
- * Menu sections are identified by divs with MENU_CATEGORY_DATA_ATTRIBUTE
- * attributes.
+ * Menu categories are identified by divs with MENU_CATEGORY_DATA_ATTRIBUTE
+ * attributes originating from the <SampleMenuCategory> component.
  */
 export function SamplesMenu(): JSX.Element {
   const [links, setLinks] = useState<LinkCategory[]>([]);
@@ -53,34 +55,48 @@ export function SamplesMenu(): JSX.Element {
       `#${SPECTRUM_COMPONENT_SAMPLES_ID}`
     );
 
+    const spectrumComparisonSamples = document.querySelector(
+      `#${SPECTRUM_COMPARISON_SAMPLES_ID}`
+    );
+
     document
       .querySelectorAll(`h2,h3,[${MENU_CATEGORY_DATA_ATTRIBUTE}]`)
-      .forEach(el => {
-        if (el.textContent == null || el.hasAttribute(NO_MENU_DATA_ATTRIBUTE)) {
+      .forEach(headingEl => {
+        if (
+          headingEl.textContent == null ||
+          headingEl.hasAttribute(NO_MENU_DATA_ATTRIBUTE)
+        ) {
           return;
         }
 
         // Create a new category section
-        if (el.hasAttribute(MENU_CATEGORY_DATA_ATTRIBUTE)) {
+        if (headingEl.hasAttribute(MENU_CATEGORY_DATA_ATTRIBUTE)) {
           currentCategory = {
-            category: el.getAttribute(MENU_CATEGORY_DATA_ATTRIBUTE) ?? '',
+            category:
+              headingEl.getAttribute(MENU_CATEGORY_DATA_ATTRIBUTE) ?? '',
             items: [],
           };
           categories.push(currentCategory);
 
           return;
         }
 
-        const id = `${
-          spectrumComponentsSamples?.contains(el) === true ? 'spectrum-' : ''
-        }${el.textContent}`
+        const idPrefix =
+          // eslint-disable-next-line no-nested-ternary
+          spectrumComponentsSamples?.contains(headingEl) === true
+            ? 'spectrum-'
+            : spectrumComparisonSamples?.contains(headingEl) === true
+            ? 'spectrum-compare-'
+            : '';
+
+        const id = `${idPrefix}${headingEl.textContent}`
           .toLowerCase()
           .replace(/\s/g, '-');
 
         // eslint-disable-next-line no-param-reassign
-        el.id = id;
+        headingEl.id = id;
 
-        currentCategory.items.push({ id, label: el.textContent });
+        currentCategory.items.push({ id, label: headingEl.textContent });
       });
 
     setLinks(categories);