@patternfly/patternfly 6.5.2 → 6.6.0-prerelease.10

package/base/tokens/tokens-highcontrast.scss

@@ -1,12 +1,12 @@
 
 // Do not edit directly
-// Generated on Fri, 15 May 2026 17:53:36 GMT
+// Generated on Mon, 01 Jun 2026 21:26:11 GMT
 
 @mixin pf-v6-tokens {
-  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
-  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
-  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
-  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
+  --pf-t--global--background--color--600: rgb(199, 199, 199, 0.2500);
+  --pf-t--global--background--color--700: rgb(199, 199, 199, 0.1000);
+  --pf-t--global--background--color--action--plain--default: rgb(255, 255, 255, 0.0000);
   --pf-t--global--background--filter--glass--blur--primary: initial;
   --pf-t--global--border--radius--0: 0px;
   --pf-t--global--border--radius--100: 4px;
@@ -40,8 +40,8 @@
   --pf-t--global--box-shadow--blur--100: 6px;
   --pf-t--global--box-shadow--blur--200: 10px;
   --pf-t--global--box-shadow--blur--300: 20px;
-  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
-  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+  --pf-t--global--box-shadow--color--100: rgb(41, 41, 41, 0.1500);
+  --pf-t--global--box-shadow--color--200: rgb(41, 41, 41, 0.2000);
   --pf-t--global--box-shadow--spread--100: 0px;
   --pf-t--global--box-shadow--spread--200: -4px;
   --pf-t--global--box-shadow--spread--300: -8px;

package/base/tokens/tokens-palette.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 15 May 2026 17:53:36 GMT
+// Generated on Mon, 01 Jun 2026 21:26:11 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--color--black: #000000;

package/base/tokens/tokens-redhat-highcontrast.scss

@@ -3,10 +3,10 @@
 // Generated on Mon, 04 May 2026 19:53:21 GMT
 
 @mixin pf-v6-tokens {
-  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
-  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
-  --pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
-  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
+  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
+  --pf-t--global--background--color--600: rgb(199, 199, 199, 0.2500);
+  --pf-t--global--background--color--700: rgb(199, 199, 199, 0.1000);
+  --pf-t--global--background--color--action--plain--default: rgb(255, 255, 255, 0.0000);
   --pf-t--global--background--filter--glass--blur--primary: blur(0px);
   --pf-t--global--border--radius--0: 0px;
   --pf-t--global--border--radius--100: 4px;
@@ -40,8 +40,8 @@
   --pf-t--global--box-shadow--blur--100: 6px;
   --pf-t--global--box-shadow--blur--200: 10px;
   --pf-t--global--box-shadow--blur--300: 20px;
-  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
-  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
+  --pf-t--global--box-shadow--color--100: rgb(41, 41, 41, 0.1500);
+  --pf-t--global--box-shadow--color--200: rgb(41, 41, 41, 0.2000);
   --pf-t--global--box-shadow--spread--100: 0px;
   --pf-t--global--box-shadow--spread--200: -4px;
   --pf-t--global--box-shadow--spread--300: -8px;

package/components/AboutModalBox/about-modal-box.css

@@ -164,7 +164,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  word-break: break-word;
+  overflow-wrap: break-word;
   -webkit-overflow-scrolling: touch;
 }
 @media screen and (min-width: 36rem) {

package/components/AboutModalBox/about-modal-box.scss

@@ -176,7 +176,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  word-break: break-word;
+  overflow-wrap: break-word;
   -webkit-overflow-scrolling: touch;
 
   @media screen and (min-width: $pf-v6-global--breakpoint--sm) {

package/components/Accordion/accordion.css

@@ -39,7 +39,9 @@
   --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
   --pf-v6-c-accordion__expandable-content--MaxHeight: 0;
   --pf-v6-c-accordion__expandable-content--Visibility: hidden;
+  --pf-v6-c-accordion__expandable-content--Overflow: hidden;
   --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible;
+  --pf-v6-c-accordion__item--m-expanded__expandable-content--Overflow: visible;
   --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px;
   --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
@@ -172,6 +174,7 @@
   --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
   --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
   --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth);
+  --pf-v6-c-accordion__expandable-content--Overflow: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Overflow);
 }
 
 .pf-v6-c-accordion__toggle {
@@ -219,8 +222,8 @@
 }
 
 .pf-v6-c-accordion__toggle-icon {
-  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
   transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
+  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
 }
 
 .pf-v6-c-accordion__expandable-content:where([hidden]) {
@@ -228,26 +231,27 @@
 }
 
 .pf-v6-c-accordion__expandable-content {
+  visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
   max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight);
   margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
+  overflow-y: var(--pf-v6-c-accordion__expandable-content--Overflow);
   font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
   color: var(--pf-v6-c-accordion__expandable-content--Color);
-  visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
   border: var(--pf-v6-c-accordion__expandable-content--BorderWidth) solid var(--pf-v6-c-accordion__expandable-content--BorderColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
+  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
   transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
   transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
   transition-property: opacity, translate, visibility, max-height, margin-block-end;
-  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
 }
 .pf-v6-c-accordion__expandable-content.pf-m-fixed {
+  --pf-v6-c-accordion__expandable-content--Overflow: auto;
   max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base);
-  overflow-y: auto;
 }
 
 .pf-v6-c-accordion__expandable-content-body {

package/components/Accordion/accordion.scss

@@ -55,7 +55,9 @@
   --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
   --#{$accordion}__expandable-content--MaxHeight: 0;
   --#{$accordion}__expandable-content--Visibility: hidden;
+  --#{$accordion}__expandable-content--Overflow: hidden;
   --#{$accordion}__item--m-expanded__expandable-content--Visibility: visible;
+  --#{$accordion}__item--m-expanded__expandable-content--Overflow: visible;
   --#{$accordion}__item--m-expanded__expandable-content--MaxHeight: 99999px;
   --#{$accordion}__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
 
@@ -204,6 +206,7 @@
     --#{$accordion}__expandable-content--TransitionDuration--fade: 0s;
     --#{$accordion}__expandable-content--m-fixed--MaxHeight--base: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
     --#{$accordion}__expandable-content--BorderWidth: var(--#{$accordion}__item--m-expanded__expandable-content--BorderWidth);
+    --#{$accordion}__expandable-content--Overflow: var(--#{$accordion}__item--m-expanded__expandable-content--Overflow);
   }
 }
 
@@ -251,8 +254,8 @@
 .#{$accordion}__toggle-icon {
   @include pf-v6-mirror-inline-on-rtl;
 
-  transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
   transform: rotate(var(--#{$accordion}__toggle-icon--Rotate));
+  transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
 }
 
 .#{$accordion}__expandable-content:where([hidden]) {
@@ -260,26 +263,28 @@
 }
 
 .#{$accordion}__expandable-content {
+  visibility:  var(--#{$accordion}__expandable-content--Visibility);
   max-height:  var(--#{$accordion}__expandable-content--MaxHeight);
   margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
   margin-inline-start: var(--#{$accordion}__expandable-content--MarginInlineStart);
   margin-inline-end: var(--#{$accordion}__expandable-content--MarginInlineEnd);
+  overflow-y: var(--#{$accordion}__expandable-content--Overflow);
   font-size: var(--#{$accordion}__expandable-content--FontSize);
   color: var(--#{$accordion}__expandable-content--Color);
-  visibility:  var(--#{$accordion}__expandable-content--Visibility);
   background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
   border: var(--#{$accordion}__expandable-content--BorderWidth) solid var(--#{$accordion}__expandable-content--BorderColor);
   border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
   opacity: var(--#{$accordion}__expandable-content--Opacity);
+  translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
   transition-delay: 0s, 0s, var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade);
   transition-timing-function: var(--#{$accordion}__expandable-content--TransitionTimingFunction);
   transition-duration: var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
   transition-property: opacity, translate, visibility, max-height, margin-block-end;
-  translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
 
   &.pf-m-fixed {
+    --#{$accordion}__expandable-content--Overflow: auto;
+
     max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight--base);
-    overflow-y: auto;
   }
 }
 

package/components/Alert/alert-group.css

@@ -127,8 +127,8 @@
   display: grid;
   grid-template-rows: 1fr;
   opacity: 1;
-  transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
   transform: translateX(0) translateY(0);
+  transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-alert-group__item {

package/components/Alert/alert-group.scss

@@ -164,13 +164,13 @@
   display: grid;
   grid-template-rows: 1fr;
   opacity: 1;
+  transform: translateX(0) translateY(0);
 
   // This transition will happen when the item is added (.pf-m-offstage-top is removed)
   // Reduced motion by default
   // transparency change only
   transition: 
     opacity var(--#{$alert-group}--m-toast__item--Transition--opacity--default);
-  transform: translateX(0) translateY(0);
 
   // This transition will happen when the item is added (.pf-m-offstage-top is removed)
   // give it height, then slide it down into place

package/components/Alert/alert.css

@@ -146,12 +146,13 @@
 
 .pf-v6-c-alert__toggle-icon {
   display: inline-block;
-  transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
+  transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
 }
 
 .pf-v6-c-alert__icon {
   grid-area: icon;
+  align-self: baseline;
   margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
   font-size: var(--pf-v6-c-alert__icon--FontSize);
   color: var(--pf-v6-c-alert__icon--Color);
@@ -162,7 +163,7 @@
   grid-area: title;
   font-weight: var(--pf-v6-c-alert__title--FontWeight);
   color: var(--pf-v6-c-alert__title--Color);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .pf-v6-c-alert__title.pf-m-truncate {
   display: -webkit-box;
@@ -174,7 +175,7 @@
 .pf-v6-c-alert__description {
   grid-area: description;
   padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .pf-v6-c-alert__description + .pf-v6-c-alert__action-group {
   --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart);

package/components/Alert/alert.scss

@@ -188,12 +188,13 @@
   @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
-  transition: transform var(--#{$alert}__toggle-icon--TransitionDuration) var(--#{$alert}__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$alert}__toggle-icon--Rotate));
+  transition: transform var(--#{$alert}__toggle-icon--TransitionDuration) var(--#{$alert}__toggle-icon--TransitionTimingFunction);
 }
 
 .#{$alert}__icon {
   grid-area: icon;
+  align-self: baseline;
   margin-inline-end: var(--#{$alert}__icon--MarginInlineEnd);
   font-size: var(--#{$alert}__icon--FontSize);
   color: var(--#{$alert}__icon--Color);
@@ -204,7 +205,7 @@
   grid-area: title;
   font-weight: var(--#{$alert}__title--FontWeight);
   color: var(--#{$alert}__title--Color);
-  word-break: break-word;
+  overflow-wrap: break-word;
 
   &.pf-m-truncate {
     @include pf-v6-line-clamp("var(--#{$alert}__title--max-lines)");
@@ -214,7 +215,7 @@
 .#{$alert}__description {
   grid-area: description;
   padding-block-start: var(--#{$alert}__description--PaddingBlockStart);
-  word-break: break-word;
+  overflow-wrap: break-word;
 
   + .#{$alert}__action-group {
     --#{$alert}__action-group--PaddingBlockStart: var(--#{$alert}__description--action-group--PaddingBlockStart);

package/components/Avatar/avatar.css

@@ -4,24 +4,87 @@
   --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-avatar--Width: 2.25rem;
   --pf-v6-c-avatar--Height: 2.25rem;
+  --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414);
   --pf-v6-c-avatar--m-sm--Width: 1.5rem;
   --pf-v6-c-avatar--m-sm--Height: 1.5rem;
+  --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
   --pf-v6-c-avatar--m-md--Width: 2.25rem;
   --pf-v6-c-avatar--m-md--Height: 2.25rem;
+  --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
   --pf-v6-c-avatar--m-lg--Width: 4.5rem;
   --pf-v6-c-avatar--m-lg--Height: 4.5rem;
+  --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
   --pf-v6-c-avatar--m-xl--Width: 8rem;
   --pf-v6-c-avatar--m-xl--Height: 8rem;
+  --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
   --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
+  --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
+  --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
+  --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
+  --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
+  --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
+  --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
+  --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+  --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
+  --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
+  --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
+  --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+  --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
+  --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
+  --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
+  --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
+  --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
+  --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
+  --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
+  --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+  --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+  --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
 
 .pf-v6-c-avatar {
   width: var(--pf-v6-c-avatar--Width);
   height: var(--pf-v6-c-avatar--Height);
+  font-size: var(--pf-v6-c-avatar--FontSize);
+  color: var(--pf-v6-c-avatar--Color, inherit);
+  background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
   border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
   border-radius: var(--pf-v6-c-avatar--BorderRadius);
 }
+div.pf-v6-c-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: clip;
+  vertical-align: middle;
+}
+
 .pf-v6-c-avatar.pf-m-bordered {
   --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
   --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -249,4 +312,85 @@
   .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))))));
   }
+}
+.pf-v6-c-avatar.pf-m-sm {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
+}
+.pf-v6-c-avatar.pf-m-lg {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
+  --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
+}
+.pf-v6-c-avatar.pf-m-xl {
+  --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
+  --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
+  --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
+  --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
+}
+.pf-v6-c-avatar.pf-m-colorful {
+  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
+}
+.pf-v6-c-avatar.pf-m-red {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-orangered {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-orange {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-yellow {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-green {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-teal {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-blue {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-purple {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
+}
+.pf-v6-c-avatar.pf-m-gray {
+  --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
+  --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color);
+  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
+  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
+}
+
+.pf-v6-c-avatar__initials {
+  font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
+  font-size: var(--pf-v6-c-avatar__initials--FontSize);
+  font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
+  color: var(--pf-v6-c-avatar__initials--Color);
 }