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']", 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; diff --git a/packages/code-studio/src/settings/SettingsMenu.scss b/packages/code-studio/src/settings/SettingsMenu.scss index ecb93a4991..1ab74f7574 100644 --- 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 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 { 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', 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..818d9015a5 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'; @@ -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')} > @@ -206,7 +207,7 @@ function ContextualHelpSample(): JSX.Element { function FormsSample(): JSX.Element { return (
- + One @@ -236,6 +237,18 @@ function IllustratedMessageSample(): JSX.Element { function TableViewSample(): JSX.Element { return ( <> + + + One + Two + Three + Four + + 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; } diff --git a/packages/code-studio/src/styleguide/TimeSliderInputs.tsx b/packages/code-studio/src/styleguide/TimeSliderInputs.tsx index 1a0cf0cab4..543fc83163 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; } @@ -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 (
-

StartTime: {TimeUtils.formatTime(startTime)}

-

EndTime: {TimeUtils.formatTime(endTime)}

+

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

+

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

); } diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss index a476d770d1..da73e9bc91 100644 --- 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 index 5197a84a23..53e991678f 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, @@ -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 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 { 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); diff --git a/packages/components/src/ComboBox.scss b/packages/components/src/ComboBox.scss index 046c18dc7f..4a33538445 100644 --- a/packages/components/src/ComboBox.scss +++ b/packages/components/src/ComboBox.scss @@ -2,7 +2,8 @@ @import '../scss/util.scss'; $cb-option-btn-color: $dropdown-link-color; -$cb-option-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg); +$cb-option-selected-bg: var(--dh-color-item-list-selected-bg); +$cb-option-selected-hover-bg: var(--dh-color-item-list-selected-hover-bg); $cb-option-hover-bg: $dropdown-link-hover-bg; $cb-option-hover-color: $dropdown-link-hover-color; @@ -79,17 +80,21 @@ $cb-option-hover-color: $dropdown-link-hover-color; display: block; } .cb-option-btn.keyboard-active { - background-color: $cb-option-keyboard-selected-bg; + background-color: $cb-option-selected-bg; + &:hover { + background-color: $cb-option-selected-hover-bg; + } } - .cb-option-btn:hover { - color: $cb-option-hover-color; - background-color: $cb-option-hover-bg; - } .cb-option-btn:focus { outline: none; } + .cb-option-btn:hover:not(.keyboard-active) { + color: $cb-option-hover-color; + background-color: $cb-option-hover-bg; + } + .cb-options:last-child { border-bottom-left-radius: $border-radius; border-bottom-right-radius: $border-radius; 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 { diff --git a/packages/components/src/DraggableItemList.scss b/packages/components/src/DraggableItemList.scss index 6bad87de17..a419c6275c 100644 --- a/packages/components/src/DraggableItemList.scss +++ b/packages/components/src/DraggableItemList.scss @@ -1,10 +1,10 @@ @import '../scss/custom.scss'; -$draggable-item-hover-bg: var(--dh-color-gray-500); -$draggable-item-selected-bg: hsla(var(--dh-color-accent-hsl), 0.4); -$draggable-item-selected-hover-bg: $primary; +$draggable-item-hover-bg: var(--dh-color-item-list-hover-bg); +$draggable-item-selected-bg: var(--dh-color-item-list-selected-bg); +$draggable-item-selected-hover-bg: var(--dh-color-item-list-selected-hover-bg); +$draggable-item-selected-dragging-bg: var(--dh-color-item-list-selected-bg); $draggable-item-dragging-bg: $primary; -$draggable-item-selected-dragged-bg: hsla(var(--dh-color-accent-hsl), 0.35); $draggable-item-border: $input-border-width solid transparent; $draggable-item-focus-border: $input-border-width solid $input-focus-border-color; @@ -24,6 +24,10 @@ $draggable-item-grip-color: $mid; margin: 0 0 $spacer-1 0; padding: $spacer-1 $spacer-2; position: relative; + color: var(--dh-color-accent-contrast); + .btn { + color: var(--dh-color-accent-contrast); + } } &:focus { @@ -83,7 +87,7 @@ $draggable-item-grip-color: $mid; .item-list-item-content { border-radius: $border-radius; - margin: 0 $spacer-2 $spacer-1 $spacer-2; + margin: 0 $spacer-2 1px $spacer-2; padding: calc(#{$spacer-1} * 0.5) $spacer-1 0 $spacer-2; border: $draggable-item-border; line-height: $btn-line-height; @@ -135,7 +139,7 @@ $draggable-item-grip-color: $mid; .item-list-item.active { .draggable-item-list-item { .item-list-item-content { - background-color: $draggable-item-selected-dragged-bg; + background-color: $draggable-item-selected-dragging-bg; } } } diff --git a/packages/components/src/HierarchicalCheckboxMenu.scss b/packages/components/src/HierarchicalCheckboxMenu.scss index 26306df66a..239747e8f2 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-input-fg); + background-color: var(--dh-color-selector-bg); padding: $custom-select-padding-y $custom-select-padding-x; font-weight: $font-weight-normal; @@ -19,14 +20,20 @@ margin-right: 4px; } } -.hcm-btn:hover:not(:disabled) .cs-caret { - background-color: var(--dh-color-selector-hover-fg); -} .hcm-btn:focus { border-color: $input-focus-border-color; } +.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-menu-container { padding: $spacer-2; .hcm-parent { diff --git a/packages/components/src/SelectValueList.scss b/packages/components/src/SelectValueList.scss index b5ab49ef67..b0e7b2fdd7 100644 --- a/packages/components/src/SelectValueList.scss +++ b/packages/components/src/SelectValueList.scss @@ -30,7 +30,7 @@ display: flex; &:hover { - background: $gray-500; + background: var(--dh-color-item-list-hover-bg); } .custom-control-label { diff --git a/packages/components/src/TimeSlider.scss b/packages/components/src/TimeSlider.scss index b7d7173478..9a01f5d896 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-subdued-content-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; 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..4ea6989a06 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); @@ -121,7 +121,7 @@ --dh-color-menu-item-fg: var(--dh-color-gray-700); /* Hr */ - --dh-color-hr: var(--dh-color-gray-200); + --dh-color-hr: var(--dh-color-gray-300); /* Dialogs */ --dh-color-dialog-title-fg: var(--dh-color-heading-text); 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..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) @@ -41,7 +42,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-dark/theme-dark-semantic.css b/packages/components/src/theme/theme-dark/theme-dark-semantic.css index 406e8b1232..d97ca61abe 100644 --- a/packages/components/src/theme/theme-dark/theme-dark-semantic.css +++ b/packages/components/src/theme/theme-dark/theme-dark-semantic.css @@ -4,13 +4,13 @@ /* HSL base colors */ --dh-color-bg-hsl: var(--dh-color-black-hsl); --dh-color-content-bg-hsl: var(--dh-color-gray-100-hsl); - --dh-color-surface-bg-hsl: var(--dh-color-gray-400-hsl); + --dh-color-subdued-content-bg-hsl: var(--dh-color-gray-75-hsl); + --dh-color-surface-bg-hsl: var(--dh-color-gray-200-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); --dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl); --dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl); --dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl); @@ -25,6 +25,7 @@ --dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl); --dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl); --dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl); + --dh-color-accent-hsl: var(--dh-color-accent-600-hsl); --dh-color-border-hsl: var(--dh-color-gray-500-hsl); --dh-color-border-focus-hsl: var(--dh-color-accent-800-hsl); @@ -65,7 +66,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); @@ -78,6 +79,7 @@ /* General */ --dh-color-bg: hsl(var(--dh-color-bg-hsl)); --dh-color-content-bg: hsl(var(--dh-color-content-bg-hsl)); + --dh-color-subdued-content-bg: hsl(var(--dh-color-subdued-content-bg-hsl)); --dh-color-surface-bg: hsl(var(--dh-color-surface-bg-hsl)); --dh-color-fg: hsl(var(--dh-color-fg-hsl)); --dh-color-border: hsl(var(--dh-color-border-hsl)); @@ -88,7 +90,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); @@ -141,14 +143,11 @@ --dh-color-focus-ring: var(--dh-color-focus); /* Highlight */ - --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.15); - --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.15); + --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.2); + --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.18); --dh-color-highlight-invalid: hsla(var(--dh-color-visual-red-hsl), 0.15); - --dh-color-highlight-selected: hsla(var(--dh-color-visual-blue-hsl), 0.13); - --dh-color-highlight-selected-hover: hsla( - var(--dh-color-visual-blue-hsl), - 0.2 - ); + --dh-color-highlight-selected: hsla(var(--dh-color-accent-hsl), 0.25); + --dh-color-highlight-selected-hover: hsla(var(--dh-color-accent-hsl), 0.35); /* Keyboard selected */ --dh-color-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5); @@ -167,9 +166,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-palette.css b/packages/components/src/theme/theme-light/theme-light-palette.css index 63f9a833db..1174c328dd 100644 --- a/packages/components/src/theme/theme-light/theme-light-palette.css +++ b/packages/components/src/theme/theme-light/theme-light-palette.css @@ -2,13 +2,13 @@ :root { /* Gray */ --dh-color-gray-50-hsl: 0, 0%, 100%; - --dh-color-gray-75-hsl: 0, 0%, 99.22%; - --dh-color-gray-100-hsl: 0, 0%, 97.25%; - --dh-color-gray-200-hsl: 0, 0%, 90.2%; - --dh-color-gray-300-hsl: 0, 0%, 83.53%; - --dh-color-gray-400-hsl: 0, 0%, 69.41%; - --dh-color-gray-500-hsl: 0, 0%, 56.47%; - --dh-color-gray-600-hsl: 0, 0%, 42.75%; + --dh-color-gray-75-hsl: 0, 0%, 98.22%; + --dh-color-gray-100-hsl: 0, 0%, 96.85%; + --dh-color-gray-200-hsl: 0, 0%, 93.2%; + --dh-color-gray-300-hsl: 0, 0%, 85.53%; + --dh-color-gray-400-hsl: 0, 0%, 72.41%; + --dh-color-gray-500-hsl: 0, 0%, 58.47%; + --dh-color-gray-600-hsl: 0, 0%, 44.75%; --dh-color-gray-700-hsl: 0, 0%, 27.45%; --dh-color-gray-800-hsl: 0, 0%, 13.33%; --dh-color-gray-900-hsl: 0, 0%, 0%; 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..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) @@ -41,7 +42,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); } diff --git a/packages/components/src/theme/theme-light/theme-light-semantic-grid.css b/packages/components/src/theme/theme-light/theme-light-semantic-grid.css index 609909420c..a938559c3b 100644 --- a/packages/components/src/theme/theme-light/theme-light-semantic-grid.css +++ b/packages/components/src/theme/theme-light/theme-light-semantic-grid.css @@ -5,7 +5,7 @@ /* Header */ --dh-color-grid-header-bg: var(--dh-color-gray-100); --dh-color-grid-header-text: var(--dh-color-heading-text); - --dh-color-grid-header-separator: var(--dh-color-gray-50); + --dh-color-grid-header-separator: var(--dh-color-gray-300); --dh-color-grid-header-separator-hover: var(--dh-color-gray-600); --dh-color-grid-header-separator-hidden-hover: var(--dh-color-accent-700); --dh-color-grid-header-sort-bar: var(--dh-color-visual-purple); @@ -32,9 +32,9 @@ --dh-color-grid-scroll-bar-hover-bg: var(--dh-color-gray-200); --dh-color-grid-scroll-bar-casing: var(--dh-color-gray-400); --dh-color-grid-scroll-bar-corner: var(--dh-color-gray-100); - --dh-color-grid-scroll-bar: var(--dh-color-gray-500); - --dh-color-grid-scroll-bar-hover: var(--dh-color-gray-600); - --dh-color-grid-scroll-bar-active: var(--dh-color-gray-700); + --dh-color-grid-scroll-bar: var(--dh-color-gray-400); + --dh-color-grid-scroll-bar-hover: var(--dh-color-gray-500); + --dh-color-grid-scroll-bar-active: var(--dh-color-gray-600); /* Text */ --dh-color-grid-text: var(--dh-color-text); @@ -52,9 +52,9 @@ /* Filter Bar */ --dh-color-grid-filter-bar-active-bg: hsla( var(--dh-color-accent-700-hsl), - 0.5 + 0.45 ); - --dh-color-grid-filter-bar-active: var(--dh-color-accent-100); + --dh-color-grid-filter-bar-active: var(--dh-color-accent-700); --dh-color-grid-filter-bar-expanded-bg: var(--dh-color-gray-50); --dh-color-grid-filter-bar-expanded-active-bg: hsla( var(--dh-color-accent-1000-hsl), 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..d8d37d8d46 100644 --- a/packages/components/src/theme/theme-light/theme-light-semantic.css +++ b/packages/components/src/theme/theme-light/theme-light-semantic.css @@ -3,14 +3,14 @@ :root { /* HSL base colors */ --dh-color-bg-hsl: var(--dh-color-gray-300-hsl); - --dh-color-content-bg-hsl: var(--dh-color-gray-50-hsl); + --dh-color-content-bg-hsl: var(--dh-color-gray-100-hsl); + --dh-color-subdued-content-bg-hsl: var(--dh-color-gray-200-hsl); --dh-color-surface-bg-hsl: var(--dh-color-gray-200-hsl); --dh-color-fg-hsl: var(--dh-color-black-hsl); --dh-color-disabled-bg-hsl: var(--dh-color-gray-200-hsl); --dh-color-scrollbar-hsl: var(--dh-color-fg-hsl); - --dh-color-accent-hsl: var(--dh-color-blue-900-hsl); --dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl); --dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl); --dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl); @@ -25,12 +25,13 @@ --dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl); --dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl); --dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl); + --dh-color-accent-hsl: var(--dh-color-accent-900-hsl); --dh-color-border-hsl: var(--dh-color-gray-700-hsl); --dh-color-border-focus-hsl: var(--dh-color-accent-800-hsl); --dh-color-info-hsl: var(--dh-color-cyan-1000-hsl); - --dh-color-neutral-hsl: var(--dh-color-gray-500-hsl); + --dh-color-neutral-hsl: var(--dh-color-gray-400-hsl); --dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl); --dh-color-positive-hsl: var(--dh-color-green-900-hsl); --dh-color-negative-hsl: var(--dh-color-red-800-hsl); @@ -65,7 +66,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); @@ -78,6 +79,7 @@ /* General */ --dh-color-bg: hsl(var(--dh-color-bg-hsl)); --dh-color-content-bg: hsl(var(--dh-color-content-bg-hsl)); + --dh-color-subdued-content-bg: hsl(var(--dh-color-subdued-content-bg-hsl)); --dh-color-surface-bg: hsl(var(--dh-color-surface-bg-hsl)); --dh-color-fg: hsl(var(--dh-color-fg-hsl)); --dh-color-border: hsl(var(--dh-color-border-hsl)); @@ -88,7 +90,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-700); --dh-color-text-highlight: hsla(var(--dh-color-blue-700-hsl), 0.15); --dh-color-text-hover: var(--dh-color-gray-900); @@ -141,14 +143,11 @@ --dh-color-focus-ring: var(--dh-color-focus); /* Highlight */ - --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.15); - --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.08); + --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.2); + --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.15); --dh-color-highlight-invalid: hsla(var(--dh-color-visual-red-hsl), 0.15); - --dh-color-highlight-selected: hsla(var(--dh-color-visual-blue-hsl), 0.07); - --dh-color-highlight-selected-hover: hsla( - var(--dh-color-visual-blue-hsl), - 0.13 - ); + --dh-color-highlight-selected: hsla(var(--dh-color-accent-hsl), 0.25); + --dh-color-highlight-selected-hover: hsla(var(--dh-color-accent-hsl), 0.35); /* Keyboard selected */ --dh-color-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5); @@ -167,9 +166,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-100); + --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); @@ -220,5 +219,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..9be9a4996b 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,41 @@ 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; +} + +button[class^='spectrum-Button'] { + /* make the icon closer to the text */ + --spectrum-button-primary-text-gap: var(--spectrum-global-dimension-size-75); + + /* Center the text vertically. We use a different font then spectrum so we require different custom centering */ + padding-bottom: calc(var(--spectrum-global-dimension-size-50) - 1px); + padding-top: calc(var(--spectrum-global-dimension-size-50)); +} + +button[class^='spectrum-Button'] svg { + /* our icons are smaller, center them too */ + padding-bottom: var(--spectrum-global-dimension-size-25); +} + +span[class^='spectrum-Checkbox-label'], +span[class^='spectrum-Radio-label'] { + /* I have no idea why these spectrum labels aren't centered, + but this fixes it. Maybe difference in font baselines. + */ + margin-top: var(--spectrum-global-dimension-size-85); +} diff --git a/packages/console/src/ConsoleMenu.tsx b/packages/console/src/ConsoleMenu.tsx index a4352aa8c8..f30d137f51 100644 --- a/packages/console/src/ConsoleMenu.tsx +++ b/packages/console/src/ConsoleMenu.tsx @@ -251,6 +251,7 @@ class ConsoleMenu extends PureComponent { kind="ghost" icon={vsKebabVertical} tooltip="More Actions..." + aria-label="More Actions..." onClick={() => { // no-op: click is handled in `DropdownMenu` }} diff --git a/packages/console/src/command-history/CommandHistory.scss b/packages/console/src/command-history/CommandHistory.scss index 582af581c1..35ad8ca160 100644 --- a/packages/console/src/command-history/CommandHistory.scss +++ b/packages/console/src/command-history/CommandHistory.scss @@ -1,6 +1,6 @@ @import '@deephaven/components/scss/custom.scss'; -$command-history-bg: $gray-900; +$command-history-bg: var(--dh-color-subdued-content-bg); $command-history-color: $text-muted; $command-history-search-toolbar-bg: $content-bg; 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 { diff --git a/packages/dashboard-core-plugins/src/linker/LinkerLink.scss b/packages/dashboard-core-plugins/src/linker/LinkerLink.scss index 18054f3284..cdb0c85e87 100644 --- a/packages/dashboard-core-plugins/src/linker/LinkerLink.scss +++ b/packages/dashboard-core-plugins/src/linker/LinkerLink.scss @@ -54,7 +54,7 @@ $dash-size: 10; } path { stroke-width: $link-width; - stroke: $primary-light; + stroke: var(--dh-color-accent-400); &.link-select { stroke-width: $selectable-width; stroke: transparent; diff --git a/packages/dashboard-core-plugins/src/panels/MarkdownNotebook.scss b/packages/dashboard-core-plugins/src/panels/MarkdownNotebook.scss index cafd7fc88b..fa7e542a0f 100644 --- a/packages/dashboard-core-plugins/src/panels/MarkdownNotebook.scss +++ b/packages/dashboard-core-plugins/src/panels/MarkdownNotebook.scss @@ -14,7 +14,7 @@ $btn-play-color: $success; padding: $spacer-1; width: 100%; flex: 0 0 36px; - border-bottom: 2px solid $black; + border-bottom: 2px solid var(--dh-color-bg); .btn-play-selected-cell { color: $btn-play-color; min-height: 34px; @@ -75,7 +75,7 @@ $btn-play-color: $success; code { color: $foreground; - background: $gray-700; + background: var(--dh-color-gray-200); padding: $spacer-2; border-radius: $border-radius; border: 1px solid $black; diff --git a/packages/file-explorer/src/FileExplorer.scss b/packages/file-explorer/src/FileExplorer.scss index 0380a1d48c..c459a64b1d 100644 --- a/packages/file-explorer/src/FileExplorer.scss +++ b/packages/file-explorer/src/FileExplorer.scss @@ -1,6 +1,6 @@ @import '@deephaven/components/scss/custom.scss'; -$file-explorer-bg: $gray-900; +$file-explorer-bg: var(--dh-color-subdued-content-bg); .file-explorer { background: $file-explorer-bg; diff --git a/packages/file-explorer/src/FileExplorerToolbar.scss b/packages/file-explorer/src/FileExplorerToolbar.scss index bfd6791c69..c3921b41e5 100644 --- a/packages/file-explorer/src/FileExplorerToolbar.scss +++ b/packages/file-explorer/src/FileExplorerToolbar.scss @@ -4,7 +4,6 @@ $toolbar-padding: $spacer-1; $toolbar-font-size: 17px; $toolbar-btn-width: $input-height; $toolbar-bg: $content-bg; -$file-list-search-bg: $gray-800; .file-explorer-toolbar { background: $toolbar-bg; @@ -27,9 +26,6 @@ $file-list-search-bg: $gray-800; flex-grow: 1; .search-group { width: 100%; - input { - background-color: $file-list-search-bg; - } } } .btn { diff --git a/packages/iris-grid/src/sidebar/ChartBuilder.scss b/packages/iris-grid/src/sidebar/ChartBuilder.scss index 1f7a411e3c..3222e7e7ff 100644 --- a/packages/iris-grid/src/sidebar/ChartBuilder.scss +++ b/packages/iris-grid/src/sidebar/ChartBuilder.scss @@ -41,9 +41,8 @@ hr { margin-left: -2em; margin-right: -2em; - margin-top: 0.5em; - margin-bottom: 0.5em; - background: $gray-800; + margin-top: $spacer-2; + margin-bottom: $spacer-2; } .col-chart-type { diff --git a/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss b/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss index 65c1c987c9..35ec2066bc 100644 --- a/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss +++ b/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss @@ -22,8 +22,12 @@ $background: var(--dh-surface-bg); } &.dragging { - background: $primary-dark; + background: $primary; box-shadow: $box-shadow; + + .btn { + color: var(--dh-color-accent-contrast); + } } } diff --git a/packages/iris-grid/src/sidebar/RollupRows.scss b/packages/iris-grid/src/sidebar/RollupRows.scss index b479909824..0acfd2d765 100644 --- a/packages/iris-grid/src/sidebar/RollupRows.scss +++ b/packages/iris-grid/src/sidebar/RollupRows.scss @@ -1,10 +1,5 @@ @import '@deephaven/components/scss/custom.scss'; -$draggable-item-selected-bg: hsla(var(--dh-color-accent-hsl), 0.4); -$draggable-item-selected-hover-bg: $primary; -$draggable-item-border: $input-border-width solid transparent; -$row-selected-bg-color: hsla(var(--dh-color-accent-hsl), 0.4); - .rollup-rows { display: flex; flex-direction: column; @@ -38,10 +33,6 @@ $row-selected-bg-color: hsla(var(--dh-color-accent-hsl), 0.4); &.active { color: $foreground; } - - &:hover { - color: $primary; - } } .label { diff --git a/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormattingMenu.scss b/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormattingMenu.scss index cbb4e6ac52..a2ca5d1176 100644 --- a/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormattingMenu.scss +++ b/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormattingMenu.scss @@ -58,7 +58,19 @@ } &:hover { - background: $gray-500; + background: var(--dh-color-item-list-hover-bg); + } + } + + .dragging > & { + .formatting-item { + background: $primary; + box-shadow: $box-shadow; + color: var(--dh-color-accent-contrast); + + .btn { + color: var(--dh-color-accent-contrast); + } } } } 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..5ede1fb693 100644 --- a/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.tsx +++ b/packages/iris-grid/src/sidebar/conditional-formatting/StyleEditor.tsx @@ -8,7 +8,7 @@ import React, { import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import Log from '@deephaven/log'; import { ColorUtils } from '@deephaven/utils'; -import { dhSort, vsCheck } from '@deephaven/icons'; +import { vsCheck } from '@deephaven/icons'; import { Button, DropdownMenu } from '@deephaven/components'; import { FormatStyleType, @@ -152,7 +152,7 @@ function StyleEditor(props: ConditionEditorProps): JSX.Element {