Moving rawTextVariants into text styles

0xsequence · Jan 5, 2025 · 6fbd632 · 6fbd632
1 parent 53f6e7a
commit 6fbd632
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 94 deletions.
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -7,7 +7,6 @@ import {
   PolymorphicProps,
   PolymorphicRef,
 } from '~/components/Box'
-import { text } from '~/tokens/typography'
 
 import * as styles from './styles.css'
 
@@ -33,7 +32,7 @@ export const Text: PolymorphicComponent<TextProps, 'span'> = forwardRef(
     } = props
 
     // Merge as variant as prop values so they can be overridden rather than using textVariants recipe
-    const textVariantProps = text[variant]
+    const textVariantProps = styles.rawTextVariants[variant]
 
     return (
       <Box

diff --git a/src/components/Text/styles.css.ts b/src/components/Text/styles.css.ts
@@ -1,22 +1,97 @@
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes'
 
-import { atoms } from '~/css'
-import { text } from '~/tokens/typography'
+import { Atoms, atoms } from '~/css'
+
+type TextVariant =
+  | 'inherit'
+  | 'xlarge'
+  | 'large'
+  | 'medium'
+  | 'normal'
+  | 'small'
+  | 'xsmall'
+  | 'code'
+
+interface TextVariantAtoms {
+  fontFamily: Atoms['fontFamily']
+  fontSize: Atoms['fontSize']
+  lineHeight: Atoms['lineHeight']
+  letterSpacing: Atoms['letterSpacing']
+  fontWeight: Atoms['fontWeight']
+}
+
+export const rawTextVariants: Record<TextVariant, TextVariantAtoms> = {
+  inherit: {
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+    letterSpacing: 'inherit',
+    fontWeight: 'inherit',
+  },
+
+  // Size variants
+  xlarge: {
+    fontFamily: 'body',
+    fontSize: 'xlarge',
+    lineHeight: '9',
+    letterSpacing: 'none',
+    fontWeight: 'bold',
+  },
+  large: {
+    fontFamily: 'body',
+    fontSize: 'large',
+    lineHeight: '7',
+    letterSpacing: 'normal',
+    fontWeight: 'semibold',
+  },
+  medium: {
+    fontFamily: 'body',
+    fontSize: 'medium',
+    lineHeight: '6',
+    letterSpacing: 'normal',
+    fontWeight: 'bold',
+  },
+  normal: {
+    fontFamily: 'body',
+    fontSize: 'normal',
+    lineHeight: '5',
+    letterSpacing: 'wide',
+    fontWeight: 'normal',
+  },
+  small: {
+    fontFamily: 'body',
+    fontSize: 'small',
+    lineHeight: '4',
+    letterSpacing: 'wide',
+    fontWeight: 'medium',
+  },
+  xsmall: {
+    fontFamily: 'body',
+    fontSize: 'xsmall',
+    lineHeight: '4',
+    letterSpacing: 'wide',
+    fontWeight: 'bold',
+  },
+
+  // Semantic variants
+  code: {
+    fontFamily: 'mono',
+    fontSize: 'normal',
+    lineHeight: '5',
+    letterSpacing: 'none',
+    fontWeight: 'normal',
+  },
+}
+
+const toAtoms = <T extends object>(obj: T) =>
+  Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => [key, atoms(value)])
+  ) as { [K in keyof T]: string }
 
 export const textVariants = recipe({
   variants: {
-    variant: {
-      inherit: atoms(text.inherit),
-      xlarge: atoms(text.xlarge),
-      large: atoms(text.large),
-      medium: atoms(text.medium),
-      normal: atoms(text.normal),
-      small: atoms(text.small),
-      xsmall: atoms(text.xsmall),
-      code: atoms(text.code),
-    },
+    variant: toAtoms(rawTextVariants),
 
-    /** prop overrides */
     ellipsis: {
       true: atoms({
         overflow: 'hidden',
@@ -49,7 +124,6 @@ export const textVariants = recipe({
       },
     },
 
-    // hidden text for screen readers
     hidden: {
       true: {
         border: 0,

diff --git a/src/tokens/typography.ts b/src/tokens/typography.ts
@@ -37,81 +37,3 @@ export const lineHeights = {
   '7': '1.75rem', // 28px
   '9': '2.25rem', // 36px
 }
-
-// Text Variants: a special token which refers to typeography token keys rather than values so it can be used in the atoms function
-type TextVariant =
-  | 'inherit'
-  | 'xlarge'
-  | 'large'
-  | 'medium'
-  | 'normal'
-  | 'small'
-  | 'xsmall'
-  | 'code'
-
-interface TextVariantAtomProps {
-  fontFamily: keyof typeof fonts
-  fontSize: keyof typeof fontSizes
-  lineHeight: keyof typeof lineHeights
-  letterSpacing: keyof typeof letterSpacings
-  fontWeight: keyof typeof fontWeights
-}
-
-export const text: Record<TextVariant, TextVariantAtomProps> = {
-  inherit: {
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    lineHeight: 'inherit',
-    letterSpacing: 'inherit',
-    fontWeight: 'inherit',
-  },
-  xlarge: {
-    fontFamily: 'body',
-    fontSize: 'xlarge',
-    lineHeight: '9',
-    letterSpacing: 'none',
-    fontWeight: 'bold',
-  },
-  large: {
-    fontFamily: 'body',
-    fontSize: 'large',
-    lineHeight: '7',
-    letterSpacing: 'normal',
-    fontWeight: 'semibold',
-  },
-  medium: {
-    fontFamily: 'body',
-    fontSize: 'medium',
-    lineHeight: '6',
-    letterSpacing: 'normal',
-    fontWeight: 'bold',
-  },
-  normal: {
-    fontFamily: 'body',
-    fontSize: 'normal',
-    lineHeight: '5',
-    letterSpacing: 'wide',
-    fontWeight: 'normal',
-  },
-  small: {
-    fontFamily: 'body',
-    fontSize: 'small',
-    lineHeight: '4',
-    letterSpacing: 'wide',
-    fontWeight: 'medium',
-  },
-  xsmall: {
-    fontFamily: 'body',
-    fontSize: 'xsmall',
-    lineHeight: '4',
-    letterSpacing: 'wide',
-    fontWeight: 'bold',
-  },
-  code: {
-    fontFamily: 'mono',
-    fontSize: 'normal',
-    lineHeight: '5',
-    letterSpacing: 'none',
-    fontWeight: 'normal',
-  },
-}