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

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/Divider/divider.css

@@ -100,8 +100,8 @@
 .pf-v5-c-divider.pf-m-vertical::after {
   flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
 }
-.pf-v5-c-divider.pf-m-inset-base {
-  --pf-v5-c-divider--after--Inset: ;
+.pf-v5-c-divider.pf-m-inset-none {
+  --pf-v5-c-divider--after--Inset: 0%;
 }
 .pf-v5-c-divider.pf-m-inset-xs {
   --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
@@ -151,8 +151,8 @@
   }
 }
 @media (min-width: 576px) {
-  .pf-v5-c-divider.pf-m-inset-base-on-sm {
-    --pf-v5-c-divider--after--Inset: ;
+  .pf-v5-c-divider.pf-m-inset-none-on-sm {
+    --pf-v5-c-divider--after--Inset: 0%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-sm {
     --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
@@ -203,8 +203,8 @@
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-divider.pf-m-inset-base-on-md {
-    --pf-v5-c-divider--after--Inset: ;
+  .pf-v5-c-divider.pf-m-inset-none-on-md {
+    --pf-v5-c-divider--after--Inset: 0%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-md {
     --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
@@ -255,8 +255,8 @@
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-divider.pf-m-inset-base-on-lg {
-    --pf-v5-c-divider--after--Inset: ;
+  .pf-v5-c-divider.pf-m-inset-none-on-lg {
+    --pf-v5-c-divider--after--Inset: 0%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-lg {
     --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
@@ -307,8 +307,8 @@
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-divider.pf-m-inset-base-on-xl {
-    --pf-v5-c-divider--after--Inset: ;
+  .pf-v5-c-divider.pf-m-inset-none-on-xl {
+    --pf-v5-c-divider--after--Inset: 0%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-xl {
     --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
@@ -359,8 +359,8 @@
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-divider.pf-m-inset-base-on-2xl {
-    --pf-v5-c-divider--after--Inset: ;
+  .pf-v5-c-divider.pf-m-inset-none-on-2xl {
+    --pf-v5-c-divider--after--Inset: 0%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-2xl {
     --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);

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/components/Masthead/masthead.css

@@ -319,8 +319,8 @@
   --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight);
   --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
 }
-.pf-v5-c-masthead.pf-m-inset-base {
-  --pf-v5-c-masthead--inset: ;
+.pf-v5-c-masthead.pf-m-inset-none {
+  --pf-v5-c-masthead--inset: 0;
 }
 .pf-v5-c-masthead.pf-m-inset-sm {
   --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -378,8 +378,8 @@
   }
 }
 @media (min-width: 576px) {
-  .pf-v5-c-masthead.pf-m-inset-base-on-sm {
-    --pf-v5-c-masthead--inset: ;
+  .pf-v5-c-masthead.pf-m-inset-none-on-sm {
+    --pf-v5-c-masthead--inset: 0;
   }
   .pf-v5-c-masthead.pf-m-inset-sm-on-sm {
     --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -438,8 +438,8 @@
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-masthead.pf-m-inset-base-on-md {
-    --pf-v5-c-masthead--inset: ;
+  .pf-v5-c-masthead.pf-m-inset-none-on-md {
+    --pf-v5-c-masthead--inset: 0;
   }
   .pf-v5-c-masthead.pf-m-inset-sm-on-md {
     --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -498,8 +498,8 @@
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-masthead.pf-m-inset-base-on-lg {
-    --pf-v5-c-masthead--inset: ;
+  .pf-v5-c-masthead.pf-m-inset-none-on-lg {
+    --pf-v5-c-masthead--inset: 0;
   }
   .pf-v5-c-masthead.pf-m-inset-sm-on-lg {
     --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -558,8 +558,8 @@
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-masthead.pf-m-inset-base-on-xl {
-    --pf-v5-c-masthead--inset: ;
+  .pf-v5-c-masthead.pf-m-inset-none-on-xl {
+    --pf-v5-c-masthead--inset: 0;
   }
   .pf-v5-c-masthead.pf-m-inset-sm-on-xl {
     --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);
@@ -618,8 +618,8 @@
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-masthead.pf-m-inset-base-on-2xl {
-    --pf-v5-c-masthead--inset: ;
+  .pf-v5-c-masthead.pf-m-inset-none-on-2xl {
+    --pf-v5-c-masthead--inset: 0;
   }
   .pf-v5-c-masthead.pf-m-inset-sm-on-2xl {
     --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--sm);

package/components/Pagination/pagination.css

@@ -229,8 +229,8 @@
   --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
 }
-.pf-v5-c-pagination.pf-m-inset-base {
-  --pf-v5-c-pagination--inset: ;
+.pf-v5-c-pagination.pf-m-inset-none {
+  --pf-v5-c-pagination--inset: 0;
 }
 .pf-v5-c-pagination.pf-m-inset-sm {
   --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -258,8 +258,8 @@
     --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
-  .pf-v5-c-pagination.pf-m-inset-base-on-sm {
-    --pf-v5-c-pagination--inset: ;
+  .pf-v5-c-pagination.pf-m-inset-none-on-sm {
+    --pf-v5-c-pagination--inset: 0;
   }
   .pf-v5-c-pagination.pf-m-inset-sm-on-sm {
     --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -288,8 +288,8 @@
     --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
-  .pf-v5-c-pagination.pf-m-inset-base-on-md {
-    --pf-v5-c-pagination--inset: ;
+  .pf-v5-c-pagination.pf-m-inset-none-on-md {
+    --pf-v5-c-pagination--inset: 0;
   }
   .pf-v5-c-pagination.pf-m-inset-sm-on-md {
     --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -318,8 +318,8 @@
     --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
-  .pf-v5-c-pagination.pf-m-inset-base-on-lg {
-    --pf-v5-c-pagination--inset: ;
+  .pf-v5-c-pagination.pf-m-inset-none-on-lg {
+    --pf-v5-c-pagination--inset: 0;
   }
   .pf-v5-c-pagination.pf-m-inset-sm-on-lg {
     --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -348,8 +348,8 @@
     --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
-  .pf-v5-c-pagination.pf-m-inset-base-on-xl {
-    --pf-v5-c-pagination--inset: ;
+  .pf-v5-c-pagination.pf-m-inset-none-on-xl {
+    --pf-v5-c-pagination--inset: 0;
   }
   .pf-v5-c-pagination.pf-m-inset-sm-on-xl {
     --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
@@ -378,8 +378,8 @@
     --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
-  .pf-v5-c-pagination.pf-m-inset-base-on-2xl {
-    --pf-v5-c-pagination--inset: ;
+  .pf-v5-c-pagination.pf-m-inset-none-on-2xl {
+    --pf-v5-c-pagination--inset: 0;
   }
   .pf-v5-c-pagination.pf-m-inset-sm-on-2xl {
     --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);