= (args) => (
+
+)
+
+export const Default = Template.bind({})
+
+export const Large = Template.bind({})
+Large.args = {
+ size: "lg"
+}
+
+export const Medium = Template.bind({})
+Medium.args = {
+ size: "md"
+}
+
+export const Small = Template.bind({})
+Small.args = {
+ size: "sm"
+}
+
+export const Primary = Template.bind({})
+Primary.args = {
+ kind: "primary"
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+ kind: "secondary"
+}
\ No newline at end of file
diff --git a/src/stories/Text.stories.tsx b/src/stories/Text.stories.tsx
index 7ff3381..ff056be 100644
--- a/src/stories/Text.stories.tsx
+++ b/src/stories/Text.stories.tsx
@@ -1,25 +1,31 @@
-// TODO: replace with styled-components
-// import "../styles/global.scss"
+/** @jsxImportSource theme-ui */
+import { Story, Meta } from "@storybook/react"
-import React, { ReactElement } from "react"
+import Text, { TextProps } from "../components/Text"
-import Text from "../components/Text"
+export default {
+ title: "Text",
+ component: Text,
+ parameters: { controls: { include: ['size']}}
+} as Meta
-export const TextStory = (): ReactElement => (
- <>
-
- Large Text
-
-
- Medium Text (default)
-
-
- Small Text
-
-
+const Template: Story = (args) => (
+ Hello, World!
)
-export default {
- title: "Text",
- component: TextStory,
+export const Default = Template.bind({})
+
+export const Large = Template.bind({})
+Large.args = {
+ size: "lg"
+}
+
+export const Medium = Template.bind({})
+Medium.args = {
+ size: "md"
}
+
+export const Small = Template.bind({})
+Small.args = {
+ size: "sm"
+}
\ No newline at end of file
diff --git a/src/themes/base.js b/src/themes/base.js
new file mode 100644
index 0000000..37121bb
--- /dev/null
+++ b/src/themes/base.js
@@ -0,0 +1,12 @@
+export default {
+ fontSizes: [14, 18, 22],
+ lineHeights: ['14px', '18px', '22px'],
+ fonts: {
+ serif: "serif",
+ sansSerif: "sans-serif"
+ },
+ colors: {
+ primary: '#07c',
+ secondary: '#0fa',
+ }
+}
\ No newline at end of file
diff --git a/src/themes/button.js b/src/themes/button.js
new file mode 100644
index 0000000..515e1df
--- /dev/null
+++ b/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'
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/themes/text.js b/src/themes/text.js
new file mode 100644
index 0000000..8535697
--- /dev/null
+++ b/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
+ },
+ }
+}
\ No newline at end of file
diff --git a/src/themes/theme.ts b/src/themes/theme.ts
new file mode 100644
index 0000000..2d4a3aa
--- /dev/null
+++ b/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