Remove all legacy sizs and add text and subtext

Author: rsaris

src/Heading/Heading.module.css

@@ -10,23 +10,12 @@
   font: var(--synth-font-heading-small);
 }
 
-.md { /* same as text */
-  font-size: var(--synth-font-size-base);
-  font-weight: var(--synth-font-weight-bold);
-  line-height: 1.25rem;
+.text {
+  font: var(--synth-font-body-bold);
 }
 
-.sm { /* same as subtext */
-  font-size: .75rem;
-  font-weight: var(--synth-font-weight-bold);
-  line-height: 1rem;
-}
-
-.xs { /* move to subtext? */
-  font-size: .625rem;
-  font-weight: var(--synth-font-weight-bold);
-  letter-spacing: 0.0625rem;
-  line-height: 0.875rem;
+.subtext {
+  font: var(--synth-font-subtext-bold);
 }
 
 .bold {

src/Heading/Heading.stories.tsx

@@ -64,8 +64,6 @@ export const Levels: Story = {
       <Heading level={1} size={HeadingSizes.LARGE}>The fastest way to recruit research participants</Heading>
       <Heading level={3} size={HeadingSizes.MEDIUM}>The fastest way to recruit research participants</Heading>
       <Heading level={4} size={HeadingSizes.SMALL}>The fastest way to recruit research participants</Heading>
-      <Heading level={5} size="md">The fastest way to recruit research participants</Heading>
-      <Heading level={6} size="sm">The fastest way to recruit research participants</Heading>
     </>
   ),
 };
@@ -80,9 +78,8 @@ export const Sizes: Story = {
       <Heading level={2} size={HeadingSizes.LARGE}>This is a heading level 2 with size="large"</Heading>
       <Heading level={2} size={HeadingSizes.MEDIUM}>This is a heading level 2 with size="medium"</Heading>
       <Heading level={2} size={HeadingSizes.SMALL}>This is a heading level 2 with size="small"</Heading>
-      <Heading level={2} size="md">This is a heading level 2 with size="md"</Heading>
-      <Heading level={2} size="sm">This is a heading level 2 with size="sm"</Heading>
-      <Heading level={2} size="xs">This is a heading level 2 with size="xs"</Heading>
+      <Heading level={2} size={HeadingSizes.TEXT}>This is a heading level 2 with size="text"</Heading>
+      <Heading level={2} size={HeadingSizes.SUBTEXT}>This is a heading level 2 with size="subtext"</Heading>
     </>
   ),
 };

src/Heading/Heading.tsx

@@ -8,6 +8,8 @@ export enum HeadingSizes {
   LARGE = 'large',
   MEDIUM = 'medium',
   SMALL = 'small',
+  TEXT = 'text',
+  SUBTEXT = 'subtext',
 };
 
 export interface HeadingProps {
@@ -27,21 +29,18 @@ export interface HeadingProps {
    * @type {string}
    * @description Sizes map to the available font-sizes from the defined list of font-types.
    * Adjust for visual hierarchy.
-   *
-   * TODO: Update this to only use the HeadingSizes keys and update the types to not use string
    */
-  size: 'xs' | 'sm' | 'md' | 'large' | 'medium' | 'small';
+  size: HeadingSizes;
   textAlign?: 'left' | 'center' | 'right';
   weight?: 'regular' | 'medium' | 'bold';
 }
 
 const SIZE_CLASSES = {
-  xs: styles.xs,
-  sm: styles.sm,
-  md: styles.md,
   [HeadingSizes.LARGE]: styles.large,
   [HeadingSizes.MEDIUM]: styles.medium,
   [HeadingSizes.SMALL]: styles.small,
+  [HeadingSizes.TEXT]: styles.text,
+  [HeadingSizes.SUBTEXT]: styles.subtext,
 } as const;
 
 /* TODO Remove this? */
@@ -50,8 +49,8 @@ const LEVEL_CLASSES = {
   2: styles.medium,
   3: styles.medium, // This should be small?
   4: styles.small,
-  5: styles.md,
-  6: styles.sm,
+  5: styles.text,
+  6: styles.subtext,
 } as const;
 
 const WEIGHT_CLASSES = {