@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

package/components/ModalBox/modal-box.scss

@@ -1,73 +1,80 @@
 // @debug $modal-box; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$modal-box} {
-  --#{$modal-box}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$modal-box}--BoxShadow: var(--#{$pf-global}--BoxShadow--xl);
-  --#{$modal-box}--ZIndex: var(--#{$pf-global}--ZIndex--xl);
+:root {
+  --#{$modal-box}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --#{$modal-box}--BorderRadius: var(--pf-t--global--border--radius--large);
+  --#{$modal-box}--BoxShadow: var(--pf-t--global--box-shadow--lg);
+  --#{$modal-box}--ZIndex: var(--#{$pf-global}--ZIndex--xl); // TODO use a z-index token
   --#{$modal-box}--Width: 100%;
-  --#{$modal-box}--MaxWidth: calc(100% - var(--#{$pf-global}--spacer--xl)); // Ensure modal has gutters at full width
+  --#{$modal-box}--MaxWidth: calc(100% - var(--pf-t--global--spacer--xl)); // Ensure modal has gutters at full width
   --#{$modal-box}--m-sm--sm--MaxWidth: #{pf-size-prem(560px)}; // MaxWidth is based on optimal line length for reading
   --#{$modal-box}--m-md--Width: #{pf-size-prem(840px)};
   --#{$modal-box}--m-lg--lg--MaxWidth: #{pf-size-prem(1120px)};
-  --#{$modal-box}--MaxHeight: calc(100% - var(--#{$pf-global}--spacer--2xl)); // MaxHeight ensures that the modal will not go off the screen and instead the body will scroll
-  --#{$modal-box}--m-align-top--spacer: var(--#{$pf-global}--spacer--sm);
-  --#{$modal-box}--m-align-top--xl--spacer: var(--#{$pf-global}--spacer--xl);
-  --#{$modal-box}--m-align-top--MarginTop: var(--#{$modal-box}--m-align-top--spacer); // Rename to --Top at breaking change
-  --#{$modal-box}--m-align-top--MaxHeight: calc(100% - min(var(--#{$modal-box}--m-align-top--spacer), var(--#{$pf-global}--spacer--2xl)) - var(--#{$modal-box}--m-align-top--spacer));
-  --#{$modal-box}--m-align-top--MaxWidth: calc(100% - min(var(--#{$modal-box}--m-align-top--spacer) * 2, var(--#{$pf-global}--spacer--xl)));
+  --#{$modal-box}--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl)); // MaxHeight ensures that the modal will not go off the screen and instead the body will scroll
+  --#{$modal-box}--m-align-top--spacer: var(--pf-t--global--spacer--sm);
+  --#{$modal-box}--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
+  --#{$modal-box}--m-align-top--Top: var(--#{$modal-box}--m-align-top--spacer);
+  --#{$modal-box}--m-align-top--MaxHeight: calc(100% - min(var(--#{$modal-box}--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--#{$modal-box}--m-align-top--spacer));
+  --#{$modal-box}--m-align-top--MaxWidth: calc(100% - min(var(--#{$modal-box}--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
 
   // States
-  --#{$modal-box}--m-danger__title-icon--Color: var(--#{$pf-global}--danger-color--100);
-  --#{$modal-box}--m-warning__title-icon--Color: var(--#{$pf-global}--warning-color--100);
-  --#{$modal-box}--m-success__title-icon--Color: var(--#{$pf-global}--success-color--100);
-  --#{$modal-box}--m-info__title-icon--Color: var(--#{$pf-global}--info-color--100);
-  --#{$modal-box}--m-custom__title-icon--Color: var(--#{$pf-global}--custom-color--200);
+  --#{$modal-box}--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$modal-box}--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --#{$modal-box}--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --#{$modal-box}--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --#{$modal-box}--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
 
   @media (min-width: $pf-v5-global--breakpoint--xl) {
     --#{$modal-box}--m-align-top--spacer: var(--#{$modal-box}--m-align-top--xl--spacer);
   }
 
   // Header
-  --#{$modal-box}__header--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__header--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__header--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__header--last-child--PaddingBottom: var(--#{$pf-global}--spacer--lg);
+  --#{$modal-box}__header--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__header--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__header--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__header--Gap: var(--pf-t--global--spacer--md);
+
+  // Header main
+  --#{$modal-box}__header-main--Gap: var(--pf-t--global--spacer--md);
 
   // Title
-  --#{$modal-box}__title--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$modal-box}__title--FontFamily: var(--#{$pf-global}--FontFamily--heading);
-  --#{$modal-box}__title--FontSize: var(--#{$pf-global}--FontSize--2xl);
+  --#{$modal-box}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$modal-box}__title--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$modal-box}__title--FontSize: var(--pf-t--global--font--size--heading--md);
 
   // Title icon
-  --#{$modal-box}__title-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$modal-box}__title-icon--Color: var(--#{$pf-global}--Color--100);
+  --#{$modal-box}__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$modal-box}__title-icon--Color: var(--pf-t--global--icon--color--regular);
 
   // Description
-  --#{$modal-box}__description--PaddingTop: var(--#{$pf-global}--spacer--xs);
-
+  --#{$modal-box}__description--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$modal-box}__description--Color: var(--pf-t--global--text--color--subtle);
+  
   // Body
-  --#{$modal-box}__body--MinHeight: calc(var(--#{$pf-global}--FontSize--md) * var(--#{$pf-global}--LineHeight--md)); // Allow for at least 1 line of content in the body
-  --#{$modal-box}__body--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__body--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__body--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__body--last-child--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__header--body--PaddingTop: var(--#{$pf-global}--spacer--md);
+  --#{$modal-box}__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)); // Allow for at least 1 line of content in the body
+  --#{$modal-box}__body--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__body--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__body--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__header--body--PaddingTop: var(--pf-t--global--spacer--md);
 
   // Close
-  --#{$modal-box}__close--Top: calc(var(--#{$pf-global}--spacer--lg));
-  --#{$modal-box}__close--Right: var(--#{$pf-global}--spacer--md);
-  --#{$modal-box}__close--sibling--MarginRight: calc(var(--#{$pf-global}--spacer--xl) + var(--#{$pf-global}--spacer--sm));
+  --#{$modal-box}__close--Top: var(--pf-v5-c-modal-box__header--PaddingTop); // calc(var(--pf-t--global--spacer--md));
+  --#{$modal-box}__close--Right: var(--pf-v5-c-modal-box__header--PaddingRight); // var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
 
   // Footer
-  --#{$modal-box}__footer--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__footer--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__footer--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$modal-box}__footer--PaddingLeft: var(--#{$pf-global}--spacer--lg);
+  --#{$modal-box}__footer--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__footer--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__footer--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
 
   // Footer buttons
-  --#{$modal-box}__footer--c-button--MarginRight: var(--#{$pf-global}--spacer--md); // Button spacer is used to manipulate margin-left and/or margin-right values at various breakpoints, with a single value.
+  --#{$modal-box}__footer--c-button--MarginRight: var(--pf-t--global--spacer--md); // Button spacer is used to manipulate margin-inline-start and/or margin-right values at various breakpoints, with a single value.
   --#{$modal-box}__footer--c-button--sm--MarginRight: calc(var(--#{$modal-box}__footer--c-button--MarginRight) / 2);
+}
 
+.#{$modal-box} {
   position: relative;
   z-index: var(--#{$modal-box}--ZIndex);
   display: flex;
@@ -75,7 +82,9 @@
   width: var(--#{$modal-box}--Width);
   max-width: var(--#{$modal-box}--MaxWidth);
   max-height: var(--#{$modal-box}--MaxHeight);
+  overflow: auto;
   background-color: var(--#{$modal-box}--BackgroundColor);
+  border-radius: var(--#{$modal-box}--BorderRadius);
   box-shadow: var(--#{$modal-box}--BoxShadow);
 
   &.pf-m-sm {
@@ -91,7 +100,7 @@
   }
 
   &.pf-m-align-top {
-    top: var(--#{$modal-box}--m-align-top--MarginTop);
+    inset-block-start: var(--#{$modal-box}--m-align-top--Top);
     align-self: flex-start;
     max-width: var(--#{$modal-box}--m-align-top--MaxWidth);
     max-height: var(--#{$modal-box}--m-align-top--MaxHeight);
@@ -121,11 +130,11 @@
 // Close button
 .#{$modal-box}__close {
   position: absolute;
-  top: var(--#{$modal-box}__close--Top);
-  right: var(--#{$modal-box}__close--Right);
+ inset-block-start: var(--#{$modal-box}__close--Top);
+ inset-inline-end: var(--#{$modal-box}__close--Right);
 
   + * {
-    margin-right: var(--#{$modal-box}__close--sibling--MarginRight); // Create room for the close button
+    margin-inline-end: var(--#{$modal-box}__close--sibling--MarginRight); // Create room for the close button
   }
 }
 
@@ -133,26 +142,26 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  padding-top: var(--#{$modal-box}__header--PaddingTop);
-  padding-right: var(--#{$modal-box}__header--PaddingRight);
-  padding-left: var(--#{$modal-box}__header--PaddingLeft);
+  gap: var(--#{$modal-box}__header--Gap);
+  padding-block-start: var(--#{$modal-box}__header--PaddingTop);
+  padding-inline-start: var(--#{$modal-box}__header--PaddingLeft);
+  padding-inline-end: var(--#{$modal-box}__header--PaddingRight);
 
   &.pf-m-help {
     display: flex;
     flex-direction: row;
   }
 
-  &:last-child {
-    padding-bottom: var(--#{$modal-box}__header--last-child--PaddingBottom);
-  }
-
   + .#{$modal-box}__body {
     --#{$modal-box}__body--PaddingTop: var(--#{$modal-box}__header--body--PaddingTop);
   }
 }
 
 .#{$modal-box}__header-main {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+  gap: var(--#{$modal-box}__header-main--Gap);
   min-width: 0;
 }
 
@@ -173,21 +182,23 @@
 }
 
 .#{$modal-box}__title-icon {
-  margin-right: var(--#{$modal-box}__title-icon--MarginRight);
+  margin-inline-end: var(--#{$modal-box}__title-icon--MarginRight);
   color: var(--#{$modal-box}__title-icon--Color);
 }
 
 .#{$modal-box}__description {
-  padding-top: var(--#{$modal-box}__description--PaddingTop);
+  padding-block-start: var(--#{$modal-box}__description--PaddingTop);
+  font-size: var(--#{$modal-box}__description--FontSize);
+  color: var(--#{$modal-box}__description--Color);
 }
 
 // Body
 .#{$modal-box}__body {
   flex: 1 1 auto;
   min-height: var(--#{$modal-box}__body--MinHeight);
-  padding-top: var(--#{$modal-box}__body--PaddingTop);
-  padding-right: var(--#{$modal-box}__body--PaddingRight);
-  padding-left: var(--#{$modal-box}__body--PaddingLeft);
+  padding-block-start: var(--#{$modal-box}__body--PaddingTop);
+  padding-inline-start: var(--#{$modal-box}__body--PaddingLeft);
+  padding-inline-end: var(--#{$modal-box}__body--PaddingRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -195,7 +206,7 @@
   -webkit-overflow-scrolling: touch;
 
   &:last-child {
-    padding-bottom: var(--#{$modal-box}__body--last-child--PaddingBottom);
+    padding-block-end: var(--#{$modal-box}__body--last-child--PaddingBottom);
   }
 }
 
@@ -204,24 +215,17 @@
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  padding-top: var(--#{$modal-box}__footer--PaddingTop);
-  padding-right: var(--#{$modal-box}__footer--PaddingRight);
-  padding-bottom: var(--#{$modal-box}__footer--PaddingBottom);
-  padding-left: var(--#{$modal-box}__footer--PaddingLeft);
+  padding-block-start: var(--#{$modal-box}__footer--PaddingTop);
+  padding-block-end: var(--#{$modal-box}__footer--PaddingBottom);
+  padding-inline-start: var(--#{$modal-box}__footer--PaddingLeft);
+  padding-inline-end: var(--#{$modal-box}__footer--PaddingRight);
 
   // Base margin left and right equal for buttons when wrapped
   > .#{$button}:not(:last-child) {
-    margin-right: var(--#{$modal-box}__footer--c-button--MarginRight);
+    margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginRight);
 
     @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
       --#{$modal-box}__footer--c-button--MarginRight: var(--#{$modal-box}__footer--c-button--sm--MarginRight);
     }
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/modal-box";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-modal-box;
-}

package/components/MultipleFileUpload/multiple-file-upload.css

@@ -1,6 +1,7 @@
-.pf-v5-c-multiple-file-upload {
+:root,
+:where(.pf-v5-c-multiple-file-upload) {
   --pf-v5-c-multiple-file-upload--GridTemplateColumns: 1fr;
-  --pf-v5-c-multiple-file-upload--Gap: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
   --pf-v5-c-multiple-file-upload__main--TextAlign: center;
   --pf-v5-c-multiple-file-upload__main--GridTemplateColumns: auto;
   --pf-v5-c-multiple-file-upload__main--GridTemplateRows: auto;
@@ -8,59 +9,74 @@
     "title"
     "upload"
     "info";
-  --pf-v5-c-multiple-file-upload__main--Gap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-multiple-file-upload__main--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-multiple-file-upload__main--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-multiple-file-upload__main--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-multiple-file-upload__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-multiple-file-upload__main--PaddingTop: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-multiple-file-upload__main--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-multiple-file-upload__main--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v5-c-multiple-file-upload__main--BorderStyle: dashed;
-  --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-multiple-file-upload__main--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v5-c-multiple-file-upload__title--Display: grid;
   --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: auto;
-  --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-global--icon--Color--dark);
+  --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-multiple-file-upload__title-text--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-multiple-file-upload__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-multiple-file-upload__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --pf-v5-c-multiple-file-upload__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-multiple-file-upload__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
   --pf-v5-c-multiple-file-upload__title-text-separator--Display: block;
-  --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
-  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-v5-global--palette--blue-50);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__title-text-separator--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__title-text-separator--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-multiple-file-upload__info--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle: dashed;
+  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
-  --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
+  --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
   --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
   --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
     "title upload"
     "info upload";
-  --pf-v5-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
+  --pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-t--global--spacer--lg);
   --pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
-  --pf-v5-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
   --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
+  --pf-v5-c-multiple-file-upload__status--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-multiple-file-upload__status--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
-  --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-v5-global--icon--Color--dark);
-  --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
+  --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
-  --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-v5-global--icon--Color--dark);
-  --pf-v5-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
+  --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
-  --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-t--global--text--color--subtle);
+}
+
+.pf-v5-c-multiple-file-upload {
   display: grid;
   grid-template-columns: var(--pf-v5-c-multiple-file-upload--GridTemplateColumns);
   gap: var(--pf-v5-c-multiple-file-upload--Gap);
@@ -74,17 +90,18 @@
   --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
   --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
   --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--Gap);
+  --pf-v5-c-multiple-file-upload__title-icon--FontSize: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-icon--FontSize);
+  --pf-v5-c-multiple-file-upload__title-text--FontSize: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text--FontSize);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily);
   --pf-v5-c-multiple-file-upload__title-text-separator--Display: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
   --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize);
+  --pf-v5-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight);
   --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop);
 }
 .pf-v5-c-multiple-file-upload.pf-m-drag-over {
   --pf-v5-c-multiple-file-upload__main--BorderStyle: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle);
   --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor);
-  --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
-  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
-  --pf-v5-c-multiple-file-upload__title-text--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color);
-  --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color);
 }
 
 .pf-v5-c-multiple-file-upload__main {
@@ -93,10 +110,14 @@
   grid-template-rows: var(--pf-v5-c-multiple-file-upload__main--GridTemplateRows);
   grid-template-columns: var(--pf-v5-c-multiple-file-upload__main--GridTemplateColumns);
   gap: var(--pf-v5-c-multiple-file-upload__main--Gap);
-  padding: var(--pf-v5-c-multiple-file-upload__main--PaddingTop) var(--pf-v5-c-multiple-file-upload__main--PaddingRight) var(--pf-v5-c-multiple-file-upload__main--PaddingBottom) var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
+  align-items: center;
+  padding-block-start: var(--pf-v5-c-multiple-file-upload__main--PaddingTop);
+  padding-block-end: var(--pf-v5-c-multiple-file-upload__main--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-multiple-file-upload__main--PaddingRight);
   text-align: var(--pf-v5-c-multiple-file-upload__main--TextAlign);
-  background-color: var(--pf-v5-c-multiple-file-upload__main--BackgroundColor);
   border: var(--pf-v5-c-multiple-file-upload__main--BorderWidth) var(--pf-v5-c-multiple-file-upload__main--BorderStyle) var(--pf-v5-c-multiple-file-upload__main--BorderColor);
+  border-radius: var(--pf-v5-c-multiple-file-upload__main--BorderRadius);
 }
 
 .pf-v5-c-multiple-file-upload__title {
@@ -107,16 +128,25 @@
 }
 
 .pf-v5-c-multiple-file-upload__title-icon {
+  font-size: var(--pf-v5-c-multiple-file-upload__title-icon--FontSize);
   color: var(--pf-v5-c-multiple-file-upload__title-icon--Color);
 }
 
 .pf-v5-c-multiple-file-upload__title-text {
+  font-family: var(--pf-v5-c-multiple-file-upload__title-text--FontFamily);
+  font-size: var(--pf-v5-c-multiple-file-upload__title-text--FontSize);
+  font-weight: var(--pf-v5-c-multiple-file-upload__title-text--FontWeight);
   color: var(--pf-v5-c-multiple-file-upload__title-text--Color, inherit);
 }
 
 .pf-v5-c-multiple-file-upload__title-text-separator {
   display: var(--pf-v5-c-multiple-file-upload__title-text-separator--Display);
-  margin-top: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
+  margin-block-start: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
+  margin-block-end: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginBottom);
+  font-family: var(--pf-v5-c-multiple-file-upload__title-text-separator--FontFamily);
+  font-size: var(--pf-v5-c-multiple-file-upload__title-text-separator--FontSize);
+  font-weight: var(--pf-v5-c-multiple-file-upload__title-text-separator--FontWeight);
+  color: var(--pf-v5-c-multiple-file-upload__title-text-separator--Color);
 }
 
 .pf-v5-c-multiple-file-upload__upload {
@@ -125,11 +155,18 @@
 
 .pf-v5-c-multiple-file-upload__info {
   grid-area: info;
-  margin-top: var(--pf-v5-c-multiple-file-upload__info--MarginTop);
+  margin-block-start: var(--pf-v5-c-multiple-file-upload__info--MarginTop);
   font-size: var(--pf-v5-c-multiple-file-upload__info--FontSize);
   color: var(--pf-v5-c-multiple-file-upload__info--Color);
 }
 
+.pf-v5-c-multiple-file-upload__status {
+  padding-block-start: var(--pf-v5-c-multiple-file-upload__status--PaddingTop);
+  padding-block-end: var(--pf-v5-c-multiple-file-upload__status--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-multiple-file-upload__status--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-multiple-file-upload__status--PaddingRight);
+}
+
 .pf-v5-c-multiple-file-upload__status,
 .pf-v5-c-multiple-file-upload__status-item-main {
   min-width: 0;
@@ -149,22 +186,15 @@
   display: grid;
   grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns);
   gap: var(--pf-v5-c-multiple-file-upload__status-item--Gap);
-  padding-top: var(--pf-v5-c-multiple-file-upload__status-item--PaddingTop);
-  padding-bottom: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
-  border-bottom: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
-}
-.pf-v5-c-multiple-file-upload__status-item:first-child {
-  --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop);
+  padding-block-start: var(--pf-v5-c-multiple-file-upload__status-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
+  border-block-end: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
 }
 
 .pf-v5-c-multiple-file-upload__status-item-icon {
   color: var(--pf-v5-c-multiple-file-upload__status-item-icon--Color);
 }
 
-.pf-v5-c-multiple-file-upload__status-item-close {
-  margin-top: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
-}
-
 .pf-v5-c-multiple-file-upload__status-item-progress {
   display: grid;
   grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns);