diff --git a/package.json b/package.json
index 5bf39a57c1ac5..419edcf268356 100644
--- a/package.json
+++ b/package.json
@@ -127,7 +127,7 @@
     "@elastic/charts": "19.2.0",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.8.0",
-    "@elastic/eui": "23.3.1",
+    "@elastic/eui": "24.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "^2.5.0",
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
index 744a656c54a7f..2c9251b03059a 100644
--- a/packages/kbn-ui-shared-deps/package.json
+++ b/packages/kbn-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "19.2.0",
-    "@elastic/eui": "23.3.1",
+    "@elastic/eui": "24.1.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index f5b17f8d214e9..60963c0acb990 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -1014,7 +1014,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                           </div>
                         </div>
                         <button
-                          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
                           type="button"
                         >
                           <span
@@ -1026,13 +1026,9 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                               data-euiicon-type="cross"
                             />
                             <span
-                              class="euiButtonEmpty__text"
+                              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                             >
-                              <span
-                                class="euiCollapsibleNav__closeButtonLabel"
-                              >
-                                close
-                              </span>
+                              close
                             </span>
                           </span>
                         </button>
@@ -1662,7 +1658,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                             </div>
                           </div>
                           <button
-                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
                             type="button"
                           >
                             <span
@@ -1674,13 +1670,9 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                                 data-euiicon-type="cross"
                               />
                               <span
-                                class="euiButtonEmpty__text"
+                                class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                               >
-                                <span
-                                  class="euiCollapsibleNav__closeButtonLabel"
-                                >
-                                  close
-                                </span>
+                                close
                               </span>
                             </span>
                           </button>
@@ -3119,38 +3111,43 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                       </EuiShowFor>
                     </div>
                   </EuiFlexItem>
-                  <EuiButtonEmpty
-                    className="euiCollapsibleNav__closeButton"
-                    iconType="cross"
-                    onClick={[Function]}
-                    size="xs"
+                  <EuiScreenReaderOnly
+                    showOnFocus={true}
                   >
-                    <button
-                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                    <EuiButtonEmpty
+                      className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                      iconType="cross"
                       onClick={[Function]}
-                      type="button"
+                      size="xs"
+                      textProps={
+                        Object {
+                          "className": "euiCollapsibleNav__closeButtonText",
+                        }
+                      }
                     >
-                      <span
-                        className="euiButtonEmpty__content"
+                      <button
+                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonEmpty__icon"
-                          size="m"
-                          type="cross"
+                        <span
+                          className="euiButtonEmpty__content"
                         >
-                          <div
+                          <EuiIcon
                             aria-hidden="true"
                             className="euiButtonEmpty__icon"
-                            data-euiicon-type="cross"
                             size="m"
-                          />
-                        </EuiIcon>
-                        <span
-                          className="euiButtonEmpty__text"
-                        >
+                            type="cross"
+                          >
+                            <div
+                              aria-hidden="true"
+                              className="euiButtonEmpty__icon"
+                              data-euiicon-type="cross"
+                              size="m"
+                            />
+                          </EuiIcon>
                           <span
-                            className="euiCollapsibleNav__closeButtonLabel"
+                            className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                           >
                             <EuiI18n
                               default="close"
@@ -3160,9 +3157,9 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                             </EuiI18n>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </EuiButtonEmpty>
+                      </button>
+                    </EuiButtonEmpty>
+                  </EuiScreenReaderOnly>
                 </nav>
               </div>
               <div
@@ -4032,38 +4029,43 @@ exports[`CollapsibleNav renders the default nav 2`] = `
                       </EuiShowFor>
                     </div>
                   </EuiFlexItem>
-                  <EuiButtonEmpty
-                    className="euiCollapsibleNav__closeButton"
-                    iconType="cross"
-                    onClick={[Function]}
-                    size="xs"
+                  <EuiScreenReaderOnly
+                    showOnFocus={true}
                   >
-                    <button
-                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                    <EuiButtonEmpty
+                      className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                      iconType="cross"
                       onClick={[Function]}
-                      type="button"
+                      size="xs"
+                      textProps={
+                        Object {
+                          "className": "euiCollapsibleNav__closeButtonText",
+                        }
+                      }
                     >
-                      <span
-                        className="euiButtonEmpty__content"
+                      <button
+                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonEmpty__icon"
-                          size="m"
-                          type="cross"
+                        <span
+                          className="euiButtonEmpty__content"
                         >
-                          <div
+                          <EuiIcon
                             aria-hidden="true"
                             className="euiButtonEmpty__icon"
-                            data-euiicon-type="cross"
                             size="m"
-                          />
-                        </EuiIcon>
-                        <span
-                          className="euiButtonEmpty__text"
-                        >
+                            type="cross"
+                          >
+                            <div
+                              aria-hidden="true"
+                              className="euiButtonEmpty__icon"
+                              data-euiicon-type="cross"
+                              size="m"
+                            />
+                          </EuiIcon>
                           <span
-                            className="euiCollapsibleNav__closeButtonLabel"
+                            className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                           >
                             <EuiI18n
                               default="close"
@@ -4073,9 +4075,9 @@ exports[`CollapsibleNav renders the default nav 2`] = `
                             </EuiI18n>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </EuiButtonEmpty>
+                      </button>
+                    </EuiButtonEmpty>
+                  </EuiScreenReaderOnly>
                 </nav>
               </div>
               <div
@@ -4524,7 +4526,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                           </div>
                         </div>
                         <button
-                          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
                           type="button"
                         >
                           <span
@@ -4536,13 +4538,9 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                               data-euiicon-type="cross"
                             />
                             <span
-                              class="euiButtonEmpty__text"
+                              class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                             >
-                              <span
-                                class="euiCollapsibleNav__closeButtonLabel"
-                              >
-                                close
-                              </span>
+                              close
                             </span>
                           </span>
                         </button>
@@ -4717,7 +4715,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                             </div>
                           </div>
                           <button
-                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
                             type="button"
                           >
                             <span
@@ -4729,13 +4727,9 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                                 data-euiicon-type="cross"
                               />
                               <span
-                                class="euiButtonEmpty__text"
+                                class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                               >
-                                <span
-                                  class="euiCollapsibleNav__closeButtonLabel"
-                                >
-                                  close
-                                </span>
+                                close
                               </span>
                             </span>
                           </button>
@@ -5120,38 +5114,43 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                       </EuiShowFor>
                     </div>
                   </EuiFlexItem>
-                  <EuiButtonEmpty
-                    className="euiCollapsibleNav__closeButton"
-                    iconType="cross"
-                    onClick={[Function]}
-                    size="xs"
+                  <EuiScreenReaderOnly
+                    showOnFocus={true}
                   >
-                    <button
-                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                    <EuiButtonEmpty
+                      className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                      iconType="cross"
                       onClick={[Function]}
-                      type="button"
+                      size="xs"
+                      textProps={
+                        Object {
+                          "className": "euiCollapsibleNav__closeButtonText",
+                        }
+                      }
                     >
-                      <span
-                        className="euiButtonEmpty__content"
+                      <button
+                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonEmpty__icon"
-                          size="m"
-                          type="cross"
+                        <span
+                          className="euiButtonEmpty__content"
                         >
-                          <div
+                          <EuiIcon
                             aria-hidden="true"
                             className="euiButtonEmpty__icon"
-                            data-euiicon-type="cross"
                             size="m"
-                          />
-                        </EuiIcon>
-                        <span
-                          className="euiButtonEmpty__text"
-                        >
+                            type="cross"
+                          >
+                            <div
+                              aria-hidden="true"
+                              className="euiButtonEmpty__icon"
+                              data-euiicon-type="cross"
+                              size="m"
+                            />
+                          </EuiIcon>
                           <span
-                            className="euiCollapsibleNav__closeButtonLabel"
+                            className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                           >
                             <EuiI18n
                               default="close"
@@ -5161,9 +5160,9 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                             </EuiI18n>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </EuiButtonEmpty>
+                      </button>
+                    </EuiButtonEmpty>
+                  </EuiScreenReaderOnly>
                 </nav>
               </div>
               <div
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 305a4b2ed5b30..41f1ece34c415 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -2216,7 +2216,7 @@ exports[`Header renders 2`] = `
       position="fixed"
     >
       <div
-        className="euiHeader euiHeader--fixed"
+        className="euiHeader euiHeader--default euiHeader--fixed"
       >
         <EuiHeaderSection
           grow={false}
@@ -6319,7 +6319,7 @@ exports[`Header renders 3`] = `
       position="fixed"
     >
       <div
-        className="euiHeader euiHeader--fixed"
+        className="euiHeader euiHeader--default euiHeader--fixed"
       >
         <EuiHeaderSection
           grow={false}
@@ -9041,7 +9041,7 @@ exports[`Header renders 3`] = `
                               </div>
                             </div>
                             <button
-                              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
                               type="button"
                             >
                               <span
@@ -9053,13 +9053,9 @@ exports[`Header renders 3`] = `
                                   data-euiicon-type="cross"
                                 />
                                 <span
-                                  class="euiButtonEmpty__text"
+                                  class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                                 >
-                                  <span
-                                    class="euiCollapsibleNav__closeButtonLabel"
-                                  >
-                                    close
-                                  </span>
+                                  close
                                 </span>
                               </span>
                             </button>
@@ -9277,7 +9273,7 @@ exports[`Header renders 3`] = `
                                 </div>
                               </div>
                               <button
-                                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
                                 type="button"
                               >
                                 <span
@@ -9289,13 +9285,9 @@ exports[`Header renders 3`] = `
                                     data-euiicon-type="cross"
                                   />
                                   <span
-                                    class="euiButtonEmpty__text"
+                                    class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                                   >
-                                    <span
-                                      class="euiCollapsibleNav__closeButtonLabel"
-                                    >
-                                      close
-                                    </span>
+                                    close
                                   </span>
                                 </span>
                               </button>
@@ -9764,38 +9756,43 @@ exports[`Header renders 3`] = `
                           </EuiShowFor>
                         </div>
                       </EuiFlexItem>
-                      <EuiButtonEmpty
-                        className="euiCollapsibleNav__closeButton"
-                        iconType="cross"
-                        onClick={[Function]}
-                        size="xs"
+                      <EuiScreenReaderOnly
+                        showOnFocus={true}
                       >
-                        <button
-                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
+                        <EuiButtonEmpty
+                          className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                          iconType="cross"
                           onClick={[Function]}
-                          type="button"
+                          size="xs"
+                          textProps={
+                            Object {
+                              "className": "euiCollapsibleNav__closeButtonText",
+                            }
+                          }
                         >
-                          <span
-                            className="euiButtonEmpty__content"
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                            onClick={[Function]}
+                            type="button"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonEmpty__icon"
-                              size="m"
-                              type="cross"
+                            <span
+                              className="euiButtonEmpty__content"
                             >
-                              <div
+                              <EuiIcon
                                 aria-hidden="true"
                                 className="euiButtonEmpty__icon"
-                                data-euiicon-type="cross"
                                 size="m"
-                              />
-                            </EuiIcon>
-                            <span
-                              className="euiButtonEmpty__text"
-                            >
+                                type="cross"
+                              >
+                                <div
+                                  aria-hidden="true"
+                                  className="euiButtonEmpty__icon"
+                                  data-euiicon-type="cross"
+                                  size="m"
+                                />
+                              </EuiIcon>
                               <span
-                                className="euiCollapsibleNav__closeButtonLabel"
+                                className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
                               >
                                 <EuiI18n
                                   default="close"
@@ -9805,9 +9802,9 @@ exports[`Header renders 3`] = `
                                 </EuiI18n>
                               </span>
                             </span>
-                          </span>
-                        </button>
-                      </EuiButtonEmpty>
+                          </button>
+                        </EuiButtonEmpty>
+                      </EuiScreenReaderOnly>
                     </nav>
                   </div>
                   <div
@@ -11494,7 +11491,7 @@ exports[`Header renders 4`] = `
       position="fixed"
     >
       <div
-        className="euiHeader euiHeader--fixed"
+        className="euiHeader euiHeader--default euiHeader--fixed"
       >
         <EuiHeaderSection
           grow={false}
@@ -14173,6 +14170,7 @@ exports[`Header renders 4`] = `
                                 >
                                   <span
                                     className="euiToolTipAnchor euiListGroupItem__tooltip"
+                                    onKeyUp={[Function]}
                                     onMouseOut={[Function]}
                                     onMouseOver={[Function]}
                                   >
@@ -14302,6 +14300,7 @@ exports[`Header renders 4`] = `
                                 >
                                   <span
                                     className="euiToolTipAnchor euiListGroupItem__tooltip"
+                                    onKeyUp={[Function]}
                                     onMouseOut={[Function]}
                                     onMouseOver={[Function]}
                                   >
diff --git a/src/legacy/server/sass/build.test.js b/src/legacy/server/sass/build.test.js
index 46a898c30f84e..71c43ac010962 100644
--- a/src/legacy/server/sass/build.test.js
+++ b/src/legacy/server/sass/build.test.js
@@ -33,6 +33,8 @@ afterEach(async () => {
 });
 
 it('builds light themed SASS', async () => {
+  // Increased timeout from 5000ms due to intermittent timeout failures
+  jest.setTimeout(60000);
   const targetPath = resolve(TMP, 'style.css');
   await new Build({
     sourcePath: FIXTURE,
diff --git a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
index 22cc873cbdb5d..53ef164685a1c 100644
--- a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
+++ b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
@@ -1264,6 +1264,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                                     >
                                                       <span
                                                         className="euiToolTipAnchor"
+                                                        onKeyUp={[Function]}
                                                         onMouseOut={[Function]}
                                                         onMouseOver={[Function]}
                                                       >
@@ -2772,6 +2773,7 @@ exports[`NewVisModal should render as expected 1`] = `
                                                     >
                                                       <span
                                                         className="euiToolTipAnchor"
+                                                        onKeyUp={[Function]}
                                                         onMouseOut={[Function]}
                                                         onMouseOver={[Function]}
                                                       >
diff --git a/test/functional/services/apps_menu.ts b/test/functional/services/apps_menu.ts
index 969bddbd30f9a..aa7934d6b1156 100644
--- a/test/functional/services/apps_menu.ts
+++ b/test/functional/services/apps_menu.ts
@@ -58,6 +58,10 @@ export function AppsMenuProvider({ getService, getPageObjects }: FtrProviderCont
     public async closeCollapsibleNav() {
       const CLOSE_BUTTON = '[data-test-subj=collapsibleNav] > button';
       if (await find.existsByCssSelector(CLOSE_BUTTON)) {
+        // Close button is only visible when focused
+        const button = await find.byCssSelector(CLOSE_BUTTON);
+        await button.focus();
+
         await find.clickByCssSelector(CLOSE_BUTTON);
       }
     }
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
index acd78cb4955e3..24b38fae96653 100644
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "23.3.1",
+    "@elastic/eui": "24.1.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
diff --git a/test/plugin_functional/plugins/kbn_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
index 45d07933c4209..71a635c444b8c 100644
--- a/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "23.3.1",
+    "@elastic/eui": "24.1.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
index ca99e9b5995c1..78f0b42a6fbda 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "23.3.1",
+    "@elastic/eui": "24.1.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
index 63dde0fa96dd3..6dbc9c71f2e81 100644
--- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "23.3.1",
+    "@elastic/eui": "24.1.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/x-pack/package.json b/x-pack/package.json
index b3dcde2194d3f..fb708ab09d841 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -190,7 +190,7 @@
     "@elastic/apm-rum-react": "^1.1.1",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.8.0",
-    "@elastic/eui": "23.3.1",
+    "@elastic/eui": "24.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.3.0",
     "@elastic/node-crypto": "1.1.1",
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
index 3de725dc58ea7..6a20e3c103709 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
@@ -161,6 +161,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
                    
                   <span
                     className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
                   >
@@ -575,6 +576,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                    
                   <span
                     className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
                   >
@@ -754,6 +756,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                  
                 <span
                   className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -859,6 +862,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -889,6 +893,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     <br />
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -958,6 +963,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
               >
                 <span
                   className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -984,6 +990,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                  
                 <span
                   className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -1089,6 +1096,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -1119,6 +1127,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     <br />
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -1188,6 +1197,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
               >
                 <span
                   className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -1214,6 +1224,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                  
                 <span
                   className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -1319,6 +1330,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -1349,6 +1361,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     <br />
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -1418,6 +1431,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
               >
                 <span
                   className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -1444,6 +1458,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                  
                 <span
                   className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
@@ -1549,6 +1564,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -1579,6 +1595,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     <br />
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -1648,6 +1665,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
               >
                 <span
                   className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                 >
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset.examples.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset.examples.storyshot
index 6601f570209e9..14791cd3d8b25 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset.examples.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset.examples.storyshot
@@ -63,6 +63,7 @@ exports[`Storyshots components/Assets/Asset airplane 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -88,6 +89,7 @@ exports[`Storyshots components/Assets/Asset airplane 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -118,6 +120,7 @@ exports[`Storyshots components/Assets/Asset airplane 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -148,6 +151,7 @@ exports[`Storyshots components/Assets/Asset airplane 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -237,6 +241,7 @@ exports[`Storyshots components/Assets/Asset marker 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -262,6 +267,7 @@ exports[`Storyshots components/Assets/Asset marker 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -292,6 +298,7 @@ exports[`Storyshots components/Assets/Asset marker 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -322,6 +329,7 @@ exports[`Storyshots components/Assets/Asset marker 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot
index aff630b21c770..1b8f1480759f6 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot
@@ -422,6 +422,7 @@ Array [
                     >
                       <span
                         className="euiToolTipAnchor"
+                        onKeyUp={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
                       >
@@ -447,6 +448,7 @@ Array [
                     >
                       <span
                         className="euiToolTipAnchor"
+                        onKeyUp={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
                       >
@@ -477,6 +479,7 @@ Array [
                     >
                       <span
                         className="euiToolTipAnchor"
+                        onKeyUp={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
                       >
@@ -507,6 +510,7 @@ Array [
                     >
                       <span
                         className="euiToolTipAnchor"
+                        onKeyUp={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
                       >
@@ -585,6 +589,7 @@ Array [
                     >
                       <span
                         className="euiToolTipAnchor"
+                        onKeyUp={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
                       >
@@ -610,6 +615,7 @@ Array [
                     >
                       <span
                         className="euiToolTipAnchor"
+                        onKeyUp={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
                       >
@@ -640,6 +646,7 @@ Array [
                     >
                       <span
                         className="euiToolTipAnchor"
+                        onKeyUp={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
                       >
@@ -670,6 +677,7 @@ Array [
                     >
                       <span
                         className="euiToolTipAnchor"
+                        onKeyUp={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
                       >
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_controls.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_controls.stories.storyshot
index 6f12f68356467..408b0679c415f 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_controls.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_controls.stories.storyshot
@@ -16,6 +16,7 @@ exports[`Storyshots components/SavedElementsModal/ElementControls has two button
     >
       <span
         className="euiToolTipAnchor"
+        onKeyUp={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
       >
@@ -42,6 +43,7 @@ exports[`Storyshots components/SavedElementsModal/ElementControls has two button
     >
       <span
         className="euiToolTipAnchor"
+        onKeyUp={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
       >
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_grid.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_grid.stories.storyshot
index be0fb0573c394..1c506819df1fb 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_grid.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/element_grid.stories.storyshot
@@ -66,6 +66,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -92,6 +93,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -170,6 +172,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -196,6 +199,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -274,6 +278,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -300,6 +305,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/saved_elements_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/saved_elements_modal.stories.storyshot
index 03093b41300b8..04b2184f27462 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/saved_elements_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__examples__/__snapshots__/saved_elements_modal.stories.storyshot
@@ -362,6 +362,7 @@ Array [
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -388,6 +389,7 @@ Array [
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -466,6 +468,7 @@ Array [
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -492,6 +495,7 @@ Array [
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -570,6 +574,7 @@ Array [
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -596,6 +601,7 @@ Array [
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -851,6 +857,7 @@ Array [
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
@@ -877,6 +884,7 @@ Array [
                   >
                     <span
                       className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
                     >
diff --git a/x-pack/plugins/canvas/public/components/sidebar_header/__examples__/__snapshots__/sidebar_header.stories.storyshot b/x-pack/plugins/canvas/public/components/sidebar_header/__examples__/__snapshots__/sidebar_header.stories.storyshot
index 4d5b9570ee20f..16263aa7ea384 100644
--- a/x-pack/plugins/canvas/public/components/sidebar_header/__examples__/__snapshots__/sidebar_header.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/sidebar_header/__examples__/__snapshots__/sidebar_header.stories.storyshot
@@ -55,6 +55,7 @@ exports[`Storyshots components/Sidebar/SidebarHeader with layer controls 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -80,6 +81,7 @@ exports[`Storyshots components/Sidebar/SidebarHeader with layer controls 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -105,6 +107,7 @@ exports[`Storyshots components/Sidebar/SidebarHeader with layer controls 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
@@ -130,6 +133,7 @@ exports[`Storyshots components/Sidebar/SidebarHeader with layer controls 1`] = `
         >
           <span
             className="euiToolTipAnchor"
+            onKeyUp={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
           >
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot
index 14466cab1a698..f8583d7cd0dc0 100644
--- a/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot
+++ b/x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot
@@ -169,6 +169,7 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no series 1`] = `
     >
       <span
         className="euiToolTipAnchor"
+        onKeyUp={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
       >
diff --git a/x-pack/plugins/maps/public/classes/styles/color_utils.tsx b/x-pack/plugins/maps/public/classes/styles/color_utils.tsx
index 116e03096b0f5..0192a9d7ca68f 100644
--- a/x-pack/plugins/maps/public/classes/styles/color_utils.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/color_utils.tsx
@@ -139,11 +139,11 @@ const COLOR_PALETTES_CONFIGS: ColorPalette[] = [
   },
   {
     id: 'palette_20',
-    colors: euiPaletteColorBlind(2),
+    colors: euiPaletteColorBlind({ rotations: 2 }),
   },
   {
     id: 'palette_30',
-    colors: euiPaletteColorBlind(3),
+    colors: euiPaletteColorBlind({ rotations: 3 }),
   },
 ];
 
diff --git a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
index a2c7e72e51a9c..26775608637c0 100644
--- a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
@@ -115,32 +115,28 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         },
         "euiCardSpacing": "16px",
         "euiCheckBoxSize": "16px",
-        "euiCodeBlockAdditionBackgroundColor": "#144212",
-        "euiCodeBlockAdditionColor": "#e6e1dc",
-        "euiCodeBlockAttributeColor": "#80cbbf",
+        "euiCodeBlockAdditionColor": "#54b399",
+        "euiCodeBlockAttributeColor": "inherit",
         "euiCodeBlockBackgroundColor": "#25262e",
-        "euiCodeBlockBuiltInColor": "#0086b3",
         "euiCodeBlockColor": "#dfe5ef",
-        "euiCodeBlockCommentColor": "#656565",
-        "euiCodeBlockDeletionBackgroundColor": "#660000",
-        "euiCodeBlockDeletionColor": "#e6e1dc",
-        "euiCodeBlockFunctionTitleColor": "#75a5ff",
-        "euiCodeBlockKeywordColor": "#c792ea",
-        "euiCodeBlockMetaColor": "#75a5ff",
-        "euiCodeBlockNameColor": "#e06c75",
-        "euiCodeBlockNumberColor": "#f77669",
-        "euiCodeBlockParamsColor": "#eefff7",
-        "euiCodeBlockRegexpColor": "#009926",
-        "euiCodeBlockSectionColor": "#ffc66d",
+        "euiCodeBlockCommentColor": "#8d919a",
+        "euiCodeBlockDeletionColor": "#ff6666",
+        "euiCodeBlockFunctionTitleColor": "inherit",
+        "euiCodeBlockKeywordColor": "#a184c2",
+        "euiCodeBlockMetaColor": "#8d919a",
+        "euiCodeBlockNameColor": "#6092c0",
+        "euiCodeBlockNumberColor": "#54b399",
+        "euiCodeBlockParamsColor": "inherit",
+        "euiCodeBlockSectionColor": "#e7664c",
         "euiCodeBlockSelectedBackgroundColor": "inherit",
-        "euiCodeBlockSelectorClassColor": "#ffcb68",
-        "euiCodeBlockSelectorIdColor": "#f77669",
-        "euiCodeBlockSelectorTagColor": "#c792ea",
-        "euiCodeBlockStringColor": "#c3e88d",
-        "euiCodeBlockSymbolColor": "#c792ea",
-        "euiCodeBlockTagColor": "#abb2bf",
-        "euiCodeBlockTitleColor": "#75a5ff",
-        "euiCodeBlockTypeColor": "#da4939",
+        "euiCodeBlockSelectorClassColor": "inherit",
+        "euiCodeBlockSelectorIdColor": "inherit",
+        "euiCodeBlockSelectorTagColor": "inherit",
+        "euiCodeBlockStringColor": "#d77092",
+        "euiCodeBlockSymbolColor": "#e7664c",
+        "euiCodeBlockTagColor": "#6092c0",
+        "euiCodeBlockTitleColor": "#da8b45",
+        "euiCodeBlockTypeColor": "#6092c0",
         "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace",
         "euiCollapsibleNavGroupDarkBackgroundColor": "#131317",
         "euiCollapsibleNavGroupDarkHighContrastColor": "#1ba9f5",
@@ -230,6 +226,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "warning": "#ffce7a",
         },
         "euiFilePickerTallHeight": "128px",
+        "euiFlyoutBorder": "1px solid #343741",
         "euiFocusBackgroundColor": "#232635",
         "euiFocusRingAnimStartColor": "rgba(27, 169, 245, 0)",
         "euiFocusRingAnimStartSize": "6px",
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
index 391aaba17ae3a..22f89ffc6927e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
@@ -115,32 +115,28 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         },
         "euiCardSpacing": "16px",
         "euiCheckBoxSize": "16px",
-        "euiCodeBlockAdditionBackgroundColor": "#144212",
-        "euiCodeBlockAdditionColor": "#e6e1dc",
-        "euiCodeBlockAttributeColor": "#80cbbf",
+        "euiCodeBlockAdditionColor": "#54b399",
+        "euiCodeBlockAttributeColor": "inherit",
         "euiCodeBlockBackgroundColor": "#25262e",
-        "euiCodeBlockBuiltInColor": "#0086b3",
         "euiCodeBlockColor": "#dfe5ef",
-        "euiCodeBlockCommentColor": "#656565",
-        "euiCodeBlockDeletionBackgroundColor": "#660000",
-        "euiCodeBlockDeletionColor": "#e6e1dc",
-        "euiCodeBlockFunctionTitleColor": "#75a5ff",
-        "euiCodeBlockKeywordColor": "#c792ea",
-        "euiCodeBlockMetaColor": "#75a5ff",
-        "euiCodeBlockNameColor": "#e06c75",
-        "euiCodeBlockNumberColor": "#f77669",
-        "euiCodeBlockParamsColor": "#eefff7",
-        "euiCodeBlockRegexpColor": "#009926",
-        "euiCodeBlockSectionColor": "#ffc66d",
+        "euiCodeBlockCommentColor": "#8d919a",
+        "euiCodeBlockDeletionColor": "#ff6666",
+        "euiCodeBlockFunctionTitleColor": "inherit",
+        "euiCodeBlockKeywordColor": "#a184c2",
+        "euiCodeBlockMetaColor": "#8d919a",
+        "euiCodeBlockNameColor": "#6092c0",
+        "euiCodeBlockNumberColor": "#54b399",
+        "euiCodeBlockParamsColor": "inherit",
+        "euiCodeBlockSectionColor": "#e7664c",
         "euiCodeBlockSelectedBackgroundColor": "inherit",
-        "euiCodeBlockSelectorClassColor": "#ffcb68",
-        "euiCodeBlockSelectorIdColor": "#f77669",
-        "euiCodeBlockSelectorTagColor": "#c792ea",
-        "euiCodeBlockStringColor": "#c3e88d",
-        "euiCodeBlockSymbolColor": "#c792ea",
-        "euiCodeBlockTagColor": "#abb2bf",
-        "euiCodeBlockTitleColor": "#75a5ff",
-        "euiCodeBlockTypeColor": "#da4939",
+        "euiCodeBlockSelectorClassColor": "inherit",
+        "euiCodeBlockSelectorIdColor": "inherit",
+        "euiCodeBlockSelectorTagColor": "inherit",
+        "euiCodeBlockStringColor": "#d77092",
+        "euiCodeBlockSymbolColor": "#e7664c",
+        "euiCodeBlockTagColor": "#6092c0",
+        "euiCodeBlockTitleColor": "#da8b45",
+        "euiCodeBlockTypeColor": "#6092c0",
         "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace",
         "euiCollapsibleNavGroupDarkBackgroundColor": "#131317",
         "euiCollapsibleNavGroupDarkHighContrastColor": "#1ba9f5",
@@ -230,6 +226,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
           "warning": "#ffce7a",
         },
         "euiFilePickerTallHeight": "128px",
+        "euiFlyoutBorder": "1px solid #343741",
         "euiFocusBackgroundColor": "#232635",
         "euiFocusRingAnimStartColor": "rgba(27, 169, 245, 0)",
         "euiFocusRingAnimStartSize": "6px",
diff --git a/yarn.lock b/yarn.lock
index f7b310cca7590..cf9126b668e51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1332,10 +1332,10 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@23.3.1":
-  version "23.3.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-23.3.1.tgz#08516910d24eb148110f99d3bd7551240f9ef3d4"
-  integrity sha512-81N5xXeZwm8HEPE5RAPQFFUNUzYlTVJcNhW+DDN0EY8MlxVob9hgHy0AwshQGfrHlqhm+4gix110pW3n9Jweyw==
+"@elastic/eui@24.1.0":
+  version "24.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-24.1.0.tgz#40593cc474237e8c464d182faa50c748b3f66822"
+  integrity sha512-Y7s327h0Z8dsO6MY7Sn1k5pOrf9ZjWH/ZE2gVtfBn2He5aFahS/+A434EBqFG0YV5W1VZtYiXtSj0AE1gjtrrw==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/enzyme" "^3.1.13"