define a few meta components in storybook (#55)

packages/design-system/src/MetaBox.tsx

@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/core';
+import React from 'react';
+
+export type MetaBoxProps = {
+  title: string;
+  children: React.ReactNode;
+};
+
+export const MetaBox: React.FC<MetaBoxProps> = ({ children, title }) => (
+  <Box>
+    <Box bg="purpleBoxLight" p={4}>
+      <Text
+        fontFamily="mono"
+        fontSize="sm"
+        fontWeight="bold"
+        color="blueLight"
+        as="div"
+      >
+        {title}
+      </Text>
+    </Box>
+    <Box bg="purpleBoxDark" p={6}>
+      {children}
+    </Box>
+  </Box>
+);

packages/design-system/src/MetaTag.tsx

@@ -0,0 +1,14 @@
+import { Tag, TagProps } from '@chakra-ui/core';
+import React from 'react';
+
+export const MetaTag: React.FC<TagProps> = ({ children, ...props }) => (
+  <Tag
+    fontFamily="body"
+    fontSize="sm"
+    backgroundColor="purpleTag"
+    color="white"
+    {...props}
+  >
+    {children}
+  </Tag>
+);

packages/design-system/src/index.ts

@@ -1,26 +1,26 @@
 export {
-  ChakraProvider,
-  CSSReset,
-  Heading,
-  Box,
-  Image,
-  Text,
   Avatar,
+  Box,
   Button,
   ButtonGroup,
-  Grid,
-  SimpleGrid,
-  Flex,
+  CSSReset,
+  ChakraProvider,
   Divider,
+  Flex,
+  Grid,
+  Heading,
   Icon,
   IconButton,
+  Image,
+  Input,
   Link,
   List,
-  Input,
   Select,
+  SimpleGrid,
   Skeleton,
   Spinner,
   Stack,
+  Text,
   useTheme,
   useToast,
 } from '@chakra-ui/core';
@@ -30,3 +30,5 @@ export { Icon3box } from './icons';
 export { EmailIcon } from '@chakra-ui/icons';
 export { MetaHeading } from './MetaHeading';
 export { MetaButton } from './MetaButton';
+export { MetaBox } from './MetaBox';
+export { MetaTag } from './MetaTag';

packages/design-system/src/theme.ts

@@ -3,6 +3,12 @@ import chakraTheme, { Theme as ChakraTheme } from '@chakra-ui/theme';
 interface MetaColors {
   offwhite: string;
   blue02: string;
+  dark: string;
+  purpleBoxDark: string;
+  purpleBoxLight: string;
+  purpleTag: string;
+  blueLight: string;
+  cyanText: string;
 }
 
 interface MetaTheme {
@@ -17,7 +23,7 @@ export const theme: Theme = {
     ...chakraTheme.styles,
     global: {
       ...chakraTheme.styles.global,
-      background: 'black',
+      background: '#1b0d2a',
       color: 'white',
     },
   },
@@ -35,8 +41,6 @@ export const theme: Theme = {
       800: '#00494b',
       900: '#001a1b',
     },
-    offwhite: '#F6F8F9',
-    blue02: 'rgba(79, 105, 205, 0.2)',
     purple: {
       50: '#eee7ff',
       100: '#c8bafc',
@@ -49,10 +53,18 @@ export const theme: Theme = {
       800: '#150747',
       900: '#07021d',
     },
+    offwhite: '#F6F8F9',
+    blue02: 'rgba(79, 105, 205, 0.2)',
+    dark: '#1B0D2A',
+    purpleBoxDark: '#261943',
+    purpleBoxLight: '#392373',
+    purpleTag: '#40347C',
+    blueLight: '#A5B9F6',
+    cyanText: '#79F8FB',
   },
   fonts: {
     body: '"IBM Plex Sans", sans-serif',
     mono: '"IBM Plex Mono", monospace',
     heading: '"Press Start 2P", sans-serif',
-  }
+  },
 };