title: styled-components, polished and styledProps - darken() throwing error
body: <p>I have just started using styled-components, polished and styledProps. </p>
  
  <p>I am attempting to use styledProps to style components as follows …</p>
  
  <pre><code>&lt;Button primary&gt;Primary Button&lt;/Button&gt;
  &lt;Button danger&gt;Danger Button&lt;/Button&gt;
  &lt;Button success&gt;Success Button&lt;/Button&gt;
  &lt;Button info&gt;Info Button&lt;/Button&gt;
  </code></pre>
  
  <p>In my “styled.button” I am trying to do the following ...</p>
  
  <pre><code>&amp;:hover, &amp;:focus {
     background-color: ${darken(0.20, styledProps(background))};
  }
  </code></pre>
  
  <p>... so that the hover and focus states can use the same colors, but just change the shading. </p>
  
  <p>It looks like darken() will only accept a color string and won’t receive the color via the styledProps() method based on the error below. </p>
  
  <p>Any idea how I can get this to work?</p>
  
  <p>Thank you!
  Chris Simeone</p>
  
  <p>#styled-components  #polished  #styled-props</p>
  
  <hr>
  
  <pre><code>Error: Passed an incorrect argument to a color function, 
  please pass a string representation of a color.
  ▼ 4 stack frames were expanded.
  parseToRgb
  node_modules/polished/dist/polished.es.js:1433
  parseToHsl
  node_modules/polished/dist/polished.es.js:1558
  darken
  node_modules/polished/dist/polished.es.js:1935
  fn
  node_modules/polished/dist/polished.es.js:1827
  ▲ 4 stack frames were expanded.
  ./src/Button.js
  src/Button.js:6
    3 | import { darken } from 'polished'
    4 | import { theme, background, color, size } from "./Themes";
    5 | 
  &gt; 6 | export default styled.button`
    7 |   border-radius: 5px;
    8 |   border: 2px solid ;
    9 |   cursor: pointer;View compiled
  ▼ 12 stack frames were expanded.
  __webpack_require__
  /Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:678
  fn
  /Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:88
  ./src/App.js
  http://localhost:3006/static/js/bundle.js:42399:66
  __webpack_require__
  /Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:678
  fn
  /Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:88
  ./src/index.js
  http://localhost:3006/static/js/bundle.js:42608:63
  __webpack_require__
  /Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:678
  fn
  /Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:88
  0
  http://localhost:3006/static/js/bundle.js:42745:18
  __webpack_require__
  /Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:678
  ./node_modules/ansi-regex/index.js.module.exports
  /Users/chris.simeone/projects/react/styledprops/webpack/bootstrap e0bd2a9e7f61dc49363b:724
  (anonymous function)
  http://localhost:3006/static/js/bundle.js:728:10
  ▲ 12 stack frames were expanded.
  This screen is visible only in development. It will not appear if the app crashes in production.
  Open your browser’s developer console to further inspect this error.
  </code></pre>