Flexbox tokens

src/components/Box/box.stories.tsx

@@ -10,7 +10,7 @@ export default {
 export const basic = () => <Box>Hello Button</Box>
 
 export const asH2 = () => (
-  <Box as="h2" display="flex" direction="row--r">
+  <Box as="h2" display="flex" direction="row" justify="center">
     <div style={{ width: 100, height: 100, backgroundColor: 'black' }}></div>
     <div style={{ width: 100, height: 100, backgroundColor: 'blue' }}></div>
     <div style={{ width: 100, height: 100, backgroundColor: 'green' }}></div>

src/tokenSystem/flexbox.ts

@@ -12,8 +12,81 @@ const direction = {
   },
 }
 
+const wrap = {
+  values: {
+    yes: 'wrap',
+    reverse: 'wrap-reverse',
+    no: 'nowrap',
+  },
+  propName: {
+    flexWrap: 'wrap',
+  },
+}
+
+const items = {
+  values: {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    baseline: 'baseline',
+    stretch: 'stretch',
+  },
+  propName: {
+    alignItems: 'items',
+    alignSelf: 'self',
+  },
+}
+
+const justify = {
+  values: {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    between: 'space-between',
+    around: 'space-around',
+  },
+  propName: {
+    justifyContent: 'justify',
+  },
+}
+
+const content = {
+  values: {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    between: 'space-between',
+    around: 'space-around',
+    stretch: 'stretch',
+  },
+  propName: {
+    alignContent: 'content',
+  },
+}
+
+const order = {
+  values: {
+    first: '0',
+    second: '1',
+    third: '2',
+    fourth: '3',
+    fith: '4',
+    last: '99999999',
+  },
+  propName: {
+    order: 'order',
+  },
+}
+
 export type FlexSystem = Partial<{
   direction: keyof typeof direction.values
+  wrap: keyof typeof wrap.values
+  items: keyof typeof items.values
+  justify: keyof typeof justify.values
+  content: keyof typeof content.values
+  order: keyof typeof order.values
 }>
 
-export default createTokens(direction)
+export default [direction, wrap, items, justify, content, order].map(
+  createTokens
+)