@patternfly/patternfly 6.0.0-alpha.4 → 6.0.0-alpha.41

package/components/MenuToggle/menu-toggle.scss

@@ -1,50 +1,52 @@
 // @debug $menu-toggle; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
 .#{$menu-toggle} {
-  --#{$menu-toggle}--BorderRadius: 0;
-  --#{$menu-toggle}--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$menu-toggle}--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$menu-toggle}--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$menu-toggle}--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$menu-toggle}--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$menu-toggle}--Color: var(--#{$pf-global}--Color--100);
-  --#{$menu-toggle}--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$menu-toggle}--BackgroundColor: transparent;
+  --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$menu-toggle}--PaddingTop: var(--pf-t--global--spacer--sm); // TODO semantic spacer for form elements?
+  --#{$menu-toggle}--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--PaddingBottom: var(--pf-t--global--spacer--sm); // TODO semantic spacer?
+  --#{$menu-toggle}--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$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);
+  --#{$menu-toggle}--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$menu-toggle}--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
+  --#{$menu-toggle}--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --#{$menu-toggle}--active--BorderWidth: var(--pf-t--global--border--width--control--active);
+  --#{$menu-toggle}--active--BorderColor: var(--pf-t--global--border--color--active);
 
   // Border base
-  --#{$menu-toggle}--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$menu-toggle}--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$menu-toggle}--before--BorderBottomWidth: 0;
-  --#{$menu-toggle}--before--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$menu-toggle}--before--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$menu-toggle}--before--BorderRightColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$menu-toggle}--before--BorderBottomColor: transparent;
-  --#{$menu-toggle}--before--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
-
-  // Border accent
-  --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$menu-toggle}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
+  --#{$menu-toggle}--before--BorderTopWidth: var(--pf-t--global--border--width--control--default);
+  --#{$menu-toggle}--before--BorderRightWidth: var(--pf-t--global--border--width--control--default);
+  --#{$menu-toggle}--before--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
+  --#{$menu-toggle}--before--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --#{$menu-toggle}--before--BorderTopColor: var(--pf-t--global--border--color--default);
+  --#{$menu-toggle}--before--BorderRightColor: var(--pf-t--global--border--color--default);
+  --#{$menu-toggle}--before--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$menu-toggle}--before--BorderLeftColor: var(--pf-t--global--border--color--default);
 
   // Hover
   --#{$menu-toggle}--hover--BackgroundColor: transparent;
-  --#{$menu-toggle}--hover--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$menu-toggle}--hover--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
+  --#{$menu-toggle}--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
+  --#{$menu-toggle}--hover--after--BorderBottomColor: var(--pf-t--global--border--color--hover);
 
   // Focus
   --#{$menu-toggle}--focus--BackgroundColor: transparent;
-  --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$menu-toggle}--focus--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
+  --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
+  --#{$menu-toggle}--focus--after--BorderBottomColor: var(--pf-t--global--border--color--active);
 
   // Active
   --#{$menu-toggle}--active--BackgroundColor: transparent;
-  --#{$menu-toggle}--active--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$menu-toggle}--active--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
+  --#{$menu-toggle}--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
+  --#{$menu-toggle}--active--after--BorderBottomColor: var(--pf-t--global--border--color--active);
 
   // Expanded
   --#{$menu-toggle}--m-expanded--Color: var(--#{$pf-global}--Color--100);
   --#{$menu-toggle}--m-expanded--BackgroundColor: transparent;
-  --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$menu-toggle}--m-expanded--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
+  --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
+  --#{$menu-toggle}--m-expanded--after--BorderBottomColor: var(--pf-t--global--border--color--active);
 
   // Disabled
   --#{$menu-toggle}--disabled--Color: var(--#{$pf-global}--disabled-color--100);
@@ -86,21 +88,20 @@
   --#{$menu-toggle}--m-plain--disabled--Color: var(--#{$pf-global}--disabled-color--200);
   --#{$menu-toggle}--m-plain--m-expanded--Color: var(--#{$pf-global}--Color--100);
 
-
   // Icon
-  --#{$menu-toggle}__icon--MarginRight: var(--#{$pf-global}--spacer--sm);
+  --#{$menu-toggle}__icon--MarginRight: var(--pf-t--global--spacer--sm);
 
   // Count
-  --#{$menu-toggle}__count--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$menu-toggle}__count--MarginLeft: var(--pf-t--global--spacer--sm);
 
   // Controls -- update element/vars to "control" in breaking change
-  --#{$menu-toggle}__controls--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$menu-toggle}__controls--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}__controls--MarginLeft: auto;
   --#{$menu-toggle}__controls--MarginRight: 0;
 
   // Toggle icon
-  --#{$menu-toggle}__toggle-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$menu-toggle}--m-plain__toggle-icon--Color: var(--#{$pf-global}--Color--200);
+  --#{$menu-toggle}__toggle-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--m-plain__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$menu-toggle}--m-plain--hover__toggle-icon--Color: var(--#{$pf-global}--Color--100);
   --#{$menu-toggle}--m-plain--active__toggle-icon--Color: var(--#{$pf-global}--Color--100);
   --#{$menu-toggle}--m-plain--focus__toggle-icon--Color: var(--#{$pf-global}--Color--100);
@@ -109,7 +110,6 @@
   // Full height
   --#{$menu-toggle}--m-full-height--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$menu-toggle}--m-full-height--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth: 0;
   --#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth:  var(--#{$pf-global}--BorderWidth--sm);
   --#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
   --#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
@@ -123,7 +123,7 @@
   --#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
   --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--100);
   --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
-  --#{$menu-toggle}--m-split-button--first-child--PaddingRight: var(--#{$pf-global}--spacer--sm);
+  --#{$menu-toggle}--m-split-button--first-child--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-split-button--last-child--PaddingLeft: 0;
 
   // Split button, action
@@ -154,49 +154,50 @@
   // Split button, controls, check
   --#{$menu-toggle}__button--BackgroundColor: transparent;
   --#{$menu-toggle}__button--AlignSelf: baseline;
-  --#{$menu-toggle}__button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$menu-toggle}__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$menu-toggle}__button__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$menu-toggle}__button__controls--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$menu-toggle}__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}__button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}__button__controls--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}__button__controls--MarginLeft: var(--pf-t--global--spacer--sm);
 
   // Typeahead
-  --#{$menu-toggle}--m-typeahead__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$menu-toggle}--m-typeahead__controls--MarginLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
+  --#{$menu-toggle}--m-typeahead__controls--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--m-typeahead__controls--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: center;
 
   position: relative;
   display: inline-flex;
   align-items: center;
   max-width: 100%;
-  padding: var(--#{$menu-toggle}--PaddingTop) var(--#{$menu-toggle}--PaddingRight) var(--#{$menu-toggle}--PaddingBottom) var(--#{$menu-toggle}--PaddingLeft);
+  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);
   font-size: var(--#{$menu-toggle}--FontSize);
   line-height: var(--#{$menu-toggle}--LineHeight);
   color: var(--#{$menu-toggle}--Color);
   cursor: pointer;
   background-color: var(--#{$menu-toggle}--BackgroundColor);
   border: 0;
-  border-radius: var(--#{$menu-toggle}--BorderRadius);
 
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    content: "";
+  &,
+  &::before {
+    border-radius: var(--#{$menu-toggle}--BorderRadius);
   }
 
   &::before {
-    border-color: var(--#{$menu-toggle}--before--BorderTopColor) var(--#{$menu-toggle}--before--BorderRightColor) var(--#{$menu-toggle}--before--BorderBottomColor) var(--#{$menu-toggle}--before--BorderLeftColor);
-    border-style: solid;
-    border-width: var(--#{$menu-toggle}--before--BorderTopWidth) var(--#{$menu-toggle}--before--BorderRightWidth) var(--#{$menu-toggle}--before--BorderBottomWidth) var(--#{$menu-toggle}--before--BorderLeftWidth);
+    position: absolute;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--#{$menu-toggle}--BorderWidth) solid var(--#{$menu-toggle}--BorderColor);
   }
 
   &::after {
-    border-bottom: var(--#{$menu-toggle}--after--BorderBottomWidth) solid var(--#{$menu-toggle}--after--BorderBottomColor);
+    border-block-end: var(--#{$menu-toggle}--after--BorderWidth) solid var(--#{$menu-toggle}--after--BorderColor);
   }
 
   &.pf-m-primary {
@@ -254,17 +255,12 @@
     }
   }
 
-  &.pf-m-plain {
-    --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--m-plain__toggle-icon--Color);
-
-    &:not(.pf-m-text) {
+  &.pf-m-plain:not(.pf-m-text) {
       --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-plain--PaddingRight);
       --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-plain--PaddingLeft);
       --#{$menu-toggle}--disabled--BackgroundColor: transparent;
 
       display: inline-block;
-      color: var(--#{$menu-toggle}--m-plain--Color);
-    }
   }
 
   &.pf-m-full-height {
@@ -282,29 +278,15 @@
   }
 
   &:hover {
-    --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--hover--BackgroundColor);
-    --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--hover--after--BorderBottomWidth);
-    --#{$menu-toggle}--after--BorderBottomColor: var(--#{$menu-toggle}--hover--after--BorderBottomColor);
-    --#{$menu-toggle}--m-plain__toggle-icon--Color: var(--#{$menu-toggle}--m-plain--hover__toggle-icon--Color);
-    --#{$menu-toggle}--m-plain--Color: var(--#{$menu-toggle}--m-plain--hover--Color);
-  }
+    --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--hover--BorderColor);
+    --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--hover--BorderWidth);
+}
 
   &:focus,
-  &:focus-within {
-    --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--focus--BackgroundColor);
-    --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--focus--after--BorderBottomWidth);
-    --#{$menu-toggle}--after--BorderBottomColor: var(--#{$menu-toggle}--focus--after--BorderBottomColor);
-    --#{$menu-toggle}--m-plain__toggle-icon--Color: var(--#{$menu-toggle}--m-plain--focus__toggle-icon--Color);
-    --#{$menu-toggle}--m-plain--Color: var(--#{$menu-toggle}--m-plain--focus--Color);
-  }
-
   &:active {
-    --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--active--BackgroundColor);
-    --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--active--after--BorderBottomWidth);
-    --#{$menu-toggle}--after--BorderBottomColor: var(--#{$menu-toggle}--active--after--BorderBottomColor);
-    --#{$menu-toggle}--m-plain__toggle-icon--Color: var(--#{$menu-toggle}--m-plain--active__toggle-icon--Color);
-    --#{$menu-toggle}--m-plain--Color: var(--#{$menu-toggle}--m-plain--active--Color);
-  }
+    --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--active--BorderColor);
+    --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--active--BorderWidth);
+}
 
   &.pf-m-expanded {
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-expanded--Color);
@@ -325,7 +307,6 @@
   }
 
   &.pf-m-primary,
-  &.pf-m-plain,
   &:disabled {
     &::before,
     &::after {
@@ -354,16 +335,19 @@
 
     > * {
       position: relative;
-      padding: var(--#{$menu-toggle}--PaddingTop) var(--#{$menu-toggle}--PaddingRight) var(--#{$menu-toggle}--PaddingBottom) var(--#{$menu-toggle}--PaddingLeft);
+      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);
 
       &:first-child {
-        padding-right: var(--#{$menu-toggle}--m-split-button--first-child--PaddingRight);
+        padding-inline-end: var(--#{$menu-toggle}--m-split-button--first-child--PaddingRight);
       }
     }
 
     &:where(:not(.pf-m-action)) {
       > :last-child {
-        padding-left: var(--#{$menu-toggle}--m-split-button--last-child--PaddingLeft);
+        padding-inline-start: var(--#{$menu-toggle}--m-split-button--last-child--PaddingLeft);
       }
     }
 
@@ -376,11 +360,9 @@
       align-self: stretch;
 
       .#{$check}__input {
-        align-self: revert;
+        --#{$check}__input--TranslateY: 0;
 
-        // stylelint-disable property-no-vendor-prefix
-        -moz-transform: none;
-        // stylelint-enable
+        align-self: center;
       }
     }
 
@@ -390,13 +372,13 @@
       &:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > * {
         &::after {
           position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: var(--#{$menu-toggle}--m-split-button--m-action--child--after--Left);
+          inset-block-start: 0;
+          inset-block-end: 0;
+          inset-inline-start: var(--#{$menu-toggle}--m-split-button--m-action--child--after--Left);
+          inset-inline-end: 0;
           pointer-events: none;
           content: "";
-          border-bottom: var(--#{$menu-toggle}--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--after--BorderBottomColor);
+          border-block-end: var(--#{$menu-toggle}--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--after--BorderBottomColor);
         }
 
         &:hover {
@@ -458,13 +440,13 @@
 
         // stylelint-disable max-nesting-depth
         > :first-child {
-          border-top-left-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
-          border-bottom-left-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
+          border-start-start-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
+          border-end-start-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
         }
 
         > :last-child {
-          border-top-right-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
-          border-bottom-right-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
+          border-start-end-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
+          border-end-end-radius: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderRadius);
         }
 
         // enable-disable
@@ -474,7 +456,7 @@
       > :not(:first-child) {
         --#{$menu-toggle}--m-split-button--m-action--child--after--Left: calc(var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftWidth) * -1);
 
-        border-left: 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--BorderLeftWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor);
       }
 
       &:not(.pf-m-expanded) {
@@ -519,8 +501,8 @@
   --#{$menu-toggle}__controls--MarginLeft: var(--#{$menu-toggle}__button__controls--MarginLeft);
 
   align-self: var(--#{$menu-toggle}__button--AlignSelf);
-  padding-right: var(--#{$menu-toggle}__button--PaddingRight);
-  padding-left: var(--#{$menu-toggle}__button--PaddingLeft);
+  padding-inline-start: var(--#{$menu-toggle}__button--PaddingLeft);
+  padding-inline-end: var(--#{$menu-toggle}__button--PaddingRight);
   color: inherit;
   background-color: var(--#{$menu-toggle}__button--BackgroundColor);
   border: 0;
@@ -529,7 +511,7 @@
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
   align-self: center;
-  margin-right: var(--#{$menu-toggle}__icon--MarginRight);
+  margin-inline-end: var(--#{$menu-toggle}__icon--MarginRight);
   line-height: 1;
 }
 
@@ -542,17 +524,17 @@
 .#{$menu-toggle}__count {
   display: flex;
   flex-wrap: nowrap;
-  margin-left: var(--#{$menu-toggle}__count--MarginLeft);
+  margin-inline-start: var(--#{$menu-toggle}__count--MarginLeft);
 }
 
 .#{$menu-toggle}__controls {
-  padding-left: var(--#{$menu-toggle}__controls--PaddingLeft);
-  margin-right: var(--#{$menu-toggle}__controls--MarginRight);
-  margin-left: var(--#{$menu-toggle}__controls--MarginLeft);
+  padding-inline-start: var(--#{$menu-toggle}__controls--PaddingLeft);
+  margin-inline-start: var(--#{$menu-toggle}__controls--MarginLeft);
+  margin-inline-end: var(--#{$menu-toggle}__controls--MarginRight);
 }
 
 .#{$menu-toggle}__toggle-icon {
-  margin-right: var(--#{$menu-toggle}__toggle-icon--MarginRight);
+  margin-inline-end: var(--#{$menu-toggle}__toggle-icon--MarginRight);
   color: var(--#{$menu-toggle}__toggle-icon--Color, inherit);
 }
 

package/components/ModalBox/modal-box.css

@@ -1,48 +1,59 @@
-.pf-v5-c-modal-box {
-  --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-modal-box--BoxShadow: var(--pf-v5-global--BoxShadow--xl);
+:root {
+  --pf-v5-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v5-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v5-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v5-c-modal-box--ZIndex: var(--pf-v5-global--ZIndex--xl);
   --pf-v5-c-modal-box--Width: 100%;
-  --pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-v5-global--spacer--xl));
+  --pf-v5-c-modal-box--MaxWidth: calc(100% - var(--pf-t--global--spacer--xl));
   --pf-v5-c-modal-box--m-sm--sm--MaxWidth: 35rem;
   --pf-v5-c-modal-box--m-md--Width: 52.5rem;
   --pf-v5-c-modal-box--m-lg--lg--MaxWidth: 70rem;
-  --pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-v5-global--spacer--2xl));
-  --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-modal-box--m-align-top--MarginTop: var(--pf-v5-c-modal-box--m-align-top--spacer);
-  --pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-v5-global--spacer--2xl)) - var(--pf-v5-c-modal-box--m-align-top--spacer));
-  --pf-v5-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer) * 2, var(--pf-v5-global--spacer--xl)));
-  --pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
-  --pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
-  --pf-v5-c-modal-box__header--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
-  --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-modal-box__description--PaddingTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
-  --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__body--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__body--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__body--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__header--body--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-modal-box__close--Top: calc(var(--pf-v5-global--spacer--lg));
-  --pf-v5-c-modal-box__close--Right: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-modal-box__close--sibling--MarginRight: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-global--spacer--sm));
-  --pf-v5-c-modal-box__footer--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__footer--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__footer--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__footer--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-modal-box--MaxHeight: calc(100% - var(--pf-t--global--spacer--2xl));
+  --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-modal-box--m-align-top--xl--spacer: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-modal-box--m-align-top--Top: var(--pf-v5-c-modal-box--m-align-top--spacer);
+  --pf-v5-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer), var(--pf-t--global--spacer--2xl)) - var(--pf-v5-c-modal-box--m-align-top--spacer));
+  --pf-v5-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-v5-c-modal-box--m-align-top--spacer) * 2, var(--pf-t--global--spacer--xl)));
+  --pf-v5-c-modal-box--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-modal-box--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v5-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+  --pf-v5-c-modal-box__header--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__header--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body));
+  --pf-v5-c-modal-box__body--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__body--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__body--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__header--body--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-modal-box__close--Top: var(--pf-v5-c-modal-box__header--PaddingTop);
+  --pf-v5-c-modal-box__close--Right: var(--pf-v5-c-modal-box__header--PaddingRight);
+  --pf-v5-c-modal-box__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
+  --pf-v5-c-modal-box__footer--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__footer--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__footer--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__footer--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-v5-c-modal-box__footer--c-button--MarginRight) / 2);
+}
+@media (min-width: 1200px) {
+  :root {
+    --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
+  }
+}
+
+.pf-v5-c-modal-box {
   position: relative;
   z-index: var(--pf-v5-c-modal-box--ZIndex);
   display: flex;
@@ -50,14 +61,11 @@
   width: var(--pf-v5-c-modal-box--Width);
   max-width: var(--pf-v5-c-modal-box--MaxWidth);
   max-height: var(--pf-v5-c-modal-box--MaxHeight);
+  overflow: auto;
   background-color: var(--pf-v5-c-modal-box--BackgroundColor);
+  border-radius: var(--pf-v5-c-modal-box--BorderRadius);
   box-shadow: var(--pf-v5-c-modal-box--BoxShadow);
 }
-@media (min-width: 1200px) {
-  .pf-v5-c-modal-box {
-    --pf-v5-c-modal-box--m-align-top--spacer: var(--pf-v5-c-modal-box--m-align-top--xl--spacer);
-  }
-}
 .pf-v5-c-modal-box.pf-m-sm {
   --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-sm--sm--MaxWidth);
 }
@@ -68,7 +76,7 @@
   --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-lg--lg--MaxWidth);
 }
 .pf-v5-c-modal-box.pf-m-align-top {
-  top: var(--pf-v5-c-modal-box--m-align-top--MarginTop);
+  inset-block-start: var(--pf-v5-c-modal-box--m-align-top--Top);
   align-self: flex-start;
   max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
   max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
@@ -91,34 +99,35 @@
 
 .pf-v5-c-modal-box__close {
   position: absolute;
-  top: var(--pf-v5-c-modal-box__close--Top);
-  right: var(--pf-v5-c-modal-box__close--Right);
+  inset-block-start: var(--pf-v5-c-modal-box__close--Top);
+  inset-inline-end: var(--pf-v5-c-modal-box__close--Right);
 }
 .pf-v5-c-modal-box__close + * {
-  margin-right: var(--pf-v5-c-modal-box__close--sibling--MarginRight);
+  margin-inline-end: var(--pf-v5-c-modal-box__close--sibling--MarginRight);
 }
 
 .pf-v5-c-modal-box__header {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  padding-top: var(--pf-v5-c-modal-box__header--PaddingTop);
-  padding-right: var(--pf-v5-c-modal-box__header--PaddingRight);
-  padding-left: var(--pf-v5-c-modal-box__header--PaddingLeft);
+  gap: var(--pf-v5-c-modal-box__header--Gap);
+  padding-block-start: var(--pf-v5-c-modal-box__header--PaddingTop);
+  padding-inline-start: var(--pf-v5-c-modal-box__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-modal-box__header--PaddingRight);
 }
 .pf-v5-c-modal-box__header.pf-m-help {
   display: flex;
   flex-direction: row;
 }
-.pf-v5-c-modal-box__header:last-child {
-  padding-bottom: var(--pf-v5-c-modal-box__header--last-child--PaddingBottom);
-}
 .pf-v5-c-modal-box__header + .pf-v5-c-modal-box__body {
   --pf-v5-c-modal-box__body--PaddingTop: var(--pf-v5-c-modal-box__header--body--PaddingTop);
 }
 
 .pf-v5-c-modal-box__header-main {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+  gap: var(--pf-v5-c-modal-box__header-main--Gap);
   min-width: 0;
 }
 
@@ -140,20 +149,22 @@
 }
 
 .pf-v5-c-modal-box__title-icon {
-  margin-right: var(--pf-v5-c-modal-box__title-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-modal-box__title-icon--MarginRight);
   color: var(--pf-v5-c-modal-box__title-icon--Color);
 }
 
 .pf-v5-c-modal-box__description {
-  padding-top: var(--pf-v5-c-modal-box__description--PaddingTop);
+  padding-block-start: var(--pf-v5-c-modal-box__description--PaddingTop);
+  font-size: var(--pf-v5-c-modal-box__description--FontSize);
+  color: var(--pf-v5-c-modal-box__description--Color);
 }
 
 .pf-v5-c-modal-box__body {
   flex: 1 1 auto;
   min-height: var(--pf-v5-c-modal-box__body--MinHeight);
-  padding-top: var(--pf-v5-c-modal-box__body--PaddingTop);
-  padding-right: var(--pf-v5-c-modal-box__body--PaddingRight);
-  padding-left: var(--pf-v5-c-modal-box__body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-modal-box__body--PaddingTop);
+  padding-inline-start: var(--pf-v5-c-modal-box__body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-modal-box__body--PaddingRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -161,27 +172,23 @@
   -webkit-overflow-scrolling: touch;
 }
 .pf-v5-c-modal-box__body:last-child {
-  padding-bottom: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-modal-box__body--last-child--PaddingBottom);
 }
 
 .pf-v5-c-modal-box__footer {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  padding-top: var(--pf-v5-c-modal-box__footer--PaddingTop);
-  padding-right: var(--pf-v5-c-modal-box__footer--PaddingRight);
-  padding-bottom: var(--pf-v5-c-modal-box__footer--PaddingBottom);
-  padding-left: var(--pf-v5-c-modal-box__footer--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-modal-box__footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-modal-box__footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-modal-box__footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-modal-box__footer--PaddingRight);
 }
 .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
-  margin-right: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
+  margin-inline-end: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
 }
 @media screen and (min-width: 576px) {
   .pf-v5-c-modal-box__footer > .pf-v5-c-button:not(:last-child) {
     --pf-v5-c-modal-box__footer--c-button--MarginRight: var(--pf-v5-c-modal-box__footer--c-button--sm--MarginRight);
   }
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-modal-box {
-  --pf-v5-c-modal-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }