Make react-tokens map to SCSS variable and palette color

[gdoyle1]

After discussing global variables that map to our PF4 color palette with @kybaker and @mcoker, we found that many of the variables are nested within components. @kybaker suggested we have a component variable to SCSS variable to color palette mapping to clearly showcase the variable being used. This would make it A LOT easier for designers and developers who are using PatternFly, both communication-wise and efficiency!

This mapping would take the place of the current "CSS Variables" table on each component page within the "Documentation" portion of the site.
The current state of this is:
"Accordion" page - (Variable): --pf-c-accordion--BackgroundColor --> (React token): c_accordion_BackgroundColor --> (Value): #ffffff
The ideal mapping state is:
"Accordion page - (Component variable): --pf-c-accordion--BackgroundColor --> (React token): c_accordion_BackgroundColor --> (Global variable): --pf-global--BackgroundColor--100 --> (Palette color): $pf-color-white --> (Value): #ffffff

Example of the file mapping needed to create something like this for Accordion:
accordion.scss -> _variables.scss -> scss-variable.scss

I have completed this mapping on this spreadsheet here in the "all" page.

cc: @redallen

[gdoyle1]

Finished the variable mapping in that google sheet ^