@patternfly/patternfly 6.0.0-alpha.57 → 6.0.0-alpha.59

package/components/CodeBlock/code-block.css

@@ -1,18 +1,27 @@
+:root, :where(.pf-v5-c-code-block) {
+  --pf-v5-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
+  --pf-v5-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
+}
+
 .pf-v5-c-code-block {
-  --pf-v5-c-code-block--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-block__content--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
-  --pf-v5-c-code-block__pre--FontSize: var(--pf-v5-global--FontSize--sm);
   background-color: var(--pf-v5-c-code-block--BackgroundColor);
+  border-radius: var(--pf-v5-c-code-block--BorderRadius);
 }
 
 .pf-v5-c-code-block__header {
   display: flex;
+  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
   border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
 }
 

package/components/CodeBlock/code-block.scss

@@ -1,21 +1,29 @@
 // @debug $code-block; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$code-block} {
-  --#{$code-block}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$code-block}__header--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$code-block}__header--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$code-block}__content--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__content--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__content--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__content--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__pre--FontFamily: var(--#{$pf-global}--FontFamily--monospace);
-  --#{$code-block}__pre--FontSize: var(--#{$pf-global}--FontSize--sm);
+:root, :where(.#{$code-block}) {
+  --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$code-block}__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$code-block}__header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$code-block}__header--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$code-block}__header--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$code-block}__content--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$code-block}__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$code-block}__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$code-block}__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$code-block}__pre--FontFamily: var(--pf-t--global--font--family--mono);
+  --#{$code-block}__pre--FontSize: var(--pf-t--global--font--size--xs);
+}
 
+.#{$code-block} {
   background-color: var(--#{$code-block}--BackgroundColor);
+  border-radius: var(--#{$code-block}--BorderRadius);
 }
 
 .#{$code-block}__header {
   display: flex;
+  padding-inline-start: var(--#{$code-block}__header--PaddingLeft);
+  padding-inline-end: var(--#{$code-block}__header--PaddingRight);
   border-block-end: var(--#{$code-block}__header--BorderBottomWidth) solid var(--#{$code-block}__header--BorderBottomColor);
 }
 

package/components/DescriptionList/description-list.css

@@ -1,4 +1,4 @@
-:root, :where(.pf-v5-c-description-list) {
+:where(:root), :where(.pf-v5-c-description-list) {
   --pf-v5-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
   --pf-v5-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
   --pf-v5-c-description-list--GridTemplateColumns--count: 1;
@@ -30,8 +30,8 @@
   --pf-v5-c-description-list--m-3-col--GridTemplateColumns--count: 3;
   --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
   --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min);
-  --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-t--global--icon--color--regular);
-  --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--100);
+  --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: currentcolor;
+  --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
   --pf-v5-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
   --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
   --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
@@ -45,32 +45,32 @@
   --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
 }
 @media screen and (min-width: 576px) {
-  :root, :where(.pf-v5-c-description-list) {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--Display: var(--pf-v5-c-description-list__term--sm--Display);
   }
 }
 @media (min-width: 576px) {
-  :root, :where(.pf-v5-c-description-list) {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width));
   }
 }
 @media (min-width: 768px) {
-  :root, :where(.pf-v5-c-description-list) {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)));
   }
 }
 @media (min-width: 992px) {
-  :root, :where(.pf-v5-c-description-list) {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))));
   }
 }
 @media (min-width: 1200px) {
-  :root, :where(.pf-v5-c-description-list) {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)))));
   }
 }
 @media (min-width: 1450px) {
-  :root, :where(.pf-v5-c-description-list) {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))))));
   }
 }

package/components/DescriptionList/description-list.scss

@@ -1,7 +1,7 @@
 // @debug $data-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
-:root, :where(.#{$description-list}) {
+:where(:root), :where(.#{$description-list}) {
   --#{$description-list}--RowGap: var(--pf-t--global--spacer--lg);
   --#{$description-list}--ColumnGap: var(--pf-t--global--spacer--lg);
   --#{$description-list}--GridTemplateColumns--count: 1;
@@ -53,8 +53,8 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}--m-auto-fit--GridTemplateColumns--minmax--min: var(--#{$description-list}--m-auto-fit--GridTemplateColumns--min);
 
   // help text
-  --#{$description-list}__text--m-help-text--TextDecorationColor: var(--pf-t--global--icon--color--regular);
-  --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--100);
+  --#{$description-list}__text--m-help-text--TextDecorationColor: currentcolor;
+  --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
   --#{$description-list}__text--m-help-text--TextDecorationOffset: #{pf-size-prem(4px)};
   --#{$description-list}__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
   --#{$description-list}__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);

package/components/DragDrop/drag-drop.css

@@ -1,11 +1,15 @@
-.pf-v5-c-draggable {
+:where(:root), :where(.pf-v5-c-draggable) {
   --pf-v5-c-draggable--Cursor: auto;
   --pf-v5-c-draggable--m-dragging--Cursor: grabbing;
-  --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --pf-v5-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-draggable--m-drag-outside--Cursor: not-allowed;
-  --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
+
+.pf-v5-c-draggable {
   cursor: var(--pf-v5-c-draggable--Cursor);
 }
 .pf-v5-c-draggable.pf-m-dragging {
@@ -22,23 +26,26 @@
   inset-inline-end: 0;
   content: "";
   border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
+  border-radius: var(--pf-v5-c-draggable--m-dragging--after--BorderRadius);
 }
 .pf-v5-c-draggable.pf-m-drag-outside {
   --pf-v5-c-draggable--m-dragging--Cursor: var(--pf-v5-c-draggable--m-drag-outside--Cursor);
   --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-c-draggable--m-drag-outside--after--BorderColor);
 }
 
-.pf-v5-c-droppable {
+:where(:root), :where(.pf-v5-c-droppable) {
   --pf-v5-c-droppable--before--BackgroundColor: transparent;
   --pf-v5-c-droppable--before--Opacity: 0;
   --pf-v5-c-droppable--after--BorderWidth: 0;
   --pf-v5-c-droppable--after--BorderColor: transparent;
-  --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-v5-global--palette--white);
+  --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-droppable--m-dragging--before--Opacity: .6;
-  --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --pf-v5-c-droppable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
 }
+
 .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
   position: absolute;
   inset-block-start: 0;
@@ -54,6 +61,7 @@
 }
 .pf-v5-c-droppable::after {
   border: var(--pf-v5-c-droppable--after--BorderWidth, 0) solid var(--pf-v5-c-droppable--after--BorderColor, transparent);
+  border-radius: var(--pf-v5-c-droppable--m-dragging--after--BorderRadius);
 }
 .pf-v5-c-droppable.pf-m-dragging {
   --pf-v5-c-droppable--before--BackgroundColor: var(--pf-v5-c-droppable--m-dragging--before--BackgroundColor);
@@ -64,8 +72,4 @@
 }
 .pf-v5-c-droppable.pf-m-drag-outside {
   --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-droppable {
-  --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
 }

package/components/DragDrop/drag-drop.scss

@@ -1,14 +1,17 @@
 // @debug $draggable; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$draggable} {
+:where(:root), :where(.#{$draggable}) {
   --#{$draggable}--Cursor: auto;
   --#{$draggable}--m-dragging--Cursor: grabbing;
-  --#{$draggable}--m-dragging--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$draggable}--m-dragging--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$draggable}--m-dragging--after--BorderColor: var(--#{$pf-global}--active-color--100);
+  --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --#{$draggable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$draggable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --#{$draggable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$draggable}--m-drag-outside--Cursor: not-allowed;
-  --#{$draggable}--m-drag-outside--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$draggable}--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
 
+.#{$draggable} {
   cursor: var(--#{$draggable}--Cursor);
 
   &.pf-m-dragging {
@@ -26,6 +29,7 @@
       inset-inline-end: 0;
       content: "";
       border: var(--#{$draggable}--m-dragging--after--BorderWidth) solid var(--#{$draggable}--m-dragging--after--BorderColor);
+      border-radius: var(--#{$draggable}--m-dragging--after--BorderRadius);
     }
   }
 
@@ -35,17 +39,20 @@
   }
 }
 
-.#{$droppable} {
+:where(:root), :where(.#{$droppable}) {
   --#{$droppable}--before--BackgroundColor: transparent;
   --#{$droppable}--before--Opacity: 0;
   --#{$droppable}--after--BorderWidth: 0;
   --#{$droppable}--after--BorderColor: transparent;
-  --#{$droppable}--m-dragging--before--BackgroundColor: var(--#{$pf-global}--palette--white);
+  --#{$droppable}--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$droppable}--m-dragging--before--Opacity: .6;
-  --#{$droppable}--m-dragging--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$droppable}--m-dragging--after--BorderColor: var(--#{$pf-global}--active-color--100);
-  --#{$droppable}--m-drag-outside--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$droppable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$droppable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --#{$droppable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$droppable}--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
 
+.#{$droppable} {
   &::before,
   &::after {
     position: absolute;
@@ -64,6 +71,7 @@
 
   &::after {
     border: var(--#{$droppable}--after--BorderWidth, 0) solid var(--#{$droppable}--after--BorderColor, transparent);
+    border-radius: var(--#{$droppable}--m-dragging--after--BorderRadius);
   }
 
   &.pf-m-dragging {
@@ -79,10 +87,3 @@
     --#{$droppable}--m-dragging--after--BorderColor: var(--#{$droppable}--m-drag-outside--after--BorderColor);
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/drag-drop";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-drag-drop;
-}

package/components/FileUpload/file-upload.css

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

package/components/FileUpload/file-upload.scss

@@ -1,60 +1,48 @@
 // @debug $file-upload; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$file-upload} {
-  // pf-m-loading
-  --#{$file-upload}--m-loading__file-details--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$file-upload}--m-loading__file-details--before--Left: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$file-upload}--m-loading__file-details--before--Right: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$file-upload}--m-loading__file-details--before--Bottom: var(--#{$pf-global}--BorderWidth--sm);
+:where(:root),
+:where(.#{$file-upload}) {
+  --#{$file-upload}--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$file-upload}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$file-upload}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$file-upload}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$file-upload}--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$file-upload}--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$file-upload}--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$file-upload}--BorderColor: transparent;
+  --#{$file-upload}--BorderStyle: solid;
 
   // pf-m-drag-hover
-  --#{$file-upload}--m-drag-hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$file-upload}--m-drag-hover--before--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$file-upload}--m-drag-hover--before--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$file-upload}--m-drag-hover--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
-  --#{$file-upload}--m-drag-hover--after--Opacity: .1;
+  --#{$file-upload}--m-drag-hover--BorderColor: var(--pf-t--global--icon--color--brand--default);
+  --#{$file-upload}--m-drag-hover--BorderStyle: dashed;
 
-  // Text area
-  --#{$file-upload}__file-details__c-form-control--MinHeight: calc(var(--#{$pf-global}--spacer--3xl) * 2);
+  // File select > Button
+  --#{$file-upload}__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
 
-  // Button overrides
-  --#{$file-upload}__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
+  // File details > Text area
+  --#{$file-upload}__file-details__c-form-control--MinHeight: calc(var(--pf-t--global--spacer--3xl) * 2);
+}
 
+.#{$file-upload} {
   position: relative;
   display: flex;
   flex-direction: column;
+  row-gap: var(--#{$file-upload}--RowGap);
+  padding-block-start: var(--#{$file-upload}--PaddingBlockStart);
+  padding-block-end: var(--#{$file-upload}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$file-upload}--PaddingInlineStart);
+  padding-inline-end: var(--#{$file-upload}--PaddingInlineEnd);
+  border: var(--#{$file-upload}--BorderWidth) var(--#{$file-upload}--BorderStyle) var(--#{$file-upload}--BorderColor);
+  border-radius: var(--#{$file-upload}--BorderRadius);
 
   &.pf-m-drag-hover {
-    &::before {
-      position: absolute;
-      inset: 0;
-      z-index: var(--#{$file-upload}--m-drag-hover--before--ZIndex);
-      content: "";
-      border: var(--#{$file-upload}--m-drag-hover--before--BorderWidth) solid var(--#{$file-upload}--m-drag-hover--before--BorderColor);
-    }
-
-    &::after {
-      position: absolute;
-      inset: 0;
-      content: "";
-      background-color: var(--#{$file-upload}--m-drag-hover--after--BackgroundColor);
-      opacity: var(--#{$file-upload}--m-drag-hover--after--Opacity);
-    }
+    --#{$file-upload}--BorderColor: var(--#{$file-upload}--m-drag-hover--BorderColor);
+    --#{$file-upload}--BorderStyle: var(--#{$file-upload}--m-drag-hover--BorderStyle);
   }
 
   &.pf-m-loading {
     .#{$file-upload}__file-details {
       position: relative;
-
-      &::before {
-        position: absolute;
-        inset-block-start: 0;
-        inset-block-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
-        inset-inline-start: var(--#{$file-upload}--m-loading__file-details--before--Left);
-        inset-inline-end: var(--#{$file-upload}--m-loading__file-details--before--Left);
-        content: "";
-        background-color: var(--#{$file-upload}--m-loading__file-details--before--BackgroundColor);
-      }
     }
   }
 }
@@ -78,7 +66,7 @@
 
 .#{$file-upload}__file-details-spinner {
   position: absolute;
- inset-block-start: 50%;
- inset-inline-start: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -50%);
 }