@patternfly/patternfly 6.0.0-alpha.106 → 6.0.0-alpha.108

package/layouts/Flex/flex.scss

@@ -1,27 +1,30 @@
 // 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} {
+:where(:root),
+:where(.#{$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}--spacer--column--base: var(--pf-t--global--spacer--lg); // 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 +46,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 +72,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 +299,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 +318,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,17 +335,17 @@ $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};
@@ -350,7 +353,7 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
           }
         }
 
-        &:is(#{$pf-v5-l-flex--gap--selectors}) {
+        &:is(#{$pf-v6-l-flex--gap--selectors}) {
           > * {
             --#{$flex}--spacer--row: 0;
             --#{$flex}--spacer--column: 0;
@@ -360,23 +363,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 +388,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 @@
-.pf-v6-l-gallery {
-  --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-v6-global--gutter);
+:where(:root),
+:where(.pf-v6-l-gallery) {
+  --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
   --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);

package/layouts/Gallery/gallery.scss

@@ -1,14 +1,17 @@
-$pf-v5-l-gallery--breakpoint-map: build-breakpoint-map();
+$pf-v6-l-gallery--breakpoint-map: build-breakpoint-map();
 
-.#{$gallery} {
-  --#{$gallery}--m-gutter--GridGap: var(--#{$pf-global}--gutter);
+:where(:root),
+:where(.#{$gallery}) {
+  --#{$gallery}--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
   --#{$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 +20,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 @@
-.pf-v6-l-grid {
-  --pf-v6-l-grid--m-gutter--GridGap: var(--pf-v6-global--gutter);
+:where(:root),
+:where(.pf-v6-l-grid) {
+  --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
   --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);
 }

package/layouts/Grid/grid.scss

@@ -1,4 +1,4 @@
-$pf-v5-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used for css variable stack
+$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 +39,15 @@ $pf-v5-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used fo
 }
 
 // Grid base
-.#{$grid} {
-  --#{$grid}--m-gutter--GridGap: var(--#{$pf-global}--gutter);
+:where(:root),
+:where(.#{$grid}) {
+  --#{$grid}--m-gutter--GridGap: var(--pf-t--global--spacer--lg);
   --#{$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 +58,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 @@
+:where(:root),
+:where(.pf-v6-l-level) {
+  --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--lg);
+}
+
 .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,9 @@
-.#{$level} {
-  --#{$level}--m-gutter--Gap: var(--#{$pf-global}--gutter);
+:where(:root),
+:where(.#{$level}) {
+  --#{$level}--m-gutter--Gap: var(--pf-t--global--spacer--lg);
+}
 
+.#{$level} {
   display: flex;
   flex-wrap: wrap;
   align-items: center;

package/layouts/Split/split.css

@@ -1,5 +1,9 @@
+:where(:root),
+:where(.pf-v6-l-split) {
+  --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--lg);
+}
+
 .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,9 @@
-.#{$split} {
-  --#{$stack}--m-gutter--Gap: var(--#{$pf-global}--gutter);
+:where(:root),
+:where(.#{$split}) {
+  --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--lg);
+}
 
+.#{$split} {
   display: flex;
   padding: 0;
   margin: 0;

package/layouts/Stack/stack.css

@@ -1,5 +1,9 @@
+:where(:root),
+:where(.pf-v6-l-stack) {
+  --pf-v6-l-stack--m-gutter--Gap: var(--pf-t--global--spacer--lg);
+}
+
 .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,9 @@
-.#{$stack} {
-  --#{$stack}--m-gutter--Gap: var(--#{$pf-global}--gutter);
+:where(:root),
+:where(.#{$stack}) {
+  --#{$stack}--m-gutter--Gap: var(--pf-t--global--spacer--lg);
+}
 
+.#{$stack} {
   display: flex;
   flex-direction: column;
   height: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.106",
+  "version": "6.0.0-alpha.108",
   "keywords": [],
   "license": "MIT",
   "scripts": {