Repository: uber-web/baseui
Pull request #650 (2018-12-13 23:13:25)

fix: Type stack fixes
Addresses @gergelyke's comments in #645 and changes fallback fonts to be more consistent.

Removes Open Sans from our font stack and replaces it with `system-ui`, since from my knowledge Open Sans doesn't come preinstalled on any OS and is therefore redundant.


Patch:
diff --git a/src/themes/dark-theme-primitives.js b/src/themes/dark-theme-primitives.js
index 9bc781991..cdb075b6b 100644
--- a/src/themes/dark-theme-primitives.js
+++ b/src/themes/dark-theme-primitives.js
@@ -59,5 +59,6 @@ export const primitives: PrimitivesT = {
   rating200: '#FFE1A5',
   rating400: '#FFC043',
 
-  primaryFontFamily: '"Helvetica Neue", arial, sans-serif',
+  primaryFontFamily:
+    'system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif',
 };
diff --git a/src/themes/light-theme-primitives.js b/src/themes/light-theme-primitives.js
index 1314acd87..ce08a9137 100644
--- a/src/themes/light-theme-primitives.js
+++ b/src/themes/light-theme-primitives.js
@@ -59,5 +59,6 @@ export const primitives: PrimitivesT = {
   rating200: '#FFE1A5',
   rating400: '#FFC043',
 
-  primaryFontFamily: 'system-ui, "Helvetica Neue", arial, sans-serif',
+  primaryFontFamily:
+    'system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif',
 };
diff --git a/src/themes/light-theme-with-move.js b/src/themes/light-theme-with-move.js
index 7482a1bb6..611c0eb76 100644
--- a/src/themes/light-theme-with-move.js
+++ b/src/themes/light-theme-with-move.js
@@ -9,10 +9,10 @@ import createTheme from './creator.js';
 import {primitives as lightThemePrimitives} from './light-theme-primitives.js';
 
 const primaryFontFamily =
-  'UberMoveText, "Open Sans", "Helvetica Neue", Helvetica, sans-serif';
+  'UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif';
 
 const secondaryFontFamily =
-  'UberMove, UberMoveText, "Open Sans", "Helvetica Neue", Helvetica, sans-serif';
+  'UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif';
 
 export const LightThemeMove = createTheme(
   {
@@ -21,83 +21,32 @@ export const LightThemeMove = createTheme(
   },
   {
     typography: {
-      font200: {
-        fontFamily: primaryFontFamily,
-        fontSize: '12px',
-        fontWeight: 'normal',
-        lineHeight: '20px',
-      },
       font250: {
-        fontFamily: primaryFontFamily,
-        fontSize: '12px',
         fontWeight: 500,
-        lineHeight: '20px',
-      },
-      font300: {
-        fontFamily: primaryFontFamily,
-        fontSize: '14px',
-        fontWeight: 'normal',
-        lineHeight: '20px',
       },
       font350: {
-        fontFamily: primaryFontFamily,
-        fontSize: '14px',
         fontWeight: 500,
-        lineHeight: '20px',
-      },
-      font400: {
-        fontFamily: primaryFontFamily,
-        fontSize: '16px',
-        fontWeight: 'normal',
-        lineHeight: '24px',
       },
       font450: {
-        fontFamily: primaryFontFamily,
-        fontSize: '16px',
         fontWeight: 500,
-        lineHeight: '24px',
       },
       font500: {
-        fontFamily: primaryFontFamily,
-        fontSize: '20px',
         fontWeight: 500,
-        lineHeight: '28px',
       },
       font600: {
-        fontFamily: primaryFontFamily,
-        fontSize: '24px',
         fontWeight: 500,
-        lineHeight: '36px',
       },
       font700: {
-        fontFamily: primaryFontFamily,
-        fontSize: '32px',
         fontWeight: 500,
-        lineHeight: '48px',
       },
       font800: {
-        fontFamily: primaryFontFamily,
-        fontSize: '40px',
         fontWeight: 500,
-        lineHeight: '56px',
       },
       font900: {
-        fontFamily: primaryFontFamily,
-        fontSize: '52px',
         fontWeight: 500,
-        lineHeight: '68px',
-      },
-      font1000: {
-        fontFamily: primaryFontFamily,
-        fontSize: '72px',
-        fontWeight: 'normal',
-        lineHeight: '96px',
       },
       font1100: {
         fontFamily: secondaryFontFamily,
-        fontSize: '96px',
-        fontWeight: 'normal',
-        lineHeight: '116px',
       },
     },
   },


Test patch:
diff --git a/src/input/__tests__/__snapshots__/styled-components.test.js.snap b/src/input/__tests__/__snapshots__/styled-components.test.js.snap
index 6970d47e2..4740a4ee1 100644
--- a/src/input/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/input/__tests__/__snapshots__/styled-components.test.js.snap
@@ -239,7 +239,7 @@ Object {
   "boxSizing": "border-box",
   "color": "#B3B3B3",
   "display": "flex",
-  "fontFamily": "system-ui, \\"Helvetica Neue\\", arial, sans-serif",
+  "fontFamily": "system-ui, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
   "fontSize": "12px",
   "fontWeight": "normal",
   "lineHeight": "20px",