Skip to content

Commit

Permalink
fix: apply theme accent color scale and other small tweaks (#1768)
Browse files Browse the repository at this point in the history
- accent-100-1400 wasn't actually applied to spectrum, only actually
matters in a few components (like checkboxes in lists), as most used
other derived variables
- enable stylelint on css files
- change item list selected border color to match iris-grid selected
border color (e2e item-list-selected-border change)
- manually override spectrum selected border color in lists and tables
to not be hardcoded as blue, instead use accent
- adjusted inactive bg color in light theme
- fix mitre gaps in file list and command history list now that border
is more visible
  fixes small mitre gaps:

![image_360](https://github.com/deephaven/web-client-ui/assets/1576283/ba823c32-9c83-4c83-adf8-7402edf66ec0)
  • Loading branch information
dsmmcken authored Feb 2, 2024
1 parent e6dd3e1 commit 1e631a4
Show file tree
Hide file tree
Showing 13 changed files with 93 additions and 27 deletions.
3 changes: 2 additions & 1 deletion jest.config.lint.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ module.exports = {
displayName: 'stylelint',
runner: 'jest-runner-stylelint',
testMatch: [
'<rootDir>/packages/*/src/**/*.css',
'<rootDir>/packages/*/src/**/*.scss',
'<rootDir>/packages/*/scss/**/*.scss',
],
testPathIgnorePatterns: ['<rootDir>/packages/golden-layout/*'],
moduleFileExtensions: ['scss'],
moduleFileExtensions: ['css', 'scss'],
testEnvironment: 'node',
},
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -115,11 +115,7 @@
--dh-color-highlight-selected-hover
);
--dh-color-item-list-selected-inactive-bg: var(--dh-color-gray-200);
--dh-color-item-list-selected-border: color-mix(
in srgb,
var(--dh-color-accent) 60%,
transparent
);
--dh-color-item-list-selected-border: var(--dh-color-accent-900);
--dh-color-item-list-drop-target-fg: var(--dh-color-white);

--dh-color-item-list-keyboard-selected-bg: color-mix(
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* stylelint-disable custom-property-empty-line-before */
/* stylelint-disable custom-property-empty-line-before, color-hex-length */
:root {
/* Gray */
--dh-color-gray-50: #1a171a;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,8 @@
--dh-color-item-list-selected-hover-bg: var(
--dh-color-highlight-selected-hover
);
--dh-color-item-list-selected-inactive-bg: var(--dh-color-gray-200);
--dh-color-item-list-selected-border: color-mix(
in srgb,
var(--dh-color-accent) 60%,
transparent
);
--dh-color-item-list-selected-inactive-bg: var(--dh-color-gray-300);
--dh-color-item-list-selected-border: var(--dh-color-accent-900);
--dh-color-item-list-drop-target-fg: var(--dh-color-white);

--dh-color-item-list-keyboard-selected-bg: color-mix(
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* stylelint-disable custom-property-empty-line-before */
/* stylelint-disable custom-property-empty-line-before, color-hex-length */
:root {
--dh-color-gray-50: #ffffff;
--dh-color-gray-75: #fafafa;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,21 @@
--dh-color-accent-key-focus-bg
);

--spectrum-accent-color-100: var(--dh-color-accent-100);
--spectrum-accent-color-200: var(--dh-color-accent-200);
--spectrum-accent-color-300: var(--dh-color-accent-300);
--spectrum-accent-color-400: var(--dh-color-accent-400);
--spectrum-accent-color-500: var(--dh-color-accent-500);
--spectrum-accent-color-600: var(--dh-color-accent-600);
--spectrum-accent-color-700: var(--dh-color-accent-700);
--spectrum-accent-color-800: var(--dh-color-accent-800);
--spectrum-accent-color-900: var(--dh-color-accent-900);
--spectrum-accent-color-1000: var(--dh-color-accent-1000);
--spectrum-accent-color-1100: var(--dh-color-accent-1100);
--spectrum-accent-color-1200: var(--dh-color-accent-1200);
--spectrum-accent-color-1300: var(--dh-color-accent-1300);
--spectrum-accent-color-1400: var(--dh-color-accent-1400);

/* Neutral */
--spectrum-neutral-background-color-default: var(--dh-color-neutral-bg);
--spectrum-neutral-background-color-hover: var(--dh-color-neutral-hover-bg);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,37 @@ label[class^='spectrum-'] {
);
}

/* Table */
[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-row'] {
/* border of selected color is hard-coded as blue rather than accent color */
--spectrum-table-row-border-color-selected: var(
--dh-color-item-list-selected-border
);
}

[class*='spectrum-Table--quiet'] {
/* Quiet shouldn't assume a bg color */
--spectrum-alias-background-color-default: transparent;
}

[class*='spectrum-ListView'] {
/* border of selected color is hard-coded as blue rather than accent color */
--spectrum-listview-item-border-color-selected: var(
--dh-color-item-list-selected-border
);
}

button[class^='spectrum-Button'] {
/* make the icon closer to the text */
--spectrum-button-primary-text-gap: var(--spectrum-global-dimension-size-75);
Expand Down
1 change: 1 addition & 0 deletions packages/console/src/command-history/CommandHistory.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ $command-history-search-toolbar-bg: $content-bg;
padding: 0;
.item-list-scroll-pane {
border: none;
border-radius: 0;
}
}
}
Expand Down
32 changes: 26 additions & 6 deletions packages/console/src/command-history/CommandHistoryItem.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ $item-list-selection-border-color: var(--dh-color-item-list-selected-border);
$item-list-focused-bg: var(--dh-color-item-list-selected-bg);
$item-list-hover-bg: var(--dh-color-item-list-hover-bg);
$item-list-selected-color: var(--dh-color-item-list-selected-fg);
$item-list-border-width: 1px;

.command-history {
.command-history-item {
Expand All @@ -27,7 +28,7 @@ $item-list-selected-color: var(--dh-color-item-list-selected-fg);
cursor: pointer;
user-select: none;
line-height: 27px; // CommandHistory.ITEM_HEIGHT - borders
border: 1px solid transparent; //we need a spacer border so stuff doesn't move on us when we apply a border-color
border: $item-list-border-width solid transparent; //we need a spacer border so stuff doesn't move on us when we apply a border-color
}

.item-list-item.is-focused {
Expand All @@ -51,8 +52,23 @@ $item-list-selected-color: var(--dh-color-item-list-selected-fg);
.command-history:focus-within .item-list-item.active {
background-color: $item-list-selected-bg;
color: $item-list-selected-color;
border-left-color: $item-list-selection-border-color;
border-right-color: $item-list-selection-border-color;
// because of border mitre, we use pseudo elements to act as borders
// otherwise we get mitre gap beteween the borders
::before,
::after {
content: '';
position: absolute;
top: -$item-list-border-width;
bottom: -$item-list-border-width * 2; // times 2 the bottom border is actually the top of next item
width: $item-list-border-width;
background-color: $item-list-selection-border-color;
}
::before {
left: -$item-list-border-width;
}
::after {
right: -$item-list-border-width;
}
}

.command-history .item-list-item:hover {
Expand All @@ -68,16 +84,20 @@ $item-list-selected-color: var(--dh-color-item-list-selected-fg);
//apply border to top of the first item in the list if its selected, and the first selected after a non-selected item
.command-history:focus-within .item-list-item:not(.active) + .active,
.command-history:focus-within .item-list-item.active:first-of-type {
border-top: 1px solid $item-list-selection-border-color;
border-top: $item-list-border-width solid $item-list-selection-border-color;
}

//there's no easy way to get the last select item in a grouping, so we apply the end border
//to the TOP of the first non-selected item, ie. the previous selection group
.command-history:focus-within .active + .item-list-item:not(.active) {
border-top: 1px solid $item-list-selection-border-color;
border-top: $item-list-border-width solid $item-list-selection-border-color;
}

//since there is no item after the last item in teh selection, we apply the border to the bottom of the last selected element
.command-history:focus-within .item-list-item.active:last-of-type {
border-bottom: 1px solid $item-list-selection-border-color;
border-bottom: $item-list-border-width solid $item-list-selection-border-color;
::before,
::after {
bottom: -$item-list-border-width; // not times 2, because there is no next item
}
}
34 changes: 28 additions & 6 deletions packages/file-explorer/src/FileList.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
$depth-line-color: $gray-600;
$depth-margin: 5px;
$depth-indentation: 8px;
$item-list-border-width: 1px;
$item-list-color: $text-muted;
$item-list-selected-nofocus-bg: var(--dh-color-item-list-selected-inactive-bg);
$item-list-selected-bg: var(--dh-color-item-list-selected-bg);
Expand Down Expand Up @@ -31,12 +32,13 @@ $item-list-drop-target-color: var(--dh-color-item-list-drop-target-fg);

.item-list-scroll-pane {
border: none;
border-radius: 0;
}

.item-list-item {
padding: 0 $input-btn-padding-x;
color: $item-list-color;
border: 1px solid transparent; // we need a spacer border so stuff doesn't move on us when we apply a border-color
border: $item-list-border-width solid transparent; // we need a spacer border so stuff doesn't move on us when we apply a border-color
-webkit-user-drag: none; // we need to disable webkit-user-drag or else Chrome switches to a Copy icon when dragging on Mac
cursor: pointer;

Expand Down Expand Up @@ -75,8 +77,23 @@ $item-list-drop-target-color: var(--dh-color-item-list-drop-target-fg);
.item-list-item.active {
background-color: $item-list-selected-bg;
color: $item-list-selected-color;
border-left-color: $item-list-selection-border-color;
border-right-color: $item-list-selection-border-color;
// because of border mitre, we use pseudo elements to act as borders
// otherwise we get mitre gap beteween the borders
::before,
::after {
content: '';
position: absolute;
top: -$item-list-border-width;
bottom: -$item-list-border-width * 2; // times 2 the bottom border is actually the top of next item
width: $item-list-border-width;
background-color: $item-list-selection-border-color;
}
::before {
left: -$item-list-border-width;
}
::after {
right: -$item-list-border-width;
}
}
}

Expand Down Expand Up @@ -110,18 +127,23 @@ $item-list-drop-target-color: var(--dh-color-item-list-drop-target-fg);
//apply border to top of the first item in the list if its selected, and the first selected after a non-selected item
&:focus-within .item-list-item:not(.active) + .active,
&:focus-within .item-list-item.active:first-of-type {
border-top: 1px solid $item-list-selection-border-color;
border-top: $item-list-border-width solid $item-list-selection-border-color;
}

//there's no easy way to get the last select item in a grouping, so we apply the end border
//to the TOP of the first non-selected item, ie. the previous selection group
&:focus-within .item-list-item.active + .item-list-item:not(.active) {
border-top: 1px solid $item-list-selection-border-color;
border-top: $item-list-border-width solid $item-list-selection-border-color;
}

//since there is no item after the last item in teh selection, we apply the border to the bottom of the last selected element
&:focus-within .item-list-item.active:last-of-type {
border-bottom: 1px solid $item-list-selection-border-color;
border-bottom: $item-list-border-width solid
$item-list-selection-border-color;
::before,
::after {
bottom: 0; // not times 2 because there is no next item
}
}
/* stylelint-enable no-descending-specificity */
}
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1e631a4

Please sign in to comment.