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

height: 16px;
    background-color: currentColor;
    border: 0;
    border-radius: ${({ theme }) => theme.pill};
    appearance: none;
  }

  ${space} ${width} ${color};
`

Slider.displayName = 'Input'

Slider.propTypes = {
  ...propTypes.space,
  ...propTypes.width,
  ...propTypes.color
}

Slider.defaultProps = {
  theme,
  width: 1,
  bg: 'smoke',
  color: 'primary'
}

export default Slider

height: 16px;
        width: 16px;
    }
    ${color} ${space} ${width};
    ${props =>
      props.disabled &&
      css`
        cursor: not-allowed;
        opacity: 0.25;
      `}
`

Slider.displayName = 'Input'

Slider.propTypes = {
  ...propTypes.color,
  ...propTypes.space,
  ...propTypes.width
}

Slider.defaultProps = {
  bg: 'smoke',
  color: 'primary',
  theme,
  w: 1
}

export default Slider

.rc-slider-handle {
      box-shadow: none;
      cursor: default;
    }
  }
`

Slider.defaultProps = {
  allowCross: false,
  color: 'blue',
  theme
}

Slider.propTypes = {
  ...propTypes.space,
  ...propTypes.color
}

export default Slider

import nano from 'nano-style'
import { fontSize, color, propTypes } from 'styled-system'

const Pre = nano('pre')({
  fontFamily: '"Roboto Mono", Menlo, monospace',
  margin: 0,
  padding: 0,
}, fontSize, color)

Pre.defaultProps = {
  f: 'inherit'
}

Pre.propTypes = {
  ...propTypes.fontSize,
  ...propTypes.color
}

export default Pre

Box.displayName = 'Box'
Box.header = Box.withComponent('header')
Box.main = Box.withComponent('main')
Box.article = Box.withComponent('article')
Box.section = Box.withComponent('section')
Box.footer = Box.withComponent('footer')

Box.defaultProps = {
  theme
}

Box.propTypes = {
  ...propTypes.textAlign,
  ...propTypes.fontSize,
  ...propTypes.space,
  ...propTypes.color
}

export default Box

fontWeight,
  maxWidth
)

Text.displayName = 'Text'

Text.propTypes = {
  caps: PropTypes.bool,
  regular: PropTypes.bool,
  bold: PropTypes.bool,
  maxWidth: PropTypes.number,
  ...propTypes.fontSize,
  ...propTypes.fontWeight,
  ...propTypes.textAlign,
  ...propTypes.space,
  ...propTypes.color
}

Text.defaultProps = {
  theme,
  m: 0
}

Text.span = Text.withComponent('span')
Text.p = Text.withComponent('p')
Text.s = Text.withComponent('s')

export default Text

import nano from 'nano-style'
import {
  space,
  width,
  fontSize,
  color,
  propTypes
} from 'styled-system'

const Box = nano('div')(space, width, fontSize, color)

Box.propTypes = {
  ...propTypes.space,
  ...propTypes.width,
  ...propTypes.fontSize,
  ...propTypes.color
}

Box.displayName = 'Box'

export default Box

} from 'styled-system'

const Text = nano('div')({},
  fontSize,
  fontWeight,
  textAlign,
  space,
  color
)

Text.propTypes = {
  ...propTypes.fontSize,
  ...propTypes.fontWeight,
  ...propTypes.textAlign,
  ...propTypes.space,
  ...propTypes.color,
}

export default Text

CSSHello.propTypes = {
  ...propTypes.space,
  ...propTypes.width,
  ...propTypes.color
}
*/

const Root = styled('div')({
  fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
  lineHeight: '1.5',
  padding: '32px'
}, color)

Root.propTypes = {
  ...propTypes.color
}

const Hello = styled('h1')({
  fontSize: '32px',
  fontWeight: 600,
}, space, width, color)

Hello.propTypes = {
  ...propTypes.space,
  ...propTypes.width,
  ...propTypes.color
}

const dec = s => ({ count: s.count - 1 })
const inc = s => ({ count: s.count + 1 })

&[type='textarea'] {
    resize: vertical;
  }

  ${fontSize} ${space} ${width} ${color};
`

Input.displayName = 'Input'

Input.propTypes = {
  id: PropTypes.string,
  ...propTypes.fontSize,
  ...propTypes.space,
  ...propTypes.width,
  ...propTypes.color
}

Input.defaultProps = {
  theme,
  width: 1,
  m: 0,
  py: 1,
  px: 2,
  fontSize: 2,
  color: 'inherit',
  bg: 'transparent'
}

export const InputSelect = Input.withComponent('select')
export const InputTextarea = Input.withComponent('textarea')