fix(storybook): Use 14px as base font size in stories (#40594)

In storybook, we want a have 2 base font sizes: `16px` in docs ([e.g.
the Colors page](http://localhost:9001/?path=/story/core-colors--page))
and `14px` in component stories ([e.g. the Form
story](http://localhost:9001/?path=/story/components-forms-form--default)).
Docs need a larger font size for better readability, whereas component
stories need a `14px` base because that's the base inside the web app.

Currently in Storybook, both docs and stories have a `16px` base. This
leads to some visual discrepancies within stories, as seen below. This
PR fixes that.

**Before:** some element are `16px` (e.g. the form field labels) and
others are `14px` (e.g. the input placeholder)
<img width="1011" alt="Screen Shot 2022-10-26 at 11 45 59 AM"
src="https://user-images.githubusercontent.com/44172267/198110435-1eb96588-8d19-48e6-a4e9-797287458231.png">

**After:** all elements are `14px`
<img width="1011" alt="Screen Shot 2022-10-26 at 11 46 15 AM"
src="https://user-images.githubusercontent.com/44172267/198110499-a5ed3bbf-74fc-485d-b4f7-d7d95a51c062.png">

docs-ui/storybook/globalStyles.tsx

@@ -4,7 +4,9 @@ import space from 'sentry/styles/space';
 import {Theme} from 'sentry/utils/theme';
 
 const docsStyles = (theme: Theme) => css`
-  html,
+  html {
+    font-size: 100%;
+  }
   body {
     font-family: ${theme.text.family};
     font-feature-settings: 'liga';
@@ -15,17 +17,23 @@ const docsStyles = (theme: Theme) => css`
   p,
   a,
   button {
-    font-family: ${theme.text.family};
-    font-size: 1rem;
     color: ${theme.textColor};
   }
 
+  strong {
+    color: ${theme.headingColor};
+  }
+
   /** Content wraps */
   #docs-root {
     display: flex;
     justify-content: center;
     background: ${theme.background};
   }
+  #root,
+  .sbdocs.sbdocs-preview {
+    font-size: ${theme.fontSizeMedium};
+  }
   body.sb-show-main {
     background: ${theme.background} !important;
   }
@@ -61,9 +69,9 @@ const docsStyles = (theme: Theme) => css`
   /** Body text */
   .sbdocs.sbdocs-p {
     font-family: ${theme.text.family};
-    font-size: 1rem;
+    font-size: ${theme.fontSizeLarge};
     color: ${theme.textColor};
-    margin: ${space(2)} 0;
+    margin: ${space(1.5)} 0;
   }
   .sbdocs.small {
     font-size: 0.875rem;
@@ -73,7 +81,7 @@ const docsStyles = (theme: Theme) => css`
   /** Links */
   .sbdocs.sbdocs-a {
     font-family: ${theme.text.family};
-    font-size: 1rem;
+    font-size: ${theme.fontSizeLarge};
     color: ${theme.blue300};
     text-decoration: underline;
     text-decoration-color: ${theme.blue100};
@@ -97,7 +105,7 @@ const docsStyles = (theme: Theme) => css`
   }
   .sbdocs.sbdocs-wrapper *:not(pre) > code {
     font-family: ${theme.text.familyMono};
-    font-size: 1rem;
+    font-size: ${theme.fontSizeLarge};
     padding: 0.125rem 0.25rem;
     color: ${theme.textColor};
     background: ${theme.bodyBackground};
@@ -113,7 +121,7 @@ const docsStyles = (theme: Theme) => css`
   .sbdocs.sbdocs-li:first-of-type,
   .sbdocs.sbdocs-li:last-child {
     font-family: ${theme.text.family};
-    font-size: 1rem;
+    font-size: ${theme.fontSizeLarge};
     color: ${theme.textColor};
     margin: ${space(1)} 0;
   }
@@ -131,25 +139,25 @@ const docsStyles = (theme: Theme) => css`
   .sbdocs.sbdocs-h4 {
     font-family: ${theme.text.family};
     font-weight: 600;
-    color: ${theme.textColor};
+    color: ${theme.headingColor};
     border-bottom: none;
   }
   .sbdocs.sbdocs-h1 {
     font-size: 2.25rem;
-    letter-spacing: -0.05rem;
-    margin-bottom: ${space(4)};
+    letter-spacing: -0.02em;
+    margin-bottom: ${space(3)};
   }
   .sbdocs.sbdocs-h2,
   .sbdocs.sbdocs-h2:first-of-type {
     font-size: 1.625rem;
-    letter-spacing: -0.03rem;
+    letter-spacing: -0.012em;
     margin-top: 0;
     margin-bottom: ${space(2)};
   }
   .sbdocs.sbdocs-h3,
   .sbdocs.sbdocs-h3:first-of-type {
     font-size: 1.25rem;
-    letter-spacing: -0.01rem;
+    letter-spacing: -0.004em;
     margin-top: ${space(4)};
     margin-bottom: ${space(1)};
   }