Skip to content
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

Deprecate and remove the input contrast prop #4355

Open
iansan5653 opened this issue Mar 5, 2024 · 3 comments
Open

Deprecate and remove the input contrast prop #4355

iansan5653 opened this issue Mar 5, 2024 · 3 comments

Comments

@iansan5653
Copy link
Contributor

The contrast prop, when applied to Select, TextInput, or Textarea (one would also expect it on TextInputWithTokens but it's not available there) renders an input with a subtle background, somewhere between the default and disabled styling:

screenshot of TextInput with normal, contrast, and disabled stylings

In dark theme it has no effect:

the same screenshot in dark mode. All three inputs look the same

The documentation says this prop:

Changes background color to a higher contrast color

But ironically it actually reduces the contrast between the text and background.

This prop is problematic because, as shown above, it can make active inputs look disabled. This can and has caused confusion for users, and so the recommendation and effort has been to avoid using it in GitHub UI (including in PVC components). We've been considering getting rid of it for a while, so let's get it done.

@mperrotti
Copy link
Contributor

I agree that we should get rid of the contrast prop. It's purpose was so you could have an input on a "secondary" background color (#f6f8fa) match the contrast of an input on a "primary" background color (#ffffff). However, it's often misused.

Here's an image for demonstration purposes:
2 sets of inputs on primary and secondary background colors

@iansan5653
Copy link
Contributor Author

iansan5653 commented Mar 5, 2024

I agree that we should get rid of the contrast prop. It's purpose was so you could have an input on a "secondary" background color (#f6f8fa) match the contrast of an input on a "primary" background color (#ffffff). However, it's often misused.

If this is important, could we just change the input to have a transparent background by default?

@mperrotti
Copy link
Contributor

I'm worried about a default transparent background breaking designs where we're only able to reach the 3:1 contrast minimum because of the white input background.

I think this use-case is pretty rare and can be safely handled with style overrides.

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

No branches or pull requests

3 participants