@patternfly/patternfly 6.0.0-alpha.63 → 6.0.0-alpha.65

package/components/ActionList/action-list.css

@@ -1,27 +1,28 @@
-.pf-v5-c-action-list {
-  --pf-v5-c-action-list--m-icon--spacer: 0;
-  --pf-v5-c-action-list--child--spacer-base: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-action-list--group--spacer-base: var(--pf-v5-global--spacer--2xl);
+:where(:root) {
+  --pf-v5-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
+  --pf-v5-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
 }
 
 .pf-v5-c-action-list,
 .pf-v5-c-action-list__group {
-  --pf-v5-c-action-list--child--spacer: var(--pf-v5-c-action-list--child--spacer-base);
-  --pf-v5-c-action-list--group--spacer: var(--pf-v5-c-action-list--group--spacer-base);
   display: flex;
-  align-items: center;
+  align-items: start;
+}
+
+.pf-v5-c-action-list {
+  row-gap: var(--pf-v5-c-action-list--RowGap);
+  column-gap: var(--pf-v5-c-action-list--ColumnGap);
 }
-.pf-v5-c-action-list > * + *,
-.pf-v5-c-action-list__group > * + * {
-  margin-inline-start: var(--pf-v5-c-action-list--child--spacer);
+.pf-v5-c-action-list.pf-m-icons {
+  column-gap: var(--pf-v5-c-action-list--m-icons--ColumnGap);
 }
-.pf-v5-c-action-list > * + .pf-v5-c-action-list__group,
-.pf-v5-c-action-list .pf-v5-c-action-list__group + *,
-.pf-v5-c-action-list__group > * + .pf-v5-c-action-list__group,
-.pf-v5-c-action-list__group .pf-v5-c-action-list__group + * {
-  margin-inline-start: var(--pf-v5-c-action-list--group--spacer);
+
+.pf-v5-c-action-list__group {
+  row-gap: var(--pf-v5-c-action-list__group--RowGap, var(--pf-v5-c-action-list--RowGap));
+  column-gap: var(--pf-v5-c-action-list__group--ColumnGap);
 }
-.pf-v5-c-action-list.pf-m-icons,
 .pf-v5-c-action-list__group.pf-m-icons {
-  --pf-v5-c-action-list--child--spacer: var(--pf-v5-c-action-list--m-icon--spacer);
+  column-gap: var(--pf-v5-c-action-list--m-icons--ColumnGap);
 }

package/components/ActionList/action-list.scss

@@ -1,29 +1,39 @@
-// @debug $action-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+:where(:root) {
+  --#{$action-list}--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$action-list}--ColumnGap: var(--pf-t--global--spacer--2xl);
 
-.#{$action-list} {
-  --#{$action-list}--m-icon--spacer: 0;
-  --#{$action-list}--child--spacer-base: var(--#{$pf-global}--spacer--md);
-  --#{$action-list}--group--spacer-base: var(--#{$pf-global}--spacer--2xl);
+  // * Action list group
+  --#{$action-list}__group--ColumnGap: var(--pf-t--global--spacer--md);
+
+  // * Action list icons
+  --#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
 }
 
+// - Action list - Action list group
 .#{$action-list},
 .#{$action-list}__group {
-  --#{$action-list}--child--spacer: var(--#{$action-list}--child--spacer-base);
-  --#{$action-list}--group--spacer: var(--#{$action-list}--group--spacer-base);
-
   display: flex;
-  align-items: center;
+  align-items: start;
+}
 
-  > * + * {
-    margin-inline-start: var(--#{$action-list}--child--spacer);
-  }
+// - Action list
+.#{$action-list} {
+  row-gap: var(--#{$action-list}--RowGap);
+  column-gap: var(--#{$action-list}--ColumnGap);
 
-  > * + .#{$action-list}__group,
-  .#{$action-list}__group + * {
-    margin-inline-start: var(--#{$action-list}--group--spacer);
+  // - Action list icons
+  &.pf-m-icons {
+    column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
   }
+}
+
+// - Action list group
+.#{$action-list}__group {
+  row-gap: var(--#{$action-list}__group--RowGap, var(--#{$action-list}--RowGap));
+  column-gap: var(--#{$action-list}__group--ColumnGap);
 
+  // - Action list group icons
   &.pf-m-icons {
-    --#{$action-list}--child--spacer: var(--#{$action-list}--m-icon--spacer);
+    column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
   }
 }

package/components/Button/button.css

@@ -14,10 +14,6 @@
   --pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
   --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v5-c-button--TextDecoration: none;
-  --pf-v5-c-button--BorderStartStartRadius: var(--pf-v5-c-button--BorderRadius);
-  --pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-button--BorderRadius);
-  --pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-button--BorderRadius);
-  --pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-button--BorderRadius);
   --pf-v5-c-button--MixBlendMode: normal;
   --pf-v5-c-button--hover--BackgroundColor: transparent;
   --pf-v5-c-button--hover--BorderColor: transparent;
@@ -247,11 +243,10 @@
   user-select: none;
   background-color: var(--pf-v5-c-button--BackgroundColor);
   border: 0;
-  border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius);
-  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius);
-  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius);
-  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius);
-  mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
+  border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius, var(--pf-v5-c-button--BorderRadius));
+  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
+  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
+  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
 }
 .pf-v5-c-button::after {
   position: absolute;

package/components/Button/button.scss

@@ -14,10 +14,6 @@
   --#{$button}--BorderWidth: var(--pf-t--global--border--width--button--default);
   --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$button}--TextDecoration: none;
-  --#{$button}--BorderStartStartRadius: var(--#{$button}--BorderRadius);
-  --#{$button}--BorderStartEndRadius: var(--#{$button}--BorderRadius);
-  --#{$button}--BorderEndStartRadius: var(--#{$button}--BorderRadius);
-  --#{$button}--BorderEndEndRadius: var(--#{$button}--BorderRadius);
   --#{$button}--MixBlendMode: normal;
 
   // Hover
@@ -289,11 +285,10 @@
   user-select: none;
   background-color: var(--#{$button}--BackgroundColor);
   border: 0;
-  border-start-start-radius: var(--#{$button}--BorderStartStartRadius);
-  border-start-end-radius: var(--#{$button}--BorderStartEndRadius);
-  border-end-start-radius: var(--#{$button}--BorderEndStartRadius);
-  border-end-end-radius: var(--#{$button}--BorderEndEndRadius);
-  mix-blend-mode: var(--#{$button}--MixBlendMode);
+  border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
+  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
+  border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
+  border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
 
   &::after {
     position: absolute;

package/components/Masthead/masthead.css

@@ -1,15 +1,10 @@
 :root,
-:where(.pf-v5-c-masthead) {
-  --pf-v5-c-masthead--inset: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-masthead--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v5-c-masthead--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v5-c-masthead--PaddingInlineStart: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-masthead--PaddingInlineEnd: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-masthead--AlignItems: start;
+[data-theme=pf-v5-c-masthead] {
   --pf-v5-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
-  --pf-v5-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
+  --pf-v5-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
   --pf-v5-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v5-c-masthead__brand--MaxHeight: 2.375rem;
@@ -30,21 +25,15 @@
   --pf-v5-c-masthead--m-display-inline__content--Order: 0;
   --pf-v5-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v5-c-masthead__expandable-content--BorderBlockStart: var(--pf-v5-c-masthead--BorderWidth) solid var(--pf-v5-c-masthead--BorderColor);
+  --pf-v5-c-masthead--pf-v5-c-toolbar--Width: 100%;
+  --pf-v5-c-masthead--pf-v5-c-toolbar--PaddingBlock: 0;
+  --pf-v5-c-masthead--pf-v5-c-toolbar--PaddingInline: 0;
 }
 
 .pf-v5-c-masthead {
-  --pf-v5-c-toolbar--PaddingTop: 0;
-  --pf-v5-c-toolbar--PaddingBottom: 0;
-  --pf-v5-c-toolbar__content--PaddingRight: 0;
-  --pf-v5-c-toolbar__content--PaddingLeft: 0;
-  --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-toolbar__expandable-content--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
-  --pf-v5-c-toolbar__expandable-content--lg--PaddingRight: var(--pf-v5-c-masthead--PaddingInlineStart);
-  --pf-v5-c-toolbar__expandable-content--lg--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-toolbar__expandable-content--lg--PaddingLeft: var(--pf-v5-c-masthead--PaddingInlineEnd);
+  --pf-v5-c-toolbar--Width: var(--pf-v5-c-masthead--pf-v5-c-toolbar--Width);
+  --pf-v5-c-toolbar__content--PaddingBlock: var(--pf-v5-c-masthead--pf-v5-c-toolbar--PaddingBlock);
+  --pf-v5-c-toolbar__content--PaddingInline: var(--pf-v5-c-masthead--pf-v5-c-toolbar--PaddingInline);
   --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
   --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
   --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
@@ -56,13 +45,13 @@
   grid-template-columns: var(--pf-v5-c-masthead--GridTemplateColumns);
   row-gap: var(--pf-v5-c-masthead--RowGap);
   column-gap: var(--pf-v5-c-masthead--ColumnGap);
-  align-items: var(--pf-v5-c-masthead--AlignItems);
+  align-items: start;
   min-width: 0;
-  padding-block-start: var(--pf-v5-c-masthead--PaddingBlockStart);
-  padding-block-end: var(--pf-v5-c-masthead--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v5-c-masthead--inset);
-  padding-inline-end: var(--pf-v5-c-masthead--inset);
-  background-color: var(--pf-v5-c-masthead--BackgroundColor);
+  padding-block-start: var(--pf-v5-c-masthead--PaddingBlockStart, var(--pf-v5-c-masthead--PaddingBlock));
+  padding-block-end: var(--pf-v5-c-masthead--PaddingBlockEnd, var(--pf-v5-c-masthead--PaddingBlock));
+  padding-inline-start: var(--pf-v5-c-masthead--PaddingInlineStart, var(--pf-v5-c-masthead--PaddingInline));
+  padding-inline-end: var(--pf-v5-c-masthead--PaddingInlineEnd, var(--pf-v5-c-masthead--PaddingInline));
+  background-color: var(--pf-v5-c-masthead--BackgroundColor, var(--pf-t--global--background--color--secondary--default));
 }
 @media screen and (min-width: 768px) {
   :where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
@@ -75,9 +64,6 @@
     --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
   }
 }
-.pf-v5-c-masthead .pf-v5-c-toolbar {
-  width: 100%;
-}
 .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
   inset-block-start: 100%;
   border-block-start: var(--pf-v5-c-masthead__expandable-content--BorderBlockStart);

package/components/Masthead/masthead.scss

@@ -1,20 +1,14 @@
-// @debug $masthead; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 $pf-v5-c-masthead--breakpoint-map: build-breakpoint-map();
 $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
 :root,
-:where(.#{$masthead}) {
+[data-theme="#{$masthead}"] {
   // * Masthead
-  --#{$masthead}--inset: var(--pf-t--global--spacer--lg);
-  --#{$masthead}--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --#{$masthead}--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --#{$masthead}--PaddingInlineStart: var(--#{$masthead}--inset);
-  --#{$masthead}--PaddingInlineEnd: var(--#{$masthead}--inset);
-  --#{$masthead}--AlignItems: start;
   --#{$masthead}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$masthead}--ColumnGap: var(--pf-t--global--spacer--md);
-  --#{$masthead}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$masthead}--BorderWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$masthead}--PaddingBlock: var(--pf-t--global--spacer--md);
+  --#{$masthead}--PaddingInline: var(--pf-t--global--spacer--lg);
   --#{$masthead}--BorderColor: var(--pf-t--global--border--color--default);
 
   // * Masthead brand
@@ -43,8 +37,13 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   --#{$masthead}--m-display-inline__content--Order: 0;
 
   // * Masthead toolbar
-  --#{$masthead}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom); // TODO: update after toolbar updates
-  --#{$masthead}__expandable-content--BorderBlockStart: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor); // TODO: update after toolbar updates
+  --#{$masthead}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
+  --#{$masthead}__expandable-content--BorderBlockStart: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor);
+
+  // * Masthead toolbar
+  --#{$masthead}--#{$toolbar}--Width: 100%;
+  --#{$masthead}--#{$toolbar}--PaddingBlock: 0;
+  --#{$masthead}--#{$toolbar}--PaddingInline: 0;
 }
 
 // * Masthead display stack
@@ -71,18 +70,9 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 
 // - Masthead
 .#{$masthead} {
-  --#{$toolbar}--PaddingTop: 0; // TODO: update after toolbar updates
-  --#{$toolbar}--PaddingBottom: 0; // TODO: update after toolbar updates
-  --#{$toolbar}__content--PaddingRight: 0; // TODO: update after toolbar updates
-  --#{$toolbar}__content--PaddingLeft: 0; // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--PaddingTop: var(--pf-t--global--spacer--md); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--PaddingRight: var(--#{$masthead}--inset); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--PaddingLeft: var(--#{$masthead}--inset); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--BackgroundColor: var(--#{$masthead}--BackgroundColor); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--lg--PaddingRight: var(--#{$masthead}--PaddingInlineStart); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--lg--PaddingBottom: var(--pf-t--global--spacer--md); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--lg--PaddingLeft: var(--#{$masthead}--PaddingInlineEnd); // TODO: update after toolbar updates
+  --#{$toolbar}--Width: var(--#{$masthead}--#{$toolbar}--Width);
+  --#{$toolbar}__content--PaddingBlock: var(--#{$masthead}--#{$toolbar}--PaddingBlock);
+  --#{$toolbar}__content--PaddingInline: var(--#{$masthead}--#{$toolbar}--PaddingInline);
 
   // Set layout to stack by default
   @include pf-v5-c-masthead--m-display-stack;
@@ -99,21 +89,16 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   grid-template-columns: var(--#{$masthead}--GridTemplateColumns);
   row-gap: var(--#{$masthead}--RowGap);
   column-gap: var(--#{$masthead}--ColumnGap);
-  align-items: var(--#{$masthead}--AlignItems);
+  align-items: start;
   min-width: 0;
-  padding-block-start: var(--#{$masthead}--PaddingBlockStart);
-  padding-block-end: var(--#{$masthead}--PaddingBlockEnd);
-  padding-inline-start: var(--#{$masthead}--inset);
-  padding-inline-end: var(--#{$masthead}--inset);
-  background-color: var(--#{$masthead}--BackgroundColor);
 
-  // TODO: update when toolbar updates
-  // - Masthead toolbar
-  .#{$toolbar} {
-    width: 100%;
-  }
+  // set the fallback of any customizable, nested variable to its default value
+  padding-block-start: var(--#{$masthead}--PaddingBlockStart, var(--#{$masthead}--PaddingBlock));
+  padding-block-end: var(--#{$masthead}--PaddingBlockEnd, var(--#{$masthead}--PaddingBlock));
+  padding-inline-start: var(--#{$masthead}--PaddingInlineStart, var(--#{$masthead}--PaddingInline));
+  padding-inline-end: var(--#{$masthead}--PaddingInlineEnd, var(--#{$masthead}--PaddingInline));
+  background-color: var(--#{$masthead}--BackgroundColor, var(--pf-t--global--background--color--secondary--default));
 
-  // TODO: update when toolbar updates
   // - Masthead toolbar expandable content
   .#{$toolbar}__expandable-content {
     inset-block-start: 100%;
@@ -200,7 +185,6 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   background-color: var(--#{$masthead}--BackgroundColor);
 }
 
-
 // TODO: move this sass to separate file for resize observer updates
 // TODO: make this an opt in/out
 // stylelint-disable no-duplicate-selectors

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