message: tidy up colors demo
diff: import React from 'react'
  -import {Box, theme} from '../../src'
  +import {Box, FlexContainer, theme} from '../../src'
  import {Swatch} from '../doc-components'
  const ColorsExample = {
  name: 'Colors',
  element: (
  - <div>
  + <Box>
  + <Box mb={4}>
  {['gray', 'blue', 'green', 'purple', 'yellow', 'orange'].map(hue => (
  - <div className="d-flex" key={hue}>
  + <FlexContainer key={hue}>
  {theme.colors[hue].map((color, j) => <Swatch name={hue} index={j} key={color} color={color} />)}
  - </div>
  + </FlexContainer>
  ))}
  - <div className="d-flex">
  + </Box>
  + <FlexContainer>
  <Box bg="blue.5" p={4} m={1} />
  <Box bg="green.5" p={4} m={1} />
  <Box bg="purple.5" p={4} m={1} />
  @@ -23,8 +25,8 @@ const ColorsExample = {
  <Box bg="blue.0" p={4} m={1} />
  <Box bg="purple.0" p={4} m={1} />
  <Box bg="red.0" p={4} m={1} />
  - </div>
  - </div>
  + </FlexContainer>
  + </Box>
  )
  }
  