Update text styles (#27318)

## Summary & Motivation

Adds new text styles from
#21450 which was reverted in
#21517.

I'm adding the new styles, and updating a couple of the existing ones
(Title and Heading are the main changes, they're bigger now). Assuming
this is fine since we did this in the original PR.

## How I Tested These Changes

briefly went around the app and everything looked fine. The only
concrete changes are going to be title/headline are bigger now which
seems like the intention in the original PR:

<img width="281" alt="Screenshot 2025-01-23 at 1 14 38 PM"
src="https://github.com/user-attachments/assets/e039f856-a26d-45d1-91a1-bf0a10998199"
/>
<img width="366" alt="Screenshot 2025-01-23 at 1 14 29 PM"
src="https://github.com/user-attachments/assets/d3374088-7756-4098-afa2-6e78549c4b96"
/>

js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx

@@ -12,16 +12,16 @@ const Text = styled.span<TextProps>`
 `;
 
 export const Title = styled(Text)`
-  font-size: 24px;
+  font-size: 32px;
+  line-height: 36px;
   font-weight: 600;
-  line-height: 30px;
   -webkit-font-smoothing: antialiased;
 `;
 
 export const Heading = styled(Text)`
-  font-size: 18px;
-  font-weight: 500;
+  font-size: 20px;
   line-height: 24px;
+  font-weight: 500;
   -webkit-font-smoothing: antialiased;
 `;
 
@@ -56,6 +56,8 @@ export const Subtitle2 = styled(Text)`
 export const Body = styled(Text)`
   font-family: ${FontFamily.default};
   font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
 `;
 
 export const Body1 = styled(Text)`
@@ -71,6 +73,7 @@ export const Body2 = styled(Text)`
   font-weight: 400;
 `;
 
+//Deprecated – Use BodySmall moving forward
 export const Caption = styled(Text)`
   font-family: ${FontFamily.default};
   font-size: 12px;
@@ -101,10 +104,58 @@ export const Mono = styled(Text)`
   font-family: ${FontFamily.monospace};
   font-variant-ligatures: none;
   font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
 `;
 
 export const CaptionMono = styled(Text)`
   font-family: ${FontFamily.monospace};
   font-variant-ligatures: none;
   font-size: 12px;
 `;
+export const SubtitleLarge = styled(Text)`
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+`;
+
+export const Subtitle = styled(Text)`
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+`;
+
+export const SubtitleSmall = styled(Text)`
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+`;
+
+export const BodyLarge = styled(Text)`
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 400;
+`;
+
+export const BodySmall = styled(Text)`
+  font-family: ${FontFamily.default};
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+`;
+
+export const MonoLarge = styled(Text)`
+  font-family: ${FontFamily.monospace};
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 400;
+`;
+
+export const MonoSmall = styled(Text)`
+  font-family: ${FontFamily.monospace};
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+`;