feat(Input): add inverted prop to change background color of an input

[codepretty]

Need to be able to have 2 different background options for inputs.

New prop inverted for changing the background color of the input
<input content="i am an input" inverted />

---

Question: This works for Teams theme scenarios, but not sure if the inverted prop is the best way to do this... thoughts?

Conclusion: After speaking with Design, we decided that inverted is the best solution we could come up with for now.

[codecov]

Codecov Report

Merging #1684 into master will increase coverage by <.01%.
The diff coverage is 0%.

@@            Coverage Diff            @@
##           master   #1684      +/-   ##
=========================================
+ Coverage   69.79%   69.8%   +<.01%     
=========================================
  Files         876     875       -1     
  Lines        7506    7505       -1     
  Branches     2181    2209      +28     
=========================================
  Hits         5239    5239              
+ Misses       2259    2258       -1     
  Partials        8       8

Impacted Files	Coverage Δ
packages/react/src/components/Input/Input.tsx	100% <ø> (ø)	⬆️
...rc/themes/teams/components/Input/inputVariables.ts	0% <ø> (ø)	⬆️
...s-high-contrast/components/Input/inputVariables.ts	0% <ø> (ø)	⬆️
...src/themes/base/components/Input/inputVariables.ts	0% <ø> (ø)	⬆️
...ct/src/themes/base/components/Input/inputStyles.ts	7.69% <0%> (-0.65%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6607278...e8533de. Read the comment docs.

[bcalvery]

I wish there was a way for input to just know it's on a background that matches/clashes with the default background and automagically use an alternate based on the color scheme.
I think "inverted' is a bit of a misnomer because just reading it I would think "normal" is black-on-white - so "inverted" must mean white-on-black (specifically the text/background relationship). It's more like "enhancedBackgroundContrast" or "increasedBackgroundContrast"

What is making the parent have that same background color? Is there a property somewhere higher up that says this is a "callout" or something that can be used to infer that the background matches and then relevant form elements can respond - I can imagine a checkbox on that alternative background is going to blend in and might also need to have certain colors react appropriately.

Sorry I don't really have a helpful thought of how to actually solve this though.

[mnajdova]

The important things is how Design is describing this. Do they have some design token for this input? Inverted seems reasonable to me, if developers see some design and there is stated that inverted Input should be used it will be much easier to reason about, rather then seeing the background and deciding what should the background of the input be. So I am okay with this proposal..

[miroslavstastny]

Technically ok, make sure all the screener regressions are expected.