New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

color function: tint, shade, and contrast adjusters have unexpected results when used with alpha adjuster #337

Closed
tylergaw opened this Issue Jan 10, 2017 · 3 comments

Comments

3 participants
@tylergaw

tylergaw commented Jan 10, 2017

This is an issue caused by an upstream dep. The original issue is in css-color-function. I have a PR and description of the problem here ianstormtaylor/css-color-function#26 and a PR open in the postcss plugin here: postcss/postcss-color-function#33

You can see the same issue in cssnext in the playground with the following (or similar) input:

div {
  color: color(red tint(50%));
  background-color: color(red a(20%) tint(50%));
}

the output for that is:

div {
  color: rgb(255, 128, 128);
  background-color: rgba(255, 230, 230, 0.6);
}

Notice in the output the rgba values don't match up with the rgb and the alpha value is not what was specified in the input.

The shade adjuster has the same issue.

contrast has a similar issue, but not quite the same. For it, it depends on the base color and the contrast amount. Sometimes it works as expected, other times it doesn't. Examples:

div {
  color: color(red a(20%) contrast(50%));
}

works as expected and produces:

div {
  color: rgba(255, 255, 255, 0.2);
}

but using a different base color with the same alpha and contrast values produces incorrect results:

div {
  color: color(blue a(20%) contrast(50%));
}
div {
  color: rgba(247, 247, 255, 0.6);
}

Again, this is documented in detail in ianstormtaylor/css-color-function#26

@jonathantneal

This comment has been minimized.

Collaborator

jonathantneal commented May 4, 2018

@tylergaw, do you have this issue with postcss-color-mod-function? If so, this may be resolved by #445

@tylergaw

This comment has been minimized.

tylergaw commented May 9, 2018

Hey @jonathantneal been a while since I looked at this, but think I'm following. I haven't used postcss-color-mod-function yet, so can't speak to that. If you're updating postcss-next to use that instead of postcss-color-function then yeah, this issue is no longer valid.

@MoOx

This comment has been minimized.

Owner

MoOx commented May 29, 2018

postcss-cssnext has been deprecated in favor of postcss-preset-env. Read more at https://moox.io/blog/deprecating-cssnext/

@MoOx MoOx closed this May 29, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment