How to use CSS `currentColor` value?

[ng-hai]

• polished : ^1.8.1
• styled-components : ^2.2.0
• react : 16

Mixin/Helper/Shorthand you were using and how you were using it:

export const FlatButton = styled.button`
  &:hover {
    background: ${lighten(0.8, 'currentColor')};
  }
`

What you are seeing:

Uncaught Error: Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.

What you expected to see:

I want it returns a color similar to lighten(0.8, 'rgba(0, 0, 0, 0.87)')

Reproduction:

[bhough]

@ng-hai What value are you trying to represent with 'currentColor'. The reason you are getting that error is because the string 'currentColor' is not valid color value. Do you have a variable currentColor you are trying to use?

[ng-hai]

@bhough currentColor is a native CSS variable; you can use this value to indicate you want to use the value of color for other properties that accept a color value: borders, box shadows, outlines, or backgrounds.

Opera first supported this value in 2009, since then, Firefox 3.5+, Chrome 1+, and Safari 4+.

div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

In the example above, currentColor value is red.

[bhough]

@ng-hai Ah, the example above didn't have a color set in the cascade, so wasn't sure what you were representing with it.

Why I asked if it was supposed to be a variable is because right now polished does not have a good way to interact with CSS variables, since they are evaluated outside of the JavaScript.

For example, with currentColor our JavaScript code doesn't know what it's value is (as is the case with any CSS variable.) in order to grab that value then do the color transform on it. CSS variables are evaluated once the browser actually interprets the CSS, which is after polished methods are evaluated.

There are ways to map CSS variables to props for polished to use, but not sure there is much point to doing it with currentColor.