Convert .euiText CSS to Emotion

TODO: EuiCode variables were not converted, per direction from Caroline

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

@@ -3,7 +3,7 @@
 exports[`EuiText is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiText euiText--medium testClass1 testClass2"
+  class="euiText euiText--medium testClass1 testClass2 css-1st3sqn-euiText"
   data-test-subj="test subject string"
 >
   <p>

src/components/text/_text.scss

@@ -159,131 +159,6 @@
   }
 }
 
-.euiText {
-  @include euiText;
-  // The euiText mixin forces a color. Since euiText is usually a child
-  // of other styling concerns, we should inherit their coloring. The default
-  // coloring will likely coming from the reset.scss anyway.
-  color: inherit;
-  // EuiImage with floats are often used within EuiText.
-  clear: both;
-
-  // Style anchors that don't have a class. This prevents overwriting "buttons"
-  // and other stylized elements passed in.
-  a:not([class]) {
-    @include euiLink;
-  }
-
-  img {
-    display: block;
-    width: 100%;
-  }
-
-  ul {
-    list-style: disc;
-  }
-
-  ol {
-    list-style: decimal;
-  }
-
-  blockquote:not(.euiMarkdownFormat__blockquote) {
-    position: relative;
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-    font-family: Georgia, Times, Times New Roman, serif;
-    font-style: italic;
-    letter-spacing: normal;
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-
-    &:before,
-    &:after {
-      position: absolute;
-      content: '';
-      height: 2px;
-      width: 50%;
-      right: 0;
-      transform: translateX(-50%);
-      background: $euiColorDarkShade;
-    }
-
-    &:before {
-      top: 0;
-    }
-
-    &:after {
-      bottom: 0;
-    }
-  }
-
-  h1 {
-    @include euiTitle('l');
-  }
-
-  h2 {
-    @include euiTitle('m');
-  }
-
-  h3 {
-    @include euiTitle('s');
-  }
-
-  h4,
-  dt {
-    @include euiTitle('xs');
-  }
-
-  h5 {
-    @include euiTitle('xxs');
-  }
-
-  h6 {
-    @include euiTitle('xxxs');
-    text-transform: uppercase;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  dt {
-    color: inherit;
-  }
-
-  pre {
-    white-space: pre-wrap;
-    background: $euiCodeBlockBackgroundColor;
-    color: $euiCodeBlockColor;
-  }
-
-  pre,
-  pre code {
-    display: block;
-  }
-
-  code {
-    @include euiCodeFont;
-  }
-
-  &.euiText--constrainedWidth {
-    max-width: $euiTextConstrainedMaxWidth;
-    // If the max-width is way too short of the width of the container,
-    // at least make it 2/3 of its parent
-    min-width: 75%;
-  }
-
-  > :last-child,
-  .euiTextColor > :last-child {
-    margin-bottom: 0 !important; // sass-lint:disable-line no-important
-  }
-}
-
 .euiText--medium {
   @include euiScaleText($euiFontSize, 'rem');
 }

src/components/text/text.styles.ts

@@ -0,0 +1,157 @@
+/*
+ * 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';
+
+import { euiLinkCSS } from '../link/link.styles';
+import { euiTitle } from '../title/title.styles';
+
+/**
+ * Mixins
+ */
+export const euiText = (
+  euiTheme: UseEuiTheme['euiTheme'],
+  inheritColor = false
+) => {
+  return {
+    color: inheritColor ? 'inherit' : euiTheme.colors.text,
+    fontWeight: euiTheme.font.weight.regular,
+  };
+};
+
+/**
+ * Styles
+ */
+export const euiTextStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiText: css`
+    ${euiText(euiTheme, true)};
+
+    // EuiImage with floats are often used within EuiText.
+    clear: both;
+
+    // Style anchors that don't have a class. This prevents overwriting "buttons"
+    // and other stylized elements passed in.
+    a:not([class]) {
+      ${euiLinkCSS(euiTheme)}
+    }
+
+    img {
+      display: block;
+      width: 100%;
+    }
+
+    ul {
+      list-style: disc;
+    }
+
+    ol {
+      list-style: decimal;
+    }
+
+    blockquote:not(.euiMarkdownFormat__blockquote) {
+      position: relative;
+      text-align: center;
+      margin-left: auto;
+      margin-right: auto;
+      font-family: Georgia, Times, Times New Roman, serif;
+      font-style: italic;
+      letter-spacing: normal;
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+
+      &:before,
+      &:after {
+        position: absolute;
+        content: '';
+        height: 2px;
+        width: 50%;
+        right: 0;
+        transform: translateX(-50%);
+        background: ${euiTheme.colors.darkShade};
+      }
+
+      &:before {
+        top: 0;
+      }
+
+      &:after {
+        bottom: 0;
+      }
+    }
+
+    h1 {
+      ${euiTitle('l', euiTheme)}
+    }
+
+    h2 {
+      ${euiTitle('m', euiTheme)}
+    }
+
+    h3 {
+      ${euiTitle('s', euiTheme)}
+    }
+
+    h4,
+    dt {
+      ${euiTitle('xs', euiTheme)}
+    }
+
+    h5 {
+      ${euiTitle('xxs', euiTheme)}
+    }
+
+    h6 {
+      ${euiTitle('xxxs', euiTheme)}
+      text-transform: uppercase;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    dt {
+      color: inherit;
+    }
+
+    pre {
+      white-space: pre-wrap;
+      background: ${euiTheme.colors
+        .lightestShade}; // TODO: $euiCodeBlockBackgroundColor - switch to var once EuiCode is converted
+      color: ${euiTheme.colors
+        .text}; // TODO: $euiCodeBlockColor - switch to var once EuiCode is converted
+    }
+
+    pre,
+    pre code {
+      display: block;
+    }
+
+    code {
+      // TODO: Use euiCodeFont mixin once EuiCode is converted
+      font-family: ${euiTheme.font.familyCode};
+      letter-spacing: normal;
+    }
+
+    &.euiText--constrainedWidth {
+      max-width: 36em; // TODO
+      // If the max-width is way too short of the width of the container,
+      // at least make it 2/3 of its parent
+      min-width: 75%;
+    }
+
+    > :last-child,
+    .euiTextColor > :last-child {
+      margin-bottom: 0 !important;
+    }
+  `,
+});

src/components/text/text.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 { EuiText } from './text';
 
@@ -23,6 +24,8 @@ describe('EuiText', () => {
     expect(component).toMatchSnapshot();
   });
 
+  shouldRenderCustomStyles(<EuiText size="s" color="#fff" />);
+
   describe('props', () => {
     describe('grow', () => {
       test('is rendered', () => {

src/components/text/text.tsx

@@ -10,6 +10,9 @@ import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 
+import { useEuiTheme } from '../../services';
+import { euiTextStyles } from './text.styles';
+
 import { TextColor, EuiTextColor } from './text_color';
 
 import { EuiTextAlign, TextAlignment } from './text_align';
@@ -48,6 +51,10 @@ export const EuiText: FunctionComponent<EuiTextProps> = ({
   className,
   ...rest
 }) => {
+  const euiTheme = useEuiTheme();
+  const styles = euiTextStyles(euiTheme);
+  const cssStyles = [styles.euiText];
+
   const classes = classNames(
     'euiText',
     textSizeToClassNameMap[size],
@@ -75,7 +82,7 @@ export const EuiText: FunctionComponent<EuiTextProps> = ({
   }
 
   return (
-    <div className={classes} {...rest}>
+    <div css={cssStyles} className={classes} {...rest}>
       {optionallyAlteredText || children}
     </div>
   );