From 514ab4d95c3df3e6feef4b58ee024f58e51f75ce Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 24 Mar 2021 19:24:07 +0000
Subject: [PATCH 01/33] Wrapping the EuiMarkdownFormat content with EuiText

---
 .../guide_markdown_format.tsx                 |  26 +--
 src-docs/src/routes.js                        |  42 ++--
 .../markdown_editor/_markdown_format.scss     | 204 +++---------------
 .../markdown_editor/markdown_format.tsx       |   7 +-
 .../plugins/markdown_default_plugins.tsx      |  15 ++
 src/components/text/_text.scss                |   6 +-
 6 files changed, 76 insertions(+), 224 deletions(-)

diff --git a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
index c7f2b98e9ad6..3e85e6cff8d2 100644
--- a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
+++ b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
@@ -3,8 +3,6 @@ import {
   EuiMarkdownFormat,
   getDefaultEuiMarkdownProcessingPlugins,
 } from '../../../../src/components/markdown_editor';
-import { EuiText } from '../../../../src/components/text';
-import { EuiTitle } from '../../../../src/components/title';
 import { slugify } from '../../../../src/services';
 
 export type GuideMarkdownFormatProps = {
@@ -20,31 +18,9 @@ export const GuideMarkdownFormat: FunctionComponent<GuideMarkdownFormatProps> =
   rehype2reactConfig.components.h2 = ({ children }) => {
     const id = slugify(children[0]);
 
-    return (
-      <EuiTitle>
-        <h2 id={id}>{children}</h2>
-      </EuiTitle>
-    );
+    return <h2 id={id}>{children}</h2>;
   };
 
-  rehype2reactConfig.components.p = ({ children }) => (
-    <EuiText grow={false}>
-      <p>{children}</p>
-    </EuiText>
-  );
-
-  rehype2reactConfig.components.ul = ({ children }) => (
-    <EuiText grow={false}>
-      <ul>{children}</ul>
-    </EuiText>
-  );
-
-  rehype2reactConfig.components.ol = ({ children }) => (
-    <EuiText grow={false}>
-      <ol>{children}</ol>
-    </EuiText>
-  );
-
   return (
     <EuiMarkdownFormat processingPluginList={processingPlugins}>
       {children}
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 0495b8169870..c86096d31c8b 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -3,14 +3,14 @@ import { slugify } from '../../src/services';
 
 import { createHashHistory } from 'history';
 
-import { GuidePage, GuideSection } from './components';
+import { GuidePage, GuideSection, GuideMarkdownFormat } from './components';
 
 import { EuiErrorBoundary } from '../../src/components';
 
 import { playgroundCreator } from './services/playground';
 
 // Guidelines
-// const GettingStarted = require('!!raw-loader!./views/guidelines/getting_started.md');
+const GettingStarted = require('!!raw-loader!./views/guidelines/getting_started.md');
 
 import AccessibilityGuidelines from './views/guidelines/accessibility';
 
@@ -301,34 +301,34 @@ const createExample = (example, customTitle) => {
   };
 };
 
-// const createMarkdownExample = (example, title) => {
-//   const headings = example.default.match(/^(##) (.*)/gm);
+const createMarkdownExample = (example, title) => {
+  const headings = example.default.match(/^(##) (.*)/gm);
 
-//   const sections = headings.map((heading) => {
-//     const title = heading.replace('## ', '');
+  const sections = headings.map((heading) => {
+    const title = heading.replace('## ', '');
 
-//     return { id: slugify(title), title: title };
-//   });
+    return { id: slugify(title), title: title };
+  });
 
-//   return {
-//     name: title,
-//     component: () => (
-//       <GuidePage title={title}>
-//         <GuideMarkdownFormat title={title}>
-//           {example.default}
-//         </GuideMarkdownFormat>
-//       </GuidePage>
-//     ),
-//     sections: sections,
-//   };
-// };
+  return {
+    name: title,
+    component: () => (
+      <GuidePage title={title}>
+        <GuideMarkdownFormat title={title}>
+          {example.default}
+        </GuideMarkdownFormat>
+      </GuidePage>
+    ),
+    sections: sections,
+  };
+};
 
 const navigation = [
   {
     name: 'Guidelines',
     items: [
       // TODO uncomment when EuiMarkdownFormat has a better text formatting
-      // createMarkdownExample(GettingStarted, 'Getting started'),
+      createMarkdownExample(GettingStarted, 'Getting started'),
       createExample(AccessibilityGuidelines, 'Accessibility'),
       {
         name: 'Colors',
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 8aecdb7d956a..58c27748562e 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -1,14 +1,6 @@
-// Default styles for Markdown Format
-// 1. Headings
-// 2. Images
-// 3. Blockquotes
-// 4. Horizontal rules
-// 5. Lists
-// 6. Tables
-// 7. Code
-
 // The Markdown Format uses by default a few EUI components
-// to render elements: EuiLink and EuiCode.
+// Uses the EuiText to wrap all the content
+// Uses the EuiLink and EuiCode.
 
 $browserDefaultFontSize: 16px;
 
@@ -58,178 +50,33 @@ $browserDefaultFontSize: 16px;
     color: $euiColorLightestShade;
   }
 
-  > div > *:first-child {
-    // sass-lint:disable-block no-important
-    margin-top: 0 !important;
-  }
-
-  > div > * {
-    margin-top: 0;
-    margin-bottom: $euiMarkdownSize;
-  }
-
-  > div > *:last-child,
-  .euiCheckbox {
-    // sass-lint:disable-block no-important
-    margin-bottom: 0 !important;
-  }
-
-  .euiCheckbox + *:not(.euiCheckbox) {
-    margin-top: $euiMarkdownSize;
-  }
-
-  p,
-  blockquote,
-  ul,
-  ol,
-  dl,
-  pre,
-  table {
-    margin-top: 0;
-    margin-bottom: $euiMarkdownSize;
-    line-height: 1.5em;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  // 2. Headings
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 0;
-    margin-bottom: $euiMarkdownSizeXS;
-  }
-
-  h1 {
-    font-size: $euiMarkdownFontSizeXXL;
-    line-height: 1.333333em;
-    font-weight: 300;
-  }
-
-  h2 {
-    font-size: $euiMarkdownFontSizeXL;
-    line-height: 1.428571em;
-    font-weight: 300;
-  }
-
-  h3 {
-    font-size: $euiMarkdownFontSizeL;
-    line-height: 1.6em;
-    font-weight: 600;
-  }
-
-  h4 {
-    font-size: $euiMarkdownSize;
-    line-height: 1.5em;
-    font-weight: 600;
-  }
-
-  h5 {
-    font-size: $euiMarkdownFontSizeS;
-    line-height: 1.142857em;
-    font-weight: 700;
-  }
-
-  h6 {
-    font-size: $euiMarkdownFontSizeXS;
-    line-height: 1.333333em;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-
-  // 3. Images
-  img {
-    max-width: 100%;
-    box-sizing: content-box;
-    border-style: none;
-  }
 
-  // 4. Blockquotes
-  blockquote {
+  // Blockquotes
+  .euiMarkdownFormat__blockquote {
     padding: 0 1em;
     border-left: $euiMarkdownSizeXXS solid $euiMarkdownAlphaLightShade;
+    margin-bottom: $euiMarkdownFontSize;
   }
 
-  &--reversed blockquote {
+  &--reversed .euiMarkdownFormat__blockquote {
     border-left-color: $euiMarkdownAlphaLightShadeReversed;
   }
 
-  // 5. Horizontal rules
-  hr {
-    border: none;
-    height: 1px;
+  .euiHorizontalRule {
     background-color: $euiMarkdownAlphaLightShade;
-    margin: $euiMarkdownSizeL 0;
-  }
-
-  hr::before {
-    display: table;
-    content: '';
-  }
-
-  hr::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  // 6. Lists
-  ul,
-  ol {
-    padding-left: $euiMarkdownSizeL;
-    margin-top: 0;
-    margin-bottom: $euiMarkdownSize;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  ul ul {
-    list-style-type: circle;
-  }
-
-  ol ol,
-  ul ol {
-    list-style-type: lower-roman;
-  }
-
-  ul ul ol,
-  ul ol ol,
-  ol ul ol,
-  ol ol ol {
-    list-style-type: lower-alpha;
   }
 
-  dd {
-    margin-left: 0;
-  }
-
-  ul ul,
-  ul ol,
-  ol ol,
-  ol ul {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  li > p {
-    margin-bottom: $euiMarkdownSizeXS;
+  // Checkboxes
+  .euiCheckbox {
+    // sass-lint:disable-block no-important
+    margin-bottom: 0 !important;
   }
 
-  li + li {
-    margin-top: $euiMarkdownSizeXXS;
+  .euiCheckbox + *:not(.euiCheckbox) {
+    margin-top: $euiMarkdownSize;
   }
 
+  // Task list
   .task-list-item {
     list-style-type: none;
   }
@@ -243,23 +90,28 @@ $browserDefaultFontSize: 16px;
     vertical-align: middle;
   }
 
-  // 7. Tables
-  table {
+  // Code block
+  .euiMarkdownFormat__codeblockWrapper {
+    margin-bottom: $euiMarkdownSize;
+  }
+
+  // Tables
+  .euiMarkdownFormat__table {
     display: block;
     width: 100%;
     overflow: auto;
     border-left: 1px solid $euiMarkdownAlphaLightShade;
     border-spacing: 0;
     border-collapse: collapse;
-  }
+    margin-bottom: $euiMarkdownSize;
 
-  td,
-  th {
-    padding: 0;
+    &:last-child {
+      margin-bottom: $euiMarkdownSize;
+    }
   }
 
-  table th,
-  table td {
+  .euiMarkdownFormat__table th,
+  .euiMarkdownFormat__table td {
     padding: $euiMarkdownSizeXXS $euiMarkdownSizeXS;
     border-top: 1px solid $euiMarkdownAlphaLightShade;
     border-bottom: 1px solid $euiMarkdownAlphaLightShade;
@@ -269,7 +121,7 @@ $browserDefaultFontSize: 16px;
     }
   }
 
-  table tr {
+  .euiMarkdownFormat__table tr {
     background-color: transparent;
     border-top: 1px solid $euiMarkdownAlphaLightShade;
   }
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index f1326be619aa..e9d57d9055ef 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -20,6 +20,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import unified, { PluggableList } from 'unified';
 import { VFileContents } from 'vfile';
+import { EuiText } from '../text/text';
 import {
   defaultProcessingPlugins,
   defaultParsingPlugins,
@@ -52,5 +53,9 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
       return children;
     }
   }, [children, processor]);
-  return <div className="euiMarkdownFormat">{result}</div>;
+  return (
+    <div className="euiMarkdownFormat">
+      <EuiText>{result}</EuiText>
+    </div>
+  );
 };
diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
index a62d1e6d1015..fe21d649065c 100644
--- a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
+++ b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
@@ -42,6 +42,7 @@ import { markdownLinkValidator } from './markdown_link_validator';
 import React, { createElement } from 'react';
 import { EuiLink } from '../../link';
 import { EuiCodeBlock, EuiCode } from '../../code';
+import { EuiHorizontalRule } from '../../horizontal_rule';
 import markdown from 'remark-parse';
 import highlight from 'remark-highlight.js';
 import emoji from 'remark-emoji';
@@ -95,6 +96,20 @@ export const getDefaultEuiMarkdownProcessingPlugins = (): [
           ) : (
             <EuiCode {...props} />
           ),
+        // When we use block code "fences" the code tag is replaced by the `EuiCodeBlock`
+        // But there's a pre tag that appears and wraps all the `EuiCodeBlock`
+        // We want to replace this pre tag with a div because the EuiCodeBlock already as a children pre tag
+        // this way we avoid unnecessary EuiText pre styles
+        pre: (props) => (
+          <div {...props} className="euiMarkdownFormat__codeblockWrapper" />
+        ),
+        blockquote: (props) => (
+          <blockquote {...props} className="euiMarkdownFormat__blockquote" />
+        ),
+        table: (props) => (
+          <table className="euiMarkdownFormat__table" {...props} />
+        ),
+        hr: (props) => <EuiHorizontalRule {...props} />,
         tooltipPlugin: MarkdownTooltip.renderer,
         checkboxPlugin: MarkdownCheckbox.renderer,
       },
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 6440d88540e2..4db0caa3b9cb 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -12,6 +12,10 @@
   img,
   pre {
     margin-bottom: convertToRem($baseLineHeightMultiplier * 3);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   ul,
@@ -137,7 +141,7 @@
     list-style: decimal;
   }
 
-  blockquote {
+  blockquote:not(.euiMarkdownFormat__blockquote) {
     position: relative;
     text-align: center;
     margin-left: auto;

From c0d40469b5e7e3a489f1f3d92dea3f19adc5ef20 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 24 Mar 2021 19:34:15 +0000
Subject: [PATCH 02/33] Comments

---
 src/components/markdown_editor/_markdown_format.scss       | 6 +++---
 .../markdown_editor/plugins/markdown_default_plugins.tsx   | 7 +++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 58c27748562e..310573452ae9 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -1,6 +1,6 @@
-// The Markdown Format uses by default a few EUI components
-// Uses the EuiText to wrap all the content
-// Uses the EuiLink and EuiCode.
+// The Markdown Format uses by default a few EUI components.
+// Uses the EuiText to wrap all the content.
+// Uses the EuiLink, EuiCode and EuiHorizontalRule.
 
 $browserDefaultFontSize: 16px;
 
diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
index fe21d649065c..1d25a4d357cf 100644
--- a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
+++ b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
@@ -96,10 +96,9 @@ export const getDefaultEuiMarkdownProcessingPlugins = (): [
           ) : (
             <EuiCode {...props} />
           ),
-        // When we use block code "fences" the code tag is replaced by the `EuiCodeBlock`
-        // But there's a pre tag that appears and wraps all the `EuiCodeBlock`
-        // We want to replace this pre tag with a div because the EuiCodeBlock already as a children pre tag
-        // this way we avoid unnecessary EuiText pre styles
+        // When we use block code "fences" the code tag is replaced by the `EuiCodeBlock`.
+        // But there's a pre wrapping all the `EuiCodeBlock`.
+        // We want to replace this pre tag with a div because the `EuiCodeBlock` has its own children pre tag.
         pre: (props) => (
           <div {...props} className="euiMarkdownFormat__codeblockWrapper" />
         ),

From e84df00d781ec6f40357bab39f804e8bda379b76 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 24 Mar 2021 19:49:33 +0000
Subject: [PATCH 03/33] Unnecessary comment

---
 src-docs/src/routes.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index c86096d31c8b..f56680167b46 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -327,7 +327,6 @@ const navigation = [
   {
     name: 'Guidelines',
     items: [
-      // TODO uncomment when EuiMarkdownFormat has a better text formatting
       createMarkdownExample(GettingStarted, 'Getting started'),
       createExample(AccessibilityGuidelines, 'Accessibility'),
       {

From f002a89af8fe80ea03c2b90ba136e1d6a28a3140 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 25 Mar 2021 12:40:41 +0000
Subject: [PATCH 04/33] Initial markdown format styles example

---
 .../markdown_editor/mardown_format_example.js | 22 +++++
 .../markdown_editor/markdown_format_styles.js | 96 +++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 src-docs/src/views/markdown_editor/markdown_format_styles.js

diff --git a/src-docs/src/views/markdown_editor/mardown_format_example.js b/src-docs/src/views/markdown_editor/mardown_format_example.js
index 4f9c99deb9a8..8adad1818b31 100644
--- a/src-docs/src/views/markdown_editor/mardown_format_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_format_example.js
@@ -16,6 +16,10 @@ import MarkdownFormatSink from './markdown_format_sink';
 const markdownFormatSinkSource = require('!!raw-loader!./markdown_format_sink');
 const markdownFormatSinkHtml = renderToHtml(MarkdownFormatSink);
 
+import MarkdownFormatStyles from './markdown_format_styles';
+const markdownFormatStylesSource = require('!!raw-loader!./markdown_format_styles');
+const markdownFormatStylesHtml = renderToHtml(MarkdownFormatStyles);
+
 export const MarkdownFormatExample = {
   title: 'Markdown format',
   beta: true,
@@ -63,6 +67,24 @@ export const MarkdownFormatExample = {
       },
       demo: <MarkdownFormat />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownFormatStylesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownFormatStylesHtml,
+        },
+      ],
+      title: 'Styles',
+      text: <p>This example shows of all the styling modifiers.</p>,
+      props: {
+        EuiMarkdownFormat,
+      },
+      demo: <MarkdownFormatStyles />,
+    },
     {
       source: [
         {
diff --git a/src-docs/src/views/markdown_editor/markdown_format_styles.js b/src-docs/src/views/markdown_editor/markdown_format_styles.js
new file mode 100644
index 000000000000..4d3d3aad2515
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown_format_styles.js
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+
+import {
+  EuiMarkdownFormat,
+  EuiPanel,
+  EuiSelect,
+  EuiSpacer,
+} from '../../../../src';
+
+const markdownContent = `## This is the first section
+
+The first **paragraph** of copy is where readers will skim to see if they’re on the right page, and if you have anything of value to say:
+
+* Item 1
+* Item 2
+
+___
+
+## This is the second section
+
+Where I can quote this :laughing:
+
+> Blockquotes can also be nested
+
+
+## Task Lists
+
+- [x] Create a new project
+- [x] Give your project a name
+- [ ] Add a new column
+
+
+## Code
+
+Inline \`<Code />\` is awesome!
+
+Block code "fences"
+
+Syntax highlighting JS
+
+\`\`\` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+\`\`\`
+
+## Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+`;
+
+export default () => {
+  const bgColors = [
+    'subdued',
+    'accent',
+    'danger',
+    'warning',
+    'primary',
+    'success',
+    'plain',
+    'transparent',
+  ];
+
+  const options = bgColors.map((item) => {
+    return { value: item, text: item[0].toUpperCase() + item.substring(1) };
+  });
+
+  const [value, setValue] = useState(options[1].value);
+
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <div>
+      <EuiSelect
+        id="selectDocExample"
+        options={options}
+        value={value}
+        onChange={(e) => onChange(e)}
+        aria-label="Use aria labels when no actual label is in use"
+      />
+      <EuiSpacer />
+      <EuiPanel hasBorder={true} color={value}>
+        <EuiMarkdownFormat>{markdownContent}</EuiMarkdownFormat>
+      </EuiPanel>
+    </div>
+  );
+};

From c831eea2930343fc50f155a3cacb09563a79f09a Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 28 May 2021 15:44:34 +0100
Subject: [PATCH 05/33] Getting started page matching other guideline pages

---
 src-docs/src/components/guide_components.scss       |  6 ++++++
 .../guide_markdown_format/guide_markdown_format.tsx |  4 +++-
 src-docs/src/views/guidelines/getting_started.md    |  2 +-
 src/components/markdown_editor/markdown_format.tsx  | 13 ++++++++++---
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index 992a3bd721ac..e612b03cce89 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/src-docs/src/components/guide_components.scss
@@ -475,4 +475,10 @@ $elasticLogoTextDark: #1C1E23;
   > * {
     padding: $euiSizeL;
   }
+}
+
+.guideMarkdownFormat  {
+  h2 {
+    padding-top: $euiSizeL;
+  }
 }
\ No newline at end of file
diff --git a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
index 3e85e6cff8d2..4902c1b3487d 100644
--- a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
+++ b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
@@ -22,7 +22,9 @@ export const GuideMarkdownFormat: FunctionComponent<GuideMarkdownFormatProps> =
   };
 
   return (
-    <EuiMarkdownFormat processingPluginList={processingPlugins}>
+    <EuiMarkdownFormat
+      processingPluginList={processingPlugins}
+      className="guideMarkdownFormat">
       {children}
     </EuiMarkdownFormat>
   );
diff --git a/src-docs/src/views/guidelines/getting_started.md b/src-docs/src/views/guidelines/getting_started.md
index 9835b5235cc1..e9e489fd4158 100644
--- a/src-docs/src/views/guidelines/getting_started.md
+++ b/src-docs/src/views/guidelines/getting_started.md
@@ -6,7 +6,7 @@ To install the Elastic UI Framework into an existing project, use the `yarn` CLI
 yarn add @elastic/eui
 ```
 
-Note that EUI has [several `peerDependencies` requirements](package.json) that will also need to be installed if starting with a blank project. You can read more about other ways to [consume EUI][consuming].
+Note that EUI has [several `peerDependencies` requirements](https://github.com/elastic/eui/package.json) that will also need to be installed if starting with a blank project. You can read more about other ways to [consume EUI](https://github.com/elastic/eui/blob/master/wiki/consuming.md).
 
 ```js
 yarn add @elastic/eui @elastic/datemath moment prop-types
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index e9d57d9055ef..5bf63c959af6 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -20,24 +20,28 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import unified, { PluggableList } from 'unified';
 import { VFileContents } from 'vfile';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
 import { EuiText } from '../text/text';
 import {
   defaultProcessingPlugins,
   defaultParsingPlugins,
 } from './plugins/markdown_default_plugins';
 
-export interface EuiMarkdownFormatProps {
+export type EuiMarkdownFormatProps = CommonProps & {
   children: string;
   /** array of unified plugins to parse content into an AST */
   parsingPluginList?: PluggableList;
   /** array of unified plugins to convert the AST into a ReactNode */
   processingPluginList?: PluggableList;
-}
+};
 
 export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   children,
+  className,
   parsingPluginList = defaultParsingPlugins,
   processingPluginList = defaultProcessingPlugins,
+  ...rest
 }) => {
   const processor = useMemo(
     () => unified().use(parsingPluginList).use(processingPluginList),
@@ -53,8 +57,11 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
       return children;
     }
   }, [children, processor]);
+
+  const classes = classNames('euiMarkdownFormat', className);
+
   return (
-    <div className="euiMarkdownFormat">
+    <div className={classes} {...rest}>
       <EuiText>{result}</EuiText>
     </div>
   );

From baf8dbe5e2756c87e1fd8b11daa15f5c2c2624d3 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 28 May 2021 16:14:11 +0100
Subject: [PATCH 06/33] wip

---
 src-docs/src/views/guidelines/getting_started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/guidelines/getting_started.md b/src-docs/src/views/guidelines/getting_started.md
index e9e489fd4158..5f9035ace169 100644
--- a/src-docs/src/views/guidelines/getting_started.md
+++ b/src-docs/src/views/guidelines/getting_started.md
@@ -17,7 +17,7 @@ yarn add @elastic/eui @elastic/datemath moment prop-types
 
 ### Node
 
-We depend upon the version of node defined in [.nvmrc](.nvmrc).
+We depend upon the version of node defined in [.nvmrc](https://github.com/elastic/eui/.nvmrc).
 
 You will probably want to install a node version manager. [nvm](https://github.com/creationix/nvm) is recommended.
 

From 65c3b6f2b5886e08d80213a1f5a3fd7a76bd9c9d Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 3 Jun 2021 12:38:37 +0100
Subject: [PATCH 07/33] Improving euiScaleText mixin to also return `em` sizes

---
 .../markdown_editor/mardown_format_example.js |  22 ----
 .../markdown_editor/markdown_format_sink.js   | 107 +++++++++++++++++-
 .../markdown_editor/markdown_format_styles.js |  96 ----------------
 .../markdown_editor/_markdown_format.scss     |  13 ++-
 .../markdown_editor/markdown_format.tsx       |   6 +-
 src/components/text/_text.scss                |  92 ++++++++++-----
 src/components/text/text.tsx                  |  11 +-
 src/themes/eui-amsterdam/overrides/_text.scss |   8 +-
 8 files changed, 193 insertions(+), 162 deletions(-)
 delete mode 100644 src-docs/src/views/markdown_editor/markdown_format_styles.js

diff --git a/src-docs/src/views/markdown_editor/mardown_format_example.js b/src-docs/src/views/markdown_editor/mardown_format_example.js
index 8adad1818b31..4f9c99deb9a8 100644
--- a/src-docs/src/views/markdown_editor/mardown_format_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_format_example.js
@@ -16,10 +16,6 @@ import MarkdownFormatSink from './markdown_format_sink';
 const markdownFormatSinkSource = require('!!raw-loader!./markdown_format_sink');
 const markdownFormatSinkHtml = renderToHtml(MarkdownFormatSink);
 
-import MarkdownFormatStyles from './markdown_format_styles';
-const markdownFormatStylesSource = require('!!raw-loader!./markdown_format_styles');
-const markdownFormatStylesHtml = renderToHtml(MarkdownFormatStyles);
-
 export const MarkdownFormatExample = {
   title: 'Markdown format',
   beta: true,
@@ -67,24 +63,6 @@ export const MarkdownFormatExample = {
       },
       demo: <MarkdownFormat />,
     },
-    {
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: markdownFormatStylesSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: markdownFormatStylesHtml,
-        },
-      ],
-      title: 'Styles',
-      text: <p>This example shows of all the styling modifiers.</p>,
-      props: {
-        EuiMarkdownFormat,
-      },
-      demo: <MarkdownFormatStyles />,
-    },
     {
       source: [
         {
diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
index 9cb5d06af7f5..ba38902d6e04 100644
--- a/src-docs/src/views/markdown_editor/markdown_format_sink.js
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -1,6 +1,16 @@
-import React from 'react';
-
-import { EuiMarkdownFormat } from '../../../../src';
+import React, { useState } from 'react';
+
+import {
+  EuiMarkdownFormat,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  useColorPickerState,
+  EuiColorPicker,
+  EuiFormRow,
+  EuiSelect,
+} from '../../../../src';
 
 const markdownContent = `# h1 Heading
 ## h2 Heading
@@ -146,5 +156,94 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 `;
 
 export default () => {
-  return <EuiMarkdownFormat>{markdownContent}</EuiMarkdownFormat>;
+  const sizingMethodOptions = [
+    {
+      value: 'em',
+      text: 'em',
+    },
+    {
+      value: 'rem',
+      text: 'rem',
+    },
+  ];
+
+  const percentages = ['33%', '50%', '66%', '100%', '150%', '200%'];
+
+  const fontSizeScaleOptions = percentages.map((item) => {
+    return { value: item, text: item };
+  });
+
+  const [textColor, setTextColor, textColorErrors] = useColorPickerState(
+    '#343741'
+  );
+
+  const [sizingMethod, setSizingMethod] = useState(
+    sizingMethodOptions[0].value
+  );
+  const [fontSizeScale, setFontSizeScale] = useState(
+    fontSizeScaleOptions[3].value
+  );
+
+  const onChangeSizingMethod = (e) => {
+    setSizingMethod(e.target.value);
+  };
+
+  const onChangeFontSizeScale = (e) => {
+    setFontSizeScale(e.target.value);
+  };
+
+  return (
+    <>
+      <EuiFlexGroup style={{ maxWidth: 600 }}>
+        <EuiFlexItem>
+          <EuiFormRow
+            label="Text color"
+            isInvalid={!!textColorErrors}
+            error={textColorErrors}>
+            <EuiColorPicker
+              onChange={setTextColor}
+              color={textColor}
+              isInvalid={!!textColorErrors}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiFormRow label="Sizing method">
+            <EuiSelect
+              options={sizingMethodOptions}
+              value={sizingMethod}
+              onChange={(e) => onChangeSizingMethod(e)}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiFormRow label="Font size">
+            <EuiSelect
+              options={fontSizeScaleOptions}
+              value={fontSizeScale}
+              onChange={(e) => onChangeFontSizeScale(e)}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer />
+      <EuiPanel
+        hasBorder={true}
+        style={{
+          fontSize: '16px',
+        }}>
+        <EuiMarkdownFormat
+          sizingMethod={sizingMethod}
+          style={{
+            fontSize: fontSizeScale,
+            color: textColor,
+          }}>
+          {markdownContent}
+        </EuiMarkdownFormat>
+      </EuiPanel>
+    </>
+  );
 };
diff --git a/src-docs/src/views/markdown_editor/markdown_format_styles.js b/src-docs/src/views/markdown_editor/markdown_format_styles.js
deleted file mode 100644
index 4d3d3aad2515..000000000000
--- a/src-docs/src/views/markdown_editor/markdown_format_styles.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  EuiMarkdownFormat,
-  EuiPanel,
-  EuiSelect,
-  EuiSpacer,
-} from '../../../../src';
-
-const markdownContent = `## This is the first section
-
-The first **paragraph** of copy is where readers will skim to see if they’re on the right page, and if you have anything of value to say:
-
-* Item 1
-* Item 2
-
-___
-
-## This is the second section
-
-Where I can quote this :laughing:
-
-> Blockquotes can also be nested
-
-
-## Task Lists
-
-- [x] Create a new project
-- [x] Give your project a name
-- [ ] Add a new column
-
-
-## Code
-
-Inline \`<Code />\` is awesome!
-
-Block code "fences"
-
-Syntax highlighting JS
-
-\`\`\` js
-var foo = function (bar) {
-  return bar++;
-};
-
-console.log(foo(5));
-\`\`\`
-
-## Tables
-
-| Option | Description |
-| ------ | ----------- |
-| data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
-
-`;
-
-export default () => {
-  const bgColors = [
-    'subdued',
-    'accent',
-    'danger',
-    'warning',
-    'primary',
-    'success',
-    'plain',
-    'transparent',
-  ];
-
-  const options = bgColors.map((item) => {
-    return { value: item, text: item[0].toUpperCase() + item.substring(1) };
-  });
-
-  const [value, setValue] = useState(options[1].value);
-
-  const onChange = (e) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <div>
-      <EuiSelect
-        id="selectDocExample"
-        options={options}
-        value={value}
-        onChange={(e) => onChange(e)}
-        aria-label="Use aria labels when no actual label is in use"
-      />
-      <EuiSpacer />
-      <EuiPanel hasBorder={true} color={value}>
-        <EuiMarkdownFormat>{markdownContent}</EuiMarkdownFormat>
-      </EuiPanel>
-    </div>
-  );
-};
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 310573452ae9..df48c48c02f2 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -11,9 +11,6 @@ $browserDefaultFontSize: 16px;
 }
 
 .euiMarkdownFormat {
-  @include euiFont;
-  @include euiText;
-
   // We're using `em` values to support apps where consumers might adjust sizes
   // and consequently the markdown needs to adjust to these changes
 
@@ -50,6 +47,16 @@ $browserDefaultFontSize: 16px;
     color: $euiColorLightestShade;
   }
 
+  .euiText {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: inherit;
+    }
+  }
 
   // Blockquotes
   .euiMarkdownFormat__blockquote {
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 5bf63c959af6..bb89a2ce0c19 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -22,7 +22,7 @@ import unified, { PluggableList } from 'unified';
 import { VFileContents } from 'vfile';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
-import { EuiText } from '../text/text';
+import { EuiText, EuiTextProps } from '../text/text';
 import {
   defaultProcessingPlugins,
   defaultParsingPlugins,
@@ -34,6 +34,7 @@ export type EuiMarkdownFormatProps = CommonProps & {
   parsingPluginList?: PluggableList;
   /** array of unified plugins to convert the AST into a ReactNode */
   processingPluginList?: PluggableList;
+  sizingMethod?: EuiTextProps['sizingMethod'];
 };
 
 export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
@@ -41,6 +42,7 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   className,
   parsingPluginList = defaultParsingPlugins,
   processingPluginList = defaultProcessingPlugins,
+  sizingMethod = 'rem',
   ...rest
 }) => {
   const processor = useMemo(
@@ -62,7 +64,7 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
 
   return (
     <div className={classes} {...rest}>
-      <EuiText>{result}</EuiText>
+      <EuiText sizingMethod={sizingMethod}>{result}</EuiText>
     </div>
   );
 };
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 4db0caa3b9cb..8fbaee07683b 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -1,8 +1,27 @@
 // This should only be used for .euiText, therefore it's not included in a separate mixin file
+@function calculateSize($size: $baseFontSize, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    @return #{$size / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$size / $euiFontSize}em;
+  }
+}
+
+// Spit out rem and px
+@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    font-size: $size;
+    font-size: calculateSize($size, 'rem');
+  } @else if ($sizingMethod == 'em') {
+    font-size: calculateSize($size, 'em');
+  }
+}
+
+@mixin euiScaleText($baseFontSize, $sizingMethod: 'rem') {
+  @include fontSize($baseFontSize, $sizingMethod);
 
-@mixin euiScaleText($baseFontSize) {
   $baseLineHeightMultiplier: $baseFontSize / 2;
-  line-height: convertToRem($baseLineHeightMultiplier * 3);
+  line-height: ($baseLineHeightMultiplier * 3) / $baseFontSize;
 
   p,
   ul,
@@ -11,7 +30,7 @@
   blockquote,
   img,
   pre {
-    margin-bottom: convertToRem($baseLineHeightMultiplier * 3);
+    margin-bottom: calculateSize(($baseLineHeightMultiplier * 3), $sizingMethod);
 
     &:last-child {
       margin-bottom: 0;
@@ -20,12 +39,12 @@
 
   ul,
   ol {
-    margin-left: convertToRem($baseLineHeightMultiplier * 3);
+    margin-left: calculateSize(($baseLineHeightMultiplier * 3), $sizingMethod);
   }
 
   blockquote {
-    padding:  convertToRem($baseFontSize * 1.5);
-    font-size: convertToRem($baseFontSize * nth($euiTextScale, 4));
+    padding:  calculateSize(($baseFontSize * 1.5), $sizingMethod);
+    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 4)), $sizingMethod);
   }
 
   h1,
@@ -34,11 +53,11 @@
   h4,
   h5,
   h6 {
-    margin-bottom: convertToRem($baseLineHeightMultiplier * 1);
+    margin-bottom: calculateSize(($baseLineHeightMultiplier * 1), $sizingMethod);
   }
 
   dd + dt {
-    margin-top: convertToRem($baseLineHeightMultiplier * 2);
+    margin-top: calculateSize(($baseLineHeightMultiplier * 2), $sizingMethod);
   }
 
   * + h2,
@@ -46,48 +65,48 @@
   * + h4,
   * + h5,
   * + h6 {
-    margin-top: convertToRem($baseLineHeightMultiplier * 4);
+    margin-top: calculateSize(($baseLineHeightMultiplier * 4), $sizingMethod);
   }
 
   h1 {
-    font-size: convertToRem($baseFontSize * nth($euiTextScale, 1));
-    line-height: convertToRem($baseLineHeightMultiplier * 6);
+    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 1)), $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 6) / ($baseFontSize * nth($euiTextScale, 1));
   }
 
   h2 {
-    font-size: convertToRem($baseFontSize * nth($euiTextScale, 2));
-    line-height: convertToRem($baseLineHeightMultiplier * 5);
+    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 2)), $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 5) / ($baseFontSize * nth($euiTextScale, 2));
   }
 
   h3 {
-    font-size: convertToRem($baseFontSize * nth($euiTextScale, 3));
-    line-height: convertToRem($baseLineHeightMultiplier * 4);
+    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 3)), $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 4) / ($baseFontSize * nth($euiTextScale, 3));
   }
 
   h4,
   dt,
   .eui-definitionListReverse dd {
-    font-size: convertToRem($baseFontSize * nth($euiTextScale, 5)); // skip level 4 on purpose
-    line-height: convertToRem($baseLineHeightMultiplier * 3);
+    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 5)), $sizingMethod); // skip level 4 on purpose
+    line-height: ($baseLineHeightMultiplier * 3) / ($baseFontSize * nth($euiTextScale, 5));
   }
 
   .eui-definitionListReverse dt {
-    font-size: convertToRem($baseFontSize * nth($euiTextScale, 7));
+    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
     color: $euiTextColor;
   }
 
   h5 {
-    font-size: convertToRem($baseFontSize * nth($euiTextScale, 6));
-    line-height: convertToRem($baseLineHeightMultiplier * 2);
+    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 2) / ($baseFontSize * nth($euiTextScale, 6));
   }
 
   h6 {
-    font-size: convertToRem($baseFontSize * nth($euiTextScale, 7));
-    line-height: convertToRem($baseLineHeightMultiplier * 2);
+    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 2) / ($baseFontSize * nth($euiTextScale, 7));
   }
 
   small {
-    font-size: convertToRem($baseFontSize * nth($euiTextScale, 6));
+    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
   }
 
   pre {
@@ -97,13 +116,12 @@
   code {
     // Setting the font size in rem's ensure it doesn't compound
     // the 90% set by euiCodeBlock
-    font-size: convertToRem($baseFontSize * .9);
+    font-size: calculateSize(($baseFontSize * .9), $sizingMethod);
   }
 }
 
 .euiText {
   @include euiText;
-  @include euiFontSize;
   // 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.
@@ -219,8 +237,6 @@
     font-weight: $euiFontWeightRegular;
   }
 
-  @include euiScaleText($euiFontSize);
-
   &.euiText--constrainedWidth {
     max-width: $euiTextConstrainedMaxWidth;
     // If the max-width is way too short of the width of the container,
@@ -234,12 +250,26 @@
   }
 }
 
+.euiText--medium {
+  @include euiScaleText($euiFontSize, 'rem');
+}
+
 .euiText--small {
-  @include fontSize($euiFontSizeS);
-  @include euiScaleText($euiFontSizeS);
+  @include euiScaleText($euiFontSizeS, 'rem');
 }
 
 .euiText--extraSmall {
-  @include fontSize($euiFontSizeXS);
-  @include euiScaleText($euiFontSizeXS);
+  @include euiScaleText($euiFontSizeXS, 'rem');
+}
+
+.euiText--emMedium {
+  @include euiScaleText($euiFontSize, 'em');
 }
+
+.euiText--emSmall {
+  @include euiScaleText($euiFontSizeS, 'em');
+}
+
+.euiText--emExtraSmall {
+  @include euiScaleText($euiFontSizeXS, 'em');
+}
\ No newline at end of file
diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx
index 8cf29c17383d..09391430db3c 100644
--- a/src/components/text/text.tsx
+++ b/src/components/text/text.tsx
@@ -31,6 +31,12 @@ const textSizeToClassNameMap = {
   m: 'euiText--medium',
 };
 
+const textSizeEmToClassNameMap = {
+  xs: 'euiText--emExtraSmall',
+  s: 'euiText--emSmall',
+  m: 'euiText--emMedium',
+};
+
 export type TextSize = keyof typeof textSizeToClassNameMap;
 
 export const TEXT_SIZES = keysOf(textSizeToClassNameMap);
@@ -41,6 +47,7 @@ export type EuiTextProps = CommonProps &
     size?: TextSize;
     color?: TextColor;
     grow?: boolean;
+    sizingMethod?: 'rem' | 'em';
   };
 
 export const EuiText: FunctionComponent<EuiTextProps> = ({
@@ -50,11 +57,13 @@ export const EuiText: FunctionComponent<EuiTextProps> = ({
   textAlign,
   children,
   className,
+  sizingMethod = 'rem',
   ...rest
 }) => {
   const classes = classNames(
     'euiText',
-    textSizeToClassNameMap[size],
+    sizingMethod === 'rem' && textSizeToClassNameMap[size],
+    sizingMethod === 'em' && textSizeEmToClassNameMap[size],
     className,
     {
       'euiText--constrainedWidth': !grow,
diff --git a/src/themes/eui-amsterdam/overrides/_text.scss b/src/themes/eui-amsterdam/overrides/_text.scss
index ffda9eff4baf..4c2b9e54b154 100644
--- a/src/themes/eui-amsterdam/overrides/_text.scss
+++ b/src/themes/eui-amsterdam/overrides/_text.scss
@@ -1,5 +1,7 @@
-// Increase the medium (currently default) size of EuiText to original 16px
 .euiText--medium {
-  @include fontSize($euiFontSizeM);
-  @include euiScaleText($euiFontSizeM);
+  @include euiScaleText($euiFontSizeM, 'rem');
 }
+
+.euiText--emMedium {
+  @include euiScaleText($euiFontSizeM, 'em');
+}
\ No newline at end of file

From 4d45e359082950a4dab58273d342adf312a153fa Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 9 Jun 2021 15:31:38 +0100
Subject: [PATCH 08/33] Better amsterdam scaling

---
 src/themes/eui-amsterdam/overrides/_text.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/themes/eui-amsterdam/overrides/_text.scss b/src/themes/eui-amsterdam/overrides/_text.scss
index 4c2b9e54b154..9fb169f3bd6c 100644
--- a/src/themes/eui-amsterdam/overrides/_text.scss
+++ b/src/themes/eui-amsterdam/overrides/_text.scss
@@ -1,7 +1,3 @@
 .euiText--medium {
   @include euiScaleText($euiFontSizeM, 'rem');
 }
-
-.euiText--emMedium {
-  @include euiScaleText($euiFontSizeM, 'em');
-}
\ No newline at end of file

From 537ca0a25cc3142d96c245b702ccdc6040399db1 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 22 Jun 2021 13:18:21 +0100
Subject: [PATCH 09/33] Move mixins to appropriate files. Renaming mixins.

---
 src/components/text/_text.scss                | 50 ++++++-------------
 src/global_styling/mixins/_typography.scss    | 37 ++++++++++++++
 src/global_styling/variables/_typography.scss | 27 ----------
 .../global_styling/mixins/_typography.scss    | 25 ++++++++++
 .../global_styling/variables/_typography.scss |  8 ---
 5 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 8fbaee07683b..8c0f41e1557a 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -1,22 +1,4 @@
 // This should only be used for .euiText, therefore it's not included in a separate mixin file
-@function calculateSize($size: $baseFontSize, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    @return #{$size / $euiFontSize}rem;
-  } @else if ($sizingMethod == 'em') {
-    @return #{$size / $euiFontSize}em;
-  }
-}
-
-// Spit out rem and px
-@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    font-size: $size;
-    font-size: calculateSize($size, 'rem');
-  } @else if ($sizingMethod == 'em') {
-    font-size: calculateSize($size, 'em');
-  }
-}
-
 @mixin euiScaleText($baseFontSize, $sizingMethod: 'rem') {
   @include fontSize($baseFontSize, $sizingMethod);
 
@@ -30,7 +12,7 @@
   blockquote,
   img,
   pre {
-    margin-bottom: calculateSize(($baseLineHeightMultiplier * 3), $sizingMethod);
+    margin-bottom: convertToRemOrEm(($baseLineHeightMultiplier * 3), $sizingMethod);
 
     &:last-child {
       margin-bottom: 0;
@@ -39,12 +21,12 @@
 
   ul,
   ol {
-    margin-left: calculateSize(($baseLineHeightMultiplier * 3), $sizingMethod);
+    margin-left: convertToRemOrEm(($baseLineHeightMultiplier * 3), $sizingMethod);
   }
 
   blockquote {
-    padding:  calculateSize(($baseFontSize * 1.5), $sizingMethod);
-    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 4)), $sizingMethod);
+    padding:  convertToRemOrEm(($baseFontSize * 1.5), $sizingMethod);
+    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 4)), $sizingMethod);
   }
 
   h1,
@@ -53,11 +35,11 @@
   h4,
   h5,
   h6 {
-    margin-bottom: calculateSize(($baseLineHeightMultiplier * 1), $sizingMethod);
+    margin-bottom: convertToRemOrEm(($baseLineHeightMultiplier * 1), $sizingMethod);
   }
 
   dd + dt {
-    margin-top: calculateSize(($baseLineHeightMultiplier * 2), $sizingMethod);
+    margin-top: convertToRemOrEm(($baseLineHeightMultiplier * 2), $sizingMethod);
   }
 
   * + h2,
@@ -65,48 +47,48 @@
   * + h4,
   * + h5,
   * + h6 {
-    margin-top: calculateSize(($baseLineHeightMultiplier * 4), $sizingMethod);
+    margin-top: convertToRemOrEm(($baseLineHeightMultiplier * 4), $sizingMethod);
   }
 
   h1 {
-    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 1)), $sizingMethod);
+    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 1)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 6) / ($baseFontSize * nth($euiTextScale, 1));
   }
 
   h2 {
-    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 2)), $sizingMethod);
+    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 2)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 5) / ($baseFontSize * nth($euiTextScale, 2));
   }
 
   h3 {
-    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 3)), $sizingMethod);
+    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 3)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 4) / ($baseFontSize * nth($euiTextScale, 3));
   }
 
   h4,
   dt,
   .eui-definitionListReverse dd {
-    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 5)), $sizingMethod); // skip level 4 on purpose
+    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 5)), $sizingMethod); // skip level 4 on purpose
     line-height: ($baseLineHeightMultiplier * 3) / ($baseFontSize * nth($euiTextScale, 5));
   }
 
   .eui-definitionListReverse dt {
-    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
+    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
     color: $euiTextColor;
   }
 
   h5 {
-    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
+    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 2) / ($baseFontSize * nth($euiTextScale, 6));
   }
 
   h6 {
-    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
+    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 2) / ($baseFontSize * nth($euiTextScale, 7));
   }
 
   small {
-    font-size: calculateSize(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
+    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
   }
 
   pre {
@@ -116,7 +98,7 @@
   code {
     // Setting the font size in rem's ensure it doesn't compound
     // the 90% set by euiCodeBlock
-    font-size: calculateSize(($baseFontSize * .9), $sizingMethod);
+    font-size: convertToRemOrEm(($baseFontSize * .9), $sizingMethod);
   }
 }
 
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index 0905e5476cbf..b375236789af 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -1,6 +1,43 @@
 // sass-lint:disable no-vendor-prefixes
 // sass-lint:disable no-important
 
+// Some mixins that help us deal with browser scaling of text more consistently.
+// Essentially, fonts across eui should scale against the root html element, not
+// against parent inheritance.
+
+@function convertToRem($size) {
+  @return #{$size / $euiFontSize}rem;
+}
+
+@function convertToRemOrEm($size, $sizingMethod) {
+  @if ($sizingMethod == 'rem') {
+    @return #{$size / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$size / $euiFontSize}em;
+  }
+}
+
+// Spit out rem and px
+@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    font-size: $size;
+    font-size: convertToRemOrEm($size, 'rem');
+  } @else if ($sizingMethod == 'em') {
+    font-size: convertToRemOrEm($size, 'em');
+  }
+}
+
+// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
+// EX: A proper line-height for text is 1.5 times the font-size.
+//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
+//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
+@function lineHeightFromBaseline($multiplier: 3) {
+  @return convertToRem(($euiFontSize/2)*$multiplier);
+}
+@mixin lineHeightFromBaseline($multiplier: 3) {
+  line-height: lineHeightFromBaseline($multiplier);
+}
+
 // Our base fonts
 
 @mixin euiFont {
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index a135b93101b4..248072ac2084 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -1,30 +1,3 @@
-// Some mixins that help us deal with browser scaling of text more consistently.
-// Essentially, fonts across eui should scale against the root html element, not
-// against parent inheritance.
-
-// Typography mixins
-
-@function convertToRem($size) {
-  @return #{$size / $euiFontSize}rem;
-}
-
-// Spit out rem and px
-@mixin fontSize($size: $euiFontSize) {
-  font-size: $size;
-  font-size: convertToRem($size);
-}
-
-// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
-// EX: A proper line-height for text is 1.5 times the font-size.
-//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
-//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
-@function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiFontSize/2)*$multiplier);
-}
-@mixin lineHeightFromBaseline($multiplier: 3) {
-  line-height: lineHeightFromBaseline($multiplier);
-}
-
 // Families
 $euiFontFamily: 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
 $euiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default;
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
index f33cc6d97743..e6c99f1972bd 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
@@ -2,6 +2,31 @@
 // All line-heights are aligned to baseline grid
 // sass-lint:disable no-vendor-prefixes
 
+@function convertToRem($size) {
+  @return #{$size / $euiFontSize}rem;
+}
+
+// Spit out rem and px
+@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    font-size: $size;
+    font-size: convertToRemOrEm($size, 'rem');
+  } @else if ($sizingMethod == 'em') {
+    font-size: convertToRemOrEm($size, 'em');
+  }
+}
+
+// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
+// EX: A proper line-height for text is 1.5 times the font-size.
+//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
+//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
+@function lineHeightFromBaseline($multiplier: 3) {
+  @return convertToRem(($euiFontSize/2)*$multiplier);
+}
+@mixin lineHeightFromBaseline($multiplier: 3) {
+  line-height: lineHeightFromBaseline($multiplier);
+}
+
 // Redoing this mixin mainly to remove the letter-spacing
 @mixin euiFont {
   font-family: $euiFontFamily;
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
index 765e81bc80d8..251078147d1d 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
@@ -19,14 +19,6 @@ $euiBodyLineHeight: 1.142857143; // 16px from a 14px base font size to ensure it
 $euiCodeFontWeightRegular: 400;
 $euiCodeFontWeightBold: 700;
 
-// Use 8px increments for base gridline
-@function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiSize/2)*$multiplier);
-}
-@mixin lineHeightFromBaseline($multiplier: 3) {
-  line-height: lineHeightFromBaseline($multiplier);
-}
-
 $euiTitles: (
   'xxxs': (
     'font-size': $euiFontSizeXS,

From 6f3249c57ebd0189380c9c5fe96b673fbd701628 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 22 Jun 2021 13:26:59 +0100
Subject: [PATCH 10/33] Just one EM class

---
 src/components/text/_text.scss | 12 ++----------
 src/components/text/text.tsx   | 14 +++++---------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 8c0f41e1557a..859d7f945000 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -92,7 +92,7 @@
   }
 
   pre {
-    padding: $baseLineHeightMultiplier * 2;
+    padding: convertToRemOrEm(($baseLineHeightMultiplier * 2), $sizingMethod);
   }
 
   code {
@@ -244,14 +244,6 @@
   @include euiScaleText($euiFontSizeXS, 'rem');
 }
 
-.euiText--emMedium {
+.euiText--em {
   @include euiScaleText($euiFontSize, 'em');
 }
-
-.euiText--emSmall {
-  @include euiScaleText($euiFontSizeS, 'em');
-}
-
-.euiText--emExtraSmall {
-  @include euiScaleText($euiFontSizeXS, 'em');
-}
\ No newline at end of file
diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx
index 09391430db3c..d90ccc8ca193 100644
--- a/src/components/text/text.tsx
+++ b/src/components/text/text.tsx
@@ -31,12 +31,6 @@ const textSizeToClassNameMap = {
   m: 'euiText--medium',
 };
 
-const textSizeEmToClassNameMap = {
-  xs: 'euiText--emExtraSmall',
-  s: 'euiText--emSmall',
-  m: 'euiText--emMedium',
-};
-
 export type TextSize = keyof typeof textSizeToClassNameMap;
 
 export const TEXT_SIZES = keysOf(textSizeToClassNameMap);
@@ -63,11 +57,13 @@ export const EuiText: FunctionComponent<EuiTextProps> = ({
   const classes = classNames(
     'euiText',
     sizingMethod === 'rem' && textSizeToClassNameMap[size],
-    sizingMethod === 'em' && textSizeEmToClassNameMap[size],
-    className,
+    {
+      'euiText--em': sizingMethod === 'em',
+    },
     {
       'euiText--constrainedWidth': !grow,
-    }
+    },
+    className
   );
 
   let optionallyAlteredText;

From 23f1f8abf0e376536a6fc3fe4e708912ee835c99 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 22 Jun 2021 15:06:55 +0100
Subject: [PATCH 11/33] Moving functions to typography variables file

---
 src/components/text/_text.scss                | 98 +++++++++++--------
 src/global_styling/mixins/_typography.scss    | 23 +----
 src/global_styling/variables/_typography.scss | 32 ++++++
 .../global_styling/mixins/_typography.scss    | 21 ----
 .../global_styling/variables/_typography.scss | 28 ++++++
 5 files changed, 118 insertions(+), 84 deletions(-)

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 859d7f945000..02425f9bf038 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -1,4 +1,3 @@
-// This should only be used for .euiText, therefore it's not included in a separate mixin file
 @mixin euiScaleText($baseFontSize, $sizingMethod: 'rem') {
   @include fontSize($baseFontSize, $sizingMethod);
 
@@ -12,7 +11,7 @@
   blockquote,
   img,
   pre {
-    margin-bottom: convertToRemOrEm(($baseLineHeightMultiplier * 3), $sizingMethod);
+    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 3), 1.5, $sizingMethod);
 
     &:last-child {
       margin-bottom: 0;
@@ -21,84 +20,99 @@
 
   ul,
   ol {
-    margin-left: convertToRemOrEm(($baseLineHeightMultiplier * 3), $sizingMethod);
+    margin-left: sizeToRemOrEm(($baseLineHeightMultiplier * 3), 1.5, $sizingMethod);
   }
 
   blockquote {
-    padding:  convertToRemOrEm(($baseFontSize * 1.5), $sizingMethod);
-    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 4)), $sizingMethod);
+    font-size: fontSizeToRemOrEm(($baseFontSize), $sizingMethod);
+    padding:  sizeToRemOrEm(($baseLineHeightMultiplier * 3), 1.5, $sizingMethod);
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-bottom: convertToRemOrEm(($baseLineHeightMultiplier * 1), $sizingMethod);
-  }
-
-  dd + dt {
-    margin-top: convertToRemOrEm(($baseLineHeightMultiplier * 2), $sizingMethod);
-  }
-
-  * + h2,
-  * + h3,
-  * + h4,
-  * + h5,
-  * + h6 {
-    margin-top: convertToRemOrEm(($baseLineHeightMultiplier * 4), $sizingMethod);
-  }
+  // headings
 
   h1 {
-    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 1)), $sizingMethod);
+    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 1)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 6) / ($baseFontSize * nth($euiTextScale, 1));
+    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
   }
 
   h2 {
-    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 2)), $sizingMethod);
+    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 2)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 5) / ($baseFontSize * nth($euiTextScale, 2));
+    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
   }
 
   h3 {
-    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 3)), $sizingMethod);
+    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 3)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 4) / ($baseFontSize * nth($euiTextScale, 3));
+    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
   }
 
-  h4,
-  dt,
-  .eui-definitionListReverse dd {
-    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 5)), $sizingMethod); // skip level 4 on purpose
+  h4 {
+    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 5)), $sizingMethod); // skip level 4 on purpose
     line-height: ($baseLineHeightMultiplier * 3) / ($baseFontSize * nth($euiTextScale, 5));
-  }
-
-  .eui-definitionListReverse dt {
-    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
-    color: $euiTextColor;
+    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
   }
 
   h5 {
-    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
+    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 2) / ($baseFontSize * nth($euiTextScale, 6));
+    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
   }
 
   h6 {
-    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
+    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
     line-height: ($baseLineHeightMultiplier * 2) / ($baseFontSize * nth($euiTextScale, 7));
+    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
+  }
+
+  * + h2 {
+    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 1.2, $sizingMethod);
+  }
+
+  * + h3 {
+    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 1.45, $sizingMethod);
+  }
+
+  * + h4 {
+    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 2, $sizingMethod);
+  }
+
+  * + h5 {
+    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 1.2, $sizingMethod);
+  }
+
+  * + h6 {
+    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 1.2, $sizingMethod);
+  }
+
+  dd + dt {
+    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 2), $sizingMethod);
+  }
+
+  dt,
+  .eui-definitionListReverse dd {
+    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 5)), $sizingMethod); // skip level 4 on purpose
+    line-height: ($baseLineHeightMultiplier * 3) / ($baseFontSize * nth($euiTextScale, 5));
+  }
+
+  .eui-definitionListReverse dt {
+    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
+    color: $euiTextColor;
   }
 
   small {
-    font-size: convertToRemOrEm(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
+    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
   }
 
   pre {
-    padding: convertToRemOrEm(($baseLineHeightMultiplier * 2), $sizingMethod);
+    padding: fontSizeToRemOrEm(($baseLineHeightMultiplier * 2), $sizingMethod);
   }
 
   code {
     // Setting the font size in rem's ensure it doesn't compound
     // the 90% set by euiCodeBlock
-    font-size: convertToRemOrEm(($baseFontSize * .9), $sizingMethod);
+    font-size: fontSizeToRemOrEm(($baseFontSize * .9), $sizingMethod);
   }
 }
 
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index b375236789af..e8e409d966b9 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -5,35 +5,16 @@
 // Essentially, fonts across eui should scale against the root html element, not
 // against parent inheritance.
 
-@function convertToRem($size) {
-  @return #{$size / $euiFontSize}rem;
-}
-
-@function convertToRemOrEm($size, $sizingMethod) {
-  @if ($sizingMethod == 'rem') {
-    @return #{$size / $euiFontSize}rem;
-  } @else if ($sizingMethod == 'em') {
-    @return #{$size / $euiFontSize}em;
-  }
-}
-
 // Spit out rem and px
 @mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') {
   @if ($sizingMethod == 'rem') {
     font-size: $size;
-    font-size: convertToRemOrEm($size, 'rem');
+    font-size: fontSizeToRemOrEm($size, 'rem');
   } @else if ($sizingMethod == 'em') {
-    font-size: convertToRemOrEm($size, 'em');
+    font-size: fontSizeToRemOrEm($size, 'em');
   }
 }
 
-// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
-// EX: A proper line-height for text is 1.5 times the font-size.
-//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
-//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
-@function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiFontSize/2)*$multiplier);
-}
 @mixin lineHeightFromBaseline($multiplier: 3) {
   line-height: lineHeightFromBaseline($multiplier);
 }
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 248072ac2084..bc1e0c8eded0 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -29,6 +29,38 @@ $euiFontWeightBold:         700 !default;
 $euiCodeFontWeightRegular:  400 !default;
 $euiCodeFontWeightBold:     700 !default;
 
+
+// Normally functions are imported before variables in `_index.scss` files
+// But because they need to consume some typography variables they need to live here
+@function convertToRem($size) {
+  @return #{$size / $euiFontSize}rem;
+}
+
+@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    @return #{$size / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$size / $euiFontSize}em;
+  }
+}
+
+@function sizeToRemOrEm($remSize, $emSize: 1, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    @return #{$remSize / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$emSize}em;
+  }
+}
+
+// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
+// EX: A proper line-height for text is 1.5 times the font-size.
+//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
+//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
+@function lineHeightFromBaseline($multiplier: 3) {
+  @return convertToRem(($euiFontSize/2)*$multiplier);
+}
+
+
 // Titles map
 // Lists all the properties per EuiTitle size that then gets looped through to create the selectors.
 // The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
index e6c99f1972bd..2509535fb4d8 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
@@ -2,27 +2,6 @@
 // All line-heights are aligned to baseline grid
 // sass-lint:disable no-vendor-prefixes
 
-@function convertToRem($size) {
-  @return #{$size / $euiFontSize}rem;
-}
-
-// Spit out rem and px
-@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    font-size: $size;
-    font-size: convertToRemOrEm($size, 'rem');
-  } @else if ($sizingMethod == 'em') {
-    font-size: convertToRemOrEm($size, 'em');
-  }
-}
-
-// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
-// EX: A proper line-height for text is 1.5 times the font-size.
-//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
-//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
-@function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiFontSize/2)*$multiplier);
-}
 @mixin lineHeightFromBaseline($multiplier: 3) {
   line-height: lineHeightFromBaseline($multiplier);
 }
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
index 251078147d1d..0d48e4f77542 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
@@ -19,6 +19,34 @@ $euiBodyLineHeight: 1.142857143; // 16px from a 14px base font size to ensure it
 $euiCodeFontWeightRegular: 400;
 $euiCodeFontWeightBold: 700;
 
+
+// Normally functions are imported before variables in `_index.scss` files
+// But because they need to consume some typography variables they need to live here
+@function convertToRem($size) {
+  @return #{$size / $euiFontSize}rem;
+}
+
+// Use 8px increments for base gridline
+@function lineHeightFromBaseline($multiplier: 3) {
+  @return convertToRem(($euiFontSize/2)*$multiplier);
+}
+
+@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    @return #{$size / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$size / $euiFontSize}em;
+  }
+}
+
+@function sizeToRemOrEm($remSize, $emSize: 1, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    @return #{$remSize / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$emSize}em;
+  }
+}
+
 $euiTitles: (
   'xxxs': (
     'font-size': $euiFontSizeXS,

From 8c42aaecbe7ecac7ba21e34774439ef696d7c6f8 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 22 Jun 2021 18:51:09 +0100
Subject: [PATCH 12/33] marginToRemOrEm

---
 src/components/text/_text.scss                | 68 +++++++++++--------
 src/global_styling/mixins/_typography.scss    | 23 ++++++-
 src/global_styling/variables/_typography.scss | 16 -----
 .../global_styling/mixins/_typography.scss    | 31 +++++++++
 .../global_styling/variables/_typography.scss | 16 -----
 5 files changed, 91 insertions(+), 63 deletions(-)

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 02425f9bf038..395fb7d7dc36 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -1,3 +1,4 @@
+// This should only be used for .euiText, therefore it's not included in a separate mixin file
 @mixin euiScaleText($baseFontSize, $sizingMethod: 'rem') {
   @include fontSize($baseFontSize, $sizingMethod);
 
@@ -11,7 +12,7 @@
   blockquote,
   img,
   pre {
-    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 3), 1.5, $sizingMethod);
+    margin-bottom: marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
 
     &:last-child {
       margin-bottom: 0;
@@ -20,74 +21,85 @@
 
   ul,
   ol {
-    margin-left: sizeToRemOrEm(($baseLineHeightMultiplier * 3), 1.5, $sizingMethod);
+    margin-left: marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
   }
 
   blockquote {
-    font-size: fontSizeToRemOrEm(($baseFontSize), $sizingMethod);
-    padding:  sizeToRemOrEm(($baseLineHeightMultiplier * 3), 1.5, $sizingMethod);
+    font-size: fontSizeToRemOrEm($baseFontSize, $sizingMethod);
+    padding:  marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
   }
 
   // headings
+  $fontSizeH1: $baseFontSize * nth($euiTextScale, 1);
+  $fontSizeH2: $baseFontSize * nth($euiTextScale, 2);
+  $fontSizeH3: $baseFontSize * nth($euiTextScale, 3);
+  $fontSizeH4: $baseFontSize * nth($euiTextScale, 5); // skip level 4 on purpose
+  $fontSizeH5: $baseFontSize * nth($euiTextScale, 6);
+  $fontSizeH6: $baseFontSize * nth($euiTextScale, 7);
+
+  $headingMarginBottom: $baseLineHeightMultiplier * 1;
+  $headingMarginTop: $baseLineHeightMultiplier * 4;
 
   h1 {
-    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 1)), $sizingMethod);
-    line-height: ($baseLineHeightMultiplier * 6) / ($baseFontSize * nth($euiTextScale, 1));
-    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
+    font-size: fontSizeToRemOrEm($fontSizeH1, $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 6) / $fontSizeH1;
+    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH1, $sizingMethod);
   }
 
   h2 {
-    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 2)), $sizingMethod);
-    line-height: ($baseLineHeightMultiplier * 5) / ($baseFontSize * nth($euiTextScale, 2));
-    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
+    font-size: fontSizeToRemOrEm($fontSizeH2, $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 5) / $fontSizeH2;
+    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH2, $sizingMethod);
   }
 
   h3 {
-    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 3)), $sizingMethod);
-    line-height: ($baseLineHeightMultiplier * 4) / ($baseFontSize * nth($euiTextScale, 3));
-    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
+    font-size: fontSizeToRemOrEm($fontSizeH3, $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 4) / $fontSizeH3;
+    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH3, $sizingMethod);
   }
 
   h4 {
-    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 5)), $sizingMethod); // skip level 4 on purpose
-    line-height: ($baseLineHeightMultiplier * 3) / ($baseFontSize * nth($euiTextScale, 5));
-    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
+    font-size: fontSizeToRemOrEm($fontSizeH4, $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 3) / $fontSizeH4;
+    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH4, $sizingMethod);
   }
 
   h5 {
-    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
-    line-height: ($baseLineHeightMultiplier * 2) / ($baseFontSize * nth($euiTextScale, 6));
-    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
+    font-size: fontSizeToRemOrEm($fontSizeH5, $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 2) / $fontSizeH5;
+    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH5, $sizingMethod);
   }
 
   h6 {
-    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
-    line-height: ($baseLineHeightMultiplier * 2) / ($baseFontSize * nth($euiTextScale, 7));
-    margin-bottom: sizeToRemOrEm(($baseLineHeightMultiplier * 1), .5, $sizingMethod);
+    font-size: fontSizeToRemOrEm($fontSizeH6, $sizingMethod);
+    line-height: ($baseLineHeightMultiplier * 2) / $fontSizeH6;
+    margin-bottom: marginToRemOrEm($headingMarginBottom, $fontSizeH6, $sizingMethod);
   }
 
   * + h2 {
-    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 1.2, $sizingMethod);
+    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH2, $sizingMethod);
   }
 
   * + h3 {
-    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 1.45, $sizingMethod);
+    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH3, $sizingMethod);
   }
 
   * + h4 {
-    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 2, $sizingMethod);
+    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH4, $sizingMethod);
   }
 
   * + h5 {
-    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 1.2, $sizingMethod);
+    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH5, $sizingMethod);
   }
 
   * + h6 {
-    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 4), 1.2, $sizingMethod);
+    margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH6, $sizingMethod);
   }
 
   dd + dt {
-    margin-top: sizeToRemOrEm(($baseLineHeightMultiplier * 2), $sizingMethod);
+    $marginTop: $baseLineHeightMultiplier * 2;
+
+    margin-top: marginToRemOrEm($marginTop, $marginTop/$baseFontSize, $sizingMethod);
   }
 
   dt,
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index e8e409d966b9..5d76e9fc4275 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -1,9 +1,22 @@
 // sass-lint:disable no-vendor-prefixes
 // sass-lint:disable no-important
 
-// Some mixins that help us deal with browser scaling of text more consistently.
-// Essentially, fonts across eui should scale against the root html element, not
-// against parent inheritance.
+@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    @return #{$size / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$size / $euiFontSize}em;
+  }
+}
+
+// It can also be applied to calculate paddings
+@function marginToRemOrEm($elementSize, $elementFontSize, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    @return #{$elementSize / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$elementSize / $elementFontSize}em;
+  }
+}
 
 // Spit out rem and px
 @mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') {
@@ -19,6 +32,10 @@
   line-height: lineHeightFromBaseline($multiplier);
 }
 
+// Some mixins that help us deal with browser scaling of text more consistently.
+// Essentially, fonts across eui should scale against the root html element, not
+// against parent inheritance.
+
 // Our base fonts
 
 @mixin euiFont {
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index bc1e0c8eded0..6bb7ec9c1996 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -36,22 +36,6 @@ $euiCodeFontWeightBold:     700 !default;
   @return #{$size / $euiFontSize}rem;
 }
 
-@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    @return #{$size / $euiFontSize}rem;
-  } @else if ($sizingMethod == 'em') {
-    @return #{$size / $euiFontSize}em;
-  }
-}
-
-@function sizeToRemOrEm($remSize, $emSize: 1, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    @return #{$remSize / $euiFontSize}rem;
-  } @else if ($sizingMethod == 'em') {
-    @return #{$emSize}em;
-  }
-}
-
 // Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
 // EX: A proper line-height for text is 1.5 times the font-size.
 //     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
index 2509535fb4d8..f78e7763479f 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
@@ -2,10 +2,41 @@
 // All line-heights are aligned to baseline grid
 // sass-lint:disable no-vendor-prefixes
 
+
+@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    @return #{$size / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$size / $euiFontSize}em;
+  }
+}
+
+@function marginToRemOrEm($elementSize, $elementFontSize, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    @return #{$elementSize / $euiFontSize}rem;
+  } @else if ($sizingMethod == 'em') {
+    @return #{$elementSize / $elementFontSize}em;
+  }
+}
+
+// Spit out rem and px
+@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') {
+  @if ($sizingMethod == 'rem') {
+    font-size: $size;
+    font-size: fontSizeToRemOrEm($size, 'rem');
+  } @else if ($sizingMethod == 'em') {
+    font-size: fontSizeToRemOrEm($size, 'em');
+  }
+}
+
 @mixin lineHeightFromBaseline($multiplier: 3) {
   line-height: lineHeightFromBaseline($multiplier);
 }
 
+// Some mixins that help us deal with browser scaling of text more consistently.
+// Essentially, fonts across eui should scale against the root html element, not
+// against parent inheritance.
+
 // Redoing this mixin mainly to remove the letter-spacing
 @mixin euiFont {
   font-family: $euiFontFamily;
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
index 0d48e4f77542..1ac5ddc90e74 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
@@ -31,22 +31,6 @@ $euiCodeFontWeightBold: 700;
   @return convertToRem(($euiFontSize/2)*$multiplier);
 }
 
-@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    @return #{$size / $euiFontSize}rem;
-  } @else if ($sizingMethod == 'em') {
-    @return #{$size / $euiFontSize}em;
-  }
-}
-
-@function sizeToRemOrEm($remSize, $emSize: 1, $sizingMethod: 'rem') {
-  @if ($sizingMethod == 'rem') {
-    @return #{$remSize / $euiFontSize}rem;
-  } @else if ($sizingMethod == 'em') {
-    @return #{$emSize}em;
-  }
-}
-
 $euiTitles: (
   'xxxs': (
     'font-size': $euiFontSizeXS,

From a4739a5a2a949a077d551a487813eae63783997f Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 23 Jun 2021 12:57:51 +0100
Subject: [PATCH 13/33] Adding relative class name and inherit text color

---
 .../markdown_editor/markdown_format_sink.js   | 117 ++++++++++--------
 .../markdown_editor/_markdown_format.scss     |  60 +--------
 .../markdown_editor/markdown_format.tsx       |  25 ++--
 src/components/text/_text.scss                |  57 ++++++++-
 src/components/text/_text_color.scss          |  11 +-
 src/components/text/text.tsx                  |  12 +-
 src/components/text/text_color.tsx            |   1 +
 7 files changed, 145 insertions(+), 138 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
index ba38902d6e04..60fbd2052483 100644
--- a/src-docs/src/views/markdown_editor/markdown_format_sink.js
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -6,10 +6,9 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  useColorPickerState,
-  EuiColorPicker,
   EuiFormRow,
   EuiSelect,
+  EuiRange,
 } from '../../../../src';
 
 const markdownContent = `# h1 Heading
@@ -156,89 +155,99 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 `;
 
 export default () => {
-  const sizingMethodOptions = [
-    {
-      value: 'em',
-      text: 'em',
-    },
-    {
-      value: 'rem',
-      text: 'rem',
-    },
-  ];
+  const textSizeArray = ['xs', 's', 'm', 'relative'];
+
+  const textSizeOptions = textSizeArray.map((name) => {
+    return {
+      value: name,
+      text: name,
+    };
+  });
 
-  const percentages = ['33%', '50%', '66%', '100%', '150%', '200%'];
+  const textColorsArray = [
+    'default',
+    'subdued',
+    'secondary',
+    'accent',
+    'danger',
+    'warning',
+    'ghost',
+    'inherit',
+  ];
 
-  const fontSizeScaleOptions = percentages.map((item) => {
-    return { value: item, text: item };
+  const textColorsOptions = textColorsArray.map((name) => {
+    return {
+      value: name,
+      text: name,
+    };
   });
 
-  const [textColor, setTextColor, textColorErrors] = useColorPickerState(
-    '#343741'
-  );
+  console.log('textSizeOptions', textSizeOptions);
+  console.log('textSizeOptions value', textSizeOptions[2].value);
 
-  const [sizingMethod, setSizingMethod] = useState(
-    sizingMethodOptions[0].value
-  );
-  const [fontSizeScale, setFontSizeScale] = useState(
-    fontSizeScaleOptions[3].value
-  );
+  const [textSize, setTextSize] = useState(textSizeOptions[2].value);
+  const [fontSizeScale, setFontSizeScale] = useState(16);
+  const [textColor, setTextColor] = useState(textColorsOptions[0].value);
 
-  const onChangeSizingMethod = (e) => {
-    setSizingMethod(e.target.value);
+  const onChangeTextSize = (e) => {
+    setTextSize(e.target.value);
   };
 
   const onChangeFontSizeScale = (e) => {
+    console.log(fontSizeScale);
     setFontSizeScale(e.target.value);
   };
 
+  const onChangeTextColor = (e) => {
+    setTextColor(e.target.value);
+  };
+
   return (
     <>
       <EuiFlexGroup style={{ maxWidth: 600 }}>
         <EuiFlexItem>
-          <EuiFormRow
-            label="Text color"
-            isInvalid={!!textColorErrors}
-            error={textColorErrors}>
-            <EuiColorPicker
-              onChange={setTextColor}
-              color={textColor}
-              isInvalid={!!textColorErrors}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-
-        <EuiFlexItem>
-          <EuiFormRow label="Sizing method">
+          <EuiFormRow label="Text color">
             <EuiSelect
-              options={sizingMethodOptions}
-              value={sizingMethod}
-              onChange={(e) => onChangeSizingMethod(e)}
+              options={textColorsOptions}
+              value={textColor}
+              onChange={(e) => onChangeTextColor(e)}
             />
           </EuiFormRow>
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <EuiFormRow label="Font size">
+          <EuiFormRow label="Text size">
             <EuiSelect
-              options={fontSizeScaleOptions}
-              value={fontSizeScale}
-              onChange={(e) => onChangeFontSizeScale(e)}
+              options={textSizeOptions}
+              value={textSize}
+              onChange={(e) => onChangeTextSize(e)}
             />
           </EuiFormRow>
         </EuiFlexItem>
+
+        {textSize === 'relative' && (
+          <EuiFlexItem>
+            <EuiFormRow label="Scale based on Font size">
+              <EuiRange
+                min={12}
+                max={24}
+                step={4}
+                value={fontSizeScale}
+                onChange={onChangeFontSizeScale}
+                showValue
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
 
       <EuiSpacer />
-      <EuiPanel
-        hasBorder={true}
-        style={{
-          fontSize: '16px',
-        }}>
+      <EuiPanel hasBorder={true}>
         <EuiMarkdownFormat
-          sizingMethod={sizingMethod}
+          textSize={textSize}
+          color={textColor}
           style={{
-            fontSize: fontSizeScale,
+            fontSize: textSize === 'relative' && `${fontSizeScale}px`,
             color: textColor,
           }}>
           {markdownContent}
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index df48c48c02f2..81501d91fcaf 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -2,34 +2,7 @@
 // Uses the EuiText to wrap all the content.
 // Uses the EuiLink, EuiCode and EuiHorizontalRule.
 
-$browserDefaultFontSize: 16px;
-
-// We're setting a function o transform px in em
-// because it's easier to think in px
-@function em($pixels, $context: $browserDefaultFontSize) {
-  @return #{$pixels/$context}em;
-}
-
 .euiMarkdownFormat {
-  // We're using `em` values to support apps where consumers might adjust sizes
-  // and consequently the markdown needs to adjust to these changes
-
-  // Font size variables
-  $euiMarkdownFontSizeXS: em(12px);
-  $euiMarkdownFontSizeS: em(14px);
-  $euiMarkdownFontSize: em(16px);
-  $euiMarkdownFontSizeM:  em(18px);
-  $euiMarkdownFontSizeL: em(20px);
-  $euiMarkdownFontSizeXL: em(28px);
-  $euiMarkdownFontSizeXXL: em(36px);
-
-  // Spacing variables
-  $euiMarkdownSizeXXS: em(4px);
-  $euiMarkdownSizeXS: em(8px);
-  $euiMarkdownSizeS: em(12px);
-  $euiMarkdownSize: em(16px);
-  $euiMarkdownSizeL: em(24px);
-
   // We're using alpha values to support apps that
   // display markdown on backgrounds of various colors
 
@@ -47,7 +20,7 @@ $browserDefaultFontSize: 16px;
     color: $euiColorLightestShade;
   }
 
-  .euiText {
+  &.euiText {
     h1,
     h2,
     h3,
@@ -60,9 +33,8 @@ $browserDefaultFontSize: 16px;
 
   // Blockquotes
   .euiMarkdownFormat__blockquote {
-    padding: 0 1em;
-    border-left: $euiMarkdownSizeXXS solid $euiMarkdownAlphaLightShade;
-    margin-bottom: $euiMarkdownFontSize;
+    border-left-style: solid;
+    border-left-color: $euiMarkdownAlphaLightShade;
   }
 
   &--reversed .euiMarkdownFormat__blockquote {
@@ -73,35 +45,15 @@ $browserDefaultFontSize: 16px;
     background-color: $euiMarkdownAlphaLightShade;
   }
 
-  // Checkboxes
-  .euiCheckbox {
-    // sass-lint:disable-block no-important
-    margin-bottom: 0 !important;
-  }
-
-  .euiCheckbox + *:not(.euiCheckbox) {
-    margin-top: $euiMarkdownSize;
-  }
-
   // Task list
   .task-list-item {
     list-style-type: none;
   }
 
-  .task-list-item + .task-list-item {
-    margin-top: $euiMarkdownSizeXXS;
-  }
-
   .task-list-item input {
-    margin: 0 .2em .25em -1.6em;
     vertical-align: middle;
   }
 
-  // Code block
-  .euiMarkdownFormat__codeblockWrapper {
-    margin-bottom: $euiMarkdownSize;
-  }
-
   // Tables
   .euiMarkdownFormat__table {
     display: block;
@@ -110,16 +62,10 @@ $browserDefaultFontSize: 16px;
     border-left: 1px solid $euiMarkdownAlphaLightShade;
     border-spacing: 0;
     border-collapse: collapse;
-    margin-bottom: $euiMarkdownSize;
-
-    &:last-child {
-      margin-bottom: $euiMarkdownSize;
-    }
   }
 
   .euiMarkdownFormat__table th,
   .euiMarkdownFormat__table td {
-    padding: $euiMarkdownSizeXXS $euiMarkdownSizeXS;
     border-top: 1px solid $euiMarkdownAlphaLightShade;
     border-bottom: 1px solid $euiMarkdownAlphaLightShade;
 
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index bb89a2ce0c19..1840ca84d830 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -28,21 +28,22 @@ import {
   defaultParsingPlugins,
 } from './plugins/markdown_default_plugins';
 
-export type EuiMarkdownFormatProps = CommonProps & {
-  children: string;
-  /** array of unified plugins to parse content into an AST */
-  parsingPluginList?: PluggableList;
-  /** array of unified plugins to convert the AST into a ReactNode */
-  processingPluginList?: PluggableList;
-  sizingMethod?: EuiTextProps['sizingMethod'];
-};
+export type EuiMarkdownFormatProps = CommonProps &
+  Omit<EuiTextProps, 'size'> & {
+    children: string;
+    /** array of unified plugins to parse content into an AST */
+    parsingPluginList?: PluggableList;
+    /** array of unified plugins to convert the AST into a ReactNode */
+    processingPluginList?: PluggableList;
+    textSize?: EuiTextProps['size'];
+  };
 
 export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   children,
   className,
   parsingPluginList = defaultParsingPlugins,
   processingPluginList = defaultProcessingPlugins,
-  sizingMethod = 'rem',
+  textSize = 'relative',
   ...rest
 }) => {
   const processor = useMemo(
@@ -63,8 +64,8 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   const classes = classNames('euiMarkdownFormat', className);
 
   return (
-    <div className={classes} {...rest}>
-      <EuiText sizingMethod={sizingMethod}>{result}</EuiText>
-    </div>
+    <EuiText size={textSize} className={classes} {...rest}>
+      {result}
+    </EuiText>
   );
 };
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 395fb7d7dc36..9a0e9bd07b37 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -13,10 +13,6 @@
   img,
   pre {
     margin-bottom: marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
   }
 
   ul,
@@ -126,6 +122,57 @@
     // the 90% set by euiCodeBlock
     font-size: fontSizeToRemOrEm(($baseFontSize * .9), $sizingMethod);
   }
+
+  // specific markdown format components that need to scale
+  &.euiMarkdownFormat {
+    .euiMarkdownFormat__blockquote {
+      padding: 0 marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
+      border-left-width:  marginToRemOrEm($baseLineHeightMultiplier / 2, $baseFontSize, $sizingMethod);
+      margin-bottom: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
+    }
+
+    .euiCheckbox + *:not(.euiCheckbox) {
+      margin-top: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
+    }
+
+    .euiCheckbox__label {
+      font-size: fontSizeToRemOrEm($baseFontSize, $sizingMethod);
+      padding-left: marginToRemOrEm($baseLineHeightMultiplier * 3, $baseFontSize, $sizingMethod);
+      line-height: $baseLineHeightMultiplier * 3 / $baseFontSize;
+    }
+
+    // Checkboxes
+    .euiCheckbox {
+      // sass-lint:disable-block no-important
+      margin-bottom: 0 !important;
+    }
+
+    .euiCheckbox + *:not(.euiCheckbox) {
+      margin-top: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
+    }
+
+    .task-list-item + .task-list-item {
+      margin-top: marginToRemOrEm($baseLineHeightMultiplier / 4, $baseFontSize, $sizingMethod);
+    }
+
+    .task-list-item input {
+      margin: 0 .2em .25em -1.6em;
+      vertical-align: middle;
+    }
+
+    .euiMarkdownFormat__codeblockWrapper {
+      margin-bottom: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
+    }
+
+    .euiMarkdownFormat__table {
+      margin-bottom: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
+    }
+
+    .euiMarkdownFormat__table th,
+    .euiMarkdownFormat__table td {
+      padding: marginToRemOrEm($baseLineHeightMultiplier / 2, $baseFontSize, $sizingMethod) marginToRemOrEm($baseLineHeightMultiplier * 1, $baseFontSize, $sizingMethod);
+    }
+  }
 }
 
 .euiText {
@@ -270,6 +317,6 @@
   @include euiScaleText($euiFontSizeXS, 'rem');
 }
 
-.euiText--em {
+.euiText--relative {
   @include euiScaleText($euiFontSize, 'em');
 }
diff --git a/src/components/text/_text_color.scss b/src/components/text/_text_color.scss
index f1873859cb75..ae1524d9e890 100644
--- a/src/components/text/_text_color.scss
+++ b/src/components/text/_text_color.scss
@@ -7,17 +7,24 @@ $euiTextColors: (
   warning: $euiColorWarning,
   danger: $euiColorDanger,
   ghost: $euiColorGhost,
+  inherit: inherit,
 );
 
 // Create color modifiers based on the map
 @each $name, $color in $euiTextColors {
   .euiTextColor--#{$name} {
 
-    // The below function makes sure the color is accessible on our default background.
-    color: makeHighContrastColor($color, $euiColorEmptyShade);
+    @if $name != 'inherit' {
+      // The below function makes sure the color is accessible on our default background.
+      color: makeHighContrastColor($color, $euiColorEmptyShade);
+    }
 
     @if $name == 'ghost' {
       color: $color !important; // sass-lint:disable-line no-important
     }
+
+    @if $name == 'inherit' {
+      color: $color;
+    }
   }
 }
diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx
index d90ccc8ca193..d560f3b07ac4 100644
--- a/src/components/text/text.tsx
+++ b/src/components/text/text.tsx
@@ -29,6 +29,7 @@ const textSizeToClassNameMap = {
   xs: 'euiText--extraSmall',
   s: 'euiText--small',
   m: 'euiText--medium',
+  relative: 'euiText--relative',
 };
 
 export type TextSize = keyof typeof textSizeToClassNameMap;
@@ -41,7 +42,6 @@ export type EuiTextProps = CommonProps &
     size?: TextSize;
     color?: TextColor;
     grow?: boolean;
-    sizingMethod?: 'rem' | 'em';
   };
 
 export const EuiText: FunctionComponent<EuiTextProps> = ({
@@ -51,19 +51,15 @@ export const EuiText: FunctionComponent<EuiTextProps> = ({
   textAlign,
   children,
   className,
-  sizingMethod = 'rem',
   ...rest
 }) => {
   const classes = classNames(
     'euiText',
-    sizingMethod === 'rem' && textSizeToClassNameMap[size],
-    {
-      'euiText--em': sizingMethod === 'em',
-    },
+    textSizeToClassNameMap[size],
+    className,
     {
       'euiText--constrainedWidth': !grow,
-    },
-    className
+    }
   );
 
   let optionallyAlteredText;
diff --git a/src/components/text/text_color.tsx b/src/components/text/text_color.tsx
index 1cfec4f59437..5ba0b24a943b 100644
--- a/src/components/text/text_color.tsx
+++ b/src/components/text/text_color.tsx
@@ -29,6 +29,7 @@ const colorsToClassNameMap = {
   danger: 'euiTextColor--danger',
   warning: 'euiTextColor--warning',
   ghost: 'euiTextColor--ghost',
+  inherit: 'euiTextColor--inherit',
 };
 
 export type TextColor = keyof typeof colorsToClassNameMap;

From 45f17a0b4fea5e3a5780e6a561637692060905be Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 23 Jun 2021 15:50:24 +0100
Subject: [PATCH 14/33] Fixing jest test

---
 src-docs/src/views/markdown_editor/markdown_format_sink.js | 1 -
 src/components/markdown_editor/markdown_editor.test.tsx    | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
index 60fbd2052483..bdaaa4052bf0 100644
--- a/src-docs/src/views/markdown_editor/markdown_format_sink.js
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -248,7 +248,6 @@ export default () => {
           color={textColor}
           style={{
             fontSize: textSize === 'relative' && `${fontSizeScale}px`,
-            color: textColor,
           }}>
           {markdownContent}
         </EuiMarkdownFormat>
diff --git a/src/components/markdown_editor/markdown_editor.test.tsx b/src/components/markdown_editor/markdown_editor.test.tsx
index 9d38e7de4b9e..23034447b03b 100644
--- a/src/components/markdown_editor/markdown_editor.test.tsx
+++ b/src/components/markdown_editor/markdown_editor.test.tsx
@@ -114,13 +114,13 @@ describe('EuiMarkdownEditor', () => {
     component.find('EuiButtonEmpty').simulate('click');
     expect(
       component
-        .find('.euiMarkdownFormat')
+        .find('EuiText.euiMarkdownFormat')
         .childAt(0)
         .childAt(0)
         .matchesElement(<h2>Hello world</h2>)
     );
     expect(
-      component.find('.euiMarkdownFormat').childAt(0).childAt(0).text()
+      component.find('EuiText.euiMarkdownFormat').childAt(0).childAt(0).text()
     ).toBe('Hello world');
   });
 

From b547732860bee15382e8760e1701d9e357975df3 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 24 Jun 2021 16:28:04 +0100
Subject: [PATCH 15/33] Ghost colors

---
 .../markdown_editor/markdown_format_sink.js   |  8 +++--
 .../markdown_editor/_markdown_format.scss     | 34 ++++++++-----------
 src/components/text/_text.scss                | 25 ++++++--------
 3 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
index bdaaa4052bf0..798ab153ee8b 100644
--- a/src-docs/src/views/markdown_editor/markdown_format_sink.js
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-
+import classNames from 'classnames';
 import {
   EuiMarkdownFormat,
   EuiPanel,
@@ -202,6 +202,10 @@ export default () => {
     setTextColor(e.target.value);
   };
 
+  const panelClasses = classNames({
+    guideDemo__ghostBackground: textColor === 'ghost',
+  });
+
   return (
     <>
       <EuiFlexGroup style={{ maxWidth: 600 }}>
@@ -242,7 +246,7 @@ export default () => {
       </EuiFlexGroup>
 
       <EuiSpacer />
-      <EuiPanel hasBorder={true}>
+      <EuiPanel hasBorder={true} className={panelClasses}>
         <EuiMarkdownFormat
           textSize={textSize}
           color={textColor}
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 81501d91fcaf..6f4261fa6ac8 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -16,20 +16,6 @@
   $euiMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
   $euiMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);
 
-  &--reversed {
-    color: $euiColorLightestShade;
-  }
-
-  &.euiText {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      color: inherit;
-    }
-  }
 
   // Blockquotes
   .euiMarkdownFormat__blockquote {
@@ -37,21 +23,29 @@
     border-left-color: $euiMarkdownAlphaLightShade;
   }
 
-  &--reversed .euiMarkdownFormat__blockquote {
+  .euiTextColor--ghost .euiMarkdownFormat__blockquote {
     border-left-color: $euiMarkdownAlphaLightShadeReversed;
   }
 
+  // Horizontal Rule
   .euiHorizontalRule {
     background-color: $euiMarkdownAlphaLightShade;
   }
 
-  // Task list
-  .task-list-item {
-    list-style-type: none;
+  .euiTextColor--ghost .euiHorizontalRule {
+    background-color: $euiMarkdownAlphaLightShadeReversed;
+  }
+
+
+  // Checkboxes
+  .euiCheckbox {
+    // sass-lint:disable-block no-important
+    margin-bottom: 0 !important;
   }
 
-  .task-list-item input {
-    vertical-align: middle;
+  .euiCheckbox .euiCheckbox__input + .euiCheckbox__square  {
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   // Tables
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 9a0e9bd07b37..846ee24063c0 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -141,25 +141,10 @@
       line-height: $baseLineHeightMultiplier * 3 / $baseFontSize;
     }
 
-    // Checkboxes
-    .euiCheckbox {
-      // sass-lint:disable-block no-important
-      margin-bottom: 0 !important;
-    }
-
     .euiCheckbox + *:not(.euiCheckbox) {
       margin-top: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
     }
 
-    .task-list-item + .task-list-item {
-      margin-top: marginToRemOrEm($baseLineHeightMultiplier / 4, $baseFontSize, $sizingMethod);
-    }
-
-    .task-list-item input {
-      margin: 0 .2em .25em -1.6em;
-      vertical-align: middle;
-    }
-
     .euiMarkdownFormat__codeblockWrapper {
       margin-bottom: marginToRemOrEm($baseLineHeightMultiplier * 2, $baseFontSize, $sizingMethod);
     }
@@ -273,6 +258,16 @@
     text-transform: uppercase;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  dt {
+    color: inherit;
+  }
+
   pre {
     white-space: pre-wrap;
     background: $euiCodeBlockBackgroundColor;

From 6ca83ef0935022b7e206d604253d42b4a2ac03e7 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 9 Jul 2021 16:42:14 +0100
Subject: [PATCH 16/33] Adding components theme

---
 .../markdown_editor/markdown_format_sink.js   | 36 ++++++++-
 .../markdown_editor/_markdown_format.scss     | 75 ++++++++++---------
 .../markdown_editor/markdown_format.tsx       | 14 +++-
 3 files changed, 85 insertions(+), 40 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
index 798ab153ee8b..f48c4541b039 100644
--- a/src-docs/src/views/markdown_editor/markdown_format_sink.js
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -182,12 +182,27 @@ export default () => {
     };
   });
 
-  console.log('textSizeOptions', textSizeOptions);
-  console.log('textSizeOptions value', textSizeOptions[2].value);
+  const componentsThemeOptions = [
+    {
+      value: 'default',
+      text: 'Default theme',
+    },
+    {
+      value: 'light',
+      text: 'Light theme',
+    },
+    {
+      value: 'dark',
+      text: 'Dark theme',
+    },
+  ];
 
   const [textSize, setTextSize] = useState(textSizeOptions[2].value);
   const [fontSizeScale, setFontSizeScale] = useState(16);
   const [textColor, setTextColor] = useState(textColorsOptions[0].value);
+  const [componentsTheme, setComponentsTheme] = useState(
+    componentsThemeOptions[0].value
+  );
 
   const onChangeTextSize = (e) => {
     setTextSize(e.target.value);
@@ -202,13 +217,17 @@ export default () => {
     setTextColor(e.target.value);
   };
 
+  const onChangeComponentsTheme = (e) => {
+    setComponentsTheme(e.target.value);
+  };
+
   const panelClasses = classNames({
     guideDemo__ghostBackground: textColor === 'ghost',
   });
 
   return (
     <>
-      <EuiFlexGroup style={{ maxWidth: 600 }}>
+      <EuiFlexGroup>
         <EuiFlexItem>
           <EuiFormRow label="Text color">
             <EuiSelect
@@ -219,6 +238,16 @@ export default () => {
           </EuiFormRow>
         </EuiFlexItem>
 
+        <EuiFlexItem>
+          <EuiFormRow label="Components theme">
+            <EuiSelect
+              options={componentsThemeOptions}
+              value={componentsTheme}
+              onChange={(e) => onChangeComponentsTheme(e)}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+
         <EuiFlexItem>
           <EuiFormRow label="Text size">
             <EuiSelect
@@ -250,6 +279,7 @@ export default () => {
         <EuiMarkdownFormat
           textSize={textSize}
           color={textColor}
+          componentsTheme={componentsTheme}
           style={{
             fontSize: textSize === 'relative' && `${fontSizeScale}px`,
           }}>
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 6f4261fa6ac8..00a3ac73e61b 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -2,40 +2,59 @@
 // Uses the EuiText to wrap all the content.
 // Uses the EuiLink, EuiCode and EuiHorizontalRule.
 
-.euiMarkdownFormat {
-  // We're using alpha values to support apps that
-  // display markdown on backgrounds of various colors
-
-  // Grayscale variables
-  $euiMarkdownAlphaLightestShade: rgba($euiColorFullShade, .05);
-  $euiMarkdownAlphaLightShade: rgba($euiColorFullShade, .15);
-  $euiMarkdownAlphaDarkShade: rgba($euiColorFullShade, .65);
-
-  // Reverse grayscale for opposite of theme
-  $euiMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade, .05);
-  $euiMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
-  $euiMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);
-
+@mixin adjustComponentColors($color) {
 
   // Blockquotes
   .euiMarkdownFormat__blockquote {
     border-left-style: solid;
-    border-left-color: $euiMarkdownAlphaLightShade;
   }
 
-  .euiTextColor--ghost .euiMarkdownFormat__blockquote {
-    border-left-color: $euiMarkdownAlphaLightShadeReversed;
+  .euiMarkdownFormat__blockquote {
+    border-left-color: $color;
   }
 
   // Horizontal Rule
   .euiHorizontalRule {
-    background-color: $euiMarkdownAlphaLightShade;
+    background-color: $color;
+  }
+
+  .euiMarkdownFormat__table tr {
+    background-color: transparent;
+  }
+
+  .euiMarkdownFormat__table {
+    border-left: 1px solid $color;
+  }
+
+  .euiMarkdownFormat__table th,
+  .euiMarkdownFormat__table td {
+    border-top: 1px solid $color;
+    border-bottom: 1px solid $color;
+
+    &:last-child {
+      border-right: 1px solid $color;
+    }
   }
 
-  .euiTextColor--ghost .euiHorizontalRule {
-    background-color: $euiMarkdownAlphaLightShadeReversed;
+  .euiMarkdownFormat__table tr {
+    border-top: 1px solid $color;
+  }
+}
+
+.euiMarkdownFormat {
+  $euiMarkdownAlphaGhostShade: rgba($euiColorGhost, .15);
+  $euiMarkdownAlphaInkShade: rgba($euiColorInk, .15);
+  $euiMarkdownAlphaShade: rgba($euiColorFullShade, .15);
+
+  @include adjustComponentColors($euiMarkdownAlphaShade);
+
+  &--lightComponents {
+    @include adjustComponentColors($euiMarkdownAlphaGhostShade);
   }
 
+  &--darkComponents {
+    @include adjustComponentColors($euiMarkdownAlphaInkShade);
+  }
 
   // Checkboxes
   .euiCheckbox {
@@ -53,23 +72,7 @@
     display: block;
     width: 100%;
     overflow: auto;
-    border-left: 1px solid $euiMarkdownAlphaLightShade;
     border-spacing: 0;
     border-collapse: collapse;
   }
-
-  .euiMarkdownFormat__table th,
-  .euiMarkdownFormat__table td {
-    border-top: 1px solid $euiMarkdownAlphaLightShade;
-    border-bottom: 1px solid $euiMarkdownAlphaLightShade;
-
-    &:last-child {
-      border-right: 1px solid $euiMarkdownAlphaLightShade;
-    }
-  }
-
-  .euiMarkdownFormat__table tr {
-    background-color: transparent;
-    border-top: 1px solid $euiMarkdownAlphaLightShade;
-  }
 }
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 1840ca84d830..6574dde27de0 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -36,6 +36,12 @@ export type EuiMarkdownFormatProps = CommonProps &
     /** array of unified plugins to convert the AST into a ReactNode */
     processingPluginList?: PluggableList;
     textSize?: EuiTextProps['size'];
+    /**
+     * Changes the color of the components borders and backgrounds.
+     * The `default` will inherit its coloring from the light or dark theme.
+     * Or, force `light` or `dark` theme for all themes.
+     */
+    componentsTheme?: 'default' | 'light' | 'dark';
   };
 
 export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
@@ -44,6 +50,7 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   parsingPluginList = defaultParsingPlugins,
   processingPluginList = defaultProcessingPlugins,
   textSize = 'relative',
+  componentsTheme = 'default',
   ...rest
 }) => {
   const processor = useMemo(
@@ -61,7 +68,12 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
     }
   }, [children, processor]);
 
-  const classes = classNames('euiMarkdownFormat', className);
+  const classes = classNames(
+    'euiMarkdownFormat',
+    { 'euiMarkdownFormat--lightComponents': componentsTheme === 'light' },
+    { 'euiMarkdownFormat--darkComponents': componentsTheme === 'dark' },
+    className
+  );
 
   return (
     <EuiText size={textSize} className={classes} {...rest}>

From edb31cbc99964406f67a48cc9cee816fcf0dab13 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 13 Jul 2021 15:26:58 +0100
Subject: [PATCH 17/33] Changing GuideMarkdownFormat to medium text size

---
 .../components/guide_markdown_format/guide_markdown_format.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
index 4902c1b3487d..de5b9924a052 100644
--- a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
+++ b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
@@ -24,7 +24,8 @@ export const GuideMarkdownFormat: FunctionComponent<GuideMarkdownFormatProps> =
   return (
     <EuiMarkdownFormat
       processingPluginList={processingPlugins}
-      className="guideMarkdownFormat">
+      className="guideMarkdownFormat"
+      textSize="m">
       {children}
     </EuiMarkdownFormat>
   );

From df7fea078fc8f5ba16ae7323b9af9bcf01d17d53 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 14 Jul 2021 16:39:12 +0100
Subject: [PATCH 18/33] Using `currentColor`  to adjust bg and border colors.

---
 .../markdown_editor/markdown_format_sink.js   | 119 +++++++++---------
 src-docs/src/views/text/text_color.js         |   3 +
 .../markdown_editor/_markdown_format.scss     |  43 ++++---
 .../markdown_editor/markdown_format.tsx       |  15 +--
 .../__snapshots__/text_color.test.tsx.snap    |  21 ++++
 src/components/text/text.tsx                  |   6 +-
 src/components/text/text_color.test.tsx       |  24 ++++
 src/components/text/text_color.tsx            |  21 +++-
 8 files changed, 158 insertions(+), 94 deletions(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
index f48c4541b039..8a51419b21a7 100644
--- a/src-docs/src/views/markdown_editor/markdown_format_sink.js
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -9,6 +9,10 @@ import {
   EuiFormRow,
   EuiSelect,
   EuiRange,
+  EuiColorPicker,
+  useColorPickerState,
+  EuiButtonEmpty,
+  EuiPopover,
 } from '../../../../src';
 
 const markdownContent = `# h1 Heading
@@ -172,7 +176,7 @@ export default () => {
     'danger',
     'warning',
     'ghost',
-    'inherit',
+    'custom',
   ];
 
   const textColorsOptions = textColorsArray.map((name) => {
@@ -182,27 +186,10 @@ export default () => {
     };
   });
 
-  const componentsThemeOptions = [
-    {
-      value: 'default',
-      text: 'Default theme',
-    },
-    {
-      value: 'light',
-      text: 'Light theme',
-    },
-    {
-      value: 'dark',
-      text: 'Dark theme',
-    },
-  ];
-
   const [textSize, setTextSize] = useState(textSizeOptions[2].value);
   const [fontSizeScale, setFontSizeScale] = useState(16);
   const [textColor, setTextColor] = useState(textColorsOptions[0].value);
-  const [componentsTheme, setComponentsTheme] = useState(
-    componentsThemeOptions[0].value
-  );
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const onChangeTextSize = (e) => {
     setTextSize(e.target.value);
@@ -217,50 +204,65 @@ export default () => {
     setTextColor(e.target.value);
   };
 
-  const onChangeComponentsTheme = (e) => {
-    setComponentsTheme(e.target.value);
-  };
-
   const panelClasses = classNames({
     guideDemo__ghostBackground: textColor === 'ghost',
   });
 
+  const [color, setColor, colorErrors] = useColorPickerState('#c561dc');
+
+  const onButtonClick = () =>
+    setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButtonEmpty
+      onClick={onButtonClick}
+      iconType="controlsVertical"
+      aria-label="Open props customization"
+      color="text"
+      size="s">
+      Customize props
+    </EuiButtonEmpty>
+  );
+
   return (
     <>
       <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiFormRow label="Text color">
-            <EuiSelect
-              options={textColorsOptions}
-              value={textColor}
-              onChange={(e) => onChangeTextColor(e)}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            panelStyle={{ minWidth: 380 }}
+            button={button}
+            isOpen={isPopoverOpen}
+            closePopover={closePopover}>
+            <EuiFormRow label="Color">
+              <EuiSelect
+                options={textColorsOptions}
+                value={textColor}
+                onChange={(e) => onChangeTextColor(e)}
+              />
+            </EuiFormRow>
 
-        <EuiFlexItem>
-          <EuiFormRow label="Components theme">
-            <EuiSelect
-              options={componentsThemeOptions}
-              value={componentsTheme}
-              onChange={(e) => onChangeComponentsTheme(e)}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
+            <EuiFormRow
+              label="Custom color"
+              isInvalid={!!colorErrors}
+              error={colorErrors}>
+              <EuiColorPicker
+                onChange={setColor}
+                color={color}
+                isInvalid={!!colorErrors}
+                disabled={textColor !== 'custom'}
+              />
+            </EuiFormRow>
 
-        <EuiFlexItem>
-          <EuiFormRow label="Text size">
-            <EuiSelect
-              options={textSizeOptions}
-              value={textSize}
-              onChange={(e) => onChangeTextSize(e)}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
+            <EuiFormRow label="Text size">
+              <EuiSelect
+                options={textSizeOptions}
+                value={textSize}
+                onChange={(e) => onChangeTextSize(e)}
+              />
+            </EuiFormRow>
 
-        {textSize === 'relative' && (
-          <EuiFlexItem>
-            <EuiFormRow label="Scale based on Font size">
+            <EuiFormRow label="Relative text size">
               <EuiRange
                 min={12}
                 max={24}
@@ -268,18 +270,19 @@ export default () => {
                 value={fontSizeScale}
                 onChange={onChangeFontSizeScale}
                 showValue
+                disabled={textSize !== 'relative'}
               />
             </EuiFormRow>
-          </EuiFlexItem>
-        )}
+          </EuiPopover>
+        </EuiFlexItem>
       </EuiFlexGroup>
 
-      <EuiSpacer />
+      <EuiSpacer size="s" />
+
       <EuiPanel hasBorder={true} className={panelClasses}>
         <EuiMarkdownFormat
           textSize={textSize}
-          color={textColor}
-          componentsTheme={componentsTheme}
+          color={textColor === 'custom' ? color : textColor}
           style={{
             fontSize: textSize === 'relative' && `${fontSizeScale}px`,
           }}>
diff --git a/src-docs/src/views/text/text_color.js b/src-docs/src/views/text/text_color.js
index aef31b7db256..c38283010894 100644
--- a/src-docs/src/views/text/text_color.js
+++ b/src-docs/src/views/text/text_color.js
@@ -40,6 +40,9 @@ export default () => (
       <p>
         <EuiTextColor color="danger">Danger text color</EuiTextColor>
       </p>
+      <p>
+        <EuiTextColor color="#c561dc">Custom text color</EuiTextColor>
+      </p>
       <p>
         <span style={{ background: '#222' }}>
           <EuiTextColor color="ghost">
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 00a3ac73e61b..eb7d791a7d40 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -2,24 +2,15 @@
 // Uses the EuiText to wrap all the content.
 // Uses the EuiLink, EuiCode and EuiHorizontalRule.
 
-@mixin adjustComponentColors($color) {
-
-  // Blockquotes
-  .euiMarkdownFormat__blockquote {
-    border-left-style: solid;
-  }
+@mixin adjustBorderColors($color) {
 
   .euiMarkdownFormat__blockquote {
     border-left-color: $color;
   }
 
-  // Horizontal Rule
   .euiHorizontalRule {
     background-color: $color;
-  }
-
-  .euiMarkdownFormat__table tr {
-    background-color: transparent;
+    color: $color; // ensure that firefox gets the `currentColor`
   }
 
   .euiMarkdownFormat__table {
@@ -42,18 +33,32 @@
 }
 
 .euiMarkdownFormat {
-  $euiMarkdownAlphaGhostShade: rgba($euiColorGhost, .15);
-  $euiMarkdownAlphaInkShade: rgba($euiColorInk, .15);
+  // We want the default text to use a gray scale 
   $euiMarkdownAlphaShade: rgba($euiColorFullShade, .15);
 
-  @include adjustComponentColors($euiMarkdownAlphaShade);
-
-  &--lightComponents {
-    @include adjustComponentColors($euiMarkdownAlphaGhostShade);
+  $euiTextColors: (
+    default: $euiMarkdownAlphaShade,
+    subdued: $euiTextSubduedColor,
+    secondary: $euiColorSecondary,
+    success: $euiColorSuccess,
+    accent: $euiColorAccent,
+    warning: $euiColorWarning,
+    danger: $euiColorDanger,
+    ghost: $euiColorGhost,
+    custom: currentColor,
+  );
+
+  // We're adjusting the borders of the elements.
+  // For the custom color we're setting the value to the `currentColor` so we can get the current value of the color property or the computed value
+  @each $name, $color in $euiTextColors {
+    .euiTextColor--#{$name} {
+      @include adjustBorderColors($color);
+    }
   }
 
-  &--darkComponents {
-    @include adjustComponentColors($euiMarkdownAlphaInkShade);
+  // Blockquotes
+  .euiMarkdownFormat__blockquote {
+    border-left-style: solid;
   }
 
   // Checkboxes
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 6574dde27de0..781e6d55e175 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -36,12 +36,6 @@ export type EuiMarkdownFormatProps = CommonProps &
     /** array of unified plugins to convert the AST into a ReactNode */
     processingPluginList?: PluggableList;
     textSize?: EuiTextProps['size'];
-    /**
-     * Changes the color of the components borders and backgrounds.
-     * The `default` will inherit its coloring from the light or dark theme.
-     * Or, force `light` or `dark` theme for all themes.
-     */
-    componentsTheme?: 'default' | 'light' | 'dark';
   };
 
 export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
@@ -50,7 +44,7 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   parsingPluginList = defaultParsingPlugins,
   processingPluginList = defaultProcessingPlugins,
   textSize = 'relative',
-  componentsTheme = 'default',
+
   ...rest
 }) => {
   const processor = useMemo(
@@ -68,12 +62,7 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
     }
   }, [children, processor]);
 
-  const classes = classNames(
-    'euiMarkdownFormat',
-    { 'euiMarkdownFormat--lightComponents': componentsTheme === 'light' },
-    { 'euiMarkdownFormat--darkComponents': componentsTheme === 'dark' },
-    className
-  );
+  const classes = classNames('euiMarkdownFormat', className);
 
   return (
     <EuiText size={textSize} className={classes} {...rest}>
diff --git a/src/components/text/__snapshots__/text_color.test.tsx.snap b/src/components/text/__snapshots__/text_color.test.tsx.snap
index 6ecc8bc17b27..0696df004585 100644
--- a/src/components/text/__snapshots__/text_color.test.tsx.snap
+++ b/src/components/text/__snapshots__/text_color.test.tsx.snap
@@ -7,3 +7,24 @@ exports[`EuiTextColor is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiTextColor props color is rendered with custom color 1`] = `
+<span
+  class="euiTextColor euiTextColor--custom"
+  style="color:#ff0000"
+>
+  <p>
+    Content
+  </p>
+</span>
+`;
+
+exports[`EuiTextColor props color is rendered with named color 1`] = `
+<span
+  class="euiTextColor euiTextColor--warning"
+>
+  <p>
+    Content
+  </p>
+</span>
+`;
diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx
index e18cf853b09f..44b3954d6e19 100644
--- a/src/components/text/text.tsx
+++ b/src/components/text/text.tsx
@@ -39,11 +39,15 @@ export const TEXT_SIZES = keysOf(textSizeToClassNameMap);
 export type EuiTextProps = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
     textAlign?: TextAlignment;
+    /**
+     * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.
+     */
     size?: TextSize;
     /**
      * **`secondary` color is DEPRECATED, use `success` instead**
+     * Any of our named colors or a hex value like `#FFFFFF`, `#000`.
      */
-    color?: TextColor;
+    color?: TextColor | string;
     grow?: boolean;
   };
 
diff --git a/src/components/text/text_color.test.tsx b/src/components/text/text_color.test.tsx
index 61fa20d1f4b4..b0e5bc1ff28a 100644
--- a/src/components/text/text_color.test.tsx
+++ b/src/components/text/text_color.test.tsx
@@ -29,4 +29,28 @@ describe('EuiTextColor', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('props', () => {
+    describe('color', () => {
+      test('is rendered with named color', () => {
+        const component = render(
+          <EuiTextColor color="warning">
+            <p>Content</p>
+          </EuiTextColor>
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+
+      test('is rendered with custom color', () => {
+        const component = render(
+          <EuiTextColor color="#ff0000">
+            <p>Content</p>
+          </EuiTextColor>
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/components/text/text_color.tsx b/src/components/text/text_color.tsx
index 857475c52a05..4657fce386a7 100644
--- a/src/components/text/text_color.tsx
+++ b/src/components/text/text_color.tsx
@@ -44,8 +44,9 @@ export type EuiTextColorProps = CommonProps &
   > & {
     /**
      * **`secondary` color is DEPRECATED, use `success` instead**
+     * Any of our named colors or a hex value like `#FFFFFF`, `#000`.
      */
-    color?: TextColor;
+    color?: TextColor | string;
     /**
      * Determines the root element
      */
@@ -59,15 +60,29 @@ export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
   component = 'span',
   ...rest
 }) => {
+  const isNamedColor = COLORS.includes(color as TextColor);
+
   const classes = classNames(
     'euiTextColor',
-    colorsToClassNameMap[color],
+    { 'euiTextColor--custom': !isNamedColor },
+    isNamedColor && colorsToClassNameMap[color as TextColor],
     className
   );
   const Component = component;
 
+  // We're checking if is a custom color.
+  // If it is a custom color we set the `color` of the `.euiTextColor` div to that custom color.
+  // This way the children text elements can `inherit` that color and border and backgrounds can get that `currentColor`.
+  const isCustomColor = !COLORS.includes(color as TextColor);
+
+  const style = isCustomColor
+    ? {
+        color: color,
+      }
+    : undefined;
+
   return (
-    <Component className={classes} {...rest}>
+    <Component className={classes} {...rest} style={style}>
       {children}
     </Component>
   );

From 13c47103bbfccc15d4be30b3f3a6ba7217911e1e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 14 Jul 2021 19:34:28 +0100
Subject: [PATCH 19/33] Adding better comments

---
 .../markdown_editor/_markdown_format.scss     | 21 ++++++++-----------
 src/components/text/_text.scss                |  1 -
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index eb7d791a7d40..5a3b624906ca 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -1,9 +1,8 @@
 // The Markdown Format uses by default a few EUI components.
-// Uses the EuiText to wrap all the content.
-// Uses the EuiLink, EuiCode and EuiHorizontalRule.
-
-@mixin adjustBorderColors($color) {
+// It uses the EuiText to wrap all the content so all the styles related with scaling based on the font-size live inside `_text.scss`
 
+// This should only be used for .euiMarkdownFormat, therefore it's not included in a separate mixin file
+@mixin euiMarkdownAdjustBorderColors($color) {
   .euiMarkdownFormat__blockquote {
     border-left-color: $color;
   }
@@ -33,10 +32,9 @@
 }
 
 .euiMarkdownFormat {
-  // We want the default text to use a gray scale 
   $euiMarkdownAlphaShade: rgba($euiColorFullShade, .15);
 
-  $euiTextColors: (
+  $euiMarkdownBorderColors: (
     default: $euiMarkdownAlphaShade,
     subdued: $euiTextSubduedColor,
     secondary: $euiColorSecondary,
@@ -48,25 +46,24 @@
     custom: currentColor,
   );
 
-  // We're adjusting the borders of the elements.
-  // For the custom color we're setting the value to the `currentColor` so we can get the current value of the color property or the computed value
-  @each $name, $color in $euiTextColors {
+  // We're adjusting the borders of the elements by passing a color defined in $euiMarkdownBorderColors.
+  // For the `custom` color we're assigning the `currentColor` so we can get the current or computed value of the `color` property
+  @each $name, $color in $euiMarkdownBorderColors {
     .euiTextColor--#{$name} {
-      @include adjustBorderColors($color);
+      @include euiMarkdownAdjustBorderColors($color);
     }
   }
 
-  // Blockquotes
   .euiMarkdownFormat__blockquote {
     border-left-style: solid;
   }
 
-  // Checkboxes
   .euiCheckbox {
     // sass-lint:disable-block no-important
     margin-bottom: 0 !important;
   }
 
+  // We're adjusting the position of the checkboxes so that when the text size is `relative` the checkboxes get better positioned
   .euiCheckbox .euiCheckbox__input + .euiCheckbox__square  {
     top: 50%;
     transform: translateY(-50%);
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 846ee24063c0..49107c0f9cd4 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -280,7 +280,6 @@
   }
 
   // unset font-size from euiCodeBlock so it doesn't doubly add 90%
-
   code {
     @include euiCodeFont;
     display: inline-block; // ensures background stretches the full line-height

From d8c3b0c3f195f81c9b0c2faa234d700f3f14493e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 15 Jul 2021 10:59:24 +0100
Subject: [PATCH 20/33] Better comments

---
 src-docs/src/views/markdown_editor/markdown_format_sink.js | 1 +
 src/components/markdown_editor/_markdown_format.scss       | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
index 8a51419b21a7..c96b5e7cc82f 100644
--- a/src-docs/src/views/markdown_editor/markdown_format_sink.js
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -176,6 +176,7 @@ export default () => {
     'danger',
     'warning',
     'ghost',
+    'inherit',
     'custom',
   ];
 
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 5a3b624906ca..ba33c62326e4 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -43,11 +43,12 @@
     warning: $euiColorWarning,
     danger: $euiColorDanger,
     ghost: $euiColorGhost,
+    inherit: currentColor,
     custom: currentColor,
   );
 
   // We're adjusting the borders of the elements by passing a color defined in $euiMarkdownBorderColors.
-  // For the `custom` color we're assigning the `currentColor` so we can get the current or computed value of the `color` property
+  // For the `custom` and `inherit` colors we're assigning the `currentColor` so we can get the current or computed value of the `color` property
   @each $name, $color in $euiMarkdownBorderColors {
     .euiTextColor--#{$name} {
       @include euiMarkdownAdjustBorderColors($color);

From a8544eba8f4f56b0d87438c741f271584f1f7afa Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 15 Jul 2021 17:07:03 +0100
Subject: [PATCH 21/33] Adding docs examples for md format styling.

---
 .../markdown_editor/mardown_format_example.js | 36 +++++++++++++++++--
 .../markdown_editor/markdown_format_styles.js | 22 ++++++++++++
 .../markdown_editor/markdown_format.tsx       |  3 +-
 .../plugins/markdown_default_plugins.tsx      |  4 +--
 4 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 src-docs/src/views/markdown_editor/markdown_format_styles.js

diff --git a/src-docs/src/views/markdown_editor/mardown_format_example.js b/src-docs/src/views/markdown_editor/mardown_format_example.js
index 01fb77106ac3..f41f0e1dd6a5 100644
--- a/src-docs/src/views/markdown_editor/mardown_format_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_format_example.js
@@ -8,6 +8,7 @@ import {
   EuiLink,
   EuiMarkdownFormat,
   EuiText,
+  EuiCode,
 } from '../../../../src/components';
 
 import { Link } from 'react-router-dom';
@@ -16,6 +17,10 @@ import MarkdownFormat from './markdown_format';
 const markdownFormatSource = require('!!raw-loader!./markdown_format');
 const markdownFormatHtml = renderToHtml(MarkdownFormat);
 
+import MarkdownFormatStyles from './markdown_format_styles';
+const markdownFormatStylesSource = require('!!raw-loader!./markdown_format_styles');
+const markdownFormatStylesHtml = renderToHtml(MarkdownFormatStyles);
+
 import MarkdownFormatSink from './markdown_format_sink';
 const markdownFormatSinkSource = require('!!raw-loader!./markdown_format_sink');
 const markdownFormatSinkHtml = renderToHtml(MarkdownFormatSink);
@@ -59,8 +64,9 @@ export const MarkdownFormatExample = {
             Remark
           </EuiLink>{' '}
           by default. The translation layer automatically substitutes raw HTML
-          output with their EUI equivalent. This means anchor and code blocks
-          will become <strong>EuiLink</strong> and <strong>EuiCodeBlock</strong>{' '}
+          output with their EUI equivalent. This means anchor, code blocks and
+          horizontal rules will become <strong>EuiLink</strong>,{' '}
+          <strong>EuiCodeBlock</strong> and <strong>EuiHorizontalRule</strong>{' '}
           components respectively.
         </p>
       ),
@@ -69,6 +75,32 @@ export const MarkdownFormatExample = {
       },
       demo: <MarkdownFormat />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownFormatStylesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownFormatStylesHtml,
+        },
+      ],
+      title: 'Text sizing and coloring',
+      text: (
+        <p>
+          <strong>EuiMarkdownFormat</strong> uses the{' '}
+          <Link to="/display/text/">EuiText</Link> as a wrapper to handle all
+          the CSS styling when rendering the HTML. It also gives the ability to
+          control the text size and color with the <EuiCode>textSize</EuiCode>{' '}
+          and <EuiCode>color</EuiCode> props, respectively.
+        </p>
+      ),
+      props: {
+        EuiMarkdownFormat,
+      },
+      demo: <MarkdownFormatStyles />,
+    },
     {
       source: [
         {
diff --git a/src-docs/src/views/markdown_editor/markdown_format_styles.js b/src-docs/src/views/markdown_editor/markdown_format_styles.js
new file mode 100644
index 000000000000..3e5651f2e4c1
--- /dev/null
+++ b/src-docs/src/views/markdown_editor/markdown_format_styles.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { EuiMarkdownFormat } from '../../../../src';
+
+const markdownContent = `This text has the \`textSize\` prop set to \`"s"\`.
+
+The color prop is set to \`"danger"\` and that's why all the text is red! :smile:
+
+| Emoji | Color |
+| ------ | ----------- |
+| :rose:   | Red |
+| :apple: | Red |
+| :green_heart:    | Green |
+`;
+
+export default () => {
+  return (
+    <EuiMarkdownFormat color="danger" textSize="s">
+      {markdownContent}
+    </EuiMarkdownFormat>
+  );
+};
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 781e6d55e175..caa8eec75f33 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -43,8 +43,7 @@ export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   className,
   parsingPluginList = defaultParsingPlugins,
   processingPluginList = defaultProcessingPlugins,
-  textSize = 'relative',
-
+  textSize = 'm',
   ...rest
 }) => {
   const processor = useMemo(
diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
index 466f2cdeca75..bad50c4e7898 100644
--- a/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
+++ b/src/components/markdown_editor/plugins/markdown_default_plugins.tsx
@@ -97,8 +97,8 @@ export const getDefaultEuiMarkdownProcessingPlugins = (): [
             <EuiCode {...props} />
           ),
         // When we use block code "fences" the code tag is replaced by the `EuiCodeBlock`.
-        // But there's a pre wrapping all the `EuiCodeBlock`.
-        // We want to replace this pre tag with a div because the `EuiCodeBlock` has its own children pre tag.
+        // But there's a `pre` tag wrapping all the `EuiCodeBlock`.
+        // We want to replace this `pre` tag with a `div` because the `EuiCodeBlock` has its own children `pre` tag.
         pre: (props) => (
           <div {...props} className="euiMarkdownFormat__codeblockWrapper" />
         ),

From a7265c7e04eec6541a7655deb7aaaad94e566d12 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 15 Jul 2021 17:07:41 +0100
Subject: [PATCH 22/33] Extending EuiFormatProps into the editor.

---
 src/components/markdown_editor/markdown_editor.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 79d7071e5d69..3c862bb7c921 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -37,7 +37,7 @@ import { CommonProps, OneOf } from '../common';
 import MarkdownActions, { insertText } from './markdown_actions';
 import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
-import { EuiMarkdownFormat } from './markdown_format';
+import { EuiMarkdownFormat, EuiMarkdownFormatProps } from './markdown_format';
 import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone';
 import { htmlIdGenerator } from '../../services/';
 
@@ -129,6 +129,14 @@ type CommonMarkdownEditorProps = Omit<
 
     /** array defining any drag&drop handlers */
     dropHandlers?: EuiMarkdownDropHandler[];
+
+    /**
+     * Further extend the props applied to EuiMarkdownFormat
+     */
+    markdownFormatProps?: Omit<
+      EuiMarkdownFormatProps,
+      'parsingPluginList' | 'processingPluginList' | 'children'
+    >;
   };
 
 export type EuiMarkdownEditorProps = OneOf<
@@ -202,6 +210,7 @@ export const EuiMarkdownEditor = forwardRef<
       'aria-describedby': ariaDescribedBy,
       initialViewMode = MODE_EDITING,
       dropHandlers = [],
+      markdownFormatProps,
       ...rest
     },
     ref
@@ -422,7 +431,8 @@ export const EuiMarkdownEditor = forwardRef<
               style={{ height: previewHeight }}>
               <EuiMarkdownFormat
                 parsingPluginList={parsingPluginList}
-                processingPluginList={processingPluginList}>
+                processingPluginList={processingPluginList}
+                {...markdownFormatProps}>
                 {value}
               </EuiMarkdownFormat>
             </div>

From 534589d6677ebe89848c631fe26cd55068669541 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 15 Jul 2021 17:56:50 +0100
Subject: [PATCH 23/33] Adding CL

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2aa11661d974..aa1278fdbd16 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 - Refactored `EuiFlyout` types ([#4940](https://github.com/elastic/eui/pull/4940))
 - Updated `pause` icon ([#4947](https://github.com/elastic/eui/pull/4947))
+- Updated `EuiMarkdownFormat` to use `EuiHorizontalRule` and better render tables, code blocks and blockquotes ([#4663](https://github.com/elastic/eui/pull/4947))
+- Updated the `EuiMarkdownFormat` to use  `EuiText` as a wrapper to handle all the CSS styling ([#4663](https://github.com/elastic/eui/pull/4947))
+- Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4947))
+- Added `markdownFormatProps` prop to `EuiMarkdownEditor`  to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4947))
 
 **Bug fixes**
 

From fce4c8b206f03506e4b1ca7f5f0d31d53a36870d Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 15 Jul 2021 18:24:39 +0100
Subject: [PATCH 24/33] Better comment for color prop

---
 src/components/text/text.tsx       | 2 +-
 src/components/text/text_color.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx
index e8389d17e431..bf786d2adb03 100644
--- a/src/components/text/text.tsx
+++ b/src/components/text/text.tsx
@@ -34,7 +34,7 @@ export type EuiTextProps = CommonProps &
     size?: TextSize;
     /**
      * **`secondary` color is DEPRECATED, use `success` instead**
-     * Any of our named colors or a hex value like `#FFFFFF`, `#000`.
+     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
      */
     color?: TextColor | string;
     grow?: boolean;
diff --git a/src/components/text/text_color.tsx b/src/components/text/text_color.tsx
index b8bf84f5e130..223c82d94926 100644
--- a/src/components/text/text_color.tsx
+++ b/src/components/text/text_color.tsx
@@ -33,7 +33,7 @@ export type EuiTextColorProps = CommonProps &
   > & {
     /**
      * **`secondary` color is DEPRECATED, use `success` instead**
-     * Any of our named colors or a hex value like `#FFFFFF`, `#000`.
+     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
      */
     color?: TextColor | string;
     /**

From 9491328860bb1b83763274444cf8e50b2c174458 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 15 Jul 2021 18:42:42 +0100
Subject: [PATCH 25/33] Replacing example with color success instead of
 secondary.

---
 src-docs/src/views/markdown_editor/markdown_format_sink.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
index c96b5e7cc82f..eaba410d2344 100644
--- a/src-docs/src/views/markdown_editor/markdown_format_sink.js
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -171,7 +171,7 @@ export default () => {
   const textColorsArray = [
     'default',
     'subdued',
-    'secondary',
+    'success',
     'accent',
     'danger',
     'warning',

From 344d9f85050c1487cc22009c42e26a4da872ff5e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 20 Jul 2021 14:59:25 +0100
Subject: [PATCH 26/33] Addressing PR review

---
 .../guide_markdown_format.tsx                 | 11 +++++-----
 .../components/guide_page/_guide_page.scss    |  7 -------
 src-docs/src/routes.js                        |  2 +-
 .../markdown_editor/mardown_format_example.js | 20 +------------------
 .../markdown_editor/markdown_format_sink.js   | 15 +++++---------
 .../markdown_editor/markdown_format.tsx       |  3 +++
 src/components/text/text_color.tsx            |  6 ++----
 .../global_styling/variables/_typography.scss |  2 +-
 8 files changed, 18 insertions(+), 48 deletions(-)

diff --git a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
index de5b9924a052..05355c203e43 100644
--- a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
+++ b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
@@ -1,16 +1,14 @@
 import React, { FunctionComponent } from 'react';
 import {
   EuiMarkdownFormat,
+  EuiMarkdownFormatProps,
   getDefaultEuiMarkdownProcessingPlugins,
 } from '../../../../src/components/markdown_editor';
 import { slugify } from '../../../../src/services';
 
-export type GuideMarkdownFormatProps = {
-  children: any;
-};
-
-export const GuideMarkdownFormat: FunctionComponent<GuideMarkdownFormatProps> = ({
+export const GuideMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   children,
+  ...rest
 }) => {
   const processingPlugins = getDefaultEuiMarkdownProcessingPlugins();
   const rehype2reactConfig = processingPlugins[1][1];
@@ -25,7 +23,8 @@ export const GuideMarkdownFormat: FunctionComponent<GuideMarkdownFormatProps> =
     <EuiMarkdownFormat
       processingPluginList={processingPlugins}
       className="guideMarkdownFormat"
-      textSize="m">
+      textSize="m"
+      {...rest}>
       {children}
     </EuiMarkdownFormat>
   );
diff --git a/src-docs/src/components/guide_page/_guide_page.scss b/src-docs/src/components/guide_page/_guide_page.scss
index 0c8969a4239d..92f5669d46b0 100644
--- a/src-docs/src/components/guide_page/_guide_page.scss
+++ b/src-docs/src/components/guide_page/_guide_page.scss
@@ -82,10 +82,3 @@ $guideSideNavWidth: 240px;
     padding: $euiSizeS;
   }
 }
-
-// pages using a markdown format
-.guideMarkdownFormat  {
-  h2 {
-    padding-top: $euiSizeL;
-  }
-}
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 21cdbd818d7c..2ac4de376be6 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -306,7 +306,7 @@ const createMarkdownExample = (example, title) => {
     name: title,
     component: () => (
       <GuidePage title={title}>
-        <GuideMarkdownFormat title={title}>
+        <GuideMarkdownFormat title={title} grow={false}>
           {example.default}
         </GuideMarkdownFormat>
       </GuidePage>
diff --git a/src-docs/src/views/markdown_editor/mardown_format_example.js b/src-docs/src/views/markdown_editor/mardown_format_example.js
index f41f0e1dd6a5..dce19cfe9223 100644
--- a/src-docs/src/views/markdown_editor/mardown_format_example.js
+++ b/src-docs/src/views/markdown_editor/mardown_format_example.js
@@ -1,7 +1,4 @@
 import React, { Fragment } from 'react';
-
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -15,15 +12,12 @@ import { Link } from 'react-router-dom';
 
 import MarkdownFormat from './markdown_format';
 const markdownFormatSource = require('!!raw-loader!./markdown_format');
-const markdownFormatHtml = renderToHtml(MarkdownFormat);
 
 import MarkdownFormatStyles from './markdown_format_styles';
 const markdownFormatStylesSource = require('!!raw-loader!./markdown_format_styles');
-const markdownFormatStylesHtml = renderToHtml(MarkdownFormatStyles);
 
 import MarkdownFormatSink from './markdown_format_sink';
 const markdownFormatSinkSource = require('!!raw-loader!./markdown_format_sink');
-const markdownFormatSinkHtml = renderToHtml(MarkdownFormatSink);
 
 export const MarkdownFormatExample = {
   title: 'Markdown format',
@@ -50,10 +44,6 @@ export const MarkdownFormatExample = {
           type: GuideSectionTypes.JS,
           code: markdownFormatSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: markdownFormatHtml,
-        },
       ],
       title: 'Built in plugins',
       text: (
@@ -81,15 +71,11 @@ export const MarkdownFormatExample = {
           type: GuideSectionTypes.JS,
           code: markdownFormatStylesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: markdownFormatStylesHtml,
-        },
       ],
       title: 'Text sizing and coloring',
       text: (
         <p>
-          <strong>EuiMarkdownFormat</strong> uses the{' '}
+          <strong>EuiMarkdownFormat</strong> uses{' '}
           <Link to="/display/text/">EuiText</Link> as a wrapper to handle all
           the CSS styling when rendering the HTML. It also gives the ability to
           control the text size and color with the <EuiCode>textSize</EuiCode>{' '}
@@ -107,10 +93,6 @@ export const MarkdownFormatExample = {
           type: GuideSectionTypes.JS,
           code: markdownFormatSinkSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: markdownFormatSinkHtml,
-        },
       ],
       title: 'Kitchen sink',
       text: (
diff --git a/src-docs/src/views/markdown_editor/markdown_format_sink.js b/src-docs/src/views/markdown_editor/markdown_format_sink.js
index eaba410d2344..87e8b6425146 100644
--- a/src-docs/src/views/markdown_editor/markdown_format_sink.js
+++ b/src-docs/src/views/markdown_editor/markdown_format_sink.js
@@ -11,7 +11,7 @@ import {
   EuiRange,
   EuiColorPicker,
   useColorPickerState,
-  EuiButtonEmpty,
+  EuiButton,
   EuiPopover,
 } from '../../../../src';
 
@@ -216,14 +216,9 @@ export default () => {
   const closePopover = () => setIsPopoverOpen(false);
 
   const button = (
-    <EuiButtonEmpty
-      onClick={onButtonClick}
-      iconType="controlsVertical"
-      aria-label="Open props customization"
-      color="text"
-      size="s">
+    <EuiButton onClick={onButtonClick} iconType="controlsVertical" size="s">
       Customize props
-    </EuiButtonEmpty>
+    </EuiButton>
   );
 
   return (
@@ -267,10 +262,10 @@ export default () => {
               <EuiRange
                 min={12}
                 max={24}
-                step={4}
                 value={fontSizeScale}
                 onChange={onChangeFontSizeScale}
                 showValue
+                showLabels
                 disabled={textSize !== 'relative'}
               />
             </EuiFormRow>
@@ -280,7 +275,7 @@ export default () => {
 
       <EuiSpacer size="s" />
 
-      <EuiPanel hasBorder={true} className={panelClasses}>
+      <EuiPanel hasBorder={false} hasShadow={false} className={panelClasses}>
         <EuiMarkdownFormat
           textSize={textSize}
           color={textColor === 'custom' ? color : textColor}
diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx
index 87c241abc267..f4c4a30d5b58 100644
--- a/src/components/markdown_editor/markdown_format.tsx
+++ b/src/components/markdown_editor/markdown_format.tsx
@@ -24,6 +24,9 @@ export type EuiMarkdownFormatProps = CommonProps &
     parsingPluginList?: PluggableList;
     /** array of unified plugins to convert the AST into a ReactNode */
     processingPluginList?: PluggableList;
+    /**
+     * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.
+     */
     textSize?: EuiTextProps['size'];
   };
 
diff --git a/src/components/text/text_color.tsx b/src/components/text/text_color.tsx
index 223c82d94926..d3a610666985 100644
--- a/src/components/text/text_color.tsx
+++ b/src/components/text/text_color.tsx
@@ -62,16 +62,14 @@ export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
   // We're checking if is a custom color.
   // If it is a custom color we set the `color` of the `.euiTextColor` div to that custom color.
   // This way the children text elements can `inherit` that color and border and backgrounds can get that `currentColor`.
-  const isCustomColor = !COLORS.includes(color as TextColor);
-
-  const style = isCustomColor
+  const style = !isNamedColor
     ? {
         color: color,
       }
     : undefined;
 
   return (
-    <Component className={classes} {...rest} style={style}>
+    <Component className={classes} style={style} {...rest}>
       {children}
     </Component>
   );
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
index 1ac5ddc90e74..84f7d3651a93 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_typography.scss
@@ -28,7 +28,7 @@ $euiCodeFontWeightBold: 700;
 
 // Use 8px increments for base gridline
 @function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiFontSize/2)*$multiplier);
+  @return convertToRem(($euiSize/2)*$multiplier);
 }
 
 $euiTitles: (

From 844bfdc8cba725a76125573f86038a51f921c5ec Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 20 Jul 2021 16:02:16 +0100
Subject: [PATCH 27/33] Better text styles for text color

---
 .../__snapshots__/described_form_group.test.tsx.snap      | 6 ++++++
 src/components/text/text_color.tsx                        | 8 +++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
index f561a443b399..c81174129223 100644
--- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
+++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
@@ -52,6 +52,7 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
                 >
                   <div
                     className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
                   >
                     Test description
                   </div>
@@ -226,6 +227,7 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
                 >
                   <div
                     className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
                   >
                     Test description
                   </div>
@@ -324,6 +326,7 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
                 >
                   <div
                     className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
                   >
                     Test description
                   </div>
@@ -433,6 +436,7 @@ exports[`EuiDescribedFormGroup props props for the flex item containers are pass
                 >
                   <div
                     className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
                   >
                     Test description
                   </div>
@@ -532,6 +536,7 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
                 >
                   <div
                     className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
                   >
                     Test description
                   </div>
@@ -629,6 +634,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
                 >
                   <div
                     className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
                   >
                     Test description
                   </div>
diff --git a/src/components/text/text_color.tsx b/src/components/text/text_color.tsx
index d3a610666985..6287d50cfa58 100644
--- a/src/components/text/text_color.tsx
+++ b/src/components/text/text_color.tsx
@@ -47,6 +47,7 @@ export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
   color = 'default',
   className,
   component = 'span',
+  style,
   ...rest
 }) => {
   const isNamedColor = COLORS.includes(color as TextColor);
@@ -62,14 +63,15 @@ export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
   // We're checking if is a custom color.
   // If it is a custom color we set the `color` of the `.euiTextColor` div to that custom color.
   // This way the children text elements can `inherit` that color and border and backgrounds can get that `currentColor`.
-  const style = !isNamedColor
+  const euiTextStyle = !isNamedColor
     ? {
         color: color,
+        ...style,
       }
-    : undefined;
+    : { ...style };
 
   return (
-    <Component className={classes} style={style} {...rest}>
+    <Component className={classes} style={euiTextStyle} {...rest}>
       {children}
     </Component>
   );

From aa6ae66356e0dad8e8c802e330eaf67173748edc Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Tue, 20 Jul 2021 16:27:36 +0100
Subject: [PATCH 28/33] Adding `CSSProperties['color']` type

---
 src/components/text/text.tsx       | 4 ++--
 src/components/text/text_color.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx
index bf786d2adb03..cdf625a8cd27 100644
--- a/src/components/text/text.tsx
+++ b/src/components/text/text.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 
@@ -36,7 +36,7 @@ export type EuiTextProps = CommonProps &
      * **`secondary` color is DEPRECATED, use `success` instead**
      * Any of our named colors or a `hex`, `rgb` or `rgba` value.
      */
-    color?: TextColor | string;
+    color?: TextColor | CSSProperties['color'];
     grow?: boolean;
   };
 
diff --git a/src/components/text/text_color.tsx b/src/components/text/text_color.tsx
index 6287d50cfa58..96f9391afc5b 100644
--- a/src/components/text/text_color.tsx
+++ b/src/components/text/text_color.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 
@@ -35,7 +35,7 @@ export type EuiTextColorProps = CommonProps &
      * **`secondary` color is DEPRECATED, use `success` instead**
      * Any of our named colors or a `hex`, `rgb` or `rgba` value.
      */
-    color?: TextColor | string;
+    color?: TextColor | CSSProperties['color'];
     /**
      * Determines the root element
      */

From 9f95d596e0f7791a8cd833e1e8657a5d091675c8 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 21 Jul 2021 12:11:59 -0500
Subject: [PATCH 29/33] retain fenced block styles

---
 .../plugins/markdown_default_plugins/processing_plugins.tsx   | 4 +++-
 .../markdown_editor/plugins/remark/remark_prismjs.ts          | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx b/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx
index de6cd1eea303..901886af57c2 100644
--- a/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx
+++ b/src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx
@@ -30,6 +30,7 @@ import rehype2react from 'rehype-react';
 import remark2rehype from 'remark-rehype';
 import * as MarkdownTooltip from '../markdown_tooltip';
 import * as MarkdownCheckbox from '../markdown_checkbox';
+import { FENCED_CLASS } from '../remark/remark_prismjs';
 import { EuiLink } from '../../../link';
 import { EuiCodeBlock, EuiCode } from '../../../code';
 import { EuiHorizontalRule } from '../../../horizontal_rule';
@@ -64,7 +65,8 @@ export const getDefaultEuiMarkdownProcessingPlugins = (): [
         a: EuiLink,
         code: (props: any) =>
           // If there are linebreaks use codeblock, otherwise code
-          /\r|\n/.exec(props.children) ? (
+          /\r|\n/.exec(props.children) ||
+          (props.className && props.className.indexOf(FENCED_CLASS) > -1) ? (
             <EuiCodeBlock fontSize="m" paddingSize="s" {...props} />
           ) : (
             <EuiCode {...props} />
diff --git a/src/components/markdown_editor/plugins/remark/remark_prismjs.ts b/src/components/markdown_editor/plugins/remark/remark_prismjs.ts
index 9f43cc1f16ef..ad62e6c9c64a 100644
--- a/src/components/markdown_editor/plugins/remark/remark_prismjs.ts
+++ b/src/components/markdown_editor/plugins/remark/remark_prismjs.ts
@@ -10,6 +10,8 @@ import refractor from 'refractor';
 import visit from 'unist-util-visit';
 import { Plugin } from 'unified';
 
+export const FENCED_CLASS = 'remark-prismjs--fenced';
+
 const attacher: Plugin = () => {
   return (ast) => visit(ast, 'code', visitor);
 
@@ -29,6 +31,7 @@ const attacher: Plugin = () => {
         'prismjs',
         ...(data.hProperties?.className || []),
         `language-${language}`,
+        FENCED_CLASS,
       ],
     };
   }

From 74986ac67dd6d8d345a78c4db7ab804b3ac50c50 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 22 Jul 2021 12:36:41 +0100
Subject: [PATCH 30/33] Adding home page getting started link

---
 src-docs/src/views/guidelines/getting_started.md | 4 ++--
 src-docs/src/views/home/home_view.js             | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/views/guidelines/getting_started.md b/src-docs/src/views/guidelines/getting_started.md
index 5f9035ace169..85ea02c4d0ee 100644
--- a/src-docs/src/views/guidelines/getting_started.md
+++ b/src-docs/src/views/guidelines/getting_started.md
@@ -2,7 +2,7 @@
 
 To install the Elastic UI Framework into an existing project, use the `yarn` CLI (`npm` is not supported).
 
-```js
+```
 yarn add @elastic/eui
 ```
 
@@ -29,7 +29,7 @@ nvm install
 
 ### Documentation
 
-You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following.
+You can run the documentation locally at `http://localhost:8030/` by running the following.
 
 ```js
 yarn
diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js
index d54b12c33cf5..3eeaf9105445 100644
--- a/src-docs/src/views/home/home_view.js
+++ b/src-docs/src/views/home/home_view.js
@@ -58,9 +58,9 @@ export const HomeView = () => (
               </p>
               <EuiFlexGroup gutterSize="xl" wrap responsive={false}>
                 <EuiFlexItem grow={false}>
-                  <EuiLink href="https://github.com/elastic/eui/blob/master/wiki/consuming.md">
+                  <Link to="/guidelines/getting-started">
                     <strong>Getting started</strong>
-                  </EuiLink>
+                  </Link>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <Link to="/package/changelog">

From 678cb90080b9b4fbd20ff17d076534efc9cee436 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 22 Jul 2021 13:13:56 +0100
Subject: [PATCH 31/33] Updating CL

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e793f90180b8..0825e32f70ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Updated `EuiMarkdownFormat` to use `EuiHorizontalRule` and better render tables, code blocks and blockquotes ([#4663](https://github.com/elastic/eui/pull/4947))
 - Updated the `EuiMarkdownFormat` to use  `EuiText` as a wrapper to handle all the CSS styling ([#4663](https://github.com/elastic/eui/pull/4947))
 - Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4947))
+- Updated `EuiText`s `blockquote` font size to match the base font size which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4947))
 - Added `markdownFormatProps` prop to `EuiMarkdownEditor`  to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4947))
 - Changed multi-line `EuiDataGrid` cells to `break-word` instead of `break-all` ([#4955](https://github.com/elastic/eui/pull/4955))
 - Refactored `MarkdownEditor` plugins into separate files ([#4970](https://github.com/elastic/eui/pull/4970))

From fbf7ceddd6fe9f5faa80a08bb721128365ba3e99 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 22 Jul 2021 13:40:49 +0100
Subject: [PATCH 32/33] Update CL

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0825e32f70ab..3514a4c8cbb0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@
 - Updated `EuiMarkdownFormat` to use `EuiHorizontalRule` and better render tables, code blocks and blockquotes ([#4663](https://github.com/elastic/eui/pull/4947))
 - Updated the `EuiMarkdownFormat` to use  `EuiText` as a wrapper to handle all the CSS styling ([#4663](https://github.com/elastic/eui/pull/4947))
 - Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4947))
-- Updated `EuiText`s `blockquote` font size to match the base font size which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4947))
+- Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4947))
 - Added `markdownFormatProps` prop to `EuiMarkdownEditor`  to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4947))
 - Changed multi-line `EuiDataGrid` cells to `break-word` instead of `break-all` ([#4955](https://github.com/elastic/eui/pull/4955))
 - Refactored `MarkdownEditor` plugins into separate files ([#4970](https://github.com/elastic/eui/pull/4970))

From eeea91fb1d69a7b6fa9802f0db5231ac2564740e Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 22 Jul 2021 13:44:11 +0100
Subject: [PATCH 33/33] CL again :D

---
 CHANGELOG.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9b2d2eb2fb3..04cf5d166fb3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,16 +1,16 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Fixed color of `html` scrollbar in dark mode ([#4969](https://github.com/elastic/eui/pull/4969))
+- Updated `EuiMarkdownFormat` to use `EuiHorizontalRule` and better render tables, code blocks and blockquotes ([#4663](https://github.com/elastic/eui/pull/4947))
+- Updated the `EuiMarkdownFormat` to use  `EuiText` as a wrapper to handle all the CSS styling ([#4663](https://github.com/elastic/eui/pull/4947))
+- Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4947))
+- Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4947))
+- Added `markdownFormatProps` prop to `EuiMarkdownEditor` to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4947))
 
 ## [`36.0.0`](https://github.com/elastic/eui/tree/v36.0.0)
 
 - Refactored `EuiFlyout` types ([#4940](https://github.com/elastic/eui/pull/4940))
 - Updated `pause` icon ([#4947](https://github.com/elastic/eui/pull/4947))
-- Updated `EuiMarkdownFormat` to use `EuiHorizontalRule` and better render tables, code blocks and blockquotes ([#4663](https://github.com/elastic/eui/pull/4947))
-- Updated the `EuiMarkdownFormat` to use  `EuiText` as a wrapper to handle all the CSS styling ([#4663](https://github.com/elastic/eui/pull/4947))
-- Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4947))
-- Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4947))
-- Added `markdownFormatProps` prop to `EuiMarkdownEditor`  to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4947))
 - Changed multi-line `EuiDataGrid` cells to `break-word` instead of `break-all` ([#4955](https://github.com/elastic/eui/pull/4955))
 - Refactored `MarkdownEditor` plugins into separate files ([#4970](https://github.com/elastic/eui/pull/4970))
 - Added `checkable` options to `EuiKeyPadMenu` and `EuiKeyPadMenuItem` ([#4950](https://github.com/elastic/eui/pull/4950))