add text

packages/components/src/_components/text/index.tsx

@@ -0,0 +1 @@
+export { type Props, Text } from './text'

packages/components/src/_components/text/text.stories.tsx

@@ -0,0 +1,93 @@
+import { Text } from './text'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+type Component = typeof Text
+
+const meta: Meta<Component> = {
+  title: 'Components/Text',
+  component: Text,
+  args: {
+    children: 'The quick brown fox jumped over the lazy dog.',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=617-208&t=ppNe6QC4ntgNciqw-11',
+    },
+  },
+
+  render: props => (
+    <div className="grid gap-6">
+      <div className="grid gap-2">
+        <Text {...props} size={88} weight="regular" />
+        <Text {...props} size={88} weight="medium" />
+        <Text {...props} size={88} weight="semibold" />
+        <Text {...props} size={88} weight="bold" />
+      </div>
+
+      <div className="grid gap-2">
+        <Text {...props} size={64} weight="regular" />
+        <Text {...props} size={64} weight="medium" />
+        <Text {...props} size={64} weight="semibold" />
+        <Text {...props} size={64} weight="bold" />
+      </div>
+
+      <div className="grid gap-2">
+        <Text {...props} size={40} weight="regular" />
+        <Text {...props} size={40} weight="medium" />
+        <Text {...props} size={40} weight="semibold" />
+        <Text {...props} size={40} weight="bold" />
+      </div>
+
+      <div className="grid gap-2">
+        <Text {...props} size={27} weight="regular" />
+        <Text {...props} size={27} weight="medium" />
+        <Text {...props} size={27} weight="semibold" />
+      </div>
+
+      <div className="grid gap-2">
+        <Text {...props} size={19} weight="regular" />
+        <Text {...props} size={19} weight="medium" />
+        <Text {...props} size={19} weight="semibold" />
+      </div>
+
+      <div className="grid gap-2">
+        <Text {...props} size={15} weight="regular" />
+        <Text {...props} size={15} weight="medium" />
+        <Text {...props} size={15} weight="semibold" />
+      </div>
+
+      <div className="grid gap-2">
+        <Text {...props} size={13} weight="regular" />
+        <Text {...props} size={13} weight="medium" />
+        <Text {...props} size={13} weight="semibold" />
+      </div>
+
+      <div className="grid gap-2">
+        <Text {...props} size={11} weight="regular" />
+        <Text {...props} size={11} weight="medium" />
+        <Text {...props} size={11} weight="semibold" />
+        <Text {...props} size={11} weight="regular" uppercase />
+        <Text {...props} size={11} weight="medium" uppercase />
+        <Text {...props} size={11} weight="semibold" uppercase />
+      </div>
+    </div>
+  ),
+}
+
+type Story = StoryObj<Component>
+
+export const Light: Story = {
+  args: {},
+}
+
+export const Dark: Story = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+}
+
+export default meta

packages/components/src/_components/text/text.tsx

@@ -0,0 +1,61 @@
+import { forwardRef } from 'react'
+
+import { cva, type VariantProps } from 'cva'
+
+const styles = cva({
+  variants: {
+    type: {
+      default: 'font-sans',
+      monospace: 'font-mono',
+    },
+    size: {
+      88: 'text-88',
+      64: 'text-64',
+      40: 'text-40',
+      27: 'text-27',
+      19: 'text-19',
+      15: 'text-15',
+      13: 'text-13',
+      11: 'text-11',
+    },
+    weight: {
+      regular: 'font-regular',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+    },
+    uppercase: {
+      true: 'uppercase',
+    },
+    wrap: {
+      false: 'whitespace-nowrap',
+    },
+    truncate: {
+      true: 'truncate',
+    },
+    select: {
+      false: 'select-none',
+    },
+  },
+  defaultVariants: {
+    type: 'default',
+    weight: 'regular',
+  },
+})
+
+type Props<C extends React.ElementType> = VariantProps<typeof styles> &
+  React.ComponentPropsWithoutRef<C> & {
+    as?: C
+  }
+
+const Text = <C extends React.ElementType = 'span'>(props: Props<C>) => {
+  const { as: Component = 'span', children, className, ...rest } = props
+  return (
+    <Component {...rest} className={styles({ ...props, className })}>
+      {children}
+    </Component>
+  )
+}
+
+export { Text }
+export type { Props as TextProps }

packages/components/tailwind.config.ts

@@ -6,8 +6,8 @@ import reactAriaComponentsPlugin from 'tailwindcss-react-aria-components'
 
 import { borderRadius } from './src/_tokens/border-radius'
 import { shadows } from './src/_tokens/shadows'
-import { typography } from './src/_tokens/typography'
 
+// import { typography } from './src/_tokens/typography'
 import type { Config } from 'tailwindcss'
 
 export default {
@@ -19,27 +19,82 @@ export default {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
 
   theme: {
+    extend: {
+      borderColor: {
+        DEFAULT: 'transparent',
+      },
+    },
+
     fontFamily: {
       sans: ['var(--font-sans)', ...fontFamily.sans],
-      //     mono: fontFamily.mono,
+      mono: fontFamily.mono,
     },
+
     fontWeight: {
       regular: '400',
       medium: '500',
       semibold: '600',
       bold: '700',
     },
 
-    fontSize: Object.entries(typography).reduce((acc, [key, value]) => {
-      acc[key] = [
-        value.fontSize,
+    fontSize: {
+      88: [
+        '5.5rem',
+        {
+          lineHeight: '5.25rem',
+          letterSpacing: '-0.1155rem',
+        },
+      ],
+      64: [
+        '4rem',
+        {
+          lineHeight: '4.25rem',
+          letterSpacing: '-0.08rem',
+        },
+      ],
+      40: [
+        '2.5rem',
+        {
+          lineHeight: '2.75rem',
+          letterSpacing: '-0.05rem',
+        },
+      ],
+      27: [
+        '1.6875rem',
         {
-          lineHeight: value.lineHeight,
-          letterSpacing: value.letterSpacing,
+          lineHeight: '2rem',
+          letterSpacing: '0rem',
         },
-      ]
-      return acc
-    }, {}),
+      ],
+      19: [
+        '1.1875rem',
+        {
+          lineHeight: '1.75rem',
+          letterSpacing: '0rem',
+        },
+      ],
+      15: [
+        '0.9375rem',
+        {
+          lineHeight: '1.359375rem',
+          letterSpacing: '0rem',
+        },
+      ],
+      13: [
+        '0.8125rem',
+        {
+          lineHeight: '1.1375rem',
+          letterSpacing: '0rem',
+        },
+      ],
+      11: [
+        '0.6875rem',
+        {
+          lineHeight: '1',
+          letterSpacing: '0rem',
+        },
+      ],
+    },
 
     colors: {
       transparent: 'transparent',