@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.61

package/components/Chip/chip.css

@@ -28,6 +28,7 @@
   --pf-v5-c-chip__content--ColumnGap: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-chip__text--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-chip__text--MaxWidth: 16ch;
+  --pf-v5-c-chip__c-badge--MarginLeft: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-chip__actions--FontSize: var(--pf-v5-global--FontSize--xs);
   --pf-v5-c-chip__actions--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-chip__actions--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
@@ -43,17 +44,20 @@
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  padding: var(--pf-v5-c-chip--PaddingTop) var(--pf-v5-c-chip--PaddingRight) var(--pf-v5-c-chip--PaddingBottom) var(--pf-v5-c-chip--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-chip--PaddingTop);
+  padding-block-end: var(--pf-v5-c-chip--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-chip--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-chip--PaddingRight);
   list-style: none;
   background-color: var(--pf-v5-c-chip--BackgroundColor);
   border-radius: var(--pf-v5-c-chip--BorderRadius);
 }
 .pf-v5-c-chip::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-chip--before--BorderWidth) solid var(--pf-v5-c-chip--before--BorderColor);
   border-radius: var(--pf-v5-c-chip--before--BorderRadius);
@@ -80,10 +84,13 @@
   max-width: var(--pf-v5-c-chip__text--MaxWidth);
   color: var(--pf-v5-c-chip__text--Color);
 }
+.pf-v5-c-chip__text .pf-v5-c-badge {
+  margin-inline-start: var(--pf-v5-c-chip__c-badge--MarginLeft);
+}
 
 .pf-v5-c-chip__icon + .pf-v5-c-chip__text,
 .pf-v5-c-chip__text + .pf-v5-c-chip__icon {
-  margin-left: var(--pf-v5-c-chip__icon--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-chip__icon--MarginLeft);
 }
 
 .pf-v5-c-chip__content {
@@ -102,9 +109,9 @@
   --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-chip__actions--c-button--PaddingBottom);
   --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-chip__actions--c-button--PaddingLeft);
   --pf-v5-c-button--FontSize: var(--pf-v5-c-chip__actions--c-button--FontSize);
-  margin-top: var(--pf-v5-c-chip__actions--c-button--MarginTop);
-  margin-right: var(--pf-v5-c-chip__actions--c-button--MarginRight);
-  margin-bottom: var(--pf-v5-c-chip__actions--c-button--MarginBottom);
+  margin-block-start: var(--pf-v5-c-chip__actions--c-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-chip__actions--c-button--MarginBottom);
+  margin-inline-end: var(--pf-v5-c-chip__actions--c-button--MarginRight);
   line-height: 1;
 }
 

package/components/Chip/chip.scss

@@ -26,6 +26,7 @@
   // chip text
   --#{$chip}__text--Color: var(--#{$pf-global}--Color--100);
   --#{$chip}__text--MaxWidth: 16ch;
+  --#{$chip}__c-badge--MarginLeft: var(--#{$pf-global}--spacer--xs);
 
   // chip actions
   --#{$chip}__actions--FontSize: var(--#{$pf-global}--FontSize--xs);
@@ -49,17 +50,20 @@
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  padding: var(--#{$chip}--PaddingTop) var(--#{$chip}--PaddingRight) var(--#{$chip}--PaddingBottom) var(--#{$chip}--PaddingLeft);
+  padding-block-start: var(--#{$chip}--PaddingTop);
+  padding-block-end: var(--#{$chip}--PaddingBottom);
+  padding-inline-start: var(--#{$chip}--PaddingLeft);
+  padding-inline-end: var(--#{$chip}--PaddingRight);
   list-style: none;
   background-color: var(--#{$chip}--BackgroundColor);
   border-radius: var(--#{$chip}--BorderRadius);
 
   &::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(--#{$chip}--before--BorderWidth) solid var(--#{$chip}--before--BorderColor);
     border-radius: var(--#{$chip}--before--BorderRadius);
@@ -92,11 +96,15 @@
   position: relative;
   max-width: var(--#{$chip}__text--MaxWidth);
   color: var(--#{$chip}__text--Color);
+
+  .#{$badge} {
+    margin-inline-start: var(--#{$chip}__c-badge--MarginLeft); // remove in breaking change
+  }
 }
 
 .#{$chip}__icon + .#{$chip}__text,
 .#{$chip}__text + .#{$chip}__icon {
-  margin-left: var(--#{$chip}__icon--MarginLeft);
+  margin-inline-start: var(--#{$chip}__icon--MarginLeft);
 }
 
 .#{$chip}__content {
@@ -117,9 +125,9 @@
     --#{$button}--PaddingLeft: var(--#{$chip}__actions--c-button--PaddingLeft);
     --#{$button}--FontSize: var(--#{$chip}__actions--c-button--FontSize);
 
-    margin-top: var(--#{$chip}__actions--c-button--MarginTop);
-    margin-right: var(--#{$chip}__actions--c-button--MarginRight);
-    margin-bottom: var(--#{$chip}__actions--c-button--MarginBottom);
+    margin-block-start: var(--#{$chip}__actions--c-button--MarginTop);
+    margin-block-end: var(--#{$chip}__actions--c-button--MarginBottom);
+    margin-inline-end: var(--#{$chip}__actions--c-button--MarginRight);
     line-height: 1;
   }
 }

package/components/ClipboardCopy/clipboard-copy.css

@@ -1,38 +1,43 @@
-.pf-v5-c-clipboard-copy {
+:where(:root),
+:where(.pf-v5-c-clipboard-copy) {
   --pf-v5-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
-  --pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
+  --pf-v5-c-clipboard-copy__expandable-content--MarginTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
   --pf-v5-c-clipboard-copy--m-inline--PaddingTop: 0;
   --pf-v5-c-clipboard-copy--m-inline--PaddingBottom: 0;
-  --pf-v5-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-clipboard-copy__text--m-code--FontFamily: var(--pf-v5-global--FontFamily--monospace);
-  --pf-v5-c-clipboard-copy__text--m-code--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
-  --pf-v5-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
+  --pf-v5-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v5-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-t--global--spacer--xs);
 }
+
 .pf-v5-c-clipboard-copy.pf-m-expanded .pf-v5-c-clipboard-copy__toggle-icon {
   transform: rotate(var(--pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate));
 }
 .pf-v5-c-clipboard-copy.pf-m-inline {
   display: inline;
-  padding-top: var(--pf-v5-c-clipboard-copy--m-inline--PaddingTop);
-  padding-bottom: var(--pf-v5-c-clipboard-copy--m-inline--PaddingBottom);
-  padding-left: var(--pf-v5-c-clipboard-copy--m-inline--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-clipboard-copy--m-inline--PaddingTop);
+  padding-block-end: var(--pf-v5-c-clipboard-copy--m-inline--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-clipboard-copy--m-inline--PaddingLeft);
   white-space: nowrap;
   background-color: var(--pf-v5-c-clipboard-copy--m-inline--BackgroundColor);
 }
@@ -42,22 +47,34 @@
 
 .pf-v5-c-clipboard-copy__group {
   display: flex;
+  gap: var(--pf-v5-c-clipboard-copy__group--Gap);
 }
 .pf-v5-c-clipboard-copy__group > * + * {
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 
 .pf-v5-c-clipboard-copy__toggle-icon {
   transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-clipboard-copy__expandable-content {
-  padding: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop) var(--pf-v5-c-clipboard-copy__expandable-content--PaddingRight) var(--pf-v5-c-clipboard-copy__expandable-content--PaddingBottom) var(--pf-v5-c-clipboard-copy__expandable-content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingRight);
+  margin-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--MarginTop);
   word-wrap: break-word;
   background-color: var(--pf-v5-c-clipboard-copy__expandable-content--BackgroundColor);
   background-clip: padding-box;
   border: solid var(--pf-v5-c-clipboard-copy__expandable-content--BorderColor);
-  border-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth) var(--pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth) var(--pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth) var(--pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth);
+  border-block-start-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth);
+  border-inline-start-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth);
+  border-radius: var(--pf-v5-c-clipboard-copy__expandable-content--BorderRadius);
   box-shadow: var(--pf-v5-c-clipboard-copy__expandable-content--BoxShadow);
 }
 .pf-v5-c-clipboard-copy__expandable-content pre {
@@ -78,23 +95,12 @@
 }
 
 .pf-v5-c-clipboard-copy__actions-item {
-  margin-top: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop));
-  margin-bottom: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom));
+  margin-block-start: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop));
+  margin-block-end: calc(-1 * var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom));
 }
 .pf-v5-c-clipboard-copy__actions-item .pf-v5-c-button {
   --pf-v5-c-button--PaddingTop: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingTop);
   --pf-v5-c-button--PaddingRight: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingRight);
   --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom);
   --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy {
-  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__group > * + * {
-  margin-left: 0;
-  border-left: 1px solid var(--pf-v5-global--palette--black-700) !important;
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__expandable-content {
-  border: 0;
 }

package/components/ClipboardCopy/clipboard-copy.scss

@@ -1,41 +1,49 @@
 // @debug $clipboard-copy; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$clipboard-copy} {
+:where(:root),
+:where(.#{$clipboard-copy}) {
   // Toggle icon
   --#{$clipboard-copy}__toggle-icon--Transition: .2s ease-in 0s;
   --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: 90deg;
 
   // Clipboard copy expanded content
-  --#{$clipboard-copy}__expandable-content--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$clipboard-copy}__expandable-content--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$clipboard-copy}__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$clipboard-copy}__expandable-content--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$clipboard-copy}__expandable-content--BorderTopWidth: 0;
-  --#{$clipboard-copy}__expandable-content--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$clipboard-copy}__expandable-content--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$clipboard-copy}__expandable-content--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$clipboard-copy}__expandable-content--BorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$clipboard-copy}__expandable-content--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
+  --#{$clipboard-copy}__expandable-content--MarginTop: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$clipboard-copy}__expandable-content--BorderTopWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderRightWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$clipboard-copy}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$clipboard-copy}__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
+
+  // Group
+  --#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--xs);
 
   // Inline
   --#{$clipboard-copy}--m-inline--PaddingTop: 0; // remove at breaking change
   --#{$clipboard-copy}--m-inline--PaddingBottom: 0; // remove at breaking change
-  --#{$clipboard-copy}--m-inline--PaddingLeft: var(--#{$pf-global}--spacer--xs);
-  --#{$clipboard-copy}--m-inline--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
+  --#{$clipboard-copy}--m-inline--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // Text
-  --#{$clipboard-copy}__text--m-code--FontFamily: var(--#{$pf-global}--FontFamily--monospace);
-  --#{$clipboard-copy}__text--m-code--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$clipboard-copy}__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
+  --#{$clipboard-copy}__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Actions
-  --#{$clipboard-copy}__actions-item--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$clipboard-copy}__actions-item--MarginBottom: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$clipboard-copy}__actions-item--button--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$clipboard-copy}__actions-item--button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$clipboard-copy}__actions-item--button--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$clipboard-copy}__actions-item--button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$clipboard-copy}__actions-item--MarginTop: calc(-1 * var(--pf-t--global--spacer--xs));
+  --#{$clipboard-copy}__actions-item--MarginBottom: calc(-1 * var(--pf-t--global--spacer--xs));
+  --#{$clipboard-copy}__actions-item--button--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--button--PaddingRight: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--button--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--button--PaddingLeft: var(--pf-t--global--spacer--xs);
+}
 
+.#{$clipboard-copy} {
   // Toggle button expanded
   &.pf-m-expanded {
     .#{$clipboard-copy}__toggle-icon {
@@ -45,9 +53,9 @@
 
   &.pf-m-inline {
     display: inline;
-    padding-top: var(--#{$clipboard-copy}--m-inline--PaddingTop);
-    padding-bottom: var(--#{$clipboard-copy}--m-inline--PaddingBottom);
-    padding-left: var(--#{$clipboard-copy}--m-inline--PaddingLeft);
+    padding-block-start: var(--#{$clipboard-copy}--m-inline--PaddingTop);
+    padding-block-end: var(--#{$clipboard-copy}--m-inline--PaddingBottom);
+    padding-inline-start: var(--#{$clipboard-copy}--m-inline--PaddingLeft);
     white-space: nowrap;
     background-color: var(--#{$clipboard-copy}--m-inline--BackgroundColor);
 
@@ -57,25 +65,37 @@
   }
 }
 
+
 .#{$clipboard-copy}__group {
   display: flex;
+  gap: var(--#{$clipboard-copy}__group--Gap);
 
   > * + * {
-    margin-left: -1px;
+    margin-inline-start: -1px;
   }
 }
 
 .#{$clipboard-copy}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$clipboard-copy}__toggle-icon--Transition);
 }
 
 .#{$clipboard-copy}__expandable-content {
-  padding: var(--#{$clipboard-copy}__expandable-content--PaddingTop) var(--#{$clipboard-copy}__expandable-content--PaddingRight) var(--#{$clipboard-copy}__expandable-content--PaddingBottom) var(--#{$clipboard-copy}__expandable-content--PaddingLeft);
+  padding-block-start: var(--#{$clipboard-copy}__expandable-content--PaddingTop);
+  padding-block-end: var(--#{$clipboard-copy}__expandable-content--PaddingBottom);
+  padding-inline-start: var(--#{$clipboard-copy}__expandable-content--PaddingLeft);
+  padding-inline-end: var(--#{$clipboard-copy}__expandable-content--PaddingRight);
+  margin-block-start: var(--#{$clipboard-copy}__expandable-content--MarginTop);
   word-wrap: break-word;
   background-color: var(--#{$clipboard-copy}__expandable-content--BackgroundColor);
   background-clip: padding-box;
   border: solid var(--#{$clipboard-copy}__expandable-content--BorderColor);
-  border-width: var(--#{$clipboard-copy}__expandable-content--BorderTopWidth) var(--#{$clipboard-copy}__expandable-content--BorderRightWidth) var(--#{$clipboard-copy}__expandable-content--BorderBottomWidth) var(--#{$clipboard-copy}__expandable-content--BorderLeftWidth);
+  border-block-start-width: var(--#{$clipboard-copy}__expandable-content--BorderTopWidth);
+  border-block-end-width: var(--#{$clipboard-copy}__expandable-content--BorderBottomWidth);
+  border-inline-start-width: var(--#{$clipboard-copy}__expandable-content--BorderLeftWidth);
+  border-inline-end-width: var(--#{$clipboard-copy}__expandable-content--BorderRightWidth);
+  border-radius: var(--#{$clipboard-copy}__expandable-content--BorderRadius);
   box-shadow: var(--#{$clipboard-copy}__expandable-content--BoxShadow);
 
   pre {
@@ -98,8 +118,8 @@
 }
 
 .#{$clipboard-copy}__actions-item {
-  margin-top: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingTop));
-  margin-bottom: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBottom));
+  margin-block-start: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingTop));
+  margin-block-end: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBottom));
 
   .#{$button} {
     --#{$button}--PaddingTop: var(--#{$clipboard-copy}__actions-item--button--PaddingTop);
@@ -110,8 +130,4 @@
 }
 
 // stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/clipboard-copy";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-clipboard-copy;
-}

package/components/CodeBlock/code-block.css

@@ -1,28 +1,40 @@
+:root, :where(.pf-v5-c-code-block) {
+  --pf-v5-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
+  --pf-v5-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
+}
+
 .pf-v5-c-code-block {
-  --pf-v5-c-code-block--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-block__content--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
-  --pf-v5-c-code-block__pre--FontSize: var(--pf-v5-global--FontSize--sm);
   background-color: var(--pf-v5-c-code-block--BackgroundColor);
+  border-radius: var(--pf-v5-c-code-block--BorderRadius);
 }
 
 .pf-v5-c-code-block__header {
   display: flex;
-  border-bottom: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
+  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
+  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
 }
 
 .pf-v5-c-code-block__actions {
   display: flex;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .pf-v5-c-code-block__content {
-  padding: var(--pf-v5-c-code-block__content--PaddingTop) var(--pf-v5-c-code-block__content--PaddingRight) var(--pf-v5-c-code-block__content--PaddingBottom) var(--pf-v5-c-code-block__content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-code-block__content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-code-block__content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-code-block__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-block__content--PaddingRight);
 }
 
 .pf-v5-c-code-block__pre {

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);
 }