fix: apply theme accent color scale and other small tweaks (#1768)

dsmmcken · web-flow · commit 1e631a470bff · 2024-02-02T10:05:27.000-05:00
- 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)
diff --git a/jest.config.lint.cjs b/jest.config.lint.cjs
@@ -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',
     },
   ],
diff --git a/packages/components/src/theme/theme-dark/theme-dark-components.css b/packages/components/src/theme/theme-dark/theme-dark-components.css
@@ -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(
diff --git a/packages/components/src/theme/theme-dark/theme-dark-palette.css b/packages/components/src/theme/theme-dark/theme-dark-palette.css
@@ -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;
diff --git a/packages/components/src/theme/theme-light/theme-light-components.css b/packages/components/src/theme/theme-light/theme-light-components.css
@@ -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(
diff --git a/packages/components/src/theme/theme-light/theme-light-palette.css b/packages/components/src/theme/theme-light/theme-light-palette.css
@@ -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;
diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css
@@ -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);
diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css
@@ -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);
diff --git a/packages/console/src/command-history/CommandHistory.scss b/packages/console/src/command-history/CommandHistory.scss
@@ -21,6 +21,7 @@ $command-history-search-toolbar-bg: $content-bg;
     padding: 0;
     .item-list-scroll-pane {
       border: none;
+      border-radius: 0;
     }
   }
 }
diff --git a/packages/console/src/command-history/CommandHistoryItem.scss b/packages/console/src/command-history/CommandHistoryItem.scss
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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
+  }
 }
diff --git a/packages/file-explorer/src/FileList.scss b/packages/file-explorer/src/FileList.scss
@@ -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);
@@ -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;
 
@@ -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;
+      }
     }
   }
 
@@ -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 */
 }
diff --git a/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png
diff --git a/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png
diff --git a/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/* stylelint-disable custom-property-empty-line-before */`
	`1`	`+/* stylelint-disable custom-property-empty-line-before, color-hex-length */`
`2`	`2`	`:root {`
`3`	`3`	`/* Gray */`
`4`	`4`	`--dh-color-gray-50: #1a171a;`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@ $command-history-search-toolbar-bg: $content-bg;`
`21`	`21`	`padding: 0;`
`22`	`22`	`.item-list-scroll-pane {`
`23`	`23`	`border: none;`
	`24`	`+ border-radius: 0;`
`24`	`25`	`}`
`25`	`26`	`}`
`26`	`27`	`}`