From 3cef20179c17ba98011046eb32d305cbb8bca319 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Mon, 16 Nov 2020 12:31:52 -0500
Subject: [PATCH] [Amsterdam] Unify focus states (#4242)

* Resetting _reset and updating focus ring mixin
* Fix us usages of `euiCustomControlFocused`
* Change base outline color to `currentColor` and fix up base buttons
* Fixing up more instances
- Breadcrumbs (not great)
- Button groups (still missing on single-select)
- Tabs
- Links
* Cleaning up the diff between focus and hover states
* Consolidating focus background colors
* Fix up usages of $euiFocusRingColor
* Creating more mixins for interactive states and cleaning up focus ring mixin
* Fixing cross-browser issues and removing faux outline option
- Fixes up the checkbox,radio,switch outlines
- Reduces opacity of focus backgrounds
- Fixes link color in Ams. dark mode
---
 CHANGELOG.md                                  |   4 +-
 src-docs/src/views/button/button_ghost.js     |   5 +-
 src-docs/src/views/icon/icon_colors.js        |   1 +
 src/components/breadcrumbs/_breadcrumbs.scss  |   1 -
 .../collapsible_nav/_collapsible_nav.scss     |   6 +-
 .../color_stops/_color_stops.scss             |   2 +-
 .../combo_box_input/_combo_box_input.scss     |   3 +-
 .../_combo_box_option.scss                    |   2 +-
 .../context_menu/_context_menu_item.scss      |   1 +
 .../context_menu/_context_menu_panel.scss     |   3 +-
 .../datagrid/_data_grid_column_sorting.scss   |  11 +-
 .../datagrid/_data_grid_header_row.scss       |   3 +
 src/components/datagrid/_mixins.scss          |   1 +
 src/components/datagrid/column_sorting.tsx    |   2 +-
 .../filter_group/_filter_select_item.scss     |  19 +--
 .../_form_control_layout.scss                 |  10 +-
 src/components/form/range/_range_slider.scss  |   8 +-
 .../form/super_select/_super_select.scss      |  11 +-
 src/components/link/_link.scss                |  12 +-
 .../list_group/_list_group_item.scss          |   1 -
 src/components/tabs/_tabs.scss                |   1 +
 src/components/text/_text.scss                |   8 +-
 src/components/tree_view/tree_view.scss       |  11 +-
 src/global_styling/mixins/_button.scss        |  20 +--
 src/global_styling/mixins/_form.scss          |  24 ++-
 src/global_styling/mixins/_states.scss        |  39 ++++-
 src/global_styling/variables/_colors.scss     |   1 -
 src/global_styling/variables/_states.scss     |   4 +
 .../eui_amsterdam_colors_dark.scss            |   4 +-
 .../eui_amsterdam_colors_light.scss           |   6 +-
 .../eui-amsterdam/global_styling/index.scss   |   2 +-
 .../global_styling/mixins/_button.scss        |  13 +-
 .../global_styling/mixins/_form.scss          |   1 +
 .../global_styling/mixins/_index.scss         |   2 +-
 .../global_styling/mixins/_states.scss        |  66 ++++++++
 .../global_styling/reset/_index.scss          |   3 +
 .../global_styling/reset/_reset.scss          | 149 ++++++++++++++++++
 .../global_styling/variables/_buttons.scss    |   1 +
 .../global_styling/variables/_index.scss      |   1 +
 .../global_styling/variables/_states.scss     |  10 ++
 .../eui-amsterdam/overrides/_button.scss      |  12 +-
 .../overrides/_button_empty.scss              |   2 +-
 .../overrides/_button_group.scss              |  32 +++-
 .../overrides/_form_control_layout.scss       |   4 +
 .../overrides/_form_controls.scss             |  19 +++
 .../eui-amsterdam/overrides/_header.scss      |   4 +
 .../eui-amsterdam/overrides/_index.scss       |   5 +-
 src/themes/eui/eui_colors_dark.scss           |   1 -
 48 files changed, 449 insertions(+), 102 deletions(-)
 create mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_states.scss
 create mode 100644 src/themes/eui-amsterdam/global_styling/reset/_index.scss
 create mode 100644 src/themes/eui-amsterdam/global_styling/reset/_reset.scss
 create mode 100644 src/themes/eui-amsterdam/global_styling/variables/_states.scss
 create mode 100644 src/themes/eui-amsterdam/overrides/_form_controls.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 758bbaf1e67..723587f9ee3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `eql` glyph in `EuiIcon` ([#4110](https://github.com/elastic/eui/pull/4110))
-- Added `testenv` mock for `htmlIdGenerator` ([#4212](https://github.com/elastic/eui/pull/4212)) 
+- Added `testenv` mock for `htmlIdGenerator` ([#4212](https://github.com/elastic/eui/pull/4212))
+- Added several Sass mixins for handling of unified focus/hover states ([#4242](https://github.com/elastic/eui/pull/4242))
 
 **Theme: Amsterdam**
 
+- Unify focus states by leaning into `outline` and restricting to keyboard navigation ([#4242](https://github.com/elastic/eui/pull/4242))
 - Removed faux border from `EuiAvatar` ([#4255](https://github.com/elastic/eui/pull/4255))
 
 ## [`30.3.0`](https://github.com/elastic/eui/tree/v30.3.0)
diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
index d33455bfea2..95413ec09ab 100644
--- a/src-docs/src/views/button/button_ghost.js
+++ b/src-docs/src/views/button/button_ghost.js
@@ -17,7 +17,10 @@ export default () => {
   };
 
   return (
-    <EuiPanel paddingSize="l" className="guideDemo__ghostBackground">
+    <EuiPanel
+      paddingSize="l"
+      color="transparent"
+      className="guideDemo__ghostBackground">
       <EuiFlexGroup wrap gutterSize="s" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiButton color="ghost" onClick={() => {}}>
diff --git a/src-docs/src/views/icon/icon_colors.js b/src-docs/src/views/icon/icon_colors.js
index cdca18c7af8..13aeee59bc5 100644
--- a/src-docs/src/views/icon/icon_colors.js
+++ b/src-docs/src/views/icon/icon_colors.js
@@ -47,6 +47,7 @@ export default () => (
           key={iconColor}
           style={{ width: '340px' }}>
           <EuiPanel
+            color="transparent"
             className={classNames({
               guideDemo__ghostBackground: iconColor === 'ghost',
             })}>
diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
index 58da52538d9..f8a574f8478 100644
--- a/src/components/breadcrumbs/_breadcrumbs.scss
+++ b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -47,7 +47,6 @@
 .euiBreadcrumbs--truncate {
   white-space: nowrap;
   flex-wrap: nowrap;
-  overflow: hidden;
 
   .euiBreadcrumb:not(.euiBreadcrumb--collapsed) {
     max-width: $euiBreadcrumbTruncateWidth;
diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index 4e2536bf4d5..d63860af27b 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -24,12 +24,8 @@
 
   &:focus {
     @include euiFocusRing;
-  }
-
-  &,
-  &:focus {
     // Override default `EuiButtonEmpty` :focus background to ensure better contrast
-    background: $euiColorEmptyShade;
+    background: $euiColorEmptyShade !important; // sass-lint:disable-line no-important
   }
 }
 
diff --git a/src/components/color_picker/color_stops/_color_stops.scss b/src/components/color_picker/color_stops/_color_stops.scss
index d43e4223aa9..dc3e82423bc 100644
--- a/src/components/color_picker/color_stops/_color_stops.scss
+++ b/src/components/color_picker/color_stops/_color_stops.scss
@@ -57,7 +57,7 @@
   height: 100%;
 
   // Background color can potentially have opacity
-  // Pseudo element placed below the thumb to prevent the track from showing through 
+  // Pseudo element placed below the thumb to prevent the track from showing through
   &:before {
     content: '';
     display: block;
diff --git a/src/components/combo_box/combo_box_input/_combo_box_input.scss b/src/components/combo_box/combo_box_input/_combo_box_input.scss
index 2d75fc78757..1781b0f5749 100644
--- a/src/components/combo_box/combo_box_input/_combo_box_input.scss
+++ b/src/components/combo_box/combo_box_input/_combo_box_input.scss
@@ -2,11 +2,10 @@
   max-width: 100%;
 
   // Ensure that no input states are visible on the hidden input
-  input[aria-hidden='true'] {
+  input {
     // sass-lint:disable-block no-important
     border: none !important;
     box-shadow: none !important;
     outline: none !important;
   }
-
 }
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
index e3ac2e4e4c6..9f7f68ce90f 100644
--- a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
+++ b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
@@ -14,7 +14,7 @@
 
   &.euiComboBoxOption-isFocused {
     cursor: pointer;
-    color: $euiColorPrimary;
+    color: $euiColorPrimaryText;
     background-color: $euiFocusBackgroundColor;
   }
 
diff --git a/src/components/context_menu/_context_menu_item.scss b/src/components/context_menu/_context_menu_item.scss
index 894fe91468c..453c4f1cdab 100644
--- a/src/components/context_menu/_context_menu_item.scss
+++ b/src/components/context_menu/_context_menu_item.scss
@@ -4,6 +4,7 @@
   width: 100%;
   text-align: left;
   color: $euiTextColor;
+  outline-offset: -$euiFocusRingSize;
 
   &:hover,
   &:focus {
diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss
index ebd3cc169d1..d6999edb8f6 100644
--- a/src/components/context_menu/_context_menu_panel.scss
+++ b/src/components/context_menu/_context_menu_panel.scss
@@ -1,6 +1,7 @@
 .euiContextMenuPanel {
   width: 100%;
   visibility: visible;
+  outline-offset: -$euiFocusRingSize;
 
   &.euiContextMenuPanel-txInLeft {
     pointer-events: none;
@@ -36,9 +37,9 @@
 .euiContextMenuPanelTitle {
   @include euiPopoverTitle;
   padding: $euiSizeM;
-
   width: 100%;
   text-align: left;
+  outline-offset: -$euiFocusRingSize;
 
   &:enabled:hover,
   &:enabled:focus {
diff --git a/src/components/datagrid/_data_grid_column_sorting.scss b/src/components/datagrid/_data_grid_column_sorting.scss
index 30a9983e605..1bbe555bf3b 100644
--- a/src/components/datagrid/_data_grid_column_sorting.scss
+++ b/src/components/datagrid/_data_grid_column_sorting.scss
@@ -26,18 +26,17 @@
 
 .euiDataGridColumnSorting__fieldList {
   @include euiYScrollWithShadows;
+  padding-top: $euiSizeXS;
+  padding-bottom: $euiSizeXS;
   max-height: 300px;
 }
 
 .euiDataGridColumnSorting__field {
+  @include euiInteractiveStates;
   display: block;
-  padding: $euiSizeXS;
+  padding: $euiSizeXS $euiSizeS;
   width: 100%;
-
-  &:focus {
-    background: $euiFocusBackgroundColor;
-    text-decoration: underline;
-  }
+  outline-offset: -$euiFocusRingSize;
 }
 
 .euiDataGridColumnSorting__orderButtons {
diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss
index e8f34595559..2747e40ac72 100644
--- a/src/components/datagrid/_data_grid_header_row.scss
+++ b/src/components/datagrid/_data_grid_header_row.scss
@@ -32,6 +32,7 @@
 
   &:focus {
     @include euiDataGridCellFocus;
+    border-top: none;
   }
 
   // We only truncate if the cell is not a control column.
@@ -39,6 +40,7 @@
 
     &:focus-within {
       @include euiDataGridCellFocus;
+      border-top: none;
     }
 
     .euiDataGridHeaderCell__button {
@@ -48,6 +50,7 @@
       display: flex;
       text-align: left;
       font-weight: $euiFontWeightBold;
+      outline: none;
     }
 
     .euiDataGridHeaderCell__content {
diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
index e5d1727ecb9..32deed7e4f4 100644
--- a/src/components/datagrid/_mixins.scss
+++ b/src/components/datagrid/_mixins.scss
@@ -55,6 +55,7 @@ $euiDataGridStyles: (
   box-shadow: 0 0 0 2px $euiFocusRingColor;
   border-radius: 1px;
   z-index: 2; // Needed so it sits above potential striping in the next row
+  outline: none; // Remove outline as we're handling it manually
 }
 
 @mixin euiDataGridRowCell {
diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
index 8e419b38403..cbece737c9f 100644
--- a/src/components/datagrid/column_sorting.tsx
+++ b/src/components/datagrid/column_sorting.tsx
@@ -211,7 +211,7 @@ export const useColumnSorting = (
                   isOpen={avilableColumnsisOpen}
                   closePopover={() => setAvailableColumnsIsOpen(false)}
                   anchorPosition="downLeft"
-                  panelPaddingSize="s"
+                  panelPaddingSize="none"
                   button={
                     <EuiButtonEmpty
                       size="xs"
diff --git a/src/components/filter_group/_filter_select_item.scss b/src/components/filter_group/_filter_select_item.scss
index 97c17d71efe..05f631fedb3 100644
--- a/src/components/filter_group/_filter_select_item.scss
+++ b/src/components/filter_group/_filter_select_item.scss
@@ -1,5 +1,6 @@
 .euiFilterSelectItem {
   @include euiFontSizeS;
+  @include euiInteractiveStates;
 
   padding: $euiSizeXS $euiSizeM;
   display: block; // Necessary to make sure it doesn't force the whole popover to be too wide
@@ -8,26 +9,12 @@
   color: $euiTextColor;
   border-bottom: $euiBorderThin;
   border-color: darken($euiColorLightestShade, 2%);
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
+  outline-offset: -$euiFocusRingSize;
 
   &:focus,
   &-isFocused {
-    cursor: pointer;
+    @include euiFocusBackground;
     color: $euiColorPrimary;
-    background-color: $euiFocusBackgroundColor;
-  }
-
-  &[disabled] {
-    color: $euiColorMediumShade;
-    cursor: not-allowed;
-
-    &:hover {
-      text-decoration: none;
-    }
   }
 }
 
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
index 67034762379..3fa99e419ab 100644
--- a/src/components/form/form_control_layout/_form_control_layout.scss
+++ b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -71,10 +71,14 @@
     padding: 0 $euiSizeS;
     width: $euiSizeXL;
     border-radius: 0;
-    background-color: $euiFormInputGroupLabelBackground;
 
-    &:focus {
-      box-shadow: inset 0 0 0 2px $euiFocusRingColor;
+    &:not(:focus) {
+      background-color: $euiFormInputGroupLabelBackground;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $euiFocusRingColor;
+      outline-offset: -2px;
     }
   }
 
diff --git a/src/components/form/range/_range_slider.scss b/src/components/form/range/_range_slider.scss
index 60a72ddb20c..3ee1a73f9aa 100644
--- a/src/components/form/range/_range_slider.scss
+++ b/src/components/form/range/_range_slider.scss
@@ -51,10 +51,14 @@
     border-radius: $euiRangeTrackRadius;
   }
 
-  &:focus,
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible,
   &--hasFocus {
     @include euiRangeThumbPerBrowser {
-      @include euiCustomControlFocused;
+      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
     }
 
     ~ .euiRangeThumb {
diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss
index 19e9f4212fb..7c87e7b7faa 100644
--- a/src/components/form/super_select/_super_select.scss
+++ b/src/components/form/super_select/_super_select.scss
@@ -34,17 +34,8 @@
 
 .euiSuperSelect__item {
   @include euiFontSizeS;
+  @include euiInteractiveStates;
   padding: $euiSizeS;
-
-  &:hover:not(:disabled),
-  &:focus {
-    text-decoration: none;
-    background-color: $euiFocusBackgroundColor;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
 }
 
 .euiSuperSelect__item--hasDividers:not(:last-of-type) {
diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
index 9913e61c376..23e50204520 100644
--- a/src/components/link/_link.scss
+++ b/src/components/link/_link.scss
@@ -1,4 +1,4 @@
-$textColors: (
+$euiLinkColors: (
   subdued: $euiTextSubduedColor,
   primary: $euiColorPrimaryText,
   secondary: $euiColorSecondaryText,
@@ -22,17 +22,19 @@ $textColors: (
   }
 
   // Create color modifiers based on the map
-  @each $name, $color in $textColors {
+  @each $name, $color in $euiLinkColors {
     &.euiLink--#{$name} {
       color: $color;
 
-      &:hover {
+      &:hover,
+      &:focus {
         color: darken($color, 10%);
+        text-decoration: underline;
       }
 
       &:focus {
-        outline: solid 3px transparentize($color, .9);
-        background-color: transparentize($color, .9);
+        @include euiFocusBackground($color);
+        @include euiFocusRing(null, 0);
       }
     }
   }
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index 736e26886f0..28746d871dd 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -1,7 +1,6 @@
 .euiListGroupItem {
   padding: 0;
   border-radius: $euiBorderRadius;
-  overflow: hidden;
   display: flex;
   align-items: center;
   transition: background-color $euiAnimSpeedFast;
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index b2c197feab8..e49bf7658bf 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -40,6 +40,7 @@
   &:focus {
     background-color: $euiFocusBackgroundColor;
     text-decoration: underline;
+    outline-offset: -$euiFocusRingSize;
 
     &::before {
       background-color: $euiColorLightShade;
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 711abfc549a..6440d88540e 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -112,15 +112,15 @@
   a:not([class]) {
     color: $euiLinkColor;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: darken($euiLinkColor, 10%);
       text-decoration: underline;
     }
 
     &:focus {
-      text-decoration: underline;
-      outline: solid 3px transparentize($euiLinkColor, .9);
-      background-color: transparentize($euiLinkColor, .9);
+      @include euiFocusBackground($euiLinkColor);
+      @include euiFocusRing;
     }
   }
 
diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss
index f21e3f9fc1b..e2d91dc18e2 100644
--- a/src/components/tree_view/tree_view.scss
+++ b/src/components/tree_view/tree_view.scss
@@ -9,14 +9,11 @@
 
 .euiTreeView__node {
   max-height: $euiSizeXL;
-  overflow: hidden;
-  cursor: pointer;
   line-height: $euiSizeXL;
 }
 
 .euiTreeView__node--expanded {
   max-height: 100vh;
-  overflow: auto;
 }
 
 .euiTreeView__nodeInner {
@@ -32,12 +29,13 @@
   text-align-last: left;
 
   &:focus {
-    box-shadow: inset 0 0 0 $euiSizeXS / 4 $euiFocusRingColor;
+    @include euiFocusRing('small', 'inner');
   }
 
   &:hover,
-  &:active {
-    background-color: tintOrShade($euiColorLightShade, 50%, 10%);
+  &:active,
+  &:focus {
+    @include euiFocusBackground($euiTextColor);
   }
 
   .euiTreeView__iconPlaceholder {
@@ -85,7 +83,6 @@
 
   .euiTreeView__node--expanded {
     max-height: 100vh;
-    overflow: auto;
   }
 }
 
diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
index 5c176de596c..70dd6b5c869 100644
--- a/src/global_styling/mixins/_button.scss
+++ b/src/global_styling/mixins/_button.scss
@@ -14,18 +14,20 @@
 
 // Adds the focus (and hover) animation for translating up 1px
 @mixin euiButtonFocus {
-  transition: all $euiAnimSpeedNormal ease-in-out;
+  @media screen and (prefers-reduced-motion: no-preference) {
+    transition: transform $euiAnimSpeedNormal ease-in-out, background $euiAnimSpeedNormal ease-in-out;
 
-  &:hover:not([class*='isDisabled']) {
-    transform: translateY(-1px);
-  }
+    &:hover:not([class*='isDisabled']) {
+      transform: translateY(-1px);
+    }
 
-  &:focus {
-    animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
-  }
+    &:focus {
+      animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
+    }
 
-  &:active:not([class*='isDisabled']) {
-    transform: translateY(1px);
+    &:active:not([class*='isDisabled']) {
+      transform: translateY(1px);
+    }
   }
 }
 
diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
index 6864b5f4894..a4f6b926769 100644
--- a/src/global_styling/mixins/_form.scss
+++ b/src/global_styling/mixins/_form.scss
@@ -326,9 +326,27 @@
   }
 }
 
-@mixin euiCustomControlFocused {
-  @include euiFocusRing;
-  border-color: $euiColorPrimary;
+@mixin euiCustomControlFocused($amsterdamSelector: null) {
+  // Requires a selector to work with the Amsterdam outline styles
+  @if ($amsterdamSelector) {
+    + #{$amsterdamSelector} {
+      outline: $euiFocusRingSize solid currentColor;
+    }
+
+    // Chrome
+    &:focus-visible + #{$amsterdamSelector} {
+      outline-style: auto;
+      outline-offset: 3px;
+    }
+
+    &:not(:focus-visible) + #{$amsterdamSelector} {
+      outline: none;
+    }
+  } @else {
+    // Default theme
+    @include euiFocusRing('small', 'outer');
+    border-color: $euiColorPrimary;
+  }
 }
 
 @mixin euiHiddenSelectableInput {
diff --git a/src/global_styling/mixins/_states.scss b/src/global_styling/mixins/_states.scss
index b18b58ab27b..81ed7b92550 100644
--- a/src/global_styling/mixins/_states.scss
+++ b/src/global_styling/mixins/_states.scss
@@ -1,4 +1,4 @@
-@mixin euiFocusRing($size: 'small') {
+@mixin euiFocusRing($size: 'small', $amsterdamOnlyProp: null) {
   @if $size == 'large' {
     // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like EuiButtonEmpty
     // sass-lint:disable-block no-important
@@ -11,3 +11,40 @@
 
 // Keyframe animation declarations can be found in
 // utility/animations.scss
+
+@mixin euiFocusBackground($color: $euiColorPrimary) {
+  background-color: tintOrShade($euiColorPrimary, ((1 - $euiFocusTransparency) * 100%), ((1 - $euiFocusTransparency) * 100%));
+}
+
+@mixin euiHoverState {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+@mixin euiFocusState($color: $euiColorPrimary) {
+  @include euiHoverState;
+  @include euiFocusBackground($color);
+}
+
+@mixin euiDisabledState($color: $euiButtonColorDisabledText) {
+  cursor: not-allowed;
+  text-decoration: none;
+
+  @if ($color) {
+    color: $euiButtonColorDisabledText;
+  }
+}
+
+@mixin euiInteractiveStates($focusColor: $euiColorPrimary, $disabledColor: $euiButtonColorDisabledText) {
+  &:hover {
+    @include euiHoverState;
+  }
+
+  &:focus {
+    @include euiFocusState($focusColor);
+  }
+
+  &:disabled {
+    @include euiDisabledState($disabledColor);
+  }
+}
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 2af0efba720..9406d931723 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -31,7 +31,6 @@ $euiPageBackgroundColor: tintOrShade($euiColorLightestShade, 50%, 30%) !default;
 $euiTextSubduedColor: makeHighContrastColor($euiColorMediumShade) !default;
 $euiTitleColor: shadeOrTint($euiTextColor, 50%, 0%) !default;
 $euiLinkColor: $euiColorPrimary !default;
-$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default;
 
 // Contrasty text variants
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default;
diff --git a/src/global_styling/variables/_states.scss b/src/global_styling/variables/_states.scss
index 5152c3eef2e..172a7c61b03 100644
--- a/src/global_styling/variables/_states.scss
+++ b/src/global_styling/variables/_states.scss
@@ -7,3 +7,7 @@ $euiFocusRingAnimStartSizeLarge: 10px !default;
 // Sizing
 $euiFocusRingSizeLarge: $euiSizeXS !default;
 $euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default;
+
+// Transparency
+$euiFocusTransparency: lightOrDarkTheme(.1, .3) !default;
+$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, ((1 - $euiFocusTransparency) * 100%), ((1 - $euiFocusTransparency) * 100%)) !default;
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
index 0d6ff646887..916e2ebe5ee 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
+++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
@@ -4,5 +4,7 @@
 $euiColorPrimary: #238CFF;
 
 // Contrasty text variants
-$euiColorPrimaryText: $euiColorPrimary;
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary);
+
+$euiLinkColor: $euiColorPrimaryText;
+$euiFocusBackgroundColor: transparentize($euiColorPrimary, .8);
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
index 2ef835ad56a..2dfaf359712 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
+++ b/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
@@ -4,10 +4,12 @@
 $euiColorPrimary:     #006DE4;
 $euiColorSecondary:   #00BFB3;
 $euiColorAccent:      #FC358E;
-
-$euiLinkColor: $euiColorPrimary; // Weirdly this one wasn't updating with new primary color
+$euiColorSuccess: $euiColorSecondary;
 
 // Contrasty text variants
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary);
 $euiColorSecondaryText: makeHighContrastColor($euiColorSecondary);
 $euiColorAccentText: makeHighContrastColor($euiColorAccent);
+
+$euiLinkColor: $euiColorPrimaryText;
+$euiFocusBackgroundColor: transparentize($euiColorPrimary, .8);
diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss
index 1b1ce3ae421..9df71159436 100644
--- a/src/themes/eui-amsterdam/global_styling/index.scss
+++ b/src/themes/eui-amsterdam/global_styling/index.scss
@@ -13,4 +13,4 @@
 @import '../../../global_styling/utility/index';
 
 // The reset file makes use of variables and mixins
-@import '../../../global_styling/reset/index';
+@import 'reset/index';
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
index cc269d1c748..510c54e1ee4 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
@@ -2,14 +2,12 @@
   @include euiButtonBase;
   @include euiFont;
   @include euiFontSize;
+  @include euiButtonFocus;
 
   font-weight: $euiFontWeightMedium;
   text-decoration: none;
-  transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
-
-  // sass-lint:disable mixins-before-declarations
-  // focus states should come after all default styles
-  @include euiButtonFocus;
+  transition: background-color $euiAnimSpeedNormal ease-in-out, border-color $euiAnimSpeedNormal ease-in-out;
+  outline-offset: -1px;
 
   &:hover:not([class*='isDisabled']),
   &:focus {
@@ -18,7 +16,7 @@
 }
 
 // Creates the Amsterdam style of button with a transparent background
-@mixin euiButtonDefaultStyle($color, $transparency: .8) {
+@mixin euiButtonDefaultStyle($color, $transparency: $euiButtonDefaultTransparency) {
   $percentConversion: $transparency * 100%;
   // This variable simulates the possibly darkest background the button could be on
   // Simulates the 20% opaque color on top of the page background color
@@ -31,7 +29,8 @@
   &:not([class*='isDisabled']) {
     &:hover,
     &:focus {
-      background-color: transparentize($color, lightOrDarkTheme(.9, .65));
+      // Duplicated from inert state simply to override default theme
+      background-color: transparentize($color, $transparency);
     }
   }
 }
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss
index d3e9d0c27ac..58efc8e07a6 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss
@@ -4,6 +4,7 @@
   background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
   background-image: euiFormControlGradient();
   background-size: 100% 100%; // 1
+  outline: none; // Blanket remove all outlines relying on our own bottom border
 
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $euiFormBorderColor;
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
index caa1f57ba0d..0f0e235fc28 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss
@@ -6,7 +6,7 @@
 @import '../../../../global_styling/mixins/typography';
 @import 'typography';
 @import '../../../../global_styling/mixins/helpers';
-@import '../../../../global_styling/mixins/states';
+@import 'states';
 @import '../../../../global_styling/mixins/icons';
 
 @import '../../../../global_styling/mixins/beta_badge';
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_states.scss b/src/themes/eui-amsterdam/global_styling/mixins/_states.scss
new file mode 100644
index 00000000000..61baa5c8ca4
--- /dev/null
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_states.scss
@@ -0,0 +1,66 @@
+// In Amsterdam, focus rings default to the browser's `outline`
+// However, some components need to be forced to have the same behavior
+// This re-uses the same faux focus ring mixin, but adjusts the outline instead
+// @param {size} Old param from default theme that won't be used, so it should always be `null`
+// @param {offset} Accepts a specific number or 'inner' or 'outer' to adjust outline position
+@mixin euiFocusRing($size: null, $offset: false) {
+  // Safari & Firefox
+  outline: $euiFocusRingSize solid currentColor;
+
+  // Chrome
+  &:focus-visible {
+    outline-style: auto;
+  }
+
+  &:not(:focus-visible) {
+    outline: none;
+  }
+
+  // Adjusting position with offset
+  @if (type-of($offset) == number) {
+    outline-offset: #{$offset}px;
+  } @else if ($offset == 'inner') {
+    outline-offset: -$euiFocusRingSize;
+  } @else if ($offset == 'outer') {
+    outline-offset: $euiFocusRingSize;
+  }
+}
+
+// Amsterdam uses transparency instead of shading/tinting
+@mixin euiFocusBackground($color: $euiColorPrimary) {
+  background-color: transparentize($color, $euiFocusTransparency);
+}
+
+@mixin euiHoverState {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+@mixin euiFocusState($color: $euiColorPrimary) {
+  @include euiHoverState;
+  @include euiFocusBackground($color);
+}
+
+@mixin euiDisabledState($color: $euiButtonColorDisabledText) {
+  cursor: not-allowed;
+  text-decoration: none;
+
+  @if ($color) {
+    color: $euiButtonColorDisabledText;
+  }
+}
+
+@mixin euiInteractiveStates($focusColor: $euiColorPrimary, $disabledColor: $euiButtonColorDisabledText) {
+  &:hover {
+    @include euiHoverState;
+  }
+
+  &:focus {
+    @include euiFocusState($focusColor);
+  }
+
+  &:disabled {
+    @include euiDisabledState($disabledColor);
+  }
+}
+
diff --git a/src/themes/eui-amsterdam/global_styling/reset/_index.scss b/src/themes/eui-amsterdam/global_styling/reset/_index.scss
new file mode 100644
index 00000000000..03302a02c0f
--- /dev/null
+++ b/src/themes/eui-amsterdam/global_styling/reset/_index.scss
@@ -0,0 +1,3 @@
+@import 'reset';
+@import '../../../../global_styling/reset/hacks';
+@import '../../../../global_styling/reset/scrollbar';
diff --git a/src/themes/eui-amsterdam/global_styling/reset/_reset.scss b/src/themes/eui-amsterdam/global_styling/reset/_reset.scss
new file mode 100644
index 00000000000..429a797a9da
--- /dev/null
+++ b/src/themes/eui-amsterdam/global_styling/reset/_reset.scss
@@ -0,0 +1,149 @@
+// This file allows multi-line selectors to make it more readable
+// sass-lint:disable single-line-per-selector
+
+/**
+ * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
+ *
+ */
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: none;
+  vertical-align: baseline;
+}
+
+code, pre, kbd, samp {
+  font-family: $euiCodeFontFamily;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+}
+
+input, textarea, select, button {
+  font-family: $euiFontFamily;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: $euiFontWeightBold;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+html {
+  @include euiFont;
+  font-size: $euiFontSize;
+  color: $euiTextColor;
+  height: 100%;
+  background-color: $euiPageBackgroundColor;
+}
+
+body {
+  line-height: 1;
+}
+
+*:focus {
+  // 👉 Safari and Firefox innately respect only showing the outline with keyboard only
+  // 💔 But they don't allow coloring of the 'auto'/default outline, so contrast is no good in dark mode.
+  // 👉 For these browsers we use the solid type in order to match with `currentColor`.
+  // 😦 Which does means the outline will be square
+  outline: $euiFocusRingSize solid currentColor;
+  outline-offset: -($euiFocusRingSize / 2);
+
+  // 👀 Chrome respects :focus-visible and allows coloring the `auto` style
+  &:focus-visible {
+    outline-style: auto;
+  }
+
+  //🙅‍♀️ But Chrome also needs to have the outline forcefully removed from regular `:focus` state
+  &:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+a {
+  text-decoration: none;
+  color: $euiColorPrimary;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+a:hover, button, [role='button'] {
+  cursor: pointer;
+}
+
+input {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  color: inherit;
+  border-radius: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; // sass-lint:disable-line no-duplicate-properties
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+hr {
+  margin: 0;
+}
+
+fieldset {
+  min-inline-size: auto;
+}
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
index ae59e94d373..9b8ef04141b 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
@@ -1 +1,2 @@
 $euiButtonColorDisabled: tintOrShade($euiTextColor, 75%, 70%);
+$euiButtonDefaultTransparency: .8;
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss
index 359d61a71fc..3f521b05200 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_index.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_index.scss
@@ -1,5 +1,6 @@
 // Import base theme first, then override
 @import '../../../../global_styling/variables/index';
+@import 'states';
 
 @import 'buttons';
 @import 'borders';
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_states.scss b/src/themes/eui-amsterdam/global_styling/variables/_states.scss
new file mode 100644
index 00000000000..1a5af550cda
--- /dev/null
+++ b/src/themes/eui-amsterdam/global_styling/variables/_states.scss
@@ -0,0 +1,10 @@
+// Color when not using currentColor
+$euiFocusRingColor: $euiColorPrimaryText;
+
+// Sizing
+$euiFocusRingAnimStartSize: 2px;
+$euiFocusRingSize: 2px;
+
+// Transparency
+$euiFocusTransparency: .9;
+$euiFocusBackgroundColor: transparentize($euiColorPrimary, $euiFocusTransparency);
diff --git a/src/themes/eui-amsterdam/overrides/_button.scss b/src/themes/eui-amsterdam/overrides/_button.scss
index 618f8f21c2e..f894c3886c3 100644
--- a/src/themes/eui-amsterdam/overrides/_button.scss
+++ b/src/themes/eui-amsterdam/overrides/_button.scss
@@ -19,7 +19,7 @@
 .euiButton--small {
   // Use a moderately smaller radius on small buttons
   // so that they don't appear completely rounded
-  border-radius: $euiBorderRadius * .667;
+  border-radius: $euiBorderRadius * (2 / 3);
 }
 
 // Change the hollow (bordered) buttons to have a transparent background
@@ -32,12 +32,19 @@
       // Ghost is unique and ALWAYS sits against a dark background.
       $backgroundColorSimulated: mix($euiColorInk, $color, 70%);
       color: makeHighContrastColor($color, $backgroundColorSimulated);
+    } @else {
+      &.euiButton--fill:focus {
+        outline-color: lightOrDarkTheme($euiColorInk, $euiColorGhost);
+      }
     }
 
     &.euiButton--fill:not([class*='isDisabled']) {
+      color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
+
+      &,
       &:hover,
       &:focus {
-        background-color: darken($color, 10%);
+        background-color: $color;
       }
     }
   }
@@ -46,7 +53,6 @@
 // Fix ghost/disabled look specifically
 .euiButton.euiButton-isDisabled.euiButton--ghost:not(.euiButton--fill) {
   &,
-  &:hover,
   &:focus {
     background-color: transparentize($euiButtonColorGhostDisabled, .7);
   }
diff --git a/src/themes/eui-amsterdam/overrides/_button_empty.scss b/src/themes/eui-amsterdam/overrides/_button_empty.scss
index 030bbe8aefb..54e7b5b6520 100644
--- a/src/themes/eui-amsterdam/overrides/_button_empty.scss
+++ b/src/themes/eui-amsterdam/overrides/_button_empty.scss
@@ -11,6 +11,6 @@
 
 @each $name, $color in $euiButtonTypes {
   .euiButtonEmpty--#{$name}:enabled:focus {
-    background-color: transparentize($color, lightOrDarkTheme(.9, .8));
+    @include euiFocusBackground($color);
   }
 }
diff --git a/src/themes/eui-amsterdam/overrides/_button_group.scss b/src/themes/eui-amsterdam/overrides/_button_group.scss
index 33cf0d61501..1b890897aa4 100644
--- a/src/themes/eui-amsterdam/overrides/_button_group.scss
+++ b/src/themes/eui-amsterdam/overrides/_button_group.scss
@@ -6,6 +6,14 @@
 .euiButtonGroup--small {
   .euiButtonGroupButton {
     border: none !important; // sass-lint:disable-line no-important
+
+    &:focus {
+      @include euiFocusRing(null, 'inner');
+    }
+
+    &.euiButtonGroupButton-isSelected:focus {
+      @include euiFocusRing(null, -3);
+    }
   }
 
   .euiButtonGroupButton-isDisabled:not(.euiButtonGroupButton--ghost):not(.euiButtonGroupButton-isSelected) {
@@ -40,10 +48,32 @@
 .euiButtonGroup--small .euiButtonGroup__buttons {
   // Use a moderately smaller radius on small buttons
   // so that they don't appear completely rounded
-  border-radius: $euiBorderRadius * .667;
+  border-radius: $euiBorderRadius * (2 / 3);
 }
 
 .euiButtonGroup--compressed .euiButtonGroupButton {
   // Add 1 to the border radius to account for the background-clip
   border-radius: $euiFormControlCompressedBorderRadius + 1;
+
+  &:not([class*='isDisabled']):focus-within {
+    outline: none; // Resetting from default theme
+  }
+
+  &:not([class*='isDisabled']):focus {
+    @include euiFocusRing(null, 'false');
+  }
+
+  @each $name, $color in $euiButtonTypes {
+    &--#{$name} {
+      &:not([class*='isDisabled']):hover,
+      &:not([class*='isDisabled']):focus,
+      &:not([class*='isDisabled']):focus-within {
+        @include euiFocusBackground($color);
+      }
+
+      &:not([class*='isDisabled']):focus {
+        outline-color: $color;
+      }
+    }
+  }
 }
diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss
index 8db686b16d5..980b2d90114 100644
--- a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss
+++ b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss
@@ -18,6 +18,10 @@
     }
   }
 
+  [class*='euiButton']:focus {
+    @include euiFocusRing(null, 'inner');
+  }
+
   .euiToolTipAnchor > .euiIcon {
     @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right', $internal: true);
   }
diff --git a/src/themes/eui-amsterdam/overrides/_form_controls.scss b/src/themes/eui-amsterdam/overrides/_form_controls.scss
new file mode 100644
index 00000000000..27780109657
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_form_controls.scss
@@ -0,0 +1,19 @@
+.euiRadio .euiRadio__input {
+  &:focus {
+    @include euiCustomControlFocused('.euiRadio__circle');
+  }
+}
+
+.euiCheckbox .euiCheckbox__input {
+  &:focus {
+    @include euiCustomControlFocused('.euiCheckbox__square');
+  }
+}
+
+.euiSwitch .euiSwitch__button:focus {
+  @include euiFocusRing(null, 'outer');
+
+  .euiSwitch__track {
+    outline: none;
+  }
+}
diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/eui-amsterdam/overrides/_header.scss
index 9f65c9a03b6..31976f5af01 100644
--- a/src/themes/eui-amsterdam/overrides/_header.scss
+++ b/src/themes/eui-amsterdam/overrides/_header.scss
@@ -51,6 +51,10 @@
     padding: $euiSizeXS $euiSize;
     clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%);
 
+    &:focus {
+      @include euiFocusRing(null, 'inner');
+    }
+
     // If it's a link the easiest way to detect is via our .euiLink class since it can accept either href or onClick
     // Also helps to add specificity for overriding hover state
     &.euiBreadcrumb--collapsed,
diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss
index 6b40439fcd8..df44dc2513a 100644
--- a/src/themes/eui-amsterdam/overrides/_index.scss
+++ b/src/themes/eui-amsterdam/overrides/_index.scss
@@ -6,6 +6,9 @@
 @import 'code';
 @import 'context_menu';
 @import 'filter_group';
+@import 'form_control_layout';
+@import 'form_control_layout_delimited';
+@import 'form_controls';
 @import 'header';
 @import 'image';
 @import 'mark';
@@ -15,5 +18,3 @@
 @import 'progress';
 @import 'text';
 @import 'toast';
-@import 'form_control_layout';
-@import 'form_control_layout_delimited';
diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/eui/eui_colors_dark.scss
index 02cb1b51b48..eb7a1ca7198 100644
--- a/src/themes/eui/eui_colors_dark.scss
+++ b/src/themes/eui/eui_colors_dark.scss
@@ -27,7 +27,6 @@ $euiColorFullShade: #FFF;
 // Variations from core
 $euiTextColor: #DFE5EF;
 $euiLinkColor: $euiColorPrimary;
-$euiFocusBackgroundColor: #232635;
 $euiShadowColor: #000;
 $euiShadowColorLarge: #000;
 $euiPageBackgroundColor: shade($euiColorLightestShade, 30%);