Added Card component

src/colors.js

@@ -3,3 +3,4 @@ export const black = '#000000';
 export const white = '#FFFFFF';
 export const darkGrey = '#999999';
 export const lightGrey = '#EBEBEB';
+export const cardGrey = '#F8F8F8';

src/components/Card/CardContent/README.md

@@ -0,0 +1,5 @@
+```js
+<CardContent>
+  This package contains a <Code>LinePath</Code> component that can do stuff. This is an example description.
+</CardContent>
+```

src/components/Card/CardContent/index.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+import withTheme from '../../ThemeContext/withTheme';
+
+const CardContent = styled('div')({
+  lineHeight: 1.8
+}, ({ theme }) => ({
+  fontFamily: theme.fontFamily
+}));
+
+CardContent.propTypes = {
+  theme: PropTypes.object.isRequired
+};
+
+export default withTheme(CardContent);

src/components/Card/CardTitle/README.md

@@ -0,0 +1,3 @@
+```js
+<CardTitle>@vx/annotation</CardTitle>
+```

src/components/Card/CardTitle/index.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+import withTheme from '../../ThemeContext/withTheme';
+
+const CardTitle = styled('h3')({
+  marginTop: 0,
+  marginBottom: 12
+}, ({ theme }) => ({
+  color: theme.primaryColor,
+  fontFamily: theme.fontFamily
+}));
+
+CardTitle.propTypes = {
+  theme: PropTypes.object.isRequired
+};
+
+export default withTheme(CardTitle);

src/components/Card/README.md

@@ -0,0 +1,10 @@
+```js
+<div style={{ width: 240 }}>
+  <Card>
+    <Card.Title>@vx/annotation</Card.Title>
+    <Card.Content>
+      This package contains a <Code>LinePath</Code> component that can do stuff. This is an example description.
+    </Card.Content>
+  </Card>
+</div>
+```

src/components/Card/index.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+import { black, cardGrey } from '../../colors';
+import CardTitle from './CardTitle';
+import CardContent from './CardContent';
+import withTheme from '../ThemeContext/withTheme';
+
+const Card = styled('article')({
+  padding: 12,
+  color: black,
+  backgroundColor: cardGrey
+}, ({ theme }) => ({
+  fontFamily: theme.fontFamily
+}));
+
+Card.propTypes = {
+  theme: PropTypes.object.isRequired
+};
+
+const ThemedCard = withTheme(Card);
+
+ThemedCard.Title = CardTitle;
+ThemedCard.Content = CardContent;
+
+export default ThemedCard;

src/components/Code/index.js

@@ -1,9 +1,10 @@
 import styled from 'react-emotion';
-import { lightGrey } from '../../colors';
+import { black, lightGrey } from '../../colors';
 
 const Code = styled('code')({
   padding: `3.2px 4.8px`,
   lineHeight: 1.8,
+  color: black,
   backgroundColor: lightGrey,
   fontSize: 14,
   fontFamily: '"Menlo", monospace',