@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/EmptyState/empty-state.scss

@@ -1,14 +1,14 @@
 // @debug $empty-state; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$empty-state} {
-  --#{$empty-state}--PaddingTop: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--PaddingRight: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--PaddingBottom: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--PaddingLeft: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--m-xs--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xs--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xs--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xs--PaddingLeft: var(--#{$pf-global}--spacer--md);
+:root {
+  --#{$empty-state}--PaddingTop: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$empty-state}--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$empty-state}--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$empty-state}--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
 
   // Content
   --#{$empty-state}__content--MaxWidth: none;
@@ -17,40 +17,49 @@
   --#{$empty-state}--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
 
   // Icon
-  --#{$empty-state}__icon--MarginBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$empty-state}__icon--FontSize: var(--#{$pf-global}--icon--FontSize--xl);
-  --#{$empty-state}__icon--Color: var(--#{$pf-global}--icon--Color--light);
-  --#{$empty-state}--m-xs__icon--MarginBottom: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xl__icon--MarginBottom: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--m-xl__icon--FontSize: #{pf-size-prem(100px)};
+  --#{$empty-state}__icon--MarginBottom: var(--pf-t--global--spacer--lg);
+  --#{$empty-state}__icon--FontSize: var(--pf-t--global--icon--size--2xl);
+  --#{$empty-state}__icon--Color: var(--pf-t--global--icon--color--subtle);
+  --#{$empty-state}--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
+  --#{$empty-state}--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
+
+  // Status variant icon color
+  --#{$empty-state}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$empty-state}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --#{$empty-state}--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --#{$empty-state}--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --#{$empty-state}--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
 
   // Title text
-  --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
-  --#{$empty-state}__title-text--FontSize: var(--#{$pf-global}--FontSize--xl);
-  --#{$empty-state}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$empty-state}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$empty-state}--m-xs__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$empty-state}--m-xl__title-text--FontSize: var(--#{$pf-global}--FontSize--4xl);
-  --#{$empty-state}--m-xl__title-text--LineHeight: var(--#{$pf-global}--LineHeight--sm);
+  --#{$empty-state}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$empty-state}__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
+  --#{$empty-state}__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$empty-state}__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$empty-state}--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$empty-state}--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
+  --#{$empty-state}--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
 
   // Body
-  --#{$empty-state}__body--MarginTop: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}__body--Color: var(--#{$pf-global}--Color--200);
-  --#{$empty-state}--body--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$empty-state}--m-xs__body--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$empty-state}--m-xs__body--MarginTop: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xl__body--FontSize: var(--#{$pf-global}--FontSize--xl);
-  --#{$empty-state}--m-xl__body--MarginTop: var(--#{$pf-global}--spacer--lg);
+  --#{$empty-state}__body--MarginTop: var(--pf-t--global--spacer--md);
+  --#{$empty-state}__body--Color: var(--pf-t--global--text--color--subtle);
+  --#{$empty-state}--body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$empty-state}--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$empty-state}--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
+  --#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$empty-state}--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
 
   // Footer
-  --#{$empty-state}__footer--RowGap: var(--#{$pf-global}--spacer--sm);
-  --#{$empty-state}__footer--MarginTop: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--m-xs__footer--MarginTop: var(--#{$pf-global}--spacer--md);
+  --#{$empty-state}__footer--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$empty-state}__footer--MarginTop: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
 
   // Actions
-  --#{$empty-state}__actions--RowGap: var(--#{$pf-global}--spacer--xs);
-  --#{$empty-state}__actions--ColumnGap: var(--#{$pf-global}--spacer--xs);
+  --#{$empty-state}__actions--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$empty-state}__actions--ColumnGap: var(--pf-t--global--spacer--md);
+}
 
+.#{$empty-state} {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -93,6 +102,26 @@
   &.pf-m-full-height {
     height: 100%;
   }
+
+  &.pf-m-danger {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-danger__icon--Color);
+  }
+
+  &.pf-m-warning {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-warning__icon--Color);
+  }
+
+  &.pf-m-success {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-success__icon--Color);
+  }
+
+  &.pf-m-info {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-info__icon--Color);
+  }
+
+  &.pf-m-custom {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-custom__icon--Color);
+  }
 }
 
 .#{$empty-state}__content {

package/components/ExpandableSection/expandable-section.css

@@ -1,50 +1,59 @@
-.pf-v5-c-expandable-section {
-  --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
-  --pf-v5-c-expandable-section__toggle--MarginTop: 0;
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
+:root {
+  --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
+  --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
   --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
-  --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
   --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
   --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
-  --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
-  --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section__content--MaxWidth: auto;
   --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
-  --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
-  --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
-  --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
-  --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section__toggle-text--MarginLeft) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
+  --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
+  --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
+  --pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v5-c-expandable-section__toggle--ColumnGap) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
+  --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section__toggle--PaddingLeft));
+  --pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft));
+  --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
-  --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
 }
+
 .pf-v5-c-expandable-section.pf-m-expanded {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
+  --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section--m-expanded__toggle-text--Color);
   --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
   --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
   --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
-}
-.pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
-  --pf-v5-c-expandable-section__content--MarginTop: 0;
+  --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
 }
 .pf-v5-c-expandable-section.pf-m-limit-width {
   --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -54,31 +63,31 @@
   --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
   --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
   --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
+  --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
+  --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
+  --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
+  --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
+  --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
   --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
   --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
   --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
-  --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
-  position: relative;
-  box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
-}
-.pf-v5-c-expandable-section.pf-m-display-lg::after {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
-  content: "";
-  background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
+  --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
+  background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
+  border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
+  border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
 }
 .pf-v5-c-expandable-section.pf-m-indented {
   --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
 }
 .pf-v5-c-expandable-section.pf-m-truncate {
-  --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
   --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
   --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
-  --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
-  --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
+  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
+  --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
+  --pf-v5-c-expandable-section__content--PaddingTop: 0;
+  --pf-v5-c-expandable-section__content--PaddingRight: 0;
+  --pf-v5-c-expandable-section__content--PaddingBottom: 0;
+  --pf-v5-c-expandable-section__content--PaddingLeft: 0;
 }
 .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
   display: -webkit-box;
@@ -86,29 +95,22 @@
   -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
   overflow: hidden;
 }
-.pf-v5-c-expandable-section.pf-m-detached {
-  --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
-}
 
 .pf-v5-c-expandable-section__toggle {
   display: flex;
+  column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
+  width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
   padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
   padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
-  margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
-  color: var(--pf-v5-c-expandable-section__toggle--Color);
   background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
   border: none;
+  border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
 }
-.pf-v5-c-expandable-section__toggle:hover {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
-}
-.pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
-}
-.pf-v5-c-expandable-section__toggle:focus {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
+.pf-v5-c-expandable-section__toggle:is(:hover, :focus) {
+  --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section__toggle-text--hover--Color);
+  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
 }
 
 .pf-v5-c-expandable-section__toggle-icon {
@@ -126,13 +128,13 @@
 }
 
 .pf-v5-c-expandable-section__toggle-text {
-  margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
+  color: var(--pf-v5-c-expandable-section__toggle-text--Color);
 }
 
 .pf-v5-c-expandable-section__content {
   max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
+  padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
   padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
-  margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
 }

package/components/ExpandableSection/expandable-section.scss

@@ -1,70 +1,79 @@
 // @debug $expandable-section; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$expandable-section} {
+:root {
   // Toggle
-  --#{$expandable-section}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$expandable-section}__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$expandable-section}__toggle--PaddingLeft: 0;
-  --#{$expandable-section}__toggle--MarginTop: 0;
-  --#{$expandable-section}__toggle--Color: var(--#{$pf-global}--link--Color);
-  --#{$expandable-section}__toggle--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$expandable-section}__toggle--active--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$expandable-section}__toggle--focus--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$expandable-section}__toggle--m-expanded--Color: var(--#{$pf-global}--link--Color--hover);
+  --#{$expandable-section}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__toggle--BackgroundColor: transparent;
-
+  --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
+  
   // Toggle icon
   --#{$expandable-section}__toggle-icon--MinWidth: 1em;
-  --#{$expandable-section}__toggle-icon--Color: var(--#{$pf-global}--Color--100);
+  --#{$expandable-section}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$expandable-section}__toggle-icon--Transition: .2s ease-in 0s;
   --#{$expandable-section}__toggle-icon--Rotate: 0;
   --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
   --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
   --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
-
+  
   // Toggle text
-  --#{$expandable-section}__toggle-text--MarginLeft: calc(var(--#{$pf-global}--spacer--xs) + var(--#{$pf-global}--spacer--sm));
+  --#{$expandable-section}__toggle-text--Color: var(--pf-t--global--color--brand--default);
+  --#{$expandable-section}__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
+  --#{$expandable-section}--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
+
 
   // Content
-  --#{$expandable-section}__content--MarginTop: var(--#{$pf-global}--spacer--md);
+  --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}__content--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__content--MaxWidth: auto;
-
+  
   // Limit Width
   --#{$expandable-section}--m-limit-width__content--MaxWidth: #{pf-size-prem(750px)};
+  
+  // Large / Disclosure
+  --#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$expandable-section}--m-display-lg__toggle--Width: 100%;
+  --#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
 
-  // Large
-  --#{$expandable-section}--m-display-lg--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$expandable-section}--m-display-lg__content--MarginTop: 0;
-  --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$expandable-section}--m-display-lg--after--BackgroundColor: transparent;
-  --#{$expandable-section}--m-display-lg--after--Width: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
 
   // Indented
-  --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}__toggle-text--MarginLeft) + var(--#{$expandable-section}__toggle-icon--MinWidth));
-
+  --#{$expandable-section}--m-indented__content--PaddingLeft--base: calc(var(--#{$expandable-section}__toggle--ColumnGap) + var(--#{$expandable-section}__toggle-icon--MinWidth));
+  --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}__toggle--PaddingLeft));
+  --#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}--m-display-lg__content--PaddingLeft));
+  
   // Truncate
+  --#{$expandable-section}--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$expandable-section}--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$expandable-section}--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}--m-truncate__content--LineClamp: 3;
-  --#{$expandable-section}--m-truncate__toggle--MarginTop: var(--#{$pf-global}--spacer--xs);
-
+}
 
+.#{$expandable-section} {
   &.pf-m-expanded {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--m-expanded--Color);
+    --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}--m-expanded__toggle-text--Color);
     --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
     --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
     --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
-  }
-
-  &.pf-m-detached,
-  &.pf-m-truncate {
-    --#{$expandable-section}__content--MarginTop: 0;
+    --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius);
   }
 
   &.pf-m-limit-width {
@@ -76,23 +85,19 @@
     --#{$expandable-section}__toggle--PaddingRight: var(--#{$expandable-section}--m-display-lg__toggle--PaddingRight);
     --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBottom);
     --#{$expandable-section}__toggle--PaddingLeft: var(--#{$expandable-section}--m-display-lg__toggle--PaddingLeft);
+    --#{$expandable-section}__toggle--hover--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor);
+    --#{$expandable-section}__toggle--active--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor);
+    --#{$expandable-section}__toggle--focus--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor);
+    --#{$expandable-section}__toggle--BorderRadius: var(--#{$expandable-section}--m-display-lg__toggle--BorderRadius);
+    --#{$expandable-section}__toggle--Width: var(--#{$expandable-section}--m-display-lg__toggle--Width);
     --#{$expandable-section}__content--PaddingRight: var(--#{$expandable-section}--m-display-lg__content--PaddingRight);
     --#{$expandable-section}__content--PaddingBottom: var(--#{$expandable-section}--m-display-lg__content--PaddingBottom);
     --#{$expandable-section}__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg__content--PaddingLeft);
-    --#{$expandable-section}__content--MarginTop: var(--#{$expandable-section}--m-display-lg__content--MarginTop);
-
-    position: relative;
-    box-shadow: var(--#{$expandable-section}--m-display-lg--BoxShadow);
-
-    &::after {
-      position: absolute;
-     inset-block-start: 0;
-     inset-block-end: 0;
-     inset-inline-start: 0;
-      width: var(--#{$expandable-section}--m-display-lg--after--Width);
-      content: "";
-      background-color: var(--#{$expandable-section}--m-display-lg--after--BackgroundColor);
-    }
+    --#{$expandable-section}--m-indented__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft);
+
+    background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
+    border: solid 1px var(--#{$expandable-section}--m-display-lg--BorderColor);
+    border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
   }
 
   &.pf-m-indented {
@@ -100,11 +105,14 @@
   }
 
   &.pf-m-truncate {
-    --#{$expandable-section}__toggle--MarginTop: var(--#{$expandable-section}--m-truncate__toggle--MarginTop);
     --#{$expandable-section}__toggle--PaddingTop: 0;
     --#{$expandable-section}__toggle--PaddingRight: 0;
-    --#{$expandable-section}__toggle--PaddingBottom: 0;
-    --#{$expandable-section}__toggle-text--MarginLeft: 0;
+    --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-truncate__toggle--PaddingBottom);
+    --#{$expandable-section}__toggle--PaddingLeft: 0;
+    --#{$expandable-section}__content--PaddingTop: 0;
+    --#{$expandable-section}__content--PaddingRight: 0;
+    --#{$expandable-section}__content--PaddingBottom: 0;
+    --#{$expandable-section}__content--PaddingLeft: 0;
 
     &:not(.pf-m-expanded) .#{$expandable-section}__content {
       // stylelint-disable
@@ -115,34 +123,23 @@
       overflow: hidden;
     }
   }
-
-  &.pf-m-detached {
-    --#{$expandable-section}--m-truncate__toggle--MarginTop: 0;
-  }
 }
 
 .#{$expandable-section}__toggle {
   display: flex;
+  column-gap: var(--#{$expandable-section}__toggle--ColumnGap);
+  width: var(--#{$expandable-section}__toggle--Width, initial);
   padding-block-start: var(--#{$expandable-section}__toggle--PaddingTop);
   padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
   padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
   padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
-  margin-block-start: var(--#{$expandable-section}__toggle--MarginTop);
-  color: var(--#{$expandable-section}__toggle--Color);
   background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
   border: none;
+  border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
 
-  &:hover {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--hover--Color);
-  }
-
-  &:active,
-  &.pf-m-active {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--active--Color);
-  }
-
-  &:focus {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--focus--Color);
+  &:is(:hover, :focus) {
+    --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}__toggle-text--hover--Color);
+    --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
   }
 }
 
@@ -160,13 +157,13 @@
 }
 
 .#{$expandable-section}__toggle-text {
-  margin-inline-start: var(--#{$expandable-section}__toggle-text--MarginLeft);
+  color: var(--#{$expandable-section}__toggle-text--Color);
 }
 
 .#{$expandable-section}__content {
   max-width: var(--#{$expandable-section}__content--MaxWidth);
+  padding-block-start: var(--#{$expandable-section}__content--PaddingTop);
   padding-block-end: var(--#{$expandable-section}__content--PaddingBottom);
   padding-inline-start: var(--#{$expandable-section}__content--PaddingLeft);
   padding-inline-end: var(--#{$expandable-section}__content--PaddingRight);
-  margin-block-start: var(--#{$expandable-section}__content--MarginTop);
 }

package/components/FileUpload/file-upload.css

@@ -1,45 +1,39 @@
+:where(:root),
+:where(.pf-v5-c-file-upload) {
+  --pf-v5-c-file-upload--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-file-upload--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-file-upload--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-file-upload--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-file-upload--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-file-upload--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-file-upload--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-file-upload--BorderColor: transparent;
+  --pf-v5-c-file-upload--BorderStyle: solid;
+  --pf-v5-c-file-upload--m-drag-hover--BorderColor: var(--pf-t--global--icon--color--brand--default);
+  --pf-v5-c-file-upload--m-drag-hover--BorderStyle: dashed;
+  --pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v5-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-t--global--spacer--3xl) * 2);
+}
+
 .pf-v5-c-file-upload {
-  --pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-file-upload--m-loading__file-details--before--Left: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-file-upload--m-loading__file-details--before--Right: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-file-upload--m-drag-hover--after--Opacity: .1;
-  --pf-v5-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-v5-global--spacer--3xl) * 2);
-  --pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
   position: relative;
   display: flex;
   flex-direction: column;
-}
-.pf-v5-c-file-upload.pf-m-drag-hover::before {
-  position: absolute;
-  inset: 0;
-  z-index: var(--pf-v5-c-file-upload--m-drag-hover--before--ZIndex);
-  content: "";
-  border: var(--pf-v5-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-file-upload--m-drag-hover--before--BorderColor);
-}
-.pf-v5-c-file-upload.pf-m-drag-hover::after {
-  position: absolute;
-  inset: 0;
-  content: "";
-  background-color: var(--pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor);
-  opacity: var(--pf-v5-c-file-upload--m-drag-hover--after--Opacity);
+  row-gap: var(--pf-v5-c-file-upload--RowGap);
+  padding-block-start: var(--pf-v5-c-file-upload--PaddingBlockStart);
+  padding-block-end: var(--pf-v5-c-file-upload--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v5-c-file-upload--PaddingInlineStart);
+  padding-inline-end: var(--pf-v5-c-file-upload--PaddingInlineEnd);
+  border: var(--pf-v5-c-file-upload--BorderWidth) var(--pf-v5-c-file-upload--BorderStyle) var(--pf-v5-c-file-upload--BorderColor);
+  border-radius: var(--pf-v5-c-file-upload--BorderRadius);
+}
+.pf-v5-c-file-upload.pf-m-drag-hover {
+  --pf-v5-c-file-upload--BorderColor: var(--pf-v5-c-file-upload--m-drag-hover--BorderColor);
+  --pf-v5-c-file-upload--BorderStyle: var(--pf-v5-c-file-upload--m-drag-hover--BorderStyle);
 }
 .pf-v5-c-file-upload.pf-m-loading .pf-v5-c-file-upload__file-details {
   position: relative;
 }
-.pf-v5-c-file-upload.pf-m-loading .pf-v5-c-file-upload__file-details::before {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
-  inset-inline-start: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
-  inset-inline-end: var(--pf-v5-c-file-upload--m-loading__file-details--before--Left);
-  content: "";
-  background-color: var(--pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor);
-}
 
 .pf-v5-c-file-upload__file-select .pf-v5-c-button.pf-m-control {
   outline-offset: var(--pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset);