feat(fonts): updated red hat font (#4476)

src/patternfly/base/_common.scss

@@ -17,9 +17,13 @@
   html {
     font-size: unset !important; // the important is needed because we don't know if pf3 will be loaded after pfnext
   }
+  // stylelint-enable
 }
 
 .pf-screen-reader {
   @include pf-u-screen-reader; // for use with assistive technologies
 }
-// stylelint-enable
+
+.pf-m-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}

src/patternfly/base/_fonts.scss

@@ -56,6 +56,106 @@
   text-rendering: optimizeLegibility;
 }
 
+// RedHatFont-updated
+@font-face {
+  font-family: "RedHatDisplayUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 300;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatDisplayUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatDisplayUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatTextUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatTextUpdated";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+// RedHatMono
+@font-face {
+  font-family: "RedHatMono";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: fallback;
+}
+
+// Variable fonts
+@font-face {
+  font-family: "RedHatDisplayVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatDisplayVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
+  font-style: italic;
+  font-weight: 300 900;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatTextVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 400 500;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatTextVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
+  font-style: italic;
+  font-weight: 400 500;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatMonoVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: "RedHatMonoVF";
+  src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
+  font-style: italic;
+  font-weight: 300 700;
+  font-display: fallback;
+}
+
+
 @if $pf-global--enable-font-overpass-cdn {
   @import url("https://fonts.googleapis.com/css?family=Overpass|Overpass+Mono");
 } @else {

src/patternfly/base/_variables.scss

@@ -234,6 +234,12 @@
   --pf-global--FontFamily--sans-serif: #{$pf-global--FontFamily--sans-serif};
   --pf-global--FontFamily--heading--sans-serif: #{$pf-global--FontFamily--heading--sans-serif};
   --pf-global--FontFamily--monospace: #{$pf-global--FontFamily--monospace};
+  --pf-global--FontFamily--redhat-updated--sans-serif: #{$pf-global--FontFamily--redhat-updated--sans-serif};
+  --pf-global--FontFamily--redhat-updated--heading--sans-serif: #{$pf-global--FontFamily--redhat-updated--heading--sans-serif};
+  --pf-global--FontFamily--redhat--monospace: #{$pf-global--FontFamily--redhat--monospace};
+  --pf-global--FontFamily--redhatVF--sans-serif: #{$pf-global--FontFamily--redhatVF--sans-serif};
+  --pf-global--FontFamily--redhatVF--heading--sans-serif: #{$pf-global--FontFamily--redhatVF--heading--sans-serif};
+  --pf-global--FontFamily--redhatVF--monospace: #{$pf-global--FontFamily--redhatVF--monospace};
   --pf-global--FontFamily--overpass--sans-serif: #{$pf-global--FontFamily--overpass--sans-serif};
   --pf-global--FontFamily--overpass--monospace: #{$pf-global--FontFamily--overpass--monospace};
 
@@ -274,11 +280,29 @@
   --pf-global--target-size--MinHeight: #{$pf-global--target-size--MinHeight};
 }
 
-// RedHat Font overrides
+// Overpass font overrides
 @include pf-m-overpass-font {
   --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
   --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
   --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
   --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
   --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
 }
+
+// RedHatFont updated font overrides
+.pf-m-redhat-updated-font {
+  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhat-updated--sans-serif);
+  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif);
+}
+
+// RedHatMono font overrides
+.pf-m-redhatmono-font {
+  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhat--monospace);
+}
+
+// RedHat variable font overrides
+.pf-m-redhatVF-font {
+  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhatVF--sans-serif);
+  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhatVF--heading--sans-serif);
+  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
+}

src/patternfly/sass-utilities/scss-variables.scss

@@ -193,6 +193,12 @@ $pf-global--icon--FontSize--xl: pf-font-prem(54px) !default;
 $pf-global--FontFamily--sans-serif: '"RedHatText", "Overpass", overpass, helvetica, arial, sans-serif';
 $pf-global--FontFamily--heading--sans-serif: '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif';
 $pf-global--FontFamily--monospace: '"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
+$pf-global--FontFamily--redhat-updated--sans-serif: '"RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif';
+$pf-global--FontFamily--redhat-updated--heading--sans-serif: '"RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif';
+$pf-global--FontFamily--redhat--monospace: '"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
+$pf-global--FontFamily--redhatVF--sans-serif: '"RedHatTextVF", "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif';
+$pf-global--FontFamily--redhatVF--heading--sans-serif: '"RedHatDisplayVF", "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif';
+$pf-global--FontFamily--redhatVF--monospace: '"RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
 $pf-global--FontFamily--overpass--sans-serif: '"overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' !default;
 $pf-global--FontFamily--overpass--monospace: '"overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace' !default;
 // stylelint-enable value-keyword-case