@patternfly/patternfly 5.0.0-alpha.51 → 5.0.0-alpha.52

package/base/patternfly-variables.css

@@ -198,8 +198,8 @@
   --pf-v5-global--BorderRadius--lg: 30em;
   --pf-v5-global--icon--Color--light: #6a6e73;
   --pf-v5-global--icon--Color--dark: #151515;
-  --pf-v5-global--icon--FontSize--sm: 0.625rem;
-  --pf-v5-global--icon--FontSize--md: 1.125rem;
+  --pf-v5-global--icon--FontSize--sm: 0.75rem;
+  --pf-v5-global--icon--FontSize--md: 1rem;
   --pf-v5-global--icon--FontSize--lg: 1.5rem;
   --pf-v5-global--icon--FontSize--xl: 3.375rem;
   --pf-v5-global--FontFamily--sans-serif: "RedHatText", helvetica, arial, sans-serif;

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

@@ -10,7 +10,6 @@
 
 .pf-v5-c-about-modal-box {
   --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
-  --pf-v5-c-about-modal-box--BackgroundImage: url("../../assets/images/pfbg-icon.svg");
   --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
   --pf-v5-c-about-modal-box--BackgroundSize--min-width: 200px;
   --pf-v5-c-about-modal-box--BackgroundSize--width: 60%;
@@ -41,9 +40,6 @@
   --pf-v5-c-about-modal-box__close--c-button--Height: calc(var(--pf-v5-c-about-modal-box__close--c-button--FontSize) * 2);
   --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   --pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor: rgba(3, 3, 3, 0.4);
-  --pf-v5-c-about-modal-box__hero--sm--BackgroundImage: url("../../assets/images/pfbg_992@2x.jpg");
-  --pf-v5-c-about-modal-box__hero--sm--BackgroundPosition: top left;
-  --pf-v5-c-about-modal-box__hero--sm--BackgroundSize: cover;
   --pf-v5-c-about-modal-box__brand-image--Height: 2.5rem;
   --pf-v5-c-about-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--xl);
   --pf-v5-c-about-modal-box__header--PaddingBottom: var(--pf-v5-global--spacer--sm);
@@ -71,7 +67,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--pf-v5-c-about-modal-box--BackgroundColor);
-  background-image: var(--pf-v5-c-about-modal-box--BackgroundImage);
+  background-image: var(--pf-v5-c-about-modal-box--BackgroundImage, none);
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
@@ -208,21 +204,6 @@
   --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor);
 }
 
-.pf-v5-c-about-modal-box__hero {
-  display: none;
-}
-@media only screen and (min-width: 576px) {
-  .pf-v5-c-about-modal-box__hero {
-    display: block;
-    grid-area: hero;
-    background-image: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundImage);
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundPosition);
-    background-size: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundSize);
-  }
-}
-
 :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;

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

@@ -3,7 +3,6 @@
 .#{$about-modal-box} {
   // Component variables
   --#{$about-modal-box}--BackgroundColor: var(--#{$pf-global}--palette--black-1000); // Modal uses a non-standard background color
-  --#{$about-modal-box}--BackgroundImage: url("#{$pf-v5-global--image-path}/pfbg-icon.svg");
   --#{$about-modal-box}--BackgroundPosition: bottom right;
   --#{$about-modal-box}--BackgroundSize--min-width: 200px;
   --#{$about-modal-box}--BackgroundSize--width: 60%;
@@ -55,11 +54,6 @@
   --#{$about-modal-box}__close--c-button--BackgroundColor: var(--#{$pf-global}--palette--black-1000); // Close button uses a non-standard background color
   --#{$about-modal-box}__close--c-button--hover--BackgroundColor: #{rgba($pf-v5-color-black-1000, .4)};
 
-  // hero image
-  --#{$about-modal-box}__hero--sm--BackgroundImage: url("#{$pf-v5-global--image-path}/pfbg_992@2x.jpg");
-  --#{$about-modal-box}__hero--sm--BackgroundPosition: top left;
-  --#{$about-modal-box}__hero--sm--BackgroundSize: cover;
-
   // Brand img
   --#{$about-modal-box}__brand-image--Height: #{pf-size-prem(40px)};
 
@@ -116,7 +110,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--#{$about-modal-box}--BackgroundColor); // Because this component is always dark, set the background color
-  background-image: var(--#{$about-modal-box}--BackgroundImage);
+  background-image: var(--#{$about-modal-box}--BackgroundImage, none);
   background-repeat: no-repeat;
   background-position: var(--#{$about-modal-box}--BackgroundPosition);
   background-size: var(--#{$about-modal-box}--BackgroundSize);
@@ -198,11 +192,11 @@
 
   @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
     grid-area: 1 / 2;
-    justify-content: center; // center the close over the narrow hero image
+    justify-content: center;
   }
 
   @media only screen and (min-width: $pf-v5-global--breakpoint--lg) {
-    justify-content: flex-end; // align flex end the close over the narrow hero image
+    justify-content: flex-end;
   }
 
   // Close button
@@ -225,21 +219,6 @@
   }
 }
 
-// Hero
-.#{$about-modal-box}__hero {
-  display: none; // Don't display the hero at the narrowest breakpoint
-
-  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
-    display: block;
-    grid-area: hero;
-    background-image: var(--#{$about-modal-box}__hero--sm--BackgroundImage);
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: var(--#{$about-modal-box}__hero--sm--BackgroundPosition);
-    background-size: var(--#{$about-modal-box}__hero--sm--BackgroundSize);
-  }
-}
-
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/about-modal-box";
 

package/components/BackgroundImage/background-image.css

@@ -1,6 +1,5 @@
 .pf-v5-c-background-image {
   --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-background-image--BackgroundImage: url("../../assets/images/pfbg-icon.svg");
   --pf-v5-c-background-image--BackgroundPosition: bottom right;
   --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
   --pf-v5-c-background-image--BackgroundSize--width: 60%;
@@ -13,7 +12,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--pf-v5-c-background-image--BackgroundColor);
-  background-image: var(--pf-v5-c-background-image--BackgroundImage);
+  background-image: var(--pf-v5-c-background-image--BackgroundImage, none);
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-background-image--BackgroundPosition);
   background-size: var(--pf-v5-c-background-image--BackgroundSize);

package/components/BackgroundImage/background-image.scss

@@ -2,7 +2,6 @@
 
 .#{$background-image} {
   --#{$background-image}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
-  --#{$background-image}--BackgroundImage: url("#{$pf-v5-global--image-path}/pfbg-icon.svg");
   --#{$background-image}--BackgroundPosition: bottom right;
   --#{$background-image}--BackgroundSize--min-width: 200px;
   --#{$background-image}--BackgroundSize--width: 60%;
@@ -16,7 +15,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--#{$background-image}--BackgroundColor);
-  background-image: var(--#{$background-image}--BackgroundImage);
+  background-image: var(--#{$background-image}--BackgroundImage, none);
   background-repeat: no-repeat;
   background-position: var(--#{$background-image}--BackgroundPosition);
   background-size: var(--#{$background-image}--BackgroundSize);

package/components/FormControl/form-control.css

@@ -122,13 +122,6 @@
   --pf-v5-c-form-control--textarea--success--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
   --pf-v5-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
   --pf-v5-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
-  --pf-v5-c-form-control--m-icon-sprite--success--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#success");
-  --pf-v5-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#warning");
-  --pf-v5-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#invalid");
-  --pf-v5-c-form-control--m-icon-sprite__select--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#select");
-  --pf-v5-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#search");
-  --pf-v5-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#calendar");
-  --pf-v5-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#clock");
   --pf-v5-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-v5-c-form-control--FontSize);
   --pf-v5-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-v5-global--spacer--md) + 7px);
   --pf-v5-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-v5-global--spacer--md) + 1px - var(--pf-v5-global--spacer--lg));

package/components/FormControl/form-control.scss

@@ -191,13 +191,13 @@ $pf-v5-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 2
   --#{$form-control}--textarea--invalid--BackgroundPositionY: var(--#{$form-control}--PaddingLeft); // update to use --#{$form-control}--inset--base at breaking change
 
   // Icon sprite
-  --#{$form-control}--m-icon-sprite--success--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#success");
-  --#{$form-control}--m-icon-sprite--m-warning--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#warning");
-  --#{$form-control}--m-icon-sprite--invalid--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#invalid");
-  --#{$form-control}--m-icon-sprite__select--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#select");
-  --#{$form-control}--m-icon-sprite--m-search--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#search");
-  --#{$form-control}--m-icon-sprite--m-calendar--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#calendar");
-  --#{$form-control}--m-icon-sprite--m-clock--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#clock");
+  // --#{$form-control}--m-icon-sprite--success--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#success");
+  // --#{$form-control}--m-icon-sprite--m-warning--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#warning");
+  // --#{$form-control}--m-icon-sprite--invalid--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#invalid");
+  // --#{$form-control}--m-icon-sprite__select--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#select");
+  // --#{$form-control}--m-icon-sprite--m-search--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#search");
+  // --#{$form-control}--m-icon-sprite--m-calendar--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#calendar");
+  // --#{$form-control}--m-icon-sprite--m-clock--BackgroundUrl: url("#{$pf-v5-global--image-path}/status-icon-sprite.svg#clock");
   --#{$form-control}--m-icon-sprite__select--BackgroundSize: var(--#{$form-control}--FontSize);
   --#{$form-control}--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--#{$pf-global}--spacer--md) + 7px);
   --#{$form-control}--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--#{$pf-global}--spacer--md) + 1px - var(--#{$pf-global}--spacer--lg));

package/components/Icon/icon.css

@@ -1,29 +1,30 @@
 .pf-v5-c-icon {
-  --pf-v5-c-icon--Width: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-icon--Height: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-icon--m-inline--Width: 1em;
-  --pf-v5-c-icon--m-inline--Height: 1em;
+  --pf-v5-c-icon--Width: 1em;
+  --pf-v5-c-icon--Height: 1em;
   --pf-v5-c-icon--m-sm--Width: var(--pf-v5-global--icon--FontSize--sm);
-  --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
-  --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
   --pf-v5-c-icon--m-sm--Height: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
   --pf-v5-c-icon--m-md--Height: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
   --pf-v5-c-icon--m-lg--Height: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
   --pf-v5-c-icon--m-xl--Height: var(--pf-v5-global--icon--FontSize--xl);
-  --pf-v5-c-icon__content--Color: var(--pf-v5-global--icon--Color--dark);
+  --pf-v5-c-icon--m-inline--Width: 1em;
+  --pf-v5-c-icon--m-inline--Height: 1em;
+  --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
+  --pf-v5-c-icon__content--Color: initial;
   --pf-v5-c-icon__content--m-danger--Color: var(--pf-v5-global--danger-color--100);
   --pf-v5-c-icon__content--m-warning--Color: var(--pf-v5-global--warning-color--100);
   --pf-v5-c-icon__content--m-success--Color: var(--pf-v5-global--success-color--100);
   --pf-v5-c-icon__content--m-info--Color: var(--pf-v5-global--info-color--100);
   --pf-v5-c-icon__content--m-custom--Color: var(--pf-v5-global--custom-color--100);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-icon--m-inline__content--Color: initial;
+  --pf-v5-c-icon__content--FontSize: 1em;
+  --pf-v5-c-icon--m-sm__content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-icon--m-md__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-icon--m-lg__content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-icon--m-xl__content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
   --pf-v5-c-icon--m-inline__content--FontSize: 1em;
-  --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
-  --pf-v5-c-icon--m-sm--content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
-  --pf-v5-c-icon--m-md--content--FontSize: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-icon--m-lg--content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
-  --pf-v5-c-icon--m-xl--content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -35,7 +36,7 @@
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-inline--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-inline--Height);
   --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-inline__content--FontSize);
-  --pf-v5-c-icon__content--Color: currentcolor;
+  --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon--m-inline__content--Color);
   line-height: 1;
 }
 .pf-v5-c-icon.pf-m-inline .pf-v5-c-spinner {
@@ -44,22 +45,22 @@
 .pf-v5-c-icon.pf-m-sm {
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-sm--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-sm--Height);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
 }
 .pf-v5-c-icon.pf-m-md {
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-md--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-md--Height);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
 }
 .pf-v5-c-icon.pf-m-lg {
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-lg--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-lg--Height);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
 }
 .pf-v5-c-icon.pf-m-xl {
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-xl--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-xl--Height);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
 }
 .pf-v5-c-icon.pf-m-in-progress {
   --pf-v5-c-icon__content--Opacity: 0;
@@ -76,23 +77,23 @@
 }
 .pf-v5-c-icon__content.pf-m-sm,
 .pf-v5-c-icon__progress.pf-m-sm {
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
 }
 .pf-v5-c-icon__content.pf-m-md,
 .pf-v5-c-icon__progress.pf-m-md {
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
 }
 .pf-v5-c-icon__content.pf-m-lg,
 .pf-v5-c-icon__progress.pf-m-lg {
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
 }
 .pf-v5-c-icon__content.pf-m-xl,
 .pf-v5-c-icon__progress.pf-m-xl {
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
 }
 
 .pf-v5-c-icon__content {
-  color: var(--pf-v5-c-icon__content--Color);
+  color: var(--pf-v5-c-icon__content--Color, inherit);
   opacity: var(--pf-v5-c-icon__content--Opacity, 1);
 }
 .pf-v5-c-icon__content.pf-m-danger {

package/components/Icon/icon.scss

@@ -1,40 +1,39 @@
 // @debug $icon; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
 .#{$icon} {
-  // Size
-  --#{$icon}--Width: var(--#{$pf-global}--icon--FontSize--md);
-  --#{$icon}--Height: var(--#{$pf-global}--icon--FontSize--md);
-
-  // When inline, use the parent's size
-  --#{$icon}--m-inline--Width: 1em;
-  --#{$icon}--m-inline--Height: 1em;
-
-  // Size modifiers
+  // Sizes
+  --#{$icon}--Width: 1em;
+  --#{$icon}--Height: 1em;
   --#{$icon}--m-sm--Width: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$icon}--m-md--Width: var(--#{$pf-global}--icon--FontSize--md);
-  --#{$icon}--m-lg--Width: var(--#{$pf-global}--icon--FontSize--lg);
-  --#{$icon}--m-xl--Width: var(--#{$pf-global}--icon--FontSize--xl);
   --#{$icon}--m-sm--Height: var(--#{$pf-global}--icon--FontSize--sm);
+  --#{$icon}--m-md--Width: var(--#{$pf-global}--icon--FontSize--md);
   --#{$icon}--m-md--Height: var(--#{$pf-global}--icon--FontSize--md);
+  --#{$icon}--m-lg--Width: var(--#{$pf-global}--icon--FontSize--lg);
   --#{$icon}--m-lg--Height: var(--#{$pf-global}--icon--FontSize--lg);
+  --#{$icon}--m-xl--Width: var(--#{$pf-global}--icon--FontSize--xl);
   --#{$icon}--m-xl--Height: var(--#{$pf-global}--icon--FontSize--xl);
+  --#{$icon}--m-inline--Width: 1em;
+  --#{$icon}--m-inline--Height: 1em;
 
-  // Content variables
-  --#{$icon}__content--Color: var(--#{$pf-global}--icon--Color--dark);
+  // Content
+  --#{$icon}__content--svg--VerticalAlign: -.125em;
 
-  // Content status
+  // Content color
+  --#{$icon}__content--Color: initial;
   --#{$icon}__content--m-danger--Color: var(--#{$pf-global}--danger-color--100);
   --#{$icon}__content--m-warning--Color: var(--#{$pf-global}--warning-color--100);
   --#{$icon}__content--m-success--Color: var(--#{$pf-global}--success-color--100);
   --#{$icon}__content--m-info--Color: var(--#{$pf-global}--info-color--100);
   --#{$icon}__content--m-custom--Color: var(--#{$pf-global}--custom-color--100);
-  --#{$icon}__content--FontSize: var(--#{$pf-global}--icon--FontSize--md);
+  --#{$icon}--m-inline__content--Color: initial;
+
+  // Content sizes
+  --#{$icon}__content--FontSize: 1em;
+  --#{$icon}--m-sm__content--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
+  --#{$icon}--m-md__content--FontSize: var(--#{$pf-global}--icon--FontSize--md);
+  --#{$icon}--m-lg__content--FontSize: var(--#{$pf-global}--icon--FontSize--lg);
+  --#{$icon}--m-xl__content--FontSize: var(--#{$pf-global}--icon--FontSize--xl);
   --#{$icon}--m-inline__content--FontSize: 1em;
-  --#{$icon}__content--svg--VerticalAlign: -.125em;
-  --#{$icon}--m-sm--content--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$icon}--m-md--content--FontSize: var(--#{$pf-global}--icon--FontSize--md);
-  --#{$icon}--m-lg--content--FontSize: var(--#{$pf-global}--icon--FontSize--lg);
-  --#{$icon}--m-xl--content--FontSize: var(--#{$pf-global}--icon--FontSize--xl);
 
   position: relative;
   display: inline-flex;
@@ -48,7 +47,7 @@
     --#{$icon}--Width: var(--#{$icon}--m-inline--Width);
     --#{$icon}--Height: var(--#{$icon}--m-inline--Height);
     --#{$icon}__content--FontSize: var(--#{$icon}--m-inline__content--FontSize);
-    --#{$icon}__content--Color: currentcolor;
+    --#{$icon}__content--Color: var(--#{$icon}--m-inline__content--Color);
 
     line-height: 1;
 
@@ -61,25 +60,25 @@
   &.pf-m-sm {
     --#{$icon}--Width: var(--#{$icon}--m-sm--Width);
     --#{$icon}--Height: var(--#{$icon}--m-sm--Height);
-    --#{$icon}__content--FontSize: var(--#{$icon}--m-sm--content--FontSize);
+    --#{$icon}__content--FontSize: var(--#{$icon}--m-sm__content--FontSize);
   }
 
   &.pf-m-md {
     --#{$icon}--Width: var(--#{$icon}--m-md--Width);
     --#{$icon}--Height: var(--#{$icon}--m-md--Height);
-    --#{$icon}__content--FontSize: var(--#{$icon}--m-md--content--FontSize);
+    --#{$icon}__content--FontSize: var(--#{$icon}--m-md__content--FontSize);
   }
 
   &.pf-m-lg {
     --#{$icon}--Width: var(--#{$icon}--m-lg--Width);
     --#{$icon}--Height: var(--#{$icon}--m-lg--Height);
-    --#{$icon}__content--FontSize: var(--#{$icon}--m-lg--content--FontSize);
+    --#{$icon}__content--FontSize: var(--#{$icon}--m-lg__content--FontSize);
   }
 
   &.pf-m-xl {
     --#{$icon}--Width: var(--#{$icon}--m-xl--Width);
     --#{$icon}--Height: var(--#{$icon}--m-xl--Height);
-    --#{$icon}__content--FontSize: var(--#{$icon}--m-xl--content--FontSize);
+    --#{$icon}__content--FontSize: var(--#{$icon}--m-xl__content--FontSize);
   }
 
   &.pf-m-in-progress {
@@ -99,25 +98,25 @@
 
   // Size modifiers
   &.pf-m-sm {
-    --#{$icon}__content--FontSize: var(--#{$icon}--m-sm--content--FontSize);
+    --#{$icon}__content--FontSize: var(--#{$icon}--m-sm__content--FontSize);
   }
 
   &.pf-m-md {
-    --#{$icon}__content--FontSize: var(--#{$icon}--m-md--content--FontSize);
+    --#{$icon}__content--FontSize: var(--#{$icon}--m-md__content--FontSize);
   }
 
   &.pf-m-lg {
-    --#{$icon}__content--FontSize: var(--#{$icon}--m-lg--content--FontSize);
+    --#{$icon}__content--FontSize: var(--#{$icon}--m-lg__content--FontSize);
   }
 
   &.pf-m-xl {
-    --#{$icon}__content--FontSize: var(--#{$icon}--m-xl--content--FontSize);
+    --#{$icon}__content--FontSize: var(--#{$icon}--m-xl__content--FontSize);
   }
 }
 
 // Content element
 .#{$icon}__content {
-  color: var(--#{$icon}__content--Color);
+  color: var(--#{$icon}__content--Color, inherit);
   opacity: var(--#{$icon}__content--Opacity, 1);
 
   // Status modifiers

package/docs/components/AboutModalBox/examples/AboutModalBox.md

@@ -7,7 +7,10 @@ cssPrefix: pf-v5-c-about-modal-box
 ### Basic
 
 ```html isFullscreen
-<div class="pf-v5-c-about-modal-box">
+<div
+  class="pf-v5-c-about-modal-box"
+  style="--pf-v5-c-about-modal-box--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+>
   <div class="pf-v5-c-about-modal-box__brand">
     <img
       class="pf-v5-c-about-modal-box__brand-image"
@@ -39,20 +42,14 @@ cssPrefix: pf-v5-c-about-modal-box
 
 ## Documentation
 
+In order to add a background image, set the `--pf-v5-c-about-modal-box--BackgroundImage` CSS variable to the path of the image. For example: `--pf-v5-c-about-modal-box--BackgroundImage: url(custom/path/image.jpg);`
+
 ### Accessibility
 
 | Attribute | Applies to | Outcome |
 | -- | -- | -- |
 | `aria-label="Close Dialog"` | `.pf-v5-c-modal-box__close .pf-v5-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
 
-### Customizing the background image
-
-In order to use a custom image, pass a new value to the `--pf-v5-c-about-modal-box--BackgroundImage` CSS variable. For example:
-
-```css
---pf-v5-c-about-modal-box--BackgroundImage: url("custom/image/path");
-```
-
 ### Usage
 
 | Class | Applied to | Outcome |
@@ -65,3 +62,4 @@ In order to use a custom image, pass a new value to the `--pf-v5-c-about-modal-b
 | `.pf-v5-c-about-modal-box__content` |  `<div>` |  Initiates a modal box content cell. |
 | `.pf-v5-c-about-modal-box__body` |  `<div>` |  Initiates a modal box body cell. |
 | `.pf-v5-c-about-modal-box__strapline` |  `<p>` |  Initiates a modal box strapline cell. |
+| `--pf-v5-c-about-modal-box--BackgroundImage` |  `.pf-v5-c-about-modal-box` |  Sets the background image for the about modal. |

package/docs/components/BackgroundImage/examples/BackgroundImage.md

@@ -7,7 +7,10 @@ cssPrefix: pf-v5-c-background-image
 ### Basic
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 
 ```
 
@@ -15,18 +18,11 @@ cssPrefix: pf-v5-c-background-image
 
 ### Overview
 
-This component puts an image on the background.
-
-### Customizing the background image
-
-In order to use a custom image, pass a new value to the `--pf-v5-c-background-image--BackgroundImage` CSS variable. For example:
-
-```css
---pf-v5-c-background-image--BackgroundImage: url("custom/image/path");
-```
+In order to set the background image to be used, set the `--pf-v5-c-background-image--BackgroundImage` CSS variable to the path of the image. For example: `--pf-v5-c-background-image--BackgroundImage: url(custom/path/image.jpg);`
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-background-image` | `*` |  A fixed background image is applied to the background of the page. |
+| `.pf-v5-c-background-image` | `*` | A fixed background image is applied to the background of the page. |
+| `--pf-v5-c-background-image--BackgroundImage` | `.pf-v5-c-background-image` | Sets the background image to be used. **Required** |

package/docs/components/Login/examples/Login.md

@@ -8,7 +8,10 @@ wrapperTag: div
 ### Basic
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">
@@ -213,7 +216,10 @@ wrapperTag: div
 ### Invalid
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">
@@ -424,7 +430,10 @@ wrapperTag: div
 ### Show password
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">
@@ -640,7 +649,10 @@ wrapperTag: div
 ### Hide password
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">
@@ -863,7 +875,10 @@ wrapperTag: div
 ### With language selector
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">

package/docs/demos/AboutModal/examples/AboutModal.md

@@ -982,7 +982,10 @@ This demo implements the about modal, including the backdrop.
       aria-modal="true"
       aria-labelledby="about-modal-title"
     >
-      <div class="pf-v5-c-about-modal-box">
+      <div
+        class="pf-v5-c-about-modal-box"
+        style="--pf-v5-c-about-modal-box--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+      >
         <div class="pf-v5-c-about-modal-box__brand">
           <img
             class="pf-v5-c-about-modal-box__brand-image"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.51",
+  "version": "5.0.0-alpha.52",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-base-no-globals.css

@@ -218,8 +218,8 @@
   --pf-v5-global--BorderRadius--lg: 30em;
   --pf-v5-global--icon--Color--light: #6a6e73;
   --pf-v5-global--icon--Color--dark: #151515;
-  --pf-v5-global--icon--FontSize--sm: 0.625rem;
-  --pf-v5-global--icon--FontSize--md: 1.125rem;
+  --pf-v5-global--icon--FontSize--sm: 0.75rem;
+  --pf-v5-global--icon--FontSize--md: 1rem;
   --pf-v5-global--icon--FontSize--lg: 1.5rem;
   --pf-v5-global--icon--FontSize--xl: 3.375rem;
   --pf-v5-global--FontFamily--sans-serif: "RedHatText", helvetica, arial, sans-serif;

package/patternfly-base.css

@@ -218,8 +218,8 @@
   --pf-v5-global--BorderRadius--lg: 30em;
   --pf-v5-global--icon--Color--light: #6a6e73;
   --pf-v5-global--icon--Color--dark: #151515;
-  --pf-v5-global--icon--FontSize--sm: 0.625rem;
-  --pf-v5-global--icon--FontSize--md: 1.125rem;
+  --pf-v5-global--icon--FontSize--sm: 0.75rem;
+  --pf-v5-global--icon--FontSize--md: 1rem;
   --pf-v5-global--icon--FontSize--lg: 1.5rem;
   --pf-v5-global--icon--FontSize--xl: 3.375rem;
   --pf-v5-global--FontFamily--sans-serif: "RedHatText", helvetica, arial, sans-serif;