feat(Icon): add 'backgroundColor' variable

[kuzhelov]

'backgroundColor' variable for Icon

This variable will introduce possibility to specify Icon's background color. In contrast with just inverted property being introduced, with backgroundColor variable we will provide all the necessary means to customize look of the icon to the client - without necessity to use heuristics for detecting which foreground color would be more appropriate for the given background one.

No corresponding property is introduced intentionally - to prevent abuse in using props as styling fine-tuning mechanism. For the sake of consistency corresponding color property has been eliminated for now as well - until we will come up to the common set of predefined color constants that will be supported by each component.

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

API Proposal

backgroundColor: string (variable)

<Icon name='...' variables={{ backgroundColor: 'teal' }} />

[codecov]

Codecov Report

Merging #47 into master will decrease coverage by 0.17%.
The diff coverage is 55.55%.

@@            Coverage Diff             @@
##           master      #47      +/-   ##
==========================================
- Coverage   83.84%   83.67%   -0.18%     
==========================================
  Files          58       58              
  Lines         873      876       +3     
  Branches      197      210      +13     
==========================================
+ Hits          732      733       +1     
- Misses        137      139       +2     
  Partials        4        4

Impacted Files	Coverage Δ
src/components/Icon/Icon.tsx	100% <ø> (ø)	⬆️
src/components/Icon/iconVariables.ts	100% <ø> (ø)	⬆️
src/components/Icon/iconRules.ts	72.97% <55.55%> (-3.5%)	⬇️

---

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 dfb30a8...d723a2a. Read the comment docs.

[mnajdova]

Totally agree for using the variables for providing the color, background and border colors instead of props.