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

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

@@ -1,10 +1,9 @@
-// @debug $about-modal-box; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
-  // Component variables
+@include pf-root($about-modal-box) {
+    // Component variables
   --#{$about-modal-box}--BackgroundImage: none;
   --#{$about-modal-box}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --#{$about-modal-box}--BackgroundPosition: bottom right;
   --#{$about-modal-box}--BackgroundSize--min-width: 200px;
   --#{$about-modal-box}--BackgroundSize--width: 60%;
   --#{$about-modal-box}--BackgroundSize--max-width: 600px;
@@ -15,87 +14,80 @@
   --#{$about-modal-box}--sm--GridTemplateColumns: 5fr 1fr;
   --#{$about-modal-box}--lg--GridTemplateColumns: 1fr .6fr;
 
-  @include pf-v5-bidirectional-style(
-    $prop: --#{$about-modal-box}--BackgroundPosition,
-    $ltr-val: bottom right,
-    $rtl-val: bottom left
-  );
-
-
   // Brand
-  --#{$about-modal-box}__brand--PaddingTop: var(--pf-t--global--spacer--2xl);
-  --#{$about-modal-box}__brand--PaddingRight: var(--pf-t--global--spacer--xl);
-  --#{$about-modal-box}__brand--PaddingLeft: var(--pf-t--global--spacer--xl);
-  --#{$about-modal-box}__brand--PaddingBottom: var(--pf-t--global--spacer--xl);
-  --#{$about-modal-box}__brand--sm--PaddingRight: var(--pf-t--global--spacer--3xl);
-  --#{$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) {
-    --#{$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);
+  --#{$about-modal-box}__brand--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+  --#{$about-modal-box}__brand--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__brand--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__brand--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+  --#{$about-modal-box}__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+  --#{$about-modal-box}__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
+
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
+    --#{$about-modal-box}__brand--PaddingInlineEnd: var(--#{$about-modal-box}__brand--sm--PaddingInlineEnd);
+    --#{$about-modal-box}__brand--PaddingInlineStart: var(--#{$about-modal-box}__brand--sm--PaddingInlineStart);
+    --#{$about-modal-box}__brand--PaddingBlockEnd: var(--#{$about-modal-box}__brand--sm--PaddingBlockEnd);
   }
 
   // Close
-  --#{$about-modal-box}__close--ZIndex: var(--#{$pf-global}--ZIndex--2xl); // TODO zindex token
-  --#{$about-modal-box}__close--PaddingTop: var(--pf-t--global--spacer--2xl);
-  --#{$about-modal-box}__close--PaddingRight: var(--pf-t--global--spacer--xl);
-  --#{$about-modal-box}__close--PaddingBottom: var(--pf-t--global--spacer--xl);
-  --#{$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) {
-    --#{$about-modal-box}__close--PaddingBottom: var(--#{$about-modal-box}__close--sm--PaddingBottom);
+  --#{$about-modal-box}__close--ZIndex: var(--pf-t--global--z-index--2xl);
+  --#{$about-modal-box}__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+  --#{$about-modal-box}__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
+  --#{$about-modal-box}__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
+    --#{$about-modal-box}__close--PaddingBlockEnd: var(--#{$about-modal-box}__close--sm--PaddingBlockEnd);
   }
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--lg) {
-    --#{$about-modal-box}__close--PaddingRight: var(--#{$about-modal-box}__close--lg--PaddingRight);
+  @media only screen and (min-width: $pf-v6-global--breakpoint--lg) {
+    --#{$about-modal-box}__close--PaddingInlineEnd: var(--#{$about-modal-box}__close--lg--PaddingInlineEnd);
   }
 
   // Close Button
   --#{$about-modal-box}__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
 
   // Brand img
-  --#{$about-modal-box}__brand-image--Height: #{pf-size-prem(40px)};
+  --#{$about-modal-box}__brand-image--Height: #{pf-size-prem(37px)};
 
   // Header
-  --#{$about-modal-box}__header--PaddingRight: var(--pf-t--global--spacer--xl);
-  --#{$about-modal-box}__header--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$about-modal-box}__header--PaddingLeft: var(--pf-t--global--spacer--xl);
-  --#{$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) {
-    --#{$about-modal-box}__header--PaddingRight: var(--#{$about-modal-box}__header--sm--PaddingRight);
-    --#{$about-modal-box}__header--PaddingLeft: var(--#{$about-modal-box}__header--sm--PaddingLeft);
+  --#{$about-modal-box}__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$about-modal-box}__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+  --#{$about-modal-box}__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
+    --#{$about-modal-box}__header--PaddingInlineEnd: var(--#{$about-modal-box}__header--sm--PaddingInlineEnd);
+    --#{$about-modal-box}__header--PaddingInlineStart: var(--#{$about-modal-box}__header--sm--PaddingInlineStart);
   }
 
   // Strapline
-  --#{$about-modal-box}__strapline--PaddingTop: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
   --#{$about-modal-box}__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$about-modal-box}__strapline--Color: var(--pf-t--global--text--color--subtle);
-  --#{$about-modal-box}__strapline--sm--PaddingTop: var(--pf-t--global--spacer--2xl);
+  --#{$about-modal-box}__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
 
-  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
-    --#{$about-modal-box}__strapline--PaddingTop: var(--#{$about-modal-box}__strapline--sm--PaddingTop);
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
+    --#{$about-modal-box}__strapline--PaddingBlockStart: var(--#{$about-modal-box}__strapline--sm--PaddingBlockStart);
   }
 
   // Content
-  --#{$about-modal-box}__content--MarginTop: var(--pf-t--global--spacer--xl);
-  --#{$about-modal-box}__content--MarginRight: var(--pf-t--global--spacer--xl);
-  --#{$about-modal-box}__content--MarginBottom: var(--pf-t--global--spacer--xl);
-  --#{$about-modal-box}__content--MarginLeft: var(--pf-t--global--spacer--xl);
-  --#{$about-modal-box}__content--sm--MarginTop: var(--pf-t--global--spacer--2xl);
-  --#{$about-modal-box}__content--sm--MarginRight: var(--pf-t--global--spacer--3xl);
-  --#{$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) {
-    --#{$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);
-    --#{$about-modal-box}__content--MarginLeft: var(--#{$about-modal-box}__content--sm--MarginLeft);
+  --#{$about-modal-box}__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
+  --#{$about-modal-box}__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
+  --#{$about-modal-box}__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
+  --#{$about-modal-box}__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
+  --#{$about-modal-box}__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
+
+  @media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
+    --#{$about-modal-box}__content--MarginBlockStart: var(--#{$about-modal-box}__content--sm--MarginBlockStart);
+    --#{$about-modal-box}__content--MarginInlineEnd: var(--#{$about-modal-box}__content--sm--MarginInlineEnd);
+    --#{$about-modal-box}__content--MarginBlockEnd: var(--#{$about-modal-box}__content--sm--MarginBlockEnd);
+    --#{$about-modal-box}__content--MarginInlineStart: var(--#{$about-modal-box}__content--sm--MarginInlineStart);
   }
 }
 
@@ -117,7 +109,7 @@
   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"
@@ -125,23 +117,29 @@
     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);
 
     grid-template-rows: max-content max-content auto;
     grid-template-columns: var(--#{$about-modal-box}--lg--GridTemplateColumns);
   }
+
+  @include pf-v6-bidirectional-style (
+    $prop: --#{$about-modal-box}--BackgroundPosition,
+    $ltr-val: bottom right,
+    $rtl-val: bottom left
+  );
 }
 
 // Brand
 .#{$about-modal-box}__brand {
   display: flex;
   grid-area: brand;
-  padding-block-start: var(--#{$about-modal-box}__brand--PaddingTop);
-  padding-block-end: var(--#{$about-modal-box}__brand--PaddingBottom);
-  padding-inline-start: var(--#{$about-modal-box}__brand--PaddingLeft);
-  padding-inline-end: var(--#{$about-modal-box}__brand--PaddingRight);
+  padding-block-start: var(--#{$about-modal-box}__brand--PaddingBlockStart);
+  padding-block-end: var(--#{$about-modal-box}__brand--PaddingBlockEnd);
+  padding-inline-start: var(--#{$about-modal-box}__brand--PaddingInlineStart);
+  padding-inline-end: var(--#{$about-modal-box}__brand--PaddingInlineEnd);
 }
 
 .#{$about-modal-box}__brand-image {
@@ -153,14 +151,14 @@
   display: flex;
   flex-direction: column;
   grid-area: header;
-  padding-block-end: var(--#{$about-modal-box}__header--PaddingBottom);
-  padding-inline-start: var(--#{$about-modal-box}__header--PaddingLeft);
-  padding-inline-end: var(--#{$about-modal-box}__header--PaddingRight);
+  padding-block-end: var(--#{$about-modal-box}__header--PaddingBlockEnd);
+  padding-inline-start: var(--#{$about-modal-box}__header--PaddingInlineStart);
+  padding-inline-end: var(--#{$about-modal-box}__header--PaddingInlineEnd);
 }
 
 // Strapline
 .#{$about-modal-box}__strapline {
-  padding-block-start: var(--#{$about-modal-box}__strapline--PaddingTop);
+  padding-block-start: var(--#{$about-modal-box}__strapline--PaddingBlockStart);
   margin-block-start: auto;
   font-size: var(--#{$about-modal-box}__strapline--FontSize);
   color: var(--#{$about-modal-box}__strapline--Color);
@@ -171,17 +169,17 @@
   display: flex;
   flex-direction: column;
   grid-area: content;
-  margin-block-start: var(--#{$about-modal-box}__content--MarginTop);
-  margin-block-end: var(--#{$about-modal-box}__content--MarginBottom);
-  margin-inline-start: var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
-  margin-inline-end: var(--#{$about-modal-box}__content--MarginRight);
+  margin-block-start: var(--#{$about-modal-box}__content--MarginBlockStart);
+  margin-block-end: var(--#{$about-modal-box}__content--MarginBlockEnd);
+  margin-inline-start: var(--#{$about-modal-box}__content--MarginInlineStart); // Using margin instead of padding to prevent scrollbar extending to top of content block
+  margin-inline-end: var(--#{$about-modal-box}__content--MarginInlineEnd);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   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;
   }
@@ -195,16 +193,16 @@
   grid-area: close;
   align-items: flex-start;
   justify-content: flex-end;
-  padding-block-start: var(--#{$about-modal-box}__close--PaddingTop);
-  padding-block-end: var(--#{$about-modal-box}__close--PaddingBottom);
-  padding-inline-end: var(--#{$about-modal-box}__close--PaddingRight);
+  padding-block-start: var(--#{$about-modal-box}__close--PaddingBlockStart);
+  padding-block-end: var(--#{$about-modal-box}__close--PaddingBlockEnd);
+  padding-inline-end: var(--#{$about-modal-box}__close--PaddingInlineEnd);
 
-  @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;
   }
 

package/components/Accordion/accordion.css

@@ -1,50 +1,51 @@
-:root {
+:root,
+.pf-v6-c-accordion {
   --pf-v6-c-accordion--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-accordion--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
   --pf-v6-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion__toggle--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--md);
   --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);
+  --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--MarginRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion__expandable-content--MarginBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion__expandable-content--MarginLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
-  --pf-v6-c-accordion__expandable-content-body--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion__expandable-content-body--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion__expandable-content-body--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion__expandable-content-body--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingTop: 0;
-  --pf-v6-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__expandable-content-body--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart: 0;
+  --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v6-c-accordion--m-display-lg__toggle--FontSize: var(--pf-t--global--font--size--heading--sm);
-  --pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --pf-v6-c-accordion--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-t--global--font--size--body--lg);
   --pf-v6-c-accordion--m-display-lg__expandable-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion--m-bordered--RowGap: 0;
-  --pf-v6-c-accordion__item--m-bordered--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
-  --pf-v6-c-accordion__item--m-bordered--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
 }
 
 .pf-v6-c-accordion {
@@ -57,11 +58,11 @@
   --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap);
 }
 .pf-v6-c-accordion.pf-m-display-lg {
-  --pf-v6-c-accordion__toggle--PaddingTop: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingTop);
-  --pf-v6-c-accordion__toggle--PaddingRight: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingRight);
-  --pf-v6-c-accordion__toggle--PaddingBottom: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBottom);
-  --pf-v6-c-accordion__toggle--m-expanded--PaddingBottom: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBottom);
-  --pf-v6-c-accordion__toggle--PaddingLeft: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingLeft);
+  --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockStart);
+  --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineEnd);
+  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingBlockEnd);
+  --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-v6-c-accordion--m-display-lg__toggle--m-expanded--PaddingBlockEnd);
+  --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-v6-c-accordion--m-display-lg__toggle--PaddingInlineStart);
   --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);
@@ -75,14 +76,14 @@
   --pf-v6-c-accordion__toggle--BorderRadius: 0;
 }
 .pf-v6-c-accordion.pf-m-bordered .pf-v6-c-accordion__item {
-  border-block-end: var(--pf-v6-c-accordion__item--m-bordered--BorderBottomWidth) solid var(--pf-v6-c-accordion__item--m-bordered--BorderBottomColor);
+  border-block-end: var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth) solid var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor);
 }
 
 .pf-v6-c-accordion__item {
   border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
 }
 .pf-v6-c-accordion__item.pf-m-expanded {
-  --pf-v6-c-accordion__toggle--PaddingBottom: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBottom);
+  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
   background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
 }
@@ -95,10 +96,10 @@
   column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
   align-items: center;
   width: 100%;
-  padding-block-start: var(--pf-v6-c-accordion__toggle--PaddingTop);
-  padding-block-end: var(--pf-v6-c-accordion__toggle--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-accordion__toggle--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-accordion__toggle--PaddingRight);
+  padding-block-start: var(--pf-v6-c-accordion__toggle--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-accordion__toggle--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-accordion__toggle--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-accordion__toggle--PaddingInlineEnd);
   font-family: var(--pf-v6-c-accordion__toggle--FontFamily, inherit);
   font-size: var(--pf-v6-c-accordion__toggle--FontSize, inherit);
   text-align: start;
@@ -127,9 +128,9 @@
 }
 
 .pf-v6-c-accordion__expandable-content {
-  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBottom);
-  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginLeft);
-  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginRight);
+  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
+  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
+  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
@@ -141,11 +142,11 @@
 }
 
 .pf-v6-c-accordion__expandable-content-body {
-  padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingTop);
-  padding-block-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingRight);
+  padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd);
 }
 .pf-v6-c-accordion__expandable-content-body + .pf-v6-c-accordion__expandable-content-body {
-  --pf-v6-c-accordion__expandable-content-body--PaddingTop: var(--pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
+  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart);
 }

package/components/Accordion/accordion.scss

@@ -1,6 +1,6 @@
-// @debug $accordion; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+@include pf-root($accordion) {
   // accordion
   --#{$accordion}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$accordion}--RowGap: var(--pf-t--global--spacer--xs);
@@ -11,11 +11,11 @@
 
   // accordion toggle
   --#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
-  --#{$accordion}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$accordion}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$accordion}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$accordion}__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$accordion}__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$accordion}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$accordion}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$accordion}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$accordion}__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$accordion}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$accordion}__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$accordion}__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$accordion}__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -25,17 +25,18 @@
 
   // accordion toggle text
   --#{$accordion}__toggle-text--Color: var(--pf-t--global--text--color--regular);
-  --#{$accordion}__toggle-text--FontWeight: var(--pf-t--global--font--weight--body);
+  --#{$accordion}__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
   --#{$accordion}__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  
+  --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
+
   // accordion toggle icon
   --#{$accordion}__toggle-icon--Transition: .2s ease-in 0s;
   --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
-  
+
   // accordion expandable content
-  --#{$accordion}__expandable-content--MarginRight: var(--pf-t--global--spacer--md);
-  --#{$accordion}__expandable-content--MarginBottom: var(--pf-t--global--spacer--md);
-  --#{$accordion}__expandable-content--MarginLeft: var(--pf-t--global--spacer--md);
+  --#{$accordion}__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$accordion}__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$accordion}__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
   --#{$accordion}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$accordion}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$accordion}__expandable-content--Color: var(--pf-t--global--text--color--regular);
@@ -43,29 +44,28 @@
   --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
 
   // accordion expandable content body
-  --#{$accordion}__expandable-content-body--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$accordion}__expandable-content-body--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$accordion}__expandable-content-body--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$accordion}__expandable-content-body--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$accordion}__expandable-content-body--expandable-content-body--PaddingTop: 0;
-  
+  --#{$accordion}__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$accordion}__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$accordion}__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$accordion}__expandable-content-body--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$accordion}__expandable-content-body--expandable-content-body--PaddingBlockStart: 0;
+
   // large
-  --#{$accordion}--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$accordion}--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$accordion}--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$accordion}--m-display-lg__toggle--m-expanded--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$accordion}--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$accordion}--m-display-lg__toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$accordion}--m-display-lg__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$accordion}--m-display-lg__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$accordion}--m-display-lg__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$accordion}--m-display-lg__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$accordion}--m-display-lg__toggle--FontFamily: var(--pf-t--global--font--family--heading);
   --#{$accordion}--m-display-lg__toggle--FontSize: var(--pf-t--global--font--size--heading--sm);
-  --#{$accordion}--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading);
-  --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --#{$accordion}--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --#{$accordion}--m-display-lg__expandable-content--FontSize: var(--pf-t--global--font--size--body--lg);
   --#{$accordion}--m-display-lg__expandable-content--Color: var(--pf-t--global--text--color--regular);
-  
+
   // bordered
   --#{$accordion}--m-bordered--RowGap: 0;
-  --#{$accordion}__item--m-bordered--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$accordion}__item--m-bordered--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$accordion}__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$accordion}__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
 }
 
 .#{$accordion} {
@@ -79,11 +79,11 @@
   }
 
   &.pf-m-display-lg {
-    --#{$accordion}__toggle--PaddingTop: var(--#{$accordion}--m-display-lg__toggle--PaddingTop);
-    --#{$accordion}__toggle--PaddingRight: var(--#{$accordion}--m-display-lg__toggle--PaddingRight);
-    --#{$accordion}__toggle--PaddingBottom: var(--#{$accordion}--m-display-lg__toggle--PaddingBottom);
-    --#{$accordion}__toggle--m-expanded--PaddingBottom: var(--#{$accordion}--m-display-lg__toggle--m-expanded--PaddingBottom);
-    --#{$accordion}__toggle--PaddingLeft: var(--#{$accordion}--m-display-lg__toggle--PaddingLeft);
+    --#{$accordion}__toggle--PaddingBlockStart: var(--#{$accordion}--m-display-lg__toggle--PaddingBlockStart);
+    --#{$accordion}__toggle--PaddingInlineEnd: var(--#{$accordion}--m-display-lg__toggle--PaddingInlineEnd);
+    --#{$accordion}__toggle--PaddingBlockEnd: var(--#{$accordion}--m-display-lg__toggle--PaddingBlockEnd);
+    --#{$accordion}__toggle--m-expanded--PaddingBlockEnd: var(--#{$accordion}--m-display-lg__toggle--m-expanded--PaddingBlockEnd);
+    --#{$accordion}__toggle--PaddingInlineStart: var(--#{$accordion}--m-display-lg__toggle--PaddingInlineStart);
     --#{$accordion}__toggle--FontFamily: var(--#{$accordion}--m-display-lg__toggle--FontFamily);
     --#{$accordion}__toggle--FontSize: var(--#{$accordion}--m-display-lg__toggle--FontSize);
     --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}--m-display-lg__toggle-text--FontWeight);
@@ -98,18 +98,18 @@
     --#{$accordion}__toggle--BorderRadius: 0;
 
     .#{$accordion}__item {
-      border-block-end: var(--#{$accordion}__item--m-bordered--BorderBottomWidth) solid var(--#{$accordion}__item--m-bordered--BorderBottomColor);
+      border-block-end: var(--#{$accordion}__item--m-bordered--BorderBlockEndWidth) solid var(--#{$accordion}__item--m-bordered--BorderBlockEndColor);
     }
   }
 }
 
 .#{$accordion}__item {
   border-radius: var(--#{$accordion}__item--BorderRadius);
-  
+
   &.pf-m-expanded {
-    --#{$accordion}__toggle--PaddingBottom: var(--#{$accordion}__toggle--m-expanded--PaddingBottom);
+    --#{$accordion}__toggle--PaddingBlockEnd: var(--#{$accordion}__toggle--m-expanded--PaddingBlockEnd);
     --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
-    
+
     background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
 
     .#{$accordion}__toggle-icon {
@@ -123,10 +123,10 @@
   column-gap: var(--#{$accordion}__toggle--ColumnGap);
   align-items: center;
   width: 100%;
-  padding-block-start: var(--#{$accordion}__toggle--PaddingTop);
-  padding-block-end: var(--#{$accordion}__toggle--PaddingBottom);
-  padding-inline-start: var(--#{$accordion}__toggle--PaddingLeft);
-  padding-inline-end: var(--#{$accordion}__toggle--PaddingRight);
+  padding-block-start: var(--#{$accordion}__toggle--PaddingBlockStart);
+  padding-block-end: var(--#{$accordion}__toggle--PaddingBlockEnd);
+  padding-inline-start: var(--#{$accordion}__toggle--PaddingInlineStart);
+  padding-inline-end: var(--#{$accordion}__toggle--PaddingInlineEnd);
   font-family: var(--#{$accordion}__toggle--FontFamily, inherit);
   font-size: var(--#{$accordion}__toggle--FontSize, inherit);
   text-align: start;
@@ -140,7 +140,7 @@
 }
 
 .#{$accordion}__toggle-text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   flex-grow: 1;
   font-weight: var(--#{$accordion}__toggle-text--FontWeight);
@@ -148,15 +148,15 @@
 }
 
 .#{$accordion}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   transition: var(--#{$accordion}__toggle-icon--Transition);
 }
 
 .#{$accordion}__expandable-content {
-  margin-block-end: var(--#{$accordion}__expandable-content--MarginBottom);
-  margin-inline-start: var(--#{$accordion}__expandable-content--MarginLeft);
-  margin-inline-end: var(--#{$accordion}__expandable-content--MarginRight);
+  margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
+  margin-inline-start: var(--#{$accordion}__expandable-content--MarginInlineStart);
+  margin-inline-end: var(--#{$accordion}__expandable-content--MarginInlineEnd);
   font-size: var(--#{$accordion}__expandable-content--FontSize);
   color: var(--#{$accordion}__expandable-content--Color);
   background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
@@ -169,12 +169,12 @@
 }
 
 .#{$accordion}__expandable-content-body {
-  padding-block-start: var(--#{$accordion}__expandable-content-body--PaddingTop);
-  padding-block-end: var(--#{$accordion}__expandable-content-body--PaddingBottom);
-  padding-inline-start: var(--#{$accordion}__expandable-content-body--PaddingLeft);
-  padding-inline-end: var(--#{$accordion}__expandable-content-body--PaddingRight);
+  padding-block-start: var(--#{$accordion}__expandable-content-body--PaddingBlockStart);
+  padding-block-end: var(--#{$accordion}__expandable-content-body--PaddingBlockEnd);
+  padding-inline-start: var(--#{$accordion}__expandable-content-body--PaddingInlineStart);
+  padding-inline-end: var(--#{$accordion}__expandable-content-body--PaddingInlineEnd);
 
   & + & {
-    --#{$accordion}__expandable-content-body--PaddingTop: var(--#{$accordion}__expandable-content-body--expandable-content-body--PaddingTop);
+    --#{$accordion}__expandable-content-body--PaddingBlockStart: var(--#{$accordion}__expandable-content-body--expandable-content-body--PaddingBlockStart);
   }
 }

package/components/ActionList/action-list.css

@@ -1,8 +1,9 @@
-:where(:root) {
-  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);
-  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
+:root,
+.pf-v6-c-action-list {
+  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
+  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
+  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
 }
 
 .pf-v6-c-action-list,