Use Red Hat Display & Red Hat Text faces

+ adds CDN-hosted version of RH Display / RH Text + applies these faces to theme + s/‘bold’/700/ throughout Signed-off-by: JD Welch <jdwelch@spotify.com>
2020-03-03 21:49:38 +01:00
parent f08fcbec30
commit cfee0f48a7
2 changed files with 23 additions and 4 deletions
@@ -51,6 +51,10 @@
      href="%PUBLIC_URL%/safari-pinned-tab.svg"
      color="#5bbad5"
    />
+    <link 
+      href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@700&family=Red+Hat+Text:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
    <title>Backstage</title>
  </head>
  <body style="margin: 0">
@@ -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',
    },