[TextField] Make filled variant background / hover / focus states lighter

[jgoux]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Hello,

I find the new filled variant TextField's background too dark.

How were the different rgba values picked? (https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/FilledInput/FilledInput.js#L17)

I tried using a tool to calculate contrast ratio between the main background and the filled background on material design example and here are the difference between material-design examples and material-ui for each states :

State	Material Design Spec	Material-UI
Inactive	1.22	1.21
Activated	1.22	1.51
Focused	1.62	1.51
Hover	1.34	1.34
Error	1.22	1.51
Disabled	1.38	1.38

These numbers are based on a light theme.

We can see that according to the specs, there is a difference between the focused state and the activated state in term of background color (the activated one is the same color as the inactive one, which is lighter than the focused one). You can see the different states here, at the "States" section.

I suppose we should at least respect the "activated" state background color, so the contrast is better when typing.

[oliviertassinari]

I find the new filled variant TextField's background too dark.

@jgoux Same feeling.

[valoricDe]

I think the same applies to buttons. In this project they are rendered darker when hovered, not so on the marterial ui specs

[mbrookes]

@jgoux What's the distinction between focused and activated in Material-UI?

We chose the one from the spec that distinguished focused from inactive and hover. (Going back to the inactive color when focused didn't seem right, but I could be convinced otherwise). I agree it could be a little lighter, as your testing shows.

Regarding error, at the moment it follows the same background color for inactive / hover / focus whether error or not.

[mbrookes]

@Valorize That doesn't seem correct:

One difference is that they've dropped the focus ripple in v2. Not sure that's a change for the better, as a focused text button will somewhat resemble a filled one.

[jgoux]

@mbrookes I don't think it's possible to style a focused input differently based on :focus and :activate so in our case the focused state would be hard to implement (or we would have to capture the focus on a outer element so the "activated state" doesn't trigger, and then on keyboard event starts the real focus on the input so the user can actually type).

In my opinion we should go for the "activated" state with a lighter background. The bottom line being bolder and the colors are enough to denote the state.

[oliviertassinari]

In my opinion we should go for the "activated" state with a lighter background.

@jgoux I agree so is Vuetify doing. I think that we can leave the focused state aside here. I don't really see the use case yet. It's to be noted that MCW doesn't follow the specification for the activated state.
Here is what I have using HSL:

State	Material Design Spec	Material-UI
Inactive	91%	91%
Activated	91%	82%
Focused
Hover	87%	87%
Error	91%	91%
Disabled	88%	86%

So, there are only two value to change, and we are good:

• https://github.com/mui-org/material-ui/blob/a59903abde3925dd239a89a4d02a6c7020236302/packages/material-ui/src/FilledInput/FilledInput.js#L27-L28

-backgroundColor: light ? 'rgba(0, 0, 0, 0.18)' : 'rgba(255, 255, 255, 0.18)', 
+backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)',

• https://github.com/mui-org/material-ui/blob/a59903abde3925dd239a89a4d02a6c7020236302/packages/material-ui/src/FilledInput/FilledInput.js#L30-L31

-backgroundColor: light ? 'rgba(0, 0, 0, 0.14)' : 'rgba(255, 255, 255, 0.14)',
+backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',

[mbrookes]

@jgoux Looks like my comment was accidentally marked as off topic, but yes, that was my point - there is no distinction between activated and focused in Material-UI.

In my opinion we should go for the "activated" state with a lighter background. The bottom line being bolder and the colors are enough to denote the state.

👍

[adeelibr]

Can I work on this guys? :)

[oliviertassinari]

@adeelibr Sure :)

[fzaninotto]

Sorry to revive an old topic, but it seems the default background is still too dark as compared to the material design specs.

Spec: #f5f5f5

mui implementation (on white background): #e8e8e8

It's not obvious at first because the FilledInput demos are using a darker background.