From 682b0dd8f4d0425420839211aa254f65a299a29a Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 5 Dec 2018 17:20:44 +0100 Subject: Implements desktop/mobile font sizing --- packages/website/ts/@next/components/text.tsx | 26 ++------------------------ 1 file changed, 2 insertions(+), 24 deletions(-) (limited to 'packages/website/ts/@next/components') diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 0be24d233..7d50530f6 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -19,14 +19,6 @@ interface ParagraphProps extends BaseTextInterface { isMuted?: boolean | number; } -interface HeadingSizes { - large: string; - medium: string; - default: string; - small: string; - [key: string]: string; -} - interface ParagraphSizes { default: string; medium: string; @@ -34,20 +26,6 @@ interface ParagraphSizes { [key: string]: string; } -const HEADING_SIZES: HeadingSizes = { - small: '20px', - default: '28px', - medium: '50px', - large: '80px', -}; - -const HEADING_LINE_HEIGHTS: HeadingSizes = { - small: '1.4em', - default: '1.357142857em', - medium: '1.16em', - large: '1em', -}; - const PARAGRAPH_SIZES: ParagraphSizes = { default: '18px', small: '14px', @@ -57,9 +35,9 @@ const PARAGRAPH_SIZES: ParagraphSizes = { const StyledHeading = styled.h1` color: ${props => props.color || props.theme.textColor}; - font-size: ${props => HEADING_SIZES[props.size || 'default']}; + font-size: ${props => `var(--${props.size}Heading)`}; padding: ${props => props.padding && getCSSPadding(props.padding)}; - line-height: ${props => HEADING_LINE_HEIGHTS[props.size || 'default']}; + line-height: ${props => `var(--${props.size}HeadingHeight)`}; margin-bottom: ${props => !props.isNoMargin && '30px'}; text-align: ${props => props.isCentered && 'center'}; font-weight: 300; -- cgit v1.2.3