spectrum theme

package.json

@@ -153,6 +153,7 @@
  ]
  },
  "dependencies": {
+ "@adobe/react-spectrum": "^3.28.0",
  "@deephaven/app-utils": "file:packages/app-utils",
  "@deephaven/babel-preset": "file:packages/babel-preset",
  "@deephaven/chart": "file:packages/chart",

packages/chart/src/Chart.scss

@@ -4,7 +4,7 @@ $chart-bg: $content-bg;
 $plotly-notifier-margin-right: 15px;
 $plotly-notifier-note-bg: $gray-600;
 $plotly-notifier-note-border-radius: 2px;
-$plotly-color-btn-active: rgba(255, 255, 255, 70%);
+$plotly-color-btn-active: $foreground-opacity-80;
 
 .plotly-notifier {
  margin-right: $plotly-notifier-margin-right;
@@ -51,7 +51,7 @@ $plotly-color-btn-active: rgba(255, 255, 255, 70%);
  }
 
  .zoomlayer .zoombox {
- fill: rgba(0, 0, 0, 50%) !important;
+ fill: rgba($background-rgb, 50%) !important;
  }
 
  .zoomlayer .zoombox-corners {

packages/chart/src/ChartTheme.module.scss

@@ -1,21 +1,22 @@
 /* stylelint-disable */
 @import '@deephaven/components/scss/custom.scss';
 
+// NEEDS TO BE REPLACED WITH JS FROM A HOOK
 :export {
  paper-bgcolor: $content-bg;
  plot-bgcolor: $gray-850;
  title-color: $white;
  colorway: $blue $green $yellow $purple $orange $red $white;
  gridcolor: $gray-700;
- linecolor: $gray-500;
+ linecolor: $gray-800;
  zerolinecolor: $gray-300;
  activecolor: $primary;
- rangebgcolor: rgba($gray-500, 0.7);
+ rangebgcolor: var(--spectrum-gray-500);
  area-color: $blue;
- trend-color: lighten($green, 20%);
+ trend-color: var(--spectrum-green-1200);
  line-color: $green;
- error-band-line-color: lighten($green, 40%);
- error-band-fill-color: rgba(lighten($green, 20%), 0.1);
+ error-band-line-color: var(--spectrum-green-1400);
+ error-band-fill-color: var(--spectrum-green-1200);
  ohlc-increasing: $green;
  ohlc-decreasing: $red;
 }

packages/code-studio/package.json

@@ -11,6 +11,7 @@
  "directory": "packages/code-studio"
  },
  "dependencies": {
+ "@adobe/react-spectrum": "^3.28.0",
  "@deephaven/app-utils": "file:../app-utils",
  "@deephaven/auth-plugins": "file:../auth-plugins",
  "@deephaven/chart": "file:../chart",

packages/code-studio/src/AppRoot.tsx

@@ -3,6 +3,7 @@ import { Provider } from 'react-redux';
 import { MonacoUtils } from '@deephaven/console';
 import { store } from '@deephaven/redux';
 import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import { CreateThemeContext, ThemeProvider } from '@deephaven/components';
 import AppRouter from './main/AppRouter';
 import DownloadServiceWorkerUtils from './DownloadServiceWorkerUtils';
 
@@ -16,9 +17,13 @@ export function AppRoot() {
  window['__react-beautiful-dnd-disable-dev-warnings'] = true;
 
  return (
- <Provider store={store}>
- <AppRouter />
- </Provider>
+ <CreateThemeContext>
+ <ThemeProvider>
+ <Provider store={store}>
+ <AppRouter />
+ </Provider>
+ </ThemeProvider>
+ </CreateThemeContext>
  );
 }
 

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

@@ -182,7 +182,7 @@ $nav-space: 4px; // give a gap around some buttons for focus area that are in na
  flex-shrink: 0;
  background-image: linear-gradient(
  270deg,
- rgba($background, 0) 0%,
+ transparent 0%,
  $background $tab-control-gradient-width
  );
  background-clip: content-box;
@@ -199,7 +199,7 @@ $nav-space: 4px; // give a gap around some buttons for focus area that are in na
  .tab-controls-forward {
  background-image: linear-gradient(
  90deg,
- rgba($background, 0) 0%,
+ transparent 0%,
  $background $tab-control-gradient-width
  );
  background-clip: content-box;

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

@@ -2,7 +2,7 @@
 
 $widget-list-color: $gray-200;
 $widget-list-hover-color: $foreground;
-$widget-list-background-hover-color: $primary;
+$widget-list-background-hover-color: $list-hover;
 
 $widget-list-owner-color: $gray-400;
 $widget-list-owner-hover-color: $gray-200;

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

@@ -15,8 +15,7 @@ $settings-menu-rule-border: $gray-400;
 $settings-menu-rule-focused-border: $primary;
 
 $focus-over-primary-color: $foreground;
-$input-btn-focus-box-shadow-over-primary: 0 0 0 0.2rem
- rgba($focus-over-primary-color, 0.35);
+$input-btn-focus-box-shadow-over-primary: 0 0 0 0.2rem $foreground-opacity-30;
 
 $settings-menu-z-index: $zindex-modal;
 
@@ -74,22 +73,22 @@ $settings-menu-z-index: $zindex-modal;
 
  &:focus {
  &::after {
- background: rgba($focus-over-primary-color, $focus-bg-transparency);
+ background: $foreground-opacity-15;
  border: 1px solid $focus-over-primary-color;
  box-shadow: $input-btn-focus-box-shadow-over-primary;
  }
  }
 
  &:hover {
  &::after {
- background: rgba($focus-over-primary-color, $hover-bg-transparency);
+ background: $foreground-opacity-10;
  }
  }
 
  &:active {
  &::after {
  content: '';
- background: rgba($focus-over-primary-color, $active-bg-transparency);
+ background: $foreground-opacity-20;
  }
  }
  }
@@ -136,18 +135,18 @@ $settings-menu-z-index: $zindex-modal;
  padding: 0 $spacer-1;
 
  &:focus {
- background: rgba($focus-over-primary-color, $focus-bg-transparency);
+ background: $foreground-opacity-15;
  border: 1px solid $focus-over-primary-color;
  box-shadow: $input-btn-focus-box-shadow-over-primary;
  }
 
  &:hover {
- background: rgba($focus-over-primary-color, $hover-bg-transparency);
+ background: $foreground-opacity-10;
  }
 
  &:active {
  content: '';
- background: rgba($focus-over-primary-color, $active-bg-transparency);
+ background: $foreground-opacity-20;
  }
  }
  }

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

@@ -8,6 +8,7 @@ import {
  vsLayers,
  dhUserIncognito,
  dhUser,
+ vsPaintcan,
 } from '@deephaven/icons';
 import { Button, CopyButton, Tooltip } from '@deephaven/components';
 import { ServerConfigValues, User } from '@deephaven/redux';
@@ -24,6 +25,7 @@ import ShortcutSectionContent from './ShortcutsSectionContent';
 import { exportLogs } from '../log/LogExport';
 import './SettingsMenu.scss';
 import ColumnSpecificSectionContent from './ColumnSpecificSectionContent';
+import ThemeSectionContent from './ThemeSectionContent';
 
 interface SettingsMenuProps {
  serverConfigValues: ServerConfigValues;
@@ -43,6 +45,8 @@ export class SettingsMenu extends Component<
  onDone: (): void => undefined,
  };
 
+ static THEME_SECTION_KEY = 'SettingsMenu.theme';
+
  static FORMATTING_SECTION_KEY = 'SettingsMenu.formatting';
 
  static COLUMN_SPECIFIC_SECTION_KEY = 'SettingsMenu.columnFormatting';
@@ -232,6 +236,24 @@ export class SettingsMenu extends Component<
  <ColumnSpecificSectionContent scrollTo={this.handleScrollTo} />
  </SettingsMenuSection>
 
+ <SettingsMenuSection
+ sectionKey={SettingsMenu.THEME_SECTION_KEY}
+ isExpanded={this.isSectionExpanded(SettingsMenu.THEME_SECTION_KEY)}
+ title={
+ <>
+ <FontAwesomeIcon
+ icon={vsPaintcan}
+ transform="grow-4"
+ className="mr-2"
+ />
+ Theme
+ </>
+ }
+ onToggle={this.handleSectionToggle}
+ >
+ <ThemeSectionContent />
+ </SettingsMenuSection>
+
  <SettingsMenuSection
  sectionKey={SettingsMenu.SHORTCUT_SECTION_KEY}
  isExpanded={this.isSectionExpanded(

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Item, Picker } from '@adobe/react-spectrum';
+import { useTheme, ThemeContextType } from '@deephaven/components';
+
+function ThemeSectionContent(): React.ReactElement {
+ const { colorScheme, setColorScheme } = useTheme();
+
+ return (
+ <Picker
+ label="Pick a color scheme"
+ items={[
+ { id: 'light', name: 'Light' },
+ { id: 'dark', name: 'Dark' },
+ ]}
+ selectedKey={colorScheme}
+ onSelectionChange={selected =>
+ setColorScheme(selected as ThemeContextType['colorScheme'])
+ }
+ >
+ {item => <Item key={item.id}>{item.name}</Item>}
+ </Picker>
+ );
+}
+
+export default ThemeSectionContent;

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

@@ -1,14 +1,14 @@
 import React, { Component, ReactElement } from 'react';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ButtonOld, SocketedButton } from '@deephaven/components';
+import { ButtonOld, Button, SocketedButton } from '@deephaven/components';
 import { dhTruck } from '@deephaven/icons';
 
 interface ButtonsState {
  toggle: boolean;
 }
 class Buttons extends Component<Record<string, never>, ButtonsState> {
- static renderButtonBrand(type: string, brand: string): ReactElement {
+ static renderButtonOldBrand(type: string, brand: string): ReactElement {
  const className = type.length ? `btn-${type}-${brand}` : `btn-${brand}`;
  return (
  <ButtonOld
@@ -21,9 +21,9 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
  );
  }
 
- static renderButtons(type: string): ReactElement {
- const brands = ['primary', 'secondary', 'success', 'info', 'danger'].map(
- (brand: string) => Buttons.renderButtonBrand(type, brand)
+ static renderButtonOlds(type: string): ReactElement {
+ const brands = ['primary', 'secondary', 'success', 'danger'].map(
+ (brand: string) => Buttons.renderButtonOldBrand(type, brand)
  );
 
  return (
@@ -70,6 +70,25 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
  );
  }
 
+ static renderButtons(): ReactElement {
+ return (
+ <div style={{ padding: '1rem 0' }}>
+ <h5>Buttons</h5>
+ <div style={{ display: 'flex', gap: '1rem' }}>
+ <Button kind="primary">primary</Button>
+ <Button kind="secondary">secondary</Button>
+ <Button kind="success">success</Button>
+ <Button kind="danger">danger</Button>
+ <Button kind="tertiary">tertiary</Button>
+ <Button kind="inline">inline</Button>
+ <Button tooltip={"I'm a tooltip!"} kind="inline" icon={dhTruck} />
+ <Button tooltip={"I'm a tooltip!"} kind="ghost" icon={dhTruck} />
+ <Button kind="ghost">ghost</Button>
+ </div>
+ </div>
+ );
+ }
+
  constructor(props: Record<string, never>) {
  super(props);
 
@@ -121,7 +140,10 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
  }
 
  render(): React.ReactElement {
- const buttons = ['', 'outline'].map(type => Buttons.renderButtons(type));
+ const buttons = Buttons.renderButtons();
+ const oldButtons = ['', 'outline'].map(type =>
+ Buttons.renderButtonOlds(type)
+ );
  const inlineButtons = this.renderInlineButtons();
  const socketedButtons = Buttons.renderSocketedButtons();
 
@@ -130,6 +152,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
  <h2 className="ui-title">Buttons</h2>
  <div style={{ padding: '1rem 0' }}>
  {buttons}
+ {oldButtons}
  {inlineButtons}
  {socketedButtons}
  </div>

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

@@ -65,15 +65,15 @@ function Colors(): React.ReactElement {
  <pre>
  {`
 // as semantic colours
-$primary: $interfaceblue;
-$secondary: $gray-600;
-$content-bg: $interfacegray;
-$foreground: $interfacewhite;
-$background: $interfaceblack;
-$success: $green;
-$info: $yellow;
-$warning: $orange;
-$danger: $red;
+$primary
+$secondary
+$content-bg
+$foreground
+$background
+$success
+$info
+$warning
+$danger
 `}
  </pre>
  </div>

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

@@ -5,7 +5,9 @@ import Constants from './StyleConstants';
 function Editors(): React.ReactElement {
  return (
  <div>
- <h2 className="ui-title">Editor</h2>
+ <h2 className="ui-title" id="monaco">
+ Editor
+ </h2>
  <h5 className="sub-title">Python</h5>
  <div style={{ height: 400, position: 'relative' }}>
  <Editor