diff --git a/src/patternfly/_fonts.scss b/src/patternfly/_fonts.scss index 02896de21f..f6eadf9d4d 100644 --- a/src/patternfly/_fonts.scss +++ b/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 */ diff --git a/src/patternfly/_variables.scss b/src/patternfly/_variables.scss index ae7b620bd6..07ccd2fa83 100644 --- a/src/patternfly/_variables.scss +++ b/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); +} diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Black.eot b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Black.eot new file mode 100755 index 0000000000..045c5ae5c9 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Black.eot differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff new file mode 100755 index 0000000000..907fb1f078 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff2 b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff2 new file mode 100755 index 0000000000..0d756fe73e Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.eot b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.eot new file mode 100755 index 0000000000..b7a501fcc4 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.eot differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff new file mode 100755 index 0000000000..a12336cf54 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff2 b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff2 new file mode 100755 index 0000000000..f35b3b8444 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.eot b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.eot new file mode 100755 index 0000000000..193d2d39ad Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.eot differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff new file mode 100755 index 0000000000..9667bd020b Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2 b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2 new file mode 100755 index 0000000000..6196492a4f Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.eot b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.eot new file mode 100755 index 0000000000..3f7f27240a Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.eot differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff new file mode 100755 index 0000000000..d7afccdf47 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2 b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2 new file mode 100755 index 0000000000..9c076fbe8c Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.eot b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.eot new file mode 100755 index 0000000000..2f5b8069d3 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.eot differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff new file mode 100755 index 0000000000..5cd4c650f6 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff2 b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff2 new file mode 100755 index 0000000000..ce31031c8c Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.eot b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.eot new file mode 100755 index 0000000000..9216ffa5e8 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.eot differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff new file mode 100755 index 0000000000..0ea0c439c4 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2 b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2 new file mode 100755 index 0000000000..232b3f794c Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.eot b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.eot new file mode 100755 index 0000000000..2d31a7d244 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.eot differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff new file mode 100755 index 0000000000..c0cf1aa767 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2 b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2 new file mode 100755 index 0000000000..1232e699df Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.eot b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.eot new file mode 100755 index 0000000000..293cbe00f6 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.eot differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff new file mode 100755 index 0000000000..b71827921f Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff differ diff --git a/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2 b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2 new file mode 100755 index 0000000000..bffb15c80e Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Bold.eot b/src/patternfly/assets/fonts/RedHatText/RedHatText-Bold.eot new file mode 100755 index 0000000000..7c48e6322d Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Bold.eot differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Bold.woff b/src/patternfly/assets/fonts/RedHatText/RedHatText-Bold.woff new file mode 100755 index 0000000000..4a5a0acdbb Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Bold.woff differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Bold.woff2 b/src/patternfly/assets/fonts/RedHatText/RedHatText-Bold.woff2 new file mode 100755 index 0000000000..832ed37967 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Bold.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-BoldItalic.eot b/src/patternfly/assets/fonts/RedHatText/RedHatText-BoldItalic.eot new file mode 100755 index 0000000000..51acfc8601 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-BoldItalic.eot differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-BoldItalic.woff b/src/patternfly/assets/fonts/RedHatText/RedHatText-BoldItalic.woff new file mode 100755 index 0000000000..109f6908f8 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-BoldItalic.woff differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-BoldItalic.woff2 b/src/patternfly/assets/fonts/RedHatText/RedHatText-BoldItalic.woff2 new file mode 100755 index 0000000000..3908020589 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-BoldItalic.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Italic.eot b/src/patternfly/assets/fonts/RedHatText/RedHatText-Italic.eot new file mode 100755 index 0000000000..89a2fea090 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Italic.eot differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Italic.woff b/src/patternfly/assets/fonts/RedHatText/RedHatText-Italic.woff new file mode 100755 index 0000000000..7b755e3231 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Italic.woff differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Italic.woff2 b/src/patternfly/assets/fonts/RedHatText/RedHatText-Italic.woff2 new file mode 100755 index 0000000000..869167f7d9 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Italic.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Medium.eot b/src/patternfly/assets/fonts/RedHatText/RedHatText-Medium.eot new file mode 100755 index 0000000000..4e40dcc2cd Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Medium.eot differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Medium.woff b/src/patternfly/assets/fonts/RedHatText/RedHatText-Medium.woff new file mode 100755 index 0000000000..8e43cb9a36 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Medium.woff differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Medium.woff2 b/src/patternfly/assets/fonts/RedHatText/RedHatText-Medium.woff2 new file mode 100755 index 0000000000..3332bb3105 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Medium.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-MediumItalic.eot b/src/patternfly/assets/fonts/RedHatText/RedHatText-MediumItalic.eot new file mode 100755 index 0000000000..1fe07b1d13 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-MediumItalic.eot differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-MediumItalic.woff b/src/patternfly/assets/fonts/RedHatText/RedHatText-MediumItalic.woff new file mode 100755 index 0000000000..9522857ed6 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-MediumItalic.woff differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-MediumItalic.woff2 b/src/patternfly/assets/fonts/RedHatText/RedHatText-MediumItalic.woff2 new file mode 100755 index 0000000000..4c94c642ec Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-MediumItalic.woff2 differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Regular.eot b/src/patternfly/assets/fonts/RedHatText/RedHatText-Regular.eot new file mode 100755 index 0000000000..9cb893aaa0 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Regular.eot differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Regular.woff b/src/patternfly/assets/fonts/RedHatText/RedHatText-Regular.woff new file mode 100755 index 0000000000..15672902b9 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Regular.woff differ diff --git a/src/patternfly/assets/fonts/RedHatText/RedHatText-Regular.woff2 b/src/patternfly/assets/fonts/RedHatText/RedHatText-Regular.woff2 new file mode 100755 index 0000000000..c160844e82 Binary files /dev/null and b/src/patternfly/assets/fonts/RedHatText/RedHatText-Regular.woff2 differ diff --git a/src/patternfly/assets/images/PF-Masthead-Logo.svg b/src/patternfly/assets/images/PF-Masthead-Logo.svg new file mode 100644 index 0000000000..3f837448ea --- /dev/null +++ b/src/patternfly/assets/images/PF-Masthead-Logo.svg @@ -0,0 +1 @@ + diff --git a/src/patternfly/components/Alert/alert.scss b/src/patternfly/components/Alert/alert.scss index 59869b0cd2..78886c7901 100644 --- a/src/patternfly/components/Alert/alert.scss +++ b/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); + } +} diff --git a/src/patternfly/components/Breadcrumb/breadcrumb.scss b/src/patternfly/components/Breadcrumb/breadcrumb.scss index df6421b12c..de219a8866 100644 --- a/src/patternfly/components/Breadcrumb/breadcrumb.scss +++ b/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); + } +} diff --git a/src/patternfly/components/Button/button.scss b/src/patternfly/components/Button/button.scss index 76cfeed812..50aaf06767 100644 --- a/src/patternfly/components/Button/button.scss +++ b/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); + } +} diff --git a/src/patternfly/components/Card/card.scss b/src/patternfly/components/Card/card.scss index 22c1c92283..be0eb1cb6a 100644 --- a/src/patternfly/components/Card/card.scss +++ b/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); + } +} diff --git a/src/patternfly/components/Content/content.scss b/src/patternfly/components/Content/content.scss index 54c2a4bd23..c95b65c134 100644 --- a/src/patternfly/components/Content/content.scss +++ b/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); + } +} diff --git a/src/patternfly/components/EmptyState/empty-state.scss b/src/patternfly/components/EmptyState/empty-state.scss index 2d307f37b1..1e4714d375 100644 --- a/src/patternfly/components/EmptyState/empty-state.scss +++ b/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); + } + } +} diff --git a/src/patternfly/components/Expandable/expandable.scss b/src/patternfly/components/Expandable/expandable.scss index 66e8cb0a2a..79d2c9fcc1 100644 --- a/src/patternfly/components/Expandable/expandable.scss +++ b/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); + } +} diff --git a/src/patternfly/components/Title/title.scss b/src/patternfly/components/Title/title.scss index 446d485ffb..5b604e3eba 100644 --- a/src/patternfly/components/Title/title.scss +++ b/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); + } +} diff --git a/src/patternfly/demos/CardView/examples/card-view-demo-example.hbs b/src/patternfly/demos/CardView/examples/card-view-demo-example.hbs index e6c9c7b412..2e60bd0827 100644 --- a/src/patternfly/demos/CardView/examples/card-view-demo-example.hbs +++ b/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}} diff --git a/src/patternfly/demos/DataList/data-list-page-header.hbs b/src/patternfly/demos/DataList/data-list-page-header.hbs index 4090601c9f..7528c85386 100644 --- a/src/patternfly/demos/DataList/data-list-page-header.hbs +++ b/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}} diff --git a/src/patternfly/demos/DataTable/data-table-page-header.hbs b/src/patternfly/demos/DataTable/data-table-page-header.hbs index 4090601c9f..7528c85386 100644 --- a/src/patternfly/demos/DataTable/data-table-page-header.hbs +++ b/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}} diff --git a/src/patternfly/demos/Page/examples/page-component-expandable-nav-example.hbs b/src/patternfly/demos/Page/examples/page-component-expandable-nav-example.hbs index f13f23e122..997e5f1edc 100644 --- a/src/patternfly/demos/Page/examples/page-component-expandable-nav-example.hbs +++ b/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}} diff --git a/src/patternfly/demos/Page/examples/page-component-grouped-nav-example.hbs b/src/patternfly/demos/Page/examples/page-component-grouped-nav-example.hbs index 62e9239a78..55e50a391a 100644 --- a/src/patternfly/demos/Page/examples/page-component-grouped-nav-example.hbs +++ b/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}} diff --git a/src/patternfly/demos/Page/examples/page-component-horizontal-nav-example.hbs b/src/patternfly/demos/Page/examples/page-component-horizontal-nav-example.hbs index 9ce512c779..f55515bc21 100644 --- a/src/patternfly/demos/Page/examples/page-component-horizontal-nav-example.hbs +++ b/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}} diff --git a/src/patternfly/demos/Page/examples/page-component-tertiary-nav-example.hbs b/src/patternfly/demos/Page/examples/page-component-tertiary-nav-example.hbs index 78f9823800..fe74abe564 100644 --- a/src/patternfly/demos/Page/examples/page-component-tertiary-nav-example.hbs +++ b/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}} diff --git a/src/patternfly/demos/Page/page-demo-default.hbs b/src/patternfly/demos/Page/page-demo-default.hbs index ca46780759..3179c74fd6 100644 --- a/src/patternfly/demos/Page/page-demo-default.hbs +++ b/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}} diff --git a/src/patternfly/sass-utilities/mixins.scss b/src/patternfly/sass-utilities/mixins.scss index 95e55c31b8..e5a478137b 100644 --- a/src/patternfly/sass-utilities/mixins.scss +++ b/src/patternfly/sass-utilities/mixins.scss @@ -165,3 +165,9 @@ @extend %pf-hidden-visible; } + +@mixin pf-m-redhat-font { + .pf-m-redhat-font { + @content; + } +} diff --git a/src/patternfly/sass-utilities/scss-variables.scss b/src/patternfly/sass-utilities/scss-variables.scss index 96ef8c409c..ccfe9bf323 100644 --- a/src/patternfly/sass-utilities/scss-variables.scss +++ b/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; diff --git a/src/site/_site/FullPageExampleLayout/index.js b/src/site/_site/FullPageExampleLayout/index.js index be7431774f..cc4be4f68b 100644 --- a/src/site/_site/FullPageExampleLayout/index.js +++ b/src/site/_site/FullPageExampleLayout/index.js @@ -5,7 +5,7 @@ export default ({ children }) => (
PatternFly 4 - +
{children}
diff --git a/src/site/_site/Layout/index.js b/src/site/_site/Layout/index.js index a60dc70df1..7f44288752 100644 --- a/src/site/_site/Layout/index.js +++ b/src/site/_site/Layout/index.js @@ -58,7 +58,7 @@ export default ({ children }) => (
PatternFly 4 - +

diff --git a/src/site/_site/Navigation/styles.scss b/src/site/_site/Navigation/styles.scss index b7aedc146d..f0c7d19478 100644 --- a/src/site/_site/Navigation/styles.scss +++ b/src/site/_site/Navigation/styles.scss @@ -42,7 +42,6 @@ &:focus, &:hover { - font-weight: 500; color: var(--pf-global--link--Color); text-decoration: none; } diff --git a/static/assets/images/PF-Masthead-Logo.svg b/static/assets/images/PF-Masthead-Logo.svg new file mode 100644 index 0000000000..3f837448ea --- /dev/null +++ b/static/assets/images/PF-Masthead-Logo.svg @@ -0,0 +1 @@ +