Need to print local empty variables

[starryeyez024]

This issue comes from a PR discussion with @castastrophe, just moving notes here for tracking & posterity.

---

Here's an example of (ideal) compiled CSS within a PFE component. The browser will look for these CSS variables in order. If a variable is empty, it will skip it and move on to the next one.

  font-size: var(--pf-cta--FontSize, var(--pf-global--font-size, 16px));	
                   ^ local variable          ^ theme variable      ^ fallback value

So it will look for:

1. A component-specific local variable, usually empty*
2. A theme variable, used by multiple components
3. A real value, in case both variables are empty

If local variables are empty, that means there is less specificity needed to override them. For example, if an author who is using Patternfly and PatternFly Element components wanted to override the card background color and the accordion toggle color, they only have to do this:

:root {
  --pf-c-card--BackgroundColor: blue;
  --pf-c-accordion__toggle--BorderLeftColor: purple
}

Instead of this, which quickly escalates into 2-3 times the amount of code, as well as more knowledge about which HTML tag or class to use.

.pf-c-card, 
 pfe-card { 
  --pf-c-card--BackgroundColor: blue;
}
.pfe-c-accordion__toggle, 
 pfe-accordion {
  --pf-c-accordion__toggle--BorderLeftColor: purple
}

So to accomplish this, we want to refactor the code & custom PFE functions so that we:

1. have a map at the top where a dev can either specify custom values, or global references for ease, like this:

$variables: (
  Color: orange, //custom
  Padding: pfe-var(container-spacer) //global
);

in the remainder of the sass file, the values are always the pfe-local function, like this:

:host {
  Color: #{pfe-local(Color)};
}

the resulting CSS always prints empty local vars first, and then the values from the variables map:

:host {
  color: var(pfe-card--Color,  orange ); 
                     ^empty      ^custom
  padding: var(pfe-card--Padding, var(--pfe-theme--container-spacer, 16px));
                     ^empty                        ^global var         ^fallback
}