@patternfly/patternfly 6.0.0-alpha.120 → 6.0.0-alpha.122

package/components/MenuToggle/menu-toggle.scss

@@ -10,11 +10,11 @@
 
 :where(:root, .#{$menu-toggle}) {
   --#{$menu-toggle}--ColumnGap: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingTop) + var(--#{$menu-toggle}--PaddingBottom));
+  --#{$menu-toggle}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
   --#{$menu-toggle}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$menu-toggle}--Color: var(--pf-t--global--text--color--regular);
   --#{$menu-toggle}--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -55,25 +55,25 @@
 
   // TODO: add pf-m-button modifier here
   // * Menu toggle button
-  --#{$menu-toggle}--m-button--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$menu-toggle}--m-button--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$menu-toggle}--m-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$menu-toggle}--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --#{$menu-toggle}--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
 
   // TODO: add pf-m-button modifier here
   // * Menu toggle control
-  --#{$menu-toggle}--m-control--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--m-control--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
 
   // TODO: add pf-m-button modifier here
   // * Menu toggle action
-  --#{$menu-toggle}--m-action--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --#{$menu-toggle}--m-action--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$menu-toggle}--m-action--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --#{$menu-toggle}--m-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --#{$menu-toggle}--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
 
   // * Menu toggle primary
-  --#{$menu-toggle}--m-primary--PaddingLeft: var(--#{$menu-toggle}--m-button--PaddingLeft);
-  --#{$menu-toggle}--m-primary--PaddingRight: var(--#{$menu-toggle}--m-button--PaddingRight);
+  --#{$menu-toggle}--m-primary--PaddingInlineStart: var(--#{$menu-toggle}--m-button--PaddingInlineStart);
+  --#{$menu-toggle}--m-primary--PaddingInlineEnd: var(--#{$menu-toggle}--m-button--PaddingInlineEnd);
   --#{$menu-toggle}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
   --#{$menu-toggle}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$menu-toggle}--m-primary--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
@@ -93,8 +93,8 @@
 
 
   // * Menu toggle secondary
-  --#{$menu-toggle}--m-secondary--PaddingLeft: var(--#{$menu-toggle}--m-button--PaddingLeft);
-  --#{$menu-toggle}--m-secondary--PaddingRight: var(--#{$menu-toggle}--m-button--PaddingRight);
+  --#{$menu-toggle}--m-secondary--PaddingInlineStart: var(--#{$menu-toggle}--m-button--PaddingInlineStart);
+  --#{$menu-toggle}--m-secondary--PaddingInlineEnd: var(--#{$menu-toggle}--m-button--PaddingInlineEnd);
   --#{$menu-toggle}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
   --#{$menu-toggle}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
   --#{$menu-toggle}--m-secondary--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
@@ -115,35 +115,35 @@
   --#{$menu-toggle}__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
 
   // Full height
-  --#{$menu-toggle}--m-full-height--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$menu-toggle}--m-full-height--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$menu-toggle}--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$menu-toggle}--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // Split button, child
   --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 
   // Split button, action
-  --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftWidth: var(--pf-t--global--border--width--button--default);
-  --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--button--default);
+  --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
   --#{$menu-toggle}--m-split-button--m-action--child--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
-  --#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderLeftColor: var(--pf-t--global--icon--color--on-disabled);
+  --#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
 
   // Split button action, primary
   --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$menu-toggle}--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
   --#{$menu-toggle}--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
-  --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
   --#{$menu-toggle}--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
 
   // Split button action, secondary
-  --#{$menu-toggle}--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-t--global--color--brand--default);
+  --#{$menu-toggle}--m-split-button--m-action--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
 
   // Split button, controls, check
   --#{$menu-toggle}__button--BackgroundColor: transparent;
   --#{$menu-toggle}__button--AlignSelf: baseline;
-  --#{$menu-toggle}__button--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}__button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}__button--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingTop) + var(--#{$menu-toggle}--PaddingBottom));
+  --#{$menu-toggle}__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}__button--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
 
   // Menu toggle plain
   --#{$menu-toggle}--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -156,12 +156,12 @@
   --#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent; // picking icon color rather than text...?
 
   // Typeahead
-  --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
 
   // * Menu toggle small
-  --#{$menu-toggle}--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$menu-toggle}--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$menu-toggle}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$menu-toggle}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
 
   // Status icon
   --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -187,10 +187,10 @@
   justify-content: center;
   min-width: var(--#{$menu-toggle}--MinWidth);
   max-width: 100%;
-  padding-block-start: var(--#{$menu-toggle}--PaddingTop);
-  padding-block-end: var(--#{$menu-toggle}--PaddingBottom);
-  padding-inline-start: var(--#{$menu-toggle}--PaddingLeft);
-  padding-inline-end: var(--#{$menu-toggle}--PaddingRight);
+  padding-block-start: var(--#{$menu-toggle}--PaddingBlockStart);
+  padding-block-end: var(--#{$menu-toggle}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$menu-toggle}--PaddingInlineStart);
+  padding-inline-end: var(--#{$menu-toggle}--PaddingInlineEnd);
   font-size: var(--#{$menu-toggle}--FontSize);
   line-height: var(--#{$menu-toggle}--LineHeight);
   color: var(--#{$menu-toggle}--Color);
@@ -217,8 +217,8 @@
 
   &.pf-m-primary {
     // TODO: abstract padding updates to control/button variant
-    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-primary--PaddingLeft);
-    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-primary--PaddingRight);
+    --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-primary--PaddingInlineStart);
+    --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-primary--PaddingInlineEnd);
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-primary--Color);
     --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--m-primary--BackgroundColor);
     --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-primary--BorderRadius);
@@ -238,8 +238,8 @@
 
   &.pf-m-secondary {
     // TODO: abstract padding updates to control/button variant
-    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-secondary--PaddingLeft);
-    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-secondary--PaddingRight);
+    --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-secondary--PaddingInlineStart);
+    --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-secondary--PaddingInlineEnd);
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-secondary--Color);
     --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-secondary--BorderColor);
     --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-secondary--BorderRadius);
@@ -256,9 +256,9 @@
   }
 
   &.pf-m-full-height {
-    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-full-height--PaddingRight);
-    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-full-height--PaddingLeft);
-    --#{$menu-toggle}--BorderTopWidth: var(--#{$menu-toggle}--m-full-height__toggle--BorderTopWidth);
+    --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-full-height--PaddingInlineEnd);
+    --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-full-height--PaddingInlineStart);
+    --#{$menu-toggle}--BorderBlockStartWidth: var(--#{$menu-toggle}--m-full-height__toggle--BorderBlockStartWidth);
 
     align-items: center;
     height: 100%;
@@ -327,8 +327,8 @@
 
   // - Menu item small
   &.pf-m-small {
-    --#{$menu-toggle}--PaddingTop: var(--#{$menu-toggle}--m-small--PaddingTop);
-    --#{$menu-toggle}--PaddingBottom: var(--#{$menu-toggle}--m-small--PaddingBottom);
+    --#{$menu-toggle}--PaddingBlockStart: var(--#{$menu-toggle}--m-small--PaddingBlockStart);
+    --#{$menu-toggle}--PaddingBlockEnd: var(--#{$menu-toggle}--m-small--PaddingBlockEnd);
   }
 
   &:has(.#{$button}) {
@@ -359,10 +359,10 @@
 
   > * {
     position: relative;
-    padding-block-start: var(--#{$menu-toggle}--PaddingTop);
-    padding-block-end: var(--#{$menu-toggle}--PaddingBottom);
-    padding-inline-start: var(--#{$menu-toggle}--PaddingLeft);
-    padding-inline-end: var(--#{$menu-toggle}--PaddingRight);
+    padding-block-start: var(--#{$menu-toggle}--PaddingBlockStart);
+    padding-block-end: var(--#{$menu-toggle}--PaddingBlockEnd);
+    padding-inline-start: var(--#{$menu-toggle}--PaddingInlineStart);
+    padding-inline-end: var(--#{$menu-toggle}--PaddingInlineEnd);
   }
 
   > :first-child {
@@ -376,7 +376,7 @@
   }
 
   > .#{$check} {
-    --#{$menu-toggle}--PaddingRight: 0;
+    --#{$menu-toggle}--PaddingInlineEnd: 0;
     --#{$check}__label--Color: currentcolor;
     --#{$check}__label--disabled--Color: currentcolor;
 
@@ -397,11 +397,11 @@
 
 // - Menu toggle split button action
 .#{$menu-toggle}.pf-m-split-button.pf-m-action {
-  --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--BorderColor);
+  --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--BorderColor);
 
   // all subsequent buttons
   > :not(:first-child) {
-    border-inline-start: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor);
+    border-inline-start: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor);
   }
 
   > :has(.#{$menu-toggle}__controls) {
@@ -410,7 +410,7 @@
 
   // Split button, primary
   &.pf-m-primary {
-    --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--m-split-button--m-action--m-primary--child--BorderLeftColor);
+    --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--m-split-button--m-action--m-primary--child--BorderInlineStartColor);
 
     // stylelint-disable max-nesting-depth, selector-max-class, selector-not-notation
     // update to single :not() in breaking change
@@ -434,12 +434,12 @@
 
   // Split button, secondary
   &.pf-m-secondary {
-    --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--m-split-button--m-action--m-secondary--child--BorderLeftColor);
+    --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--m-split-button--m-action--m-secondary--child--BorderInlineStartColor);
   }
 
   // disable accent border
   &:is(.pf-m-disabled, :disabled) {
-    --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderLeftColor);
+    --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderInlineStartColor);
 
     &::before {
       content: none;
@@ -448,7 +448,7 @@
 
   // disabled styles for children
   > :is(.pf-m-disabled, :disabled) {
-    --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderLeftColor);
+    --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderInlineStartColor);
 
     color: var(--#{$menu-toggle}--m-split-button--child--disabled--Color);
     background-color: var(--#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor);
@@ -464,19 +464,19 @@
   padding: 0;
 
   .#{$menu-toggle}__button {
-    --#{$menu-toggle}__button--PaddingRight: 0;
+    --#{$menu-toggle}__button--PaddingInlineEnd: 0;
   }
 
   .#{$menu-toggle}__controls {
-    --#{$menu-toggle}__button--PaddingRight: 0;
+    --#{$menu-toggle}__button--PaddingInlineEnd: 0;
 
     display: flex;
     align-items: stretch;
   }
 
   .#{$text-input-group} {
-    --#{$text-input-group}__utilities--c-button--PaddingRight: var(--#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
-    --#{$text-input-group}__utilities--MarginRight: 0;
+    --#{$text-input-group}__utilities--c-button--PaddingInlineEnd: var(--#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd);
+    --#{$text-input-group}__utilities--MarginInlineEnd: 0;
 
     flex: 1;
   }
@@ -486,8 +486,8 @@
 .#{$menu-toggle}__button {
   align-self: var(--#{$menu-toggle}__button--AlignSelf);
   min-width: var(--#{$menu-toggle}__button--MinWidth);
-  padding-inline-start: var(--#{$menu-toggle}__button--PaddingLeft);
-  padding-inline-end: var(--#{$menu-toggle}__button--PaddingRight);
+  padding-inline-start: var(--#{$menu-toggle}__button--PaddingInlineStart);
+  padding-inline-end: var(--#{$menu-toggle}__button--PaddingInlineEnd);
   color: inherit;
   background-color: var(--#{$menu-toggle}__button--BackgroundColor);
   border: 0;

package/components/ModalBox/modal-box.css

@@ -11,7 +11,7 @@
   --pf-v6-c-modal-box--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl));
   --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-t--global--spacer--sm);
   --pf-v6-c-modal-box--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-modal-box--m-align-top--Top: var(--pf-v6-c-modal-box--m-align-top--spacer);
+  --pf-v6-c-modal-box--m-align-top--InsetBlockStart: var(--pf-v6-c-modal-box--m-align-top--spacer);
   --pf-v6-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--pf-v6-c-modal-box--m-align-top--spacer));
   --pf-v6-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v6-c-modal-box--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
   --pf-v6-c-modal-box--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
@@ -19,33 +19,33 @@
   --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
-  --pf-v6-c-modal-box__header--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__header--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__header--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
   --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
   --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md);
-  --pf-v6-c-modal-box__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-modal-box__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body));
-  --pf-v6-c-modal-box__body--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__body--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__body--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__header--body--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-modal-box__close--Top: var(--pf-v6-c-modal-box__header--PaddingTop);
-  --pf-v6-c-modal-box__close--Right: var(--pf-v6-c-modal-box__header--PaddingRight);
-  --pf-v6-c-modal-box__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
-  --pf-v6-c-modal-box__footer--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__footer--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__footer--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-modal-box__footer--c-button--MarginRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginRight) / 2);
+  --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
+  --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
+  --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
+  --pf-v6-c-modal-box__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
 }
 @media (min-width: 1200px) {
   :where(:root, .pf-v6-c-modal-box) {
@@ -76,7 +76,7 @@
   --pf-v6-c-modal-box--Width: var(--pf-v6-c-modal-box--m-lg--lg--MaxWidth);
 }
 .pf-v6-c-modal-box.pf-m-align-top {
-  inset-block-start: var(--pf-v6-c-modal-box--m-align-top--Top);
+  inset-block-start: var(--pf-v6-c-modal-box--m-align-top--InsetBlockStart);
   align-self: flex-start;
   max-width: var(--pf-v6-c-modal-box--m-align-top--MaxWidth);
   max-height: var(--pf-v6-c-modal-box--m-align-top--MaxHeight);
@@ -103,11 +103,11 @@
 
 .pf-v6-c-modal-box__close {
   position: absolute;
-  inset-block-start: var(--pf-v6-c-modal-box__close--Top);
-  inset-inline-end: var(--pf-v6-c-modal-box__close--Right);
+  inset-block-start: var(--pf-v6-c-modal-box__close--InsetBlockStart);
+  inset-inline-end: var(--pf-v6-c-modal-box__close--InsetInlineEnd);
 }
 .pf-v6-c-modal-box__close + * {
-  margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--MarginRight);
+  margin-inline-end: var(--pf-v6-c-modal-box__close--sibling--MarginInlineEnd);
 }
 
 .pf-v6-c-modal-box__header {
@@ -115,16 +115,16 @@
   flex-direction: column;
   flex-shrink: 0;
   gap: var(--pf-v6-c-modal-box__header--Gap);
-  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingTop);
-  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingRight);
+  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
+  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
 }
 .pf-v6-c-modal-box__header.pf-m-help {
   display: flex;
   flex-direction: row;
 }
 .pf-v6-c-modal-box__header + .pf-v6-c-modal-box__body {
-  --pf-v6-c-modal-box__body--PaddingTop: var(--pf-v6-c-modal-box__header--body--PaddingTop);
+  --pf-v6-c-modal-box__body--PaddingBlockStart: var(--pf-v6-c-modal-box__header--body--PaddingBlockStart);
 }
 
 .pf-v6-c-modal-box__header-main {
@@ -153,12 +153,12 @@
 }
 
 .pf-v6-c-modal-box__title-icon {
-  margin-inline-end: var(--pf-v6-c-modal-box__title-icon--MarginRight);
+  margin-inline-end: var(--pf-v6-c-modal-box__title-icon--MarginInlineEnd);
   color: var(--pf-v6-c-modal-box__title-icon--Color);
 }
 
 .pf-v6-c-modal-box__description {
-  padding-block-start: var(--pf-v6-c-modal-box__description--PaddingTop);
+  padding-block-start: var(--pf-v6-c-modal-box__description--PaddingBlockStart);
   font-size: var(--pf-v6-c-modal-box__description--FontSize);
   color: var(--pf-v6-c-modal-box__description--Color);
 }
@@ -166,9 +166,9 @@
 .pf-v6-c-modal-box__body {
   flex: 1 1 auto;
   min-height: var(--pf-v6-c-modal-box__body--MinHeight);
-  padding-block-start: var(--pf-v6-c-modal-box__body--PaddingTop);
-  padding-inline-start: var(--pf-v6-c-modal-box__body--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-modal-box__body--PaddingRight);
+  padding-block-start: var(--pf-v6-c-modal-box__body--PaddingBlockStart);
+  padding-inline-start: var(--pf-v6-c-modal-box__body--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-modal-box__body--PaddingInlineEnd);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -176,23 +176,23 @@
   -webkit-overflow-scrolling: touch;
 }
 .pf-v6-c-modal-box__body:last-child {
-  padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBottom);
+  padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd);
 }
 
 .pf-v6-c-modal-box__footer {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingTop);
-  padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingRight);
+  padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingInlineEnd);
 }
 .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
-  margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginRight);
+  margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
 }
 @media screen and (min-width: 576px) {
   .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
-    --pf-v6-c-modal-box__footer--c-button--MarginRight: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginRight);
+    --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
   }
 }

package/components/ModalBox/modal-box.scss

@@ -13,7 +13,7 @@
   --#{$modal-box}--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl)); // MaxHeight ensures that the modal will not go off the screen and instead the body will scroll
   --#{$modal-box}--m-align-top--spacer: var(--pf-t--global--spacer--sm);
   --#{$modal-box}--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
-  --#{$modal-box}--m-align-top--Top: var(--#{$modal-box}--m-align-top--spacer);
+  --#{$modal-box}--m-align-top--InsetBlockStart: var(--#{$modal-box}--m-align-top--spacer);
   --#{$modal-box}--m-align-top--MaxHeight: calc(100% - min(var(--#{$modal-box}--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--#{$modal-box}--m-align-top--spacer));
   --#{$modal-box}--m-align-top--MaxWidth: calc(100% - min(var(--#{$modal-box}--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
 
@@ -29,9 +29,9 @@
   }
 
   // Header
-  --#{$modal-box}__header--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$modal-box}__header--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$modal-box}__header--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$modal-box}__header--Gap: var(--pf-t--global--spacer--md);
 
   // Header main
@@ -43,7 +43,7 @@
   --#{$modal-box}__title--FontSize: var(--pf-t--global--font--size--heading--md);
 
   // Title icon
-  --#{$modal-box}__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$modal-box}__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$modal-box}__title-icon--Color: var(--pf-t--global--icon--color--regular);
 
   // Description
@@ -52,26 +52,26 @@
 
   // Body
   --#{$modal-box}__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)); // Allow for at least 1 line of content in the body
-  --#{$modal-box}__body--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$modal-box}__body--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$modal-box}__body--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --#{$modal-box}__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --#{$modal-box}__header--body--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$modal-box}__body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
 
   // Close
-  --#{$modal-box}__close--Top: var(--#{$modal-box}__header--PaddingTop);
-  --#{$modal-box}__close--Right: var(--#{$modal-box}__header--PaddingRight);
-  --#{$modal-box}__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
+  --#{$modal-box}__close--InsetBlockStart: var(--#{$modal-box}__header--PaddingBlockStart);
+  --#{$modal-box}__close--InsetInlineEnd: var(--#{$modal-box}__header--PaddingInlineEnd);
+  --#{$modal-box}__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
 
   // Footer
-  --#{$modal-box}__footer--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$modal-box}__footer--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$modal-box}__footer--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --#{$modal-box}__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // Footer buttons
-  --#{$modal-box}__footer--c-button--MarginRight: var(--pf-t--global--spacer--md); // Button spacer is used to manipulate margin-inline-start and/or margin-right values at various breakpoints, with a single value.
-  --#{$modal-box}__footer--c-button--sm--MarginRight: calc(var(--#{$modal-box}__footer--c-button--MarginRight) / 2);
+  --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md); // Button spacer is used to manipulate margin-inline-start and/or margin-right values at various breakpoints, with a single value.
+  --#{$modal-box}__footer--c-button--sm--MarginInlineEnd: calc(var(--#{$modal-box}__footer--c-button--MarginInlineEnd) / 2);
 }
 
 .#{$modal-box} {
@@ -100,7 +100,7 @@
   }
 
   &.pf-m-align-top {
-    inset-block-start: var(--#{$modal-box}--m-align-top--Top);
+    inset-block-start: var(--#{$modal-box}--m-align-top--InsetBlockStart);
     align-self: flex-start;
     max-width: var(--#{$modal-box}--m-align-top--MaxWidth);
     max-height: var(--#{$modal-box}--m-align-top--MaxHeight);
@@ -145,11 +145,11 @@
 // Close button
 .#{$modal-box}__close {
   position: absolute;
- inset-block-start: var(--#{$modal-box}__close--Top);
- inset-inline-end: var(--#{$modal-box}__close--Right);
+ inset-block-start: var(--#{$modal-box}__close--InsetBlockStart);
+ inset-inline-end: var(--#{$modal-box}__close--InsetInlineEnd);
 
   + * {
-    margin-inline-end: var(--#{$modal-box}__close--sibling--MarginRight); // Create room for the close button
+    margin-inline-end: var(--#{$modal-box}__close--sibling--MarginInlineEnd); // Create room for the close button
   }
 }
 
@@ -158,9 +158,9 @@
   flex-direction: column;
   flex-shrink: 0;
   gap: var(--#{$modal-box}__header--Gap);
-  padding-block-start: var(--#{$modal-box}__header--PaddingTop);
-  padding-inline-start: var(--#{$modal-box}__header--PaddingLeft);
-  padding-inline-end: var(--#{$modal-box}__header--PaddingRight);
+  padding-block-start: var(--#{$modal-box}__header--PaddingBlockStart);
+  padding-inline-start: var(--#{$modal-box}__header--PaddingInlineStart);
+  padding-inline-end: var(--#{$modal-box}__header--PaddingInlineEnd);
 
   &.pf-m-help {
     display: flex;
@@ -168,7 +168,7 @@
   }
 
   + .#{$modal-box}__body {
-    --#{$modal-box}__body--PaddingTop: var(--#{$modal-box}__header--body--PaddingTop);
+    --#{$modal-box}__body--PaddingBlockStart: var(--#{$modal-box}__header--body--PaddingBlockStart);
   }
 }
 
@@ -197,12 +197,12 @@
 }
 
 .#{$modal-box}__title-icon {
-  margin-inline-end: var(--#{$modal-box}__title-icon--MarginRight);
+  margin-inline-end: var(--#{$modal-box}__title-icon--MarginInlineEnd);
   color: var(--#{$modal-box}__title-icon--Color);
 }
 
 .#{$modal-box}__description {
-  padding-block-start: var(--#{$modal-box}__description--PaddingTop);
+  padding-block-start: var(--#{$modal-box}__description--PaddingBlockStart);
   font-size: var(--#{$modal-box}__description--FontSize);
   color: var(--#{$modal-box}__description--Color);
 }
@@ -211,9 +211,9 @@
 .#{$modal-box}__body {
   flex: 1 1 auto;
   min-height: var(--#{$modal-box}__body--MinHeight);
-  padding-block-start: var(--#{$modal-box}__body--PaddingTop);
-  padding-inline-start: var(--#{$modal-box}__body--PaddingLeft);
-  padding-inline-end: var(--#{$modal-box}__body--PaddingRight);
+  padding-block-start: var(--#{$modal-box}__body--PaddingBlockStart);
+  padding-inline-start: var(--#{$modal-box}__body--PaddingInlineStart);
+  padding-inline-end: var(--#{$modal-box}__body--PaddingInlineEnd);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -221,7 +221,7 @@
   -webkit-overflow-scrolling: touch;
 
   &:last-child {
-    padding-block-end: var(--#{$modal-box}__body--last-child--PaddingBottom);
+    padding-block-end: var(--#{$modal-box}__body--last-child--PaddingBlockEnd);
   }
 }
 
@@ -230,17 +230,17 @@
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  padding-block-start: var(--#{$modal-box}__footer--PaddingTop);
-  padding-block-end: var(--#{$modal-box}__footer--PaddingBottom);
-  padding-inline-start: var(--#{$modal-box}__footer--PaddingLeft);
-  padding-inline-end: var(--#{$modal-box}__footer--PaddingRight);
+  padding-block-start: var(--#{$modal-box}__footer--PaddingBlockStart);
+  padding-block-end: var(--#{$modal-box}__footer--PaddingBlockEnd);
+  padding-inline-start: var(--#{$modal-box}__footer--PaddingInlineStart);
+  padding-inline-end: var(--#{$modal-box}__footer--PaddingInlineEnd);
 
   // Base margin left and right equal for buttons when wrapped
   > .#{$button}:not(:last-child) {
-    margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginRight);
+    margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginInlineEnd);
 
     @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
-      --#{$modal-box}__footer--c-button--MarginRight: var(--#{$modal-box}__footer--c-button--sm--MarginRight);
+      --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--#{$modal-box}__footer--c-button--sm--MarginInlineEnd);
     }
   }
 }