Add fontWeight* to theme (#3985)

* Add fontWeight* to theme

* Cleanup comments

* fontWeightLarge -> fontWeightLight

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>

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'
 };

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;

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;

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;

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 {

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';
 }
 

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;
   }
-`);
+`));