[cleanup] DRY out cell outlien color to a CSS variable

cee-chen · cee-chen · commit 268fd17d1e64 · 2023-11-20T13:29:54.000-08:00
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -33,25 +33,20 @@
 
   &:hover,
   &:focus {
+    --euiDataGridCellOutlineColor: #{$euiColorPrimary};
     @include euiDataGridCellFocus;
   }
 
   // On hover
   &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
+    // Color the actions and focus ring grayscale on hover
+    // (Actions look odd without the ring on grids without cell borders)
+    --euiDataGridCellOutlineColor: #{$euiColorDarkShade};
+
     .euiDataGridRowCell__actions {
       // Delay the actions showing on hover
       // (Note: the focus ring show instantly on hover & the actions show instantly on focus)
       animation-delay: $euiAnimSpeedSlow;
-
-      // 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: $euiColorDarkShade;
     }
   }
 
@@ -143,9 +138,9 @@
   display: flex;
   gap: $euiSizeXS / 2;
   padding-inline: $euiSizeXS / 2;
-  background-color: $euiColorPrimary;
+  background-color: var(--euiDataGridCellOutlineColor);
   color: $euiColorEmptyShade;
-  border: $euiBorderWidthThin solid $euiColorPrimary;
+  border: $euiBorderWidthThin solid var(--euiDataGridCellOutlineColor);
   border-top-left-radius: $euiBorderRadius / 2;
   border-top-right-radius: $euiBorderRadius / 2;
   transform: scaleY(0);
@@ -164,7 +159,7 @@
     top: 100%;
     height: $euiBorderWidthThick;
     width: $euiBorderWidthThick;
-    background-color: red; // TODO - DRY out background-color
+    background-color: var(--euiDataGridCellOutlineColor);
 
     .euiDataGridRowCell--alignLeft & {
       left: -$euiBorderWidthThin;
diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
@@ -64,7 +64,7 @@ $euiDataGridStyles: (
     position: absolute;
     top: 0;
     left: 0;
-    border: $euiBorderWidthThick solid $euiFocusRingColor;
+    border: $euiBorderWidthThick solid var(--euiDataGridCellOutlineColor, $euiFocusRingColor);
     border-radius: $euiBorderRadius / 2;
     z-index: 2; // We want this to be on top of all the content
     pointer-events: none; // Because we put it with a higher z-index we don't want to make it clickable this way we allow selecting the content behind
