fix(UI): use .extend and update color style in P component

[evenchange4]

Issue:

What I did

How to test

[michaelhsu-bot]

	Warnings
:warning:	:exclamation: Big PR
:warning:	Changes were made to package.json, but not to licenses.csv - Perhaps you need to run `$ yarn run license`?

Generated by :no_entry_sign: dangerJS

[evenchange4]

Deploy preview for mcs-lite-ui ready!

Built with commit b1b59edc9e2e79edac3e0b4e5a5f1e15339f622f

https://deploy-preview-608--mcs-lite-ui.netlify.com

[evenchange4]

Deploy preview for mcslite ready!

Built with commit b1b59edc9e2e79edac3e0b4e5a5f1e15339f622f

https://deploy-preview-608--mcslite.netlify.com

[evenchange4]

Deploy preview for mcs-lite-introduction ready!

Built with commit b1b59edc9e2e79edac3e0b4e5a5f1e15339f622f

https://deploy-preview-608--mcs-lite-introduction.netlify.com

[codecov[bot]]

Codecov Report

Merging #608 into master will not change coverage. The diff coverage is 100%.

@@           Coverage Diff           @@
##           master     #608   +/-   ##
=======================================
  Coverage   83.73%   83.73%           
=======================================
  Files         325      325           
  Lines        2686     2686           
  Branches      175      175           
=======================================
  Hits         2249     2249           
  Misses        372      372           
  Partials       65       65

Impacted Files	Coverage Δ
packages/mcs-lite-ui/src/Toast/Toast.js	100% <100%> (ø)	:arrow_up:
...ges/mcs-lite-ui/src/LandingHeader/NavItemBurger.js	47.82% <100%> (ø)	:arrow_up:
...s/mcs-lite-ui/src/LandingHeader/NavItemDropdown.js	52.38% <100%> (ø)	:arrow_up:
...kages/mcs-lite-ui/src/DataChannel/ControlNumber.js	100% <100%> (ø)	:arrow_up:
...ckages/mcs-lite-ui/src/DataChannel/ControlRange.js	100% <100%> (ø)	:arrow_up:
packages/mcs-lite-ui/src/P/P.js	100% <100%> (ø)	:arrow_up:
...es/mcs-lite-ui/src/DataChannel/DisplayUnitValue.js	100% <100%> (ø)	:arrow_up:
packages/mcs-lite-ui/src/Heading/Heading.js	100% <100%> (ø)	:arrow_up:
...mcs-lite-ui/src/DataChannelCard/DataChannelCard.js	100% <100%> (ø)	:arrow_up:

---

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 c35c7b6...b1b59ed. Read the comment docs.