import * as React from 'react';
import {Box} from '@workday/canvas-kit-react/layout';

const baseStyles = {
  color: 'blackPepper300',
  display: 'inline-block',
  margin: 'xxs',
  minHeight: 'xl',
  minWidth: '8rem',
  padding: 'xs',
};

export default () => (
  <>
    <Box
      borderRadius="m"
      border="solid 4px"
      borderColor="cinnamon300"
      {...baseStyles}
    >
      Cinnamon 300
    </Box>
    <Box
      borderRadius="m"
      border="solid 4px"
      borderColor="sourLemon300"
      {...baseStyles}
    >
      Sour Lemon 300
    </Box>
    <Box
      borderRadius="m"
      border="solid 4px"
      borderColor="blueberry300"
      {...baseStyles}
    >
      Blueberry 300
    </Box>
  </>
);
