[EuiTableRow] Convert to Emotion

src/components/table/__snapshots__/table_row.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`isSelected renders true when specified 1`] = `
 <table>
   <tbody>
     <tr
-      class="euiTableRow euiTableRow-isSelected emotion-euiTableRow-desktop"
+      class="euiTableRow euiTableRow-isSelected emotion-euiTableRow-desktop-selected"
     >
       <td
         class="euiTableRowCell euiTableRowCell--middle"

src/components/table/_responsive.scss

@@ -107,16 +107,6 @@
         }
       }
 
-      // override hover & selected colors
-      &.euiTableRow-isSelected {
-        &,
-        &:hover,
-        + .euiTableRow.euiTableRow-isExpandedRow,
-        &:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
-          background-color: $euiTableSelectedColor;
-        }
-      }
-
       &.euiTableRow-isExpandedRow {
         @include euiTableActionsBackgroundMobile;
         @include euiBottomShadowSmall;

src/components/table/_table.scss

@@ -48,41 +48,9 @@
   border: none;
 }
 
-.euiTableRow {
-  &:hover {
-    background-color: $euiTableHoverColor;
-  }
-
-  &.euiTableRow-isClickable {
-    &:hover {
-      background-color: $euiTableHoverClickableColor;
-      cursor: pointer;
-    }
-
-    &:focus {
-      background-color: $euiTableFocusClickableColor;
-    }
-  }
-
-  &.euiTableRow-isExpandedRow {
-    background-color: $euiTableHoverColor;
-
-    &.euiTableRow-isSelectable .euiTableCellContent {
-      padding-left: $euiTableCellCheckboxWidth + $euiTableCellContentPadding;
-    }
-  }
-
-  &.euiTableRow-isSelected {
-    background-color: $euiTableSelectedColor;
-
-    + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
-      background-color: $euiTableSelectedColor;
-    }
-
-    &:hover,
-    &:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
-      background-color: $euiTableHoverSelectedColor;
-    }
+.euiTableRow-isExpandedRow {
+  &.euiTableRow-isSelectable .euiTableCellContent {
+    padding-left: $euiTableCellCheckboxWidth + $euiTableCellContentPadding;
   }
 }
 

src/components/table/_variables.scss

@@ -7,11 +7,4 @@ $euiTableCellCheckboxWidth: $euiSizeXL;
 
 $euiTableActionsAreaWidth: $euiSizeXXL;
 
-// Colors
-
-$euiTableHoverColor: tintOrShade($euiColorLightestShade, 50%, 20%);
-$euiTableSelectedColor: tintOrShade($euiFocusBackgroundColor, 30%, 0%);
-$euiTableHoverSelectedColor: tintOrShade($euiFocusBackgroundColor, 0, 10%);
 $euiTableActionsBorderColor: transparentize($euiColorMediumShade, .9);
-$euiTableHoverClickableColor: transparentize($euiColorPrimary, .95);
-$euiTableFocusClickableColor: transparentize($euiColorPrimary, .9);

src/components/table/table_row.styles.ts

@@ -8,20 +8,77 @@
 
 import { css } from '@emotion/react';
 
-import { UseEuiTheme } from '../../services';
+import { UseEuiTheme, tint, shade, transparentize } from '../../services';
 
 export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
+  const rowColors = _rowColorVariables(euiThemeContext);
+
   return {
     euiTableRow: css``,
 
     desktop: {
-      desktop: css``,
+      desktop: css`
+        &:hover {
+          background-color: ${rowColors.hover};
+        }
+      `,
+      expanded: css`
+        background-color: ${rowColors.hover};
+      `,
+      clickable: css`
+        &:hover {
+          background-color: ${rowColors.clickable.hover};
+          cursor: pointer;
+        }
+
+        &:focus {
+          background-color: ${rowColors.clickable.focus};
+        }
+      `,
+      selected: css`
+        &,
+        & + .euiTableRow-isExpandedRow {
+          background-color: ${rowColors.selected.color};
+        }
+
+        &:hover,
+        &:hover + .euiTableRow-isExpandedRow {
+          background-color: ${rowColors.selected.hover};
+        }
+      `,
     },
 
     mobile: {
       mobile: css``,
+      selected: css`
+        &,
+        & + .euiTableRow-isExpandedRow {
+          background-color: ${rowColors.selected.color};
+        }
+      `,
     },
   };
 };
+
+const _rowColorVariables = ({ euiTheme, colorMode }: UseEuiTheme) => ({
+  hover:
+    colorMode === 'DARK'
+      ? euiTheme.colors.lightestShade
+      : tint(euiTheme.colors.lightestShade, 0.5),
+  selected: {
+    color:
+      colorMode === 'DARK'
+        ? shade(euiTheme.colors.primary, 0.7)
+        : tint(euiTheme.colors.primary, 0.96),
+    hover:
+      colorMode === 'DARK'
+        ? shade(euiTheme.colors.primary, 0.75)
+        : tint(euiTheme.colors.primary, 0.9),
+  },
+  clickable: {
+    hover: transparentize(euiTheme.colors.primary, 0.05),
+    focus: transparentize(euiTheme.colors.primary, 0.1),
+  },
+});

src/components/table/table_row.tsx

@@ -68,10 +68,14 @@ export const EuiTableRow: FunctionComponent<Props> = ({
     ? [
         styles.euiTableRow,
         styles.mobile.mobile,
+        isSelected && styles.mobile.selected,
       ]
     : [
         styles.euiTableRow,
         styles.desktop.desktop,
+        isSelected && styles.desktop.selected,
+        isExpandedRow && styles.desktop.expanded,
+        onClick && styles.desktop.clickable,
       ];
 
   const classes = classNames('euiTableRow', className, {