@patternfly/patternfly 6.0.0-alpha.56 → 6.0.0-alpha.58

package/components/Button/button.css

@@ -1,5 +1,5 @@
-:root,
-.pf-v5-c-button {
+:where(:root),
+:where(.pf-v5-c-button) {
   --pf-v5-c-button--Display: inline-block;
   --pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
@@ -98,20 +98,29 @@
   --pf-v5-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
-  --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
   --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
+  --pf-v5-c-button--m-plain--MinWidth: calc(1em * var(--pf-v5-c-button--LineHeight) + var(--pf-v5-c-button--m-plain--PaddingTop) + var(--pf-v5-c-button--m-plain--PaddingBottom));
   --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
+  --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-plain--m-no-padding--MixBlendMode: normal;
+  --pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
+  --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
+  --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
+  --pf-v5-c-button--m-plain--m-no-padding--PaddingBottom: 0;
+  --pf-v5-c-button--m-plain--m-no-padding--PaddingLeft: 0;
+  --pf-v5-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
+  --pf-v5-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
+  --pf-v5-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
   --pf-v5-c-button__progress--Color: var(--pf-v5-c-button__icon--Color);
-  --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
-  --pf-v5-c-button--m-plain--MinWidth: calc(1em * var(--pf-v5-c-button--LineHeight) + var(--pf-v5-c-button--m-plain--PaddingTop) + var(--pf-v5-c-button--m-plain--PaddingBottom));
   --pf-v5-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-button--m-control--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v5-c-button--m-control--PaddingRight: var(--pf-t--global--spacer--md);
@@ -452,9 +461,15 @@
   min-width: var(--pf-v5-c-button--m-plain--MinWidth);
 }
 .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
-  min-width: auto;
-  padding: 0;
-  background-color: transparent;
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--m-no-padding--BackgroundColor);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--m-no-padding--hover--BackgroundColor);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-plain--PaddingTop: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingTop);
+  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
+  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
+  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
+  --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode);
+  min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
 }
 .pf-v5-c-button.pf-m-block {
   display: block;

package/components/Button/button.scss

@@ -1,5 +1,5 @@
-:root,
-.#{$button} {
+:where(:root),
+:where(.#{$button}) {
   --#{$button}--Display: inline-block;
   --#{$button}--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$button}--PaddingRight: var(--pf-t--global--spacer--lg);
@@ -114,21 +114,29 @@
   --#{$button}--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$button}--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
   --#{$button}--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$button}--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$button}--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
-  --#{$button}--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --#{$button}--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
   --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$button}--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
+  --#{$button}--m-plain--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--m-plain--PaddingTop) + var(--#{$button}--m-plain--PaddingBottom));
   --#{$button}--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$button}--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
+  --#{$button}--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$button}--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
+  --#{$button}--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$button}--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --#{$button}--m-plain--m-no-padding--MixBlendMode: normal;
+  --#{$button}--m-plain--m-no-padding--MinWidth: auto;
+  --#{$button}--m-plain--m-no-padding--PaddingTop: 0;
+  --#{$button}--m-plain--m-no-padding--PaddingRight: 0;
+  --#{$button}--m-plain--m-no-padding--PaddingBottom: 0;
+  --#{$button}--m-plain--m-no-padding--PaddingLeft: 0;
+  --#{$button}--m-plain--m-no-padding--BackgroundColor: transparent;
+  --#{$button}--m-plain--m-no-padding--hover--BackgroundColor: transparent;
+  --#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
   --#{$button}__progress--Color: var(--#{$button}__icon--Color);
-  --#{$button}--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
-  --#{$button}--m-plain--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--m-plain--PaddingTop) + var(--#{$button}--m-plain--PaddingBottom));
-
 
   // Control
   --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -524,9 +532,16 @@
     --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
 
     &.pf-m-no-padding {
-      min-width: auto;
-      padding: 0;
-      background-color: transparent;
+      --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
+      --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
+      --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
+      --#{$button}--m-plain--PaddingTop: var(--#{$button}--m-plain--m-no-padding--PaddingTop);
+      --#{$button}--m-plain--PaddingRight: var(--#{$button}--m-plain--m-no-padding--PaddingRight);
+      --#{$button}--m-plain--PaddingBottom: var(--#{$button}--m-plain--m-no-padding--PaddingBottom);
+      --#{$button}--m-plain--PaddingLeft: var(--#{$button}--m-plain--m-no-padding--PaddingLeft);
+      --#{$button}--m-plain--MixBlendMode: var(--#{$button}--m-plain--m-no-padding--MixBlendMode);
+
+      min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
     }
 
     min-width: var(--#{$button}--m-plain--MinWidth);

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,25 +1,24 @@
-.pf-v5-c-description-list {
-  --pf-v5-c-description-list--RowGap: var(--pf-v5-global--gutter--md);
-  --pf-v5-c-description-list--ColumnGap: var(--pf-v5-global--spacer--lg);
+: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;
   --pf-v5-c-description-list--GridTemplateColumns--width: 1fr;
   --pf-v5-c-description-list--GridTemplateColumns--min: 0;
-  --pf-v5-c-description-list--GridTemplateColumns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count), var(--pf-v5-c-description-list--GridTemplateColumns--width));
-  --pf-v5-c-description-list__group--RowGap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-description-list__group--ColumnGap: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-description-list__group--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-description-list__group--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-description-list__group--GridTemplateColumns: auto;
   --pf-v5-c-description-list__group--GridTemplateRows: auto 1fr;
   --pf-v5-c-description-list__group--GridColumn: auto;
-  --pf-v5-c-description-list--m-compact--RowGap: var(--pf-v5-global--gutter);
-  --pf-v5-c-description-list--m-compact--ColumnGap: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-description-list--m-compact--RowGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-description-list--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-description-list__term--Display: inline;
   --pf-v5-c-description-list__term--sm--Display: flex;
-  --pf-v5-c-description-list__term--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-description-list__term--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-description-list__term--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-description-list__term-icon--MinWidth: var(--pf-v5-global--icon--FontSize--sm);
-  --pf-v5-c-description-list__term-icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-description-list__term-icon--Color: var(--pf-v5-global--icon--Color--light);
+  --pf-v5-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-description-list__term-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v5-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count));
   --pf-v5-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
   --pf-v5-c-description-list--m-horizontal__term--width: 12ch;
@@ -31,52 +30,58 @@
   --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-v5-global--BorderColor--200);
-  --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
+  --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-v5-global--Color--100);
-  --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-description-list--m-display-lg__description--FontSize: var(--pf-v5-global--FontSize--lg);
-  --pf-v5-c-description-list--m-display-2xl__description--FontSize: var(--pf-v5-global--FontSize--2xl);
-  display: grid;
-  grid-template-columns: var(--pf-v5-c-description-list--GridTemplateColumns);
-  row-gap: var(--pf-v5-c-description-list--RowGap);
-  column-gap: var(--pf-v5-c-description-list--ColumnGap);
-  align-items: baseline;
+  --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);
+  --pf-v5-c-description-list--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-description-list--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --pf-v5-c-description-list--m-horizontal__term--width-on-sm: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-md: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-lg: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-xl: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-2xl: inherit;
+  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
 }
 @media screen and (min-width: 576px) {
-  .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);
   }
 }
-.pf-v5-c-description-list[class*=pf-m-horizontal] {
-  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
-}
 @media (min-width: 576px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :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) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :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) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :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) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :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) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :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))))));
   }
 }
+
+.pf-v5-c-description-list {
+  display: grid;
+  grid-template-columns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count), var(--pf-v5-c-description-list--GridTemplateColumns--width));
+  row-gap: var(--pf-v5-c-description-list--RowGap);
+  column-gap: var(--pf-v5-c-description-list--ColumnGap);
+  align-items: baseline;
+}
 .pf-v5-c-description-list.pf-m-inline-grid {
   display: inline-grid;
 }

package/components/DescriptionList/description-list.scss

@@ -1,40 +1,39 @@
 // @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");
 
-.#{$description-list} {
-  --#{$description-list}--RowGap: var(--#{$pf-global}--gutter--md);
-  --#{$description-list}--ColumnGap: var(--#{$pf-global}--spacer--lg);
+: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;
   --#{$description-list}--GridTemplateColumns--width: 1fr;
   --#{$description-list}--GridTemplateColumns--min: 0;
-  --#{$description-list}--GridTemplateColumns: repeat(var(--#{$description-list}--GridTemplateColumns--count), var(--#{$description-list}--GridTemplateColumns--width));
 
   // group
-  --#{$description-list}__group--RowGap: var(--#{$pf-global}--spacer--sm);
-  --#{$description-list}__group--ColumnGap: var(--#{$pf-global}--spacer--sm);
+  --#{$description-list}__group--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$description-list}__group--ColumnGap: var(--pf-t--global--spacer--sm);
   --#{$description-list}__group--GridTemplateColumns: auto;
   --#{$description-list}__group--GridTemplateRows: auto 1fr;
   --#{$description-list}__group--GridColumn: auto;
 
   // compact
-  --#{$description-list}--m-compact--RowGap: var(--#{$pf-global}--gutter);
-  --#{$description-list}--m-compact--ColumnGap: var(--#{$pf-global}--spacer--sm);
+  --#{$description-list}--m-compact--RowGap: var(--pf-t--global--spacer--md);
+  --#{$description-list}--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
 
   // term
   --#{$description-list}__term--Display: inline;
   --#{$description-list}__term--sm--Display: flex;
-  --#{$description-list}__term--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-  --#{$description-list}__term--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$description-list}__term--LineHeight: var(--#{$pf-global}--LineHeight--sm);
+  --#{$description-list}__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$description-list}__term--LineHeight: var(--pf-t--global--font--line-height--body);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
     --#{$description-list}__term--Display: var(--#{$description-list}__term--sm--Display);
   }
 
   // icon
-  --#{$description-list}__term-icon--MinWidth: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$description-list}__term-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$description-list}__term-icon--Color: var(--#{$pf-global}--icon--Color--light);
+  --#{$description-list}__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
+  --#{$description-list}__term-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$description-list}__term-icon--Color: var(--pf-t--global--icon--color--subtle);
 
   // vertical
   --#{$description-list}--m-vertical__group--GridTemplateColumns: repeat(var(--#{$description-list}--GridTemplateColumns--count));
@@ -54,26 +53,27 @@ $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-global}--BorderColor--200);
-  --#{$description-list}__text--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$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-global}--Color--100);
-  --#{$description-list}__text--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100);
+  --#{$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);
 
   // Display modifiers
-  --#{$description-list}--m-display-lg__description--FontSize: var(--#{$pf-global}--FontSize--lg);
-  --#{$description-list}--m-display-2xl__description--FontSize: var(--#{$pf-global}--FontSize--2xl);
+  --#{$description-list}--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg); // TODO replace with new font tokens when available
+  --#{$description-list}--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg); // TODO replace with new font tokens when available
+
+  @include pf-v5-output-root-variables("--#{$description-list}--m-horizontal__term--width", $pf-v5-c-description-list--breakpoint-map);
+  @include pf-v5-build-css-variable-stack("--pf-v5-c-description-list__term--width", "--pf-v5-c-description-list--m-horizontal__term--width", $pf-v5-c-description-list--breakpoint-map);
+}
 
+.#{$description-list} { 
   display: grid;
-  grid-template-columns: var(--#{$description-list}--GridTemplateColumns);
+  grid-template-columns: repeat(var(--#{$description-list}--GridTemplateColumns--count), var(--#{$description-list}--GridTemplateColumns--width));  
   row-gap: var(--#{$description-list}--RowGap);
   column-gap: var(--#{$description-list}--ColumnGap);
   align-items: baseline;
 
-  &[class*="pf-m-horizontal"] {
-    @include pf-v5-build-css-variable-stack("--pf-v5-c-description-list__term--width", "--pf-v5-c-description-list--m-horizontal__term--width", $pf-v5-c-description-list--breakpoint-map);
-  }
-
   &.pf-m-inline-grid {
     display: inline-grid;
   }

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%);
 }