Change Typography Size

Summary:
Typography on Sandy! The designed typography is [here in Figma](https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=238%3A172)

Current deflects
- cannot find component for 'body - small' and 'meta'
- don't know how to set 'link secondary hover' as designed

Reviewed By: mweststrate

Differential Revision: D23869256

fbshipit-source-id: efb1475749cebad529b502458d1b15bd445bb346

desktop/app/src/sandy-chrome/SandyApp.tsx

@@ -9,13 +9,14 @@
 
 import React, {useEffect} from 'react';
 import {styled} from 'flipper';
-import {DatePicker} from 'antd';
+import {DatePicker, Space} from 'antd';
 import {Layout, FlexRow} from '../ui';
 import {theme} from './theme';
 import {Logger} from '../fb-interfaces/Logger';
 
 import {LeftRail} from './LeftRail';
 import {TemporarilyTitlebar} from './TemporarilyTitlebar';
+import TypographyExample from './TypographyExample';
 import {registerStartupTime} from '../App';
 import {useStore} from '../utils/useStore';
 import {SandyContext} from './SandyContext';
@@ -106,10 +107,11 @@ function RightMenu() {
 
 function TemporarilyContent() {
   return (
-    <>
+    <Space direction="vertical">
       New UI for Flipper, Sandy Project! Nothing to see now. Go back to current
       Flipper
       <DatePicker />
-    </>
+      <TypographyExample />
+    </Space>
   );
 }

desktop/app/src/sandy-chrome/TypographyExample.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {Typography, Button, Space, Input} from 'antd';
+// import {styled, FlexColumn} from 'flipper';
+
+const {Title, Text, Link} = Typography;
+
+// const Container = styled(FlexColumn)({});
+
+export default function TypographyExample() {
+  return (
+    <Space>
+      <Space direction="vertical">
+        <Title>h1. Headline</Title>
+        <Title level={2}>h2. Headline</Title>
+        <Title level={3}>h3. Headline</Title>
+        <Title level={4}>h4. Headline</Title>
+        <Text>Body - Regular</Text>
+        <Text strong>Body - Strong</Text>
+        <Button type="text" size="middle">
+          Button
+        </Button>
+        <Button type="text" size="small">
+          Button small
+        </Button>
+        <Text code>Code</Text>
+      </Space>
+      <Space direction="vertical">
+        <Text>Primary</Text>
+        <Text type="secondary">Secondary</Text>
+        <Input placeholder="Placeholder" />
+        <Text disabled>Disabled</Text>
+        <Text type="success">Positive</Text>
+        <Text type="warning">Warning</Text>
+        <Text type="danger">Danger</Text>
+        <Link href="https://fbflipper.com/" target="_blank">
+          Link
+        </Link>
+        <Link type="secondary" href="https://fbflipper.com/" target="_blank">
+          Link Secondary
+        </Link>
+      </Space>
+    </Space>
+  );
+}

desktop/app/src/sandy-chrome/theme.tsx

@@ -20,6 +20,7 @@ export const theme = {
   disabledColor: 'var(--flipper-disabled-color)',
   backgroundDefault: 'var(--flipper-background-default)',
   backgroundWash: 'var(--flipper-background-wash)',
+  backgroundTransparentHover: 'var(--flipper-background-transparent-hover)',
   dividerColor: 'var(--flipper-divider-color)',
   borderRadius: 'var(--flipper-border-radius)',
   space: {

desktop/themes/base.less

@@ -6,7 +6,10 @@
  *
  */
 @import '../node_modules/antd/dist/antd.less';
+@import './typography.less';
 /* Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84636 */
+@background-transparent-hover: rgba(0, 0, 0, 0.1);
+
 @border-radius-base: 6px;
 
 @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
@@ -29,21 +32,22 @@
 @tooltip-bg: @text-color-primary;
 
 /**
- This section maps theme colors to CSS variables so that thye can be
+ This section maps theme colors to CSS variables so that they can be
  used in styled components, see theme.tsx
 */
 
 :root {
-    --flipper-primary-color: @primary-color;
-    --flipper-success-color: @success-color;
-    --flipper-error-color: @error-color;
-    --flipper-warning-color: @warning-color;
-    --flipper-text-color-primary: @text-color-primary;
-    --flipper-text-color-secondary: @text-color-secondary;
-    --flipper-text-color-placeholder: @text-color-placeholder;
-    --flipper-disabled-color: @disabled-color;
-    --flipper-background-default: @background-default;
-    --flipper-background-wash: @background-wash;
-    --flipper-divider-color: @divider-color;
-    --flipper-border-radius: 6px;
+  --flipper-primary-color: @primary-color;
+  --flipper-success-color: @success-color;
+  --flipper-error-color: @error-color;
+  --flipper-warning-color: @warning-color;
+  --flipper-text-color-primary: @text-color-primary;
+  --flipper-text-color-secondary: @text-color-secondary;
+  --flipper-text-color-placeholder: @text-color-placeholder;
+  --flipper-disabled-color: @disabled-color;
+  --flipper-background-default: @background-default;
+  --flipper-background-wash: @background-wash;
+  --flipper-background-transparent-hover: @background-transparent-hover;
+  --flipper-divider-color: @divider-color;
+  --flipper-border-radius: @border-radius-base;
 }

desktop/themes/dark.less

@@ -30,6 +30,8 @@
 @background-default: @black;
 // Background - Wash
 @background-wash: #0d0d0d; // white 5%
+// Background - transparent hover
+@button-transparent-hover: rgba(255, 255, 255, 0.1); // white 10%
 
 // The following variables are not yet defined at this moment,
 // as they have / need no mapping to ANT (?)
@@ -39,7 +41,6 @@
 // @button-default-background: @fade(@white, 10%)
 // @button-default=backgorund-hover: @fade(@white, 15%)
 // @button-default-background-disabled: @fade(@white, 10%)
-// @button-transparent-background-hover: @fade(@white, 10%)
 // @button-background-active: @fade(@white, 8%)
 
 // Divider color

desktop/themes/light.less

@@ -30,6 +30,8 @@
 @background-default: @white;
 // Background - Wash
 @background-wash: #f2f2f2; // black 5%
+// Background - transparent hover
+@background-transparent-hover: rgba(0, 0, 0, 0.1); // black 10%
 
 // The following variables are not yet defined at this moment,
 // as they have / need no mapping to ANT (?)
@@ -39,7 +41,6 @@
 // @button-default-background: @fade(@black, 10%)
 // @button-default=backgorund-hover: @fade(@black, 15%)
 // @button-default-background-disabled: @fade(@black, 10%)
-// @button-transparent-background-hover: @fade(@black, 10%)
 // @button-background-active: @fade(@black, 8%)
 
 // Divider color

desktop/themes/typography.less

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+@import '../node_modules/antd/lib/style/mixins/typography.less';
+// Based on https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=238%3A172
+// The Typography.Title doesn't have configerable line height
+// Headline 1 -> Title level 1
+@heading-1-size: 24px;
+@heading-1-line-height: 32px;
+.typography-title-1() {
+  .typography-title(
+    @heading-1-size,
+    @typography-title-font-weight,
+    @heading-1-line-height,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+  margin-top: 0; // <style> takes priority over @typography-title-margin-top
+}
+// Headline 2 -> Title level 2
+@heading-2-size: 20px;
+@heading-2-line-height: 28px;
+.typography-title-2() {
+  .typography-title(
+    @heading-2-size,
+    @typography-title-font-weight,
+    @heading-2-line-height,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}
+// Headline 3 -> Title level 3
+@heading-3-size: 16px;
+@heading-3-line-height: 24px;
+.typography-title-3() {
+  .typography-title(
+    @heading-3-size,
+    @typography-title-font-weight,
+    @heading-3-line-height,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+  letter-spacing: -0.24px;
+}
+// Headline 4 -> Title level 4
+@heading-4-size: 14px;
+@heading-4-line-height: 20px;
+.typography-title-4() {
+  .typography-title(
+    @heading-4-size,
+    @typography-title-font-weight,
+    @heading-4-line-height,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+  letter-spacing: -0.24px;
+}
+
+@typography-title-margin-top: 0;
+@typography-title-margin-bottom: 0;
+
+// Button
+@btn-font-size-sm: @font-size-sm;
+@btn-font-weight: 700;
+
+// Link
+@link-color: @primary-color;
+@link-hover: @primary-color;
+@link-hover-decoration: underline;