feat(components): StyledText styles for app/odd

StyledText is a component that is only really useful if you're goign to
do semantic styles. Semantic styles are only really useful if they mean
the same thing in all the places they're used. This isn't really true
right now, but we can at least have enumerated style tokens that you can
select from when creating one.

Now, which style token you use is separately selectable across ODD and
non-ODD flows. You can still fully or partially override the CSS if you
want, but the styles on desktop align with helix and the styles on ODD
align with what's going on in ODD.

components/src/atoms/StyledText/StyledText.stories.tsx

@@ -1,13 +1,27 @@
 /* eslint-disable storybook/prefer-pascal-case */
 import * as React from 'react'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { SPACING } from '../../ui-style-constants'
 import { Flex } from '../../primitives'
-import { LegacyStyledText } from './index'
+import { StyledText, ODD_STYLES, HELIX_STYLES } from './index'
 import type { Meta, StoryObj } from '@storybook/react'
 
-const meta: Meta<typeof LegacyStyledText> = {
+const meta: Meta<typeof StyledText> = {
   title: 'Library/Atoms/StyledText',
-  component: LegacyStyledText,
+  component: StyledText,
+  argTypes: {
+    oddStyle: {
+      control: {
+        type: 'select',
+      },
+      options: ODD_STYLES,
+    },
+    desktopStyle: {
+      control: {
+        type: 'select',
+      },
+      options: HELIX_STYLES,
+    },
+  },
   decorators: [
     Story => (
       <Flex padding={SPACING.spacing16}>
@@ -19,89 +33,15 @@ const meta: Meta<typeof LegacyStyledText> = {
 
 export default meta
 
-type Story = StoryObj<typeof LegacyStyledText>
+type Story = StoryObj<typeof StyledText>
 
 const dummyText =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus sapien nunc dolor, aliquet nibh placerat et nisl, arcu. Pellentesque blandit sollicitudin vitae morbi morbi vulputate cursus tellus. Amet proin donec proin id aliquet in nullam.'
 
-export const h1: Story = {
-  args: {
-    as: 'h1',
-    children: dummyText,
-  },
-}
-
-export const h2: Story = {
-  args: {
-    as: 'h2',
-    children: dummyText,
-  },
-}
-
-export const h3: Story = {
-  args: {
-    as: 'h3',
-    children: dummyText,
-  },
-}
-
-export const h6: Story = {
-  args: {
-    as: 'h6',
-    children: dummyText,
-  },
-}
-
-export const p: Story = {
-  args: {
-    as: 'p',
-    children: dummyText,
-  },
-}
-
-export const label: Story = {
-  args: {
-    as: 'label',
-    children: dummyText,
-  },
-}
-
-export const h2SemiBold: Story = {
-  args: {
-    as: 'h2',
-    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-    children: dummyText,
-  },
-}
-
-export const h3SemiBold: Story = {
-  args: {
-    as: 'h3',
-    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-    children: dummyText,
-  },
-}
-
-export const h6SemiBold: Story = {
-  args: {
-    as: 'h6',
-    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-    children: dummyText,
-  },
-}
-
-export const pSemiBold: Story = {
-  args: {
-    as: 'p',
-    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-    children: dummyText,
-  },
-}
-
-export const labelSemiBold: Story = {
+export const Example: Story = {
   args: {
-    as: 'label',
-    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    oddStyle: 'level1Header',
+    desktopStyle: 'displayBold',
     children: dummyText,
   },
 }