feat(fonts): add mono font face (uber#3724)

* feat(fonts): add mono font face * fix(storybook): correct font color in dark mode vrts * fix(font): removes files * test(vrt): update visual snapshots for e4f1d44 [skip ci] (uber#3725) Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]>
refrigeratorstory · Sep 8, 2020 · 0144043 · 0144043
1 parent 2584cbb
commit 0144043
Show file tree

Hide file tree

Showing 23 changed files with 573 additions and 74 deletions.
diff --git a/documentation-site/components/api-table.js b/documentation-site/components/api-table.js
@@ -30,8 +30,7 @@ const ApiTable = props => {
         <div
           key={prop}
           className={css({
-            fontFamily:
-              'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+            ...theme.typography.MonoParagraphSmall,
             whiteSpace: 'nowrap',
           })}
         >
@@ -47,6 +46,7 @@ const ApiTable = props => {
             content={
               <div
                 className={css({
+                  ...theme.typography.MonoParagraphSmall,
                   backgroundColor: theme.colors.backgroundSecondary,
                   maxHeight: '300px',
                   maxWidth: '400px',
@@ -56,9 +56,6 @@ const ApiTable = props => {
                   paddingBottom: theme.sizing.scale100,
                   paddingLeft: theme.sizing.scale200,
                   whiteSpace: 'pre',
-                  fontFamily:
-                    'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
-                  fontSize: theme.sizing.scale500,
                 })}
               >
                 {flowTypes[prop]}
@@ -68,8 +65,7 @@ const ApiTable = props => {
             <div
               key={prop}
               className={css({
-                fontFamily:
-                  'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+                ...theme.typography.MonoParagraphSmall,
                 whiteSpace: 'nowrap',
                 textDecoration: 'underline',
               })}
@@ -81,8 +77,7 @@ const ApiTable = props => {
           <div
             key={prop}
             className={css({
-              fontFamily:
-                'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+              ...theme.typography.MonoParagraphSmall,
               whiteSpace: 'nowrap',
             })}
           >

diff --git a/documentation-site/components/gallery.js b/documentation-site/components/gallery.js
@@ -314,9 +314,7 @@ function Thumbnail({children, href}) {
     >
       <div
         className={css({
-          ...theme.typography.font100,
-          fontFamily:
-            'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace',
+          ...theme.typography.MonoParagraphXSmall,
           ...expandBorderStyles(theme.borders.border300),
           borderLeftColor: theme.colors.border,
           borderRightColor: theme.colors.border,

diff --git a/documentation-site/components/markdown-elements.js b/documentation-site/components/markdown-elements.js
@@ -79,20 +79,21 @@ export const Paragraph = (props: Props) => (
 
 export const UnorderedList = (props: Props) => <ul>{props.children}</ul>;
 
-const InlineCode = themedStyled('code', {
-  backgroundColor: 'rgba(27, 31, 35, 0.05)',
-  borderTopLeftRadius: '3px',
-  borderTopRightRadius: '3px',
-  borderBottomRightRadius: '3px',
-  borderBottomLeftRadius: '3px',
-  fontSize: '85%',
-  marginLeft: 0,
-  marginRight: 0,
-  marginTop: 0,
-  marginBottom: 0,
-  padding: '0.2em 0.4em',
-  fontFamily:
-    'SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;',
+const InlineCode = themedStyled<{}>('code', ({$theme}) => {
+  return {
+    ...$theme.typography.MonoParagraphMedium,
+    backgroundColor: 'rgba(27, 31, 35, 0.05)',
+    borderTopLeftRadius: '3px',
+    borderTopRightRadius: '3px',
+    borderBottomRightRadius: '3px',
+    borderBottomLeftRadius: '3px',
+    fontSize: '85%',
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 0,
+    marginBottom: 0,
+    padding: '0.2em 0.4em',
+  };
 });
 
 const Blockquote = themedStyled('blockquote', {

diff --git a/documentation-site/components/theming/common.js b/documentation-site/components/theming/common.js
@@ -15,29 +15,23 @@ import * as React from 'react';
 import {useStyletron, styled} from 'baseui';
 import {LightTheme, DarkTheme} from 'baseui/themes';
 
-const monospaceFontFamily =
-  'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace';
-
 const SubTitle = styled<{}>('span', ({$theme}) => {
   return {
-    ...$theme.typography.LabelSmall,
-    fontFamily: monospaceFontFamily,
+    ...$theme.typography.MonoLabelSmall,
     fontStyle: 'italic',
     color: $theme.colors.contentSecondary,
   };
 });
 
 export const Title = styled<{}>('div', ({$theme}) => {
   return {
-    ...$theme.typography.HeadingXSmall,
-    fontFamily: monospaceFontFamily,
+    ...$theme.typography.MonoHeadingXSmall,
   };
 });
 
 export const Value = styled<{}>('div', ({$theme}) => {
   return {
-    ...$theme.typography.ParagraphSmall,
-    fontFamily: monospaceFontFamily,
+    ...$theme.typography.MonoParagraphSmall,
   };
 });
 

diff --git a/documentation-site/components/yard/type-definition.js b/documentation-site/components/yard/type-definition.js
@@ -407,9 +407,8 @@ function TypeDefinition(props) {
   return (
     <div
       className={css({
+        ...theme.typography.MonoLabelSmall,
         whiteSpace: 'pre',
-        fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
-        fontSize: theme.sizing.scale500,
       })}
     >
       {definition}

diff --git a/documentation-site/pages/components/tokens.mdx b/documentation-site/pages/components/tokens.mdx
@@ -5,25 +5,20 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
 
+import {useStyletron} from 'baseui';
+import * as TokensExports from 'baseui/tokens';
+
 import Example from '../../components/example';
 import Layout from '../../components/layout';
 import BasicExample from 'examples/tokens/basic.js';
 import Exports from '../../components/exports';
 
-import * as TokensExports from 'baseui/tokens';
-
 export default Layout;
 
 export function ColorPreviewContainer(props) {
+  const [css, theme] = useStyletron();
   return (
-    <div
-      style={{
-        fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
-        fontSize: '14px',
-        lineHeight: 1,
-      }}
-      {...props}
-    />
+    <div className={css({...theme.typography.MonoParagraphSmall})} {...props} />
   );
 }
 export function ColorPreview({name, value, displayValue}) {

diff --git a/documentation-site/pages/guides/theming.mdx b/documentation-site/pages/guides/theming.mdx
@@ -810,6 +810,28 @@ Control typography family, size, weight, and height.
 <Type name="DisplayMedium" />
 <Type name="DisplayLarge" />
 
+<Type name="MonoParagraphXSmall" />
+<Type name="MonoParagraphSmall" />
+<Type name="MonoParagraphMedium" />
+<Type name="MonoParagraphLarge" />
+
+<Type name="MonoLabelXSmall" />
+<Type name="MonoLabelSmall" />
+<Type name="MonoLabelMedium" />
+<Type name="MonoLabelLarge" />
+
+<Type name="MonoHeadingXSmall" />
+<Type name="MonoHeadingSmall" />
+<Type name="MonoHeadingMedium" />
+<Type name="MonoHeadingLarge" />
+<Type name="MonoHeadingXLarge" />
+<Type name="MonoHeadingXXLarge" />
+
+<Type name="MonoDisplayXSmall" />
+<Type name="MonoDisplaySmall" />
+<Type name="MonoDisplayMedium" />
+<Type name="MonoDisplayLarge" />
+
 ### Z-Index
 
 Control the base `z-index` for the theme. This should not be used and will be removed in v11 of Base Web.
diff --git a/documentation-site/public/fonts.css b/documentation-site/public/fonts.css
diff --git a/e2e/storybook/preview-head.html b/e2e/storybook/preview-head.html
diff --git a/src/data-table/column-datetime.js b/src/data-table/column-datetime.js
@@ -497,7 +497,7 @@ function DatetimeFilter(props) {
 }
 
 const DatetimeCell = React.forwardRef<_, HTMLDivElement>((props, ref) => {
-  const [css] = useStyletron();
+  const [css, theme] = useStyletron();
 
   return (
     <CellShell
@@ -508,9 +508,9 @@ const DatetimeCell = React.forwardRef<_, HTMLDivElement>((props, ref) => {
     >
       <div
         className={css({
+          ...theme.typography.MonoParagraphXSmall,
           display: 'flex',
           justifyContent: 'flex-end',
-          fontFamily: `"Lucida Console", Monaco, monospace`,
           width: '100%',
           whiteSpace: 'nowrap',
         })}

diff --git a/src/data-table/column-numerical.js b/src/data-table/column-numerical.js
@@ -440,12 +440,12 @@ const NumericalCell = React.forwardRef<_, HTMLDivElement>((props, ref) => {
     >
       <div
         className={css({
+          ...theme.typography.MonoParagraphXSmall,
           display: 'flex',
           justifyContent: theme.direction !== 'rtl' ? 'flex-end' : 'flex-start',
           color: props.highlight(props.value)
             ? theme.colors.contentNegative
             : null,
-          fontFamily: `"Lucida Console", Monaco, monospace`,
           width: '100%',
         })}
       >

diff --git a/src/themes/move-theme/typography.js b/src/themes/move-theme/typography.js
@@ -15,29 +15,34 @@ export const fontTokens: FontTokensT = {
 const secondaryFontFamily =
   'UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif';
 
+const monoFontFamily = 'UberMoveMono, "Lucida Console", Monaco, monospace';
+
 export const typography = {
-  font1450: {
-    fontFamily: secondaryFontFamily,
-  },
-  font1350: {
-    fontFamily: secondaryFontFamily,
-  },
-  font1250: {
-    fontFamily: secondaryFontFamily,
-  },
-  font1150: {
-    fontFamily: secondaryFontFamily,
-  },
-  DisplayLarge: {
-    fontFamily: secondaryFontFamily,
-  },
-  DisplayMedium: {
-    fontFamily: secondaryFontFamily,
-  },
-  DisplaySmall: {
-    fontFamily: secondaryFontFamily,
-  },
-  DisplayXSmall: {
-    fontFamily: secondaryFontFamily,
-  },
+  font1450: {fontFamily: secondaryFontFamily},
+  font1350: {fontFamily: secondaryFontFamily},
+  font1250: {fontFamily: secondaryFontFamily},
+  font1150: {fontFamily: secondaryFontFamily},
+  DisplayLarge: {fontFamily: secondaryFontFamily},
+  DisplayMedium: {fontFamily: secondaryFontFamily},
+  DisplaySmall: {fontFamily: secondaryFontFamily},
+  DisplayXSmall: {fontFamily: secondaryFontFamily},
+
+  MonoParagraphXSmall: {fontFamily: monoFontFamily},
+  MonoParagraphSmall: {fontFamily: monoFontFamily},
+  MonoParagraphMedium: {fontFamily: monoFontFamily},
+  MonoParagraphLarge: {fontFamily: monoFontFamily},
+  MonoLabelXSmall: {fontFamily: monoFontFamily},
+  MonoLabelSmall: {fontFamily: monoFontFamily},
+  MonoLabelMedium: {fontFamily: monoFontFamily},
+  MonoLabelLarge: {fontFamily: monoFontFamily},
+  MonoHeadingXSmall: {fontFamily: monoFontFamily},
+  MonoHeadingSmall: {fontFamily: monoFontFamily},
+  MonoHeadingMedium: {fontFamily: monoFontFamily},
+  MonoHeadingLarge: {fontFamily: monoFontFamily},
+  MonoHeadingXLarge: {fontFamily: monoFontFamily},
+  MonoHeadingXXLarge: {fontFamily: monoFontFamily},
+  MonoDisplayXSmall: {fontFamily: monoFontFamily},
+  MonoDisplaySmall: {fontFamily: monoFontFamily},
+  MonoDisplayMedium: {fontFamily: monoFontFamily},
+  MonoDisplayLarge: {fontFamily: monoFontFamily},
 };
diff --git a/src/themes/shared/typography.js b/src/themes/shared/typography.js
@@ -12,6 +12,8 @@ export const defaultFontTokens: FontTokensT = {
     'system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif',
 };
 
+const monoFontFamily = '"Lucida Console", Monaco, monospace';
+
 export default (fontTokens?: FontTokensT = defaultFontTokens): TypographyT => {
   const font100 = {
     fontFamily: fontTokens.primaryFontFamily,
@@ -141,6 +143,7 @@ export default (fontTokens?: FontTokensT = defaultFontTokens): TypographyT => {
     font1250,
     font1350,
     font1450,
+
     ParagraphXSmall: font100,
     ParagraphSmall: font200,
     ParagraphMedium: font300,
@@ -159,5 +162,24 @@ export default (fontTokens?: FontTokensT = defaultFontTokens): TypographyT => {
     DisplaySmall: font1250,
     DisplayMedium: font1350,
     DisplayLarge: font1450,
+
+    MonoParagraphXSmall: {...font100, fontFamily: monoFontFamily},
+    MonoParagraphSmall: {...font200, fontFamily: monoFontFamily},
+    MonoParagraphMedium: {...font300, fontFamily: monoFontFamily},
+    MonoParagraphLarge: {...font400, fontFamily: monoFontFamily},
+    MonoLabelXSmall: {...font150, fontFamily: monoFontFamily},
+    MonoLabelSmall: {...font250, fontFamily: monoFontFamily},
+    MonoLabelMedium: {...font350, fontFamily: monoFontFamily},
+    MonoLabelLarge: {...font450, fontFamily: monoFontFamily},
+    MonoHeadingXSmall: {...font550, fontFamily: monoFontFamily},
+    MonoHeadingSmall: {...font650, fontFamily: monoFontFamily},
+    MonoHeadingMedium: {...font750, fontFamily: monoFontFamily},
+    MonoHeadingLarge: {...font850, fontFamily: monoFontFamily},
+    MonoHeadingXLarge: {...font950, fontFamily: monoFontFamily},
+    MonoHeadingXXLarge: {...font1050, fontFamily: monoFontFamily},
+    MonoDisplayXSmall: {...font1150, fontFamily: monoFontFamily},
+    MonoDisplaySmall: {...font1250, fontFamily: monoFontFamily},
+    MonoDisplayMedium: {...font1350, fontFamily: monoFontFamily},
+    MonoDisplayLarge: {...font1450, fontFamily: monoFontFamily},
   };
 };
diff --git a/src/themes/types.js b/src/themes/types.js
@@ -587,6 +587,7 @@ export type TypographyT = {
   font1250: FontT,
   font1350: FontT,
   font1450: FontT,
+
   ParagraphXSmall: FontT,
   ParagraphSmall: FontT,
   ParagraphMedium: FontT,
@@ -605,6 +606,25 @@ export type TypographyT = {
   DisplaySmall: FontT,
   DisplayMedium: FontT,
   DisplayLarge: FontT,
+
+  MonoParagraphXSmall: FontT,
+  MonoParagraphSmall: FontT,
+  MonoParagraphMedium: FontT,
+  MonoParagraphLarge: FontT,
+  MonoLabelXSmall: FontT,
+  MonoLabelSmall: FontT,
+  MonoLabelMedium: FontT,
+  MonoLabelLarge: FontT,
+  MonoHeadingXSmall: FontT,
+  MonoHeadingSmall: FontT,
+  MonoHeadingMedium: FontT,
+  MonoHeadingLarge: FontT,
+  MonoHeadingXLarge: FontT,
+  MonoHeadingXXLarge: FontT,
+  MonoDisplayXSmall: FontT,
+  MonoDisplaySmall: FontT,
+  MonoDisplayMedium: FontT,
+  MonoDisplayLarge: FontT,
 };
 
 export type SizingT = {