patternfly · mcoker · Mar 27, 2024 · Mar 27, 2024
diff --git a/src/patternfly/base/_variables.scss b/src/patternfly/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};

diff --git a/src/patternfly/components/AboutModalBox/about-modal-box.scss b/src/patternfly/components/AboutModalBox/about-modal-box.scss
@@ -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,15 +117,15 @@
   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"
     "content        close";
     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;
   }
 

diff --git a/src/patternfly/components/BackToTop/back-to-top.scss b/src/patternfly/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);
   }
 }

diff --git a/src/patternfly/components/Banner/banner.scss b/src/patternfly/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);
   }

diff --git a/src/patternfly/components/Content/content.scss b/src/patternfly/components/Content/content.scss
@@ -284,7 +284,7 @@
     display: grid;
     grid-template-columns: 1fr;
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-template: auto / auto 1fr;
       grid-row-gap: var(--#{$content}--dl--RowGap);
       grid-column-gap: var(--#{$content}--dl--ColumnGap);
@@ -297,18 +297,18 @@
     &:not(:first-child) {
       margin-block-start: var(--#{$content}--dt--MarginTop);
 
-      @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+      @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
         --#{$content}--dt--MarginTop: var(--#{$content}--dt--sm--MarginTop);
       }
     }
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-column: 1;
     }
   }
 
   dd {
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-column: 2;
     }
   }

diff --git a/src/patternfly/components/ContextSelector/context-selector.scss b/src/patternfly/components/ContextSelector/context-selector.scss
@@ -125,7 +125,7 @@
   --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$context-selector}--m-page-insets__toggle--PaddingRight: var(--#{$context-selector}--m-page-insets__toggle--xl--PaddingRight);
     --#{$context-selector}--m-page-insets__toggle--PaddingLeft: var(--#{$context-selector}--m-page-insets__toggle--xl--PaddingLeft);
     --#{$context-selector}--m-page-insets__menu-list-item--PaddingRight: var(--#{$context-selector}--m-page-insets__menu-list-item--xl--PaddingRight);

diff --git a/src/patternfly/components/DataList/data-list-grid.scss b/src/patternfly/components/DataList/data-list-grid.scss
@@ -1,19 +1,19 @@
 @mixin pf-v5-c-data-list-responsive-block() {
   // base responsive styles
   @at-root .#{$data-list}:not([class*="pf-m-grid"]) {
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
       @content;
     }
   }
 
   @at-root .#{$data-list}.pf-m-grid-none {
-    @media screen and (min-width: $pf-v5-global--breakpoint--xs) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xs) {
       @content;
     }
   }
 
   // grid modifiers
-  @each $size, $bp in $pf-v5-global--breakpoint-name-map {
+  @each $size, $bp in $pf-v6-global--breakpoint-name-map {
     @at-root .#{$data-list}.pf-m-grid-#{$size} {
       @media screen and (min-width: #{$bp}) {
         @content;
@@ -32,7 +32,7 @@
   --#{$data-list}--m-compact__cell--PaddingBottom: var(--#{$data-list}--m-compact__cell--md--PaddingBottom);
   --#{$data-list}--m-compact__cell-cell--PaddingTop: var(--#{$data-list}--m-compact__cell-cell--md--PaddingTop);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$data-list}__item-row--PaddingRight: var(--#{$data-list}__item-row--xl--PaddingRight);
     --#{$data-list}__item-row--PaddingLeft: var(--#{$data-list}__item-row--xl--PaddingLeft);
     --#{$data-list}__expandable-content-body--PaddingRight: var(--#{$data-list}__expandable-content-body--xl--PaddingRight);

diff --git a/src/patternfly/components/DataList/data-list.scss b/src/patternfly/components/DataList/data-list.scss
@@ -10,7 +10,7 @@
   --#{$data-list}--sm--BorderTopColor: var(--pf-t--global--border--color--default);
   --#{$data-list}--MarginLeft: var(--pf-t--global--spacer--md);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$data-list}--BorderTopColor: var(--#{$data-list}--sm--BorderTopColor);
     --#{$data-list}--BorderTopWidth: var(--#{$data-list}--sm--BorderTopWidth);
   }
@@ -25,7 +25,7 @@
   --#{$data-list}__item--sm--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
   --#{$data-list}__item--sm--BorderBottomColor: var(--pf-t--global--border--color--default);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$data-list}__item--BorderBottomWidth: var(--#{$data-list}__item--sm--BorderBottomWidth);
     --#{$data-list}__item--BorderBottomColor: var(--#{$data-list}__item--sm--BorderBottomColor);
   }

diff --git a/src/patternfly/components/DescriptionList/description-list.scss b/src/patternfly/components/DescriptionList/description-list.scss
@@ -26,7 +26,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$description-list}__term--LineHeight: var(--pf-t--global--font--line-height--body);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$description-list}__term--Display: var(--#{$description-list}__term--sm--Display);
   }
 

diff --git a/src/patternfly/components/Drawer/drawer.scss b/src/patternfly/components/Drawer/drawer.scss
@@ -125,7 +125,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}__splitter--m-vertical__splitter-handle--after--Width: #{pf-size-prem(4px)};
   --#{$drawer}__splitter--m-vertical__splitter-handle--after--Height: #{pf-size-prem(12px)};
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$drawer}__panel--MinWidth: var(--#{$drawer}__panel--xl--MinWidth);
 
     &.pf-m-panel-bottom {
@@ -321,15 +321,15 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     --#{$drawer}__panel--BackgroundColor: transparent;
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     --#{$drawer}__panel--FlexBasis:
       max(
         var(--#{$drawer}__panel--md--FlexBasis--min),
         min(var(--#{$drawer}__panel--md--FlexBasis), var(--#{$drawer}__panel--md--FlexBasis--max))
       );
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$drawer}__panel--md--FlexBasis: var(--#{$drawer}__panel--xl--FlexBasis);
 
     .#{$drawer}.pf-m-panel-bottom & {
@@ -485,7 +485,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 }
 
 // Layout modifications happen after md breakpoint
-@media screen and (min-width: $pf-v5-global--breakpoint--md) {
+@media screen and (min-width: $pf-v6-global--breakpoint--md) {
   // Default
   .#{$drawer} {
     min-width: var(--#{$drawer}__panel--MinWidth);

diff --git a/src/patternfly/components/Form/form.scss b/src/patternfly/components/Form/form.scss
@@ -3,13 +3,13 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
 @mixin pf-v5-c-form--m-horizontal {
   // default horizontal styles applied at medium breakpoint
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     @content;
   }
 
   // custom xs style since this isn't in our maps - maps are based on mobile first design. This may not even be a valid option based on design but I guess it doesn't hurt to add.
   &-on-xs {
-    @media screen and (min-width: $pf-v5-global--breakpoint--xs) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xs) {
       @content;
     }
   }