@patternfly/react-styles 6.0.0-alpha.30 → 6.0.0-alpha.31

package/css/components/Divider/divider.css

@@ -22,7 +22,7 @@
 .pf-v6-c-divider.pf-m-hidden {
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-c-divider.pf-m-hidden-on-sm {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
@@ -30,7 +30,7 @@
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-c-divider.pf-m-hidden-on-md {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
@@ -38,7 +38,7 @@
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-c-divider.pf-m-hidden-on-lg {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
@@ -46,7 +46,7 @@
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-c-divider.pf-m-hidden-on-xl {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
@@ -54,7 +54,7 @@
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-c-divider.pf-m-hidden-on-2xl {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
@@ -102,21 +102,21 @@
   --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
 }
 
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-divider.pf-m-horizontal-on-sm {
     flex-direction: row;
     width: 100%;
     height: var(--pf-v6-c-divider--Size);
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-divider.pf-m-vertical-on-sm {
     flex-direction: column;
     width: var(--pf-v6-c-divider--Size);
     height: inherit;
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-divider.pf-m-inset-none-on-sm {
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
@@ -142,21 +142,21 @@
     --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-divider.pf-m-horizontal-on-md {
     flex-direction: row;
     width: 100%;
     height: var(--pf-v6-c-divider--Size);
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-divider.pf-m-vertical-on-md {
     flex-direction: column;
     width: var(--pf-v6-c-divider--Size);
     height: inherit;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-divider.pf-m-inset-none-on-md {
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
@@ -182,21 +182,21 @@
     --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-divider.pf-m-horizontal-on-lg {
     flex-direction: row;
     width: 100%;
     height: var(--pf-v6-c-divider--Size);
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-divider.pf-m-vertical-on-lg {
     flex-direction: column;
     width: var(--pf-v6-c-divider--Size);
     height: inherit;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-divider.pf-m-inset-none-on-lg {
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
@@ -222,21 +222,21 @@
     --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-divider.pf-m-horizontal-on-xl {
     flex-direction: row;
     width: 100%;
     height: var(--pf-v6-c-divider--Size);
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-divider.pf-m-vertical-on-xl {
     flex-direction: column;
     width: var(--pf-v6-c-divider--Size);
     height: inherit;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-divider.pf-m-inset-none-on-xl {
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
@@ -262,21 +262,21 @@
     --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-divider.pf-m-horizontal-on-2xl {
     flex-direction: row;
     width: 100%;
     height: var(--pf-v6-c-divider--Size);
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-divider.pf-m-vertical-on-2xl {
     flex-direction: column;
     width: var(--pf-v6-c-divider--Size);
     height: inherit;
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-divider.pf-m-inset-none-on-2xl {
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }

package/css/components/Drawer/drawer.css

@@ -105,7 +105,7 @@
   --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
   --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   :where(:root, .pf-v6-c-drawer) {
     --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
   }
@@ -248,7 +248,7 @@
 .pf-v6-c-drawer__panel.pf-m-no-background {
   --pf-v6-c-drawer__panel--BackgroundColor: transparent;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-c-drawer__panel {
     --pf-v6-c-drawer__panel--FlexBasis:
       max(
@@ -257,7 +257,7 @@
       );
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-c-drawer__panel {
     --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer__panel--xl--FlexBasis);
   }
@@ -398,7 +398,7 @@
   border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-c-drawer {
     min-width: var(--pf-v6-c-drawer__panel--MinWidth);
   }
@@ -488,7 +488,7 @@
     display: block;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25 {
     --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
   }
@@ -508,7 +508,7 @@
     --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
     --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
   }
@@ -528,7 +528,7 @@
     --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
     --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
   }
@@ -548,7 +548,7 @@
     --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
     --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
   }
@@ -568,7 +568,7 @@
     --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
   .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
     flex-shrink: 1;
@@ -635,7 +635,7 @@
     display: none;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
   .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
     flex-shrink: 1;
@@ -702,7 +702,7 @@
     display: none;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
   .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
     flex-shrink: 1;
@@ -769,7 +769,7 @@
     display: none;
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
   .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
     flex-shrink: 1;

package/css/components/Form/form.css

@@ -87,7 +87,7 @@
 .pf-v6-c-form.pf-m-horizontal.pf-m-align-right .pf-v6-c-form__label {
   text-align: end;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-c-form.pf-m-horizontal {
     --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
   }
@@ -143,7 +143,7 @@
     grid-column: 2;
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-form.pf-m-horizontal-on-sm {
     --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
   }
@@ -171,7 +171,7 @@
     grid-column: 2;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-form.pf-m-horizontal-on-md {
     --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
   }
@@ -199,7 +199,7 @@
     grid-column: 2;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-form.pf-m-horizontal-on-lg {
     --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
   }
@@ -227,7 +227,7 @@
     grid-column: 2;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-form.pf-m-horizontal-on-xl {
     --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
   }
@@ -255,7 +255,7 @@
     grid-column: 2;
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-form.pf-m-horizontal-on-2xl {
     --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
   }

package/css/components/JumpLinks/jump-links.css

@@ -81,7 +81,7 @@
   --pf-v6-c-jump-links__toggle--Display: none;
   --pf-v6-c-jump-links__label--Display: block;
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-sm {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -93,7 +93,7 @@
     --pf-v6-c-jump-links__label--Display: block;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-md {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -105,7 +105,7 @@
     --pf-v6-c-jump-links__label--Display: block;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-lg {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -117,7 +117,7 @@
     --pf-v6-c-jump-links__label--Display: block;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-xl {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -129,7 +129,7 @@
     --pf-v6-c-jump-links__label--Display: block;
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-jump-links.pf-m-expandable-on-2xl {
     --pf-v6-c-jump-links__list--Display: none;
     --pf-v6-c-jump-links__toggle--Display: block;
@@ -188,7 +188,7 @@
   text-decoration: none;
   outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset);
 }
-.pf-v6-c-jump-links__link:hover, .pf-v6-c-jump-links__link:focus {
+.pf-v6-c-jump-links__link:is(:hover, :focus) {
   --pf-v6-c-jump-links__link-text--Color: var(--pf-v6-c-jump-links__link--hover__link-text--Color);
 }
 .pf-v6-c-jump-links__link::before {

package/css/components/Label/label.css

@@ -133,7 +133,7 @@
   --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
   --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
   --pf-v6-c-label--m-clickable__content--Cursor: pointer;
-  --pf-v6-c-label--m-filled__actions--c-button--Color: var(--pf-v6-c-label__icon--Color);
+  --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
   --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-label--m-outline--BackgroundColor: transparent;
   --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
@@ -159,7 +159,7 @@
   --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
   --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
+  --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
   --pf-v6-c-label__content--MaxWidth: 100%;
   --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label__content--Cursor: initial;
@@ -174,14 +174,14 @@
   --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-label--m-editable--TextDecoration: underline;
-  --pf-v6-c-label--m-editable--TextDecorationStyle: dashed;
-  --pf-v6-c-label--m-editable--TextDecorationThickness: var(--pf-t--global--border--width--regular);
-  --pf-v6-c-label--m-editable--TextDecorationOffset: 0.25rem;
-  --pf-v6-c-label--m-editable--TextDecorationColor: currentcolor;
+  --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
+  --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
+  --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
+  --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
+  --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
   --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
   --pf-v6-c-label--m-editable__content--Cursor: pointer;
-  --pf-v6-c-label--m-editable--m-editable-active--TextDecoration: none;
+  --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
   --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
@@ -351,10 +351,10 @@
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
   --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
-  --pf-v6-c-label--m-editable--TextDecorationOffset: var(--pf-v6-c-label--m-compact--m-editable--TextDecorationOffset);
+  --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
-  --pf-v6-c-button--Color: var(--pf-v6-c-label--m-filled__actions--c-button--Color);
+  --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
 }
 .pf-v6-c-label.pf-m-outline {
   --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
@@ -372,15 +372,16 @@
   --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
   --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
 }
+.pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
+  --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
+  --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
+}
 .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
-  text-decoration: var(--pf-v6-c-label--m-editable--TextDecoration);
-  text-decoration-thickness: var(--pf-v6-c-label--m-editable--TextDecorationThickness);
-  text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
-  text-decoration-color: var(--pf-v6-c-label--m-editable--TextDecorationColor);
-  text-underline-offset: var(--pf-v6-c-label--m-editable--TextDecorationOffset);
+  text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
+  text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-editable-active {
-  --pf-v6-c-label--m-editable--TextDecoration: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecoration);
+  --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
   --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
   --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
   --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
@@ -421,7 +422,7 @@
   --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
 }
 .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
-  --pf-v6-c-label--m-filled__actions--c-button--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
+  --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
 }
 .pf-v6-c-label.pf-m-disabled {
   --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);

package/css/components/Login/login.css

@@ -53,48 +53,48 @@
   --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__header--PaddingInlineEnd: 0;
     --pf-v6-c-login__header--PaddingInlineStart: 0;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
     --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__main--MarginBlockEnd: 0;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
     --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
     --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
     --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__footer--PaddingInlineEnd: 0;
     --pf-v6-c-login__footer--PaddingInlineStart: 0;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
   }
@@ -107,7 +107,7 @@
   padding-block-start: var(--pf-v6-c-login--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-login--PaddingBlockEnd);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-login {
     align-items: center;
   }
@@ -117,7 +117,7 @@
   width: 100%;
   max-width: var(--pf-v6-c-login__container--MaxWidth);
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-login__container {
     display: grid;
     grid-template-areas: "main header" "main footer" "main .";
@@ -134,7 +134,7 @@
   padding-inline-start: var(--pf-v6-c-login__header--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-login__header--PaddingInlineEnd);
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-login__header {
     margin-block-start: var(--pf-v6-c-login__header--xl--MarginBlockStart);
   }
@@ -168,7 +168,7 @@
   padding-inline-start: var(--pf-v6-c-login__main-header--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-login__main-header--PaddingInlineEnd);
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-login__main-header {
     grid-template-columns: 1fr auto;
   }
@@ -179,7 +179,7 @@
   grid-row: auto;
   grid-column: auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-login__main-header-utilities,
   .pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
     grid-row: 1;

package/css/components/Masthead/masthead.css

@@ -52,11 +52,11 @@
 }
 .pf-v6-c-masthead .pf-v6-c-toolbar {
   --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
-  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-v6-c-masthead--c-toolbar--PaddingBlock);
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
   --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
   --pf-v6-c-toolbar__content--MinWidth: 0;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
     --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
     --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
@@ -214,7 +214,7 @@
   padding-inline-start: var(--pf-t--global--spacer--2xl);
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-masthead.pf-m-display-stack-on-sm {
     --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
     --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
@@ -258,7 +258,7 @@
   padding-inline-start: var(--pf-t--global--spacer--2xl);
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-masthead.pf-m-display-stack-on-md {
     --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
     --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
@@ -302,7 +302,7 @@
   padding-inline-start: var(--pf-t--global--spacer--2xl);
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-masthead.pf-m-display-stack-on-lg {
     --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
     --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
@@ -346,7 +346,7 @@
   padding-inline-start: var(--pf-t--global--spacer--2xl);
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-masthead.pf-m-display-stack-on-xl {
     --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
     --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
@@ -390,7 +390,7 @@
   padding-inline-start: var(--pf-t--global--spacer--2xl);
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-masthead.pf-m-display-stack-on-2xl {
     --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
     --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);