Theme-UI building with Text and Buttons

.storybook/main.js

@@ -5,6 +5,6 @@ module.exports = {
   ],
   "addons": [
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
+    "@storybook/addon-essentials",
   ]
-}
+}

.storybook/preview.js

@@ -1,7 +1,7 @@
-import React from "react"
-import { ThemeProvider } from 'styled-components'
+/** @jsxImportSource theme-ui */
+import { ThemeProvider } from 'theme-ui'
 
-import base from "../src/themes/base"
+import theme from "../src/themes/theme"
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -15,7 +15,7 @@ export const parameters = {
 
 export const decorators = [
   (Story) => (
-    <ThemeProvider theme={base}>
+    <ThemeProvider theme={theme}>
       <Story />
     </ThemeProvider>
   ),

package.json

@@ -7,12 +7,12 @@
     "url": "https://github.com/saddle-finance/saddle-design-system"
   },
   "dependencies": {
+    "@theme-ui/presets": "^0.11.3",
     "@types/react": "^17.0.30",
-    "@types/styled-system": "^5.1.13",
+    "@types/theme-ui": "^0.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1",
-    "styled-system": "^5.1.5"
+    "theme-ui": "^0.11.3"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
@@ -22,8 +22,7 @@
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
     "@storybook/react": "^6.3.12",
-    "@types/node": "^16.11.1",
-    "@types/styled-components": "^5.1.15",
+    "@types/node": "^16.11.4",
     "babel-loader": "^8.2.2",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^8.3.0",
@@ -45,9 +44,12 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
+  "resolutions": {
+    "**/@emotion/styled": "^11.0.0"
+  },
   "scripts": {
-    "storybook": "start-storybook -p 6008 -s public --no-dll",
-    "build-storybook": "build-storybook -s public --no-dll",
+    "storybook": "start-storybook -p 6008 -s public --no-dll --docs",
+    "build-storybook": "build-storybook -s public --no-dll --docs",
     "build": "rollup -c"
   },
   "files": [

src/components/Button.tsx

@@ -1,44 +1,22 @@
-import styled from "styled-components"
-import { variant, system, compose } from "styled-system"
+/** @jsxImportSource theme-ui */
+import { ReactChild } from 'react'
+import { Button as _Button, useThemeUI, get } from 'theme-ui'
 
 type Kind = "primary" | "secondary"
 type Size = "sm" | "md" | "lg"
 interface ButtonProps {
   kind?: Kind,
-  size?: Size
+  size?: Size,
+  children: ReactChild
 }
 
-const kinds = variant({
-  prop: "kind",
-  variants: {
-    primary: {
-      bg: 'primary'
-    },
-    secondary: {
-      bg: 'secondary'
-    }
-  }
-})
+const Button = ({ size, kind, children }: ButtonProps) => {
+  const context = useThemeUI()
+  const sizes = get(context.theme, `button.${size}`)
+  const kinds = get(context.theme, `button.${kind}`)
 
-const sizes = variant({
-  prop: "size",
-  variants: {
-    sm: {
-      fontSize: 0
-    },
-    md: {
-      fontSize: 1
-    },
-    lg: {
-      fontSize: 2
-    },
-  }
-})
-
-const Button = styled.button<ButtonProps>(
-  kinds,
-  sizes
-)
+  return <_Button sx={{ ...sizes, ...kinds }}>{ children }</_Button>
+}
 
 Button.defaultProps = {
   kind: "primary",

src/components/Text.tsx

@@ -1,49 +1,23 @@
-import styled from "styled-components"
-import { variant, compose, typography, TypographyProps } from "styled-system"
+/** @jsxImportSource theme-ui */
+import { ReactChild } from 'react'
+import { Text as _Text, useThemeUI, get } from 'theme-ui'
 
-// NB: We can include all Typography props if we prefer
-// interface TextProps extends TypographyProps {
-//   size?: "sm" | "md" | "lg"
-// }
+// TODO: Import Typography props as well?  Or merge sx object?
 interface TextProps {
-  size?: "sm" | "md" | "lg"
+  size?: "sm" | "md" | "lg",
+  children: ReactChild
 }
 
-const sizes = variant({
-  prop: "size",
-  variants: {
-    sm: {
-      fontSize: 0,
-      lineHeight: 0
-    },
-    md: {
-      fontSize: 1,
-      lineHeight: 1
-    },
-    lg: {
-      fontSize: 2,
-      lineHeight: 2
-    },
-  }
-})
+const Text = ({ size, children }: TextProps) => {
+  const context = useThemeUI()
+  const styles = get(context.theme, `text.${size}`)
 
-// Compose all typography styles w/ our variants if we prefer
-// const textStyles = compose(typography, sizes)
-// const Text = styled.span<TextProps>(textStyles)
-const Text = styled.span<TextProps>(sizes)
+  return <_Text sx={styles}>{ children }</_Text>
+}
 
 Text.defaultProps = {
   size: "md"
 }
 
-// NB: OR we can also forgo the "variants" like so:
-// const Text = styled.span<TypographyProps>`
-//   ${typography}
-// `
-// Text.defaultProps = {
-//   fontFamily: "sansSerif",
-//   fontSize: 1
-// }
-
 export default Text
 export type { TextProps }

src/index.ts

@@ -1,3 +1,4 @@
-import Text from "./components/Text"
+// import Text from "./components/Text"
+import { Text } from "theme-ui"
 
 export { Text }

src/stories/Button.stories.tsx

@@ -1,7 +1,6 @@
-import React from "react"
+/** @jsxImportSource theme-ui */
 import { Story, Meta } from "@storybook/react"
 
-import base from "../themes/base"
 import Button, { ButtonProps } from "../components/Button"
 
 export default {

src/stories/Text.stories.tsx

@@ -1,7 +1,6 @@
-import React from "react"
+/** @jsxImportSource theme-ui */
 import { Story, Meta } from "@storybook/react"
 
-import base from "../themes/base"
 import Text, { TextProps } from "../components/Text"
 
 export default {

src/themes/button.js

@@ -0,0 +1,21 @@
+export default {
+  button: {
+    // size
+    sm: {
+      fontSize: 0
+    },
+    md: {
+      fontSize: 1
+    },
+    lg: {
+      fontSize: 2
+    },
+    // kind
+    primary: {
+      bg: 'primary'
+    },
+    secondary: {
+      bg: 'secondary'
+    }
+  }
+}

src/themes/text.js

@@ -0,0 +1,16 @@
+export default {
+  text: {
+    sm: {
+      fontSize: 0,
+      lineHeight: 0
+    },
+    md: {
+      fontSize: 1,
+      lineHeight: 1
+    },
+    lg: {
+      fontSize: 2,
+      lineHeight: 2
+    },
+  }
+}

src/themes/theme.ts

@@ -0,0 +1,13 @@
+import { Theme } from 'theme-ui'
+
+import base from './base'
+import text from './text'
+import button from './button'
+
+const theme: Theme = {
+  ...base,
+  ...text,
+  ...button
+}
+
+export default theme