Repository: uber-web/baseui (js)

Issue:
[Proposal] Use system font stack for Base UI
Design is revisiting the type for the internal version of Base UI, and as part of that we'd like to take a stronger opinion on a typeface for the open-source version, i.e. using the system font stack instead of Helvetica.

Looking at what the new type looks like compared to various other typefaces (San Francisco, Helvetica) you can see, the new font for body text is proportionally similar to San Francisco, which would help make the open-source and non-open-source versions look more consistent, at least on Macs. And, as a plus, it would help make re-creating layouts much easier :)

Would love to hear some thoughts—we're still in the early stages of all of this.

Pull request:
Change default type ramp to be consistent with Uber move theme
Hi all!

There's a few small PRs I want to open to help sync type styles with what designers currently use. The first step is to get both the internal and external type ramps consistent with each other.

This way we can tweak type styles without any negative side effects to the OS version of baseui and vice versa. In addition, fixes #226 so the metrics of the type we use match up better.

I suppose this is technically a breaking change...but I'd rather rip the bandaid off sooner so we can keep things in sync.

#### Fixed Issues?

#226 

#### License

MIT


Patch:
diff --git a/src/themes/creator.js b/src/themes/creator.js
index cbb58f4e2..421e80112 100644
--- a/src/themes/creator.js
+++ b/src/themes/creator.js
@@ -222,25 +222,25 @@ export default function createTheme(
         fontFamily: primitives.primaryFontFamily,
         fontSize: '14px',
         fontWeight: 'normal',
-        lineHeight: '24px',
+        lineHeight: '20px',
       },
       font350: {
         fontFamily: primitives.primaryFontFamily,
         fontSize: '14px',
         fontWeight: 'bold',
-        lineHeight: '24px',
+        lineHeight: '20px',
       },
       font400: {
         fontFamily: primitives.primaryFontFamily,
         fontSize: '16px',
         fontWeight: 'normal',
-        lineHeight: '28px',
+        lineHeight: '24px',
       },
       font450: {
         fontFamily: primitives.primaryFontFamily,
         fontSize: '16px',
         fontWeight: 'bold',
-        lineHeight: '28px',
+        lineHeight: '24px',
       },
       font500: {
         fontFamily: primitives.primaryFontFamily,
@@ -256,27 +256,33 @@ export default function createTheme(
       },
       font700: {
         fontFamily: primitives.primaryFontFamily,
-        fontSize: '28px',
+        fontSize: '32px',
         fontWeight: 'bold',
-        lineHeight: '40px',
+        lineHeight: '48px',
       },
       font800: {
         fontFamily: primitives.primaryFontFamily,
-        fontSize: '32px',
+        fontSize: '40px',
         fontWeight: 'bold',
-        lineHeight: '48px',
+        lineHeight: '56px',
       },
       font900: {
         fontFamily: primitives.primaryFontFamily,
-        fontSize: '40px',
+        fontSize: '52px',
         fontWeight: 'bold',
-        lineHeight: '56px',
+        lineHeight: '68px',
       },
       font1000: {
         fontFamily: primitives.primaryFontFamily,
-        fontSize: '56px',
+        fontSize: '72px',
+        fontWeight: 'normal',
+        lineHeight: '96px',
+      },
+      font1100: {
+        fontFamily: primitives.primaryFontFamily,
+        fontSize: '96px',
         fontWeight: 'normal',
-        lineHeight: '80px',
+        lineHeight: '116px',
       },
     },
     sizing: {
diff --git a/src/themes/light-theme-primitives.js b/src/themes/light-theme-primitives.js
index 31e73e200..1314acd87 100644
--- a/src/themes/light-theme-primitives.js
+++ b/src/themes/light-theme-primitives.js
@@ -59,5 +59,5 @@ export const primitives: PrimitivesT = {
   rating200: '#FFE1A5',
   rating400: '#FFC043',
 
-  primaryFontFamily: '"Helvetica Neue", arial, sans-serif',
+  primaryFontFamily: 'system-ui, "Helvetica Neue", arial, sans-serif',
 };


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 bda804862..6970d47e2 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": "\\"Helvetica Neue\\", arial, sans-serif",
+  "fontFamily": "system-ui, \\"Helvetica Neue\\", arial, sans-serif",
   "fontSize": "12px",
   "fontWeight": "normal",
   "lineHeight": "20px",