feat: Theming - Bootstrap

packages/auth-plugins/src/AuthPluginPsk.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Cookies from 'js-cookie';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '@deephaven/components';
 import { ApiContext, ClientContext } from '@deephaven/jsapi-bootstrap';
 import { dh } from '@deephaven/jsapi-shim';
 import type { CoreClient } from '@deephaven/jsapi-types';
@@ -47,11 +48,13 @@ function renderComponent(
 ) {
  return render(
  <ApiContext.Provider value={dh}>
- <ClientContext.Provider value={client}>
- <AuthPluginPsk.Component authConfigValues={authConfigValues}>
- {mockChild}
- </AuthPluginPsk.Component>
- </ClientContext.Provider>
+ <ThemeProvider themes={[]}>
+ <ClientContext.Provider value={client}>
+ <AuthPluginPsk.Component authConfigValues={authConfigValues}>
+ {mockChild}
+ </AuthPluginPsk.Component>
+ </ClientContext.Provider>
+ </ThemeProvider>
  </ApiContext.Provider>
  );
 }

packages/auth-plugins/src/Login.scss

@@ -2,8 +2,6 @@
 
 $login-box-width: 605px;
 $login-box-min-height: 310px;
-$logo-background-color: $gray-100;
-$footer-color: $gray-300;
 $login-box-animation-scale: 0.8;
 
 .login-container {
@@ -25,7 +23,7 @@ $login-box-animation-scale: 0.8;
  animation: $transition-long ease-out 0s 1 forwards animateLoginBox;
 
  .logo {
- background-color: $logo-background-color;
+ background-color: var(--dh-color-login-logo-bg);
  border-radius: $border-radius 0 0 $border-radius;
  display: flex;
  justify-content: center;
@@ -48,7 +46,7 @@ $login-box-animation-scale: 0.8;
  margin: 0;
  transform: translateY(100%);
  text-align: center;
- color: $footer-color;
+ color: var(--dh-color-login-footer-fg);
  font-size: 12px;
  }
  }

packages/auth-plugins/src/LoginForm.scss

@@ -6,7 +6,7 @@ $login-box-min-height: 310px;
 .login-form {
  max-width: $login-box-width * 0.5;
  min-height: $login-box-min-height;
- background: $gray-700;
+ background: var(--dh-color-login-form-bg);
  border-radius: 0 $border-radius $border-radius 0;
  display: flex;
  flex-grow: 1;
@@ -37,7 +37,7 @@ $login-box-min-height: 310px;
  }
 
  .status-message {
- color: $gray-400;
+ color: var(--dh-color-login-status-message);
  }
 
  .error-message {

packages/chart/src/Chart.scss

@@ -1,10 +1,7 @@
 @import '@deephaven/components/scss/custom.scss';
 
-$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-notifier {
  margin-right: $plotly-notifier-margin-right;
@@ -17,7 +14,7 @@ $plotly-color-btn-active: rgba(255, 255, 255, 70%);
  color: $foreground !important;
  border: 0 !important;
  border-radius: $plotly-notifier-note-border-radius !important;
- background: $plotly-notifier-note-bg !important;
+ background: var(--dh-color-plotly-notifier-note-bg) !important;
  overflow-wrap: normal !important;
  hyphens: unset !important;
  margin-bottom: $spacer-2 !important;
@@ -33,7 +30,7 @@ $plotly-color-btn-active: rgba(255, 255, 255, 70%);
 }
 
 .chart-wrapper {
- background: $chart-bg;
+ background: var(--dh-color-chart-bg);
 
  .plot-container {
  .cartesianlayer text {
@@ -46,34 +43,34 @@ $plotly-color-btn-active: rgba(255, 255, 255, 70%);
  }
 
  .axistext path {
- fill: $gray-600 !important;
- box-shadow: 4px 4px $black;
+ fill: var(--dh-color-plotly-axis-text) !important;
+ box-shadow: 4px 4px var(--dh-color-black);
  }
 
  .zoomlayer .zoombox {
- fill: rgba(0, 0, 0, 50%) !important;
+ fill: var(--dh-color-plotly-zoombox) !important;
  }
 
  .zoomlayer .zoombox-corners {
- fill: $white;
- stroke: $gray-900;
+ fill: var(--dh-color-plotly-zoombox-corners-fill);
+ stroke: var(--dh-color-plotly-zoombox-corners-stroke);
  }
  }
 
  // Tooltip arrow
  .js-plotly-plot .plotly [data-title]::before {
- border-color: transparent transparent $tooltip-bg;
+ border-color: transparent transparent var(--dh-color-tooltip-bg);
 
  // Make the arrow appear above the box shadow of the body
  z-index: 1002;
  }
  // Tooltip body
  .js-plotly-plot .plotly [data-title]::after {
  border-radius: $border-radius;
- background: $tooltip-bg;
- color: $tooltip-color;
+ background: var(--dh-color-tooltip-bg);
+ color: var(--dh-color-tooltip-fg);
  padding: $tooltip-padding-y $tooltip-padding-x;
- box-shadow: $tooltip-box-shadow;
+ box-shadow: var(--dh-color-tooltip-box-shadow);
 
  // Already set by plotly, just setting again in case it changes in the future so body shadow appears under arrow tip
  z-index: 1001;
@@ -93,15 +90,15 @@ $plotly-color-btn-active: rgba(255, 255, 255, 70%);
  &[data-attr='fill-active'] {
  svg {
  path {
- fill: $plotly-color-btn-active !important;
+ fill: var(--dh-color-plotly-modebar-btn-active) !important;
  }
  }
  }
 
  &[data-attr='fill-warning'] {
  svg {
  path {
- fill: $warning !important;
+ fill: var(--dh-color-plotly-modebar-btn-warning) !important;
  }
  }
  }

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%,
+ hsla(var(--dh-color-bg-hsl), 0) 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%,
+ hsla(var(--dh-color-bg-hsl), 0) 0%,
  $background $tab-control-gradient-width
  );
  background-clip: content-box;

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

@@ -5,18 +5,18 @@ $settings-menu-width: 400px;
 $settings-menu-header-min-height: 60px;
 $settings-menu-padding: $spacer-3;
 $settings-menu-header-user-image-size: 40px;
-$settings-menu-header-color: $foreground;
+$settings-menu-header-color: var(--dh-color-fg);
 
-$settings-menu-collapse-trigger-color: $foreground;
+$settings-menu-collapse-trigger-color: var(--dh-color-fg);
 
 $settings-menu-rule-bg: $gray-600;
 $settings-menu-rule-button-color: $gray-300;
 $settings-menu-rule-border: $gray-400;
 $settings-menu-rule-focused-border: $primary;
 
-$focus-over-primary-color: $foreground;
+$focus-over-primary-color: var(--dh-color-fg);
 $input-btn-focus-box-shadow-over-primary: 0 0 0 0.2rem
- rgba($focus-over-primary-color, 0.35);
+ hsla(var(--dh-color-fg-hsl), 0.35);
 
 $settings-menu-z-index: $zindex-modal;
 
@@ -64,7 +64,7 @@ $settings-menu-z-index: $zindex-modal;
  color: $settings-menu-header-color;
 
  .btn-close-settings-menu {
- color: $foreground;
+ color: var(--dh-color-fg);
  font-size: 18px;
  // we want the close button to occupy at least
  // as much space as the triggering button below
@@ -74,22 +74,22 @@ $settings-menu-z-index: $zindex-modal;
 
  &:focus {
  &::after {
- background: rgba($focus-over-primary-color, $focus-bg-transparency);
- border: 1px solid $focus-over-primary-color;
+ background: hsla(var(--dh-color-fg-hsl), $focus-bg-transparency);
+ border: 1px solid var(--dh-color-fg);
  box-shadow: $input-btn-focus-box-shadow-over-primary;
  }
  }
 
  &:hover {
  &::after {
- background: rgba($focus-over-primary-color, $hover-bg-transparency);
+ background: hsla(var(--dh-color-fg-hsl), $hover-bg-transparency);
  }
  }
 
  &:active {
  &::after {
  content: '';
- background: rgba($focus-over-primary-color, $active-bg-transparency);
+ background: hsla(var(--dh-color-fg-hsl), $active-bg-transparency);
  }
  }
  }
@@ -136,18 +136,18 @@ $settings-menu-z-index: $zindex-modal;
  padding: 0 $spacer-1;
 
  &:focus {
- background: rgba($focus-over-primary-color, $focus-bg-transparency);
- border: 1px solid $focus-over-primary-color;
+ background: hsla(var(--dh-color-fg-hsl), $focus-bg-transparency);
+ border: 1px solid var(--dh-color-fg);
  box-shadow: $input-btn-focus-box-shadow-over-primary;
  }
 
  &:hover {
- background: rgba($focus-over-primary-color, $hover-bg-transparency);
+ background: hsla(var(--dh-color-fg-hsl), $hover-bg-transparency);
  }
 
  &:active {
  content: '';
- background: rgba($focus-over-primary-color, $active-bg-transparency);
+ background: hsla(var(--dh-color-fg-hsl), $active-bg-transparency);
  }
  }
  }

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

@@ -22,9 +22,17 @@ 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)
- );
+ const brands = [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'warning',
+ 'danger',
+ // Temporarily putting this at end of list for easier regression comparison.
+ // Once the colors are finalized, this should semantically go between
+ // success and warning
+ 'info',
+ ].map((brand: string) => Buttons.renderButtonBrand(type, brand));
 
  return (
  <div