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

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-alpha.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.31...@patternfly/react-styles@6.0.0-alpha.32) (2024-07-29)
+
+### Features
+
+- **Masthead:** Updates for new masthead structure in Penta ([#10809](https://github.com/patternfly/patternfly-react/issues/10809)) ([266ee47](https://github.com/patternfly/patternfly-react/commit/266ee476020c51487ae4d426fdab90efc73d12f1))
+
+# [6.0.0-alpha.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.30...@patternfly/react-styles@6.0.0-alpha.31) (2024-07-29)
+
+### Features
+
+- **MenuToggle:** replaced custom styles with text modifier V6 ([#10793](https://github.com/patternfly/patternfly-react/issues/10793)) ([95a204c](https://github.com/patternfly/patternfly-react/commit/95a204c166019a433facfdc77204ccb33ce1726e))
+
 # [6.0.0-alpha.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.29...@patternfly/react-styles@6.0.0-alpha.30) (2024-07-22)
 
 ### Features

package/css/components/AboutModalBox/about-modal-box.css

@@ -49,35 +49,35 @@
   --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd);
     --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart);
     --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
   }
 }
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 36rem) {
   :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 62rem) {
   :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
   }
 }
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 36rem) {
   :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
     --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
   }
 }
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 36rem) {
   :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
   }
 }
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 36rem) {
   :where(:root, .pf-v6-c-about-modal-box) {
     --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
     --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd);
@@ -101,13 +101,13 @@
   background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
 }
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box {
     grid-template-areas: "brand          close" "header         close" "content        close";
     grid-template-columns: var(--pf-v6-c-about-modal-box--sm--GridTemplateColumns);
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 62rem) {
   .pf-v6-c-about-modal-box {
     --pf-v6-c-about-modal-box--Height: var(--pf-v6-c-about-modal-box--lg--Height);
     --pf-v6-c-about-modal-box--Width: var(--pf-v6-c-about-modal-box--lg--Width);
@@ -159,7 +159,7 @@
   word-break: break-word;
   -webkit-overflow-scrolling: touch;
 }
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box__content {
     overflow: visible;
     overscroll-behavior: auto;
@@ -177,13 +177,13 @@
   padding-block-end: var(--pf-v6-c-about-modal-box__close--PaddingBlockEnd);
   padding-inline-end: var(--pf-v6-c-about-modal-box__close--PaddingInlineEnd);
 }
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 36rem) {
   .pf-v6-c-about-modal-box__close {
     grid-area: 1/2;
     justify-content: center;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 62rem) {
   .pf-v6-c-about-modal-box__close {
     justify-content: flex-end;
   }

package/css/components/Accordion/accordion.css

@@ -16,6 +16,7 @@
   --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -64,6 +65,7 @@
   --pf-v6-c-accordion__toggle--FontFamily: var(--pf-v6-c-accordion--m-display-lg__toggle--FontFamily);
   --pf-v6-c-accordion__toggle--FontSize: var(--pf-v6-c-accordion--m-display-lg__toggle--FontSize);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight);
+  --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
   --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-v6-c-accordion--m-display-lg__expandable-content--FontSize);
   --pf-v6-c-accordion__expandable-content--Color: var(--pf-v6-c-accordion--m-display-lg__expandable-content--Color);
 }

package/css/components/Avatar/avatar.css

@@ -30,52 +30,52 @@
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width);
   --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-xl, var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-2xl, var(--pf-v6-c-avatar--m-sm--Height-on-xl, var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height))))));
   }
@@ -84,52 +84,52 @@
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width);
   --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-2xl, var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-lg, var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-xl, var(--pf-v6-c-avatar--m-md--Height-on-lg, var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-2xl, var(--pf-v6-c-avatar--m-md--Height-on-xl, var(--pf-v6-c-avatar--m-md--Height-on-lg, var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height))))));
   }
@@ -138,52 +138,52 @@
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width);
   --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-2xl, var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-lg, var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-xl, var(--pf-v6-c-avatar--m-lg--Height-on-lg, var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-2xl, var(--pf-v6-c-avatar--m-lg--Height-on-xl, var(--pf-v6-c-avatar--m-lg--Height-on-lg, var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height))))));
   }
@@ -192,52 +192,52 @@
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width);
   --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-2xl, var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
   }

package/css/components/BackToTop/back-to-top.css

@@ -9,7 +9,7 @@
   --pf-v6-c-back-to-top--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   :where(:root, .pf-v6-c-back-to-top) {
     --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-v6-c-back-to-top--md--InsetBlockEnd);
   }

package/css/components/Banner/banner.css

@@ -43,7 +43,7 @@
   --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
   --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   :where(:root, .pf-v6-c-banner) {
     --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
     --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);

package/css/components/Brand/brand.css

@@ -9,52 +9,52 @@
   --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
   --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-brand {
     --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-2xl, var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))))));
   }

package/css/components/Breadcrumb/breadcrumb.css

@@ -8,9 +8,11 @@
   --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
-  --pf-v6-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
   --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --pf-v6-c-breadcrumb__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
@@ -63,18 +65,19 @@
   font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
   line-height: inherit;
   color: var(--pf-v6-c-breadcrumb__link--Color);
-  text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecoration);
+  text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
   word-break: break-word;
   background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
 }
-.pf-v6-c-breadcrumb__link:hover {
+.pf-v6-c-breadcrumb__link:is(:hover, :focus) {
   --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
-  --pf-v6-c-breadcrumb__link--TextDecoration: var(--pf-v6-c-breadcrumb__link--hover--TextDecoration);
+  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
+  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
 }
 .pf-v6-c-breadcrumb__link.pf-m-current {
   cursor: default;
 }
-.pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:hover {
+.pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
   color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
   text-decoration: none;
 }

package/css/components/Button/button.css

@@ -15,14 +15,16 @@
   --pf-v6-c-button--BorderColor: transparent;
   --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-button--TextDecoration: none;
+  --pf-v6-c-button--TextDecorationLine: none;
+  --pf-v6-c-button--TextDecorationStyle: none;
   --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
-  --pf-v6-c-button--hover--TextDecoration: none;
+  --pf-v6-c-button--hover--TextDecorationLine: none;
+  --pf-v6-c-button--hover--TextDecorationStyle: none;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BorderColor: transparent;
   --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -92,7 +94,10 @@
   --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
   --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
   --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
-  --pf-v6-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -247,7 +252,7 @@
   line-height: var(--pf-v6-c-button--LineHeight, inherit);
   color: var(--pf-v6-c-button--Color);
   text-align: center;
-  text-decoration: var(--pf-v6-c-button--TextDecoration);
+  text-decoration: var(--pf-v6-c-button--TextDecorationLine) var(--pf-v6-c-button--TextDecorationStyle);
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
@@ -347,7 +352,10 @@
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
   --pf-v6-c-button--BackgroundColor: transparent;
   --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
-  --pf-v6-c-button--hover--TextDecoration: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecoration);
+  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
+  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
+  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
+  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -509,8 +517,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
-  --pf-v6-c-button--TextDecoration: var(--pf-v6-c-button--hover--TextDecoration);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
+  text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle);
 }
 .pf-v6-c-button.pf-m-clicked {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
@@ -533,7 +541,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   color: var(--pf-v6-c-button--disabled__icon--Color);
 }
 .pf-v6-c-button.pf-m-aria-disabled {
-  --pf-v6-c-button--m-link--m-inline--hover--TextDecoration: none;
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
   cursor: default;
 }
 .pf-v6-c-button.pf-m-progress {

package/css/components/Card/card.css

@@ -26,7 +26,7 @@
   --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain) * -1);
+  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
   --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);

package/css/components/Content/content.css

@@ -40,9 +40,11 @@
   --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
-  --pf-v6-c-content--a--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --pf-v6-c-content--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
   --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --pf-v6-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-content--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-content--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
   --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -71,11 +73,12 @@
 }
 :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
   color: var(--pf-v6-c-content--a--Color);
-  text-decoration: var(--pf-v6-c-content--a--TextDecoration);
+  text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
 }
-:is(.pf-v6-c-content--a, .pf-v6-c-content a):hover {
+:is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) {
   --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
-  --pf-v6-c-content--a--TextDecoration: var(--pf-v6-c-content--a--hover--TextDecoration);
+  --pf-v6-c-content--a--TextDecorationLine: var(--pf-v6-c-content--a--hover--TextDecorationLine);
+  --pf-v6-c-content--a--TextDecorationStyle: var(--pf-v6-c-content--a--hover--TextDecorationStyle);
 }
 
 :is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {
@@ -225,7 +228,7 @@ ul) {
   display: grid;
   grid-template-columns: 1fr;
 }
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
     grid-template: auto/auto 1fr;
     grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
@@ -239,18 +242,18 @@ ul) {
 :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
   margin-block-start: var(--pf-v6-c-content--dt--MarginBlockStart);
 }
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
     --pf-v6-c-content--dt--MarginBlockStart: var(--pf-v6-c-content--dt--sm--MarginBlockStart);
   }
 }
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
     grid-column: 1;
   }
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) {
     grid-column: 2;
   }