V3 Roadmap

[bhough]

• [x] toColorString performance improvements (likely based on #187).
• [x] update readableColor to return a custom color instead of just black or white.
• [x] color modules safely handle the transparent keyword.
• [x] linear gradient mixin.
• [X] modularScale accepts rem for its base value.
• [x] Math helper for doing operations on values with units.
• [x] Improved errors/validation in development, and stripped with links in production.
• [x] Mark getUnitAndValue for deprecation.
• [x] Update stripUnit to optionally return the unit that was removed.
• [x] Deprecate selection mixin.
• [x] Deprecate placeholder mixin.

final

[TrySound]

sideEffects is not used by rollup. Pure annotations are used by uglify.

[brunolemos]

Maybe re-add the contrast ratio function to the roadmap? I don't see it on the list.

206 #302 #305 #394

[bhough]

@brunolemos https://github.com/styled-components/polished/blob/version-3/src/color/readableColor.js

[brunolemos]

https://github.com/styled-components/polished/blob/version-3/src/color/readableColor.js

Hm, that's more like a sugar for one specific use case, but it's not really a getContrastRatio(colorA, colorB) function.

There seems to be a standard for this, the ratio is a number (I've seen between 1 and 21 but not sure) and there's level AA or AAA (AAA requires a higher contrast ratio to "pass").

WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Source: https://webaim.org/resources/contrastchecker/

Check https://contrast-ratio.com/ for interactive demo. Source code: https://github.com/LeaVerou/contrast-ratio (seems bigger than necessary though)

Or check the chrome element style tool, it works the same way.

See this line at the graph, the values below the line have good contrast ratio, the ones above are bad for a white background:

https://developers.google.com/web/fundamentals/accessibility/accessible-styles#color_and_contrast

[bhough]

Understand the use case @brunolemos. Mostly pointing out that most of the issues/PRs you pointed to were resolved by the modifications to readableColor. getContrast was not something we have ever had and would be a new feature. Happy to accept it as a feature request.

[brunolemos]

Ah ok. Seems to be #394 then.