@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

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);

package/components/Button/button.scss

@@ -652,13 +652,6 @@
   margin-left: var(--pf-c-button__count--MarginLeft);
 }
 
-// RedHat Font overrides
-@include pf-m-overpass-font {
-  .pf-c-button {
-    --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  }
-}
-
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/button";
 

package/components/CalendarMonth/calendar-month.css

@@ -16,7 +16,7 @@
   --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-calendar-month__header-year--Width: 8.5ch;
+  --pf-c-calendar-month__header-year--Width: 8ch;
   --pf-c-calendar-month__header-nav-control--MarginRight: 0;
   --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
   --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;

package/components/CalendarMonth/calendar-month.scss

@@ -8,7 +8,7 @@
 
   // header
   --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-calendar-month__header-year--Width: 8.5ch;
+  --pf-c-calendar-month__header-year--Width: 8ch;
   --pf-c-calendar-month__header-nav-control--MarginRight: 0;
   --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
   --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0; // remove in breaking change

package/components/Card/card.css

@@ -13,7 +13,9 @@
   --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
   --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
@@ -84,7 +86,6 @@
   --pf-c-card--m-plain--BackgroundColor: transparent;
   --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
   --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
   display: flex;
@@ -230,13 +231,11 @@
   --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
   --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
 }
-.pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
-  --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
-}
 .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
   order: 2;
 }
-.pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
+
+.pf-c-card__header-main {
   flex: 1;
 }
 
@@ -262,10 +261,8 @@
   align-self: flex-start;
   order: 1;
   padding-left: var(--pf-c-card__actions--PaddingLeft);
-  margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
-}
-.pf-c-card__actions > * + * {
-  margin-left: var(--pf-c-card__actions--child--MarginLeft);
+  margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
+  gap: var(--pf-c-card__actions--Gap);
 }
 .pf-c-card__actions + .pf-c-card__title,
 .pf-c-card__actions + .pf-c-card__body,
@@ -273,8 +270,8 @@
   padding: 0;
 }
 .pf-c-card__actions.pf-m-no-offset {
-  --pf-c-card__header-toggle--MarginTop: 0;
-  --pf-c-card__header-toggle--MarginBottom: 0;
+  --pf-c-card__actions--MarginTop: 0;
+  --pf-c-card__actions--MarginBottom: 0;
 }
 
 .pf-c-card__header,
@@ -323,10 +320,6 @@
   border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
 }
 
-.pf-m-overpass-font .pf-c-card .pf-c-card__title {
-  font-weight: var(--pf-global--FontWeight--normal);
-}
-
 :where(.pf-theme-dark) .pf-c-card,
 :where(.pf-theme-dark) .pf-c-card.pf-m-non-selectable-raised {
   --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);

package/components/Card/card.scss

@@ -13,7 +13,9 @@
   --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
 
   // Expandable
   --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
@@ -104,7 +106,6 @@
   // Toggle right
   --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
 
   // Card input
   --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
@@ -295,20 +296,16 @@
     --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
     --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
 
-    .pf-c-card__actions {
-      --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
-    }
-
     .pf-c-card__header-toggle {
       order: 2;
     }
-
-    .pf-c-card__title {
-      flex: 1;
-    }
   }
 }
 
+.pf-c-card__header-main {
+  flex: 1;
+}
+
 .pf-c-card__header-toggle {
   align-self: flex-start;
   margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) var(--pf-c-card__header-toggle--MarginLeft);
@@ -331,11 +328,8 @@
   align-self: flex-start;
   order: 1;
   padding-left: var(--pf-c-card__actions--PaddingLeft);
-  margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
-
-  > * + * {
-    margin-left: var(--pf-c-card__actions--child--MarginLeft);
-  }
+  margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
+  gap: var(--pf-c-card__actions--Gap);
 
   + .pf-c-card__title,
   + .pf-c-card__body,
@@ -344,8 +338,8 @@
   }
 
   &.pf-m-no-offset {
-    --pf-c-card__header-toggle--MarginTop: 0;
-    --pf-c-card__header-toggle--MarginBottom: 0;
+    --pf-c-card__actions--MarginTop: 0;
+    --pf-c-card__actions--MarginBottom: 0;
   }
 }
 
@@ -395,13 +389,6 @@
   border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
 }
 
-// RedHat Font overrides
-@include pf-m-overpass-font {
-  .pf-c-card .pf-c-card__title {
-    font-weight: var(--pf-global--FontWeight--normal);
-  }
-}
-
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/card";
 

package/components/Check/check.css

@@ -16,8 +16,6 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-c-check--GridGap);
-  align-items: start;
-  justify-items: start;
 }
 .pf-c-check.pf-m-standalone {
   --pf-c-check--GridGap: 0;
@@ -50,6 +48,10 @@
   margin-top: var(--pf-c-check__body--MarginTop);
 }
 
+.pf-c-check__label,
+.pf-c-check__input {
+  justify-self: start;
+}
 label.pf-c-check, .pf-c-check__label,
 .pf-c-check__input {
   cursor: pointer;

package/components/Check/check.scss

@@ -19,8 +19,6 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-c-check--GridGap);
-  align-items: start;
-  justify-items: start;
 
   &.pf-m-standalone {
     --pf-c-check--GridGap: 0;
@@ -57,6 +55,8 @@
 
 .pf-c-check__label,
 .pf-c-check__input {
+  justify-self: start;
+
   @at-root label.pf-c-check,
   & {
     cursor: pointer;

package/components/ChipGroup/chip-group.css

@@ -10,28 +10,40 @@
 
 .pf-c-chip-group {
   color: var(--pf-global--Color--100);
-  --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-chip-group--PaddingTop: 0;
+  --pf-c-chip-group--PaddingRight: 0;
+  --pf-c-chip-group--PaddingBottom: 0;
+  --pf-c-chip-group--PaddingLeft: 0;
+  --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-chip-group__label--MaxWidth: 18ch;
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
   max-width: 100%;
+  padding-top: var(--pf-c-chip-group--PaddingTop);
+  padding-right: var(--pf-c-chip-group--PaddingRight);
+  padding-bottom: var(--pf-c-chip-group--PaddingBottom);
+  padding-left: var(--pf-c-chip-group--PaddingLeft);
+  row-gap: var(--pf-c-chip-group--RowGap);
+  column-gap: var(--pf-c-chip-group--ColumnGap);
 }
 .pf-c-chip-group.pf-m-category {
-  padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
-  padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
-  padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
-  padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
+  --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
+  --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
+  --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
+  --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
   background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
   border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
 }
@@ -42,11 +54,8 @@
   flex-wrap: wrap;
   align-items: baseline;
   min-width: 0;
-}
-
-.pf-c-chip-group__list {
-  margin-right: var(--pf-c-chip-group__list--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
+  row-gap: var(--pf-c-chip-group__main--RowGap);
+  column-gap: var(--pf-c-chip-group__main--ColumnGap);
 }
 
 .pf-c-chip-group,
@@ -57,11 +66,14 @@
   min-width: 0;
 }
 
+.pf-c-chip-group__list {
+  row-gap: var(--pf-c-chip-group__list--RowGap);
+  column-gap: var(--pf-c-chip-group__list--ColumnGap);
+}
+
 .pf-c-chip-group__list-item {
   display: inline-flex;
   min-width: 0;
-  margin-right: var(--pf-c-chip-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
 }
 
 .pf-c-chip-group__label {
@@ -69,7 +81,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: var(--pf-c-chip-group__label--MaxWidth);
-  margin-right: var(--pf-c-chip-group__label--MarginRight);
   font-size: var(--pf-c-chip-group__label--FontSize);
 }
 
@@ -78,4 +89,5 @@
   align-self: flex-start;
   margin-top: var(--pf-c-chip-group__close--MarginTop);
   margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
+  margin-left: var(--pf-c-chip-group__close--MarginLeft);
 }