From b755aeab626e06f60e077afd65ee8abcae2efcb2 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:14:43 -0500 Subject: [PATCH 01/40] add lengend color --- packages/chart/src/ChartTheme.module.scss | 1 + packages/chart/src/ChartTheme.ts | 2 ++ packages/chart/src/ChartUtils.ts | 5 +++++ packages/chart/src/__snapshots__/ChartTheme.test.ts.snap | 1 + 4 files changed, 9 insertions(+) diff --git a/packages/chart/src/ChartTheme.module.scss b/packages/chart/src/ChartTheme.module.scss index d483ed59dc..052b1504b7 100644 --- 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 index 816d599bb3..cfc80b7a38 100644 --- 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 { 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 index 25bb1c0df0..51e8ded1b6 100644 --- 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 index 09c0225076..a89df3cab9 100644 --- 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']", From 13ca91ba2ee26f628d493e4e417b4ac5f6f755f2 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:17:16 -0500 Subject: [PATCH 02/40] widget list hover color --- packages/code-studio/src/main/WidgetList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/code-studio/src/main/WidgetList.scss b/packages/code-studio/src/main/WidgetList.scss index e0d6281e75..96612182b7 100644 --- 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; From 68da794aa7d5702f63b0915e544749c222acbc92 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:17:42 -0500 Subject: [PATCH 03/40] settings menu user image and logo button adjust --- packages/code-studio/src/settings/SettingsMenu.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/code-studio/src/settings/SettingsMenu.scss b/packages/code-studio/src/settings/SettingsMenu.scss index ecb93a4991..424d1c225c 100644 --- a/packages/code-studio/src/settings/SettingsMenu.scss +++ b/packages/code-studio/src/settings/SettingsMenu.scss @@ -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); From c636fb3f07410f0e365bde2b469e4f8010b023f2 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:18:10 -0500 Subject: [PATCH 04/40] schotcut settings rror message styling --- packages/code-studio/src/settings/ShortcutItem.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/code-studio/src/settings/ShortcutItem.scss b/packages/code-studio/src/settings/ShortcutItem.scss index 7294f43380..250d2763d0 100644 --- 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 { From dbd655d8e7007a9ec41950be4feca87d90d9dc29 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:18:20 -0500 Subject: [PATCH 05/40] purge primary-light --- packages/code-studio/src/styleguide/Colors.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/code-studio/src/styleguide/Colors.tsx b/packages/code-studio/src/styleguide/Colors.tsx index 3d87995212..f5c3ed11f6 100644 --- 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', From 7ece3a09e324e48bb70f9ec684bcc3931809c75f Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:19:10 -0500 Subject: [PATCH 06/40] add some spectrum stuff to styleguide for easier comparison --- .../src/styleguide/SpectrumComparison.tsx | 23 ++++++++++++++++--- .../src/styleguide/SpectrumComponents.tsx | 13 +++++++++++ 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/packages/code-studio/src/styleguide/SpectrumComparison.tsx b/packages/code-studio/src/styleguide/SpectrumComparison.tsx index 454e82e8b7..89d91bf0da 100644 --- 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 {

Buttons - Filled

- + {buttons.map(([level, variant]) => ( - + Button ))} diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx index fa86461e18..10f132ed9b 100644 --- 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'; @@ -236,6 +237,18 @@ function IllustratedMessageSample(): JSX.Element { function TableViewSample(): JSX.Element { return ( <> + + + One + Two + Three + Four + + From 0710b7ad022c1618a5af3294c4f62df29c49e3d1 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:19:27 -0500 Subject: [PATCH 07/40] styleguide icon button styling --- packages/code-studio/src/styleguide/StyleGuide.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/code-studio/src/styleguide/StyleGuide.scss b/packages/code-studio/src/styleguide/StyleGuide.scss index 8bb4f6510f..e5552361ee 100644 --- 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; } From 7a4a50c84ab9d996f58b9357938ae81479f90e8c Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:20:17 -0500 Subject: [PATCH 08/40] expose is modified styling to styleguide timeslider for checking --- .../src/styleguide/TimeSliderInputs.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/code-studio/src/styleguide/TimeSliderInputs.tsx b/packages/code-studio/src/styleguide/TimeSliderInputs.tsx index 1a0cf0cab4..613961c886 100644 --- 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; } @@ -17,7 +19,10 @@ class TimeSliderInputs extends PureComponent< super(props); 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 }; @@ -31,6 +36,10 @@ class TimeSliderInputs extends PureComponent< render(): React.ReactElement { const { startTime, endTime } = this.state; + + const isStartModified = startTime !== this.state.initialStartTime; + const isEndModified = endTime !== this.state.initialEndTime; + return (
-

StartTime: {TimeUtils.formatTime(startTime)}

-

EndTime: {TimeUtils.formatTime(endTime)}

+

+ StartTime: {TimeUtils.formatTime(startTime)} +

+

+ EndTime: {TimeUtils.formatTime(endTime)} +

); } From 7a7ca07ba2915ba8749a39526caf034264ed1f9e Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:20:35 -0500 Subject: [PATCH 09/40] whitespace change --- packages/code-studio/src/styleguide/TimeSliderInputs.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/code-studio/src/styleguide/TimeSliderInputs.tsx b/packages/code-studio/src/styleguide/TimeSliderInputs.tsx index 613961c886..875f04fac3 100644 --- a/packages/code-studio/src/styleguide/TimeSliderInputs.tsx +++ b/packages/code-studio/src/styleguide/TimeSliderInputs.tsx @@ -19,7 +19,6 @@ class TimeSliderInputs extends PureComponent< super(props); this.handleSliderChange = this.handleSliderChange.bind(this); - this.state = { initialStartTime: 24 * 60 * 60 * 0.25, initialEndTime: 24 * 60 * 60 * 0.75, @@ -36,10 +35,8 @@ class TimeSliderInputs extends PureComponent< render(): React.ReactElement { const { startTime, endTime } = this.state; - const isStartModified = startTime !== this.state.initialStartTime; const isEndModified = endTime !== this.state.initialEndTime; - return (
Date: Thu, 11 Jan 2024 14:21:53 -0500 Subject: [PATCH 10/40] Buttons can use gap instead of margin on icons now that they are flex. Much easier. --- packages/components/scss/BaseStyleSheet.scss | 20 +++++++------ .../components/scss/bootstrap_overrides.scss | 6 ++-- packages/components/src/Button.tsx | 28 ++----------------- 3 files changed, 16 insertions(+), 38 deletions(-) diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss index a476d770d1..c2081ddada 100644 --- a/packages/components/scss/BaseStyleSheet.scss +++ b/packages/components/scss/BaseStyleSheet.scss @@ -131,6 +131,11 @@ button:focus { justify-content: center; padding-top: 3px; padding-bottom: 5px; + gap: 4px; + + .svg-inline--fa { + align-self: start; + } } .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 index 5197a84a23..5c6a4f0ddc 100644 --- a/packages/components/scss/bootstrap_overrides.scss +++ b/packages/components/scss/bootstrap_overrides.scss @@ -180,9 +180,9 @@ $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. +$input-btn-padding-y: 0.42145rem; //checkbox $custom-control-indicator-bg: var(--dh-color-input-bg); diff --git a/packages/components/src/Button.tsx b/packages/components/src/Button.tsx index 0200766e06..77907cf8af 100644 --- a/packages/components/src/Button.tsx +++ b/packages/components/src/Button.tsx @@ -123,32 +123,8 @@ const Button = React.forwardRef( ); } - let iconOnly = iconElem != null && children == null; - // Best effort backwards-compatible attempt to auto add margin to icon if text is also present - // We would need to audit our usage of Buttons to remove margins by classname to just add the margin to every icon button with children - if (iconElem != null && children != null) { - // check if react children contains a text node to a depth of 2 - // to exlude poppers/menus, but not button text nested in spans - let containsTextNode = false; - iconOnly = true; // assume icon only until we find a text node - React.Children.forEach(children, child => { - if (typeof child === 'string') { - containsTextNode = true; - } else if (React.isValidElement(child)) { - React.Children.forEach(child.props.children, grandchild => { - if (typeof grandchild === 'string') { - containsTextNode = true; - } - }); - } - }); - if (containsTextNode) { - iconOnly = false; // is not iconOnly if we found a text node - iconElem = React.cloneElement(iconElem, { - className: classNames('mr-1', iconElem.props.className), - }); - } - } + // not entirely accurate, as button can have non-visible children + const iconOnly = iconElem != null && children == null; const btnClassName = getClassName(kind, iconOnly); From 3fabc51c8f5683630cf8ff7e6842a89b6840b08f Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:22:17 -0500 Subject: [PATCH 11/40] add fallback colors for a few more things, so that error message before api works --- packages/components/scss/bootstrap_overrides.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/components/scss/bootstrap_overrides.scss b/packages/components/scss/bootstrap_overrides.scss index 5c6a4f0ddc..5819367d0e 100644 --- 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, From 0eecd8c21ca5d587bf5b3feb4f7bb36f9dcc423b Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:22:32 -0500 Subject: [PATCH 12/40] item-list sstyling --- packages/components/src/AutoCompleteInput.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/components/src/AutoCompleteInput.scss b/packages/components/src/AutoCompleteInput.scss index 4e5f092be2..eda226c7ef 100644 --- a/packages/components/src/AutoCompleteInput.scss +++ b/packages/components/src/AutoCompleteInput.scss @@ -1,9 +1,12 @@ @import '../scss/custom.scss'; $aci-option-btn-color: $foreground; -$aci-option-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg); -$aci-option-hover-bg: $dropdown-link-hover-bg; -$aci-option-hover-color: $dropdown-link-hover-color; +$aci-option-hover-bg: var(--dh-color-item-list-hover-bg); +$aci-option-keyboard-selected-bg: var(--dh-color-item-list-selected-bg); +$aci-option-keyboard-selected-hover-bg: var( + --dh-color-item-list-selected-hover-bg +); +$aci-option-hover-color: $foreground; .aci-container { flex-grow: 1; @@ -30,6 +33,9 @@ $aci-option-hover-color: $dropdown-link-hover-color; } .aci-option-btn.keyboard-active { background-color: $aci-option-keyboard-selected-bg; + &:hover { + background-color: $aci-option-keyboard-selected-hover-bg; + } } .aci-option-btn:hover { From f3f115310d1687b1fb98dd9d718186164e205f86 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:22:46 -0500 Subject: [PATCH 13/40] fix styling of cutstom time selct --- packages/components/src/CustomTimeSelect.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/components/src/CustomTimeSelect.scss b/packages/components/src/CustomTimeSelect.scss index 77efaeff64..e691372e9c 100644 --- a/packages/components/src/CustomTimeSelect.scss +++ b/packages/components/src/CustomTimeSelect.scss @@ -1,15 +1,17 @@ @import '../scss/custom.scss'; @import '../scss/util.scss'; -$cs-option-btn-color: $dropdown-link-color; -$cs-option-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg); -$cs-option-hover-bg: $dropdown-link-hover-bg; +$cs-option-btn-color: var(--dh-color-item-list-selected-fg); +$cs-option-selected-bg: var(--dh-color-item-list-selected-bg); +$cs-option-selected-hover-bg: var(--dh-color-item-list-selected-hover-bg); +$cs-option-hover-bg: var(--dh-color-item-list-hover-bg); $cs-option-hover-color: $dropdown-link-hover-color; .cs-container { flex-wrap: nowrap; .cs-dropdown .cs-btn { + color: var(--dh-color-input-fg); display: flex; flex-direction: row; align-items: center; @@ -70,7 +72,10 @@ $cs-option-hover-color: $dropdown-link-hover-color; display: block; } .cs-option-btn.keyboard-active { - background-color: $cs-option-keyboard-selected-bg; + background-color: $cs-option-selected-bg; + &:hover { + background-color: $cs-option-selected-hover-bg; + } } .cs-option-btn:hover { From 83b4b6e46c62d93564153d48e0cd982025413228 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:22:56 -0500 Subject: [PATCH 14/40] fix HCM sstyling --- .../components/src/HierarchicalCheckboxMenu.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/components/src/HierarchicalCheckboxMenu.scss b/packages/components/src/HierarchicalCheckboxMenu.scss index 26306df66a..62c2b2db81 100644 --- a/packages/components/src/HierarchicalCheckboxMenu.scss +++ b/packages/components/src/HierarchicalCheckboxMenu.scss @@ -9,7 +9,8 @@ justify-content: space-between; border-radius: $border-radius; border: $input-border-width solid $input-border-color; - background-color: $input-bg; + color: var(--dh-color-selector-fg); + background-color: var(--dh-color-selector-bg); padding: $custom-select-padding-y $custom-select-padding-x; font-weight: $font-weight-normal; @@ -19,8 +20,13 @@ margin-right: 4px; } } -.hcm-btn:hover:not(:disabled) .cs-caret { - background-color: var(--dh-color-selector-hover-fg); +.hcm-btn:hover:not(:disabled) { + border-color: var(--dh-color-input-hover-border); + color: var(--dh-color-selector-hover-fg); + background-color: var(--dh-color-selector-hover-bg); + .cs-caret { + background-color: var(--dh-color-selector-hover-fg); + } } .hcm-btn:focus { From e29c95bd8d31eb0330aa83bc20ea82be382df40a Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:23:10 -0500 Subject: [PATCH 15/40] adjust timeslider styling --- packages/components/src/TimeSlider.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/TimeSlider.scss b/packages/components/src/TimeSlider.scss index b7d7173478..cad32c6bb2 100644 --- a/packages/components/src/TimeSlider.scss +++ b/packages/components/src/TimeSlider.scss @@ -23,10 +23,14 @@ $tick-label-color: $gray-300; padding: $spacer-2; width: $popover-width; border-radius: $border-radius; - background: $gray-700; + background: var(--dh-color-surface-bg); flex-shrink: 0; text-align: center; margin: 0 1px; + + label.modified { + color: var(--dh-color-modified); + } input { padding: $input-padding-y 0; text-align: center; From 68fe5872097c6de04cb2ac9977830c6816392676 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:23:55 -0500 Subject: [PATCH 16/40] fix malformed hsl variable --- .../src/theme/theme-dark/theme-dark-semantic-chart.css | 5 ++++- .../src/theme/theme-light/theme-light-semantic-chart.css | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css index 2ef1d4ed65..d1a31122de 100644 --- a/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css +++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css @@ -41,7 +41,10 @@ --dh-color-plotly-zoombox-corners-fill: var(--dh-color-white); --dh-color-plotly-zoombox-corners-stroke: var(--dh-color-gray-75); - --dh-color-plotly-modebar-btn-active: var(--dh-color-true-white-hsl, 0.7); + --dh-color-plotly-modebar-btn-active: hsla( + var(--dh-color-true-white-hsl), + 0.3 + ); --dh-color-plotly-modebar-btn-warning: var(--dh-color-visual-orange); --dh-color-plotly-notifier-note-bg: var(--dh-color-gray-500); } diff --git a/packages/components/src/theme/theme-light/theme-light-semantic-chart.css b/packages/components/src/theme/theme-light/theme-light-semantic-chart.css index 2ef1d4ed65..bab6a3a072 100644 --- a/packages/components/src/theme/theme-light/theme-light-semantic-chart.css +++ b/packages/components/src/theme/theme-light/theme-light-semantic-chart.css @@ -41,7 +41,10 @@ --dh-color-plotly-zoombox-corners-fill: var(--dh-color-white); --dh-color-plotly-zoombox-corners-stroke: var(--dh-color-gray-75); - --dh-color-plotly-modebar-btn-active: var(--dh-color-true-white-hsl, 0.7); + --dh-color-plotly-modebar-btn-active: hsla( + var(--dh-color-true-black-hsl), + 0.3 + ); --dh-color-plotly-modebar-btn-warning: var(--dh-color-visual-orange); --dh-color-plotly-notifier-note-bg: var(--dh-color-gray-500); } From 8e07b71b53710985632b8a1f75d7c86ae7c34669 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:24:41 -0500 Subject: [PATCH 17/40] Numerous color adjustments --- packages/components/src/UISwitch.scss | 2 +- .../theme/theme-dark/theme-dark-components.css | 14 +++++++------- .../theme-dark/theme-dark-semantic-chart.css | 3 ++- .../src/theme/theme-dark/theme-dark-semantic.css | 12 ++++++------ .../theme-light/theme-light-semantic-chart.css | 3 ++- .../theme/theme-light/theme-light-semantic.css | 4 ++-- .../theme-spectrum/theme-spectrum-overrides.css | 16 ++++++++++++++++ 7 files changed, 36 insertions(+), 18 deletions(-) diff --git a/packages/components/src/UISwitch.scss b/packages/components/src/UISwitch.scss index 0984089171..94f3a55f84 100644 --- a/packages/components/src/UISwitch.scss +++ b/packages/components/src/UISwitch.scss @@ -6,7 +6,7 @@ $switch-font-size: 0.6rem; $switch-handle-color: $gray-300; $switch-handle-hover-color: $gray-100; $switch-text-color: $gray-300; -$switch-text-color-active: $gray-200; +$switch-text-color-active: var(--dh-color-accent-contrast); $switch-handle-padding: 1px; $switch-handle-size: $switch-size - ($switch-handle-padding * 2); $switch-background-color: $gray-800; diff --git a/packages/components/src/theme/theme-dark/theme-dark-components.css b/packages/components/src/theme/theme-dark/theme-dark-components.css index e757b47cb4..bc34bca3ab 100644 --- a/packages/components/src/theme/theme-dark/theme-dark-components.css +++ b/packages/components/src/theme/theme-dark/theme-dark-components.css @@ -40,13 +40,13 @@ --dh-color-action-hover-fg: var(--dh-color-text-hover); --dh-color-action-hover-border: var(--dh-color-hover-border); - --dh-color-action-active-bg: var(--dh-color-accent-bg); - --dh-color-action-active-fg: var(--dh-color-accent-contrast); - --dh-color-action-active-border: var(--dh-color-accent-bg); + --dh-color-action-active-bg: var(--dh-color-gray-800); + --dh-color-action-active-fg: var(--dh-color-gray-50); + --dh-color-action-active-border: var(--dh-color-gray-800); - --dh-color-action-active-hover-bg: var(--dh-color-accent-hover-bg); - --dh-color-action-active-hover-fg: var(--dh-color-accent-contrast); - --dh-color-action-active-hover-border: var(--dh-color-accent-hover-bg); + --dh-color-action-active-hover-bg: var(--dh-color-gray-900); + --dh-color-action-active-hover-fg: var(--dh-color-gray-50); + --dh-color-action-active-hover-border: var(--dh-color-gray-900); --dh-color-action-disabled-bg: transparent; --dh-color-action-disabled-fg: var(--dh-color-text-disabled); @@ -57,7 +57,7 @@ --dh-color-icon-disabled-fg: var(--dh-color-gray-400); /* Inputs */ - --dh-color-input-bg: var(--dh-color-gray-50); + --dh-color-input-bg: var(--dh-color-gray-75); --dh-color-input-fg: var(--dh-color-text); --dh-color-input-border: var(--dh-color-border); --dh-color-input-placeholder: var(--dh-color-gray-600); diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css index d1a31122de..7b607851e0 100644 --- a/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css +++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css @@ -3,7 +3,8 @@ :root { --dh-color-chart-bg: var(--dh-color-content-bg); --dh-color-chart-plot-bg: var(--dh-color-gray-200); - --dh-color-chart-title: var(--dh-color-white); + --dh-color-chart-title: var(--dh-color-text); + --dh-color-chart-legend-fg: var(--dh-color-text); /* Colorway */ --dh-color-chart-colorway: var(--dh-color-visual-cyan) diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic.css b/packages/components/src/theme/theme-dark/theme-dark-semantic.css index 406e8b1232..a11dfa0453 100644 --- a/packages/components/src/theme/theme-dark/theme-dark-semantic.css +++ b/packages/components/src/theme/theme-dark/theme-dark-semantic.css @@ -7,7 +7,7 @@ --dh-color-surface-bg-hsl: var(--dh-color-gray-400-hsl); --dh-color-fg-hsl: var(--dh-color-white-hsl); - --dh-color-disabled-bg-hsl: var(--dh-color-gray-200-hsl); + --dh-color-disabled-bg-hsl: var(--dh-color-gray-300-hsl); --dh-color-scrollbar-hsl: var(--dh-color-fg-hsl); --dh-color-accent-hsl: var(--dh-color-blue-600-hsl); @@ -65,7 +65,7 @@ --dh-color-visual-indigo-hsl: var(--dh-color-indigo-900-hsl); --dh-color-visual-magenta-hsl: var(--dh-color-magenta-900-hsl); --dh-color-visual-orange-hsl: var(--dh-color-orange-900-hsl); - --dh-color-visual-purple-hsl: var(--dh-color-purple-900-hsl); + --dh-color-visual-purple-hsl: var(--dh-color-purple-1100-hsl); --dh-color-visual-red-hsl: var(--dh-color-red-800-hsl); --dh-color-visual-seafoam-hsl: var(--dh-color-seafoam-1100-hsl); --dh-color-visual-yellow-hsl: var(--dh-color-yellow-1200-hsl); @@ -88,7 +88,7 @@ /* Text */ --dh-color-heading-text: var(--dh-color-gray-900); --dh-color-text: var(--dh-color-gray-800); - --dh-color-text-disabled: var(--dh-color-gray-400); + --dh-color-text-disabled: var(--dh-color-gray-600); --dh-color-text-highlight: hsla(var(--dh-color-blue-700-hsl), 0.3); --dh-color-text-hover: var(--dh-color-gray-900); @@ -167,9 +167,9 @@ /* Neutral */ --dh-color-neutral-bg: hsl(var(--dh-color-neutral-hsl)); - --dh-color-neutral-hover-bg: var(--dh-color-gray-400); - --dh-color-neutral-down-bg: var(--dh-color-gray-300); - --dh-color-neutral-key-focus-bg: var(--dh-color-gray-400); + --dh-color-neutral-hover-bg: var(--dh-color-gray-300); + --dh-color-neutral-down-bg: var(--dh-color-gray-200); + --dh-color-neutral-key-focus-bg: var(--dh-color-gray-300); --dh-color-neutral-contrast: hsl(var(--dh-color-neutral-contrast-hsl)); --dh-color-neutral-subdued-bg: var(--dh-color-gray-400); diff --git a/packages/components/src/theme/theme-light/theme-light-semantic-chart.css b/packages/components/src/theme/theme-light/theme-light-semantic-chart.css index bab6a3a072..c254fbf812 100644 --- a/packages/components/src/theme/theme-light/theme-light-semantic-chart.css +++ b/packages/components/src/theme/theme-light/theme-light-semantic-chart.css @@ -3,7 +3,8 @@ :root { --dh-color-chart-bg: var(--dh-color-content-bg); --dh-color-chart-plot-bg: var(--dh-color-gray-200); - --dh-color-chart-title: var(--dh-color-white); + --dh-color-chart-title: var(--dh-color-text); + --dh-color-chart-legend-fg: var(--dh-color-text); /* Colorway */ --dh-color-chart-colorway: var(--dh-color-visual-cyan) diff --git a/packages/components/src/theme/theme-light/theme-light-semantic.css b/packages/components/src/theme/theme-light/theme-light-semantic.css index 8fed65fde9..ad52303914 100644 --- a/packages/components/src/theme/theme-light/theme-light-semantic.css +++ b/packages/components/src/theme/theme-light/theme-light-semantic.css @@ -65,7 +65,7 @@ --dh-color-visual-indigo-hsl: var(--dh-color-indigo-900-hsl); --dh-color-visual-magenta-hsl: var(--dh-color-magenta-900-hsl); --dh-color-visual-orange-hsl: var(--dh-color-orange-800-hsl); - --dh-color-visual-purple-hsl: var(--dh-color-purple-800-hsl); + --dh-color-visual-purple-hsl: var(--dh-color-purple-1000-hsl); --dh-color-visual-red-hsl: var(--dh-color-red-800-hsl); --dh-color-visual-seafoam-hsl: var(--dh-color-seafoam-1100-hsl); --dh-color-visual-yellow-hsl: var(--dh-color-yellow-700-hsl); @@ -220,5 +220,5 @@ --dh-color-visual-info: hsl(var(--dh-color-visual-info-hsl)); /* Editing */ - --dh-color-modified: var(--dh-color-orange-800); + --dh-color-modified: var(--dh-color-green-700); } diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css index 20ff5e7053..ea9b56d6f7 100644 --- a/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css +++ b/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css @@ -28,3 +28,19 @@ label[class^='spectrum-'] { var(--spectrum-global-dimension-size-85) ); } + +[class^='spectrum-Table-headCell'] { + /* + Tables are styled with the assumption that the header is the same color as the bg + which means they look bad against any other background color, instead just inherit the bg. + There is also no variable exposed for this, so we have to target the class directly. + */ + --dh-table-header-cell-background-color: transparent; + background: var(--dh-table-header-cell-background-color); +} + +/* Table */ +[class*='spectrum-Table--quiet'] { + /* Quiet shouldn't assume a bg color */ + --spectrum-alias-background-color-default: transparent; +} From e0cadc783da397dcfe911621a7fade6d116abc7d Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:25:42 -0500 Subject: [PATCH 18/40] fix console button disabled object styling --- .../console/src/console-history/ConsoleHistoryItem.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/console/src/console-history/ConsoleHistoryItem.scss b/packages/console/src/console-history/ConsoleHistoryItem.scss index b022d1963b..ab39207f4f 100644 --- a/packages/console/src/console-history/ConsoleHistoryItem.scss +++ b/packages/console/src/console-history/ConsoleHistoryItem.scss @@ -40,12 +40,6 @@ $button-vert-margin: ConsoleVariables.$button-vert-margin; margin: $button-vert-margin $button-vert-margin $button-vert-margin 0; height: $button-height; border-radius: $button-height; - - &[disabled] { - background-color: $gray-700; - border-color: $gray-700; - pointer-events: none; - } } .error-message { From 9050a426683839839e5a9694578e009e1ef9ef5d Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 11 Jan 2024 14:27:15 -0500 Subject: [PATCH 19/40] style editor in conditional formating style fixes --- .../sidebar/conditional-formatting/StyleEditor.scss | 11 +++++++++-- .../sidebar/conditional-formatting/StyleEditor.tsx | 5 +---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.scss b/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.scss index 8f4786b450..3e30388efb 100644 --- a/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.scss +++ b/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.scss @@ -12,11 +12,18 @@ $cs-option-hover-opacity: 0.8; border-radius: $border-radius; border: $input-border-width solid $input-border-color; min-width: 14rem; + background-position: right 0.75rem center; + background-size: 10px 6px; + background-repeat: no-repeat; + &:focus { border-color: $input-focus-border-color; } - .cs-caret { - color: $input-border-color; + &.btn-inline:active { + background: + var(--dh-svg-icon-select-indicator) right 0.75rem center/10px 6px + no-repeat, + var(--dh-color-action-down-bg); } } } diff --git a/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.tsx b/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.tsx index 506e758a83..3100666d89 100644 --- a/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.tsx +++ b/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.tsx @@ -152,7 +152,7 @@ function StyleEditor(props: ConditionEditorProps): JSX.Element {