From cfee0f48a758e970643e1a96aa07880240cc7b67 Mon Sep 17 00:00:00 2001 From: JD Welch Date: Tue, 3 Mar 2020 21:49:38 +0100 Subject: [PATCH 1/2] Use Red Hat Display & Red Hat Text faces MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit + adds CDN-hosted version of RH Display / RH Text + applies these faces to theme + s/‘bold’/700/ throughout Signed-off-by: JD Welch --- frontend/packages/app/public/index.html | 4 ++++ .../packages/core/src/theme/BackstageTheme.js | 23 +++++++++++++++---- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/frontend/packages/app/public/index.html b/frontend/packages/app/public/index.html index 49fd768c53..e6430f63d5 100644 --- a/frontend/packages/app/public/index.html +++ b/frontend/packages/app/public/index.html @@ -51,6 +51,10 @@ href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5" /> + Backstage diff --git a/frontend/packages/core/src/theme/BackstageTheme.js b/frontend/packages/core/src/theme/BackstageTheme.js index 1c0f4cd2b7..54571b8102 100644 --- a/frontend/packages/core/src/theme/BackstageTheme.js +++ b/frontend/packages/core/src/theme/BackstageTheme.js @@ -27,6 +27,9 @@ export const COLORS = { }, }; +const displayFace = "Red Hat Display"; +const textFace = "Red Hat Text"; + const extendedThemeConfig = { props: { MuiGrid: { @@ -81,58 +84,70 @@ const extendedThemeConfig = { background: '#333333', }, typography: { + // This feels bad, but is effective + fontFamily: textFace, h4: { // Page name/heading | Dialog titles + fontFamily: displayFace, fontSize: 48, color: '#2D2D2D', - fontWeight: 'bold', + fontWeight: 700, }, h3: { // Page titles + fontFamily: displayFace, fontSize: 32, color: '#2D2D2D', - fontWeight: 'bold', + fontWeight: 700, }, h2: { // Card titles | Sub headings in dialogs + fontFamily: displayFace, fontSize: 24, color: '#2D2D2D', - fontWeight: 'bold', + fontWeight: 700, lineHeight: 1.2, marginBottom: 6, }, header3: { // Table headers (ALL CAPS!) + fontFamily: textFace, fontSize: 12, color: '#9E9E9E', }, menuItem1: { // Sidebar menu item + fontFamily: displayFace, fontSize: 16, color: '#828282', - fontWeight: 'bold', + fontWeight: 700, }, menuItem2: { // Dropdown menu items | Form labels | Deep links from cards (Go to...) + fontFamily: textFace, fontSize: 16, color: '#2D2D2D', }, text: { // Table entries | Information/error text/messages | General copy/paragraphs + fontFamily: textFace, fontSize: 13, color: '#2D2D2D', }, links: { // Table entries | Information/error text/messages | General copy/paragraphs + fontFamily: textFace, color: '#509BF5', }, tabSelected: { // Selected tab + fontFamily: textFace, fontSize: 18, color: '#2D2D2D', }, tabUnselected: { // Unselected tab + fontFamily: textFace, fontSize: 18, color: '#9E9E9E', }, From aa03c0c422ef1f270e45fbc9e86009548c56a308 Mon Sep 17 00:00:00 2001 From: JD Welch Date: Wed, 4 Mar 2020 16:08:52 +0100 Subject: [PATCH 2/2] simplify font stack Signed-off-by: JD Welch --- frontend/packages/app/public/index.html | 4 ---- .../packages/core/src/theme/BackstageTheme.js | 22 ++++++------------- 2 files changed, 7 insertions(+), 19 deletions(-) diff --git a/frontend/packages/app/public/index.html b/frontend/packages/app/public/index.html index e6430f63d5..49fd768c53 100644 --- a/frontend/packages/app/public/index.html +++ b/frontend/packages/app/public/index.html @@ -51,10 +51,6 @@ href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5" /> - Backstage diff --git a/frontend/packages/core/src/theme/BackstageTheme.js b/frontend/packages/core/src/theme/BackstageTheme.js index 54571b8102..2e5aef94ac 100644 --- a/frontend/packages/core/src/theme/BackstageTheme.js +++ b/frontend/packages/core/src/theme/BackstageTheme.js @@ -27,9 +27,6 @@ export const COLORS = { }, }; -const displayFace = "Red Hat Display"; -const textFace = "Red Hat Text"; - const extendedThemeConfig = { props: { MuiGrid: { @@ -84,25 +81,27 @@ const extendedThemeConfig = { background: '#333333', }, typography: { - // This feels bad, but is effective - fontFamily: textFace, + fontFamily: [ + '"Helvetica Neue"', + 'Helvetica', + 'Roboto', + 'Arial', + 'sans-serif', + ].join(','), h4: { // Page name/heading | Dialog titles - fontFamily: displayFace, fontSize: 48, color: '#2D2D2D', fontWeight: 700, }, h3: { // Page titles - fontFamily: displayFace, fontSize: 32, color: '#2D2D2D', fontWeight: 700, }, h2: { // Card titles | Sub headings in dialogs - fontFamily: displayFace, fontSize: 24, color: '#2D2D2D', fontWeight: 700, @@ -111,43 +110,36 @@ const extendedThemeConfig = { }, header3: { // Table headers (ALL CAPS!) - fontFamily: textFace, fontSize: 12, color: '#9E9E9E', }, menuItem1: { // Sidebar menu item - fontFamily: displayFace, fontSize: 16, color: '#828282', fontWeight: 700, }, menuItem2: { // Dropdown menu items | Form labels | Deep links from cards (Go to...) - fontFamily: textFace, fontSize: 16, color: '#2D2D2D', }, text: { // Table entries | Information/error text/messages | General copy/paragraphs - fontFamily: textFace, fontSize: 13, color: '#2D2D2D', }, links: { // Table entries | Information/error text/messages | General copy/paragraphs - fontFamily: textFace, color: '#509BF5', }, tabSelected: { // Selected tab - fontFamily: textFace, fontSize: 18, color: '#2D2D2D', }, tabUnselected: { // Unselected tab - fontFamily: textFace, fontSize: 18, color: '#9E9E9E', },