@patternfly/patternfly 5.0.0-prerelease.13 → 5.0.0-prerelease.15

package/components/Toolbar/toolbar.scss

@@ -15,21 +15,27 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   --#{$toolbar}--item--RowGap--base: var(--#{$pf-global}--spacer--xs); // shared row-gap for items and groups
 
   // Item
-  --#{$toolbar}__item--Display: block;
+  --#{$toolbar}__item--Display: flex;
   --#{$toolbar}__item--MinWidth--base: auto;
-  --#{$toolbar}__item--AlignSelf: auto;
   --#{$toolbar}__item--AlignItems: var(--#{$toolbar}--AlignItems--base);
+  --#{$toolbar}__item--AlignSelf: var(--#{$toolbar}--AlignItems--base);
 
   // Group
   --#{$toolbar}__group--Display: flex;
+  --#{$toolbar}__group--RowGap: var(--#{$toolbar}--item--RowGap--base);
   --#{$toolbar}__group--AlignItems: var(--#{$toolbar}--AlignItems--base);
   --#{$toolbar}__group--AlignSelf: auto;
-  --#{$toolbar}__group--RowGap: var(--#{$toolbar}--item--RowGap--base);
 
   // Sticky
   --#{$toolbar}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--xs);
   --#{$toolbar}--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom);
 
+  // Alignment options
+  --#{$toolbar}--m-align-items-center--AlignItems: center;
+  --#{$toolbar}--m-align-items-baseline--AlignItems: baseline;
+  --#{$toolbar}--m-align-self-center--AlignSelf: center;
+  --#{$toolbar}--m-align-self-baseline--AlignSelf: baseline;
+
   // Content
   --#{$toolbar}__content--Display: flex;
   --#{$toolbar}__content--AlignItems: var(--#{$toolbar}--AlignItems--base);
@@ -111,8 +117,12 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   // Label
   --#{$toolbar}__item--m-label--spacer: var(--#{$toolbar}__item--spacer);
+  --#{$toolbar}__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
   --#{$toolbar}__item--m-label--FontWeight: var(--#{$pf-global}--FontWeight--bold);
 
+  // Input
+  --#{$toolbar}__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
+
   // Label in expanded content
   --#{$toolbar}__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--#{$toolbar}__expandable-content--m-expanded--GridRowGap) + var(--#{$pf-global}--spacer--sm));
   --#{$toolbar}__expandable-content__item--m-label--FontSize: var(--#{$pf-global}--FontSize--sm);
@@ -127,7 +137,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   --#{$toolbar}--m-full-height--PaddingTop: 0;
   --#{$toolbar}--m-full-height--PaddingBottom: 0;
   --#{$toolbar}--m-full-height__item--Display: flex;
-  --#{$toolbar}--m-full-height__item--AlignItems: var(--#{$toolbar}__group--AlignItems);
+  --#{$toolbar}--m-full-height__item--AlignItems: center;
 
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
     --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__expandable-content--lg--PaddingRight);
@@ -219,11 +229,11 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   &.pf-m-align-items-center {
-    align-items: center;
+    --#{$toolbar}__group--AlignItems: var(--#{$toolbar}--m-align-items-center--AlignItems);
   }
 
   &.pf-m-align-items-baseline {
-    align-items: baseline;
+    --#{$toolbar}__group--AlignItems: var(--#{$toolbar}--m-align-items-baseline--AlignItems);
   }
 
   &.pf-m-align-self-start {
@@ -231,11 +241,11 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   &.pf-m-align-self-center {
-    align-self: center;
+    --#{$toolbar}__group--AlignSelf: var(--#{$toolbar}--m-align-self-center--AlignItems);
   }
 
   &.pf-m-align-self-baseline {
-    align-self: baseline;
+    --#{$toolbar}__group--AlignSelf: var(--#{$toolbar}--m-align-self-baseline--AlignItems);
   }
 }
 
@@ -359,7 +369,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-search-filter--spacer);
   }
 
-  // Search filter
+  // Chip group
   &.pf-m-chip-group {
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-chip-group--spacer);
   }
@@ -369,6 +379,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-label--spacer);
 
     font-weight: var(--#{$toolbar}__item--m-label--FontWeight);
+    transform: translateY(var(--#{$pf-global}--spacer--form-element));
   }
 
   // Total items
@@ -429,7 +440,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   &.pf-m-align-items-center {
-    align-items: center;
+    --#{$toolbar}__content-section--AlignItems: var(--#{$toolbar}--m-align-items-center--AlignItems);
   }
 
   &.pf-m-align-items-baseline {
@@ -470,7 +481,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     grid-row-gap: var(--#{$toolbar}__expandable-content--m-expanded--GridRowGap);
   }
 
-  .pf-m-label {
+  .#{$toolbar}__item.pf-m-label {
     margin-bottom: var(--#{$toolbar}__expandable-content__item--m-label--MarginBottom);
     font-size: var(--#{$toolbar}__expandable-content__item--m-label--FontSize);
   }
@@ -488,11 +499,13 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   .#{$toolbar}__item {
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--spacer);
+    --#{$toolbar}__item--AlignSelf: auto;
 
     margin-top: var(--#{$toolbar}__group--m-chip-container__item--MarginTop);
   }
 
   .#{$toolbar}__group {
+    --#{$toolbar}__group--AlignItems: center;
     --#{$toolbar}--spacer: var(--#{$toolbar}__group--spacer);
 
     display: flex;

package/docs/components/Toolbar/examples/Toolbar.md

@@ -4428,7 +4428,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-v5-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-v5-c-toolbar__content-section` per `.pf-v5-c-toolbar__content` **Required** |
 | `.pf-v5-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
 | `.pf-m-sticky` | `.pf-v5-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
-| `.pf-m-full-height` | `.pf-v5-c-toolbar` | Modifies toolbar component to full height of its container and removes vertical padding. |
+| `.pf-m-full-height` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
 | `.pf-m-static` | `.pf-v5-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
 | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
 | `.pf-m-bulk-select` | `.pf-v5-c-toolbar__item` | Initiates bulk select spacing. |
@@ -4449,7 +4449,6 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-m-align-items-baseline` | `.pf-v5-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
 | `.pf-m-align-self-center` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
 | `.pf-m-align-self-baseline` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
-| `.pf-m-label` | `.pf-v5-c-toolbar__item` | Modifies toolbar item to label. |
 | `.pf-m-chip-container` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
 | `.pf-m-overflow-container` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
 | `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content`, `.pf-v5-c-toolbar__toggle` | Modifies the component for the expanded state. |

package/docs/demos/AboutModal/examples/AboutModal.md

@@ -27,20 +27,12 @@ This demo implements the about modal, including the backdrop.
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">

package/docs/demos/Alert/examples/Alert.md

@@ -25,20 +25,12 @@ section: components
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">
@@ -336,20 +328,12 @@ section: components
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">
@@ -728,20 +712,12 @@ section: components
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -26,20 +26,12 @@ cssPrefix: pf-d-back-to-top
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">

package/docs/demos/Banner/examples/Banner.md

@@ -27,20 +27,12 @@ wrapperTag: div
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">
@@ -423,20 +415,12 @@ wrapperTag: div
         </span>
         <div class="pf-v5-c-masthead__main">
           <a class="pf-v5-c-masthead__brand" href="#">
-            <picture
-              class="pf-v5-c-brand pf-m-picture"
-              style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-            >
-              <source
-                media="(min-width: 768px)"
-                srcset="/assets/images/logo__pf--reverse-on-md.svg"
-              />
-              <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-              <img
-                src="/assets/images/logo__pf--reverse--base.png"
-                alt="Fallback patternFly default logo"
-              />
-            </picture>
+            <img
+              class="pf-v5-c-brand"
+              src="/assets/images/pf-logo.svg"
+              alt="PatternFly logo"
+              style="--pf-v5-c-brand--Height:36px"
+            />
           </a>
         </div>
         <div class="pf-v5-c-masthead__content">

package/docs/demos/CardView/examples/CardView.md

@@ -25,20 +25,12 @@ section: patterns
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">

package/docs/demos/ContextSelector/examples/ContextSelector.md

@@ -27,20 +27,12 @@ deprecated: true
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">
@@ -215,20 +207,12 @@ deprecated: true
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">
@@ -583,20 +567,12 @@ deprecated: true
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">
@@ -953,20 +929,12 @@ deprecated: true
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">

package/docs/demos/Dashboard/examples/Dashboard.md

@@ -26,20 +26,12 @@ cssPrefix: pf-d-dashboard
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">

package/docs/demos/DataList/examples/DataList.md

@@ -26,20 +26,12 @@ wrapperTag: div
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">
@@ -887,20 +879,12 @@ wrapperTag: div
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">
@@ -1738,20 +1722,12 @@ wrapperTag: div
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">
@@ -3364,20 +3340,12 @@ wrapperTag: div
     </span>
     <div class="pf-v5-c-masthead__main">
       <a class="pf-v5-c-masthead__brand" href="#">
-        <picture
-          class="pf-v5-c-brand pf-m-picture"
-          style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
+        <img
+          class="pf-v5-c-brand"
+          src="/assets/images/pf-logo.svg"
+          alt="PatternFly logo"
+          style="--pf-v5-c-brand--Height:36px"
+        />
       </a>
     </div>
     <div class="pf-v5-c-masthead__content">