@patternfly/patternfly 4.222.4 → 5.0.0-alpha.1

package/components/AboutModalBox/about-modal-box.scss

@@ -1,32 +1,12 @@
 .pf-c-about-modal-box {
   // Component variables
   --pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000); // Modal uses a non-standard background color
-  --pf-c-about-modal-box--BoxShadow: 0 0 100px 0 rgba(255, 255, 255, .05);  // This is a special one-off glow for the about modal
-  --pf-c-about-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
   --pf-c-about-modal-box--Height: 100%;
   --pf-c-about-modal-box--lg--Height: #{pf-size-prem(762px)}; // Height is optimized for the exact height desired
-  --pf-c-about-modal-box--lg--MaxHeight: calc(100% - var(--pf-global--spacer--xl)); // MaxHeight ensures that the modal will not go off the screen and instead the content will scroll
-  --pf-c-about-modal-box--Width: 100vw;
-  --pf-c-about-modal-box--lg--Width: calc(100% - (var(--pf-global--spacer--3xl) * 2)); // Modal should be full width with a gutter on either side until it hits a max-width
-  --pf-c-about-modal-box--lg--MaxWidth: #{pf-size-prem(1232px)};
-  --pf-c-about-modal-box--PaddingTop: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--PaddingRight: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--PaddingBottom: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--PaddingLeft: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--sm--PaddingTop: var(--pf-global--spacer--3xl);
-  --pf-c-about-modal-box--sm--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-about-modal-box--sm--PaddingBottom: var(--pf-global--spacer--3xl);
-  --pf-c-about-modal-box--sm--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-about-modal-box--Width: 100%;
   --pf-c-about-modal-box--sm--grid-template-columns: 5fr 1fr;
   --pf-c-about-modal-box--lg--grid-template-columns: 1fr .6fr;
 
-  @media screen and (min-width: $pf-global--breakpoint--sm) {
-    --pf-c-about-modal-box--PaddingTop: var(--pf-c-about-modal-box--sm--PaddingTop);
-    --pf-c-about-modal-box--PaddingRight: var(--pf-c-about-modal-box--sm--PaddingRight);
-    --pf-c-about-modal-box--PaddingBottom: var(--pf-c-about-modal-box--sm--PaddingBottom);
-    --pf-c-about-modal-box--PaddingLeft: var(--pf-c-about-modal-box--sm--PaddingLeft);
-  }
-
   // Brand
   --pf-c-about-modal-box__brand--PaddingTop: var(--pf-global--spacer--2xl);
   --pf-c-about-modal-box__brand--PaddingRight: var(--pf-global--spacer--xl);
@@ -119,7 +99,6 @@
   @include pf-t-dark;
 
   position: relative;
-  z-index: var(--pf-c-about-modal-box--ZIndex);
   display: grid;
   grid-template-rows: max-content max-content auto;
   grid-template-areas:
@@ -131,7 +110,6 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--pf-c-about-modal-box--BackgroundColor); // Because this component is always dark, set the background color
-  box-shadow: var(--pf-c-about-modal-box--BoxShadow);
 
   @media only screen and (min-width: $pf-global--breakpoint--sm) {
     grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
@@ -147,8 +125,6 @@
 
     grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
     grid-template-rows: max-content max-content auto;
-    max-width: var(--pf-c-about-modal-box--lg--MaxWidth);
-    max-height: var(--pf-c-about-modal-box--lg--MaxHeight);
   }
 }
 
@@ -241,11 +217,9 @@
 // Hero
 .pf-c-about-modal-box__hero {
   display: none; // Don't display the hero at the narrowest breakpoint
-  visibility: hidden;
 
   @media only screen and (min-width: $pf-global--breakpoint--sm) {
     display: block;
-    visibility: visible;
     background-image: var(--pf-c-about-modal-box__hero--sm--BackgroundImage);
     background-repeat: no-repeat;
     background-attachment: fixed;

package/components/Accordion/accordion.css

@@ -14,35 +14,37 @@
   --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-accordion__toggle--before--BackgroundColor: transparent;
   --pf-c-accordion__toggle--before--Top: 0;
+  --pf-c-accordion__toggle--after--Top: 0;
+  --pf-c-accordion__toggle--after--BackgroundColor: transparent;
   --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
-  --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
+  --pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
   --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
   --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200);
-  --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
-  --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
-  --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
-  --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg);
-  --pf-c-accordion__expanded-content-body--before--Top: 0;
+  --pf-c-accordion__expandable-content--Color: var(--pf-global--Color--200);
+  --pf-c-accordion__expandable-content--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
+  --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop: 0;
+  --pf-c-accordion__expandable-content-body--after--BackgroundColor: transparent;
+  --pf-c-accordion__expandable-content-body--after--Width: var(--pf-global--BorderWidth--lg);
+  --pf-c-accordion__expandable-content-body--before--Top: 0;
   --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
@@ -56,21 +58,21 @@
   --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
   --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100);
-  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
-  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-accordion--m-display-lg__expandable-content--Color: var(--pf-global--Color--100);
+  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop: 0;
+  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
-  --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
-  --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
-  --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-accordion--m-bordered__toggle--after--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
+  --pf-c-accordion--m-bordered__toggle--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-accordion--m-bordered__toggle--before--BorderTopWidth: 0;
+  --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor: var(--pf-global--BorderColor--100);
   color: var(--pf-global--Color--100);
   background-color: var(--pf-c-accordion--BackgroundColor);
 }
@@ -88,18 +90,18 @@
   --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
   --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
   --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
-  --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop);
-  --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight);
-  --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom);
-  --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft);
-  --pf-c-accordion__expanded-content--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize);
-  --pf-c-accordion__expanded-content--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color);
+  --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop);
+  --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight);
+  --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom);
+  --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft);
+  --pf-c-accordion__expandable-content--FontSize: var(--pf-c-accordion--m-display-lg__expandable-content--FontSize);
+  --pf-c-accordion__expandable-content--Color: var(--pf-c-accordion--m-display-lg__expandable-content--Color);
 }
-.pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child {
-  --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom);
+.pf-c-accordion.pf-m-display-lg .pf-c-accordion__expandable-content-body:last-child {
+  --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom);
 }
 .pf-c-accordion.pf-m-bordered {
-  --pf-c-accordion__toggle--before--Top: var(--pf-c-accordion--m-bordered__toggle--before--Top);
+  --pf-c-accordion__toggle--after--Top: var(--pf-c-accordion--m-bordered__toggle--after--Top);
   border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
 }
 .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle::before {
@@ -109,13 +111,13 @@
   bottom: 0;
   left: 0;
   content: "";
-  border: solid var(--pf-c-accordion--m-bordered__toggle--after--BorderColor);
-  border-width: var(--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth);
+  border: solid var(--pf-c-accordion--m-bordered__toggle--before--BorderColor);
+  border-width: var(--pf-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
 }
 .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded {
-  --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: 0;
+  --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
 }
-.pf-c-accordion.pf-m-bordered .pf-c-accordion__expanded-content.pf-m-expanded .pf-c-accordion__expanded-content-body:last-child::before {
+.pf-c-accordion.pf-m-bordered .pf-c-accordion__expandable-content.pf-m-expanded .pf-c-accordion__expandable-content-body:last-child::before {
   position: absolute;
   top: 0;
   right: 0;
@@ -123,7 +125,7 @@
   left: 0;
   pointer-events: none;
   content: "";
-  border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
+  border-bottom: var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
 }
 
 .pf-c-accordion__toggle {
@@ -139,15 +141,15 @@
 }
 .pf-c-accordion__toggle::after {
   position: absolute;
-  top: var(--pf-c-accordion__toggle--before--Top);
+  top: var(--pf-c-accordion__toggle--after--Top);
   bottom: 0;
   left: 0;
-  width: var(--pf-c-accordion__toggle--before--Width);
+  width: var(--pf-c-accordion__toggle--after--Width);
   content: "";
-  background-color: var(--pf-c-accordion__toggle--before--BackgroundColor);
+  background-color: var(--pf-c-accordion__toggle--after--BackgroundColor);
 }
 .pf-c-accordion__toggle.pf-m-expanded {
-  --pf-c-accordion__toggle--before--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--before--BackgroundColor);
+  --pf-c-accordion__toggle--after--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--after--BackgroundColor);
 }
 .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-text {
   font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
@@ -188,33 +190,33 @@
   transition: var(--pf-c-accordion__toggle-icon--Transition);
 }
 
-.pf-c-accordion__expanded-content {
-  font-size: var(--pf-c-accordion__expanded-content--FontSize);
-  color: var(--pf-c-accordion__expanded-content--Color);
+.pf-c-accordion__expandable-content {
+  font-size: var(--pf-c-accordion__expandable-content--FontSize);
+  color: var(--pf-c-accordion__expandable-content--Color);
 }
-.pf-c-accordion__expanded-content.pf-m-fixed {
-  max-height: var(--pf-c-accordion__expanded-content--m-fixed--MaxHeight);
+.pf-c-accordion__expandable-content.pf-m-fixed {
+  max-height: var(--pf-c-accordion__expandable-content--m-fixed--MaxHeight);
   overflow-y: auto;
 }
-.pf-c-accordion__expanded-content.pf-m-expanded {
-  --pf-c-accordion__expanded-content-body--before--BackgroundColor: var(--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor);
+.pf-c-accordion__expandable-content.pf-m-expanded {
+  --pf-c-accordion__expandable-content-body--after--BackgroundColor: var(--pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor);
 }
 
-.pf-c-accordion__expanded-content-body {
+.pf-c-accordion__expandable-content-body {
   position: relative;
-  padding: var(--pf-c-accordion__expanded-content-body--PaddingTop) var(--pf-c-accordion__expanded-content-body--PaddingRight) var(--pf-c-accordion__expanded-content-body--PaddingBottom) var(--pf-c-accordion__expanded-content-body--PaddingLeft);
+  padding: var(--pf-c-accordion__expandable-content-body--PaddingTop) var(--pf-c-accordion__expandable-content-body--PaddingRight) var(--pf-c-accordion__expandable-content-body--PaddingBottom) var(--pf-c-accordion__expandable-content-body--PaddingLeft);
 }
-.pf-c-accordion__expanded-content-body::after {
+.pf-c-accordion__expandable-content-body::after {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
-  width: var(--pf-c-accordion__expanded-content-body--before--Width);
+  width: var(--pf-c-accordion__expandable-content-body--after--Width);
   content: "";
-  background-color: var(--pf-c-accordion__expanded-content-body--before--BackgroundColor);
+  background-color: var(--pf-c-accordion__expandable-content-body--after--BackgroundColor);
 }
-.pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body {
-  --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
+.pf-c-accordion__expandable-content-body + .pf-c-accordion__expandable-content-body {
+  --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
 }
 
 :where(.pf-theme-dark) .pf-c-accordion {

package/components/Accordion/accordion.scss

@@ -7,41 +7,43 @@
   --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-accordion__toggle--before--BackgroundColor: transparent;
   --pf-c-accordion__toggle--before--Top: 0;
+  --pf-c-accordion__toggle--after--Top: 0;
+  --pf-c-accordion__toggle--after--BackgroundColor: transparent;
   --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
-  --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
+  --pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
 
   // accordion toggle text
   --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
   --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
   --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
-  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
 
   // accordion toggle icon
   --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
 
   // accordion expanded content
-  --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200);
-  --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-accordion__expanded-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
-  --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
-  --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
-  --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg);
-  --pf-c-accordion__expanded-content-body--before--Top: 0;
+  --pf-c-accordion__expandable-content--Color: var(--pf-global--Color--200);
+  --pf-c-accordion__expandable-content--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-accordion__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
+  --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop: 0;
+  --pf-c-accordion__expandable-content-body--after--BackgroundColor: transparent;
+  --pf-c-accordion__expandable-content-body--after--Width: var(--pf-global--BorderWidth--lg);
+  --pf-c-accordion__expandable-content-body--before--Top: 0;
 
   // large
   --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
@@ -57,23 +59,23 @@
   --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
   --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100);
-  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
-  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-accordion--m-display-lg__expandable-content--Color: var(--pf-global--Color--100);
+  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop: 0;
+  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft: var(--pf-global--spacer--lg);
 
   // bordered
   --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
-  --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
-  --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
-  --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-accordion--m-bordered__toggle--after--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
+  --pf-c-accordion--m-bordered__toggle--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-accordion--m-bordered__toggle--before--BorderTopWidth: 0;
+  --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor: var(--pf-global--BorderColor--100);
 
   // This component always needs to be light
   @include pf-t-light;
@@ -94,24 +96,23 @@
     --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
     --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
     --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
-    --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop);
-    --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight);
-    --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom);
-    --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft);
-    --pf-c-accordion__expanded-content--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize);
-    --pf-c-accordion__expanded-content--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color);
-
-    .pf-c-accordion__expanded-content-body:last-child {
-      --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom);
+    --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop);
+    --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight);
+    --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom);
+    --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft);
+    --pf-c-accordion__expandable-content--FontSize: var(--pf-c-accordion--m-display-lg__expandable-content--FontSize);
+    --pf-c-accordion__expandable-content--Color: var(--pf-c-accordion--m-display-lg__expandable-content--Color);
+
+    .pf-c-accordion__expandable-content-body:last-child {
+      --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom);
     }
   }
 
   &.pf-m-bordered {
-    --pf-c-accordion__toggle--before--Top: var(--pf-c-accordion--m-bordered__toggle--before--Top);
+    --pf-c-accordion__toggle--after--Top: var(--pf-c-accordion--m-bordered__toggle--after--Top);
 
     border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
 
-    // rename --after vars to --before in breaking change release
     .pf-c-accordion__toggle {
       &::before {
         position: absolute;
@@ -120,20 +121,19 @@
         bottom: 0;
         left: 0;
         content: "";
-        border: solid var(--pf-c-accordion--m-bordered__toggle--after--BorderColor);
-        border-width: var(--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth);
+        border: solid var(--pf-c-accordion--m-bordered__toggle--before--BorderColor);
+        border-width: var(--pf-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
       }
 
       &.pf-m-expanded {
-        --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: 0;
+        --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
       }
     }
 
-    // rename --after vars to --before in breaking change release
     // stylelint-disable selector-max-class, max-nesting-depth
-    .pf-c-accordion__expanded-content {
+    .pf-c-accordion__expandable-content {
       &.pf-m-expanded {
-        .pf-c-accordion__expanded-content-body:last-child {
+        .pf-c-accordion__expandable-content-body:last-child {
           &::before {
             position: absolute;
             top: 0;
@@ -142,7 +142,7 @@
             left: 0;
             pointer-events: none;
             content: "";
-            border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
+            border-bottom: var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
           }
         }
       }
@@ -162,19 +162,18 @@
   font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
   border: 0;
 
-  // rename --before vars to --after in breaking change release
   &::after {
     position: absolute;
-    top: var(--pf-c-accordion__toggle--before--Top);
+    top: var(--pf-c-accordion__toggle--after--Top);
     bottom: 0;
     left: 0;
-    width: var(--pf-c-accordion__toggle--before--Width);
+    width: var(--pf-c-accordion__toggle--after--Width);
     content: "";
-    background-color: var(--pf-c-accordion__toggle--before--BackgroundColor);
+    background-color: var(--pf-c-accordion__toggle--after--BackgroundColor);
   }
 
   &.pf-m-expanded {
-    --pf-c-accordion__toggle--before--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--before--BackgroundColor);
+    --pf-c-accordion__toggle--after--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--after--BackgroundColor);
 
     .pf-c-accordion__toggle-text {
       font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
@@ -223,37 +222,36 @@
   transition: var(--pf-c-accordion__toggle-icon--Transition);
 }
 
-.pf-c-accordion__expanded-content {
-  font-size: var(--pf-c-accordion__expanded-content--FontSize);
-  color: var(--pf-c-accordion__expanded-content--Color);
+.pf-c-accordion__expandable-content {
+  font-size: var(--pf-c-accordion__expandable-content--FontSize);
+  color: var(--pf-c-accordion__expandable-content--Color);
 
   &.pf-m-fixed {
-    max-height: var(--pf-c-accordion__expanded-content--m-fixed--MaxHeight);
+    max-height: var(--pf-c-accordion__expandable-content--m-fixed--MaxHeight);
     overflow-y: auto;
   }
 
   &.pf-m-expanded {
-    --pf-c-accordion__expanded-content-body--before--BackgroundColor: var(--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor);
+    --pf-c-accordion__expandable-content-body--after--BackgroundColor: var(--pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor);
   }
 }
 
-.pf-c-accordion__expanded-content-body {
+.pf-c-accordion__expandable-content-body {
   position: relative;
-  padding: var(--pf-c-accordion__expanded-content-body--PaddingTop) var(--pf-c-accordion__expanded-content-body--PaddingRight) var(--pf-c-accordion__expanded-content-body--PaddingBottom) var(--pf-c-accordion__expanded-content-body--PaddingLeft);
+  padding: var(--pf-c-accordion__expandable-content-body--PaddingTop) var(--pf-c-accordion__expandable-content-body--PaddingRight) var(--pf-c-accordion__expandable-content-body--PaddingBottom) var(--pf-c-accordion__expandable-content-body--PaddingLeft);
 
-  // rename --before vars to --after in breaking change release
   &::after {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
-    width: var(--pf-c-accordion__expanded-content-body--before--Width);
+    width: var(--pf-c-accordion__expandable-content-body--after--Width);
     content: "";
-    background-color: var(--pf-c-accordion__expanded-content-body--before--BackgroundColor);
+    background-color: var(--pf-c-accordion__expandable-content-body--after--BackgroundColor);
   }
 
   & + & {
-    --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
+    --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
   }
 }
 

package/components/Alert/alert.css

@@ -199,10 +199,6 @@
   margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight);
 }
 
-.pf-m-overpass-font .pf-c-alert__title {
-  --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
-}
-
 :where(.pf-theme-dark) .pf-c-alert {
   --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
   --pf-c-alert__title--Color: var(--pf-global--default-color--200);

package/components/Alert/alert.scss

@@ -240,13 +240,6 @@
   }
 }
 
-// RedHat Font overrides
-@include pf-m-overpass-font {
-  .pf-c-alert__title {
-    --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
-  }
-}
-
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/alert";
 

package/components/Banner/banner.css

@@ -52,7 +52,7 @@
   --pf-c-banner--link--Color: var(--pf-c-banner--Color);
   --pf-c-banner--link--TextDecoration: underline;
   --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
-  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
   --pf-c-banner--link--disabled--TextDecoration: none;
   --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);

package/components/Banner/banner.scss

@@ -18,7 +18,7 @@
   --pf-c-banner--link--Color: var(--pf-c-banner--Color);
   --pf-c-banner--link--TextDecoration: underline;
   --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
-  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
   --pf-c-banner--link--disabled--TextDecoration: none;
 

package/components/Breadcrumb/breadcrumb.css

@@ -85,14 +85,8 @@ button.pf-c-breadcrumb__link {
   white-space: normal;
 }
 
-.pf-m-overpass-font .pf-c-breadcrumb__link,
-.pf-m-overpass-font .pf-c-breadcrumb__item {
-  font-weight: var(--pf-global--FontWeight--semi-bold);
-}
-
 .pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
   display: none;
-  visibility: hidden;
 }
 
 :where(.pf-theme-dark) .pf-c-breadcrumb {

package/components/Breadcrumb/breadcrumb.scss

@@ -111,19 +111,10 @@
   white-space: normal;
 }
 
-// RedHat Font overrides
-@include pf-m-overpass-font {
-  .pf-c-breadcrumb__link,
-  .pf-c-breadcrumb__item {
-    font-weight: var(--pf-global--FontWeight--semi-bold);
-  }
-}
-
 // Hide divider of first child - required for react since dividers are included in each item
 // Consider revisiting this in a breaking change release
 .pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
   display: none;
-  visibility: hidden;
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/components/Button/button.css

@@ -501,10 +501,6 @@
   margin-left: var(--pf-c-button__count--MarginLeft);
 }
 
-.pf-m-overpass-font .pf-c-button {
-  --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
-}
-
 :where(.pf-theme-dark) .pf-c-button {
   --pf-c-button--disabled--Color: var(--pf-global--disabled-color--300);
   --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);