Variable factory

SassMeister-input.scss

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

@function to-string($value) {
  @return inspect($value);
}

@function var-factory($var, $lib: "theme", $type: "color", $repo: "pfe") {
    //  structure: --repo-lib--type--var
    //  example:   --pfe-broadcasted--color--text
    $css-variable:  "--#{to-string($repo)}-#{to-string($lib)}--#{to-string($type)}--#{to-string($var)}";
    @return #{$css-variable};
}
@mixin broadcasted-to-theme($broadcast-color, $theme-color) {
    #{var-factory($broadcast-color, "broadcasted")}: var(#{var-factory($theme-color, "theme")});
}

// simplify the mapping of broadcast vars; utilize more system vars as values
.custom-theme {
  background: purple;
  @include broadcasted-to-theme(text, text);
  @include broadcasted-to-theme(ui-link, ui-link);
  @include broadcasted-to-theme(ui-link--hover, ui-link--hover);
  @include broadcasted-to-theme(ui-link--visited, ui-link--visited);
  @include broadcasted-to-theme(ui-link--focus, text);
}

//unrelated extra example of just using the var factory on its own
.pfe-cta--arrow {
  color:  #{var-factory(ui-link)};
}

SassMeister-output.css

.custom-theme {
  background: purple;
  --pfe-broadcasted--color--text: var(--pfe-theme--color--text);
  --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link);
  --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--hover);
  --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--visited);
  --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--text);
}

.pfe-cta--arrow {
  color: --pfe-theme--color--ui-link;
}