EUI font-size compatibility (#2011)

* EUI font-size compatibility

* Run prettier

* Add comments

* Run prettier

Author: reakaleek

src/Elastic.Documentation.Site/Assets/styles.css

@@ -24,6 +24,16 @@
 @import './api-docs.css';
 @import 'tippy.js/dist/tippy.css';
 
+html {
+	/* We need to use 14px because EUI works best with a 14px base */
+	font-size: 14px;
+}
+
+body {
+	/* This is still needed because of some usages of ch units and to maintain the previous behavior */
+	font-size: 16px;
+}
+
 :root {
 	--outline-size: max(2px, 0.08em);
 	--outline-style: auto;

src/Elastic.Documentation.Site/Assets/theme.css

@@ -175,4 +175,14 @@
 	--color-poppy: #fa744e; /* == --color-poppy-90 */
 
 	--spacing: 4px;
+
+	/* Typography scale based on a 14px base but to maintain the behaviour of 16px */
+	--text-xs: 0.857rem; /* 12px */
+	--text-sm: 1rem; /* 14px */
+	--text-base: 1.143rem; /* 16px */
+	--text-xl: 1.429rem; /* 20px */
+	--text-2xl: 1.714rem; /* 24px */
+	--text-3xl: 2.143rem; /* 30px */
+	--text-4xl: 2.571rem; /* 36px */
+	--text-5xl: 3.429rem; /* 48px */
 }

src/Elastic.Documentation.Site/Assets/web-components/VersionDropdown.tsx

@@ -197,7 +197,7 @@ const VersionDropdown = ({
             <EuiText
                 css={css`
                     font-weight: ${euiTheme.font.weight.bold};
-                    font-size: ${useEuiFontSize('xs').fontSize};
+                    font-size: ${useEuiFontSize('s').fontSize};
                 `}
             >
                 Current version ({currentVersion})