update typography

2026-02-24 04:01:17 +01:00 · 2021-07-02 15:34:02 +10:00
parent cf1857e898
commit d09914cbec
7 changed files with 52 additions and 61 deletions
--- a/www/package.json
+++ b/www/package.json
@@ -11,10 +11,11 @@
    "@antlerengineering/form-builder": "^2.6.0",
    "@antlerengineering/multiselect": "^0.9.2",
    "@date-io/date-fns": "1.x",
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/lab": "^4.0.0-alpha.58",
    "@material-ui/pickers": "^3.2.10",
+    "@material-ui/styles": "^4.11.4",
    "@mdi/js": "^5.8.55",
    "@monaco-editor/react": "^4.1.0",
    "@tinymce/tinymce-react": "^3.4.0",
--- a/www/public/index.html
+++ b/www/public/index.html
@@ -17,7 +17,16 @@

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta
+      name="theme-color"
+      content="#fff"
+      media="(prefers-color-scheme: light)"
+    />
+    <meta
+      name="theme-color"
+      content="#000"
+      media="(prefers-color-scheme: dark)"
+    />
    <meta name="description" content="Excel for your database" />
    <meta name="color-scheme" content="dark light" />

@@ -64,14 +73,11 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <link rel="stylesheet" href="https://use.typekit.net/ngg8buf.css" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
-      href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@700&display=swap"
      rel="stylesheet"
    />

--- a/www/src/Themes.tsx
+++ b/www/src/Themes.tsx
@@ -1,4 +1,3 @@
-import _clone from "lodash/clone";
 import _merge from "lodash/merge";
 import _omit from "lodash/omit";
 import _mapValues from "lodash/mapValues";
@@ -13,11 +12,9 @@ import ClearIcon from "@material-ui/icons/Clear";

 import antlerPalette from "./Theme/antlerPalette";

-export const HEADING_FONT = "Europa, sans-serif";
-export const BODY_FONT = '"Open Sans", sans-serif';
-export const MONO_FONT =
-  "SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace";
-export const LOG_FONT = "IBM Plex Mono, monospace";
+export const HEADING_FONT = "Space Grotesk, system-ui, sans-serif";
+export const BODY_FONT = "Inter, system-ui, sans-serif";
+export const MONO_FONT = "IBM Plex Mono, ui-monospace, monospace";

 export const ANTLER_RED = "#ED4747";
 export const SECONDARY_GREY = "#282829";
@@ -37,6 +34,7 @@ declare module "@material-ui/core/styles/createPalette" {
 declare module "@material-ui/core/styles/createTypography" {
  interface FontStyle {
    fontFamilyMono: string;
+    fontFamilyHeading: string;
  }
 }
 declare module "@material-ui/core/styles/transitions" {
@@ -55,6 +53,7 @@ export const themeBase = {
  typography: {
    fontFamily: BODY_FONT,
    fontFamilyMono: MONO_FONT,
+    fontFamilyHeading: HEADING_FONT,
    h1: { fontFamily: HEADING_FONT },
    h2: { fontFamily: HEADING_FONT },
    h3: {
@@ -97,10 +96,10 @@ export const themeBase = {
      letterSpacing: toEm(0.25, 14),
    },
    button: {
-      fontFamily: HEADING_FONT,
-      fontSize: toRem(16),
-      fontWeight: "bold",
-      letterSpacing: toEm(0.75, 16),
+      fontFamily: BODY_FONT,
+      fontSize: toRem(14),
+      fontWeight: 600,
+      letterSpacing: toEm(0.75, 14),
      lineHeight: 1,
    },
    caption: {
@@ -109,7 +108,7 @@ export const themeBase = {
      lineHeight: 20 / 14,
    },
    overline: {
-      fontFamily: HEADING_FONT,
+      fontFamily: BODY_FONT,
      fontSize: toRem(13),
      fontWeight: "bold",
      letterSpacing: toEm(2, 13),
@@ -221,8 +220,8 @@ export const defaultOverrides = (theme: Theme): ThemeOptions => ({
    // Override text field label
    MuiFormLabel: {
      root: {
-        ...theme.typography.subtitle2,
-        lineHeight: 1,
+        fontWeight: theme.typography.fontWeightMedium,
+        // lineHeight: 1,
      },
    },
    // Override radio & checkbox labels
--- a/www/src/components/EmptyState.tsx
+++ b/www/src/components/EmptyState.tsx
@@ -26,9 +26,7 @@ const useStyles = makeStyles((theme) =>
    },

    message: {
-      textTransform: "uppercase",
      marginTop: theme.spacing(1),
-      letterSpacing: 1,
    },

    basicIcon: { display: "block" },
--- a/www/src/components/Loading.tsx
+++ b/www/src/components/Loading.tsx
@@ -17,11 +17,7 @@ const useStyles = makeStyles((theme) =>
    },
    progress: { color: theme.palette.text.secondary },
    content: { maxWidth: "25em" },
-    message: {
-      textTransform: "uppercase",
-      marginTop: theme.spacing(1),
-      letterSpacing: 1,
-    },
+    message: { marginTop: theme.spacing(1) },
  })
 );
 interface ILoading {
--- a/www/src/components/Table/TableHeader/TableLogs.tsx
+++ b/www/src/components/Table/TableHeader/TableLogs.tsx
@@ -34,7 +34,7 @@ import CollapseIcon from "@material-ui/icons/ExpandMore";
 import OpenIcon from "@material-ui/icons/OpenInNew";
 import CloseIcon from "@material-ui/icons/Close";
 import TableHeaderButton from "./TableHeaderButton";
-import { LOG_FONT, LOG_TEXT } from "Themes";
+import { MONO_FONT, LOG_TEXT } from "Themes";
 import Ansi from "ansi-to-react";
 import EmptyState from "components/EmptyState";

@@ -102,13 +102,13 @@ const useStyles = makeStyles((theme) => ({
  },
  logFont: {
    fontSize: 16,
-    fontFamily: LOG_FONT,
+    fontFamily: MONO_FONT,
    letterSpacing: 0.5,
    lineHeight: 1.5,
    color: LOG_TEXT,

    "& code": {
-      fontFamily: LOG_FONT,
+      fontFamily: MONO_FONT,
    },
  },

--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -2237,15 +2237,15 @@
  resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
  integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==

-"@material-ui/core@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.3.tgz#f22e41775b0bd075e36a7a093d43951bf7f63850"
-  integrity sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==
+"@material-ui/core@^4.11.4":
+  version "4.11.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4"
+  integrity sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg==
  dependencies:
    "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.11.3"
+    "@material-ui/styles" "^4.11.4"
    "@material-ui/system" "^4.11.3"
-    "@material-ui/types" "^5.1.0"
+    "@material-ui/types" "5.1.0"
    "@material-ui/utils" "^4.11.2"
    "@types/react-transition-group" "^4.2.0"
    clsx "^1.0.4"
@@ -2262,16 +2262,16 @@
  dependencies:
    "@babel/runtime" "^7.4.4"

-"@material-ui/lab@^4.0.0-alpha.56":
-  version "4.0.0-alpha.56"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz#ff63080949b55b40625e056bbda05e130d216d34"
-  integrity sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==
+"@material-ui/lab@^4.0.0-alpha.58":
+  version "4.0.0-alpha.58"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz#c7ebb66f49863c5acbb20817163737caa299fafc"
+  integrity sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw==
  dependencies:
    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.10.2"
+    "@material-ui/utils" "^4.11.2"
    clsx "^1.0.4"
    prop-types "^15.7.2"
-    react-is "^16.8.0"
+    react-is "^16.8.0 || ^17.0.0"

 "@material-ui/pickers@^3.2.10":
  version "3.2.10"
@@ -2285,14 +2285,14 @@
    react-transition-group "^4.0.0"
    rifm "^0.7.0"

-"@material-ui/styles@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"
-  integrity sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==
+"@material-ui/styles@^4.11.4":
+  version "4.11.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
+  integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
  dependencies:
    "@babel/runtime" "^7.4.4"
    "@emotion/hash" "^0.8.0"
-    "@material-ui/types" "^5.1.0"
+    "@material-ui/types" "5.1.0"
    "@material-ui/utils" "^4.11.2"
    clsx "^1.0.4"
    csstype "^2.5.2"
@@ -2317,20 +2317,11 @@
    csstype "^2.5.2"
    prop-types "^15.7.2"

-"@material-ui/types@^5.1.0":
+"@material-ui/types@5.1.0":
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==

-"@material-ui/utils@^4.10.2":
-  version "4.10.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.10.2.tgz#3fd5470ca61b7341f1e0468ac8f29a70bf6df321"
-  integrity sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0"
-
 "@material-ui/utils@^4.11.2":
  version "4.11.2"
  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
@@ -13255,7 +13246,7 @@ react-image@^4.0.3:
  resolved "https://registry.yarnpkg.com/react-image/-/react-image-4.0.3.tgz#6fa722877660b67295298a914bff1ed87ad2cf83"
  integrity sha512-19MUK9u1qaw9xys8XEsVkSpVhHctEBUeYFvrLTe1PN+4w5Co13AN2WA7xtBshPM6SthsOj77SlDrEAeOaJpf7g==

-react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.9.0:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==