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

package/components/Alert/alert.scss

@@ -1,8 +1,6 @@
-// @debug $alert; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-// TODO create a token for --#{$pf-global}--spacer--form-element ?
-
-:root {
+@include pf-root($alert) {
   // Alert variables
   --#{$alert}--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --#{$alert}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
@@ -14,50 +12,48 @@
   --#{$alert}--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --#{$alert}--BorderColor: transparent;
   --#{$alert}--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --#{$alert}--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$alert}--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$alert}--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$alert}--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$alert}--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$alert}--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$alert}--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$alert}--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$alert}--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Toggle
-  --#{$alert}__toggle--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element) - #{pf-size-prem(1px)});
-  --#{$alert}__toggle--MarginBottom: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$alert}__toggle--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$alert}__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
+  --#{$alert}__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
+  --#{$alert}__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
   // Toggle icon
   --#{$alert}__toggle-icon--Rotate: 0;
-  --#{$alert}__toggle-icon--Transition: var(--#{$pf-global}--Transition);
+  --#{$alert}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$alert}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
 
   // Icon
   --#{$alert}__icon--Color: var(--pf-t--global--icon--color--regular);
-  --#{$alert}__icon--MarginTop: #{pf-size-prem(4px)};
-  --#{$alert}__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$alert}__icon--MarginBlockStart: #{pf-size-prem(4px)};
+  --#{$alert}__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$alert}__icon--FontSize: var(--pf-t--global--icon--size--md);
 
   // Title
-  --#{$alert}__title--FontFamily: var(--pf-t--global--font--family--heading);
-  --#{$alert}__title--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --#{$alert}__title--FontWeight: var(--pf-t--global--font--weight--heading);
-  --#{$alert}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$alert}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$alert}__title--Color: var(--pf-t--global--text--color--regular);
   --#{$alert}__title--max-lines: 1;
 
   // Action
-  --#{$alert}__action--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$alert}__action--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$alert}__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$alert}__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$alert}__action--TranslateY: #{pf-size-prem(2px)};
-  --#{$alert}__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
+  --#{$alert}__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
 
   // Description
-  --#{$alert}__description--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$alert}__description--PaddingBlockStart: var(--pf-t--global--spacer--xs);
 
   // Action group
-  --#{$alert}__action-group--PaddingTop-base: var(--pf-t--global--spacer--xs);
-  --#{$alert}__action-group--PaddingTop: var(--#{$alert}__action-group--PaddingTop-base);
-  --#{$alert}__description--action-group--PaddingTop-base: var(--pf-t--global--spacer--sm);
-  --#{$alert}__description--action-group--PaddingTop: var(--#{$alert}__description--action-group--PaddingTop-base);
-  --#{$alert}__action-group__c-button--not-last-child--MarginRight: var(--pf-t--global--spacer--lg);
+  --#{$alert}__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
+  --#{$alert}__action-group--PaddingBlockStart: var(--#{$alert}__action-group--PaddingBlockStart-base);
+  --#{$alert}__description--action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
+  --#{$alert}__description--action-group--PaddingBlockStart: var(--#{$alert}__description--action-group--PaddingBlockStart-base);
+  --#{$alert}__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
 
   // Custom
   --#{$alert}--m-custom--BorderColor: var(--pf-t--global--border--color--status--custom--default);
@@ -91,10 +87,10 @@
   // Inline plain
   --#{$alert}--m-inline--m-plain--BorderWidth: 0;
   --#{$alert}--m-inline--m-plain--BackgroundColor: transparent;
-  --#{$alert}--m-inline--m-plain--PaddingTop: 0;
-  --#{$alert}--m-inline--m-plain--PaddingRight: 0;
-  --#{$alert}--m-inline--m-plain--PaddingBottom: 0;
-  --#{$alert}--m-inline--m-plain--PaddingLeft: 0;
+  --#{$alert}--m-inline--m-plain--PaddingBlockStart: 0;
+  --#{$alert}--m-inline--m-plain--PaddingInlineEnd: 0;
+  --#{$alert}--m-inline--m-plain--PaddingBlockEnd: 0;
+  --#{$alert}--m-inline--m-plain--PaddingInlineStart: 0;
 
   // Expandable
   --#{$alert}--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
@@ -102,11 +98,11 @@
     "toggle icon title action"
     ". . description description"
     ". . actiongroup actiongroup";
-  --#{$alert}--m-expandable__description--action-group--PaddingTop: var(--#{$alert}__action-group--PaddingTop-base);
+  --#{$alert}--m-expandable__description--action-group--PaddingBlockStart: var(--#{$alert}__action-group--PaddingBlockStart-base);
 
   // Expanded
   --#{$alert}--m-expanded__toggle-icon--Rotate: 90deg;
-  --#{$alert}--m-expanded__description--action-group--PaddingTop: var(--#{$alert}__description--action-group--PaddingTop-base);
+  --#{$alert}--m-expanded__description--action-group--PaddingBlockStart: var(--#{$alert}__description--action-group--PaddingBlockStart-base);
 }
 
 .#{$alert} {
@@ -114,16 +110,16 @@
   display: grid;
   grid-template-areas: var(--#{$alert}--GridTemplateAreas);
   grid-template-columns: var(--#{$alert}--GridTemplateColumns);
-  padding-block-start: var(--#{$alert}--PaddingTop);
-  padding-block-end: var(--#{$alert}--PaddingBottom);
-  padding-inline-start: var(--#{$alert}--PaddingLeft);
-  padding-inline-end: var(--#{$alert}--PaddingRight);
+  padding-block-start: var(--#{$alert}--PaddingBlockStart);
+  padding-block-end: var(--#{$alert}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$alert}--PaddingInlineStart);
+  padding-inline-end: var(--#{$alert}--PaddingInlineEnd);
   font-size: var(--#{$alert}--FontSize);
   background-color: var(--#{$alert}--BackgroundColor);
   border: var(--#{$alert}--BorderWidth) solid var(--#{$alert}--BorderColor);
   border-radius: var(--#{$alert}--BorderRadius);
   box-shadow: var(--#{$alert}--BoxShadow);
-
+  
   &.pf-m-custom {
     --#{$alert}--BorderColor: var(--#{$alert}--m-custom--BorderColor);
     --#{$alert}__icon--Color: var(--#{$alert}--m-custom__icon--Color);
@@ -162,76 +158,73 @@
   &.pf-m-plain {
     --#{$alert}--BorderWidth: var(--#{$alert}--m-inline--m-plain--BorderWidth);
     --#{$alert}--BackgroundColor: var(--#{$alert}--m-inline--m-plain--BackgroundColor);
-    --#{$alert}--PaddingTop: var(--#{$alert}--m-inline--m-plain--PaddingTop);
-    --#{$alert}--PaddingRight: var(--#{$alert}--m-inline--m-plain--PaddingRight);
-    --#{$alert}--PaddingBottom: var(--#{$alert}--m-inline--m-plain--PaddingBottom);
-    --#{$alert}--PaddingLeft: var(--#{$alert}--m-inline--m-plain--PaddingLeft);
+    --#{$alert}--PaddingBlockStart: var(--#{$alert}--m-inline--m-plain--PaddingBlockStart);
+    --#{$alert}--PaddingInlineEnd: var(--#{$alert}--m-inline--m-plain--PaddingInlineEnd);
+    --#{$alert}--PaddingBlockEnd: var(--#{$alert}--m-inline--m-plain--PaddingBlockEnd);
+    --#{$alert}--PaddingInlineStart: var(--#{$alert}--m-inline--m-plain--PaddingInlineStart);
   }
 
   &.pf-m-expandable {
     --#{$alert}--GridTemplateColumns: var(--#{$alert}--m-expandable--GridTemplateColumns);
     --#{$alert}--GridTemplateAreas: var(--#{$alert}--m-expandable--GridTemplateAreas);
-    --#{$alert}__description--action-group--PaddingTop: var(--#{$alert}--m-expandable__description--action-group--PaddingTop);
+    --#{$alert}__description--action-group--PaddingBlockStart: var(--#{$alert}--m-expandable__description--action-group--PaddingBlockStart);
   }
 
   &.pf-m-expanded {
     --#{$alert}__toggle-icon--Rotate: var(--#{$alert}--m-expanded__toggle-icon--Rotate);
-    --#{$alert}__description--action-group--PaddingTop: var(--#{$alert}--m-expanded__description--action-group--PaddingTop);
+    --#{$alert}__description--action-group--PaddingBlockStart: var(--#{$alert}--m-expanded__description--action-group--PaddingBlockStart);
   }
 }
 
 .#{$alert}__toggle {
-  margin-block-start: var(--#{$alert}__toggle--MarginTop);
-  margin-block-end: var(--#{$alert}__toggle--MarginBottom);
-  margin-inline-end: var(--#{$alert}__toggle--MarginRight);
+  margin-block-start: var(--#{$alert}__toggle--MarginBlockStart);
+  margin-block-end: var(--#{$alert}__toggle--MarginBlockEnd);
+  margin-inline-end: var(--#{$alert}__toggle--MarginInlineEnd);
 }
 
 .#{$alert}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
-  
+  @include pf-v6-mirror-inline-on-rtl;
+
   display: inline-block;
-  transition: var(--#{$alert}__toggle-icon--Transition);
+  transition: transform var(--#{$alert}__toggle-icon--TransitionDuration) var(--#{$alert}__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$alert}__toggle-icon--Rotate));
 }
 
 .#{$alert}__icon {
   display: flex;
   grid-area: icon;
-  margin-block-start: var(--#{$alert}__icon--MarginTop);
-  margin-inline-end: var(--#{$alert}__icon--MarginRight);
+  margin-block-start: var(--#{$alert}__icon--MarginBlockStart);
+  margin-inline-end: var(--#{$alert}__icon--MarginInlineEnd);
   font-size: var(--#{$alert}__icon--FontSize);
   color: var(--#{$alert}__icon--Color);
 }
 
 .#{$alert}__title {
   grid-area: title;
-  font-family: var(--#{$alert}__title--FontFamily);
-  font-size: var(--#{$alert}__title--FontSize);
   font-weight: var(--#{$alert}__title--FontWeight);
-  line-height: var(--#{$alert}__title--LineHeight);
   color: var(--#{$alert}__title--Color);
   word-break: break-word;
 
   &.pf-m-truncate {
-    @include pf-v5-line-clamp("var(--#{$alert}__title--max-lines)");
+    @include pf-v6-line-clamp("var(--#{$alert}__title--max-lines)");
   }
 }
 
 .#{$alert}__description {
   grid-area: description;
-  padding-block-start: var(--#{$alert}__description--PaddingTop);
+  padding-block-start: var(--#{$alert}__description--PaddingBlockStart);
   word-break: break-word;
 
   + .#{$alert}__action-group {
-    --#{$alert}__action-group--PaddingTop: var(--#{$alert}__description--action-group--PaddingTop);
+    --#{$alert}__action-group--PaddingBlockStart: var(--#{$alert}__description--action-group--PaddingBlockStart);
   }
 }
 
 .#{$alert}__action {
   grid-area: action;
-  margin-block-start: var(--#{$alert}__action--MarginTop);
-  margin-block-end: var(--#{$alert}__action--MarginBottom);
-  margin-inline-end: var(--#{$alert}__action--MarginRight);
+  margin-block-start: var(--#{$alert}__action--MarginBlockStart);
+  margin-block-end: var(--#{$alert}__action--MarginBlockEnd);
+  margin-inline-end: var(--#{$alert}__action--MarginInlineEnd);
   transform: translateY(var(--#{$alert}__action--TranslateY));
 
   > .#{$button} {
@@ -241,13 +234,11 @@
 
 .#{$alert}__action-group {
   grid-area: actiongroup;
-  padding-block-start: var(--#{$alert}__action-group--PaddingTop);
+  padding-block-start: var(--#{$alert}__action-group--PaddingBlockStart);
 
   > .#{$button} {
-    --#{$button}--m-link--m-inline--hover--TextDecoration: none;
-
     &:not(:last-child) {
-      margin-inline-end: var(--#{$alert}__action-group__c-button--not-last-child--MarginRight);
+      margin-inline-end: var(--#{$alert}__action-group__c-button--not-last-child--MarginInlineEnd);
     }
   }
 }

package/components/Avatar/avatar.css

@@ -1,4 +1,5 @@
-:root, .pf-v6-c-avatar {
+:root,
+.pf-v6-c-avatar {
   --pf-v6-c-avatar--BorderColor: transparent;
   --pf-v6-c-avatar--BorderWidth: 0;
   --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -30,52 +31,52 @@
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width);
   --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-xl, var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-sm {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-2xl, var(--pf-v6-c-avatar--m-sm--Height-on-xl, var(--pf-v6-c-avatar--m-sm--Height-on-lg, var(--pf-v6-c-avatar--m-sm--Height-on-md, var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height))))));
   }
@@ -84,52 +85,52 @@
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width);
   --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-2xl, var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-lg, var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-xl, var(--pf-v6-c-avatar--m-md--Height-on-lg, var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-md {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-2xl, var(--pf-v6-c-avatar--m-md--Height-on-xl, var(--pf-v6-c-avatar--m-md--Height-on-lg, var(--pf-v6-c-avatar--m-md--Height-on-md, var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height))))));
   }
@@ -138,52 +139,52 @@
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width);
   --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-2xl, var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-lg, var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-xl, var(--pf-v6-c-avatar--m-lg--Height-on-lg, var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-lg {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-2xl, var(--pf-v6-c-avatar--m-lg--Height-on-xl, var(--pf-v6-c-avatar--m-lg--Height-on-lg, var(--pf-v6-c-avatar--m-lg--Height-on-md, var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height))))));
   }
@@ -192,52 +193,52 @@
   --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width);
   --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-2xl, var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))))));
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 36rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height));
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height)));
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))));
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height)))));
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-avatar.pf-m-xl {
     --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
   }

package/components/Avatar/avatar.scss

@@ -1,8 +1,9 @@
-// @debug $avatar; // check your variable names located in src/patternfly/sass-utilities/component-namespaces
-$pf-v5-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
-$pf-v5-c-avatar--sizes: "sm", "md", "lg", "xl";
+@use '../../sass-utilities' as *;
 
-:root, .#{$avatar} {
+$pf-v6-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
+
+@include pf-root($avatar) {
   --#{$avatar}--BorderColor: transparent;
   --#{$avatar}--BorderWidth: 0;
   --#{$avatar}--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -33,10 +34,10 @@ $pf-v5-c-avatar--sizes: "sm", "md", "lg", "xl";
     --#{$avatar}--BorderWidth: var(--#{$avatar}--m-bordered--BorderWidth);
   }
 
-  @each $size in $pf-v5-c-avatar--sizes {
+  @each $size in $pf-v6-c-avatar--sizes {
     &.pf-m-#{$size} {
-      @include pf-v5-build-css-variable-stack("--#{$avatar}--Width", "--#{$avatar}--m-#{$size}--Width", $pf-v5-c-avatar--breakpoint-map);
-      @include pf-v5-build-css-variable-stack("--#{$avatar}--Height", "--#{$avatar}--m-#{$size}--Height", $pf-v5-c-avatar--breakpoint-map);
+      @include pf-v6-build-css-variable-stack("--#{$avatar}--Width", "--#{$avatar}--m-#{$size}--Width", $pf-v6-c-avatar--breakpoint-map);
+      @include pf-v6-build-css-variable-stack("--#{$avatar}--Height", "--#{$avatar}--m-#{$size}--Height", $pf-v6-c-avatar--breakpoint-map);
     }
   }
 }

package/components/BackToTop/back-to-top.css

@@ -1,33 +1,35 @@
-:root {
-  --pf-v6-c-back-to-top--Right: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-back-to-top--Bottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-back-to-top--md--Bottom: var(--pf-t--global--spacer--2xl);
+:root,
+.pf-v6-c-back-to-top {
+  --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-back-to-top--md--InsetBlockEnd: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-back-to-top--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-back-to-top--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-back-to-top--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-back-to-top--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-back-to-top--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-back-to-top--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-back-to-top--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-back-to-top--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-back-to-top--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 }
-@media (min-width: 768px) {
-  :root {
-    --pf-v6-c-back-to-top--Bottom: var(--pf-v6-c-back-to-top--md--Bottom);
+@media (min-width: 48rem) {
+  :root,
+  .pf-v6-c-back-to-top {
+    --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-v6-c-back-to-top--md--InsetBlockEnd);
   }
 }
 
 .pf-v6-c-back-to-top {
   position: absolute;
-  inset-block-end: var(--pf-v6-c-back-to-top--Bottom);
-  inset-inline-end: var(--pf-v6-c-back-to-top--Right);
+  inset-block-end: var(--pf-v6-c-back-to-top--InsetBlockEnd);
+  inset-inline-end: var(--pf-v6-c-back-to-top--InsetInlineEnd);
 }
 .pf-v6-c-back-to-top.pf-m-hidden {
   display: none;
 }
 .pf-v6-c-back-to-top .pf-v6-c-button {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-back-to-top--c-button--FontSize);
-  --pf-v6-c-button--PaddingTop: var(--pf-v6-c-back-to-top--c-button--PaddingTop);
-  --pf-v6-c-button--PaddingRight: var(--pf-v6-c-back-to-top--c-button--PaddingRight);
-  --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-back-to-top--c-button--PaddingBottom);
-  --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-back-to-top--c-button--PaddingLeft);
+  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-back-to-top--c-button--PaddingBlockStart);
+  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-back-to-top--c-button--PaddingInlineEnd);
+  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-back-to-top--c-button--PaddingBlockEnd);
+  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-back-to-top--c-button--PaddingInlineStart);
   box-shadow: var(--pf-v6-c-back-to-top--c-button--BoxShadow);
 }

package/components/BackToTop/back-to-top.scss

@@ -1,25 +1,25 @@
-// @debug $back-to-top; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
-  --#{$back-to-top}--Right: var(--pf-t--global--spacer--2xl);
-  --#{$back-to-top}--Bottom: var(--pf-t--global--spacer--lg);
-  --#{$back-to-top}--md--Bottom: var(--pf-t--global--spacer--2xl);
+@include pf-root($back-to-top) {
+  --#{$back-to-top}--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
+  --#{$back-to-top}--InsetBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$back-to-top}--md--InsetBlockEnd: var(--pf-t--global--spacer--2xl);
   --#{$back-to-top}--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
-  --#{$back-to-top}--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$back-to-top}--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$back-to-top}--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --#{$back-to-top}--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$back-to-top}--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$back-to-top}--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$back-to-top}--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$back-to-top}--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$back-to-top}--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
-    --#{$back-to-top}--Bottom: var(--#{$back-to-top}--md--Bottom);
+  @media (min-width: $pf-v6-global--breakpoint--md) {
+    --#{$back-to-top}--InsetBlockEnd: var(--#{$back-to-top}--md--InsetBlockEnd);
   }
 }
 
 .#{$back-to-top} {
   position: absolute;
-  inset-block-end: var(--#{$back-to-top}--Bottom);
-  inset-inline-end: var(--#{$back-to-top}--Right);
+  inset-block-end: var(--#{$back-to-top}--InsetBlockEnd);
+  inset-inline-end: var(--#{$back-to-top}--InsetInlineEnd);
 
   &.pf-m-hidden {
     display: none;
@@ -27,10 +27,10 @@
 
   .#{$button} {
     --#{$button}--FontSize: var(--#{$back-to-top}--c-button--FontSize);
-    --#{$button}--PaddingTop: var(--#{$back-to-top}--c-button--PaddingTop);
-    --#{$button}--PaddingRight: var(--#{$back-to-top}--c-button--PaddingRight);
-    --#{$button}--PaddingBottom: var(--#{$back-to-top}--c-button--PaddingBottom);
-    --#{$button}--PaddingLeft: var(--#{$back-to-top}--c-button--PaddingLeft);
+    --#{$button}--PaddingBlockStart: var(--#{$back-to-top}--c-button--PaddingBlockStart);
+    --#{$button}--PaddingInlineEnd: var(--#{$back-to-top}--c-button--PaddingInlineEnd);
+    --#{$button}--PaddingBlockEnd: var(--#{$back-to-top}--c-button--PaddingBlockEnd);
+    --#{$button}--PaddingInlineStart: var(--#{$back-to-top}--c-button--PaddingInlineStart);
 
     box-shadow: var(--#{$back-to-top}--c-button--BoxShadow);
   }

package/components/Backdrop/backdrop.css

@@ -1,7 +1,7 @@
 :root,
 .pf-v6-c-backdrop {
   --pf-v6-c-backdrop--Position: fixed;
-  --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--Zindex--lg);
+  --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
   --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
 }