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