Comments (4)
@majkl-zumberi I was running into this issue as well, you can pass in false
as the fourth parameter to prevent the result from being strict. I also just noticed this issue is from May 4th so my service may be of no use. lol
from polished.
This is still and issue and disabling the strict mode will not help necessarily. I think if returnIfLightColor
and returnIfDarkColor
are provided, they should be used with preference if any of them has sufficient contrast instead of falling back to the default colors.
I have found this use case:
readableColor('#DB335D', '#222', '#fff')
// output: #000
// strict = false output: #222
// expected: #fff
I have not looked at the implementation yet, I see that falling back to #000
has better contrast ratio than #fff
but #fff
does pass AA and it's a preferred option. Disabling strict
will end up still selecting a dark color #222
which does not pass AA.
from polished.
Hmm after looking at the implementation, I guess I'd like this behavior but not sure if that wouldn't cause some unintended side effects.
const isColorLight = getLuminance(color) > 0.179
const preferredReturnColor = isColorLight ? returnIfLightColor : returnIfDarkColor
const preferredFallbackReturnColor = isColorLight ? returnIfDarkColor : returnIfLightColor
if (!strict || getContrast(color, preferredReturnColor) >= 4.5) {
return preferredReturnColor
// [NEW]: try if the other preferred color would not pass the contrast check
} else if (!strict || getContrast(color, preferredFallbackReturnColor) >= 4.5) {
return preferredFallbackReturnColor
}
return isColorLight ? defaultReturnIfLightColor : defaultReturnIfDarkColor
from polished.
I'm running into this issue on Redocly, which uses Polished. No matter what I do, I can't get the search background to #FFFFFF and now I have a problem where I've had to choose a lighter grey for the text (#999999) which allows the search results to show up, but it looks washed out on the white background I have everywhere else, and weird when there's other text on the page that's black (#000000).
I've tried reverting to an older version of Polished, but that's not working either. This was working before. Not sure what changed, but I'd love it if they'd put it back the way it was.
from polished.
Related Issues (20)
- [Feature request] Rgba to rgb conversion fuction HOT 1
- Add unit selection to between mixin HOT 1
- Lighten red color dont work HOT 1
- `getValueAndUnit` return type is misleading HOT 1
- Test suite fails to run with cssVar() HOT 3
- Unable to play in browser console on Polished's site HOT 3
- Is the faction that lighten fails to work in testing-library a polished problem or an rtl/jest problem? HOT 4
- `parseToHsl` Doesn't seem to parse valid CSS Colors 4 space-separated values HOT 9
- rgbaRegex fails 3 digit decimals HOT 3
- Mix doesn't output the same value as vanilla SCSS HOT 1
- [Feature request] Add function to convert between rgb and hex notation HOT 1
- [Possible improvements] I found some places I could improve performance and Bundle size HOT 1
- Typescript Error
- Polished "playground" on homepage doesn't work
- parseToRgb / parseToHsl float precision expected by the regex
- Website contrast prevents readibility
- WARN node_modules/polished/lib/color/rgb.js (6:59) A comment 15:14:25 "/*#__PURE__*/" in "node_modules/polished/lib/color/rgb.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues. HOT 3
- Breaking semver change introduced in v4.3.0 HOT 6
- Use `exports` field with `.mjs` extension instead of `"module": "dist/polished.esm.js"` in `package.json`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from polished.