@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.10

package/css/components/ModalBox/modal-box.css

@@ -1,48 +1,59 @@
-.pf-v5-c-modal-box {
-  --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-modal-box--BoxShadow: var(--pf-v5-global--BoxShadow--xl);
+:root {
+  --pf-v5-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v5-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v5-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v5-c-modal-box--ZIndex: var(--pf-v5-global--ZIndex--xl);
   --pf-v5-c-modal-box--Width: 100%;
-  --pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-v5-global--spacer--xl));
+  --pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-t--global--spacer--xl));
   --pf-v5-c-modal-box--m-sm--sm--MaxWidth: 35rem;
   --pf-v5-c-modal-box--m-md--Width: 52.5rem;
   --pf-v5-c-modal-box--m-lg--lg--MaxWidth: 70rem;
-  --pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-v5-global--spacer--2xl));
-  --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-modal-box--m-align-top--MarginTop: var(--pf-v5-c-modal-box--m-align-top--spacer);
-  --pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-v5-global--spacer--2xl)) - var(--pf-v5-c-modal-box--m-align-top--spacer));
-  --pf-v5-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer) * 2, var(--pf-v5-global--spacer--xl)));
-  --pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
-  --pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
-  --pf-v5-c-modal-box__header--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
-  --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-modal-box__description--PaddingTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
-  --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__body--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__body--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__body--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__header--body--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-modal-box__close--Top: calc(var(--pf-v5-global--spacer--lg));
-  --pf-v5-c-modal-box__close--Right: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-modal-box__close--sibling--MarginRight: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-global--spacer--sm));
-  --pf-v5-c-modal-box__footer--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__footer--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__footer--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__footer--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl));
+  --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-modal-box--m-align-top--Top: var(--pf-v5-c-modal-box--m-align-top--spacer);
+  --pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--pf-v5-c-modal-box--m-align-top--spacer));
+  --pf-v5-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
+  --pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+  --pf-v5-c-modal-box__header--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__header--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body));
+  --pf-v5-c-modal-box__body--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__body--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__body--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__header--body--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-modal-box__close--Top: var(--pf-v5-c-modal-box__header--PaddingTop);
+  --pf-v5-c-modal-box__close--Right: var(--pf-v5-c-modal-box__header--PaddingRight);
+  --pf-v5-c-modal-box__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
+  --pf-v5-c-modal-box__footer--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__footer--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__footer--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v5-c-modal-box__footer--c-button--MarginRight) / 2);
+}
+@media (min-width: 1200px) {
+  :root {
+    --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
+  }
+}
+
+.pf-v5-c-modal-box {
   position: relative;
   z-index: var(--pf-v5-c-modal-box--ZIndex);
   display: flex;
@@ -50,14 +61,11 @@
   width: var(--pf-v5-c-modal-box--Width);
   max-width: var(--pf-v5-c-modal-box--MaxWidth);
   max-height: var(--pf-v5-c-modal-box--MaxHeight);
+  overflow: auto;
   background-color: var(--pf-v5-c-modal-box--BackgroundColor);
+  border-radius: var(--pf-v5-c-modal-box--BorderRadius);
   box-shadow: var(--pf-v5-c-modal-box--BoxShadow);
 }
-@media (min-width: 1200px) {
-  .pf-v5-c-modal-box {
-    --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
-  }
-}
 .pf-v5-c-modal-box.pf-m-sm {
   --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-sm--sm--MaxWidth);
 }
@@ -68,7 +76,7 @@
   --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-lg--lg--MaxWidth);
 }
 .pf-v5-c-modal-box.pf-m-align-top {
-  inset-block-start: var(--pf-v5-c-modal-box--m-align-top--MarginTop);
+  inset-block-start: var(--pf-v5-c-modal-box--m-align-top--Top);
   align-self: flex-start;
   max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
   max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
@@ -102,6 +110,7 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
+  gap: var(--pf-v5-c-modal-box__header--Gap);
   padding-block-start: var(--pf-v5-c-modal-box__header--PaddingTop);
   padding-inline-start: var(--pf-v5-c-modal-box__header--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-modal-box__header--PaddingRight);
@@ -110,15 +119,15 @@
   display: flex;
   flex-direction: row;
 }
-.pf-v5-c-modal-box__header:last-child {
-  padding-block-end: var(--pf-v5-c-modal-box__header--last-child--PaddingBottom);
-}
 .pf-v5-c-modal-box__header + .pf-v5-c-modal-box__body {
   --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-c-modal-box__header--body--PaddingTop);
 }
 
 .pf-v5-c-modal-box__header-main {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+  gap: var(--pf-v5-c-modal-box__header-main--Gap);
   min-width: 0;
 }
 
@@ -146,6 +155,8 @@
 
 .pf-v5-c-modal-box__description {
   padding-block-start: var(--pf-v5-c-modal-box__description--PaddingTop);
+  font-size: var(--pf-v5-c-modal-box__description--FontSize);
+  color: var(--pf-v5-c-modal-box__description--Color);
 }
 
 .pf-v5-c-modal-box__body {
@@ -180,8 +191,4 @@
   .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
     --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-c-modal-box__footer--c-button--sm--MarginRight);
   }
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-modal-box {
-  --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/css/components/ModalBox/modal-box.d.ts

@@ -23,7 +23,6 @@ declare const _default: {
     "info": "pf-m-info",
     "help": "pf-m-help",
     "icon": "pf-m-icon"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

package/css/components/ModalBox/modal-box.js

@@ -25,6 +25,5 @@ exports.default = {
     "info": "pf-m-info",
     "help": "pf-m-help",
     "icon": "pf-m-icon"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/ModalBox/modal-box.mjs

@@ -23,6 +23,5 @@ export default {
     "info": "pf-m-info",
     "help": "pf-m-help",
     "icon": "pf-m-icon"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/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: 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,13 +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);
+  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 {
@@ -110,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-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 {
@@ -133,6 +160,13 @@
   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;
@@ -156,18 +190,11 @@
   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:first-child {
-  --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop);
-}
 
 .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-block-start: 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);

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

@@ -9,7 +9,6 @@ declare const _default: {
   "multipleFileUploadMain": "pf-v5-c-multiple-file-upload__main",
   "multipleFileUploadStatus": "pf-v5-c-multiple-file-upload__status",
   "multipleFileUploadStatusItem": "pf-v5-c-multiple-file-upload__status-item",
-  "multipleFileUploadStatusItemClose": "pf-v5-c-multiple-file-upload__status-item-close",
   "multipleFileUploadStatusItemIcon": "pf-v5-c-multiple-file-upload__status-item-icon",
   "multipleFileUploadStatusItemMain": "pf-v5-c-multiple-file-upload__status-item-main",
   "multipleFileUploadStatusItemProgress": "pf-v5-c-multiple-file-upload__status-item-progress",

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

@@ -11,7 +11,6 @@ exports.default = {
   "multipleFileUploadMain": "pf-v5-c-multiple-file-upload__main",
   "multipleFileUploadStatus": "pf-v5-c-multiple-file-upload__status",
   "multipleFileUploadStatusItem": "pf-v5-c-multiple-file-upload__status-item",
-  "multipleFileUploadStatusItemClose": "pf-v5-c-multiple-file-upload__status-item-close",
   "multipleFileUploadStatusItemIcon": "pf-v5-c-multiple-file-upload__status-item-icon",
   "multipleFileUploadStatusItemMain": "pf-v5-c-multiple-file-upload__status-item-main",
   "multipleFileUploadStatusItemProgress": "pf-v5-c-multiple-file-upload__status-item-progress",

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

@@ -9,7 +9,6 @@ export default {
   "multipleFileUploadMain": "pf-v5-c-multiple-file-upload__main",
   "multipleFileUploadStatus": "pf-v5-c-multiple-file-upload__status",
   "multipleFileUploadStatusItem": "pf-v5-c-multiple-file-upload__status-item",
-  "multipleFileUploadStatusItemClose": "pf-v5-c-multiple-file-upload__status-item-close",
   "multipleFileUploadStatusItemIcon": "pf-v5-c-multiple-file-upload__status-item-icon",
   "multipleFileUploadStatusItemMain": "pf-v5-c-multiple-file-upload__status-item-main",
   "multipleFileUploadStatusItemProgress": "pf-v5-c-multiple-file-upload__status-item-progress",