@patternfly/pfe-sass

PFE SASS

Helper tools for building PatternFly Elements web components.

Broadcast variables

Containers & broadcast vars

If the container allows changes to background colors should influence the children: pfe-set-broadcasted function

Notes on using broadcast colors in components

• Try to map CSS properties such as color only once. If updates to that property are needed, those should be done by updating the local variable.
• Set the value equal to local variable: color: var(--pfe-local--Color);. Note that no fallback is defined at this level as that is done when the local variable is declared.
• In the pfe-component, do not set value of the broadcasted variables unless the component is influencing the background color; instead, set local variables to look for the value of a broadcasted variable, followed by a fallback color. This provides a hook for containers to influence the color of the typography in the component so that it remains readable.
  • --pfe-local--Color: var(--pfe-broadcasted--text, #444);
  • If a component sets it's own background color, it can and should update the value of the broadcasted variables.
• Reset local variable values as needed for attribute overrides.

CSS Example

Let's use the pfe-cta as an example. We can start by defining local variables, namespaced for this component, and then updating the values of those variables as we go.

    // 1. set up local vars equal to theme vars & fallbacks
    :host {
      --pfe-cta--Color: var(theme--link, #06c);
    }

    // 2. Use color property once, map to local var value
    :host(:not([priority]) {
      ::slotted(a) {
         // color: blue; CSS compiler will print this for IE11
         color: var(--pfe-cta--Color, blue) !important;
      }
    }

    // 3. Use broadcasted variables as needed, with theme fallback after other declarations
    :host {
      --pfe-cta--Color: var(broadcasted--link, var(theme--link, #06c));   
    }

    // 4. Override broadcasted last
    :host([color="accent"]) {
      --pfe-cta--BackgroundColor: var(theme--surface--accent);
      --pfe-cta--Color: var(theme--surface-accent--link);
    }

Typography Classes

There are a variety of mixins, extends, and variables available in pfe-sass. We recommend checking out the sass doc for extensive information about how to use these tools.

There are already utility / modifier classes available within pfe-typography-classes.css for use within long form content. However if you need custom classes, you can utilize either the placeholders, or the pfe-typography mixin.

Text class examples

.custom-text--foo {
  @extend %pfe-text--lg;
}
.custom-text--bar {
 @include pfe-typography(lg, $type: "text"); 
}
.custom-text--baz {
 @include pfe-typography(lg, $type: "text", $base: true); 
}

.custom-text--foo {
  font-size: 1.125rem;
  font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-text--foo:not(:last-child):not(:empty) {
  margin-bottom: 0.5rem;
  margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
}

.custom-text--bar {
  font-size: 1.125rem;
  font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-text--bar:not(:last-child):not(:empty) {
  margin-bottom: 0.5rem;
  margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
}

.custom-text--baz {
  font-size: 1.125rem;
  font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-text--baz:not(:last-child):not(:empty) {
  margin-bottom: 0.5rem;
  margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
}

Title examples

Note that you can opt in or out out of properties beyond the font-family and font-size if desired, via the argument: $base: false and/or $spacing: false.

.custom-title--foo {
  @extend %pfe-title--lg;
}
.custom-title--bar {
 @include pfe-typography(lg, $type: "title"); 
}
.custom-title--baz {
 @include pfe-typography(lg, $type: "title", $base: false); 
}

.custom-title--foo {
  font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
  font-size: 1.125rem;
  font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-title--foo:not(:last-child) {
  margin-bottom: 1rem;
  margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);
}

.custom-title--bar {
  font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
  font-size: 1.125rem;
  font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-title--bar:not(:last-child) {
  margin-bottom: 1rem;
  margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);
}

.custom-title--baz {
  font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
  font-size: 1.125rem;
  font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
}

Component examples

:host[foo] {
  font-size: pfe-local(FontSize);
}

:host[bar] {
  @include pfe-c-typography($type: text, $sizing: md);
}

:host[baz] {
  @include pfe-c-typography($type: text, $sizing: md, $base: true, $spacing: true, $light-dom-heading:true);
}

:host[foo] {
  font-size: 1rem;
  font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
}

:host[bar] {
  font-size: 1rem;
  font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
}

:host[baz] {
  font-size: 1rem;
  font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-clipboard--LineHeight, var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif));
  line-height: 1.5;
  line-height: var(--pfe-clipboard--LineHeight, var(--pfe-theme--line-height, 1.5));
  font-weight: 400;
  font-weight: var(--pfe-clipboard--FontWeight, var(--pfe-theme--font-weight--normal, 400));
  --pf-c--FontSize: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
}

:host[baz]:not(:last-child) {
  margin-bottom: 0.5rem;
  margin-bottom: var(--pfe-clipboard--MarginBottom, var(--pfe-theme--content-spacer--body--sm, 0.5rem));
}