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

Author: dsmmcken

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);

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,

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) {

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']",

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;

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);

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 {

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',

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>
             ))}

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>