[Emotion] Convert EuiEmptyPrompt (#7494)

elastic · Feb 2, 2024 · f5e3c1a · f5e3c1a
1 parent 0abab26
commit f5e3c1a
Show file tree

Hide file tree

Showing 14 changed files with 563 additions and 620 deletions.
diff --git a/changelogs/upcoming/7494.md b/changelogs/upcoming/7494.md
@@ -0,0 +1,4 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiEmptyPrompt` to Emotion
+- Added `euiBorderColor` and `useEuiBorderColorCSS` style utilities
diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts
@@ -7,42 +7,9 @@
  */
 
 import { css } from '@emotion/react';
-import { UseEuiTheme, tintOrShade } from '../../services';
+import { UseEuiTheme } from '../../services';
 import { logicalCSS } from '../../global_styling';
 
-export const euiCommentEventBorderColors = ({
-  euiTheme,
-  colorMode,
-}: UseEuiTheme) => {
-  const ratio = 0.6;
-  return {
-    warning: css`
-      border-color: ${tintOrShade(euiTheme.colors.warning, 0.4, colorMode)};
-    `,
-    accent: css`
-      border-color: ${tintOrShade(euiTheme.colors.accent, ratio, colorMode)};
-    `,
-    primary: css`
-      border-color: ${tintOrShade(euiTheme.colors.primary, ratio, colorMode)};
-    `,
-    success: css`
-      border-color: ${tintOrShade(euiTheme.colors.success, ratio, colorMode)};
-    `,
-    danger: css`
-      border-color: ${tintOrShade(euiTheme.colors.danger, ratio, colorMode)};
-    `,
-    subdued: css`
-      border-color: ${euiTheme.border.color};
-    `,
-    transparent: css`
-      border-color: ${euiTheme.border.color};
-    `,
-    plain: css`
-      border-color: ${euiTheme.border.color};
-    `,
-  };
-};
-
 export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
   return {

diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx
@@ -10,13 +10,13 @@ import React, { FunctionComponent, ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
 
 import { useEuiTheme } from '../../services';
+import { useEuiBorderColorCSS } from '../../global_styling';
 import { CommonProps } from '../common';
 import { IconType } from '../icon';
 import { EuiPanel, EuiPanelProps } from '../panel';
 import { EuiAvatar } from '../avatar';
 
 import {
-  euiCommentEventBorderColors,
   euiCommentEventStyles,
   euiCommentEventHeaderStyles,
   euiCommentEventBodyStyles,
@@ -119,7 +119,7 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
    * Styles
    */
   const euiTheme = useEuiTheme();
-  const borderStyles = euiCommentEventBorderColors(euiTheme);
+  const borderStyles = useEuiBorderColorCSS();
 
   const styles = euiCommentEventStyles(euiTheme);
   const cssStyles = [