@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

package/base/patternfly-variables.css

@@ -202,17 +202,15 @@
   --pf-global--icon--FontSize--md: 1.125rem;
   --pf-global--icon--FontSize--lg: 1.5rem;
   --pf-global--icon--FontSize--xl: 3.375rem;
-  --pf-global--FontFamily--sans-serif: "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
-  --pf-global--FontFamily--heading--sans-serif: "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--sans-serif: "RedHatText", helvetica, arial, sans-serif;
+  --pf-global--FontFamily--heading--sans-serif: "RedHatDisplay", helvetica, arial, sans-serif;
   --pf-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
-  --pf-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", helvetica, arial, sans-serif;
   --pf-global--FontFamily--redhat--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
-  --pf-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif;
   --pf-global--FontFamily--redhatVF--monospace: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-global--FontFamily--overpass--sans-serif: "overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --pf-global--FontFamily--overpass--monospace: "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
   --pf-global--FontSize--4xl: 2.25rem;
   --pf-global--FontSize--3xl: 1.75rem;
   --pf-global--FontSize--2xl: 1.5rem;
@@ -223,10 +221,7 @@
   --pf-global--FontSize--xs: 0.75rem;
   --pf-global--FontWeight--light: 300;
   --pf-global--FontWeight--normal: 400;
-  --pf-global--FontWeight--semi-bold: 700;
-  --pf-global--FontWeight--overpass--semi-bold: 500;
   --pf-global--FontWeight--bold: 700;
-  --pf-global--FontWeight--overpass--bold: 600;
   --pf-global--LineHeight--sm: 1.3;
   --pf-global--LineHeight--md: 1.5;
   --pf-global--ListStyle: disc outside;
@@ -239,14 +234,6 @@
   --pf-global--target-size--MinHeight: 44px;
 }
 
-.pf-m-overpass-font {
-  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
-  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
-  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
-  --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
-  --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
-}
-
 .pf-m-redhat-updated-font {
   --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhat-updated--sans-serif);
   --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif);

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

@@ -31,22 +31,9 @@
 
 .pf-c-about-modal-box {
   --pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000);
-  --pf-c-about-modal-box--BoxShadow: 0 0 100px 0 rgba(255, 255, 255, .05);
-  --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: 47.625rem;
-  --pf-c-about-modal-box--lg--MaxHeight: calc(100% - var(--pf-global--spacer--xl));
-  --pf-c-about-modal-box--Width: 100vw;
-  --pf-c-about-modal-box--lg--Width: calc(100% - (var(--pf-global--spacer--3xl) * 2));
-  --pf-c-about-modal-box--lg--MaxWidth: 77rem;
-  --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;
   --pf-c-about-modal-box__brand--PaddingTop: var(--pf-global--spacer--2xl);
@@ -92,7 +79,6 @@
   --pf-c-about-modal-box__content--sm--MarginLeft: var(--pf-global--spacer--3xl);
   color: var(--pf-global--Color--100);
   position: relative;
-  z-index: var(--pf-c-about-modal-box--ZIndex);
   display: grid;
   grid-template-rows: max-content max-content auto;
   grid-template-areas: "brand close" "header header" "content content";
@@ -101,15 +87,6 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--pf-c-about-modal-box--BackgroundColor);
-  box-shadow: var(--pf-c-about-modal-box--BoxShadow);
-}
-@media screen and (min-width: 576px) {
-  .pf-c-about-modal-box {
-    --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);
-  }
 }
 @media screen and (min-width: 576px) {
   .pf-c-about-modal-box {
@@ -160,8 +137,6 @@
     --pf-c-about-modal-box--Width: var(--pf-c-about-modal-box--lg--Width);
     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);
   }
 }
 
@@ -247,12 +222,10 @@
 
 .pf-c-about-modal-box__hero {
   display: none;
-  visibility: hidden;
 }
 @media only screen and (min-width: 576px) {
   .pf-c-about-modal-box__hero {
     display: block;
-    visibility: visible;
     background-image: var(--pf-c-about-modal-box__hero--sm--BackgroundImage);
     background-repeat: no-repeat;
     background-attachment: fixed;

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 {