diff --git a/jest.config.lint.cjs b/jest.config.lint.cjs
index 1f890e597a..edbb65be11 100644
--- 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
index e3cd0ebc6f..02c09402ed 100644
--- 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
index ad5d321774..505ae2687e 100644
--- 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
index 59c1071199..30ab0ef0bd 100644
--- 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
index 52eb9de4ca..4b3e5aeb8f 100644
--- 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
index 1a79973b8d..cb9b9c13a5 100644
--- 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
index 9be9a4996b..938a7e8473 100644
--- a/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css
+++ b/packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css
@@ -29,6 +29,7 @@ label[class^='spectrum-'] {
   );
 }
 
+/* Table */
 [class^='spectrum-Table-headCell'] {
   /* 
   Tables are styled with the assumption that the header is the same color as the bg
@@ -36,15 +37,29 @@ label[class^='spectrum-'] {
   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
index 35ad8ca160..9b9d204a73 100644
--- 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
index 138251ac42..df173d058d 100644
--- 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
index fd9c467bc4..c3a94d6c48 100644
--- 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
index 9f30a961cd..ddd592c765 100644
Binary files a/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png
index c851edd90e..1577c58f88 100644
Binary files a/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png
index f3cd113c5b..66a1ae229c 100644
Binary files a/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png differ