Typography (WIP)

.storybook/preview.js

@@ -2,6 +2,7 @@
 import { ThemeProvider } from 'theme-ui'
 
 import theme from "../src/themes/theme"
+import Global from '../src/components/Global'
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -16,6 +17,7 @@ export const parameters = {
 export const decorators = [
   (Story) => (
     <ThemeProvider theme={theme}>
+      <Global />
       <Story />
     </ThemeProvider>
   ),

src/components/Global.tsx

@@ -0,0 +1,24 @@
+/** @jsxImportSource theme-ui */
+import { ReactChild } from 'react'
+import { Global as _Global, css } from '@emotion/react'
+
+import { NoeDisplay, SourceCodePro } from '../css/fonts.js'
+
+interface GlobalProps {
+  styles: any
+}
+const fonts = css`
+  ${NoeDisplay};
+  ${SourceCodePro};
+`
+
+const Global = ({ styles }: GlobalProps) => {
+  const globalStyles = css`
+    ${fonts};
+    ${styles};
+  `
+
+  return <_Global {...globalStyles} />
+}
+
+export default Global

src/components/Text.tsx

@@ -2,17 +2,27 @@
 import { ReactChild } from 'react'
 import { Text as _Text, useThemeUI, get } from 'theme-ui'
 
-// TODO: Import Typography props as well?  Or merge sx object?
+// I can't find any type definitions for sx or "Theme-Aware Properties"
+// Is there a good way to pass down arbitrary style values?
 interface TextProps {
-  size?: "sm" | "md" | "lg",
-  children: ReactChild
+  kind?: "nav1" | "nav1b" | "nav2" | "body2" | "error1" | "technical1" | "h1" | "h3",
+  capitalize?: boolean,
+  children: ReactChild | string | undefined
 }
 
-const Text = ({ size = "md", children }: TextProps) => {
+const Text = ({ kind = "body2", children, capitalize }: TextProps) => {
   const context = useThemeUI()
-  const styles = get(context.theme, `text.${size}`)
+  const kinds = get(context.theme, `text.${kind}`)
 
-  return <_Text sx={styles}>{ children }</_Text>
+  const sx = {
+    ...kinds
+  }
+
+  if (capitalize) {
+    sx.textTransform = "capitalize"
+  }
+
+  return <_Text sx={{ ...sx }}>{ children }</_Text>
 }
 
 export default Text