From 0ea03637737832f5f43c3fab2b1bf0b04318930a Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 16 Nov 2023 14:27:37 -0800
Subject: [PATCH] [Design feedback] Re-add animation delay, shade hover actions
 darker

---
 .../datagrid/_data_grid_data_row.scss           | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 8e0a4286b922..990fec953698 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -51,17 +51,22 @@
     }
   }
 
-  // On hover, color the cell actions more subdued and show a same-colored focus ring
-  // so the cell actions look less weird on datagrids without cell borders
+  // On hover
   &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
     .euiDataGridRowCell__actions {
-      background-color: $euiBorderColor;
-      border-color: $euiBorderColor;
-      color: $euiColorFullShade;
+      // Delay the actions showing on hover
+      // (Note: the focus ring show instantly on hover & the actions show instantly on focus)
+      animation-delay: $euiAnimSpeedNormal;
+
+      // Color the actions and focus ring grayscale on hover
+      // (Actions look odd without the ring on grids without cell borders)
+      background-color: $euiColorDarkShade;
+      border-color: $euiColorDarkShade;
+      color: $euiColorEmptyShade;
     }
 
     &::after {
-      border-color: $euiBorderColor;
+      border-color: $euiColorDarkShade;
     }
   }