imbric-theme 0.1.1

package/tokens/Token/components/FontFamily.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Helper from '../Helper'
+
+import styles from '../Token.module.css'
+
+const FontFamily = ({ label, value, children }) => {
+  return (
+    <Helper label={label} value={value}>
+      <div className={styles['font-family']} style={{ fontFamily: value }}>
+        {children}
+      </div>
+    </Helper>
+  )
+}
+
+FontFamily.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.arrayOf(PropTypes.string).isRequired,
+  children: PropTypes.string.isRequired,
+}
+
+export default FontFamily

package/tokens/Token/components/FontFamily.stories.js

@@ -0,0 +1,32 @@
+import Token from '..'
+import { choices } from '../..'
+
+import { getTemplate, getListTemplate } from '../../../helpers/storybook'
+import { getTokenItems } from '../helpers'
+
+const Template = getTemplate(Token.FontFamily)
+const ListTemplate = getListTemplate(Token.FontFamily)
+
+export default {
+  title: 'Tokens/FontFamily',
+  component: Token.FontFamily,
+  args: {
+    children:
+      "Depend noticed bones Edge disturbing flesh heard cream. Morninged facial judgment Hobbit fortress. Camp flatten buy dagger Sit. Leagues sweeter 1400 mean friend unlost Déagol trade stuffing? Smithy's jiffy merely treacherous cozy interesting ask seat Thror's.",
+  },
+  argTypes: {
+    value: { control: null },
+    label: { control: null },
+  },
+}
+
+const getItems = getTokenItems(choices.fontFamily, 'fontFamily')
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'var(--font-family-sans)',
+  value: choices.fontFamily.sans,
+}
+
+export const Types = ListTemplate.bind({})
+Types.args = { items: getItems() }

package/tokens/Token/components/FontSize.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Helper from '../Helper'
+
+import styles from '../Token.module.css'
+
+const FontSize = ({ label, value, children }) => {
+  return (
+    <Helper label={label} value={value}>
+      <div className={styles['font-size']} style={{ fontSize: value }}>
+        {children}
+      </div>
+    </Helper>
+  )
+}
+
+FontSize.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  children: PropTypes.string.isRequired,
+}
+
+export default FontSize

package/tokens/Token/components/FontSize.stories.js

@@ -0,0 +1,31 @@
+import Token from '..'
+import { choices } from '../..'
+
+import { getTemplate, getListTemplate } from '../../../helpers/storybook'
+import { getTokenItems } from '../helpers'
+
+const Template = getTemplate(Token.FontSize)
+const ListTemplate = getListTemplate(Token.FontSize)
+
+export default {
+  title: 'Tokens/FontSize',
+  component: Token.FontSize,
+  args: {
+    children: 'Woodland lasted crowned holiday pirate brother wrath.',
+  },
+  argTypes: {
+    value: { control: null },
+    label: { control: null },
+  },
+}
+
+const getItems = getTokenItems(choices.fontSize, 'fontSize')
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'var(--font-size-base)',
+  value: choices.fontSize.base,
+}
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: getItems() }

package/tokens/Token/components/FontWeight.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Helper from '../Helper'
+
+import styles from '../Token.module.css'
+
+const FontWeight = ({ label, value, children }) => {
+  return (
+    <Helper label={label} value={value}>
+      <div className={styles['font-weight']} style={{ fontWeight: value }}>
+        {children}
+      </div>
+    </Helper>
+  )
+}
+
+FontWeight.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.number.isRequired,
+  children: PropTypes.string.isRequired,
+}
+
+export default FontWeight

package/tokens/Token/components/FontWeight.stories.js

@@ -0,0 +1,31 @@
+import Token from '..'
+import { choices } from '../..'
+
+import { getTemplate, getListTemplate } from '../../../helpers/storybook'
+import { getTokenItems } from '../helpers'
+
+const Template = getTemplate(Token.FontWeight)
+const ListTemplate = getListTemplate(Token.FontWeight)
+
+export default {
+  title: 'Tokens/FontWeight',
+  component: Token.FontWeight,
+  args: {
+    children: 'Cheap doors deny rune Mithrandir spawning brown dishes?',
+  },
+  argTypes: {
+    value: { control: null },
+    label: { control: null },
+  },
+}
+
+const getItems = getTokenItems(choices.fontWeight, 'fontWeight')
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'var(--font-weight-normal)',
+  value: choices.fontWeight.normal,
+}
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: getItems() }

package/tokens/Token/components/Spacing.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Spacer from '../../../layout/Spacer'
+import Helper from '../Helper'
+
+import styles from '../Token.module.css'
+
+const Spacing = ({ label, value }) => {
+  return (
+    <Helper label={label} value={value}>
+      <div className={styles.spacer}>
+        <Spacer size={value} isPlayground />
+      </div>
+    </Helper>
+  )
+}
+
+Spacing.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.number.isRequired,
+}
+
+export default Spacing

package/tokens/Token/components/Spacing.stories.js

@@ -0,0 +1,29 @@
+import Token from '..'
+import { choices } from '../..'
+
+import { getTemplate, getListTemplate } from '../../../helpers/storybook'
+import { getTokenItems } from '../helpers'
+
+const Template = getTemplate(Token.Spacing)
+const ListTemplate = getListTemplate(Token.Spacing)
+
+export default {
+  title: 'Tokens/Spacing',
+  component: Token.Spacing,
+  argTypes: {
+    value: { control: null },
+    label: { control: null },
+  },
+  parameters: { __sb: { fd: 'row' } },
+}
+
+const getItems = getTokenItems(choices.spacing, 'spacing')
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'var(--spacing-none)',
+  value: choices.spacing.none,
+}
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: getItems() }