From cfee0f48a758e970643e1a96aa07880240cc7b67 Mon Sep 17 00:00:00 2001 From: JD Welch Date: Tue, 3 Mar 2020 21:49:38 +0100 Subject: [PATCH] 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', },