@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.10

package/layouts/Flex/flex.scss

@@ -1,27 +1,31 @@
+@use '../../sass-utilities' as *;
+
 // Always keep list of spacers and breakpoints up-to-date
-$pf-v5-l-flex--breakpoint-map: build-breakpoint-map();
-$pf-v5-l-flex--spacer-map: build-spacer-map();
-$pf-v5-l-flex--gap-map: build-spacer-map("base", "none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl");
-$pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $pf-v5-l-flex--spacer-map);
+$pf-v6-l-flex--breakpoint-map: build-breakpoint-map();
+$pf-v6-l-flex--spacer-map: build-spacer-map();
+$pf-v6-l-flex--gap-map: build-spacer-map("base", "none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl");
+$pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $pf-v6-l-flex--spacer-map);
 
-.#{$flex} {
+@include pf-root($flex) {
   --#{$flex}--Display: flex;
   --#{$flex}--FlexWrap: wrap;
   --#{$flex}--AlignItems: baseline;
   --#{$flex}--m-row--AlignItems: baseline;
   --#{$flex}--m-row-reverse--AlignItems: baseline;
   --#{$flex}--item--Order: 0;
-  --#{$flex}--spacer--column--base: var(--#{$pf-global}--spacer--lg); // default spacer/gap for columns
-  --#{$flex}--spacer--row--base: var(--#{$pf-global}--spacer--sm); // default spacer/gap for rows
-  --#{$flex}--RowGap: var(--#{$flex}--spacer--row--base); 
+  --#{$flex}--spacer--column--base: var(--pf-t--global--spacer--gutter--default); // default spacer/gap for columns
+  --#{$flex}--spacer--row--base: var(--pf-t--global--spacer--sm); // default spacer/gap for rows
+  --#{$flex}--RowGap: var(--#{$flex}--spacer--row--base);
   --#{$flex}--ColumnGap: 0;
   --#{$flex}--m-gap--RowGap: var(--#{$flex}--spacer--row--base);
   --#{$flex}--m-gap--ColumnGap: var(--#{$flex}--spacer--column--base);
   --#{$flex}--m-row-gap--RowGap: var(--#{$flex}--spacer--row--base);
   --#{$flex}--m-column-gap--ColumnGap: var(--#{$flex}--spacer--column--base);
+}
 
+.#{$flex} {
   // Emit spacer css variables that map to requested spacer values
-  @include pf-v5-emit-properties($pf-v5-l-flex--variable-map);
+  @include pf-v6-emit-properties($pf-v6-l-flex--variable-map);
 
   display: var(--#{$flex}--Display);
   flex-wrap: var(--#{$flex}--FlexWrap);
@@ -43,23 +47,23 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   margin-inline-end: var(--#{$flex}--spacer--column);
 
   // don't set base value for --#{$flex}--item--Order as it defaults to 0
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     order: var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order));
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     order: var(--#{$flex}--item--Order-on-md, var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order)));
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     order: var(--#{$flex}--item--Order-on-lg, var(--#{$flex}--item--Order-on-md, var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order))));
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     order: var(--#{$flex}--item--Order-on-xl, var(--#{$flex}--item--Order-on-lg, var(--#{$flex}--item--Order-on-md, var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order)))));
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--2xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--2xl) {
     order: var(--#{$flex}--item--Order-on-2xl, var(--#{$flex}--item--Order-on-xl, var(--#{$flex}--item--Order-on-lg, var(--#{$flex}--item--Order-on-md, var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order))))));
   }
 
@@ -69,10 +73,10 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 }
 
 .#{$flex} {
-  @each $breakpoint, $breakpoint-value in $pf-v5-l-flex--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       // display
       &.pf-m-flex#{$breakpoint-name} {
         display: var(--#{$flex}--Display);
@@ -296,14 +300,14 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   }
 
   // .pf-m-space-items-{size}{-on-[breakpoint]}
-  @each $breakpoint, $breakpoint-value in $pf-v5-l-flex--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
-      @each $spacer, $spacer-value in $pf-v5-l-flex--spacer-map {
+    @include pf-v6-apply-breakpoint($breakpoint) {
+      @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         &.pf-m-space-items-#{$spacer}#{$breakpoint-name} {
           > * {
-            --#{$flex}--spacer: var(#{map-get($pf-v5-l-flex--variable-map, $spacer-value)});
+            --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
           }
 
           > :last-child {
@@ -315,16 +319,16 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   }
 
   // .pf-m-spacer-{size}{-on-[breakpoint]}
-  @each $breakpoint, $breakpoint-value in $pf-v5-l-flex--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
-      @each $spacer, $spacer-value in $pf-v5-l-flex--spacer-map {
+    @include pf-v6-apply-breakpoint($breakpoint) {
+      @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         .pf-m-spacer-#{$spacer}#{$breakpoint-name} {
-          --#{$flex}--spacer: var(#{map-get($pf-v5-l-flex--variable-map, $spacer-value)});
+          --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
 
           &:last-child {
-            --#{$flex}--spacer: var(#{map-get($pf-v5-l-flex--variable-map, $spacer-value)});
+            --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
           }
         }
       }
@@ -332,25 +336,25 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   }
 
     // .pf-m-gap{-[size]}{-on-[breakpoint]}
-    @each $breakpoint, $breakpoint-value in $pf-v5-l-flex--breakpoint-map {
-      $pf-v5-l-flex--gap--selectors: ();
+    @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
+      $pf-v6-l-flex--gap--selectors: ();
 
-      @include pf-v5-apply-breakpoint($breakpoint) {
-        @each $spacer, $value in $pf-v5-l-flex--gap-map {
+      @include pf-v6-apply-breakpoint($breakpoint) {
+        @each $spacer, $value in $pf-v6-l-flex--gap-map {
           $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
           $spacer-name: if($spacer == "base", "", -#{$spacer});
           $spacer-row: if($spacer == "base", var(--#{$flex}--m-gap--RowGap), $value);
           $spacer-column: if($spacer == "base", var(--#{$flex}--m-gap--ColumnGap), $value);
           $selector: ".pf-m-gap#{$spacer-name}#{$breakpoint-name}";
-          $pf-v5-l-flex--gap--selectors: append($pf-v5-l-flex--gap--selectors, $selector, $separator: comma);
-  
+          $pf-v6-l-flex--gap--selectors: append($pf-v6-l-flex--gap--selectors, $selector, $separator: comma);
+
           &#{$selector} {
             --#{$flex}--RowGap: #{$spacer-row};
             --#{$flex}--ColumnGap: #{$spacer-column};
           }
         }
 
-        &:is(#{$pf-v5-l-flex--gap--selectors}) {
+        &:is(#{$pf-v6-l-flex--gap--selectors}) {
           > * {
             --#{$flex}--spacer--row: 0;
             --#{$flex}--spacer--column: 0;
@@ -360,23 +364,23 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
     }
 
   // .pf-m-row-gap{-[size]}{-on-[breakpoint]}
-  @each $breakpoint, $breakpoint-value in $pf-v5-l-flex--breakpoint-map {
-    @include pf-v5-apply-breakpoint($breakpoint) {
-      $pf-v5-l-flex--row-gap--selectors: ();
+  @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
+    @include pf-v6-apply-breakpoint($breakpoint) {
+      $pf-v6-l-flex--row-gap--selectors: ();
 
-      @each $spacer, $value in $pf-v5-l-flex--gap-map {
+      @each $spacer, $value in $pf-v6-l-flex--gap-map {
         $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
         $spacer-name: if($spacer == "base", "", -#{$spacer});
         $spacer-value: if($spacer == "base", var(--#{$flex}--m-row-gap--RowGap), $value);
         $selector: ".pf-m-row-gap#{$spacer-name}#{$breakpoint-name}";
-        $pf-v5-l-flex--row-gap--selectors: append($pf-v5-l-flex--row-gap--selectors, $selector, $separator: comma);
+        $pf-v6-l-flex--row-gap--selectors: append($pf-v6-l-flex--row-gap--selectors, $selector, $separator: comma);
 
        &#{$selector} {
           --#{$flex}--RowGap: #{$spacer-value};
         }
       }
 
-      &:is(#{$pf-v5-l-flex--row-gap--selectors}) {
+      &:is(#{$pf-v6-l-flex--row-gap--selectors}) {
         > * {
           --#{$flex}--spacer--row: 0;
         }
@@ -385,23 +389,23 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   }
 
   // .pf-m-column-gap{-[size]}{-on-[breakpoint]}
-  @each $breakpoint, $breakpoint-value in $pf-v5-l-flex--breakpoint-map {
-    $pf-v5-l-flex--column-gap--selectors: ();
+  @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
+    $pf-v6-l-flex--column-gap--selectors: ();
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
-      @each $spacer, $value in $pf-v5-l-flex--gap-map {
+    @include pf-v6-apply-breakpoint($breakpoint) {
+      @each $spacer, $value in $pf-v6-l-flex--gap-map {
         $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
         $spacer-name: if($spacer == "base", "", -#{$spacer});
         $spacer-value: if($spacer == "base", var(--#{$flex}--m-column-gap--ColumnGap), $value);
         $selector: ".pf-m-column-gap#{$spacer-name}#{$breakpoint-name}";
-        $pf-v5-l-flex--column-gap--selectors: append($pf-v5-l-flex--column-gap--selectors, $selector, $separator: comma);
+        $pf-v6-l-flex--column-gap--selectors: append($pf-v6-l-flex--column-gap--selectors, $selector, $separator: comma);
 
         &#{$selector} {
           --#{$flex}--ColumnGap: #{$spacer-value};
         }
       }
 
-      &:is(#{$pf-v5-l-flex--column-gap--selectors}) {
+      &:is(#{$pf-v6-l-flex--column-gap--selectors}) {
         > * {
           --#{$flex}--spacer--column: 0;
         }

package/layouts/Gallery/gallery.css

@@ -1,11 +1,15 @@
+:root,
 .pf-v6-l-gallery {
-  --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-v6-global--gutter);
+  --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
   --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
   --pf-v6-l-gallery--GridTemplateColumns--max: 1fr;
   --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
   --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-v6-l-gallery--GridTemplateColumns--minmax--min), var(--pf-v6-l-gallery--GridTemplateColumns--minmax--max)));
   --pf-v6-l-gallery--GridTemplateRows: auto;
+}
+
+.pf-v6-l-gallery {
   display: grid;
   grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
   grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
@@ -15,52 +19,52 @@
 .pf-v6-l-gallery.pf-m-gutter {
   grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))))));
   }

package/layouts/Gallery/gallery.scss

@@ -1,14 +1,18 @@
-$pf-v5-l-gallery--breakpoint-map: build-breakpoint-map();
+@use '../../sass-utilities' as *;
 
-.#{$gallery} {
-  --#{$gallery}--m-gutter--GridGap: var(--#{$pf-global}--gutter);
+$pf-v6-l-gallery--breakpoint-map: build-breakpoint-map();
+
+@include pf-root($gallery) {
+  --#{$gallery}--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --#{$gallery}--GridTemplateColumns--min: 250px;
   --#{$gallery}--GridTemplateColumns--minmax--min: var(--#{$gallery}--GridTemplateColumns--min);
   --#{$gallery}--GridTemplateColumns--max: 1fr;
   --#{$gallery}--GridTemplateColumns--minmax--max: var(--#{$gallery}--GridTemplateColumns--max);
   --#{$gallery}--GridTemplateColumns: repeat(auto-fill, minmax(var(--#{$gallery}--GridTemplateColumns--minmax--min), var(--#{$gallery}--GridTemplateColumns--minmax--max)));
   --#{$gallery}--GridTemplateRows: auto;
+}
 
+.#{$gallery} {
   display: grid;
   grid-template-rows: var(--#{$gallery}--GridTemplateRows);
   grid-template-columns: var(--#{$gallery}--GridTemplateColumns);
@@ -17,6 +21,6 @@ $pf-v5-l-gallery--breakpoint-map: build-breakpoint-map();
     grid-gap: var(--#{$gallery}--m-gutter--GridGap);
   }
 
-  @include pf-v5-build-css-variable-stack("--#{$gallery}--GridTemplateColumns--minmax--min", "--#{$gallery}--GridTemplateColumns--min", $pf-v5-l-gallery--breakpoint-map);
-  @include pf-v5-build-css-variable-stack("--#{$gallery}--GridTemplateColumns--minmax--max", "--#{$gallery}--GridTemplateColumns--max", $pf-v5-l-gallery--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$gallery}--GridTemplateColumns--minmax--min", "--#{$gallery}--GridTemplateColumns--min", $pf-v6-l-gallery--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$gallery}--GridTemplateColumns--minmax--max", "--#{$gallery}--GridTemplateColumns--max", $pf-v6-l-gallery--breakpoint-map);
 }

package/layouts/Grid/grid.css

@@ -1,8 +1,12 @@
+:root,
 .pf-v6-l-grid {
-  --pf-v6-l-grid--m-gutter--GridGap: var(--pf-v6-global--gutter);
+  --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --pf-v6-l-grid__item--GridColumnStart: auto;
   --pf-v6-l-grid__item--GridColumnEnd: span 12;
   --pf-v6-l-grid--item--Order: 0;
+}
+
+.pf-v6-l-grid {
   display: grid;
   grid-template-columns: repeat(12, [col-start] 1fr);
 }
@@ -14,31 +18,31 @@
   min-height: 0;
   order: var(--pf-v6-l-grid--item--Order);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-l-grid > *,
   .pf-v6-l-grid .pf-v6-l-grid__item {
     order: var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-l-grid > *,
   .pf-v6-l-grid .pf-v6-l-grid__item {
     order: var(--pf-v6-l-grid--item--Order-on-md, var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-l-grid > *,
   .pf-v6-l-grid .pf-v6-l-grid__item {
     order: var(--pf-v6-l-grid--item--Order-on-lg, var(--pf-v6-l-grid--item--Order-on-md, var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-l-grid > *,
   .pf-v6-l-grid .pf-v6-l-grid__item {
     order: var(--pf-v6-l-grid--item--Order-on-xl, var(--pf-v6-l-grid--item--Order-on-lg, var(--pf-v6-l-grid--item--Order-on-md, var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-l-grid > *,
   .pf-v6-l-grid .pf-v6-l-grid__item {
     order: var(--pf-v6-l-grid--item--Order-on-2xl, var(--pf-v6-l-grid--item--Order-on-xl, var(--pf-v6-l-grid--item--Order-on-lg, var(--pf-v6-l-grid--item--Order-on-md, var(--pf-v6-l-grid--item--Order-on-sm, var(--pf-v6-l-grid--item--Order))))));
@@ -80,7 +84,7 @@
 .pf-v6-l-grid.pf-m-all-12-col > * {
   --pf-v6-l-grid__item--GridColumnEnd: span 12;
 }
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-l-grid.pf-m-all-1-col-on-sm > * {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }
@@ -118,7 +122,7 @@
     --pf-v6-l-grid__item--GridColumnEnd: span 12;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-l-grid.pf-m-all-1-col-on-md > * {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }
@@ -156,7 +160,7 @@
     --pf-v6-l-grid__item--GridColumnEnd: span 12;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-l-grid.pf-m-all-1-col-on-lg > * {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }
@@ -194,7 +198,7 @@
     --pf-v6-l-grid__item--GridColumnEnd: span 12;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-l-grid.pf-m-all-1-col-on-xl > * {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }
@@ -232,7 +236,7 @@
     --pf-v6-l-grid__item--GridColumnEnd: span 12;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-l-grid.pf-m-all-1-col-on-2xl > * {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }
@@ -378,7 +382,7 @@
 .pf-v6-l-grid > .pf-m-12-row {
   grid-row: span 12;
 }
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-l-grid > .pf-m-1-col-on-sm {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }
@@ -488,7 +492,7 @@
     grid-row: span 12;
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-l-grid > .pf-m-1-col-on-md {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }
@@ -598,7 +602,7 @@
     grid-row: span 12;
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-l-grid > .pf-m-1-col-on-lg {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }
@@ -708,7 +712,7 @@
     grid-row: span 12;
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-l-grid > .pf-m-1-col-on-xl {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }
@@ -818,7 +822,7 @@
     grid-row: span 12;
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-l-grid > .pf-m-1-col-on-2xl {
     --pf-v6-l-grid__item--GridColumnEnd: span 1;
   }

package/layouts/Grid/grid.scss

@@ -1,4 +1,6 @@
-$pf-v5-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used for css variable stack
+@use '../../sass-utilities' as *;
+
+$pf-v6-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used for css variable stack
 
 // URL.com/guidelines#layout
 // Generate smart grid layout
@@ -39,12 +41,14 @@ $pf-v5-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used fo
 }
 
 // Grid base
-.#{$grid} {
-  --#{$grid}--m-gutter--GridGap: var(--#{$pf-global}--gutter);
+@include pf-root($grid) {
+  --#{$grid}--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
   --#{$grid}__item--GridColumnStart: auto;
   --#{$grid}__item--GridColumnEnd: span 12;
   --#{$grid}--item--Order: 0;
+}
 
+.#{$grid} {
   display: grid;
   grid-template-columns: repeat(12, [col-start] 1fr);
 
@@ -55,19 +59,19 @@ $pf-v5-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used fo
     min-width: 0;
     min-height: 0;
 
-    @include pf-v5-build-css-variable-stack("order", "--#{$grid}--item--Order", $pf-v5-l-grid--breakpoint-map);
+    @include pf-v6-build-css-variable-stack("order", "--#{$grid}--item--Order", $pf-v6-l-grid--breakpoint-map);
   }
 
   // Loop through $breakpoints map to generate responsive classes
-  @each $breakpoint, $value in $pf-v5-global--breakpoint-map {
-    @include pf-v5-media-query($breakpoint) {
+  @each $breakpoint, $value in $pf-v6-global--breakpoint-map {
+    @include pf-v6-media-query($breakpoint) {
       @include pf-smart-grid($value);
     }
   }
 
   // Loop through $breakpoints map to generate responsive classes
-  @each $breakpoint, $value in $pf-v5-global--breakpoint-map {
-    @include pf-v5-media-query($breakpoint) {
+  @each $breakpoint, $value in $pf-v6-global--breakpoint-map {
+    @include pf-v6-media-query($breakpoint) {
       @include pf-grid-item-modifier($value);
     }
   }

package/layouts/Level/level.css

@@ -1,5 +1,9 @@
+:root,
+.pf-v6-l-level {
+  --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
+}
+
 .pf-v6-l-level {
-  --pf-v6-l-level--m-gutter--Gap: var(--pf-v6-global--gutter);
   display: flex;
   flex-wrap: wrap;
   align-items: center;

package/layouts/Level/level.scss

@@ -1,6 +1,10 @@
-.#{$level} {
-  --#{$level}--m-gutter--Gap: var(--#{$pf-global}--gutter);
+@use '../../sass-utilities' as *;
+
+@include pf-root($level) {
+  --#{$level}--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
+}
 
+.#{$level} {
   display: flex;
   flex-wrap: wrap;
   align-items: center;

package/layouts/Split/split.css

@@ -1,5 +1,9 @@
+:root,
+.pf-v6-l-split {
+  --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
+}
+
 .pf-v6-l-split {
-  --pf-v6-l-stack--m-gutter--Gap: var(--pf-v6-global--gutter);
   display: flex;
   padding: 0;
   margin: 0;

package/layouts/Split/split.scss

@@ -1,6 +1,10 @@
-.#{$split} {
-  --#{$stack}--m-gutter--Gap: var(--#{$pf-global}--gutter);
+@use '../../sass-utilities' as *;
+
+@include pf-root($split) {
+  --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
+}
 
+.#{$split} {
   display: flex;
   padding: 0;
   margin: 0;

package/layouts/Stack/stack.css

@@ -1,5 +1,9 @@
+:root,
+.pf-v6-l-stack {
+  --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
+}
+
 .pf-v6-l-stack {
-  --pf-v6-l-stack--m-gutter--Gap: var(--pf-v6-global--gutter);
   display: flex;
   flex-direction: column;
   height: 100%;

package/layouts/Stack/stack.scss

@@ -1,6 +1,10 @@
-.#{$stack} {
-  --#{$stack}--m-gutter--Gap: var(--#{$pf-global}--gutter);
+@use '../../sass-utilities' as *;
+
+@include pf-root($stack) {
+  --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
+}
 
+.#{$stack} {
   display: flex;
   flex-direction: column;
   height: 100%;