fix(fonts): set heading & display font weights to 700 (uber#5087)

* fix(fonts): set heading & display font weights to 700

* test(vrt): update visual snapshots for e33ec15 [skip ci] (uber#5088)

Co-authored-by: UberOpenSourceBot <[email protected]>

* test(vrt): update visual snapshots for 0b56802 [skip ci] (uber#5090)

Co-authored-by: UberOpenSourceBot <[email protected]>

* test(vrt): update visual snapshots for 4fef950 [skip ci] (uber#5091)

Co-authored-by: UberOpenSourceBot <[email protected]>

* chore(fonts): update font-family for display and header to UberMove

Previously these were set to UberMoveText

* test(vrt): update visual snapshots for f81bd31 (uber#5112)

Co-authored-by: UberOpenSourceBot <[email protected]>

Co-authored-by: UberOpenSourceBot <[email protected]>
Co-authored-by: UberOpenSourceBot <[email protected]>

documentation-site/cheat-sheet.js

@@ -1579,109 +1579,124 @@ const outlines = [
         lineStart: 22,
         children: [
           { name: 'escapeKeyHandlers', lineStart: 23 },
-          { name: 'docClickHandlers', lineStart: 24 },
+          { name: 'keyDownHandlers', lineStart: 24 },
+          { name: 'keyUpHandlers', lineStart: 25 },
+          { name: 'keyPressHandlers', lineStart: 26 },
+          { name: 'docClickHandlers', lineStart: 27 },
         ],
       },
       {
         name: 'LayersContextProps',
-        lineStart: 27,
+        lineStart: 30,
         children: [
-          { name: 'host', lineStart: 28 },
-          { name: 'zIndex', lineStart: 29 },
-          { name: 'addEscapeHandler', lineStart: 30 },
-          { name: 'removeEscapeHandler', lineStart: 31 },
-          { name: 'addDocClickHandler', lineStart: 32 },
-          { name: 'removeDocClickHandler', lineStart: 33 },
+          { name: 'host', lineStart: 31 },
+          { name: 'zIndex', lineStart: 32 },
+          { name: 'addEscapeHandler', lineStart: 33 },
+          { name: 'removeEscapeHandler', lineStart: 34 },
+          { name: 'addKeyDownHandler', lineStart: 35 },
+          { name: 'removeKeyDownHandler', lineStart: 36 },
+          { name: 'addKeyUpHandler', lineStart: 37 },
+          { name: 'removeKeyUpHandler', lineStart: 38 },
+          { name: 'addKeyPressHandler', lineStart: 39 },
+          { name: 'removeKeyPressHandler', lineStart: 40 },
+          { name: 'addDocClickHandler', lineStart: 41 },
+          { name: 'removeDocClickHandler', lineStart: 42 },
         ],
       },
       {
         name: 'LayerProps',
-        lineStart: 37,
+        lineStart: 46,
         children: [
-          { name: 'children', lineStart: 39 },
-          { name: 'host', lineStart: 44 },
-          { name: 'index', lineStart: 47 },
-          { name: 'isHoverLayer', lineStart: 50 },
-          { name: 'mountNode', lineStart: 53 },
-          { name: 'onEscape', lineStart: 56 },
-          { name: 'onDocumentClick', lineStart: 59 },
-          { name: 'onMount', lineStart: 61 },
-          { name: 'onUnmount', lineStart: 63 },
-          { name: 'zIndex', lineStart: 66 },
+          { name: 'children', lineStart: 48 },
+          { name: 'host', lineStart: 53 },
+          { name: 'index', lineStart: 56 },
+          { name: 'isHoverLayer', lineStart: 59 },
+          { name: 'mountNode', lineStart: 62 },
+          { name: 'onEscape', lineStart: 65 },
+          { name: 'onKeyDown', lineStart: 68 },
+          { name: 'onKeyUp', lineStart: 71 },
+          { name: 'onKeyPress', lineStart: 74 },
+          { name: 'onDocumentClick', lineStart: 77 },
+          { name: 'onMount', lineStart: 79 },
+          { name: 'onUnmount', lineStart: 81 },
+          { name: 'zIndex', lineStart: 84 },
         ],
       },
       {
         name: 'LayerComponentProps',
-        lineStart: 69,
+        lineStart: 87,
         children: [
-          { name: 'children', lineStart: 70 },
-          { name: 'host', lineStart: 71 },
-          { name: 'index', lineStart: 72 },
-          { name: 'isHoverLayer', lineStart: 73 },
-          { name: 'mountNode', lineStart: 74 },
-          { name: 'onEscape', lineStart: 75 },
-          { name: 'onDocumentClick', lineStart: 76 },
-          { name: 'onMount', lineStart: 77 },
-          { name: 'onUnmount', lineStart: 78 },
-          { name: 'zIndex', lineStart: 79 },
+          { name: 'children', lineStart: 88 },
+          { name: 'host', lineStart: 89 },
+          { name: 'index', lineStart: 90 },
+          { name: 'isHoverLayer', lineStart: 91 },
+          { name: 'mountNode', lineStart: 92 },
+          { name: 'onEscape', lineStart: 93 },
+          { name: 'onKeyDown', lineStart: 94 },
+          { name: 'onKeyUp', lineStart: 95 },
+          { name: 'onKeyPress', lineStart: 96 },
+          { name: 'onDocumentClick', lineStart: 97 },
+          { name: 'onMount', lineStart: 98 },
+          { name: 'onUnmount', lineStart: 99 },
+          { name: 'zIndex', lineStart: 100 },
         ],
       },
-      { name: 'LayerState', lineStart: 82, children: [{ name: 'container', lineStart: 83 }] },
-      { name: 'TetherPlacement', lineStart: 87, children: [] },
+      { name: 'LayerState', lineStart: 103, children: [{ name: 'container', lineStart: 104 }] },
+      { name: 'TetherPlacement', lineStart: 108, children: [] },
       {
         name: 'NormalizedOffset',
-        lineStart: 89,
+        lineStart: 110,
         children: [
-          { name: 'top', lineStart: 90 },
-          { name: 'left', lineStart: 91 },
+          { name: 'top', lineStart: 111 },
+          { name: 'left', lineStart: 112 },
         ],
       },
       {
         name: 'NormalizedOffsets',
-        lineStart: 94,
+        lineStart: 115,
         children: [
-          { name: 'arrow', lineStart: 95 },
-          { name: 'popper', lineStart: 96 },
+          { name: 'arrow', lineStart: 116 },
+          { name: 'popper', lineStart: 117 },
         ],
       },
       {
         name: 'PopperOffset',
-        lineStart: 99,
+        lineStart: 120,
         children: [
-          { name: 'top', lineStart: 100 },
-          { name: 'left', lineStart: 101 },
+          { name: 'top', lineStart: 121 },
+          { name: 'left', lineStart: 122 },
         ],
       },
       {
         name: 'PopperDataObject',
-        lineStart: 104,
+        lineStart: 125,
         children: [
-          { name: 'offsets', lineStart: 105 },
-          { name: 'placement', lineStart: 109 },
+          { name: 'offsets', lineStart: 126 },
+          { name: 'placement', lineStart: 130 },
         ],
       },
       {
         name: 'PopperOptions',
-        lineStart: 112,
+        lineStart: 133,
         children: [
-          { name: 'placement', lineStart: 113 },
-          { name: 'modifiers', lineStart: 114 },
+          { name: 'placement', lineStart: 134 },
+          { name: 'modifiers', lineStart: 135 },
         ],
       },
       {
         name: 'TetherProps',
-        lineStart: 124,
+        lineStart: 145,
         children: [
-          { name: 'anchorRef', lineStart: 126 },
-          { name: 'arrowRef', lineStart: 129 },
-          { name: 'popperRef', lineStart: 131 },
-          { name: 'children', lineStart: 133 },
-          { name: 'onPopperUpdate', lineStart: 135 },
-          { name: 'placement', lineStart: 137 },
-          { name: 'popperOptions', lineStart: 142 },
+          { name: 'anchorRef', lineStart: 147 },
+          { name: 'arrowRef', lineStart: 150 },
+          { name: 'popperRef', lineStart: 152 },
+          { name: 'children', lineStart: 154 },
+          { name: 'onPopperUpdate', lineStart: 156 },
+          { name: 'placement', lineStart: 158 },
+          { name: 'popperOptions', lineStart: 163 },
         ],
       },
-      { name: 'TetherState', lineStart: 145, children: [{ name: 'isMounted', lineStart: 146 }] },
+      { name: 'TetherState', lineStart: 166, children: [{ name: 'isMounted', lineStart: 167 }] },
     ],
   },
   {

src/themes/move-theme/typography.js.flow

@@ -21,10 +21,22 @@ export const typography = {
   font1350: { fontFamily: secondaryFontFamily },
   font1250: { fontFamily: secondaryFontFamily },
   font1150: { fontFamily: secondaryFontFamily },
+  font1050: { fontFamily: secondaryFontFamily },
+  font950: { fontFamily: secondaryFontFamily },
+  font850: { fontFamily: secondaryFontFamily },
+  font750: { fontFamily: secondaryFontFamily },
+  font650: { fontFamily: secondaryFontFamily },
+  font550: { fontFamily: secondaryFontFamily },
   DisplayLarge: { fontFamily: secondaryFontFamily },
   DisplayMedium: { fontFamily: secondaryFontFamily },
   DisplaySmall: { fontFamily: secondaryFontFamily },
   DisplayXSmall: { fontFamily: secondaryFontFamily },
+  HeadingXXLarge: { fontFamily: secondaryFontFamily },
+  HeadingXLarge: { fontFamily: secondaryFontFamily },
+  HeadingLarge: { fontFamily: secondaryFontFamily },
+  HeadingMedium: { fontFamily: secondaryFontFamily },
+  HeadingSmall: { fontFamily: secondaryFontFamily },
+  HeadingXSmall: { fontFamily: secondaryFontFamily },
 
   MonoParagraphXSmall: { fontFamily: monoFontFamily },
   MonoParagraphSmall: { fontFamily: monoFontFamily },

src/themes/move-theme/typography.ts

@@ -20,10 +20,22 @@ export const typography = {
   font1350: { fontFamily: secondaryFontFamily },
   font1250: { fontFamily: secondaryFontFamily },
   font1150: { fontFamily: secondaryFontFamily },
+  font1050: { fontFamily: secondaryFontFamily },
+  font950: { fontFamily: secondaryFontFamily },
+  font850: { fontFamily: secondaryFontFamily },
+  font750: { fontFamily: secondaryFontFamily },
+  font650: { fontFamily: secondaryFontFamily },
+  font550: { fontFamily: secondaryFontFamily },
   DisplayLarge: { fontFamily: secondaryFontFamily },
   DisplayMedium: { fontFamily: secondaryFontFamily },
   DisplaySmall: { fontFamily: secondaryFontFamily },
   DisplayXSmall: { fontFamily: secondaryFontFamily },
+  HeadingXXLarge: { fontFamily: secondaryFontFamily },
+  HeadingXLarge: { fontFamily: secondaryFontFamily },
+  HeadingLarge: { fontFamily: secondaryFontFamily },
+  HeadingMedium: { fontFamily: secondaryFontFamily },
+  HeadingSmall: { fontFamily: secondaryFontFamily },
+  HeadingXSmall: { fontFamily: secondaryFontFamily },
 
   MonoParagraphXSmall: { fontFamily: monoFontFamily },
   MonoParagraphSmall: { fontFamily: monoFontFamily },

src/themes/shared/typography.js.flow

@@ -65,61 +65,61 @@ export default (fontTokens?: FontTokensT = defaultFontTokens): TypographyT => {
   const font550 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '20px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '28px',
   };
   const font650 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '24px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '32px',
   };
   const font750 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '28px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '36px',
   };
   const font850 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '32px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '40px',
   };
   const font950 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px',
   };
   const font1050 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '40px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px',
   };
   const font1150 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px',
   };
   const font1250 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '44px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px',
   };
   const font1350 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '52px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '64px',
   };
   const font1450 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '96px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '112px',
   };
 

src/themes/shared/typography.ts

@@ -64,61 +64,61 @@ export default (fontTokens: FontTokens = defaultFontTokens): Typography => {
   const font550: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '20px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '28px',
   };
   const font650: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '24px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '32px',
   };
   const font750: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '28px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '36px',
   };
   const font850: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '32px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '40px',
   };
   const font950: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px',
   };
   const font1050: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '40px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px',
   };
   const font1150: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px',
   };
   const font1250: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '44px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px',
   };
   const font1350: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '52px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '64px',
   };
   const font1450: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '96px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '112px',
   };