From c2f6095868baf1f0ce2cfea38ad76f12e66b4f24 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Fri, 10 Aug 2018 13:10:37 +0200 Subject: [PATCH] Adapt typography --- .../ui/components/TextField/TextField.css | 11 +-- .../ui/components/TextField/TextField.mdx | 2 - .../ui/components/TextField/TextField.tsx | 4 ++ src/core/client/ui/shared/typography.css | 70 +++++++++++-------- src/core/client/ui/theme/variables.ts | 4 +- 5 files changed, 47 insertions(+), 44 deletions(-) diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css index 335fc3734..970a4ce29 100644 --- a/src/core/client/ui/components/TextField/TextField.css +++ b/src/core/client/ui/components/TextField/TextField.css @@ -1,5 +1,5 @@ .root { - composes: textField from "talk-ui/shared/typography.css"; + composes: inputText placeholderPseudo from "talk-ui/shared/typography.css"; position: relative; display: block; padding: calc(0.5 * var(--spacing-unit)); @@ -22,12 +22,3 @@ .fullWidth { width: 100%; } - -::placeholder { - font-family: var(--font-family); - font-style: normal; - font-weight: normal; - line-height: calc(16rem / var(--rem-base)); - font-size: calc(16rem / var(--rem-base)); - color: var(--palette-grey-lighter); -} diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx index bbfceb20d..7fee8bea9 100644 --- a/src/core/client/ui/components/TextField/TextField.mdx +++ b/src/core/client/ui/components/TextField/TextField.mdx @@ -18,5 +18,3 @@ import Flex from '../Flex' - - diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx index 0383192ce..1c7089c4a 100644 --- a/src/core/client/ui/components/TextField/TextField.tsx +++ b/src/core/client/ui/components/TextField/TextField.tsx @@ -33,6 +33,10 @@ export interface TextFieldProps { * Placeholder */ placeholder?: string; + /** + * Mark as readonly + */ + readOnly?: boolean; } const TextField: StatelessComponent = props => { diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css index 97a45a67e..677b168d2 100644 --- a/src/core/client/ui/shared/typography.css +++ b/src/core/client/ui/shared/typography.css @@ -59,33 +59,34 @@ .heading1 { font-size: calc(24rem / var(--rem-base)); font-weight: var(--font-weight-medium); - font-family: "Manuale"; + font-family: var(--font-family-serif); line-height: calc(32em / 24); - letter-spacing: calc(0.2em / 16); + letter-spacing: calc(0.2em / 24); color: var(--palette-text-primary); } .heading2 { font-size: calc(20rem / var(--rem-base)); font-weight: var(--font-weight-medium); - font-family: "Manuale"; + font-family: var(--font-family-serif); line-height: calc(24em / 20); + letter-spacing: calc(0.2em / 20); color: var(--palette-text-primary); } .heading3 { font-size: calc(18rem / var(--rem-base)); font-weight: var(--font-weight-medium); - font-family: "Manuale"; + font-family: var(--font-family-serif); line-height: calc(20em / 18); - letter-spacing: calc(0.2em / 16); + letter-spacing: calc(0.2em / 18); color: var(--palette-text-primary); } .heading4 { font-size: calc(16rem / var(--rem-base)); font-weight: var(--font-weight-medium); - font-family: "Manuale"; + font-family: var(--font-family-serif); line-height: calc(18em / 16); letter-spacing: calc(0.2em / 16); color: var(--palette-text-primary); @@ -94,7 +95,7 @@ .bodyCopy { font-size: calc(16rem / var(--rem-base)); font-weight: var(--font-weight-regular); - font-family: "Source Sans Pro"; + font-family: var(--font-family-sans-serif); line-height: calc(18em / 16); letter-spacing: calc(0.2em / 16); color: var(--palette-text-primary); @@ -107,44 +108,44 @@ .button { color: var(--palette-text-secondary); - font-family: "Source Sans Pro"; + font-family: var(--font-family-sans-serif); font-weight: var(--font-weight-medium); - font-size: 14px; - line-height: calc(18em / 16); - letter-spacing: calc(0.57em / 16); + font-size: calc(14rem / var(--rem-base)); + line-height: calc(18em / 14); + letter-spacing: calc(0.57em / 14); } .buttonLarge { color: var(--palette-text-secondary); - font-family: "Source Sans Pro"; + font-family: var(--font-family-sans-serif); font-weight: var(--font-weight-medium); - font-size: 16px; + font-size: calc(16rem / var(--rem-base)); line-height: calc(20em / 16); letter-spacing: calc(0.57em / 16); } .timestamp { color: var(--palette-text-secondary); - font-family: "Source Sans Pro"; + font-family: var(--font-family-sans-serif); font-weight: var(--font-weight-medium); - font-size: 14px; - line-height: calc(18em / 16); - letter-spacing: calc(0.2em / 16); + font-size: calc(14rem / var(--rem-base)); + line-height: calc(18em / 14); + letter-spacing: 0; } .alertMessage { color: var(--palette-common-black); - font-family: var(--font-family); + font-family: var(--font-family-sans-serif); font-weight: var(--font-weight-medium); font-size: calc(16rem / var(--rem-base)); - line-height: calc(16rem / var(--rem-base)); - letter-spacing: calc(0.2em / 16); + line-height: calc(16em / 16); + letter-spacing: calc(-0.1em / 16); } -.textField { - font-size: calc(16rem / var(--rem-base)); +.inputText { font-weight: var(--font-weight-regular); - font-family: var(--font-family); + font-family: var(--font-family-sans-serif); + font-size: calc(16rem / var(--rem-base)); line-height: calc(18em / 16); letter-spacing: calc(0.2em / 16); color: var(--palette-text-primary); @@ -153,17 +154,26 @@ .inputLabel { font-size: calc(18rem / var(--rem-base)); font-weight: var(--font-weight-medium); - font-family: "Manuale"; - line-height: calc(18em / 16); - letter-spacing: calc(0.2em / 16); + font-family: var(--font-family-serif); + line-height: calc(18em / 18); + letter-spacing: calc(0.2em / 18); color: var(--palette-text-primary); } .placeholder { - font-family: var(--font-family); - font-style: normal; - font-weight: normal; - line-height: calc(16rem / var(--rem-base)); + font-family: var(--font-family-sans-serif); + font-weight: var(--font-weight-regular); font-size: calc(16rem / var(--rem-base)); + line-height: calc(20em / 16); + letter-spacing: 0; + color: var(--palette-grey-lighter); +} + +.placeholderPseudo::placeholder { + font-family: var(--font-family-sans-serif); + font-weight: var(--font-weight-regular); + font-size: calc(16rem / var(--rem-base)); + line-height: calc(20em / 16); + letter-spacing: 0; color: var(--palette-grey-lighter); } diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts index a5ae14893..c6065ab2f 100644 --- a/src/core/client/ui/theme/variables.ts +++ b/src/core/client/ui/theme/variables.ts @@ -64,8 +64,8 @@ const variables = { roundCorners: "2px", /* Typography */ remBase: 16, - fontFamily: '"Source Sans Pro"', - fontSize: 16, + fontFamilySansSerif: '"Source Sans Pro"', + fontFamilySerif: '"Manuale"', fontWeightLight: 300, fontWeightRegular: 400, fontWeightMedium: 600,