@patternfly/patternfly 6.0.0-alpha.107 → 6.0.0-alpha.109

package/README.md

@@ -121,4 +121,3 @@ PatternFly 5 is supported on the latest two major versions of the following brow
 - Firefox
 - Safari
 - Edge
-

package/base/_common.scss

@@ -1,7 +1,7 @@
 // Set common reset styles for patternfly components
 
 .#{$pf-prefix}screen-reader {
-  @include pf-v5-u-screen-reader; // for use with assistive technologies
+  @include pf-v6-u-screen-reader; // for use with assistive technologies
 
   &.pf-m-full-size {
     width: 100%;
@@ -32,19 +32,19 @@
 
 // Sets a block to RTL
 .#{$pf-prefix}m-dir-rtl {
-  @include pf-v5-set-inverse;
+  @include pf-v6-set-inverse;
 
   direction: rtl;
 }
 
 // Sets a block to LTR
 .#{$pf-prefix}m-dir-ltr {
-  @include pf-v5-set-inverse(false);
+  @include pf-v6-set-inverse(false);
 
   direction: ltr;
 }
 
 // Mirrors/flips something horizontally/inline in RTL
 .#{$pf-prefix}m-mirror-inline-rtl {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 }

package/base/_globals.scss

@@ -140,6 +140,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "./themes/dark/globals";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-globals;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-globals;
 }

package/base/_themes.scss

@@ -1,5 +1,5 @@
-#{$pf-v5--theme-dark--placeholder--class} {
-  @extend %pf-v5-t-dark;
+#{$pf-v6--theme-dark--placeholder--class} {
+  @extend %pf-v6-t-dark;
 
   &.pf-m-transparent {
     background-color: transparent;
@@ -23,7 +23,7 @@
 }
 
 #{$pf-v5--theme-light--placeholder--class} {
-  @extend %pf-v5-t-light;
+  @extend %pf-v6-t-light;
 
   &.pf-m-transparent {
     background-color: transparent;

package/base/_variables.scss

@@ -191,19 +191,19 @@
   --#{$pf-global}--ZIndex--2xl: #{$pf-v5-global--ZIndex--2xl};
 
   // Grid breakpoints
-  --#{$pf-global}--breakpoint--xs: #{$pf-v5-global--breakpoint--xs};
-  --#{$pf-global}--breakpoint--sm: #{$pf-v5-global--breakpoint--sm};
-  --#{$pf-global}--breakpoint--md: #{$pf-v5-global--breakpoint--md};
-  --#{$pf-global}--breakpoint--lg: #{$pf-v5-global--breakpoint--lg};
-  --#{$pf-global}--breakpoint--xl: #{$pf-v5-global--breakpoint--xl};
-  --#{$pf-global}--breakpoint--2xl: #{$pf-v5-global--breakpoint--2xl};
+  --#{$pf-global}--breakpoint--xs: #{$pf-v6-global--breakpoint--xs};
+  --#{$pf-global}--breakpoint--sm: #{$pf-v6-global--breakpoint--sm};
+  --#{$pf-global}--breakpoint--md: #{$pf-v6-global--breakpoint--md};
+  --#{$pf-global}--breakpoint--lg: #{$pf-v6-global--breakpoint--lg};
+  --#{$pf-global}--breakpoint--xl: #{$pf-v6-global--breakpoint--xl};
+  --#{$pf-global}--breakpoint--2xl: #{$pf-v6-global--breakpoint--2xl};
 
   // Vertical breakpoints
-  --#{$pf-global}--height-breakpoint--sm: #{$pf-v5-global--height-breakpoint--sm};
-  --#{$pf-global}--height-breakpoint--md: #{$pf-v5-global--height-breakpoint--md};
-  --#{$pf-global}--height-breakpoint--lg: #{$pf-v5-global--height-breakpoint--lg};
-  --#{$pf-global}--height-breakpoint--xl: #{$pf-v5-global--height-breakpoint--xl};
-  --#{$pf-global}--height-breakpoint--2xl: #{$pf-v5-global--height-breakpoint--2xl};
+  --#{$pf-global}--height-breakpoint--sm: #{$pf-v6-global--height-breakpoint--sm};
+  --#{$pf-global}--height-breakpoint--md: #{$pf-v6-global--height-breakpoint--md};
+  --#{$pf-global}--height-breakpoint--lg: #{$pf-v6-global--height-breakpoint--lg};
+  --#{$pf-global}--height-breakpoint--xl: #{$pf-v6-global--height-breakpoint--xl};
+  --#{$pf-global}--height-breakpoint--2xl: #{$pf-v6-global--height-breakpoint--2xl};
 
   // Links
   --#{$pf-global}--link--Color: #{$pf-v5-global--link--Color};
@@ -284,11 +284,11 @@
   --#{$pf-global}--target-size--MinHeight: #{$pf-v5-global--target-size--MinHeight};
 
   // RTL
-  @include pf-v5-set-inverse(false);
+  @include pf-v6-set-inverse(false);
 }
 
-@include pf-v5-rtl {
-  @include pf-v5-set-inverse;
+@include pf-v6-rtl {
+  @include pf-v6-set-inverse;
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/base/patternfly-variables.css

@@ -552,8 +552,8 @@ html .ws-preview {
   --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
   --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
   --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
-  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--50);
-  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
   --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
   --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
   --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
@@ -641,10 +641,10 @@ html .ws-preview {
   --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
   --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
-  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--icon--color--300: var(--pf-t--color--white);
   --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
   --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -654,12 +654,18 @@ html .ws-preview {
   --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
   --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
   --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
-  --pf-t--global--spacer--control--horizontal: var(--pf-t--global--spacer--300);
-  --pf-t--global--spacer--control--vertical: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--button--horizontal--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--horizontal--compact: var(--pf-t--global--spacer--300);
   --pf-t--global--spacer--button--horizontal--default: var(--pf-t--global--spacer--400);
+  --pf-t--global--spacer--button--vertical--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--vertical--compact: var(--pf-t--global--spacer--100);
   --pf-t--global--spacer--button--vertical--default: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--300);
+  --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--100);
+  --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
   --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
   --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
@@ -673,7 +679,7 @@ html .ws-preview {
   --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
   --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
   --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
   --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
@@ -787,7 +793,7 @@ html .ws-preview {
   --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
   --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
   --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
   --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
@@ -963,19 +969,19 @@ html .ws-preview {
   --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
   --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
   --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
-  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
-  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
-  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
   --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
   --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
   --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
   --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
   --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
+  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
+  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
+  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
 }
 
-:root:where(.pf-v5-theme-dark) {
+:root:where(.pf-v6-theme-dark) {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
   --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
   --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -1039,7 +1045,7 @@ html .ws-preview {
   --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
   --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
   --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
-  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--60);
+  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
   --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
   --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
   --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);

package/base/themes/dark/_globals.scss

@@ -1,4 +1,4 @@
-@mixin pf-v5-theme-dark-globals() {
+@mixin pf-v6-theme-dark-globals() {
   // stylelint-disable property-no-unknown
   color-scheme: dark;
   // stylelint-enable

package/base/tokens/_tokens-charts.scss

@@ -1,6 +1,6 @@
 // /**
 //  * Do not edit directly
-//  * Generated on Thu, 21 Mar 2024 17:46:16 GMT
+//  * Generated on Wed, 27 Mar 2024 20:59:01 GMT
 //  */
 
 :root {

package/base/tokens/_tokens-dark.scss

@@ -1,9 +1,9 @@
 // /**
 //  * Do not edit directly
-//  * Generated on Thu, 21 Mar 2024 17:46:16 GMT
+//  * Generated on Wed, 27 Mar 2024 20:59:01 GMT
 //  */
 
-:root:where(.pf-v5-theme-dark) {
+:root:where(.pf-v6-theme-dark) {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
   --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
   --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -67,7 +67,7 @@
   --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
   --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
   --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
-  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--60);
+  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
   --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
   --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
   --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);

package/base/tokens/_tokens-default.scss

@@ -1,6 +1,6 @@
 // /**
 //  * Do not edit directly
-//  * Generated on Thu, 21 Mar 2024 17:46:16 GMT
+//  * Generated on Wed, 27 Mar 2024 20:59:01 GMT
 //  */
 
 :root {
@@ -113,8 +113,8 @@
   --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
   --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
   --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
-  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--50);
-  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
   --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
   --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
   --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
@@ -202,10 +202,10 @@
   --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
   --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
-  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--icon--color--300: var(--pf-t--color--white);
   --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
   --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -215,12 +215,18 @@
   --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
   --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
   --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
-  --pf-t--global--spacer--control--horizontal: var(--pf-t--global--spacer--300);
-  --pf-t--global--spacer--control--vertical: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--button--horizontal--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--horizontal--compact: var(--pf-t--global--spacer--300);
   --pf-t--global--spacer--button--horizontal--default: var(--pf-t--global--spacer--400);
+  --pf-t--global--spacer--button--vertical--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--vertical--compact: var(--pf-t--global--spacer--100);
   --pf-t--global--spacer--button--vertical--default: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--300);
+  --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--100);
+  --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
   --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
   --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
@@ -234,7 +240,7 @@
   --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
   --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
   --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
   --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
@@ -348,7 +354,7 @@
   --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
   --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
   --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
   --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
@@ -524,14 +530,14 @@
   --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
   --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
   --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
-  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
-  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
-  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
   --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
   --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
   --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
   --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
   --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
+  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
+  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
+  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
 }

package/base/tokens/_tokens-palette.scss

@@ -1,6 +1,6 @@
 // /**
 //  * Do not edit directly
-//  * Generated on Thu, 21 Mar 2024 17:46:16 GMT
+//  * Generated on Wed, 27 Mar 2024 20:59:01 GMT
 //  */
 
 :root {

package/components/AboutModalBox/about-modal-box.scss

@@ -15,7 +15,7 @@
   --#{$about-modal-box}--sm--GridTemplateColumns: 5fr 1fr;
   --#{$about-modal-box}--lg--GridTemplateColumns: 1fr .6fr;
 
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: --#{$about-modal-box}--BackgroundPosition,
     $ltr-val: bottom right,
     $rtl-val: bottom left
@@ -31,7 +31,7 @@
   --#{$about-modal-box}__brand--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
   --#{$about-modal-box}__brand--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$about-modal-box}__brand--PaddingRight: var(--#{$about-modal-box}__brand--sm--PaddingRight);
     --#{$about-modal-box}__brand--PaddingLeft: var(--#{$about-modal-box}__brand--sm--PaddingLeft);
     --#{$about-modal-box}__brand--PaddingBottom: var(--#{$about-modal-box}__brand--sm--PaddingBottom);
@@ -45,11 +45,11 @@
   --#{$about-modal-box}__close--sm--PaddingBottom: var(--pf-t--global--spacer--3xl);
   --#{$about-modal-box}__close--lg--PaddingRight: var(--pf-t--global--spacer--3xl);
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$about-modal-box}__close--PaddingBottom: var(--#{$about-modal-box}__close--sm--PaddingBottom);
   }
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media only screen and (min-width: $pf-v6-global--breakpoint--lg) {
     --#{$about-modal-box}__close--PaddingRight: var(--#{$about-modal-box}__close--lg--PaddingRight);
   }
 
@@ -66,7 +66,7 @@
   --#{$about-modal-box}__header--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
   --#{$about-modal-box}__header--sm--PaddingLeft: var(--pf-t--global--spacer--3xl);
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$about-modal-box}__header--PaddingRight: var(--#{$about-modal-box}__header--sm--PaddingRight);
     --#{$about-modal-box}__header--PaddingLeft: var(--#{$about-modal-box}__header--sm--PaddingLeft);
   }
@@ -77,7 +77,7 @@
   --#{$about-modal-box}__strapline--Color: var(--pf-t--global--text--color--subtle);
   --#{$about-modal-box}__strapline--sm--PaddingTop: var(--pf-t--global--spacer--2xl);
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$about-modal-box}__strapline--PaddingTop: var(--#{$about-modal-box}__strapline--sm--PaddingTop);
   }
 
@@ -91,7 +91,7 @@
   --#{$about-modal-box}__content--sm--MarginBottom: var(--pf-t--global--spacer--2xl);
   --#{$about-modal-box}__content--sm--MarginLeft: var(--pf-t--global--spacer--3xl);
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$about-modal-box}__content--MarginTop: var(--#{$about-modal-box}__content--sm--MarginTop);
     --#{$about-modal-box}__content--MarginRight: var(--#{$about-modal-box}__content--sm--MarginRight);
     --#{$about-modal-box}__content--MarginBottom: var(--#{$about-modal-box}__content--sm--MarginBottom);
@@ -117,7 +117,7 @@
   background-position: var(--#{$about-modal-box}--BackgroundPosition);
   background-size: var(--#{$about-modal-box}--BackgroundSize);
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
     grid-template-areas:
     "brand          close"
     "header         close"
@@ -125,7 +125,7 @@
     grid-template-columns: var(--#{$about-modal-box}--sm--GridTemplateColumns);
   }
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media only screen and (min-width: $pf-v6-global--breakpoint--lg) {
     --#{$about-modal-box}--Height: var(--#{$about-modal-box}--lg--Height);
     --#{$about-modal-box}--Width: var(--#{$about-modal-box}--lg--Width);
 
@@ -181,7 +181,7 @@
   word-break: break-word;
   -webkit-overflow-scrolling: touch;
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     overflow: visible;
     overscroll-behavior: auto;
   }
@@ -199,12 +199,12 @@
   padding-block-end: var(--#{$about-modal-box}__close--PaddingBottom);
   padding-inline-end: var(--#{$about-modal-box}__close--PaddingRight);
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
     grid-area: 1 / 2;
     justify-content: center;
   }
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media only screen and (min-width: $pf-v6-global--breakpoint--lg) {
     justify-content: flex-end;
   }
 

package/components/Accordion/accordion.scss

@@ -140,7 +140,7 @@
 }
 
 .#{$accordion}__toggle-text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   flex-grow: 1;
   font-weight: var(--#{$accordion}__toggle-text--FontWeight);
@@ -148,7 +148,7 @@
 }
 
 .#{$accordion}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   transition: var(--#{$accordion}__toggle-icon--Transition);
 }

package/components/Alert/alert.css

@@ -14,8 +14,8 @@
   --pf-v6-c-alert--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element) - 0.0625rem);
-  --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v6-global--spacer--form-element));
+  --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - 0.0625rem);
+  --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
   --pf-v6-c-alert__toggle--MarginRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__toggle-icon--Rotate: 0;
   --pf-v6-c-alert__toggle-icon--Transition: var(--pf-v6-global--Transition);
@@ -29,8 +29,8 @@
   --pf-v6-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-alert__title--max-lines: 1;
-  --pf-v6-c-alert__action--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
-  --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-alert__action--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-alert__action--TranslateY: 0.125rem;
   --pf-v6-c-alert__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v6-c-alert__description--PaddingTop: var(--pf-t--global--spacer--xs);

package/components/Alert/alert.scss

@@ -1,7 +1,5 @@
 // @debug $alert; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-// TODO create a token for --#{$pf-global}--spacer--form-element ?
-
 :root {
   // Alert variables
   --#{$alert}--BoxShadow: var(--pf-t--global--box-shadow--lg);
@@ -21,8 +19,8 @@
   --#{$alert}--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Toggle
-  --#{$alert}__toggle--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element) - #{pf-size-prem(1px)});
-  --#{$alert}__toggle--MarginBottom: calc(-1 * var(--#{$pf-global}--spacer--form-element));
+  --#{$alert}__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - #{pf-size-prem(1px)});
+  --#{$alert}__toggle--MarginBottom: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
   --#{$alert}__toggle--MarginRight: var(--pf-t--global--spacer--sm);
 
   // Toggle icon
@@ -44,8 +42,8 @@
   --#{$alert}__title--max-lines: 1;
 
   // Action
-  --#{$alert}__action--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$alert}__action--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$alert}__action--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$alert}__action--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$alert}__action--TranslateY: #{pf-size-prem(2px)};
   --#{$alert}__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
 
@@ -187,7 +185,7 @@
 }
 
 .#{$alert}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
   
   display: inline-block;
   transition: var(--#{$alert}__toggle-icon--Transition);
@@ -213,7 +211,7 @@
   word-break: break-word;
 
   &.pf-m-truncate {
-    @include pf-v5-line-clamp("var(--#{$alert}__title--max-lines)");
+    @include pf-v6-line-clamp("var(--#{$alert}__title--max-lines)");
   }
 }
 

package/components/AppLauncher/app-launcher.scss

@@ -303,6 +303,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/app-launcher";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-app-launcher;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-app-launcher;
 }

package/components/AppLauncher/themes/dark/app-launcher.scss

@@ -1,6 +1,6 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
-@mixin pf-v5-theme-dark-app-launcher() {
+@mixin pf-v6-theme-dark-app-launcher() {
   .#{$app-launcher} {
     --#{$app-launcher}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
     --#{$app-launcher}__menu--Top: 100%;

package/components/Avatar/avatar.scss

@@ -1,6 +1,6 @@
 // @debug $avatar; // check your variable names located in src/patternfly/sass-utilities/component-namespaces
-$pf-v5-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
-$pf-v5-c-avatar--sizes: "sm", "md", "lg", "xl";
+$pf-v6-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
 
 :root, .#{$avatar} {
   --#{$avatar}--BorderColor: transparent;
@@ -33,10 +33,10 @@ $pf-v5-c-avatar--sizes: "sm", "md", "lg", "xl";
     --#{$avatar}--BorderWidth: var(--#{$avatar}--m-bordered--BorderWidth);
   }
 
-  @each $size in $pf-v5-c-avatar--sizes {
+  @each $size in $pf-v6-c-avatar--sizes {
     &.pf-m-#{$size} {
-      @include pf-v5-build-css-variable-stack("--#{$avatar}--Width", "--#{$avatar}--m-#{$size}--Width", $pf-v5-c-avatar--breakpoint-map);
-      @include pf-v5-build-css-variable-stack("--#{$avatar}--Height", "--#{$avatar}--m-#{$size}--Height", $pf-v5-c-avatar--breakpoint-map);
+      @include pf-v6-build-css-variable-stack("--#{$avatar}--Width", "--#{$avatar}--m-#{$size}--Width", $pf-v6-c-avatar--breakpoint-map);
+      @include pf-v6-build-css-variable-stack("--#{$avatar}--Height", "--#{$avatar}--m-#{$size}--Height", $pf-v6-c-avatar--breakpoint-map);
     }
   }
 }

package/components/BackToTop/back-to-top.scss

@@ -11,7 +11,7 @@
   --#{$back-to-top}--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$back-to-top}--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
+  @media (min-width: $pf-v6-global--breakpoint--md) {
     --#{$back-to-top}--Bottom: var(--#{$back-to-top}--md--Bottom);
   }
 }

package/components/BackgroundImage/background-image.scss

@@ -12,7 +12,7 @@
 }
 
 .#{$background-image} {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: --#{$background-image}--BackgroundPosition,
     $ltr-val: bottom right,
     $rtl-val: bottom left

package/components/Banner/banner.scss

@@ -11,7 +11,7 @@
   --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
+  @media (min-width: $pf-v6-global--breakpoint--md) {
     --#{$banner}--PaddingRight: var(--#{$banner}--md--PaddingRight);
     --#{$banner}--PaddingLeft: var(--#{$banner}--md--PaddingLeft);
   }

package/components/Brand/brand.scss

@@ -1,5 +1,5 @@
 // @debug $brand; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-brand--breakpoint-map: build-breakpoint-map();
+$pf-v6-c-brand--breakpoint-map: build-breakpoint-map();
 
 .#{$brand} {
   --#{$brand}--Width: auto;
@@ -8,8 +8,8 @@ $pf-v5-c-brand--breakpoint-map: build-breakpoint-map();
   width: var(--#{$brand}--Width--base);
   height: var(--#{$brand}--Height--base);
 
-  @include pf-v5-build-css-variable-stack("--#{$brand}--Width--base", "--#{$brand}--Width", $pf-v5-c-brand--breakpoint-map);
-  @include pf-v5-build-css-variable-stack("--#{$brand}--Height--base", "--#{$brand}--Height", $pf-v5-c-brand--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$brand}--Width--base", "--#{$brand}--Width", $pf-v6-c-brand--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$brand}--Height--base", "--#{$brand}--Height", $pf-v6-c-brand--breakpoint-map);
 
   &.pf-m-picture {
     display: inline-flex;

package/components/Breadcrumb/breadcrumb.css

@@ -15,9 +15,9 @@
   --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
-  --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v6-c-breadcrumb__item--MarginRight) * -1);
-  --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginRight) * -1);
   --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
 }