Convert EuiTextColor to Emotion

src/components/text/__snapshots__/text_color.test.tsx.snap

@@ -3,14 +3,14 @@
 exports[`EuiTextColor is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiTextColor euiTextColor--default testClass1 testClass2"
+  class="euiTextColor euiTextColor--default testClass1 testClass2 css-7fidck-euiTextColor-default"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiTextColor props color is rendered with custom color 1`] = `
 <span
-  class="euiTextColor euiTextColor--custom"
+  class="euiTextColor euiTextColor--custom css-tseiet-euiTextColor"
   style="color:#ff0000"
 >
   <p>
@@ -21,7 +21,7 @@ exports[`EuiTextColor props color is rendered with custom color 1`] = `
 
 exports[`EuiTextColor props color is rendered with named color 1`] = `
 <span
-  class="euiTextColor euiTextColor--warning"
+  class="euiTextColor euiTextColor--warning css-1yjx65l-euiTextColor-warning"
 >
   <p>
     Content

src/components/text/_index.scss

@@ -1 +0,0 @@
-@import 'text_color';

src/components/text/text_color.styles.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiTextColorStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiTextColor: css``,
+  default: css`
+    color: ${euiTheme.colors.text};
+  `,
+  subdued: css`
+    color: ${euiTheme.colors.subdued};
+  `,
+  success: css`
+    color: ${euiTheme.colors.successText};
+  `,
+  accent: css`
+    color: ${euiTheme.colors.accentText};
+  `,
+  danger: css`
+    color: ${euiTheme.colors.dangerText};
+  `,
+  warning: css`
+    color: ${euiTheme.colors.warningText};
+  `,
+  ghost: css`
+    color: ${euiTheme.colors.ghost} !important;
+  `,
+  inherit: css`
+    color: inherit;
+  `,
+});

src/components/text/text_color.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiTextColor } from './text_color';
 
@@ -19,6 +20,8 @@ describe('EuiTextColor', () => {
     expect(component).toMatchSnapshot();
   });
 
+  shouldRenderCustomStyles(<EuiTextColor color="#fff" />);
+
   describe('props', () => {
     describe('color', () => {
       test('is rendered with named color', () => {

src/components/text/text_color.tsx

@@ -8,22 +8,22 @@
 
 import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
 import classNames from 'classnames';
-import { CommonProps, keysOf } from '../common';
+import { CommonProps } from '../common';
 
-const colorsToClassNameMap = {
-  default: 'euiTextColor--default',
-  subdued: 'euiTextColor--subdued',
-  success: 'euiTextColor--success',
-  accent: 'euiTextColor--accent',
-  danger: 'euiTextColor--danger',
-  warning: 'euiTextColor--warning',
-  ghost: 'euiTextColor--ghost',
-  inherit: 'euiTextColor--inherit',
-};
-
-export type TextColor = keyof typeof colorsToClassNameMap;
+import { useEuiTheme } from '../../services';
+import { euiTextColorStyles } from './text_color.styles';
 
-export const COLORS = keysOf(colorsToClassNameMap);
+export const COLORS = [
+  'default',
+  'subdued',
+  'success',
+  'accent',
+  'danger',
+  'warning',
+  'ghost',
+  'inherit',
+] as const;
+export type TextColor = typeof COLORS[number];
 
 export type EuiTextColorProps = CommonProps &
   Omit<
@@ -50,10 +50,19 @@ export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
 }) => {
   const isNamedColor = COLORS.includes(color as TextColor);
 
+  const euiTheme = useEuiTheme();
+  const styles = euiTextColorStyles(euiTheme);
+  const cssStyles = [
+    styles.euiTextColor,
+    isNamedColor ? styles[color as TextColor] : undefined,
+  ];
+
   const classes = classNames(
     'euiTextColor',
-    { 'euiTextColor--custom': !isNamedColor },
-    isNamedColor && colorsToClassNameMap[color as TextColor],
+    {
+      [`euiTextColor--${color}`]: isNamedColor,
+      'euiTextColor--custom': !isNamedColor,
+    },
     className
   );
   const Component = component;
@@ -69,7 +78,12 @@ export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
     : { ...style };
 
   return (
-    <Component className={classes} style={euiTextStyle} {...rest}>
+    <Component
+      css={cssStyles}
+      className={classes}
+      style={euiTextStyle}
+      {...rest}
+    >
       {children}
     </Component>
   );