From 524cbc8a80ec72ca69506816ca67d57b001d3ed5 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 6 Nov 2020 14:31:23 +0100
Subject: [PATCH] Add fontWeight* to theme (#3985)

* Add fontWeight* to theme

* Cleanup comments

* fontWeightLarge -> fontWeightLight
---
 packages/apps/public/index.html               |  2 +-
 packages/apps/src/themes.ts                   | 18 ++++++++++++------
 packages/page-calendar/src/Month.tsx          |  2 +-
 packages/react-components/src/AccountName.tsx |  2 +-
 packages/react-components/src/CardSummary.tsx |  2 +-
 packages/react-components/src/styles/index.ts |  2 +-
 packages/react-components/src/types.ts        |  2 ++
 packages/react-query/src/FormatBalance.tsx    |  8 +++++---
 8 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index b47a47234a..6019e5d2ff 100644
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@@ -7,7 +7,7 @@
     <link rel="shortcut icon" href="favicon.ico">
     <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
     <script type="text/javascript" src="/env-config.js"></script>
-    <link href="fonts/fonts.css" rel="stylesheet">
+    <!-- link href="fonts/fonts.css" rel="stylesheet" -->
   </head>
   <body>
     <noscript>
diff --git a/packages/apps/src/themes.ts b/packages/apps/src/themes.ts
index 0158b55548..f863753232 100644
--- a/packages/apps/src/themes.ts
+++ b/packages/apps/src/themes.ts
@@ -3,7 +3,18 @@
 
 import { ThemeDef } from '@polkadot/react-components/types';
 
+// Suggested '"Nunito Sans", sans-serif', however there are a couple of issues
+//   - alignment of identities are way off, parent + sub + unicode
+//   - additional download size
+const FONT = {
+  fontMono: 'monospace',
+  fontSans: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+  fontWeightLight: 300,
+  fontWeightNormal: 400
+};
+
 export const darkTheme: ThemeDef = {
+  ...FONT,
   bgInput: '#38393f',
   bgInputError: '#48393f',
   bgInverse: 'rgba(78, 78, 78, 0.66)',
@@ -20,13 +31,11 @@ export const darkTheme: ThemeDef = {
   colorError: 'rgba(255, 0, 0, 0.85)',
   colorLabel: 'rgba(244, 242, 240, 0.45)',
   colorSummary: 'rgba(244, 242, 240, 0.75)',
-  fontMono: 'monospace',
-  // fontSans: '"Nunito Sans", sans-serif',
-  fontSans: 'sans-serif',
   theme: 'dark'
 };
 
 export const lightTheme: ThemeDef = {
+  ...FONT,
   bgInput: '#fff',
   bgInputError: '#fff6f6',
   bgInverse: 'rgba(244, 242, 240, 0.91)',
@@ -43,8 +52,5 @@ export const lightTheme: ThemeDef = {
   colorError: 'rgba(139, 0, 0)',
   colorLabel: 'rgba(78, 78, 78, 0.66)',
   colorSummary: 'rgba(0, 0, 0, 0.6)',
-  fontMono: 'monospace',
-  // fontSans: '"Nunito Sans", sans-serif',
-  fontSans: 'sans-serif',
   theme: 'light'
 };
diff --git a/packages/page-calendar/src/Month.tsx b/packages/page-calendar/src/Month.tsx
index 669203a4fe..cc24a45840 100644
--- a/packages/page-calendar/src/Month.tsx
+++ b/packages/page-calendar/src/Month.tsx
@@ -109,7 +109,7 @@ export default React.memo(styled(Month)`
     .dayOfWeek {
       > * {
         font-size: 0.7em;
-        font-weight: 500;
+        font-weight: 400;
         letter-spacing: 0.1em;
         text-align: center;
         text-transform: uppercase;
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 17ceab50d5..df273aac37 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -198,7 +198,7 @@ export default React.memo(styled(AccountName)`
     width: 100%;
 
     .name {
-      font-weight: normal !important;
+      font-weight: 400 !important;
       filter: grayscale(100%);
       line-height: 1;
       opacity: 0.6;
diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx
index b26009524b..3bbd73fa2f 100644
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@@ -115,7 +115,7 @@ export default React.memo(styled(CardSummary)(({ theme }: ThemeProps) => `
 
   > .ui--Labelled {
     font-size: 1.75rem;
-    font-weight: 100;
+    font-weight: ${theme.fontWeightLight};
     position: relative;
     line-height: 1;
     text-align: right;
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index c0e7649617..ea20582e91 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -333,7 +333,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
   h1, h2, h3, h4, h5 {
     color: ${theme.colorSummary};
     font-family: ${theme.fontSans};
-    font-weight: 100;
+    font-weight: ${theme.fontWeightLight};
   }
 
   h1 {
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 9f7befd4e0..91b9ad6eb7 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -144,6 +144,8 @@ export interface ThemeDef {
   colorSummary: string;
   fontSans: string;
   fontMono: string;
+  fontWeightLight: number;
+  fontWeightNormal: number;
   theme: 'dark' | 'light';
 }
 
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index 15e8787e13..9a1282f40c 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -1,6 +1,8 @@
 // Copyright 2017-2020 @polkadot/react-query authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { ThemeProps } from '@polkadot/react-components/types';
+
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
@@ -57,7 +59,7 @@ function FormatBalance ({ children, className = '', isShort, label, labelPost, v
   );
 }
 
-export default React.memo(styled(FormatBalance)`
+export default React.memo(styled(FormatBalance)(({ theme }: ThemeProps) => `
   display: inline-block;
   vertical-align: baseline;
   white-space: nowrap;
@@ -81,7 +83,7 @@ export default React.memo(styled(FormatBalance)`
     text-align: right;
 
     > .ui--FormatBalance-postfix {
-      font-weight: 100;
+      font-weight: ${theme.fontWeightLight};
       opacity: 0.7;
       vertical-align: baseline;
     }
@@ -99,4 +101,4 @@ export default React.memo(styled(FormatBalance)`
   .ui--Icon+.ui--FormatBalance-value {
     margin-left: 0.375rem;
   }
-`);
+`));