table colors via css-in-js

elastic · Jan 15, 2021 · 5614b0f · 5614b0f
1 parent e45fb50
commit 5614b0f
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 34 deletions.
diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -10,7 +10,7 @@
   table-layout: fixed;
   border: none;
   border-collapse: collapse;
-  background-color: $euiColorEmptyShade;
+  // background-color: $euiColorEmptyShade;
 
   &.euiTable--auto {
     table-layout: auto;
@@ -58,22 +58,22 @@
   &:focus {
     .euiTableCellContent__text {
       text-decoration: underline;
-      color: $euiColorPrimary;
+      // color: $euiColorPrimary;
     }
 
-    .euiTableSortIcon {
-      fill: $euiColorPrimary;
-    }
+    // .euiTableSortIcon {
+    //   fill: $euiColorPrimary;
+    // }
   }
 }
 
 .euiTableSortIcon {
   margin-left: $euiSizeXS;
   flex-shrink: 0; // makes sure the icon doesn't change size because the text is long
 
-  .euiTableHeaderButton-isSorted & {
-    fill: $euiTitleColor;
-  }
+  // .euiTableHeaderButton-isSorted & {
+  //   fill: $euiTitleColor;
+  // }
 }
 
 .euiTableHeaderCellCheckbox {
@@ -82,38 +82,38 @@
 }
 
 .euiTableRow {
-  &:hover {
-    background-color: $euiTableHoverColor;
-  }
+  // &:hover {
+  //   background-color: $euiTableHoverColor;
+  // }
 
   &.euiTableRow-isExpandedRow {
-    .euiTableRowCell {
-      background-color: $euiTableHoverColor;
-    }
+    // .euiTableRowCell {
+    //   background-color: $euiTableHoverColor;
+    // }
 
     &.euiTableRow-isSelectable .euiTableCellContent {
       padding-left: $euiTableCellCheckboxWidth + $euiTableCellContentPadding;
     }
   }
 
-  &.euiTableRow-isSelected {
-    background-color: $euiTableSelectedColor;
+  // &.euiTableRow-isSelected {
+  //   background-color: $euiTableSelectedColor;
 
-    + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
-      background-color: $euiTableSelectedColor;
-    }
+  //   + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
+  //     background-color: $euiTableSelectedColor;
+  //   }
 
-    &:hover,
-    &:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell  {
-      background-color: $euiTableHoverSelectedColor;
-    }
-  }
+  //   &:hover,
+  //   &:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell  {
+  //     background-color: $euiTableHoverSelectedColor;
+  //   }
+  // }
 }
 
 .euiTableRowCell {
   @include euiTableCell;
 
-  color: $euiTextColor;
+  // color: $euiTextColor;
 
   &.euiTableRowCell--isMobileHeader {
     display: none; // Hide if not mobile breakpoint
@@ -126,7 +126,7 @@
 
 // Must come after .euiTableRowCell selector for border to be removed
 .euiTableFooterCell {
-  background-color: $euiColorLightestShade;
+  // background-color: $euiColorLightestShade;
   border-bottom: none;
 }
 
@@ -237,11 +237,11 @@
 
 .euiTableRow-isClickable {
   &:hover {
-    background-color: $euiTableHoverClickableColor;
+    // background-color: $euiTableHoverClickableColor;
     cursor: pointer;
   }
 
-  &:focus {
-    background-color: $euiTableFocusClickableColor;
-  }
+  // &:focus {
+  //   background-color: $euiTableFocusClickableColor;
+  // }
 }
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -19,7 +19,9 @@
 
 import React, { FunctionComponent, TableHTMLAttributes } from 'react';
 import classNames from 'classnames';
+import { css } from '@emotion/react';
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services/theme';
 
 export interface EuiTableProps
   extends CommonProps,
@@ -45,6 +47,10 @@ export const EuiTable: FunctionComponent<EuiTableProps> = ({
   responsive = true,
   ...rest
 }) => {
+  const [theme] = useEuiTheme();
+  const styles = css`
+    background-color: ${theme.colors.euiColorEmptyShade};
+  `;
   const classes = classNames(
     'euiTable',
     className,
@@ -56,7 +62,7 @@ export const EuiTable: FunctionComponent<EuiTableProps> = ({
   );
 
   return (
-    <table tabIndex={-1} className={classes} {...rest}>
+    <table tabIndex={-1} css={styles} className={classes} {...rest}>
       {children}
     </table>
   );

diff --git a/src/components/table/table_footer_cell.tsx b/src/components/table/table_footer_cell.tsx
@@ -18,8 +18,10 @@
  */
 
 import React, { FunctionComponent, TdHTMLAttributes } from 'react';
+import { css } from '@emotion/react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services/theme';
 
 import {
   HorizontalAlignment,
@@ -44,6 +46,10 @@ export const EuiTableFooterCell: FunctionComponent<Props> = ({
   style,
   ...rest
 }) => {
+  const [theme] = useEuiTheme();
+  const styles = css`
+    background-color: ${theme.colors.euiColorLightestShade};
+  `;
   const classes = classNames('euiTableFooterCell', className);
   const contentClasses = classNames('euiTableCellContent', className, {
     'euiTableCellContent--alignRight': align === RIGHT_ALIGNMENT,
@@ -52,7 +58,7 @@ export const EuiTableFooterCell: FunctionComponent<Props> = ({
   const styleObj = resolveWidthAsStyle(style, width);
 
   return (
-    <td className={classes} style={styleObj} {...rest}>
+    <td css={styles} className={classes} style={styleObj} {...rest}>
       <div className={contentClasses}>
         <span className="euiTableCellContent__text">{children}</span>
       </div>

diff --git a/src/components/table/table_header_button.tsx b/src/components/table/table_header_button.tsx
@@ -19,8 +19,10 @@
 
 import React, { ButtonHTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
+import { css } from '@emotion/react';
 import { CommonProps } from '../common';
 import { EuiInnerText } from '../inner_text';
+import { useEuiTheme } from '../../services/theme';
 
 import { IconType, EuiIcon } from '../icon';
 
@@ -35,6 +37,18 @@ export const EuiTableHeaderButton: FunctionComponent<Props> = ({
   iconType,
   ...rest
 }) => {
+  const [theme] = useEuiTheme();
+  const styles = css`
+    &:hover,
+    &:focus {
+      & .euiTableCellContent__text {
+        color: ${theme.colors.euiColorPrimary};
+      }
+
+      & .euiTableSortIcon {
+        fill: ${theme.colors.euiColorPrimary};
+      }
+  `;
   const classes = classNames('euiTableHeaderButton', className);
 
   // Add an icon to the button if one exists.
@@ -52,7 +66,7 @@ export const EuiTableHeaderButton: FunctionComponent<Props> = ({
   }
 
   return (
-    <button type="button" className={classes} {...rest}>
+    <button type="button" css={styles} className={classes} {...rest}>
       <EuiInnerText>
         {(ref, innerText) => (
           <span title={innerText} ref={ref}>

diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx
@@ -25,6 +25,8 @@ import React, {
 import classNames from 'classnames';
 
 import { EuiScreenReaderOnly } from '../accessibility';
+import { css } from '@emotion/react';
+import { useEuiTheme } from '../../services/theme';
 import { CommonProps, NoArgCallback } from '../common';
 import { EuiIcon } from '../icon';
 import { resolveWidthAsStyle } from './utils';
@@ -100,6 +102,7 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
   style,
   ...rest
 }) => {
+  const [theme] = useEuiTheme();
   const classes = classNames('euiTableHeaderCell', className, {
     'euiTableHeaderCell--hideForDesktop': mobileOptions.only || isMobileHeader,
     'euiTableHeaderCell--hideForMobile': !mobileOptions.show || hideForMobile,
@@ -151,6 +154,24 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
       );
     }
 
+    const buttonStyles = css`
+      &:hover,
+      &:focus {
+        & .euiTableCellContent__text {
+          color: ${theme.colors.euiColorPrimary};
+        }
+
+        & .euiTableSortIcon {
+          fill: ${theme.colors.euiColorPrimary};
+        }
+    `;
+
+    const iconStyles = css`
+      & .euiTableHeaderButton-isSorted & {
+        fill: ${theme.colors.euiTitleColor};
+      }
+    `;
+
     return (
       <CellComponent
         className={classes}
@@ -162,6 +183,7 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
         {...rest}>
         <button
           type="button"
+          css={buttonStyles}
           className={buttonClasses}
           onClick={onSort}
           data-test-subj="tableHeaderSortButton">
@@ -191,6 +213,7 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
                 values={{ ariaSortValue }}>
                 {(sortedAriaLabel: string) => (
                   <EuiIcon
+                    css={iconStyles}
                     className="euiTableSortIcon"
                     type={isSortAscending ? 'sortUp' : 'sortDown'}
                     size="m"

diff --git a/src/components/table/table_row.tsx b/src/components/table/table_row.tsx
@@ -19,7 +19,11 @@
 
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
+import { css } from '@emotion/react';
+import chroma from 'chroma-js';
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services/theme';
+import { tint, shade } from '../../themes/theme';
 
 interface EuiTableRowProps {
   /**
@@ -61,6 +65,61 @@ export const EuiTableRow: FunctionComponent<Props> = ({
   onClick,
   ...rest
 }) => {
+  const [theme, , colorMode] = useEuiTheme();
+  const euiTableHoverColor =
+    colorMode === 'light' // tintOrShade
+      ? tint(theme.colors.euiColorLightestShade, 0.5)
+      : shade(theme.colors.euiColorLightestShade, 0.2);
+  const euiTableSelectedColor =
+    colorMode === 'light'
+      ? tint(theme.colors.euiFocusBackgroundColor, 0.3)
+      : theme.colors.euiFocusBackgroundColor;
+  const euiTableHoverSelectedColor =
+    colorMode === 'light'
+      ? theme.colors.euiFocusBackgroundColor
+      : shade(theme.colors.euiFocusBackgroundColor, 0.1);
+  const euiTableHoverClickableColor = chroma(theme.colors.euiColorPrimary)
+    .alpha(0.05)
+    .css();
+  const euiTableFocusClickableColor = chroma(theme.colors.euiColorPrimary)
+    .alpha(0.1)
+    .css();
+  const styles = css`
+    &:hover {
+      background-color: ${euiTableHoverColor};
+    }
+    ${isExpandedRow
+      ? `
+        & .euiTableRowCell {
+          background-color: ${euiTableHoverColor};
+        }`
+      : null}
+    ${isSelected
+      ? `
+          background-color: ${euiTableSelectedColor};
+          
+          & + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
+            background-color: ${euiTableSelectedColor};
+          }
+
+          &:hover,
+          &:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
+            background-color: ${euiTableHoverSelectedColor};
+          }
+      `
+      : null};
+    ${onClick
+      ? `
+          &:hover {
+            background-color: ${euiTableHoverClickableColor};
+          }
+
+          &:focus {
+            background-color: ${euiTableFocusClickableColor};
+          }
+      `
+      : null}
+  `;
   const classes = classNames('euiTableRow', className, {
     'euiTableRow-isSelectable': isSelectable,
     'euiTableRow-isSelected': isSelected,
@@ -71,7 +130,7 @@ export const EuiTableRow: FunctionComponent<Props> = ({
   });
 
   return (
-    <tr className={classes} onClick={onClick} {...rest}>
+    <tr css={styles} className={classes} onClick={onClick} {...rest}>
       {children}
     </tr>
   );

diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx
@@ -26,7 +26,9 @@ import React, {
   TdHTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
+import { css } from '@emotion/react';
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services/theme';
 
 import {
   HorizontalAlignment,
@@ -168,6 +170,10 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
   width,
   ...rest
 }) => {
+  const [theme] = useEuiTheme();
+  const styles = css`
+    color: ${theme.colors.euiTextColor};
+  `;
   const cellClasses = classNames('euiTableRowCell', {
     'euiTableRowCell--hasActions': hasActions,
     'euiTableRowCell--isExpander': isExpander,
@@ -240,6 +246,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
 
   const Element = setScopeRow ? 'th' : 'td';
   const sharedProps = {
+    css: styles,
     scope: setScopeRow ? 'row' : undefined,
     style: styleObj,
     ...rest,