fix: font size updates

Author: iamdavidhill

packages/ui/src/components/markdown.css

@@ -5,30 +5,70 @@
   color: var(--text-base);
   text-wrap: pretty;
 
+  strong {
+    font-weight: var(--font-weight-medium);
+  }
+
   /* text-12-regular */
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-base);
   font-style: normal;
   font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-large); /* 166.667% */
+  line-height: var(--line-height-large);
   letter-spacing: var(--letter-spacing-normal);
 
-  h1,
-  h2,
+  h1 {
+    margin-top: 40px;
+    font-weight: var(--font-weight-medium);
+    color: var(--text-strong);
+
+    strong {
+      font-weight: var(--font-weight-medium);
+    }
+  }
+
+  h2 {
+    margin-top: 32px;
+    font-weight: var(--font-weight-medium);
+    color: var(--text-strong);
+
+    strong {
+      font-weight: var(--font-weight-medium);
+    }
+  }
+
   h3 {
-    margin-top: 16px;
-    margin-bottom: 8px;
+    margin-top: 24px;
     font-weight: var(--font-weight-medium);
+    color: var(--text-strong);
+
+
+    strong {
+      font-weight: var(--font-weight-medium);
+    }
+  }
+
+  h1 {
+    font-size: 15px;
   }
 
   p {
+    margin-top: 16px;
     margin-bottom: 8px;
   }
 
   ul,
   ol {
     margin-top: 16px;
-    margin-bottom: 16px;
+
+    li {
+      margin-bottom: 12px;
+      line-height: var(--line-height-large);
+    }
+
+    li:last-child {
+      margin-bottom: 0;
+    }
   }
 
   hr {
@@ -37,6 +77,14 @@
     border-color: var(--border-weaker-base);
   }
 
+  .shiki {
+    font-size: 13px;
+    background: var(--surface-raised-base) !important; /* temporary fix to test style */
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 0.5px solid var(--border-weak-base);
+  }
+
   pre {
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -51,7 +99,7 @@
   :not(pre) > code {
     font-family: var(--font-family-mono);
     font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: 0.9em;
+    font-size: 13px;
     /* background-color: var(--surface-base-strong); */
     /* padding: 0.15em 0.35em; */
     /* border-radius: var(--radius-sm); */

packages/ui/src/styles/theme.css

@@ -10,9 +10,9 @@
   --font-size-x-large: 20px;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
-  --line-height-large: 20px;
-  --line-height-x-large: 24px;
-  --line-height-2x-large: 30px;
+  --line-height-large: 150%;
+  --line-height-x-large: 180%;
+  --line-height-2x-large: 200%;
   --letter-spacing-normal: 0;
   --letter-spacing-tight: -0.1599999964237213;
   --letter-spacing-tightest: -0.3199999928474426;