@patternfly/patternfly 5.0.0-alpha.6 → 5.0.0-alpha.8

package/base/_common.scss

@@ -1,26 +1,4 @@
 // Set common reset styles for patternfly components
-// remove in breaking change. this should come from globals, and can be opted out
-[class*="pf-c-"] {
-  &,
-  &::before,
-  &::after {
-    padding: 0;
-    margin: 0;
-    background-color: transparent;
-  }
-}
-
-// remove in breaking change
-@if $pf-global--unset-root-font-size {
-  // Since PF3 sets root font size to 10px, we need to unset it.
-  // This doesn't affect PF3.
-  // https://github.com/twbs/bootstrap/blob/v3.4.0/less/scaffolding.less#L23
-  // stylelint-disable
-  html {
-    font-size: var(--pf-global--root--FontSize, unset) !important; // the important is needed because we don't know if pf3 will be loaded after pfnext
-  }
-  // stylelint-enable
-}
 
 .pf-screen-reader {
   @include pf-u-screen-reader; // for use with assistive technologies

package/base/patternfly-common.css

@@ -1,13 +1,3 @@
-[class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-}
-
-html {
-  font-size: var(--pf-global--root--FontSize, unset) !important;
-}
-
 .pf-screen-reader {
   position: fixed;
   top: 0;

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,

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

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

package/components/ChipGroup/chip-group.scss

@@ -1,11 +1,24 @@
 .pf-c-chip-group {
   @include pf-t-light; // force the container follow the light theme
 
-  // Chip group list
-  --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);
+  // Chip group - spaces main and close
+  // column-gap spacer supports legacy chip group
+  --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);
 
-  // Category
+  // Chip group main - spaces the category label and list
+  --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
+
+  // Chip group list - spaces the chips
+  --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
+
+  // Category modifier
   --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);
@@ -14,25 +27,29 @@
   --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
 
   // Label in group
-  --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;
 
-  // Chip group close
+  // Chip group close - negative margin stretches height for click area
+  // margin-left supports legacy chip group
   --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);
-
-  // Chip
-  --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-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);
   }
@@ -44,11 +61,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,
@@ -59,18 +73,20 @@
   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 {
   @include pf-text-overflow;
 
   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);
 }
 
@@ -79,4 +95,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);
 }

package/components/EmptyState/empty-state.css

@@ -3,38 +3,39 @@
   --pf-c-empty-state--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-empty-state--PaddingBottom: var(--pf-global--spacer--xl);
   --pf-c-empty-state--PaddingLeft: var(--pf-global--spacer--xl);
+  --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-empty-state__content--MaxWidth: none;
+  --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
+  --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
+  --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
   --pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
   --pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
   --pf-c-empty-state__icon--Color: var(--pf-global--icon--Color--light);
-  --pf-c-empty-state__content--c-title--m-lg--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
+  --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
+  --pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
+  --pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
   --pf-c-empty-state__body--Color: var(--pf-global--Color--200);
-  --pf-c-empty-state__primary--MarginTop: var(--pf-global--spacer--xl);
-  --pf-c-empty-state__primary--secondary--MarginTop: var(--pf-global--spacer--sm);
-  --pf-c-empty-state__secondary--MarginTop: var(--pf-global--spacer--xl);
-  --pf-c-empty-state__secondary--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-empty-state__secondary--child--MarginRight: calc(var(--pf-global--spacer--xs) / 2);
-  --pf-c-empty-state__secondary--child--MarginBottom: var(--pf-global--spacer--xs);
-  --pf-c-empty-state__secondary--child--MarginLeft: calc(var(--pf-global--spacer--xs) / 2);
-  --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
+  --pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-empty-state--m-xs__body--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-empty-state--m-xs--button--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-empty-state--m-xs__body--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs__primary--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs__secondary--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
-  --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
   --pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-empty-state--m-xl__body--MarginTop: var(--pf-global--spacer--lg);
-  --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
-  --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
-  --pf-c-empty-state--m-xl--c-button__secondary--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
+  --pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,17 +47,12 @@
   --pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
   --pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
   --pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
+  --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
   --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
   --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
   --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
-  --pf-c-empty-state__primary--MarginTop: var(--pf-c-empty-state--m-xs__primary--MarginTop);
-  --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
-}
-.pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
-  font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
-}
-.pf-c-empty-state.pf-m-xs .pf-c-button {
-  --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
+  --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
+  --pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
 }
 .pf-c-empty-state.pf-m-sm {
   --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
@@ -66,12 +62,11 @@
 }
 .pf-c-empty-state.pf-m-xl {
   --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
+  --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
   --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
   --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
-  --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
-}
-.pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
-  font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
+  --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
+  --pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
 }
 .pf-c-empty-state.pf-m-full-height {
   height: 100%;
@@ -80,39 +75,38 @@
 .pf-c-empty-state__content {
   max-width: var(--pf-c-empty-state__content--MaxWidth);
 }
-.pf-c-empty-state__content > .pf-c-title.pf-m-lg {
-  font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
-}
 
 .pf-c-empty-state__icon {
   margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
   font-size: var(--pf-c-empty-state__icon--FontSize);
+  line-height: 1;
   color: var(--pf-c-empty-state__icon--Color);
 }
 
+.pf-c-empty-state__title-text {
+  font-family: var(--pf-c-empty-state__title-text--FontFamily);
+  font-size: var(--pf-c-empty-state__title-text--FontSize);
+  font-weight: var(--pf-c-empty-state__title-text--FontWeight);
+  line-height: var(--pf-c-empty-state__title-text--LineHeight);
+}
+
 .pf-c-empty-state__body {
   margin-top: var(--pf-c-empty-state__body--MarginTop);
+  font-size: var(--pf-c-empty-state--body--FontSize);
   color: var(--pf-c-empty-state__body--Color);
 }
 
-.pf-c-empty-state__content > .pf-c-button.pf-m-primary,
-.pf-c-empty-state__primary {
-  margin-top: var(--pf-c-empty-state__primary--MarginTop);
-}
-.pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
-.pf-c-empty-state__primary + .pf-c-empty-state__secondary {
-  margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
+.pf-c-empty-state__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: var(--pf-c-empty-state__footer--RowGap);
+  margin-top: var(--pf-c-empty-state__footer--MarginTop);
 }
 
-.pf-c-empty-state__secondary {
+.pf-c-empty-state__actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  margin-top: var(--pf-c-empty-state__secondary--MarginTop);
-  margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
-}
-.pf-c-empty-state__secondary > * {
-  margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
-  margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
-  margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
+  gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
 }