feat: Theming - Bootstrap (#1603)

- Updated bootstrap styles to pull from theme variables and added some mixin overrides > NOTE I copy / pasted all of the original Bootstrap mixins (`packages/components/scss/bootstrap_override_*` in their own commit to make the diff easier for customizations I made. Should be able to see the diff here: https://github.com/bmingles/web-client-ui/compare/7ce4875ef065075c920f2e70b3462a77215b6d5e..bmingles:1540-theming-bootstrap BREAKING CHANGE: Bootstrap color variables are now predominantly hsl based. SCSS will need to be updated accordingly. Theme providers are needed to load themes.
deephaven · Dec 8, 2023 · 88bcae0 · 88bcae0
1 parent 1e71550
commit 88bcae0
Show file tree

Hide file tree

Showing 301 changed files with 1,679 additions and 645 deletions.
diff --git a/packages/auth-plugins/src/AuthPluginPsk.test.tsx b/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>
   );
 }

diff --git a/packages/auth-plugins/src/Login.scss b/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;
     }
   }

diff --git a/packages/auth-plugins/src/LoginForm.scss b/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 {

diff --git a/packages/chart/src/Chart.scss b/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;
           }
         }
       }

diff --git a/packages/code-studio/src/main/AppMainContainer.scss b/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;

diff --git a/packages/code-studio/src/settings/SettingsMenu.scss b/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);
       }
     }
   }

diff --git a/packages/code-studio/src/styleguide/Alerts.tsx b/packages/code-studio/src/styleguide/Alerts.tsx
diff --git a/packages/code-studio/src/styleguide/Buttons.tsx b/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