[Emotion] Convert EuiText, EuiTextAlign, and EuiTextColor

src-docs/src/views/text/_text_scaling.scss

@@ -1,18 +1,10 @@
 // sass-lint:disable no-important
 .guideDemo__textLines {
   background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px);
-  background-size: 100% $euiFontSizeXS;
+  background-size: 100% $euiSizeXS;
   background-position-y: -1px;
 
   > * {
     background-color: $euiColorHighlight;
   }
-
-  &[class*='--small'] {
-    background-size: 100% $euiFontSizeS / 2;
-  }
-
-  &[class*='--extraSmall'] {
-    background-size: 100% $euiFontSizeXS / 2;
-  }
 }

src-docs/src/views/text/playground.js

@@ -52,6 +52,12 @@ export const textColorConfig = () => {
     hidden: false,
   };
 
+  propsToUse.color = {
+    ...propsToUse.color,
+    type: PropTypes.String,
+    value: 'default',
+  };
+
   const setGhostBackground = {
     color: 'ghost',
   };

src-docs/src/views/theme/_props.tsx

@@ -101,7 +101,7 @@ export function getType(type: any, euiTheme: EuiThemeComputed<{}>) {
       <span
         css={css`
           font-weight: ${euiTheme.font.weight.light};
-          color: ${euiTheme.colors.subdued};
+          color: ${euiTheme.colors.subduedText};
         `}
       >
         {humanizeType(type.custom.origin.type)}

src-docs/src/views/theme/customizing/_typography.js

@@ -57,6 +57,7 @@ export default ({ onThemeUpdate }) => {
 
   const fontFamilies = fontClone.family.split(',');
   const codeFontFamilies = fontClone.familyCode.split(',');
+  const serifFontFamilies = fontClone.familySerif.split(',');
 
   return (
     <div>
@@ -120,6 +121,23 @@ export default ({ onThemeUpdate }) => {
 
         <EuiSpacer />
 
+        <ThemeValue
+          property={'font'}
+          type={baseProps.familySerif}
+          name={'familySerif'}
+          value={serifFontFamilies[0]}
+          onUpdate={(value) => {
+            const out = [...serifFontFamilies];
+            out.splice(0, 1, value);
+            updateFont('familySerif', out.join(','));
+          }}
+          stringProps={{
+            style: { width: 200 },
+          }}
+        />
+
+        <EuiSpacer />
+
         <ThemeValue
           property={'font'}
           type={baseProps.featureSettings}

src-docs/src/views/theme/customizing/_values.tsx

@@ -112,7 +112,7 @@ export const ThemeValue: FunctionComponent<ThemeValue> = ({
       <span
         css={css`
           font-weight: ${euiTheme.font.weight.light};
-          color: ${euiTheme.colors.subdued};
+          color: ${euiTheme.colors.subduedText};
         `}
       >
         : {humanizeType(type.custom.origin.type)}

src-docs/src/views/theme/typography/_typography_js.tsx

@@ -5,6 +5,7 @@ import {
   EuiBasicTable,
   EuiButtonGroup,
   EuiCode,
+  EuiCodeBlock,
   EuiDescribedFormGroup,
   EuiPanel,
   EuiSpacer,
@@ -72,6 +73,22 @@ export const FontJS = () => {
         snippetLanguage="emotion"
       />
 
+      <ThemeExample
+        title={<code>euiTheme.font.familySerif</code>}
+        description={getDescription(baseProps.familySerif)}
+        example={
+          <p
+            css={css`
+              font-family: ${euiTheme.font.familySerif};
+            `}
+          >
+            {euiTheme.font.familySerif}
+          </p>
+        }
+        snippet={'font-family: ${euiTheme.font.familySerif};'}
+        snippetLanguage="emotion"
+      />
+
       <ThemeExample
         title={<code>euiTheme.font.featureSettings</code>}
         description={getDescription(baseProps.featureSettings)}
@@ -249,13 +266,17 @@ export const FontScaleValuesJS = () => {
           return {
             id: scale,
             value: `useEuiFontSize('${scale}'${
-              measurementSelected !== 'rem' ? `, '${measurementSelected}'` : ''
+              measurementSelected !== 'rem'
+                ? `,\n  { measurement: '${measurementSelected}' }\n`
+                : ''
             })`,
             size: `${
-              euiFontSize(scale, euiTheme, measurementSelected).fontSize
+              euiFontSize(scale, euiTheme, { measurement: measurementSelected })
+                .fontSize
             }`,
             lineHeight: `${
-              euiFontSize(scale, euiTheme, measurementSelected).lineHeight
+              euiFontSize(scale, euiTheme, { measurement: measurementSelected })
+                .lineHeight
             }`,
             index,
           };
@@ -269,7 +290,9 @@ export const FontScaleValuesJS = () => {
             render: (sample, item) => (
               <div
                 css={css`
-                  ${euiFontSize(item.id, euiTheme, measurementSelected)}
+                  ${euiFontSize(item.id, euiTheme, {
+                    measurement: measurementSelected,
+                  })}
                 `}
               >
                 The quick brown fox jumped over the blue moon to catch a snail
@@ -285,7 +308,9 @@ export const FontScaleValuesJS = () => {
             width: 'auto',
             valign: 'baseline',
             render: (value: React.ReactNode) => (
-              <EuiCode language="css">{value}</EuiCode>
+              <EuiCodeBlock language="js" paddingSize="s">
+                {value}
+              </EuiCodeBlock>
             ),
           },
           {

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

@@ -943,7 +943,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
           role="progressbar"
         />
         <div
-          class="euiText euiText--small"
+          class="euiText css-1tf7qyo-euiText-s"
         >
           <p>
             Please wait

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

@@ -7,13 +7,9 @@ exports[`EuiCallOut is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiText euiText--small css-1vr4wuv-euiCallOut__description"
+    class="euiText css-1cp7n4r-euiText-s-euiTextColor-default-euiCallOut__description"
   >
-    <div
-      class="euiTextColor euiTextColor--default"
-    >
-      Content
-    </div>
+    Content
   </div>
 </div>
 `;
@@ -100,13 +96,9 @@ exports[`EuiCallOut props title is rendered 1`] = `
     Title
   </p>
   <div
-    class="euiText euiText--small css-1vr4wuv-euiCallOut__description"
+    class="euiText css-1cp7n4r-euiText-s-euiTextColor-default-euiCallOut__description"
   >
-    <div
-      class="euiTextColor euiTextColor--default"
-    >
-      Content
-    </div>
+    Content
   </div>
 </div>
 `;