feat(font): add option to use new red hat font (#1813)

* feat(font): add opt-in for new redhat font

* fix(font): fix new font class typo

src/patternfly/_fonts.scss

@@ -4,10 +4,55 @@
 // PatternFly uses Overpass and Overpass mono http://overpassfont.org/
 //
 
+/* stylelint-disable font-family-name-quotes */
+@font-face {
+  font-family: "RedHatDisplay";
+  src: url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.eot");
+  src: url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
+  font-style: normal;
+  font-weight: 300;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatDisplay";
+  src: url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.eot");
+  src: url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.eot?#iefix") format("embedded-opentype"), url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatDisplay";
+  src: url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.eot");
+  src: url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.eot?#iefix") format("embedded-opentype"), url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatText";
+  src: url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.eot");
+  src: url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.eot?#iefix") format("embedded-opentype"), url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff") format("woff");
+  font-style: normal;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+}
+
+@font-face {
+  font-family: "RedHatText";
+  src: url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.eot");
+  src: url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.eot?#iefix") format("embedded-opentype"), url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff") format("woff");
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+
 @if $pf-global--enable-font-overpass-cdn {
   @import url("https://fonts.googleapis.com/css?family=Overpass|Overpass+Mono");
 } @else {
-  // stylelint-disable
   @font-face {
     font-family: "overpass";
     font-style: normal;
@@ -250,4 +295,4 @@
       url("#{$pf-global--font-path}/overpass-mono-webfont/overpass-mono-bold.ttf")  format("truetype");
   }
 }
-// stylelint-enable
+/* stylelint-enable */

src/patternfly/_variables.scss

@@ -142,7 +142,10 @@
 
   // Font family
   --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--redhatfont--sans-serif: #{$pf-global--FontFamily--redhatfont--sans-serif};
+  --pf-global--FontFamily--redhatfont--heading--sans-serif: #{$pf-global--FontFamily--redhatfont--heading--sans-serif};
 
   // Font size
   --pf-global--FontSize--4xl: #{$pf-global--FontSize--4xl};
@@ -159,6 +162,7 @@
   --pf-global--FontWeight--normal: #{$pf-global--FontWeight--normal};
   --pf-global--FontWeight--semi-bold: #{$pf-global--FontWeight--semi-bold};
   --pf-global--FontWeight--bold: #{$pf-global--FontWeight--bold};
+  --pf-global--FontWeight--redhatfont--bold: #{$pf-global--FontWeight--redhatfont--bold};
 
   // Line height
   --pf-global--LineHeight--sm: #{$pf-global--LineHeight--sm};
@@ -178,3 +182,12 @@
   --pf-global--target-size--MinWidth: #{$pf-global--target-size--MinWidth};
   --pf-global--target-size--MinHeight: #{$pf-global--target-size--MinHeight};
 }
+
+// RedHat Font overrides
+@include pf-m-redhat-font {
+  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhatfont--sans-serif);
+  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhatfont--heading--sans-serif);
+  --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--redhatfont--bold);
+  --pf-global--FontWeight--bold: var(--pf-global--FontWeight--redhatfont--bold);
+  --pf-global--link--FontWeight: var(--pf-global--FontWeight--normal);
+}

src/patternfly/components/Alert/alert.scss

@@ -197,3 +197,10 @@
   padding-top: var(--pf-c-alert__action--PaddingTop);
   padding-right: var(--pf-c-alert__action--PaddingRight);
 }
+
+// RedHat Font overrides
+@include pf-m-redhat-font {
+  .pf-c-alert__title {
+    font-weight: var(--pf-global--FontWeight--bold);
+  }
+}

src/patternfly/components/Breadcrumb/breadcrumb.scss

@@ -71,3 +71,11 @@
 .pf-c-breadcrumb__heading {
   font-size: var(--pf-c-breadcrumb__heading--FontSize);
 }
+
+// RedHat Font overrides
+@include pf-m-redhat-font {
+  .pf-c-breadcrumb {
+    --pf-c-breadcrumb__link--FontWeight: var(--pf-global--FontWeight--normal);
+    --pf-c-breadcrumb__item--FontWeight: var(--pf-global--FontWeight--normal);
+  }
+}

src/patternfly/components/Button/button.scss

@@ -356,3 +356,10 @@
     }
   }
 }
+
+// RedHat Font overrides
+@include pf-m-redhat-font {
+  .pf-c-button {
+    --pf-c-button--FontWeight: var(--pf-global--FontWeight--normal);
+  }
+}

src/patternfly/components/Card/card.scss

@@ -98,3 +98,11 @@
 .pf-c-card__footer {
   font-size: var(--pf-c-card__footer--FontSize);
 }
+
+// RedHat Font overrides
+@include pf-m-redhat-font {
+  .pf-c-card__header {
+    font-family: var(--pf-global--FontFamily--sans-serif);
+    font-weight: var(--pf-global--FontWeight--bold);
+  }
+}

src/patternfly/components/Content/content.scss

@@ -8,21 +8,24 @@
   // this ensures color is not overridden
   --pf-c-content--Color: var(--pf-global--Color--100);
 
-  // h1 -main title
+  // Headings
+  --pf-c-content--heading--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+
+  // h1
   --pf-c-content--h1--MarginTop: var(--pf-global--spacer--lg);
   --pf-c-content--h1--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-content--h1--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-content--h1--FontSize: var(--pf-global--FontSize--2xl);
   --pf-c-content--h1--FontWeight: var(--pf-global--FontWeight--normal);
 
-  // h2 - secondary title
+  // h2
   --pf-c-content--h2--MarginTop: var(--pf-global--spacer--lg);
   --pf-c-content--h2--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-content--h2--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-content--h2--FontWeight: var(--pf-global--FontWeight--normal);
 
-  // h3 - sub-title
+  // h3
   --pf-c-content--h3--MarginTop: var(--pf-global--spacer--lg);
   --pf-c-content--h3--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-content--h3--LineHeight: var(--pf-global--LineHeight--md);
@@ -134,7 +137,11 @@
   h3,
   h4,
   h5,
-  h6,
+  h6 {
+    margin: 0;
+    font-family: var(--pf-c-content--heading--FontFamily);
+  }
+
   ol,
   ul {
     margin: 0;
@@ -296,3 +303,14 @@
     }
   }
 }
+
+// RedHat Font overrides
+@include pf-m-redhat-font {
+  .pf-c-content {
+    --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--md);
+    --pf-c-content--blockquote--FontWeight: var(--pf-global--FontWeight--normal);
+    --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--normal);
+    --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--normal);
+    --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--normal);
+  }
+}

src/patternfly/components/EmptyState/empty-state.scss

@@ -59,3 +59,12 @@
     margin-bottom: var(--pf-c-empty-state__secondary--c-button--MarginBottom);
   }
 }
+
+// RedHat Font overrides
+@include pf-m-redhat-font {
+  .pf-c-empty-state {
+    > .pf-c-title {
+      font-size: var(--pf-global--FontSize--xl);
+    }
+  }
+}

src/patternfly/components/Expandable/expandable.scss

@@ -60,3 +60,10 @@
     margin-top: var(--pf-c-expandable__content--MarginTop);
   }
 }
+
+// RedHat Font overrides
+@include pf-m-redhat-font {
+  .pf-c-expandable__toggle {
+    --pf-c-expandable__toggle--FontWeight: var(--pf-global--FontWeight--normal);
+  }
+}

src/patternfly/components/Title/title.scss

@@ -1,4 +1,6 @@
 .pf-c-title {
+  --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+
   // 4xl
   --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-title--m-4xl--FontSize: var(--pf-global--FontSize--4xl);
@@ -29,6 +31,8 @@
   --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);
   --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--semi-bold);
 
+  font-family: var(--pf-c-title--FontFamily);
+
   &.pf-m-4xl {
     font-size: var(--pf-c-title--m-4xl--FontSize);
     font-weight: var(--pf-c-title--m-4xl--FontWeight);
@@ -65,3 +69,11 @@
     line-height: var(--pf-c-title--m-md--LineHeight);
   }
 }
+
+// RedHat Font overrides
+@include pf-m-redhat-font {
+  .pf-c-title {
+    --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);
+    --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal);
+  }
+}

src/patternfly/demos/CardView/examples/card-view-demo-example.hbs

@@ -11,7 +11,7 @@
         {{/button}}
       {{/page-header-brand-toggle}}
       {{#> page-header-brand-link page-header-brand-link--href="#"}}
-        {{#> brand brand--attribute='src="/assets/images/l_pf-reverse-164x11.png" alt="Patternfly Logo"'}}{{/brand}}
+        {{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="Patternfly Logo"'}}{{/brand}}
       {{/page-header-brand-link}}
     {{/page-header-brand}}
 

src/patternfly/demos/DataList/data-list-page-header.hbs

@@ -5,7 +5,7 @@
     {{/button}}
   {{/page-header-brand-toggle}}
   {{#> page-header-brand-link page-header-brand-link--href="#"}}
-    {{#> brand brand--attribute='src="/assets/images/l_pf-reverse-164x11.png" alt="PatternFly logo"'}}{{/brand}}
+    {{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo"'}}{{/brand}}
   {{/page-header-brand-link}}
 {{/page-header-brand}}
 {{#> page-template-header-tools-elements}}

src/patternfly/demos/DataTable/data-table-page-header.hbs

@@ -5,7 +5,7 @@
     {{/button}}
   {{/page-header-brand-toggle}}
   {{#> page-header-brand-link page-header-brand-link--href="#"}}
-    {{#> brand brand--attribute='src="/assets/images/l_pf-reverse-164x11.png" alt="PatternFly logo"'}}{{/brand}}
+    {{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo"'}}{{/brand}}
   {{/page-header-brand-link}}
 {{/page-header-brand}}
 {{#> page-template-header-tools-elements}}

src/patternfly/demos/Page/examples/page-component-expandable-nav-example.hbs

@@ -11,7 +11,7 @@
         {{/button}}
       {{/page-header-brand-toggle}}
       {{#> page-header-brand-link page-header-brand-link--href="#"}}
-        {{#> brand brand--attribute='src="/assets/images/l_pf-reverse-164x11.png" alt="PatternFly logo"'}}{{/brand}}
+        {{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo"'}}{{/brand}}
       {{/page-header-brand-link}}
     {{/page-header-brand}}
     {{#> page-template-header-tools-elements}}

src/patternfly/demos/Page/examples/page-component-grouped-nav-example.hbs

@@ -10,7 +10,7 @@
         {{/button}}
       {{/page-header-brand-toggle}}
       {{#> page-header-brand-link page-header-brand-link--href="#"}}
-        {{#> brand brand--attribute='src="/assets/images/l_pf-reverse-164x11.png" alt="PatternFly logo"'}}{{/brand}}
+        {{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo"'}}{{/brand}}
       {{/page-header-brand-link}}
     {{/page-header-brand}}
     {{#> page-template-header-tools-elements}}

src/patternfly/demos/Page/examples/page-component-horizontal-nav-example.hbs

@@ -5,7 +5,7 @@
   {{#> page-header}}
     {{#> page-header-brand}}
       {{#> page-header-brand-link page-header-brand-link--href="#"}}
-        {{#> brand brand--attribute='src="/assets/images/l_pf-reverse-164x11.png" alt="PatternFly logo"'}}{{/brand}}
+        {{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo"'}}{{/brand}}
       {{/page-header-brand-link}}
     {{/page-header-brand}}
     {{#> page-header-nav}}

src/patternfly/demos/Page/examples/page-component-tertiary-nav-example.hbs

@@ -11,7 +11,7 @@
         {{/button}}
       {{/page-header-brand-toggle}}
       {{#> page-header-brand-link page-header-brand-link--href="#"}}
-        {{#> brand brand--attribute='src="/assets/images/l_pf-reverse-164x11.png" alt="PatternFly logo"'}}{{/brand}}
+        {{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo"'}}{{/brand}}
       {{/page-header-brand-link}}
     {{/page-header-brand}}
     {{#> page-template-header-tools-elements}}

src/patternfly/demos/Page/page-demo-default.hbs

@@ -11,7 +11,7 @@
         {{/button}}
       {{/page-header-brand-toggle}}
       {{#> page-header-brand-link page-header-brand-link--href="#"}}
-        {{#> brand brand--attribute='src="/assets/images/l_pf-reverse-164x11.png" alt="PatternFly logo"'}}{{/brand}}
+        {{#> brand brand--attribute='src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo"'}}{{/brand}}
       {{/page-header-brand-link}}
     {{/page-header-brand}}
 

src/patternfly/sass-utilities/mixins.scss

@@ -165,3 +165,9 @@
 
   @extend %pf-hidden-visible;
 }
+
+@mixin pf-m-redhat-font {
+  .pf-m-redhat-font {
+    @content;
+  }
+}

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

@@ -179,14 +179,17 @@ $pf-global--icon--FontSize--xl: pf-font-prem(54px) !default;
 // Font family
 // stylelint-disable value-keyword-case
 $pf-global--FontFamily--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--heading--sans-serif: $pf-global--FontFamily--sans-serif;
 $pf-global--FontFamily--monospace: "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace !default;
+$pf-global--FontFamily--redhatfont--sans-serif: "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
+$pf-global--FontFamily--redhatfont--heading--sans-serif: "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
 // stylelint-enable value-keyword-case
 
 // Font size
 $pf-global--FontSize--4xl: pf-font-prem(36px) !default;
 $pf-global--FontSize--3xl: pf-font-prem(28px) !default;
 $pf-global--FontSize--2xl: pf-font-prem(24px) !default;
-$pf-global--FontSize--xl: pf-font-prem(21px) !default;
+$pf-global--FontSize--xl: pf-font-prem(20px) !default;
 $pf-global--FontSize--lg: pf-font-prem(18px) !default;
 $pf-global--FontSize--md: pf-font-prem(16px) !default;
 $pf-global--FontSize--sm: pf-font-prem(14px) !default;
@@ -197,6 +200,8 @@ $pf-global--FontWeight--light: 300 !default;
 $pf-global--FontWeight--normal: 400 !default;
 $pf-global--FontWeight--semi-bold: 500 !default;
 $pf-global--FontWeight--bold: 600 !default;
+$pf-global--FontWeight--redhatfont--bold: 700 !default;
+
 
 // Line height
 $pf-global--LineHeight--sm: 1.3 !default;

src/site/_site/FullPageExampleLayout/index.js

@@ -5,7 +5,7 @@ export default ({ children }) => (
   <div>
     <Helmet>
       <title>PatternFly 4</title>
-      <html lang="en-US" />
+      <html lang="en-US" className="pf-m-redhat-font" />
     </Helmet>
     <div>{children}</div>
   </div>

src/site/_site/Layout/index.js

@@ -58,7 +58,7 @@ export default ({ children }) => (
         <div className="layout">
           <Helmet>
             <title>PatternFly 4</title>
-            <html lang="en-US" />
+            <html lang="en-US" className="pf-m-redhat-font" />
           </Helmet>
           <header className="layout__header">
             <h1>

src/site/_site/Navigation/styles.scss

@@ -42,7 +42,6 @@
 
   &:focus,
   &:hover {
-    font-weight: 500;
     color: var(--pf-global--link--Color);
     text-decoration: none;
   }