withBaseStyles(
  baseStyles: Array<string> or string
): HigherOrderComponent

const ButtonLink = compose('f6 link dim br1 ph3 pv2 mb2 dib white bg-black')('a');
 
<ButtonLink>Link Text</ButtonLink>

withSpacing(): HigherOrderComponent

const Div = withSpacing('div');
 
<Div
  mh={3} mv={{ l: 4, m: 3, ns: 2, all: 1 }}
  nl={{ l: 3, m: 2, ns: 4, all: 1 }}
  pr={4} pl={4} pv={2}
  className="myClass my-other-class"
/>

withBackgroundColor(
  colors: Array<string>
): HigherOrderComponent

const clrs = ['red', 'green', 'blue', 'washed-yellow'];
const Div = withBackgroundColor(clrs)('div');
 
<Div
  bg="washed-yellow"
  className="myClass my-other-class"
/>

withColor(
  colors: Array<string>
): HigherOrderComponent

const clrs = ['medium-gray', 'red', 'green', 'blue'];
const Text = withColor(clrs)('p');
 
<Text
  color="medium-gray"
  className="myClass my-other-class"
/>

withSize(): HigherOrderComponent

const Div = withSize('div');;
 
<Div
  w={{ l: 5, m: 4, ns: 'third', all: 3 }}
  h={5}
  className="myClass my-other-class"
/>

withTypography(): HigherOrderComponent

const Text = withTypography('p');;
 
<Text
  f={{ l: 4, m: 3, ns: 2, all: 1 }}
  lh="copy"
  className="myClass my-other-class"
/>

withBorder(
  colors: Array<string>
): HigherOrderComponent

const clrs = ['medium-gray', 'red', 'green', 'blue'];
const Div = withBorder(clrs)('div');
 
<Div
  ba="gray" bw={2}
  radius={{ l: 1, m: 2, ns: 100, all: 4 }}
  rounded={{ l: 'bottom', m: 'top', ns: 'right', all: 'left' }}
  className="myClass my-other-class"
/>

withDefaults(
  defaultsForProps: Object
): HigherOrderComponent

const Title = compose(
  withTypography,
  withDefaults({ f: 1, lh: 'title' }),
)('h1');
 
// Will receive f as 1 and lh as 'title'
<Title className="myClass my-other-class" />
// Will receive f as 2 and lh as 'title'
<Title f={2} className="myClass my-other-class" />

withMeasured(
  colors: Array<string>
): HigherOrderComponent

const clrs = ['white', 'red', 'green', 'blue'];
export const Block = withMeasured(clrs)('div');
 
<Block
  f={{ l: 4, m: 3, ns: 2, all: 1 }}
  lh="copy"
  mh={3} mv={2} mt={4} nl={3}
  pa={{ l: 4, m: 4, ns: 3, all: 2 }}
  bg="blue"
  color="white"
  w={5}
  h={{ l: 50, m: 4, ns: 3, all: 2 }}
  bb="gray" bw={{ l: 1, m: 2, ns: 3, all: 4 }}
  radius="pill"
  rounded="top"
/>

import { compose } from 'tachyons-measured';

<withSpacing>
  <withBackgroundColor>
    <withColor>
      <withSize>
        <withBorder>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          <div>
        <withBorder>
      <withSize>
    <withColor>
  <withBackgroundColor>
</withSpacing>

<withSpacing(withBackgroundColor(withColor(withSize(withBorder(div)))))>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</withSpacing(withBackgroundColor(withColor(withSize(withBorder(div)))))>

export const Block = withMeasured(clrs)('div');
export const Article = withMeasured(clrs)('article');
export const Heading = withMeasured(clrs)('h1');
 
export const Text = compose(
  withDefaults({ f: 5, lh: 'copy' }),
  withMeasured(clrs),
)('p');
 
export const Media = compose(
  withBorder(clrs),
  withSize,
  withSpacing,
  withBaseStyles('db'),
)('img');

export const ProductCard = withDefaults({
  ba: 'black-10',
  radius: 2,
  bg: 'white',
  color: 'dark-gray',
})(Article);

export const CatProductCard = props => (
  <ProductCard {...props}>
 
    <Media
      src="http://placekitten.com/g/600/300"
      w={100}
      radius={2} rounded="top"
      alt="kitten looking menacing."
    />
 
    <Block pa={2} ph={{ ns: 3 }} pb={{ ns: 3 }}>
 
      <Block w={100} mt={1} className="flex items-center">
        <Heading
          f={{ all: 5, ns: 4 }} mv={0}
          className="flex-auto"
        >
          Cat
        </Heading>
        <Heading f={5} mv={0}>$1,000</Heading>
      </Block>
 
      <Text
        mt={2}
        f={6} lh="copy" color="mid-gray"
        className="measure"
      >
        If it fits, i sits burrow under covers. Destroy couch leave hair
        everywhere, and touch water with paw then recoil in horror.
      </Text>
 
    </Block>
  </ProductCard>
);

<CatProductCard
  w={{ all: 100, m: 5, l: 5 }}
  className="center"
/>

const Button = ({ className, ...props}) => {
  const styles = classNames('f6', 'link', 'dim', 'br1', 'bn',
    'ph3', 'pv2', 'mb2', 'dib', 'bg-green', 'white', className);
 
  return (
    <a className={styles} {...props} />
  );
};

// Will render with green background and white text
<Button className="mr3">Button Text</Button>
// Will render with blue background and white text
<Button className="bg-blue mr3">Button Text</Button>
// Will render with green background and white text
<Button className="bg-red">Button Text</Button>

const Button = ({
  bgColor = 'bg-green',
  color = 'white',
  className,
  ...props
}) => {
  const styles = classNames('f6', 'link', 'dim', 'br1', 'bn',
    'ph3', 'pv2', 'mb2', 'dib', bgColor, color, className);
 
  return (
    <a className={styles} {...props} />
  );
};