[Input] Support CSS variables

[ivan-ngchakming]

Previews:

• https://deploy-preview-32128--material-ui.netlify.app/experiments/material-ui/css-variables/
• https://deploy-preview-32128--material-ui.netlify.app/experiments/material-ui/css-variables-custom-theme/

Part of #32049

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

@material-ui/core: parsed: +0.15% , gzip: +0.16%

Generated by 🚫 dangerJS against 0c88491

[mnajdova]

Thanks for looking into this :) I've left two comments. As this is still very early in the development there will be occurrences like this where we will need to make a decision, so sorry if this takes a bit longer :)

[mnajdova]

This goes against the purpose of using the new CSS variables structure, as we would still be depending on JS transformations. My proposal would be creating new theme token in the palette something like inputBorderColor that will have the correct values in the light and dark mode. We would add this only in the experimental_extendTheme default theme, to avoid changes in the current theme structure.

[siriwatknp]

@mnajdova I have to add a few more variables to make it works.

• I moved opacity inside colorSchemes because I think it is quite common that the opacity can be different between color schemes (the placeholder is the real example).
• Added placeholder and inputTouchBottomLine to opacity

  {
    active: 0.54,
    hover: 0.04,
    selected: 0.08,
    disabled: 0.26,
    focus: 0.12,
  +placeholder,
  +inputTouchBottomLine,
  }

• Refactor the extendTheme function to be more readable (reduce variable creation and use more mutation).
• Add more tests

[mnajdova]

@mnajdova I have to add a few more variables to make it works.

I moved opacity inside colorSchemes because I think it is quite common that the opacity can be different between color schemes (the placeholder is the real example).
Added placeholder and inputTouchBottomLine to opacity

{
  active: 0.54,
  hover: 0.04,
  selected: 0.08,
  disabled: 0.26,
  focus: 0.12,
+ placeholder,
+ inputTouchBottomLine,
}

Exactlly what I had in mind 👍

[mnajdova]

@siriwatknp I think we need to have different default opacity values for light and dark theme to simplify the implementaiton. Now we have different values for inputTouchBottomLine and placeholder, but in MD even the hover opacity should have different value in light vs dark mode.

[mnajdova]

This difference is the reason why in the Button.js I am using the opacity from the action.hoverOpacity.

[siriwatknp]

@mnajdova I think we should not add the active, disabled ... to the theme.vars.opacity at this point because we already have theme.vars.palette.action.xxxOpacity which are already configurable on both light and dark color schemes.

Adding theme to theme.vars.opacity could create confusion and we are not using them in the migration at all. What do you think?

[mnajdova]

Sure, let's skip them for now. Long term I think we should have all opacities under one object, that was my intention with the comment.

[mnajdova]

I don't think it's safe to add this type here. The createTheme is not adding this value. I think we can just cast to this in the extendTheme util if necessary.

[siriwatknp]

Okay, sounds good to me.

[mnajdova]

The changes look good to me. @siriwatknp please see one last comment related to the types updates in createPalette.d.ts