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

package/components/Card/card.scss

@@ -9,7 +9,7 @@
   --#{$card}--child--PaddingLeft: var(--#{$pf-global}--spacer--lg);
   --#{$card}--c-divider--child--PaddingTop: var(--#{$pf-global}--spacer--lg);
   --#{$card}__title--not--last-child--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$card}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$card}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
   --#{$card}__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
   --#{$card}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$card}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);

package/components/Content/content.css

@@ -4,7 +4,7 @@
   --pf-v5-c-content--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-content--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-content--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-content--h1--MarginTop: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-content--h1--MarginBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-content--h1--LineHeight: var(--pf-v5-global--LineHeight--sm);

package/components/Content/content.scss

@@ -11,7 +11,7 @@
   --#{$content}--Color: var(--#{$pf-global}--Color--100);
 
   // Headings
-  --#{$content}--heading--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$content}--heading--FontFamily: var(--#{$pf-global}--FontFamily--heading);
 
   // h1
   --#{$content}--h1--MarginTop: var(--#{$pf-global}--spacer--lg);

package/components/EmptyState/empty-state.css

@@ -17,7 +17,7 @@
   --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
   --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
-  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
   --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);

package/components/EmptyState/empty-state.scss

@@ -25,7 +25,7 @@
   --#{$empty-state}--m-xl__icon--FontSize: #{pf-size-prem(100px)};
 
   // Title text
-  --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
   --#{$empty-state}__title-text--FontSize: var(--#{$pf-global}--FontSize--xl);
   --#{$empty-state}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$empty-state}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);

package/components/ModalBox/modal-box.css

@@ -23,7 +23,7 @@
   --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
   --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);

package/components/ModalBox/modal-box.scss

@@ -35,7 +35,7 @@
 
   // Title
   --#{$modal-box}__title--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$modal-box}__title--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$modal-box}__title--FontFamily: var(--#{$pf-global}--FontFamily--heading);
   --#{$modal-box}__title--FontSize: var(--#{$pf-global}--FontSize--2xl);
 
   // Title icon

package/components/Popover/popover.css

@@ -39,7 +39,7 @@
   --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
   --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);

package/components/Popover/popover.scss

@@ -56,7 +56,7 @@
 
   // Title text
   --#{$popover}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$popover}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$popover}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
   --#{$popover}__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
 
   // Title icon

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/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);

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);
 

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.57",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -46,7 +46,7 @@
     "@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-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;
   }

package/patternfly-base-no-globals.css

@@ -222,15 +222,12 @@
   --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;
-  --pf-v5-global--FontFamily--heading--sans-serif: "RedHatDisplay", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-v5-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--redhat--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-v5-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--redhatVF--monospace: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
+  --pf-v5-global--FontFamily--text: "RedHatText", helvetica, arial, sans-serif;
+  --pf-v5-global--FontFamily--heading: "RedHatDisplay", helvetica, arial, sans-serif;
+  --pf-v5-global--FontFamily--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
+  --pf-v5-global--FontFamily--text--vf: "RedHatTextVF", "RedHatText", helvetica, arial, sans-serif;
+  --pf-v5-global--FontFamily--heading--vf: "RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif;
+  --pf-v5-global--FontFamily--monospace--vf: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
   --pf-v5-global--FontSize--4xl: 2.25rem;
   --pf-v5-global--FontSize--3xl: 1.75rem;
   --pf-v5-global--FontSize--2xl: 1.5rem;
@@ -239,7 +236,6 @@
   --pf-v5-global--FontSize--md: 1rem;
   --pf-v5-global--FontSize--sm: 0.875rem;
   --pf-v5-global--FontSize--xs: 0.75rem;
-  --pf-v5-global--FontWeight--light: 300;
   --pf-v5-global--FontWeight--normal: 400;
   --pf-v5-global--FontWeight--bold: 700;
   --pf-v5-global--LineHeight--sm: 1.3;
@@ -254,19 +250,10 @@
   --pf-v5-global--target-size--MinHeight: 44px;
 }
 
-.pf-v5-m-redhat-updated-font {
-  --pf-v5-global--FontFamily--sans-serif: var(--pf-v5-global--FontFamily--redhat-updated--sans-serif);
-  --pf-v5-global--FontFamily--heading--sans-serif: var(--pf-v5-global--FontFamily--redhat-updated--heading--sans-serif);
-}
-
-.pf-v5-m-redhatmono-font {
-  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--redhat--monospace);
-}
-
-.pf-v5-m-redhatVF-font {
-  --pf-v5-global--FontFamily--sans-serif: var(--pf-v5-global--FontFamily--redhatVF--sans-serif);
-  --pf-v5-global--FontFamily--heading--sans-serif: var(--pf-v5-global--FontFamily--redhatVF--heading--sans-serif);
-  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--redhatVF--monospace);
+.pf-m-vf-font {
+  --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
+  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
+  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
 }
 
 :root:where(.pf-v5-theme-dark) {
@@ -354,122 +341,115 @@
 }
 
 @font-face {
-  font-family: "RedHatDisplay";
+  font-family: RedHatDisplay;
   font-style: normal;
-  font-weight: 300;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplay";
-  font-style: normal;
+  font-family: RedHatDisplay;
+  font-style: italic;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplay";
+  font-family: RedHatDisplay;
   font-style: normal;
   font-weight: 700;
   src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2");
-  text-rendering: optimizelegibility;
-}
-@font-face {
-  font-family: "RedHatText";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatText";
+  font-family: RedHatDisplay;
   font-style: normal;
   font-weight: 700;
-  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayUpdated";
+  font-family: RedHatText;
   font-style: normal;
-  font-weight: 300;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayUpdated";
-  font-style: normal;
+  font-family: RedHatText;
+  font-style: italic;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  src: url("./assets/fonts/RedHatText/RedHatText-Italic.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayUpdated";
+  font-family: RedHatText;
   font-style: normal;
   font-weight: 700;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatTextUpdated";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-family: RedHatText;
+  font-style: italic;
+  font-weight: 700;
+  src: url("./assets/fonts/RedHatText/RedHatText-MediumItalic.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatTextUpdated";
+  font-family: RedHatMono;
   font-style: normal;
-  font-weight: 700;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatMono/RedHatMono-Regular.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatMono";
-  font-style: normal;
+  font-family: RedHatMono;
+  font-style: italic;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
+  src: url("./assets/fonts/RedHatMono/RedHatMono-Italic.woff2") format("woff2");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayVF";
+  font-family: RedHatDisplayVF;
   font-style: normal;
-  font-weight: 300 900;
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
+  font-weight: 400 700;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayVF";
+  font-family: RedHatDisplayVF;
   font-style: italic;
-  font-weight: 300 900;
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
+  font-weight: 400 700;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatTextVF";
+  font-family: RedHatTextVF;
   font-style: normal;
   font-weight: 400 500;
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
+  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatTextVF";
+  font-family: RedHatTextVF;
   font-style: italic;
   font-weight: 400 500;
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
+  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatMonoVF";
+  font-family: RedHatMonoVF;
   font-style: normal;
-  font-weight: 300 700;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatMonoVF";
+  font-family: RedHatMonoVF;
   font-style: italic;
-  font-weight: 300 700;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
   font-display: fallback;
 }
 .pf-v5-screen-reader {