@patternfly/patternfly 5.0.0-alpha.56 → 5.0.0-alpha.58

package/components/Tabs/tabs.css

@@ -837,5 +837,6 @@
 :where(.pf-v5-theme-dark) .pf-v5-c-tabs {
   --pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
   --pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
 }

package/components/Tabs/themes/dark/tabs.scss

@@ -4,6 +4,7 @@
   .#{$tabs} {
     --#{$tabs}__scroll-button--BackgroundColor: transparent;
     --#{$tabs}__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
+    --#{$tabs}__link--disabled--Color: var(--#{$pf-global}--disabled-color--300);
     --#{$tabs}--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
   }
 }

package/components/TextInputGroup/text-input-group.css

@@ -146,4 +146,12 @@
 
 .pf-v5-c-text-input-group__group {
   display: flex;
+}
+
+:where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
+  --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
+  --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
+  --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
 }

package/components/TextInputGroup/text-input-group.scss

@@ -188,3 +188,10 @@
 .#{$text-input-group}__group {
   display: flex;
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/text-input-group";
+
+@include pf-v5-theme-dark {
+  @include pf-v5-theme-dark-text-input-group;
+}

package/components/TextInputGroup/themes/dark/text-input-group.scss

@@ -0,0 +1,11 @@
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-v5-theme-dark-text-input-group() {
+  .#{$text-input-group} {
+    --#{$text-input-group}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$text-input-group}--m-disabled--Color: var(--#{$pf-global}--disabled-color--300);
+    --#{$text-input-group}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
+    --#{$text-input-group}__text--before--BorderWidth: 0;
+    --#{$text-input-group}__text--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
+  }
+}

package/components/Title/title.css

@@ -1,5 +1,5 @@
 .pf-v5-c-title {
-  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
   --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
   --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);

package/components/Title/title.scss

@@ -1,7 +1,7 @@
 // @debug $title; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
 .#{$title} {
-  --#{$title}--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$title}--FontFamily: var(--#{$pf-global}--FontFamily--heading);
 
   // 4xl
   --#{$title}--m-4xl--LineHeight: var(--#{$pf-global}--LineHeight--sm);

package/components/ToggleGroup/themes/dark/toggle-group.scss

@@ -7,5 +7,6 @@
     --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-600);
     --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--palette--black-100);
     --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--primary-color--300);
+    --#{$toggle-group}__button--m-selected--Color: var(--#{$pf-global}--primary-color--400);
   }
 }

package/components/ToggleGroup/toggle-group.css

@@ -25,6 +25,7 @@
   --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
   --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
+  --pf-v5-c-toggle-group__button--m-selected--Color: initial;
   --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
   --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
@@ -88,6 +89,7 @@
 }
 .pf-v5-c-toggle-group__button.pf-m-selected {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
+  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
   --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--m-selected--ZIndex);
   --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--m-selected--before--BorderColor);
 }
@@ -108,4 +110,5 @@
   --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
   --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
   --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
+  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
 }

package/components/ToggleGroup/toggle-group.scss

@@ -34,6 +34,7 @@
 
   // Selected
   --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
+  --#{$toggle-group}__button--m-selected--Color: initial;
   --#{$toggle-group}__button--m-selected--before--BorderColor: var(--#{$pf-global}--primary-color--100);
   --#{$toggle-group}__button--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs);
 
@@ -119,6 +120,7 @@
 
   &.pf-m-selected {
     --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor);
+    --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
     --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--m-selected--ZIndex);
     --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--m-selected--before--BorderColor);
   }

package/components/Wizard/themes/dark/wizard.scss

@@ -4,8 +4,6 @@
   .#{$wizard} {
     --#{$wizard}__header--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
     --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$pf-global}--palette--black-500);
-    --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--300);
-    --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--300);
   }
 
   .#{$wizard}__header {

package/components/Wizard/wizard.css

@@ -27,7 +27,7 @@
   --pf-v5-c-wizard__close--FontSize: var(--pf-v5-global--FontSize--xl);
   --pf-v5-c-wizard__title--PaddingRight: var(--pf-v5-global--spacer--2xl);
   --pf-v5-c-wizard__title-text--FontSize: var(--pf-v5-global--FontSize--3xl);
-  --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-wizard__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-wizard__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
   --pf-v5-c-wizard__description--PaddingTop: var(--pf-v5-global--spacer--sm);
@@ -39,7 +39,7 @@
   --pf-v5-c-wizard__nav-link--focus--Color: var(--pf-v5-global--link--Color);
   --pf-v5-c-wizard__nav-link--m-current--Color: var(--pf-v5-global--link--Color);
   --pf-v5-c-wizard__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-wizard__nav-link-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -60,7 +60,7 @@
   --pf-v5-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-v5-global--active-color--100);
   --pf-v5-c-wizard__nav-link--m-current--before--Color: var(--pf-v5-global--Color--light-100);
   --pf-v5-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
-  --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-wizard__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-wizard__toggle--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-wizard__toggle--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
@@ -510,8 +510,6 @@
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard {
   --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   --pf-v5-c-wizard__nav-link--before--BackgroundColor: var(--pf-v5-global--palette--black-500);
-  --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--300);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
   color: var(--pf-v5-global--Color--100);

package/components/Wizard/wizard.scss

@@ -41,7 +41,7 @@
 
   // Title text
   --#{$wizard}__title-text--FontSize: var(--#{$pf-global}--FontSize--3xl);
-  --#{$wizard}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$wizard}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
   --#{$wizard}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$wizard}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--sm);
 
@@ -57,7 +57,7 @@
   --#{$wizard}__nav-link--focus--Color: var(--#{$pf-global}--link--Color);
   --#{$wizard}__nav-link--m-current--Color: var(--#{$pf-global}--link--Color);
   --#{$wizard}__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
-  --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--Color--dark-200);
+  --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
   --#{$wizard}__nav-list__nav-list__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
 
   // Nav link toggle icon
@@ -82,7 +82,7 @@
   --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--#{$pf-global}--active-color--100);
   --#{$wizard}__nav-link--m-current--before--Color: var(--#{$pf-global}--Color--light-100);
   --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent;
-  --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--Color--dark-200);
+  --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--100);
 
   // Toggle
   --#{$wizard}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);

package/docs/components/DualListSelector/examples/DualListSelector.md

@@ -680,7 +680,7 @@ cssPrefix: pf-v5-c-dual-list-selector
       <span
         class="pf-v5-c-dual-list-selector__status-text"
         id="multiple-available-items-selected-available-status-text"
-      >1 of 5 items selected</span>
+      >3 of 5 items selected</span>
     </div>
     <div class="pf-v5-c-dual-list-selector__menu">
       <ul

package/docs/components/Slider/examples/Slider.md

@@ -290,7 +290,7 @@ cssPrefix: pf-v5-c-slider
           <input type="number" value="50" aria-label="Slider value input" />
         </div>
       </div>
-      <div class="pf-v5-c-input-group__item">
+      <div class="pf-v5-c-input-group__item pf-m-box">
         <span class="pf-v5-c-input-group__text">%</span>
       </div>
     </div>
@@ -321,7 +321,7 @@ cssPrefix: pf-v5-c-slider
           <input type="number" value="50" aria-label="Slider value input" />
         </div>
       </div>
-      <div class="pf-v5-c-input-group__item">
+      <div class="pf-v5-c-input-group__item pf-m-box">
         <span class="pf-v5-c-input-group__text">%</span>
       </div>
     </div>
@@ -348,13 +348,15 @@ cssPrefix: pf-v5-c-slider
       tabindex="0"
     ></div>
     <div class="pf-v5-c-slider__value pf-m-floating">
-      <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
-          <input type="number" value="50" aria-label="Slider value input" />
+      <div class="pf-v5-c-input-group">
+        <div class="pf-v5-c-input-group__item pf-m-fill">
+          <div class="pf-v5-c-form-control">
+            <input type="number" value="50" aria-label="Slider value input" />
+          </div>
+        </div>
+        <div class="pf-v5-c-input-group__item pf-m-box">
+          <span class="pf-v5-c-input-group__text">%</span>
         </div>
-      </div>
-      <div class="pf-v5-c-input-group__item">
-        <span class="pf-v5-c-input-group__text">%</span>
       </div>
     </div>
   </div>
@@ -421,8 +423,8 @@ cssPrefix: pf-v5-c-slider
             />
           </div>
         </div>
-        <div class="pf-v5-c-input-group__item">
-          <span class="pf-v5-c-input-group__text pf-m-disabled">%</span>
+        <div class="pf-v5-c-input-group__item pf-m-box pf-m-disabled">
+          <span class="pf-v5-c-input-group__text">%</span>
         </div>
       </div>
     </div>
@@ -458,7 +460,7 @@ cssPrefix: pf-v5-c-slider
             <input type="number" value="50" aria-label="Slider value input" />
           </div>
         </div>
-        <div class="pf-v5-c-input-group__item">
+        <div class="pf-v5-c-input-group__item pf-m-box">
           <span class="pf-v5-c-input-group__text">%</span>
         </div>
       </div>
@@ -622,8 +624,8 @@ cssPrefix: pf-v5-c-slider
           />
         </div>
       </div>
-      <div class="pf-v5-c-input-group__item">
-        <span class="pf-v5-c-input-group__text pf-m-disabled">%</span>
+      <div class="pf-v5-c-input-group__item pf-m-box pf-m-disabled">
+        <span class="pf-v5-c-input-group__text">%</span>
       </div>
     </div>
   </div>

package/docs/components/TextInputGroup/examples/TextInputGroup.css

@@ -8,3 +8,7 @@
   top: 40px;
   width: 100%;
 }
+
+#ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
+  height: 540px;
+}

package/docs/utilities/Text/examples/Text.md

@@ -8,18 +8,12 @@ section: utility-classes
 ### Font family
 
 ```html
-<div class="pf-v5-u-font-family-sans-serif">Sans serif</div>
-<div class="pf-v5-u-font-family-heading-sans-serif">Heading sans serif</div>
+<div class="pf-v5-u-font-family-text">Text</div>
+<div class="pf-v5-u-font-family-heading">Heading</div>
 <div class="pf-v5-u-font-family-monospace">Monospace</div>
-<div
-  class="pf-v5-u-font-family-redhatVF-sans-serif"
->Red Hat variable font sans serif</div>
-<div
-  class="pf-v5-u-font-family-redhatVF-heading-sans-serif"
->Red Hat variable font heading sans serif</div>
-<div
-  class="pf-v5-u-font-family-redhatVF-monospace"
->Red Hat variable font monospace</div>
+<div class="pf-v5-u-font-family-text-vf">Variable font text</div>
+<div class="pf-v5-u-font-family-heading-vf">Variable font heading</div>
+<div class="pf-v5-u-font-family-monospace-vf">Variable font monospace</div>
 
 ```
 
@@ -171,30 +165,30 @@ Care should be taken especially when applying text colors, as this can have a ne
 
 ### Usage
 
-| Class                                                                  | Applied to | Outcome                                             |
-| ---------------------------------------------------------------------- | ---------- | --------------------------------------------------- |
-| `.pf-v5-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*`        | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
-| `.pf-v5-u-font-family-{sans-serif, heading-sans-serif, monospace, redhatVF-sans-serif, redhatVF-heading-sans-serif, redhatVF-monospace}`            | `*`        | Sets font-family to sans-serif, heading-sans-serif, or monospace; or Red Hat virtual font sans-serif, heading sans-serif, or monospace            |
-| `.pf-v5-u-font-weight-{light, normal, bold}{-on-[breakpoint]}`            | `*`        | Sets font-size to light, normal, or bold            |
-| `.pf-v5-u-color-{100, 200, 300, 400}{-on-[breakpoint]}`                   | `*`        | Sets font-color to color 100, 200, 300, or 400      |
-| `.pf-v5-u-active-color-{100, 400}{-on-[breakpoint]}`                      | `*`        | Sets font-color to active color 100 or 400          |
-| `.pf-v5-u-primary-color-100{-on-[breakpoint]}`                            | `*`        | Sets font-color to primary color 100                |
-| `.pf-v5-u-color-light-{100, 200}{-on-[breakpoint]}`                       | `*`        | Sets font-color to light color 100 or 200           |
-| `.pf-v5-u-link-color{-on-[breakpoint]}`                                   | `*`        | Sets font-color to link color                       |
-| `.pf-v5-u-link-color-hover{-on-[breakpoint]}`                             | `*`        | Sets font-color to hover link color                 |
-| `.pf-v5-u-link-color-light{-on-[breakpoint]}`                             | `*`        | Sets font-color to light link color                 |
-| `.pf-v5-u-link-color-light-hover{-on-[breakpoint]}`                       | `*`        | Sets font-color to light hover link color           |
-| `.pf-v5-u-link-color-dark{-on-[breakpoint]}`                              | `*`        | Sets font-color to dark link color                  |
-| `.pf-v5-u-link-color-dark-hover{-on-[breakpoint]}`                        | `*`        | Sets font-color to dark hover link color            |
-| `.pf-v5-u-link-color-visited{-on-[breakpoint]}`                           | `*`        | Sets font-color to visited link color               |
-| `.pf-v5-u-custom-color-{100, 200, 300}{-on-[breakpoint]}`                 | `*`        | Sets font-color to custom color 100, 200, or 300   |
-| `.pf-v5-u-success-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to success color 100 or 200         |
-| `.pf-v5-u-info-color-{100, 200}{-on-[breakpoint]}`                        | `*`        | Sets font-color to info color 100 or 200            |
-| `.pf-v5-u-warning-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to warning color 100 or 200         |
-| `.pf-v5-u-danger-color-{100, 200, 300}{-on-[breakpoint]}`                 | `*`        | Sets font-color to danger color 100, 200, or 300    |
-| `.pf-v5-u-disabled-color-{100, 200}{-on-[breakpoint]}`                    | `*`        | Sets font-color to disabled color 100 or 200        |
-| `.pf-v5-u-icon-color-{light, dark}{-on-[breakpoint]}`                     | `*`        | Sets font-color to light or dark icon color         |
-| `.pf-v5-u-text-break-word{-on-[breakpoint]}`                              | `*`        | Sets word-break to break-word                       |
-| `.pf-v5-u-text-nowrap{-on-[breakpoint]}`                                  | `*`        | Sets white-space to nowrap                          |
-| `.pf-v5-u-text-wrap{-on-[breakpoint]}`                                    | `*`        | Sets white-space to normal                          |
-| `.pf-v5-u-text-truncate`                                                  | `*`        | Truncates text field                                |
+| Class | Applied to | Outcome |
+| - | - | - |
+| `.pf-v5-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*` | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
+| `.pf-v5-u-font-family-{text, heading, monospace, text-vf, heading-vf, monospace-vf}` | `*` | Sets font-family to text, heading, or monospace, or the variable font variation of that font family |
+| `.pf-v5-u-font-weight-{normal, bold}{-on-[breakpoint]}` | `*` | Sets font-weight to light, normal, or bold |
+| `.pf-v5-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
+| `.pf-v5-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
+| `.pf-v5-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
+| `.pf-v5-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
+| `.pf-v5-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
+| `.pf-v5-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
+| `.pf-v5-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
+| `.pf-v5-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
+| `.pf-v5-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
+| `.pf-v5-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
+| `.pf-v5-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
+| `.pf-v5-u-custom-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to custom color 100, 200, or 300 |
+| `.pf-v5-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
+| `.pf-v5-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
+| `.pf-v5-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
+| `.pf-v5-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
+| `.pf-v5-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
+| `.pf-v5-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
+| `.pf-v5-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
+| `.pf-v5-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
+| `.pf-v5-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
+| `.pf-v5-u-text-truncate` | `*` | Truncates text field |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.56",
+  "version": "5.0.0-alpha.58",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -45,8 +45,8 @@
     "@patternfly/documentation-framework": "2.0.0-alpha.41",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "5.0.0-alpha.105",
-    "@patternfly/react-core": "5.0.0-alpha.102",
-    "@patternfly/react-table": "5.0.0-alpha.104",
+    "@patternfly/react-core": "5.0.0-alpha.104",
+    "@patternfly/react-table": "5.0.0-alpha.106",
     "@starptech/prettyhtml": "^0.10.0",
     "cheerio": "^1.0.0-rc.12",
     "commander": "^10.0.0",

package/patternfly-addons.css

@@ -7549,28 +7549,28 @@
   }
 }
 
-.pf-v5-u-font-family-sans-serif {
-  font-family: var(--pf-v5-global--FontFamily--sans-serif) !important;
+.pf-v5-u-font-family-text {
+  font-family: var(--pf-v5-global--FontFamily--text) !important;
 }
 
-.pf-v5-u-font-family-heading-sans-serif {
-  font-family: var(--pf-v5-global--FontFamily--heading--sans-serif) !important;
+.pf-v5-u-font-family-heading {
+  font-family: var(--pf-v5-global--FontFamily--heading) !important;
 }
 
 .pf-v5-u-font-family-monospace {
   font-family: var(--pf-v5-global--FontFamily--monospace) !important;
 }
 
-.pf-v5-u-font-family-redhatVF-sans-serif {
-  font-family: var(--pf-v5-global--FontFamily--redhatVF--sans-serif) !important;
+.pf-v5-u-font-family-text-vf {
+  font-family: var(--pf-v5-global--FontFamily--text--vf) !important;
 }
 
-.pf-v5-u-font-family-redhatVF-heading-sans-serif {
-  font-family: var(--pf-v5-global--FontFamily--redhatVF--heading--sans-serif) !important;
+.pf-v5-u-font-family-heading-vf {
+  font-family: var(--pf-v5-global--FontFamily--heading--vf) !important;
 }
 
-.pf-v5-u-font-family-redhatVF-monospace {
-  font-family: var(--pf-v5-global--FontFamily--redhatVF--monospace) !important;
+.pf-v5-u-font-family-monospace-vf {
+  font-family: var(--pf-v5-global--FontFamily--monospace--vf) !important;
 }
 
 .pf-v5-u-font-size-xs {
@@ -7735,10 +7735,6 @@
     font-size: var(--pf-v5-global--FontSize--4xl) !important;
   }
 }
-.pf-v5-u-font-weight-light {
-  font-weight: var(--pf-v5-global--FontWeight--light) !important;
-}
-
 .pf-v5-u-font-weight-normal {
   font-weight: var(--pf-v5-global--FontWeight--normal) !important;
 }
@@ -7748,9 +7744,6 @@
 }
 
 @media screen and (min-width: 576px) {
-  .pf-v5-u-font-weight-light-on-sm {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-sm {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }
@@ -7759,9 +7752,6 @@
   }
 }
 @media screen and (min-width: 768px) {
-  .pf-v5-u-font-weight-light-on-md {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-md {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }
@@ -7770,9 +7760,6 @@
   }
 }
 @media screen and (min-width: 992px) {
-  .pf-v5-u-font-weight-light-on-lg {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-lg {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }
@@ -7781,9 +7768,6 @@
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-u-font-weight-light-on-xl {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-xl {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }
@@ -7792,9 +7776,6 @@
   }
 }
 @media screen and (min-width: 1450px) {
-  .pf-v5-u-font-weight-light-on-2xl {
-    font-weight: var(--pf-v5-global--FontWeight--light) !important;
-  }
   .pf-v5-u-font-weight-normal-on-2xl {
     font-weight: var(--pf-v5-global--FontWeight--normal) !important;
   }