Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="option">
<h1>Basic demo</h1>
<h2>Content component:</h2>
<div class=foo>
  I'm foo, a content component <a href="#">with a link</a>
</div>

<h2>Content component in container: </h2>
<div class=darkest-card>
  <div class=foo>
   I'm foo <a href="#">with a link</a> in a darkest-card
  </div>
</div>
</div>

<div class="option">
<h1>Theme overrides demo</h1>
<h2>ui-theme-b:</h2>
<div class="ui-theme-b">
  <div class=foo>
   I'm foo <a href="foo.com">with a link</a> where the ui-accent & text colors have been changed
  </div>
  <div class=darkest-card>
    <div class=foo>
    I'm foo <a href="#">with a link</a> in a dark card, I care more about the broadcast colors than the theme color
    </div>
  </div>
</div>

<h2>surface-theme-b:</h2>
<div class="surface-theme-b ">
  <div class=foo>
   I'm foo, a content component <a href="#">with a link</a>
  </div>
  <div class=darkest-card>
    <div class=foo>
     I'm foo <a href="#">with a link</a> in a custom themed card, I care  about the broadcast colors specified by the custom card theme 
    </div>
  </div>
</div>

<h2>surface-theme-b and ui-theme-b:</h2>
<div class="surface-theme-b ui-theme-b">
  <div class=foo>
   I'm foo, a content component <a href="#">with a link</a>
  </div>
  <div class=darkest-card>
    <div class=foo>
     I'm foo <a href="#">with a link</a> in a custom themed card, I care more about the broadcast colors specified by the custom card theme than I card about the theme ui color
    </div>
  </div>
</div>

</div>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

// Hello!  Skip to line 50
$repo: pfe;

// sample map set
$pfe-colors: (
  text:     gray,
  ui-link:  blue,
  ui-link--hover:  orange,
  ui-accent:   red,
  // original surface theme "darkest":
  surface--darkest: DarkOliveGreen,
  surface--darkest--text: white,
  surface--darkest--link: #73bcf7,
  surface--darkest--link--hover: aqua,
);

// original to-string function from pfe-sass:
@function to-string($list, $glue: '', $is-nested: false) {
    $result: null;

    @for $i from 1 through length($list) {
        $e: nth($list, $i);

        @if type-of($e)==list {
            $result: $result#{to-string($e, $glue, true)};
        }

        @else {
            $result: if($i !=length($list) or $is-nested,
            $result#{$e}#{$glue},
            $result#{$e});
        }
    }

    @return $result;
}

// original pfe-color function from pfe-sass:
@function pfe-color($cssvar,
$category: 'color',
$map: $pfe-colors) {
    @if $category !="" {
        $category: "#{$category}--";
    }

    @return var( --#{$repo}-theme--#{$category}#{$cssvar}, #{map-get($map, $cssvar)});
}

///////////////////////////
// START HERE

// Original pfe-radio function, I can't get this to work with muliple arguments, and it needs theme fallbacks
@function pfe-radio($cssvar...) {
    @return var(--#{$repo}-broadcasted--#{to-string($cssvar, '--')});
}

// Suggested new broadcast function, for use with content components
//  1st arg:            lookup broadcast variable  (1 of 7)
//  2nd arg, optional:  lookup theme variable, if different than broadcast color
//
//  usage:   #{pfe-broadcast(ui-base--hover)};
//  result:  var(--pfe-broadcasted--color--ui-base--hover, var(--pfe-theme--color--ui-base--hover, #022f40));
//
//  usage:   #{pfe-broadcast(ui-base, ui-link)};
//  result:  var(--pfe-broadcasted--color--ui-link, var(--pfe-theme--color--ui-base, #0477a4));

$BROADCAST-VARS: 'text' 'text--alt' 'ui-link' 'ui-link--hover' 'ui-link--visited' 'ui-link--focus';

@function pfe-broadcast ($broadcast, $theme-color: $broadcast) {
    @if not index($BROADCAST-VARS, $broadcast) {
      @warn "#{$broadcast} variable is not valid";
    }
    @else {
      @return var(
        --#{$repo}-broadcasted--color--#{to-string($broadcast,'--')},
        #{pfe-color($theme-color)}
      );
    }
}

///////////////////////////
// DEMO STYLES
:root {
    @each $cssvar, $varstack in $pfe-colors {	
     --pfe-theme--color--#{$cssvar}: #{$varstack};	
  }
}

/* Content component */
.foo {
  font-family: Helvetica; font-weight: 300; font-size: 18px;margin: 15px 0;  padding-left: 10px;
  
  // if you just ask for the accent color like this, it might look bad on themed cards! 
  // comment out line 99 to see the gross red/green theme color combo
  border-left: solid 10px #{pfe-color(ui-accent)};
  
  // instead ask for a broadcasted color first to play it safe, 
  // then specify a different theme color if needed:
  border-left: solid 10px #{pfe-broadcast(ui-link, ui-accent)};
  
  // You can ask for a broadcasted color & theme color in one arguement:
  color: #{pfe-broadcast(text)};
  a {
    color: #{pfe-broadcast(ui-link)};
    &:hover {   
      color: #{pfe-broadcast(ui-link--hover)};   
    }
  }
}
/* Container componenent */
.darkest-card {
  display: inline-block; padding: 10px; font-size: 20px;
  
  // if your container specifies a background color, then you must redefine broadcast colors
  background:                                 #{pfe-color(surface--darkest)};
  // In the PFE project, you'd actually call the @mixin pfe-theme, 
  // which is *all* of the theme colors as values of broadcasted variables like this:
  --pfe-broadcasted--color--text:             #{pfe-color(surface--darkest--text)};
  --pfe-broadcasted--color--ui-link:          #{pfe-color(surface--darkest--link)};
  --pfe-broadcasted--color--ui-link--hover:   #{pfe-color(surface--darkest--link--hover)};
}

/* CUSTOM THEMES */
.ui-theme-b {
  --pfe-theme--color--text: purple;
  --pfe-theme--color--ui-link: fuchsia;
  --pfe-theme--color--ui-link--hover: hotpink;
  --pfe-theme--color--ui-accent: MistyRose;
}
// Like redhat-theme
.surface-theme-b {
  --pfe-theme--color--surface--darkest: navy; 
  --pfe-theme--color--surface--darkest--text: lightgreen;
  --pfe-theme--color--surface--darkest--link: #c0ff33;
  --pfe-theme--color--surface--darkest--link--hover: yellow;
}


/* not sure if I'm using it wrong? */
.doesnt-work { 
  background: #{pfe-radio(text ui-link ui-link--hover)};
  color: #{pfe-radio(text, ui-link, ui-link--hover)};
}








/* Styles for demo containers & labels */
.option {
  border: #ddd solid 1px;
  float:left;
  width: 40%;
  margin: 2%;
  padding: 0 15px 20px;
}
h1 {color:#222;text-transform:uppercase}
h2 {color:#666;margin: 40px 0 10px;}

SassMeister-output.css

:root {
  --pfe-theme--color--text: gray;
  --pfe-theme--color--ui-link: blue;
  --pfe-theme--color--ui-link--hover: orange;
  --pfe-theme--color--ui-accent: red;
  --pfe-theme--color--surface--darkest: DarkOliveGreen;
  --pfe-theme--color--surface--darkest--text: white;
  --pfe-theme--color--surface--darkest--link: #73bcf7;
  --pfe-theme--color--surface--darkest--link--hover: aqua;
}

/* Content component */
.foo {
  font-family: Helvetica;
  font-weight: 300;
  font-size: 18px;
  margin: 15px 0;
  padding-left: 10px;
  border-left: solid 10px var(--pfe-theme--color--ui-accent, red);
  border-left: solid 10px var(--pfe-broadcasted--color--ui-link, var(--pfe-theme--color--ui-accent, red));
  color: var(--pfe-broadcasted--color--text, var(--pfe-theme--color--text, gray));
}

.foo a {
  color: var(--pfe-broadcasted--color--ui-link, var(--pfe-theme--color--ui-link, blue));
}

.foo a:hover {
  color: var(--pfe-broadcasted--color--ui-link--hover, var(--pfe-theme--color--ui-link--hover, orange));
}

/* Container componenent */
.darkest-card {
  display: inline-block;
  padding: 10px;
  font-size: 20px;
  background: var(--pfe-theme--color--surface--darkest, DarkOliveGreen);
  --pfe-broadcasted--color--text:             var(--pfe-theme--color--surface--darkest--text, white);
  --pfe-broadcasted--color--ui-link:          var(--pfe-theme--color--surface--darkest--link, #73bcf7);
  --pfe-broadcasted--color--ui-link--hover:   var(--pfe-theme--color--surface--darkest--link--hover, aqua);
}

/* CUSTOM THEMES */
.ui-theme-b {
  --pfe-theme--color--text: purple;
  --pfe-theme--color--ui-link: fuchsia;
  --pfe-theme--color--ui-link--hover: hotpink;
  --pfe-theme--color--ui-accent: MistyRose;
}

.surface-theme-b {
  --pfe-theme--color--surface--darkest: navy;
  --pfe-theme--color--surface--darkest--text: lightgreen;
  --pfe-theme--color--surface--darkest--link: #c0ff33;
  --pfe-theme--color--surface--darkest--link--hover: yellow;
}

/* not sure if I'm using it wrong? */
.doesnt-work {
  background: var(--pfe-broadcasted--text--ui-link--ui-link--hover--);
  color: var(--pfe-broadcasted--text--ui-link--ui-link--hover);
}

/* Styles for demo containers & labels */
.option {
  border: #ddd solid 1px;
  float: left;
  width: 40%;
  margin: 2%;
  padding: 0 15px 20px;
}

h1 {
  color: #222;
  text-transform: uppercase;
}

h2 {
  color: #666;
  margin: 40px 0 10px;
}

SassMeister-rendered.html

<div class="option">
<h1>Basic demo</h1>
<h2>Content component:</h2>
<div class=foo>
  I'm foo, a content component <a href="#">with a link</a>
</div>

<h2>Content component in container: </h2>
<div class=darkest-card>
  <div class=foo>
   I'm foo <a href="#">with a link</a> in a darkest-card
  </div>
</div>
</div>

<div class="option">
<h1>Theme overrides demo</h1>
<h2>ui-theme-b:</h2>
<div class="ui-theme-b">
  <div class=foo>
   I'm foo <a href="foo.com">with a link</a> where the ui-accent & text colors have been changed
  </div>
  <div class=darkest-card>
    <div class=foo>
    I'm foo <a href="#">with a link</a> in a dark card, I care more about the broadcast colors than the theme color
    </div>
  </div>
</div>

<h2>surface-theme-b:</h2>
<div class="surface-theme-b ">
  <div class=foo>
   I'm foo, a content component <a href="#">with a link</a>
  </div>
  <div class=darkest-card>
    <div class=foo>
     I'm foo <a href="#">with a link</a> in a custom themed card, I care  about the broadcast colors specified by the custom card theme 
    </div>
  </div>
</div>

<h2>surface-theme-b and ui-theme-b:</h2>
<div class="surface-theme-b ui-theme-b">
  <div class=foo>
   I'm foo, a content component <a href="#">with a link</a>
  </div>
  <div class=darkest-card>
    <div class=foo>
     I'm foo <a href="#">with a link</a> in a custom themed card, I care more about the broadcast colors specified by the custom card theme than I card about the theme ui color
    </div>
  </div>
</div>

</div>