Generated by SassMeister.com.

SassMeister-input.scss

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

:root {
  // update colors as a set!! or you're in trouble mister
  --pfe-theme--color--surface--accent: #ee0000; //background
  --pfe-theme--color--surface--accent-harmony: dark-teal; //background-alt
  --pfe-theme--color--surface--accent--text: #ffffff;
  --pfe-theme--color--surface--accent--text--alt: light-gray;
  --pfe-theme--color--surface--accent--link: #ffffff;
  --pfe-theme--color--surface--accent--link--visited: #ffffff;
  --pfe-theme--color--surface--accent--link--hover: #d2d3d5;
  --pfe-theme--color--surface--accent--link--focus: #d2d3d5;

}

// adding your own theme color? cool, be sure to update broadcast colors along with your background color
.my-custom-background-color {
    background-color: purple;
    --pfe-broadcasted--color--text:               white;
    --pfe-broadcasted--color--text--alt:          white;
    --pfe-broadcasted--color--ui-link:            white;
    --pfe-broadcasted--color--ui-link--visited:   white;
    --pfe-broadcasted--color--ui-link--hover:     white;
    --pfe-broadcasted--color--ui-link--focus:     white;
}

//  other repos can lean on the redhat-theme CSS vars
.ux-custom-container {
  color: var(--pfe-theme--color--surface--accent, purple);
}

SassMeister-output.css

:root {
  --pfe-theme--color--surface--accent: #ee0000;
  --pfe-theme--color--surface--accent-harmony: dark-teal;
  --pfe-theme--color--surface--accent--text: #ffffff;
  --pfe-theme--color--surface--accent--text--alt: light-gray;
  --pfe-theme--color--surface--accent--link: #ffffff;
  --pfe-theme--color--surface--accent--link--visited: #ffffff;
  --pfe-theme--color--surface--accent--link--hover: #d2d3d5;
  --pfe-theme--color--surface--accent--link--focus: #d2d3d5;
}

.my-custom-background-color {
  background-color: purple;
  --pfe-broadcasted--color--text:               white;
  --pfe-broadcasted--color--text--alt:          white;
  --pfe-broadcasted--color--ui-link:            white;
  --pfe-broadcasted--color--ui-link--visited:   white;
  --pfe-broadcasted--color--ui-link--hover:     white;
  --pfe-broadcasted--color--ui-link--focus:     white;
}

.ux-custom-container {
  color: var(--pfe-theme--color--surface--accent, purple);
}