feat: theming tweaks (#1727)

Miscellaneous light and dark theme tweaks after using it for awhile. Mostly things that were either improperly styled or issues for enterprise. - light disabled color for secondary buttons - adjust subdued-content-bg defninition - adjusted dark surface color - tweaked light theme to be grayer - added subdued-content-bg variable - fix button alignment - style tweaks - minor color fixes - style editor in conditional formating style fixes - fix console button disabled object styling - Numerous color adjustments - fix malformed hsl variable - adjust time slider styling - fix HCM styling - fix styling of custom time select - item-list styling - add fallback colors for a few more things, so that error message before api works - Buttons can use gap instead of margin on icons now that they are flex. Much easier. - whitespace change - expose is modified styling to styleguide timeslider for checking - styleguide icon button styling - add some spectrum stuff to styleguide for easier comparison - purge primary-light - schotcut settings rror message styling - settings menu user image and logo button adjust - widget list hover color - add legend color
deephaven · Jan 16, 2024 · f919a7e · f919a7e
1 parent ed41c42
commit f919a7e
Show file tree

Hide file tree

Showing 366 changed files with 300 additions and 185 deletions.
diff --git a/packages/chart/src/ChartTheme.module.scss b/packages/chart/src/ChartTheme.module.scss
@@ -5,6 +5,7 @@
   paper-bgcolor: var(--dh-color-chart-bg);
   plot-bgcolor: var(--dh-color-chart-plot-bg);
   title-color: var(--dh-color-chart-title);
+  legend-color: var(--dh-color-chart-legend-color);
   colorway: var(--dh-color-chart-colorway);
   gridcolor: var(--dh-color-chart-grid);
   linecolor: var(--dh-color-chart-axis-line);

diff --git a/packages/chart/src/ChartTheme.ts b/packages/chart/src/ChartTheme.ts
@@ -12,6 +12,7 @@ export interface ChartTheme {
   paper_bgcolor: string;
   plot_bgcolor: string;
   title_color: string;
+  legend_color: string;
   colorway: string;
   gridcolor: string;
   linecolor: string;
@@ -48,6 +49,7 @@ export function defaultChartTheme(): Readonly<ChartTheme> {
     paper_bgcolor: chartTheme['paper-bgcolor'],
     plot_bgcolor: chartTheme['plot-bgcolor'],
     title_color: chartTheme['title-color'],
+    legend_color: chartTheme['legend-color'],
     colorway: chartTheme.colorway,
     gridcolor: chartTheme.gridcolor,
     linecolor: chartTheme.linecolor,

diff --git a/packages/chart/src/ChartUtils.ts b/packages/chart/src/ChartUtils.ts
@@ -1856,6 +1856,11 @@ class ChartUtils {
           color: theme.title_color,
         },
       },
+      legend: {
+        font: {
+          color: theme.legend_color,
+        },
+      },
     };
 
     if (type === dh.plot.AxisType.X) {

diff --git a/packages/chart/src/__snapshots__/ChartTheme.test.ts.snap b/packages/chart/src/__snapshots__/ChartTheme.test.ts.snap
@@ -8,6 +8,7 @@ exports[`defaultChartTheme should create the default chart theme 1`] = `
   "error_band_fill_color": "chartTheme['error-band-fill-color']",
   "error_band_line_color": "chartTheme['error-band-line-color']",
   "gridcolor": "chartTheme['gridcolor']",
+  "legend_color": "chartTheme['legend-color']",
   "line_color": "chartTheme['line-color']",
   "linecolor": "chartTheme['linecolor']",
   "ohlc_decreasing": "chartTheme['ohlc-decreasing']",

diff --git a/packages/code-studio/src/main/WidgetList.scss b/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: var(--dh-color-highlight-hover);
 
 $widget-list-owner-color: $gray-400;
 $widget-list-owner-hover-color: $gray-200;

diff --git a/packages/code-studio/src/settings/SettingsMenu.scss b/packages/code-studio/src/settings/SettingsMenu.scss
@@ -8,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-800;
+$settings-menu-rule-bg: var(--dh-color-gray-400);
 $settings-menu-rule-button-color: $gray-300;
 $settings-menu-rule-border: $gray-400;
 $settings-menu-rule-focused-border: $primary;
@@ -107,8 +107,13 @@ $settings-menu-z-index: $zindex-modal;
       height: $settings-menu-header-user-image-size;
       width: $settings-menu-header-user-image-size;
       margin: $spacer $spacer-2 $spacer $spacer;
-      background: $gray-400;
+      background: var(--dh-color-accent-1100);
       border-radius: $border-radius;
+
+      svg {
+        color: var(--dh-color-accent-contrast);
+      }
+
       img {
         height: $settings-menu-header-user-image-size;
         width: $settings-menu-header-user-image-size;
@@ -136,6 +141,7 @@ $settings-menu-z-index: $zindex-modal;
       text-decoration: underline;
       font-size: smaller;
       padding: 0 $spacer-1;
+      height: 28px;
 
       &:focus {
         background: hsla(var(--dh-color-fg-hsl), $focus-bg-transparency);

diff --git a/packages/code-studio/src/settings/ShortcutItem.scss b/packages/code-studio/src/settings/ShortcutItem.scss
@@ -34,12 +34,9 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 0 0.5rem;
-  border-radius: $border-radius;
 
   &.is-invalid {
-    color: $danger;
-    background-color: $toast-error-bg;
+    color: var(--dh-color-form-control-error);
   }
 
   .shortcut-item-message {

diff --git a/packages/code-studio/src/styleguide/Colors.tsx b/packages/code-studio/src/styleguide/Colors.tsx
@@ -47,7 +47,6 @@ function Colors(): React.ReactElement {
     'foreground',
     'primary',
     'primary-dark',
-    'primary-light',
     'secondary',
     'secondary-hover',
     'success',

diff --git a/packages/code-studio/src/styleguide/SpectrumComparison.tsx b/packages/code-studio/src/styleguide/SpectrumComparison.tsx
@@ -8,11 +8,13 @@ import {
   ComboBox,
   Flex,
   Grid,
+  Icon,
   Item,
   Picker,
   Radio,
   RadioGroup,
   SpectrumButtonProps,
+  Text,
   TextField,
   View,
 } from '@adobe/react-spectrum';
@@ -25,6 +27,8 @@ import {
   Select,
 } from '@deephaven/components';
 import { EMPTY_FUNCTION } from '@deephaven/utils';
+import { vsPlay } from '@deephaven/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   SAMPLE_SECTION_E2E_IGNORE,
   SPECTRUM_COMPARISON_SAMPLES_ID,
@@ -68,18 +72,31 @@ export function SpectrumComparison(): JSX.Element {
       <Flex gap={20} wrap>
         <View>
           <h3>Buttons - Filled</h3>
-          <Grid gap={20} columns="repeat(2, 120px)" autoRows="40x">
+          <Grid
+            gap={20}
+            columns="repeat(2, 120px)"
+            autoRows="40x"
+            justifyItems="start"
+            alignItems="start"
+          >
             <label>Bootstrap</label>
             <label>Spectrum</label>
 
             {buttons.map(([level, variant]) => (
               <Fragment key={level}>
-                <BootstrapButtonOld onClick={EMPTY_FUNCTION} kind={level}>
+                <BootstrapButtonOld
+                  onClick={EMPTY_FUNCTION}
+                  kind={level}
+                  icon={vsPlay}
+                >
                   Button
                 </BootstrapButtonOld>
 
                 <Button variant={variant} style="fill">
-                  Button
+                  <Icon>
+                    <FontAwesomeIcon icon={vsPlay} />
+                  </Icon>
+                  <Text>Button</Text>
                 </Button>
               </Fragment>
             ))}

diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
@@ -35,6 +35,7 @@ import {
   Divider,
   ButtonGroup,
   Flex,
+  ListView,
 } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhTruck, vsEmptyWindow } from '@deephaven/icons';
@@ -115,7 +116,7 @@ function ButtonsSample(): JSX.Element {
         autoFlow="column"
         columnGap="size-250"
         rowGap="size-150"
-        columns={repeat(4, 'size-2000')}
+        columns={repeat(4, minmax(0, 'size-2000'))}
         rows={repeat(8, 'size-400')}
       >
         <label>Button style=&quot;outline&quot;</label>
@@ -206,7 +207,7 @@ function ContextualHelpSample(): JSX.Element {
 function FormsSample(): JSX.Element {
   return (
     <Form>
-      <Grid gap={20} columns={repeat('auto-fit', '210px')}>
+      <Grid gap={20} columns={repeat('auto-fit', '210px')} alignItems="end">
         <TextField label="Text Field" />
         <ComboBox label="Combobox" menuTrigger="focus" defaultSelectedKey="two">
           <Item key="one">One</Item>
@@ -236,6 +237,18 @@ function IllustratedMessageSample(): JSX.Element {
 function TableViewSample(): JSX.Element {
   return (
     <>
+      <label id="table-view-sample">List View</label>
+      <ListView
+        selectionMode="multiple"
+        maxWidth="size-6000"
+        marginBottom="size-200"
+      >
+        <Item>One</Item>
+        <Item>Two</Item>
+        <Item>Three</Item>
+        <Item>Four</Item>
+      </ListView>
+
       <label id="table-view-sample">Table View</label>
       <TableView aria-labelledby="table-view-sample" selectionMode="multiple">
         <TableHeader>

diff --git a/packages/code-studio/src/styleguide/StyleGuide.scss b/packages/code-studio/src/styleguide/StyleGuide.scss
@@ -178,6 +178,11 @@ h5.sub-title {
     background-color: transparent;
     height: auto;
     padding: $spacer-2 2px;
+
+    .svg-inline--fa {
+      align-self: center;
+    }
+
     &:focus {
       border-color: $primary;
     }

diff --git a/packages/code-studio/src/styleguide/TimeSliderInputs.tsx b/packages/code-studio/src/styleguide/TimeSliderInputs.tsx
@@ -5,6 +5,8 @@ import { TimeSlider } from '@deephaven/components';
 import { sampleSectionIdAndClasses } from './utils';
 
 interface TimeSliderInputsState {
+  initialStartTime: number;
+  initialEndTime: number;
   startTime: number;
   endTime: number;
 }
@@ -18,6 +20,8 @@ class TimeSliderInputs extends PureComponent<
 
     this.handleSliderChange = this.handleSliderChange.bind(this);
     this.state = {
+      initialStartTime: 24 * 60 * 60 * 0.25,
+      initialEndTime: 24 * 60 * 60 * 0.75,
       startTime: 24 * 60 * 60 * 0.25, // example start and end times
       endTime: 24 * 60 * 60 * 0.75, // example start and end times
     };
@@ -30,7 +34,9 @@ class TimeSliderInputs extends PureComponent<
   }
 
   render(): React.ReactElement {
-    const { startTime, endTime } = this.state;
+    const { startTime, endTime, initialStartTime, initialEndTime } = this.state;
+    const isStartModified = startTime !== initialStartTime;
+    const isEndModified = endTime !== initialEndTime;
     return (
       <div
         {...sampleSectionIdAndClasses('time-slider-inputs', [
@@ -41,10 +47,16 @@ class TimeSliderInputs extends PureComponent<
         <TimeSlider
           startTime={startTime}
           endTime={endTime}
+          isStartModified={isStartModified}
+          isEndModified={isEndModified}
           onChange={this.handleSliderChange}
         />
-        <p>StartTime: {TimeUtils.formatTime(startTime)}</p>
-        <p>EndTime: {TimeUtils.formatTime(endTime)}</p>
+        <p style={isStartModified ? { color: 'var(--dh-color-modified)' } : {}}>
+          StartTime: {TimeUtils.formatTime(startTime)}
+        </p>
+        <p style={isEndModified ? { color: 'var(--dh-color-modified)' } : {}}>
+          EndTime: {TimeUtils.formatTime(endTime)}
+        </p>
       </div>
     );
   }

diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss
@@ -129,8 +129,13 @@ button:focus {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-top: 3px;
-  padding-bottom: 5px;
+  // match spectrum button custom padding
+  padding: 4px 14px 3px 14px;
+  gap: 6px;
+
+  .svg-inline--fa {
+    padding-bottom: 2px;
+  }
 }
 
 .btn-sm {
@@ -162,8 +167,8 @@ span.btn-disabled-wrapper {
   min-width: unset;
   padding: $spacer-1;
 
-  svg {
-    margin-right: $spacer-1;
+  .svg-inline--fa {
+    align-self: center;
   }
 
   &:not(.btn-link-icon) {
@@ -214,9 +219,6 @@ span.btn-disabled-wrapper {
 
 .btn-spinner {
   padding: $btn-padding-y 1rem;
-  .fa-layers {
-    margin-right: 0.5rem;
-  }
 }
 
 .btn-link.no-underline,
@@ -235,10 +237,6 @@ span.btn-disabled-wrapper {
   padding-left: $spacer-1;
   padding-right: $spacer-1;
 
-  svg {
-    margin-right: 0;
-  }
-
   &::after {
     content: '';
     box-sizing: border-box;
@@ -339,6 +337,10 @@ span.btn-disabled-wrapper {
   color: var(--dh-color-action-fg);
   font-weight: $font-weight-normal;
 
+  .svg-inline--fa {
+    align-self: center;
+  }
+
   &.active {
     border-color: var(--dh-color-action-active-border);
     background: var(--dh-color-action-active-bg);

diff --git a/packages/components/scss/bootstrap_overrides.scss b/packages/components/scss/bootstrap_overrides.scss
@@ -9,6 +9,9 @@ $green: var(--dh-color-visual-green);
 $blue: var(--dh-color-visual-blue);
 $purple: var(--dh-color-visual-purple);
 
+// Fallback colors are used if theme isn't loaded
+// this is required for error messages if the API doesn't load
+
 //Define our Gray scale
 $gray-100: var(--dh-color-gray-900, #fcfcfa);
 $gray-200: var(--dh-color-gray-800);
@@ -31,8 +34,8 @@ $interfaceblue: var(--dh-color-accent-bg);
 $interfacewhite: $white;
 $interfaceblack: $black;
 $content-bg: var(--dh-color-content-bg, #2d2a2e);
-$background: var(--dh-color-bg);
-$foreground: var(--dh-color-fg);
+$background: var(--dh-color-bg, #1a171a);
+$foreground: var(--dh-color-fg, #f0f0ee);
 
 // Extend default Bootstrap $grays map
 $grays-custom: (
@@ -93,7 +96,6 @@ $body-color: $interfacewhite;
 $primary: var(--dh-color-accent-bg);
 $primary-hover: var(--dh-color-accent-hover-bg);
 $primary-dark: var(--dh-color-accent-down-bg);
-$primary-light: var(--dh-color-accent-1100);
 $secondary: var(--dh-color-neutral-bg);
 $secondary-hover: var(--dh-color-neutral-hover-bg);
 $success: $green;
@@ -112,7 +114,6 @@ $mid: var(--dh-color-gray-mid);
 
 $semantic-colors: (
   'primary-hover': $primary-hover,
-  'primary-light': $primary-light,
   'primary-dark': $primary-dark,
   'mid': $mid,
   'content-bg': $interfacegray,
@@ -180,9 +181,10 @@ $input-btn-focus-color: hsla(var(--dh-color-accent-hsl), 0.35);
 $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
 $input-btn-line-height: 1.3;
 // Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).
-// The padding-y value has to be in rem to match units. Using 0.4214rem with 1.3
-// line height gets us to 31.99px vs Spectrum's 32px.
-$input-btn-padding-y: 0.4214rem;
+// The padding-y value has to be in rem to match units as it is a SASS calc.
+// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.
+/* stylelint-disable-next-line number-max-precision */
+$input-btn-padding-y: 0.42145rem;
 
 //checkbox
 $custom-control-indicator-bg: var(--dh-color-input-bg);
@@ -241,7 +243,7 @@ $tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);
 $dropdown-bg: $gray-600;
 $dropdown-link-color: $foreground;
 $dropdown-link-hover-color: $foreground;
-$dropdown-link-hover-bg: $primary;
+$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);
 $dropdown-divider-bg: $gray-700;
 
 //context menus