From 93c897820b36190af8266e2e0dd9150a4545b961 Mon Sep 17 00:00:00 2001 From: Chaiwat Ekkaewnumchai Date: Wed, 23 Sep 2020 17:57:55 -0700 Subject: [PATCH] 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 | 8 +- .../src/sandy-chrome/TypographyExample.tsx | 53 +++++++++++++ desktop/app/src/sandy-chrome/theme.tsx | 1 + desktop/themes/base.less | 30 ++++---- desktop/themes/dark.less | 3 +- desktop/themes/light.less | 3 +- desktop/themes/typography.less | 74 +++++++++++++++++++ 7 files changed, 154 insertions(+), 18 deletions(-) create mode 100644 desktop/app/src/sandy-chrome/TypographyExample.tsx create mode 100644 desktop/themes/typography.less diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx index 9a0f714d9..39832b1ed 100644 --- a/desktop/app/src/sandy-chrome/SandyApp.tsx +++ b/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 ( - <> + New UI for Flipper, Sandy Project! Nothing to see now. Go back to current Flipper - + + ); } diff --git a/desktop/app/src/sandy-chrome/TypographyExample.tsx b/desktop/app/src/sandy-chrome/TypographyExample.tsx new file mode 100644 index 000000000..06ad60b47 --- /dev/null +++ b/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 ( + + + h1. Headline + h2. Headline + h3. Headline + h4. Headline + Body - Regular + Body - Strong + + + Code + + + Primary + Secondary + + Disabled + Positive + Warning + Danger + + Link + + + Link Secondary + + + + ); +} diff --git a/desktop/app/src/sandy-chrome/theme.tsx b/desktop/app/src/sandy-chrome/theme.tsx index 9e5b7b26a..5315d04ad 100644 --- a/desktop/app/src/sandy-chrome/theme.tsx +++ b/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: { diff --git a/desktop/themes/base.less b/desktop/themes/base.less index 515dbfa0e..6ece2be82 100644 --- a/desktop/themes/base.less +++ b/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; } diff --git a/desktop/themes/dark.less b/desktop/themes/dark.less index b07355ead..5221c742c 100644 --- a/desktop/themes/dark.less +++ b/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 diff --git a/desktop/themes/light.less b/desktop/themes/light.less index 8424d9237..9eb5a2972 100644 --- a/desktop/themes/light.less +++ b/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 diff --git a/desktop/themes/typography.less b/desktop/themes/typography.less new file mode 100644 index 000000000..76911801f --- /dev/null +++ b/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; //