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

package/sass-utilities/_init.scss

@@ -23,9 +23,9 @@ $pf-global--theme-light--placeholder--class: 't-light' !default;
 // stylelint-enable
 
 // Dark theme versioned variables
-$pf-v5--theme-dark--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--class} !default; // include the operator here
-$pf-v5--theme-dark--target: '' !default; // include the operator here
-$pf-v5--theme-dark--placeholder--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--placeholder--class} !default; // include the operator here
+$pf-v6--theme-dark--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--class} !default; // include the operator here
+$pf-v6--theme-dark--target: '' !default; // include the operator here
+$pf-v6--theme-dark--placeholder--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-dark--placeholder--class} !default; // include the operator here
 
 // Light theme versioned variables
 $pf-v5--theme-light--class: '.' + #{$pf-global--theme--namespace} + #{$pf-global--theme--version} + #{$pf-global--theme-light--class} !default; // include the operator here

package/sass-utilities/functions.scss

@@ -22,35 +22,35 @@
 }
 
 // Return (width) breakpoint value if it exists
-@function pf-breakpoint-value($breakpoint, $breakpoint-map: $pf-v5-global--breakpoint-name-map) {
+@function pf-breakpoint-value($breakpoint, $breakpoint-map: $pf-v6-global--breakpoint-name-map) {
   $breakpoint-value: if(map-has-key($breakpoint-map, #{$breakpoint}), map-get($breakpoint-map, #{$breakpoint}), false);
 
   @return #{$breakpoint-value};
 }
 
 // Return height breakpoint value if it exists
-@function pf-height-breakpoint-value($height-breakpoint, $height-breakpoint-map: $pf-v5-global--height-breakpoint-name-map) {
+@function pf-height-breakpoint-value($height-breakpoint, $height-breakpoint-map: $pf-v6-global--height-breakpoint-name-map) {
   $height-breakpoint-value: if(map-has-key($height-breakpoint-map, #{$height-breakpoint}), map-get($height-breakpoint-map, #{$height-breakpoint}), false);
 
   @return #{$height-breakpoint-value};
 }
 
 // Build breakpoint map
-// Based on $pf-v5-global--breakpoint-name-map
+// Based on $pf-v6-global--breakpoint-name-map
 @function build-breakpoint-map($map-items...) {
   $map: ();
 
   @if length($map-items) == 0 {
     $map: ("base": null);
-    $map: map-merge($map, $pf-v5-global--breakpoint-name-map);
+    $map: map-merge($map, $pf-v6-global--breakpoint-name-map);
   } @else {
     @each $breakpoint in $map-items {
-      @if not map-has-key($pf-v5-global--breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
+      @if not map-has-key($pf-v6-global--breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
         $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
       } @else if $breakpoint == "base" {
         $map: map-merge($map, ($breakpoint: null));
       } @else {
-        $map: map-merge($map, ($breakpoint: map-get($pf-v5-global--breakpoint-name-map, #{$breakpoint})));
+        $map: map-merge($map, ($breakpoint: map-get($pf-v6-global--breakpoint-name-map, #{$breakpoint})));
       }
     }
   }
@@ -59,21 +59,21 @@
 }
 
 // Build height breakpoint map
-// Based on $pf-v5-global--height-breakpoint-name-map
+// Based on $pf-v6-global--height-breakpoint-name-map
 @function build-height-breakpoint-map($map-items...) {
   $map: ();
 
   @if length($map-items) == 0 {
     $map: ("base": null);
-    $map: map-merge($map, $pf-v5-global--height-breakpoint-name-map);
+    $map: map-merge($map, $pf-v6-global--height-breakpoint-name-map);
   } @else {
     @each $breakpoint in $map-items {
-      @if not map-has-key($pf-v5-global--height-breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
+      @if not map-has-key($pf-v6-global--height-breakpoint-name-map, $breakpoint) and $breakpoint != "base" {
         $map: map-merge($map, ("invalid breakpoint #{$breakpoint}": null));
       } @else if $breakpoint == "base" {
         $map: map-merge($map, ($breakpoint: null));
       } @else {
-        $map: map-merge($map, ($breakpoint: map-get($pf-v5-global--height-breakpoint-name-map, #{$breakpoint})));
+        $map: map-merge($map, ($breakpoint: map-get($pf-v6-global--height-breakpoint-name-map, #{$breakpoint})));
       }
     }
   }
@@ -118,6 +118,6 @@
 
 // Returns a calc() with the inverse of a value used for RTL. Most commonly used as the inverse/negative of a value in a transform function (eg, translate(), rotate(), scale(), etc)
 // Shouldn't be used on an existing LTR style as adding a calc() in an existing style could be breaking. Should used within an RTL selector, which is basically an opt-in.
-@function pf-v5-calc-inverse($val, $multiplier: var(--#{$pf-global}--inverse--multiplier)) {
+@function pf-v6-calc-inverse($val, $multiplier: var(--#{$pf-global}--inverse--multiplier)) {
   @return calc(#{$val} * #{$multiplier});
 }

package/sass-utilities/mixins.scss

@@ -1,52 +1,52 @@
 // Media query used to create responsive classes
-@mixin pf-v5-media-query($point) {
+@mixin pf-v6-media-query($point) {
   @if $point == "" or not $point or $point == "base" {
     @content;
   } @else if $point == "sm" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       @content;
     }
   } @else if $point == "md" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
       @content;
     }
   } @else if $point == "lg" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
       @content;
     }
   } @else if $point == "xl" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
       @content;
     }
   } @else if $point == "2xl" {
-    @media screen and (min-width: $pf-v5-global--breakpoint--2xl) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--2xl) {
       @content;
     }
   }
 }
 
 // Media query used to create responsive classes
-@mixin pf-v5-height-media-query($point) {
+@mixin pf-v6-height-media-query($point) {
   @if $point == "" or not $point or $point == "base" {
     @content;
   } @else if $point == "sm" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--sm) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--sm) {
       @content;
     }
   } @else if $point == "md" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--md) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--md) {
       @content;
     }
   } @else if $point == "lg" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--lg) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--lg) {
       @content;
     }
   } @else if $point == "xl" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--xl) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--xl) {
       @content;
     }
   } @else if $point == "2xl" {
-    @media screen and (min-height: $pf-v5-global--height-breakpoint--2xl) {
+    @media screen and (min-height: $pf-v6-global--height-breakpoint--2xl) {
       @content;
     }
   }
@@ -56,28 +56,28 @@
 // @group mixins
 // @moduleType mixin
 // @parameter: [Suffix] xs, sm, md, lg, xl, base or null
-// @usage: @include pf-v5-utility-builder(class-name, base sm md lg xl);
+// @usage: @include pf-v6-utility-builder(class-name, base sm md lg xl);
 // ===============================================================================================
 
 // ## Example sass map:
 // this must be used when order matters or a cluster of similar utilties need to overwrite each other
 
 // Justify content options
-// $pf-v5-u-flex-options: (
+// $pf-v6-u-flex-options: (
 //   flex-none:  (flex none),
 //   flex-1:     (flex 1)
 // );
 
-// non-responsive, base only                @include pf-v5-utility-builder($sass-map)
-// responsive, including all breakpoints    @include pf-v5-utility-builder($sass-map, $pf-v5-global--breakpoint-list)
-// responsive height breakpoints            @include pf-v5-utility-builder($sass-map, $pf-v5-global--height-breakpoint-list, 'height')
+// non-responsive, base only                @include pf-v6-utility-builder($sass-map)
+// responsive, including all breakpoints    @include pf-v6-utility-builder($sass-map, $pf-v6-global--breakpoint-list)
+// responsive height breakpoints            @include pf-v6-utility-builder($sass-map, $pf-v6-global--height-breakpoint-list, 'height')
 
 // ## Passing individual utilities values
 // ===============================================================================================
 // Example individual utility:
-// @include pf-v5-utility-builder(flex-fill flex "1 1 auto", $pf-v5-global--breakpoint-list);
+// @include pf-v6-utility-builder(flex-fill flex "1 1 auto", $pf-v6-global--breakpoint-list);
 
-@mixin pf-v5-utility-builder($props, $breakpoints: null, $direction: "width") {
+@mixin pf-v6-utility-builder($props, $breakpoints: null, $direction: "width") {
   // if $class-name is a map
 
   // stylelint-disable
@@ -97,7 +97,7 @@
         $suffix: -on-#{$breakpoint};
 
         @if $direction == 'height' {
-          @include pf-v5-height-media-query($breakpoint) {
+          @include pf-v6-height-media-query($breakpoint) {
             @each $class, $val in $props {
               $property: nth($val, 1);
               $value: #{nth($val, 2) !important};
@@ -109,7 +109,7 @@
           }
         }
         @else if $direction == 'width' {
-          @include pf-v5-media-query($breakpoint) {
+          @include pf-v6-media-query($breakpoint) {
             @each $class, $val in $props {
               $property: nth($val, 1);
               $value: #{nth($val, 2) !important};
@@ -138,7 +138,7 @@
         $suffix: -on-#{$breakpoint};
 
         .#{$pf-prefix}u-#{$class}#{$suffix} {
-          @include pf-v5-media-query($breakpoint) {
+          @include pf-v6-media-query($breakpoint) {
             #{$property}: #{$value};
           }
         }
@@ -149,7 +149,7 @@
 
 // stylelint-enable
 
-@mixin pf-v5-u-screen-reader {
+@mixin pf-v6-u-screen-reader {
   position: fixed;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -159,7 +159,7 @@
   border: 0;
 }
 
-@mixin pf-v5-u-visible {
+@mixin pf-v6-u-visible {
   position: static;
   overflow: visible;
   clip: auto;
@@ -167,27 +167,28 @@
   border: inherit;
 }
 
-@mixin pf-v5-t-light($color: "--#{$pf-global}--Color--100") {
+// Remove when deprecated components are removed
+@mixin pf-v6-t-light($color: "--#{$pf-global}--Color--100") {
   @if $color {
     color: var(#{$color});
   }
 
-  @extend %pf-v5-t-light;
+  @extend %pf-v6-t-light;
 }
 
-@mixin pf-v5-t-dark($color: "--#{$pf-global}--Color--100") {
+@mixin pf-v6-t-dark($color: "--#{$pf-global}--Color--100") {
   color: var(#{$color});
 
-  @extend %pf-v5-t-dark;
+  @extend %pf-v6-t-dark;
 }
 
-@mixin pf-v5-text-overflow {
+@mixin pf-v6-text-overflow {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-@mixin pf-v5-line-clamp($line-clamp-val: 1) {
+@mixin pf-v6-line-clamp($line-clamp-val: 1) {
   // stylelint-disable
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -196,7 +197,7 @@
   overflow: hidden;
 }
 
-@mixin pf-v5-overflow-hide-scroll {
+@mixin pf-v6-overflow-hide-scroll {
   &::-webkit-scrollbar {
     display: none;
   } // hides scrollbars in Chrome
@@ -205,15 +206,15 @@
   -ms-overflow-style: -ms-autohiding-scrollbar; // auto hides scrollbars in Edge
 }
 
-@mixin pf-v5-hidden-visible($val: "block") {
+@mixin pf-v6-hidden-visible($val: "block") {
   // stylelint-disable-next-line
-  --pf-v5-hidden-visible--visible--Display: #{$val};
+  --pf-v6-hidden-visible--visible--Display: #{$val};
 
-  @extend %pf-v5-hidden-visible;
+  @extend %pf-v6-hidden-visible;
 }
 
 // Apply media query if value is passed
-@mixin pf-v5-apply-breakpoint($breakpoint) {
+@mixin pf-v6-apply-breakpoint($breakpoint) {
   @if $breakpoint == "null" or $breakpoint == "base" or $breakpoint == "" {
     @content;
   } @else {
@@ -226,7 +227,7 @@
 }
 
 // Apply height media query if value is passed
-@mixin pf-v5-apply-height-breakpoint($breakpoint) {
+@mixin pf-v6-apply-height-breakpoint($breakpoint) {
   @if $breakpoint == "null" or $breakpoint == "base" or $breakpoint == "" {
     @content;
   } @else {
@@ -238,14 +239,14 @@
   }
 }
 
-@mixin pf-v5-emit-properties($map) {
+@mixin pf-v6-emit-properties($map) {
   @each $prop, $value in $map {
     #{$value}: #{$prop};
   }
 }
 
 // Animate tab focus removal
-@mixin pf-v5-animate-remove-tab-focus($element, $delay: $pf-v5-global--TransitionDuration) {
+@mixin pf-v6-animate-remove-tab-focus($element, $delay: $pf-v5-global--TransitionDuration) {
   @keyframes pf-remove-tab-focus {
     to {
       visibility: hidden;
@@ -260,7 +261,7 @@
 }
 
 // Build variable stack
-@mixin pf-v5-build-css-variable-stack($prop, $css-var, $breakpoint-map: $pf-v5-global--breakpoint-map, $important: false) {
+@mixin pf-v6-build-css-variable-stack($prop, $css-var, $breakpoint-map: $pf-v6-global--breakpoint-map, $important: false) {
   $list: ();
 
   @each $breakpoint, $breakpoint-value in $breakpoint-map {
@@ -283,7 +284,7 @@
     }
 
     // Assign variable stack to $prop
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       @if $important == true {
         // stylelint-disable declaration-no-important
         #{$prop}: #{$variable-list} !important;
@@ -296,7 +297,7 @@
 }
 
 // Build variable stack
-@mixin pf-v5-output-root-variables($css-var, $breakpoint-map: $pf-v5-global--breakpoint-map) {
+@mixin pf-v6-output-root-variables($css-var, $breakpoint-map: $pf-v6-global--breakpoint-map) {
   $list: ();
 
   @each $breakpoint, $breakpoint-value in $breakpoint-map {
@@ -314,13 +315,13 @@
 }
 
 // Dark theme style block
-@mixin pf-v5-theme-dark($theme-dark-class: $pf-v5--theme-dark--class, $theme-dark-target: $pf-v5--theme-dark--target) {
+@mixin pf-v6-theme-dark($theme-dark-class: $pf-v6--theme-dark--class, $theme-dark-target: $pf-v6--theme-dark--target) {
   #{$theme-dark-target}:where(#{$theme-dark-class}) {
     @content;
   }
 }
 
-@mixin pf-v5-construct-global-vars($prefix: $pf-prefix--version, $maps...) {
+@mixin pf-v6-construct-global-vars($prefix: $pf-prefix--version, $maps...) {
   @each $map in $maps {
     @each $name, $val in $map {
       #{$prefix}#{$name}: #{$val};
@@ -332,7 +333,7 @@
 
 // Used to create the RTL selector for RTL specific styles
 
-// @include pf-v5-rtl {
+// @include pf-v6-rtl {
 //   background: red;
 // }
 
@@ -341,14 +342,14 @@
 // [dir="rtl"] {
 //   background: red;
 // }
-@mixin pf-v5-rtl {
+@mixin pf-v6-rtl {
   @at-root :where(.#{$pf-prefix}m-dir-rtl, [dir="rtl"]) #{&} {
     @content;
   }
 }
 
 // Used to create the LTR selector for LTR specific styles
-@mixin pf-v5-ltr {
+@mixin pf-v6-ltr {
   @at-root :where(.#{$pf-prefix}m-dir-ltr, [dir="ltr"]) #{&} {
     @content;
   }
@@ -356,7 +357,7 @@
 
 // Creates a default/LTR declaration, and an RTL declaration.
 
-// @include pf-v5-bidirectional-style(background, blue, red)
+// @include pf-v6-bidirectional-style(background, blue, red)
 
 // renders as
 
@@ -364,26 +365,26 @@
 // [dir="rtl"] {
 //   background: red;
 // }
-@mixin pf-v5-bidirectional-style($prop, $ltr-val, $rtl-val) {
+@mixin pf-v6-bidirectional-style($prop, $ltr-val, $rtl-val) {
   #{$prop}: #{$ltr-val};
 
-  @include pf-v5-rtl {
+  @include pf-v6-rtl {
     #{$prop}: #{$rtl-val};
   }
 }
 
 // Mirrors/flips something horizontally/inline. Relies upon scale/scale() not already being used for the element. Can be extended to take arguments to use different methods other than scale().
-@mixin pf-v5-mirror-inline {
+@mixin pf-v6-mirror-inline {
   scale: -1 1;
 }
 
-@mixin pf-v5-mirror-inline-on-rtl {
-  @include pf-v5-rtl {
-    @include pf-v5-mirror-inline;
+@mixin pf-v6-mirror-inline-on-rtl {
+  @include pf-v6-rtl {
+    @include pf-v6-mirror-inline;
   }
 }
 
 // Declares a global inverse multiplier var used for returning the inverse of a number. Defined within blocks that reference the global var in calc() functions to conditionally return the default or inverse value of a number.
-@mixin pf-v5-set-inverse($val: true) {
+@mixin pf-v6-set-inverse($val: true) {
   --#{$pf-global}--inverse--multiplier: #{if($val, -1, 1)};
 }

package/sass-utilities/placeholders.scss

@@ -1,4 +1,4 @@
-%pf-v5-t-light {
+%pf-v6-t-light {
   --#{$pf-global}--Color--100: var(--#{$pf-global}--Color--dark-100);
   --#{$pf-global}--Color--200: var(--#{$pf-global}--Color--dark-200);
   --#{$pf-global}--BorderColor--100: var(--#{$pf-global}--BorderColor--dark-100);
@@ -10,7 +10,7 @@
   --#{$pf-global}--icon--Color--dark: var(--#{$pf-global}--icon--Color--dark--dark);
 }
 
-%pf-v5-t-dark {
+%pf-v6-t-dark {
   --#{$pf-global}--Color--100: var(--#{$pf-global}--Color--light-100);
   --#{$pf-global}--Color--200: var(--#{$pf-global}--Color--light-200);
   --#{$pf-global}--BorderColor--100: var(--#{$pf-global}--BorderColor--light-100);
@@ -27,39 +27,39 @@
 }
 
 // stylelint-disable
-%pf-v5-hidden-visible {
+%pf-v6-hidden-visible {
   // base value for visible display property is set to 'block' by default and passed in to
-  // placeholder via `pf-v5-hidden-visible` mixin
+  // placeholder via `pf-v6-hidden-visible` mixin
 
   // set hidden var values
-  --pf-v5-hidden-visible--hidden--Display: none;
+  --pf-v6-hidden-visible--hidden--Display: none;
 
   // set visibile var values
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
 
   // set default state to visible
-  display: var(--pf-v5-hidden-visible--Display);
+  display: var(--pf-v6-hidden-visible--Display);
 
   // toggle values based on state
   &.pf-m-hidden {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
 
-  @each $size, $bp in $pf-v5-global--breakpoint-name-map {
+  @each $size, $bp in $pf-v6-global--breakpoint-name-map {
     @media screen and (min-width: $bp) {
       &.pf-m-hidden-on-#{$size} {
-        --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+        --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
       }
 
       &.pf-m-visible-on-#{$size} {
-        --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+        --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
       }
     }
   }
 }
 // stylelint-enable
 
-%pf-v5-remove-num-arrows {
+%pf-v6-remove-num-arrows {
   appearance: textfield;
 
   // stylelint-disable

package/sass-utilities/scss-variables.scss

@@ -155,19 +155,19 @@ $pf-v5-global--ZIndex--xl: 500;
 $pf-v5-global--ZIndex--2xl: 600;
 
 // Grid breakpoints
-$pf-v5-global--breakpoint--xs: 0 !default;
-$pf-v5-global--breakpoint--sm: 576px !default;
-$pf-v5-global--breakpoint--md: 768px !default;
-$pf-v5-global--breakpoint--lg: 992px !default;
-$pf-v5-global--breakpoint--xl: 1200px !default;
-$pf-v5-global--breakpoint--2xl: 1450px !default;
+$pf-v6-global--breakpoint--xs: 0 !default;
+$pf-v6-global--breakpoint--sm: 576px !default;
+$pf-v6-global--breakpoint--md: 768px !default;
+$pf-v6-global--breakpoint--lg: 992px !default;
+$pf-v6-global--breakpoint--xl: 1200px !default;
+$pf-v6-global--breakpoint--2xl: 1450px !default;
 
 // Height breakpoints
-$pf-v5-global--height-breakpoint--sm: 0 !default;
-$pf-v5-global--height-breakpoint--md: 40rem !default; // 640px
-$pf-v5-global--height-breakpoint--lg: 48rem !default; // 768px
-$pf-v5-global--height-breakpoint--xl: 60rem !default; // 960px
-$pf-v5-global--height-breakpoint--2xl: 80rem !default; // 1280px
+$pf-v6-global--height-breakpoint--sm: 0 !default;
+$pf-v6-global--height-breakpoint--md: 40rem !default; // 640px
+$pf-v6-global--height-breakpoint--lg: 48rem !default; // 768px
+$pf-v6-global--height-breakpoint--xl: 60rem !default; // 960px
+$pf-v6-global--height-breakpoint--2xl: 80rem !default; // 1280px
 
 // Borders
 $pf-v5-global--BorderWidth--sm:     1px !default;
@@ -255,7 +255,7 @@ $pf-v5-global--target-size--MinHeight: 44px !default;
 // animations
 
 // Global breakpoint map - used for @pf-grid-item-modifiers
-$pf-v5-global--breakpoint-map: (
+$pf-v6-global--breakpoint-map: (
   "": null,
   "sm": "-on-sm",
   "md": "-on-md",
@@ -264,8 +264,8 @@ $pf-v5-global--breakpoint-map: (
   "2xl": "-on-2xl"
 );
 
-// Global breakpoint list - used for @pf-v5-utility-builder
-$pf-v5-global--breakpoint-list: (
+// Global breakpoint list - used for @pf-v6-utility-builder
+$pf-v6-global--breakpoint-list: (
   "sm",
   "md",
   "lg",
@@ -274,25 +274,25 @@ $pf-v5-global--breakpoint-list: (
 );
 
 // Global breakpoint name map - used for %pf-v5-hidden-visible
-$pf-v5-global--breakpoint-name-map: (
-  "sm": $pf-v5-global--breakpoint--sm,
-  "md": $pf-v5-global--breakpoint--md,
-  "lg": $pf-v5-global--breakpoint--lg,
-  "xl": $pf-v5-global--breakpoint--xl,
-  "2xl": $pf-v5-global--breakpoint--2xl
+$pf-v6-global--breakpoint-name-map: (
+  "sm": $pf-v6-global--breakpoint--sm,
+  "md": $pf-v6-global--breakpoint--md,
+  "lg": $pf-v6-global--breakpoint--lg,
+  "xl": $pf-v6-global--breakpoint--xl,
+  "2xl": $pf-v6-global--breakpoint--2xl
 );
 
 // Global breakpoint name map - used for %pf-v5-hidden-visible
-$pf-v5-global--height-breakpoint-name-map: (
-  "sm": $pf-v5-global--height-breakpoint--sm,
-  "md": $pf-v5-global--height-breakpoint--md,
-  "lg": $pf-v5-global--height-breakpoint--lg,
-  "xl": $pf-v5-global--height-breakpoint--xl,
-  "2xl": $pf-v5-global--height-breakpoint--2xl
+$pf-v6-global--height-breakpoint-name-map: (
+  "sm": $pf-v6-global--height-breakpoint--sm,
+  "md": $pf-v6-global--height-breakpoint--md,
+  "lg": $pf-v6-global--height-breakpoint--lg,
+  "xl": $pf-v6-global--height-breakpoint--xl,
+  "2xl": $pf-v6-global--height-breakpoint--2xl
 );
 
 // Spacer properties
-$pf-v5-global--spacer-properties-map: (
+$pf-v6-global--spacer-properties-map: (
   "m":  "margin",
   "mt": "margin-block-start",
   "mr": "margin-inline-end",

package/sass-utilities/themes/dark/mixins.scss

@@ -1,7 +1,7 @@
-@mixin pf-v5-theme-dark--t-dark($color: "--#{$pf-global}--Color--100") {
+@mixin pf-v6-theme-dark--t-dark($color: "--#{$pf-global}--Color--100") {
   @if $color {
     color: var(#{$color});
   }
 
-  @extend %pf-v5-theme-dark--t-dark;
+  @extend %pf-v6-theme-dark--t-dark;
 }

package/sass-utilities/themes/dark/placeholders.scss

@@ -1,4 +1,4 @@
-%pf-v5-theme-dark--t-dark {
+%pf-v6-theme-dark--t-dark {
   .#{$button} {
     --#{$button}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300);
   }

package/themes/dark/_patternfly-charts-theme-dark.scss

@@ -1,6 +1,6 @@
 @import "../../base/themes/dark/chart-globals";
 
-@mixin pf-v5-charts-theme-dark($pf-v5-charts-theme-dark-class: "") {
+@mixin pf-v6-charts-theme-dark($pf-v6-charts-theme-dark-class: "") {
   // stylelint-disable
   .#{$chart} {
     svg g[clip-path] {

package/utilities/Accessibility/accessibility.scss

@@ -1,19 +1,19 @@
 // screen-reader - visually hide, but expose to screen readers
-@each $breakpoint, $breakpoint-value in $pf-v5-global--breakpoint-map {
+@each $breakpoint, $breakpoint-value in $pf-v6-global--breakpoint-map {
   .#{$pf-prefix}u-screen-reader#{$breakpoint-value} {
-    @include pf-v5-media-query($breakpoint) {
-      @include pf-v5-u-screen-reader;
+    @include pf-v6-media-query($breakpoint) {
+      @include pf-v6-u-screen-reader;
     }
   }
 
   .#{$pf-prefix}u-visible#{$breakpoint-value} {
-    @include pf-v5-media-query($breakpoint) {
-      @include pf-v5-u-visible;
+    @include pf-v6-media-query($breakpoint) {
+      @include pf-v6-u-visible;
     }
   }
 
   .#{$pf-prefix}u-hidden#{$breakpoint-value} {
-    @include pf-v5-media-query($breakpoint) {
+    @include pf-v6-media-query($breakpoint) {
       // stylelint-disable
       display: none !important;
       // stylelint-enable

package/utilities/Alignment/alignment.scss

@@ -7,6 +7,6 @@ $pf-v6-u-alignment-options: (
 );
 
 // Text utilities
-@include pf-v5-utility-builder($pf-v6-u-alignment-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-alignment-options, $pf-v6-global--breakpoint-list);
 
 // stylelint-enable

package/utilities/BackgroundColor/BackgroundColor.scss

@@ -52,7 +52,7 @@ $pf-v6-u-background-color-options: (
   )
 );
 
-@include pf-v5-utility-builder($pf-v6-u-background-color-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-background-color-options, $pf-v6-global--breakpoint-list);
 
 // stylelint-enable
 

package/utilities/BoxShadow/box-shadow.scss

@@ -24,6 +24,6 @@ $pf-v6-u-box-shadow-options: (
 );
 
 // Text utilities
-@include pf-v5-utility-builder($pf-v6-u-box-shadow-options);
+@include pf-v6-utility-builder($pf-v6-u-box-shadow-options);
 
 // stylelint-enable