How to use the styled-system.color.propTypes function in styled-system

props =>
    props.theme.font
      ? {
          fontFamily: props.theme.font,
        }
      : null,
  props => props.theme.css,
  width,
  height,
  color
)

Root.propTypes = {
  ...width.propTypes,
  ...height.propTypes,
  ...color.propTypes,
}

Root.defaultProps = {
  color: 'text',
  bg: 'background',
}

export default Root

const Root = styled.div`
  font-family: system-ui, sans-serif;
  line-height: 1.5;
`

const Box = styled.div`
  ${space}
  ${width}
  ${fontSize}
  ${color}
`
Box.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
}

const Text = styled.div`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${color}
`
Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...color.propTypes,
}

height: '8px',
  color: 'inherit',
  '&:focus': {
    outline: 'none',
    boxShadow: '0 0 0 1px'
  }
},
  props => ({
    opacity: props.active ? 0.5 : 0.125
  }),
  space,
  color
)
Dot.propTypes = {
  ...space.propTypes,
  ...color.propTypes
}
Dot.defaultProps = {
  m: 0,
  p: 1,
  color: 'text',
  bg: 'text',
}

export const Dots = ({
  index,
  length,
  onClick,
  ...props
}) =>
  
    {Array.from({ length }).map((n, i) => (

&:hover, &:focus, &:active {
    background: ${p => darken(0.05, themeGet(`colors.${p.bg}`, '#555')(p))};
    outline: none;
  }

  &[disabled]{
    background: #555;
    opacity:.5;

  }
`

Button.propTypes = {
  ...space.propTypes,
  ...color.propTypes,
  ...borderRadius.propTypes,
  sm: PropTypes.bool,
  lg: PropTypes.bool,
  block: PropTypes.bool
}

Button.defaultProps = {
  bg: 'primary',
  color: '#fff',
  borderRadius: '5px'
}

export const LinkButton = ({ to, ...props }) => {
  const { history } = useContext(RouterContext)
  const handleClick = (e) => {
    if (props.onClick) props.onClick(e)

${top};
  ${right};
  ${bottom};
  ${left};
  ${textStyle};
  ${colorStyle};
  ${buttonStyle};
`;

const Box = props => ;

Box.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
  ...fontFamily.propTypes,
  ...textAlign.propTypes,
  ...lineHeight.propTypes,
  ...fontWeight.propTypes,
  ...fontStyle.propTypes,
  ...letterSpacing.propTypes,
  ...display.propTypes,
  ...maxWidth.propTypes,
  ...minWidth.propTypes,
  ...height.propTypes,
  ...maxHeight.propTypes,
  ...minHeight.propTypes,
  ...verticalAlign.propTypes,
  ...alignItems.propTypes,
  ...justifyContent.propTypes,
  ...flexWrap.propTypes,

${width}
  ${color}
  ${flex}
  ${flexDirection}
  ${alignItems}
  ${alignSelf}
  ${justifyContent}
  ${justifySelf}
  ${flexWrap}
  display:flex;
`
Box.propTypes = {
  ...borderRadius.propTypes,
  ...space.propTypes,
  ...width.propTypes,
  ...color.propTypes,
  ...flex.propTypes,
  ...flexDirection.propTypes,
  ...alignItems.propTypes,
  ...alignSelf.propTypes,
  ...justifyContent.propTypes,
  ...justifySelf.propTypes,
  ...flexWrap.propTypes
}

const Root = styled.div`
  font-family: system-ui, sans-serif;
  line-height: 1.5;
`

const Box = styled.div`
  ${space}
  ${width}
  ${fontSize}
  ${color}
`
Box.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
}

const Text = styled.div`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${color}
`
Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...color.propTypes,
}

display: 'block',
  width: '100%',
  fontWeight: 'bold',
  textDecoration: 'none',
},
  props => ({
    '&.active': {
      color: themeGet('colors.blue', 'blue')(props)
    }
  })
, space, fontSize, color, css)

NavLink.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
}

NavLink.defaultProps = {
  px: 3,
  py: 1,
  fontSize: 1,
  color: 'inherit',
}

export const NavLinks = ({
  routes = [],
  order = [],
  filter,
  staticContext,
  ...props
}) =>

import styled from 'styled-components';
import {
  layout, color, space, position,
} from 'styled-system';

const Inline = styled.div`
  display: inline;
  ${layout}
  ${color}
  ${space}
  ${position}
`;

Inline.propTypes = {
  ...layout.propTypes,
  ...color.propTypes,
  ...space.propTypes,
  ...position.propTypes,
};

Inline.defaultProps = {
};

export default Inline;

import PropTypes from 'prop-types'
import { color } from 'styled-system'
import theme from './theme'

const Link = styled.a`
  cursor: pointer;
  text-decoration: none;
  ${color} &:hover {
    text-decoration: underline;
  }
`

Link.displayName = 'Link'

Link.propTypes = {
  ...color.propTypes
}

Link.defaultProps = {
  color: 'blue',
  theme: theme
}

export default Link