Switching to system fonts (#344)

* Switching to system fonts * Fixed text alignment issue in text component. * Changing font of ads components. * Adding a font type * Removing unused fonts * Making fonts in theme an object. * Removing unncessary font declerations * Fixing storybook * Reverting background remove
2020-08-19 03:21:23 +05:30 · 2020-08-19 03:21:23 +05:30 · 901932f9d7
commit 901932f9d7
parent 6776f6a251
18 changed files with 30 additions and 52 deletions
--- a/app/client/.storybook/config.js
+++ b/app/client/.storybook/config.js
@ -2,6 +2,8 @@ import { configure, addDecorator, addParameters } from "@storybook/react";
 import { withContexts } from "@storybook/addon-contexts/react";
 import { contexts } from "./configs/contexts";
 import { } from '@storybook/react'; // <- or your storybook framework
+import "../src/index.css";
+

 addDecorator(withContexts(contexts));
 addParameters({
--- a/app/client/package.json
+++ b/app/client/package.json
@ -19,7 +19,6 @@
    "@sentry/browser": "^5.6.3",
    "@sentry/webpack-plugin": "^1.10.0",
    "@types/chance": "^1.0.7",
-    "@types/fontfaceobserver": "^0.0.6",
    "@types/lodash": "^4.14.120",
    "@types/moment-timezone": "^0.5.10",
    "@types/nanoid": "^2.0.0",
@ -52,7 +51,6 @@
    "eslint": "^6.4.0",
    "fast-deep-equal": "^3.1.1",
    "flow-bin": "^0.91.0",
-    "fontfaceobserver": "^2.1.0",
    "fuse.js": "^3.4.5",
    "fusioncharts": "^3.15.0-sr.1",
    "history": "^4.10.1",
@ -200,4 +198,4 @@
      "pre-commit": "lint-staged"
    }
  }
-}
+}
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@ -4,7 +4,6 @@
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet" />
  <title>Appsmith</title>
  <style>
    #loader {
@ -20,15 +19,15 @@
    // INTERCOM SETUP
    const APP_ID = "%REACT_APP_INTERCOM_APP_ID%"
    const CLOUD_HOSTING = "%REACT_APP_CLOUD_HOSTING%"
-    if(APP_ID.length && CLOUD_HOSTING.length) {
-      (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
+    if (APP_ID.length && CLOUD_HOSTING.length) {
+      (function () { var w = window; var ic = w.Intercom; if (typeof ic === "function") { ic('reattach_activator'); ic('update', w.intercomSettings); } else { var d = document; var i = function () { i.c(arguments); }; i.q = []; i.c = function (args) { i.q.push(args); }; w.Intercom = i; var l = function () { var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.intercom.io/widget/' + APP_ID; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); }; if (document.readyState === 'complete') { l(); } else if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })();
    }
  </script>
  <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"></script>
  <script>
    // GA SETUP
    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', "%REACT_APP_GOOGLE_ANALYTICS_ID%");
@ -62,7 +61,7 @@
  </script>
  <script type="text/javascript">
    const parseConfig = (config) => {
-      if(config.indexOf("__") === 0 || config.indexOf("$") === 0)
+      if (config.indexOf("__") === 0 || config.indexOf("$") === 0)
        return "";
      return config.trim();
    }
@ -98,11 +97,11 @@
        id: parseConfig("__APPSMITH_VERSION_ID__"),
        releaseDate: parseConfig("__APPSMITH_VERSION_RELEASE_DATE__")
      },
-      intercomAppID:  parseConfig("__APPSMITH_INTERCOM_APP_ID__"),
+      intercomAppID: parseConfig("__APPSMITH_INTERCOM_APP_ID__"),
    };
  </script>
  <script rel="prefetch" type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.4.0/tinymce.min.js" referrerpolicy="origin"></script>
 </body>

-</html>
+</html>
--- a/app/client/src/components/ads/Button.tsx
+++ b/app/client/src/components/ads/Button.tsx
@ -248,7 +248,6 @@ const StyledButton = styled("button")<ThemeProp & ButtonProps>`
  color: ${props => btnColorStyles(props, "main").txtColor};
  border: ${props => btnColorStyles(props, "main").border};
  border-radius: ${props => props.theme.radii[0]};
-  font-family: ${props => props.theme.fonts[2]};
  ${props => btnFontStyles(props).buttonFont};
  padding: ${props => btnFontStyles(props).padding};
  .ads-icon {
--- a/app/client/src/components/ads/Table.tsx
+++ b/app/client/src/components/ads/Table.tsx
@ -24,7 +24,6 @@ const Styles = styled.div`
          font-size: ${props => props.theme.typography.h6.fontSize}px;
          line-height: ${props => props.theme.typography.h6.lineHeight}px;
          letter-spacing: ${props => props.theme.typography.h6.letterSpacing}px;
-          font-family: ${props => props.theme.fonts[2]};

          svg {
            margin-left: ${props => props.theme.spaces[2]}px;
@ -59,7 +58,6 @@ const Styles = styled.div`
          line-height: ${props => props.theme.typography.p1.lineHeight}px;
          letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
          font-weight: normal;
-          font-family: ${props => props.theme.fonts[2]};
          border-bottom: 1px solid ${props => props.theme.colors.blackShades[3]};
        }

--- a/app/client/src/components/ads/Tabs.tsx
+++ b/app/client/src/components/ads/Tabs.tsx
@ -6,7 +6,6 @@ import { Icon, IconName } from "./Icon";
 import { Size } from "./Button";

 const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
-  font-family: ${props => props.theme.fonts[2]};
  user-select: none;
  border-radius: 0px;
  height: 100%;
--- a/app/client/src/components/ads/Text.tsx
+++ b/app/client/src/components/ads/Text.tsx
@ -41,7 +41,6 @@ const typeSelector = (props: TextProps & ThemeProp): string => {
 const Text = styled.span<TextProps>`
  text-decoration: ${props => (props.underline ? "underline" : "unset")};
  font-style: ${props => (props.italic ? "italic" : "normal")};
-  font-family: ${props => props.theme.fonts[2]};
  font-weight: ${props => props.theme.typography[props.type].fontWeight};
  font-size: ${props => props.theme.typography[props.type].fontSize}px;
  line-height: ${props => props.theme.typography[props.type].lineHeight}px;
--- a/app/client/src/components/ads/TextInput.tsx
+++ b/app/client/src/components/ads/TextInput.tsx
@ -1,8 +1,8 @@
 import React, { forwardRef, Ref, useCallback, useMemo, useState } from "react";
 import { CommonComponentProps, hexToRgba } from "./common";
 import styled from "styled-components";
-import { theme } from "../../constants/DefaultTheme";
 import Text, { TextType } from "./Text";
+import { theme } from "constants/DefaultTheme";

 export type TextInputProps = CommonComponentProps & {
  placeholder?: string;
@ -45,7 +45,6 @@ const StyledInput = styled.input<
  box-shadow: none;
  margin-bottom: ${props => props.theme.spaces[1]}px;
  border: 1px solid ${props => props.inputStyle.borderColor};
-  font-family: ${props => props.theme.fonts[3]};
  padding: ${props => props.theme.spaces[4]}px
    ${props => props.theme.spaces[6]}px;
  background-color: ${props => props.inputStyle.bgColor};
--- a/app/client/src/components/designSystems/blueprint/TextComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
@ -33,7 +33,7 @@ export const StyledText = styled(Text)<{
  height: 100%;
  overflow-y: ${props => (props.scroll ? "auto" : "hidden")};
  text-overflow: ellipsis;
-  text-align: ${props => props.textAlign.toLowerCase()}
+  text-align: ${props => props.textAlign.toLowerCase()};
  display: flex;
  width: 100%;
  justify-content: flex-start;
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@ -113,7 +113,7 @@ const FailedMessageContainer = styled.div`
  padding-top: 10px;
  padding-bottom: 7px;
  padding-left: 15px;
-  font-family: DM Sans;
+  font-family: ${props => props.theme.fonts.text};
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
--- a/app/client/src/components/editorComponents/HighlightedCode/themes.ts
+++ b/app/client/src/components/editorComponents/HighlightedCode/themes.ts
@ -6,7 +6,7 @@ export const LIGHT = css`
    color: black;
    background: none;
    text-shadow: 0 1px white;
-    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-family: ${props => props.theme.fonts.code};
    font-size: 1em;
    text-align: left;
    white-space: pre;
@ -144,7 +144,7 @@ export const DARK = css`
  pre[class*="language-"] {
    color: white;
    background: none;
-    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-family: ${props => props.theme.fonts.code};
    font-size: 1em;
    text-align: left;
    text-shadow: 0 -0.1em 0.2em black;
--- a/app/client/src/components/editorComponents/RequestView.tsx
+++ b/app/client/src/components/editorComponents/RequestView.tsx
@ -4,7 +4,7 @@ import styled from "styled-components";
 import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor";

 const StyledKey = styled.span`
-  font-family: DM Sans;
+  font-family: ${props => props.theme.fonts.text};
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
@ -32,7 +32,7 @@ const KeyValuePair = function(props: { hKey: string; hValue: string }) {
 };

 const StyledTreeContainer = styled.div`
-  font-family: DM Sans;
+  font-family: ${props => props.theme.fonts.text};
  .bp3-tree-node-content {
    height: auto;
  }
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@ -269,7 +269,10 @@ export type Theme = {
  colors: any;
  typography: any;
  lineHeights: Array<number>;
-  fonts: Array<FontFamily>;
+  fonts: {
+    code: FontFamily;
+    text: FontFamily;
+  };
  borders: ThemeBorder[];
  evaluatedValuePopup: {
    width: number;
@ -603,11 +606,10 @@ export const theme: Theme = {
    lightningborder: Colors.ALABASTER,
  },
  lineHeights: [0, 14, 16, 18, 22, 24, 28, 36, 48, 64, 80],
-  fonts: [
-    FontFamilies.DMSans,
-    FontFamilies.FiraCode,
-    FontFamilies.HomePageRedesign,
-  ],
+  fonts: {
+    text: FontFamilies.TextFonts,
+    code: FontFamilies.CodeFonts,
+  },
  borders: [
    {
      thickness: 1,
--- a/app/client/src/constants/Fonts.tsx
+++ b/app/client/src/constants/Fonts.tsx
@ -1,4 +1,4 @@
-export const DMSans = "DM Sans";
-export const FiraCode = '"Fira code", "Fira Mono", monospace';
-export const HomePageRedesign =
-  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+export const TextFonts =
+  "-apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif";
+export const CodeFonts =
+  'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace';
--- a/app/client/src/index.css
+++ b/app/client/src/index.css
@ -6,8 +6,6 @@
 body {
  margin: 0;
  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
-    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #efefef;
@ -17,10 +15,6 @@ body.dragging *{
  cursor: grabbing !important;
 }

-body.fontLoaded {
-  font-family: "DM Sans", sans-serif;
-}
-
 code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
--- a/app/client/src/pages/Editor/APIEditor/Pagination.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Pagination.tsx
@ -19,7 +19,7 @@ const PaginationFieldWrapper = styled.div`

 const ExampleApi = styled.p`
  color: #ef7b63;
-  font-family: monospace;
+  font-family: ${props => props.theme.fonts.code};
 `;

 const StyledLabel = styled.label`
--- a/app/client/src/pages/Editor/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/WidgetCard.tsx
@ -46,7 +46,7 @@ export const Wrapper = styled.div`
    }
  }
  & i {
-    font-family: ${props => props.theme.fonts[2]};
+    font-family: ${props => props.theme.fonts.text};
    font-size: ${props => props.theme.fontSizes[7]}px;
  }
 `;
--- a/app/client/src/utils/AppsmithUtils.tsx
+++ b/app/client/src/utils/AppsmithUtils.tsx
@ -2,7 +2,6 @@ import { ReduxAction } from "constants/ReduxActionConstants";
 import { getAppsmithConfigs } from "configs";
 import * as Sentry from "@sentry/browser";
 import AnalyticsUtil from "./AnalyticsUtil";
-import FontFaceObserver from "fontfaceobserver";
 import FormControlRegistry from "./FormControlRegistry";
 import { Property } from "api/ActionAPI";
 import _ from "lodash";
@ -42,16 +41,6 @@ export const appInitializer = () => {
  }

  log.setLevel(getEnvLogLevel(appsmithConfigs.logLevel));
-
-  const textFont = new FontFaceObserver("DM Sans");
-  textFont
-    .load()
-    .then(() => {
-      document.body.className += "fontLoaded";
-    })
-    .catch(err => {
-      console.log(err);
-    });
 };

 export const mapToPropList = (map: Record<string, string>): Property[] => {