text and heading component styles

theme/components/Heading.ts

 import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import type { SystemStyleInterpolation } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
 
-const baseStyle = {
-  fontWeight: '500',
-  letterSpacing: '-0.5px',
+const baseStyle: SystemStyleInterpolation = (props) => {
+  return {
+    fontWeight: '500',
+    color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+  };
 };
 
-// WIP
-// designer promised to sync theme and page mock-ups
-// so that's not the final point yet
 const sizes = {
   lg: {
     fontSize: '32px',
     lineHeight: '40px',
+    letterSpacing: '-0.5px',
+  },
+  md: {
+    fontSize: '24px',
+    lineHeight: '32px',
+  },
+  sm: {
+    fontSize: '18px',
+    lineHeight: '24px',
   },
 };
 

theme/components/Text.ts

@@ -2,14 +2,36 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
 
+const variantPrimary: SystemStyleFunction = (props) => ({
+  color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
+});
+
 const variantSecondary: SystemStyleFunction = (props) => ({
   color: mode('gray.500', 'gray.400')(props),
 });
 
+const variantAlternate: SystemStyleFunction = (props) => ({
+  color: mode('blue.600', 'blue.300')(props),
+});
+
+const variantInherit = {
+  color: 'inherit',
+};
+
+const variants = {
+  primary: variantPrimary,
+  secondary: variantSecondary,
+  alternate: variantAlternate,
+  inherit: variantInherit,
+};
+
+const defaultProps = {
+  variant: 'primary',
+};
+
 const Text: ComponentStyleConfig = {
-  variants: {
-    secondary: variantSecondary,
-  },
+  defaultProps,
+  variants,
 };
 
 export default Text;

ui/navigation/AccountNavLink.tsx

@@ -32,7 +32,7 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
       >
         <HStack spacing={ 3 }>
           <Icon as={ icon } boxSize="30px"/>
-          <Text>{ text }</Text>
+          <Text variant="inherit">{ text }</Text>
         </HStack>
       </Link>
     </NextLink>

ui/navigation/MainNavLink.tsx

@@ -34,7 +34,7 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
         <HStack justifyContent="space-between">
           <HStack spacing={ 3 }>
             <Icon as={ icon } boxSize="30px"/>
-            <Text>{ text }</Text>
+            <Text variant="inherit">{ text }</Text>
           </HStack>
           <ChevronRightIcon boxSize={ 6 }/>
         </HStack>