Use "Inter" as default typeface (#5741)

* Inter

* tweaks

* tweaks

app/components/DocumentCard.tsx

@@ -279,8 +279,8 @@ const Heading = styled.h3`
   overflow: hidden;
 
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;
 
 export default observer(DocumentCard);

app/components/DocumentListItem.tsx

@@ -262,8 +262,8 @@ const Heading = styled.h3<{ rtl?: boolean }>`
   margin-bottom: 0.25em;
   white-space: nowrap;
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;
 
 const StarPositioner = styled(Flex)`

app/components/FilterOptions.tsx

@@ -80,7 +80,7 @@ const Note = styled(Text)`
   margin-bottom: 0;
   line-height: 1.2em;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
   color: ${s("textTertiary")};
 `;
 

app/components/Modal.tsx

@@ -94,11 +94,9 @@ const Modal: React.FC<Props> = ({
                           {title}
                         </Text>
                       )}
-                      <Text as="span" size="large">
-                        <NudeButton onClick={onRequestClose}>
-                          <CloseIcon />
-                        </NudeButton>
-                      </Text>
+                      <NudeButton onClick={onRequestClose}>
+                        <CloseIcon />
+                      </NudeButton>
                     </Header>
                   </Centered>
                 </Small>

app/components/Text.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 type Props = {
   type?: "secondary" | "tertiary" | "danger";
@@ -31,12 +31,17 @@ const Text = styled.p<Props>`
       : props.size === "xsmall"
       ? "13px"
       : "inherit"};
-  font-weight: ${(props) =>
-    props.weight === "bold"
-      ? 500
-      : props.weight === "normal"
-      ? "normal"
-      : "inherit"};
+
+  ${(props) =>
+    props.weight &&
+    css`
+      font-weight: ${props.weight === "bold"
+        ? 500
+        : props.weight === "normal"
+        ? 400
+        : "inherit"};
+    `}
+
   white-space: normal;
   user-select: ${(props) => (props.selectable ? "text" : "none")};
 `;

app/scenes/Document/components/ReferenceListItem.tsx

@@ -49,8 +49,7 @@ const Title = styled.div`
   line-height: 1.25;
   padding-top: 3px;
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
 `;
 
 function ReferenceListItem({

app/scenes/Search/Search.tsx

@@ -464,7 +464,7 @@ const SearchTitlesFilter = styled(Switch)`
   margin-left: 8px;
   margin-top: 2px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
 `;
 
 export default withTranslation()(withStores(withRouter(Search)));

app/typings/styled-components.d.ts

@@ -20,7 +20,9 @@ declare module "styled-components" {
     scrollbarThumb: string;
     fontFamily: string;
     fontFamilyMono: string;
-    fontWeight: number;
+    fontWeightRegular: number;
+    fontWeightMedium: number;
+    fontWeightBold: number;
     link: string;
     placeholder: string;
     textSecondary: string;