@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

package/components/CodeBlock/code-block.scss

@@ -1,31 +1,42 @@
 // @debug $code-block; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$code-block} {
-  --#{$code-block}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$code-block}__header--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$code-block}__header--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$code-block}__content--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__content--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__content--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__content--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__pre--FontFamily: var(--#{$pf-global}--FontFamily--monospace);
-  --#{$code-block}__pre--FontSize: var(--#{$pf-global}--FontSize--sm);
+:root, :where(.#{$code-block}) {
+  --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$code-block}__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$code-block}__header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$code-block}__header--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$code-block}__header--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$code-block}__content--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$code-block}__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$code-block}__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$code-block}__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$code-block}__pre--FontFamily: var(--pf-t--global--font--family--mono);
+  --#{$code-block}__pre--FontSize: var(--pf-t--global--font--size--xs);
+}
 
+.#{$code-block} {
   background-color: var(--#{$code-block}--BackgroundColor);
+  border-radius: var(--#{$code-block}--BorderRadius);
 }
 
 .#{$code-block}__header {
   display: flex;
-  border-bottom: var(--#{$code-block}__header--BorderBottomWidth) solid var(--#{$code-block}__header--BorderBottomColor);
+  padding-inline-start: var(--#{$code-block}__header--PaddingLeft);
+  padding-inline-end: var(--#{$code-block}__header--PaddingRight);
+  border-block-end: var(--#{$code-block}__header--BorderBottomWidth) solid var(--#{$code-block}__header--BorderBottomColor);
 }
 
 .#{$code-block}__actions {
   display: flex;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .#{$code-block}__content {
-  padding: var(--#{$code-block}__content--PaddingTop) var(--#{$code-block}__content--PaddingRight) var(--#{$code-block}__content--PaddingBottom) var(--#{$code-block}__content--PaddingLeft);
+  padding-block-start: var(--#{$code-block}__content--PaddingTop);
+  padding-block-end: var(--#{$code-block}__content--PaddingBottom);
+  padding-inline-start: var(--#{$code-block}__content--PaddingLeft);
+  padding-inline-end: var(--#{$code-block}__content--PaddingRight);
 }
 
 .#{$code-block}__pre {

package/components/CodeEditor/code-editor.css

@@ -45,12 +45,12 @@
 }
 .pf-v5-c-code-editor__header::before {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
-  border-bottom: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
 }
 
 .pf-v5-c-code-editor__controls {
@@ -66,13 +66,13 @@
   --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
 }
 .pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
-  border-bottom-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
+  border-block-end-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
 }
 
 .pf-v5-c-code-editor__header-main {
   flex-grow: 1;
-  padding-right: var(--pf-v5-c-code-editor__header-main--PaddingRight);
-  padding-left: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
 }
 
 .pf-v5-c-code-editor__main {
@@ -84,20 +84,20 @@
 }
 .pf-v5-c-code-editor__main.pf-m-drag-hover::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
   opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
 }
 .pf-v5-c-code-editor__main.pf-m-drag-hover::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   border: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
 }
@@ -106,12 +106,15 @@
 }
 
 .pf-v5-c-code-editor__header + .pf-v5-c-code-editor__main {
-  border-top-width: 0;
+  border-block-start-width: 0;
 }
 
 .pf-v5-c-code-editor__code {
   position: relative;
-  padding: var(--pf-v5-c-code-editor__code--PaddingTop) var(--pf-v5-c-code-editor__code--PaddingRight) var(--pf-v5-c-code-editor__code--PaddingBottom) var(--pf-v5-c-code-editor__code--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-code-editor__code--PaddingTop);
+  padding-block-end: var(--pf-v5-c-code-editor__code--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-code-editor__code--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-editor__code--PaddingRight);
 }
 .pf-v5-c-code-editor__code .pf-v5-c-code-editor__code-pre {
   font-family: var(--pf-v5-c-code-editor__code-pre--FontFamily);
@@ -123,17 +126,23 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: var(--pf-v5-c-code-editor__tab--PaddingTop) var(--pf-v5-c-code-editor__tab--PaddingRight) var(--pf-v5-c-code-editor__tab--PaddingBottom) var(--pf-v5-c-code-editor__tab--PaddingLeft);
-  margin-left: auto;
+  padding-block-start: var(--pf-v5-c-code-editor__tab--PaddingTop);
+  padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
+  margin-inline-start: auto;
   color: var(--pf-v5-c-code-editor__tab--Color);
   background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
   border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
   border-style: solid;
-  border-width: var(--pf-v5-c-code-editor__tab--BorderTopWidth) var(--pf-v5-c-code-editor__tab--BorderRightWidth) var(--pf-v5-c-code-editor__tab--BorderBottomWidth) var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
+  border-block-start-width: var(--pf-v5-c-code-editor__tab--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-code-editor__tab--BorderRightWidth);
 }
 
 .pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
-  margin-left: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
@@ -141,5 +150,5 @@
   --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
-  border-left: 1px solid var(--pf-v5-global--palette--black-700);
+  border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
 }

package/components/CodeEditor/code-editor.scss

@@ -61,12 +61,12 @@
 
   &::before {
     position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     pointer-events: none;
     content: "";
-    border-bottom: var(--#{$code-editor}__header--before--BorderBottomWidth) solid var(--#{$code-editor}__header--before--BorderBottomColor);
+    border-block-end: var(--#{$code-editor}__header--before--BorderBottomWidth) solid var(--#{$code-editor}__header--before--BorderBottomColor);
   }
 }
 
@@ -86,7 +86,7 @@
 
     &:disabled {
       &::after {
-        border-bottom-color: var(--#{$code-editor}__controls--c-button--m-control--disabled--after--BorderBottomColor);
+        border-block-end-color: var(--#{$code-editor}__controls--c-button--m-control--disabled--after--BorderBottomColor);
       }
     }
   }
@@ -94,8 +94,8 @@
 
 .#{$code-editor}__header-main {
   flex-grow: 1;
-  padding-right: var(--#{$code-editor}__header-main--PaddingRight);
-  padding-left: var(--#{$code-editor}__header-main--PaddingLeft);
+  padding-inline-start: var(--#{$code-editor}__header-main--PaddingLeft);
+  padding-inline-end: var(--#{$code-editor}__header-main--PaddingRight);
 }
 
 .#{$code-editor}__main {
@@ -108,10 +108,10 @@
   &.pf-m-drag-hover {
     &::after {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       content: "";
       background-color: var(--#{$code-editor}__main--m-drag-hover--after--BackgroundColor);
       opacity: var(--#{$code-editor}__main--m-drag-hover--after--Opacity);
@@ -119,10 +119,10 @@
 
     &::before {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       content: "";
       border: var(--#{$code-editor}__main--m-drag-hover--before--BorderWidth) solid var(--#{$code-editor}__main--m-drag-hover--before--BorderColor);
     }
@@ -136,12 +136,15 @@
 }
 
 .#{$code-editor}__header + .#{$code-editor}__main {
-  border-top-width: 0;
+  border-block-start-width: 0;
 }
 
 .#{$code-editor}__code {
   position: relative;
-  padding: var(--#{$code-editor}__code--PaddingTop) var(--#{$code-editor}__code--PaddingRight) var(--#{$code-editor}__code--PaddingBottom) var(--#{$code-editor}__code--PaddingLeft);
+  padding-block-start: var(--#{$code-editor}__code--PaddingTop);
+  padding-block-end: var(--#{$code-editor}__code--PaddingBottom);
+  padding-inline-start: var(--#{$code-editor}__code--PaddingLeft);
+  padding-inline-end: var(--#{$code-editor}__code--PaddingRight);
 
   .#{$code-editor}__code-pre {
     font-family: var(--#{$code-editor}__code-pre--FontFamily);
@@ -154,17 +157,23 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: var(--#{$code-editor}__tab--PaddingTop) var(--#{$code-editor}__tab--PaddingRight) var(--#{$code-editor}__tab--PaddingBottom) var(--#{$code-editor}__tab--PaddingLeft);
-  margin-left: auto; // remove at breaking change
+  padding-block-start: var(--#{$code-editor}__tab--PaddingTop);
+  padding-block-end: var(--#{$code-editor}__tab--PaddingBottom);
+  padding-inline-start: var(--#{$code-editor}__tab--PaddingLeft);
+  padding-inline-end: var(--#{$code-editor}__tab--PaddingRight);
+  margin-inline-start: auto; // remove at breaking change
   color: var(--#{$code-editor}__tab--Color);
   background-color: var(--#{$code-editor}__tab--BackgroundColor);
   border-color: var(--#{$code-editor}__tab--BorderColor);
   border-style: solid;
-  border-width: var(--#{$code-editor}__tab--BorderTopWidth) var(--#{$code-editor}__tab--BorderRightWidth) var(--#{$code-editor}__tab--BorderBottomWidth) var(--#{$code-editor}__tab--BorderLeftWidth);
+  border-block-start-width: var(--#{$code-editor}__tab--BorderTopWidth);
+  border-block-end-width: var(--#{$code-editor}__tab--BorderBottomWidth);
+  border-inline-start-width: var(--#{$code-editor}__tab--BorderLeftWidth);
+  border-inline-end-width: var(--#{$code-editor}__tab--BorderRightWidth);
 }
 
 .#{$code-editor}__tab-icon + .#{$code-editor}__tab-text {
-  margin-left: var(--#{$code-editor}__tab-icon--text--MarginLeft);
+  margin-inline-start: var(--#{$code-editor}__tab-icon--text--MarginLeft);
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/components/CodeEditor/themes/dark/code-editor.scss

@@ -8,7 +8,7 @@
 
   .#{$code-editor}__controls {
     > * + * {
-      border-left: 1px solid var(--#{$pf-global}--palette--black-700);
+      border-inline-start: 1px solid var(--#{$pf-global}--palette--black-700);
     }
   }
 }

package/components/Content/content.css

@@ -1,39 +1,39 @@
 .pf-v5-c-content {
   --pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v5-c-content--FontSize: var(--pf-t--global--font--size--body);
+  --pf-v5-c-content--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-content--FontWeight: var(--pf-t--global--font--weight--body);
   --pf-v5-c-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v5-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --pf-v5-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
   --pf-v5-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
   --pf-v5-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --pf-v5-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
   --pf-v5-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
   --pf-v5-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
   --pf-v5-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v5-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -85,7 +85,7 @@
   color: var(--pf-v5-c-content--a--visited--Color);
 }
 .pf-v5-c-content li + li {
-  margin-top: var(--pf-v5-c-content--li--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--li--MarginTop);
 }
 .pf-v5-c-content p:not(:last-child),
 .pf-v5-c-content dl:not(:last-child),
@@ -96,7 +96,7 @@
 .pf-v5-c-content pre:not(:last-child),
 .pf-v5-c-content table:not(:last-child),
 .pf-v5-c-content hr:not(:last-child) {
-  margin-bottom: var(--pf-v5-c-content--MarginBottom);
+  margin-block-end: var(--pf-v5-c-content--MarginBottom);
 }
 .pf-v5-c-content h1,
 .pf-v5-c-content h2,
@@ -113,7 +113,7 @@
 .pf-v5-c-content h4:first-child,
 .pf-v5-c-content h5:first-child,
 .pf-v5-c-content h6:first-child {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 .pf-v5-c-content h1:last-child,
 .pf-v5-c-content h2:last-child,
@@ -121,7 +121,7 @@
 .pf-v5-c-content h4:last-child,
 .pf-v5-c-content h5:last-child,
 .pf-v5-c-content h6:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .pf-v5-c-content ol,
 .pf-v5-c-content ul {
@@ -129,48 +129,48 @@
 }
 .pf-v5-c-content ol.pf-m-plain,
 .pf-v5-c-content ul.pf-m-plain {
-  padding-left: 0;
-  margin-left: 0;
+  padding-inline-start: 0;
+  margin-inline-start: 0;
   list-style: none;
 }
 .pf-v5-c-content h1 {
-  margin-top: var(--pf-v5-c-content--h1--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h1--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h1--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h1--MarginBottom);
   font-size: var(--pf-v5-c-content--h1--FontSize);
   font-weight: var(--pf-v5-c-content--h1--FontWeight);
   line-height: var(--pf-v5-c-content--h1--LineHeight);
 }
 .pf-v5-c-content h2 {
-  margin-top: var(--pf-v5-c-content--h2--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h2--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h2--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h2--MarginBottom);
   font-size: var(--pf-v5-c-content--h2--FontSize);
   font-weight: var(--pf-v5-c-content--h2--FontWeight);
   line-height: var(--pf-v5-c-content--h2--LineHeight);
 }
 .pf-v5-c-content h3 {
-  margin-top: var(--pf-v5-c-content--h3--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h3--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h3--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h3--MarginBottom);
   font-size: var(--pf-v5-c-content--h3--FontSize);
   font-weight: var(--pf-v5-c-content--h3--FontWeight);
   line-height: var(--pf-v5-c-content--h3--LineHeight);
 }
 .pf-v5-c-content h4 {
-  margin-top: var(--pf-v5-c-content--h4--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h4--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h4--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h4--MarginBottom);
   font-size: var(--pf-v5-c-content--h4--FontSize);
   font-weight: var(--pf-v5-c-content--h4--FontWeight);
   line-height: var(--pf-v5-c-content--h4--LineHeight);
 }
 .pf-v5-c-content h5 {
-  margin-top: var(--pf-v5-c-content--h5--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h5--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h5--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h5--MarginBottom);
   font-size: var(--pf-v5-c-content--h5--FontSize);
   font-weight: var(--pf-v5-c-content--h5--FontWeight);
   line-height: var(--pf-v5-c-content--h5--LineHeight);
 }
 .pf-v5-c-content h6 {
-  margin-top: var(--pf-v5-c-content--h6--MarginTop);
-  margin-bottom: var(--pf-v5-c-content--h6--MarginBottom);
+  margin-block-start: var(--pf-v5-c-content--h6--MarginTop);
+  margin-block-end: var(--pf-v5-c-content--h6--MarginBottom);
   font-size: var(--pf-v5-c-content--h6--FontSize);
   font-weight: var(--pf-v5-c-content--h6--FontWeight);
   line-height: var(--pf-v5-c-content--h6--LineHeight);
@@ -182,12 +182,15 @@
   color: var(--pf-v5-c-content--small--Color);
 }
 .pf-v5-c-content small:not(:last-child) {
-  margin-bottom: var(--pf-v5-c-content--small--MarginBottom);
+  margin-block-end: var(--pf-v5-c-content--small--MarginBottom);
 }
 .pf-v5-c-content blockquote {
-  padding: var(--pf-v5-c-content--blockquote--PaddingTop) var(--pf-v5-c-content--blockquote--PaddingRight) var(--pf-v5-c-content--blockquote--PaddingBottom) var(--pf-v5-c-content--blockquote--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-content--blockquote--PaddingTop);
+  padding-block-end: var(--pf-v5-c-content--blockquote--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-content--blockquote--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-content--blockquote--PaddingRight);
   color: var(--pf-v5-c-content--blockquote--Color);
-  border-left: var(--pf-v5-c-content--blockquote--BorderLeftWidth) solid var(--pf-v5-c-content--blockquote--BorderLeftColor);
+  border-inline-start: var(--pf-v5-c-content--blockquote--BorderLeftWidth) solid var(--pf-v5-c-content--blockquote--BorderLeftColor);
 }
 .pf-v5-c-content hr {
   height: var(--pf-v5-c-content--hr--Height);
@@ -195,29 +198,29 @@
   border: none;
 }
 .pf-v5-c-content ol {
-  padding-left: var(--pf-v5-c-content--ol--PaddingLeft);
-  margin-left: var(--pf-v5-c-content--ol--MarginLeft);
+  padding-inline-start: var(--pf-v5-c-content--ol--PaddingLeft);
+  margin-inline-start: var(--pf-v5-c-content--ol--MarginLeft);
 }
 .pf-v5-c-content ol ul {
   --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft);
-  margin-top: var(--pf-v5-c-content--ul--nested--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--ul--nested--MarginTop);
 }
 .pf-v5-c-content ol ol {
   --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft);
-  margin-top: var(--pf-v5-c-content--ol--nested--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--ol--nested--MarginTop);
 }
 .pf-v5-c-content ul {
-  padding-left: var(--pf-v5-c-content--ul--PaddingLeft);
-  margin-left: var(--pf-v5-c-content--ul--MarginLeft);
+  padding-inline-start: var(--pf-v5-c-content--ul--PaddingLeft);
+  margin-inline-start: var(--pf-v5-c-content--ul--MarginLeft);
   list-style: var(--pf-v5-c-content--ul--ListStyle);
 }
 .pf-v5-c-content ul ul {
   --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft);
-  margin-top: var(--pf-v5-c-content--ul--nested--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--ul--nested--MarginTop);
 }
 .pf-v5-c-content ul ol {
   --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft);
-  margin-top: var(--pf-v5-c-content--ol--nested--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--ol--nested--MarginTop);
 }
 .pf-v5-c-content dl {
   display: grid;
@@ -234,7 +237,7 @@
   font-weight: var(--pf-v5-c-content--dt--FontWeight);
 }
 .pf-v5-c-content dt:not(:first-child) {
-  margin-top: var(--pf-v5-c-content--dt--MarginTop);
+  margin-block-start: var(--pf-v5-c-content--dt--MarginTop);
 }
 @media screen and (min-width: 576px) {
   .pf-v5-c-content dt:not(:first-child) {