diff options
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 20 | ||||
| -rw-r--r-- | packages/website/ts/@next/constants/globalStyle.tsx | 8 |
2 files changed, 11 insertions, 17 deletions
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 7d50530f6..3fcd5c776 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -19,25 +19,11 @@ interface ParagraphProps extends BaseTextInterface { isMuted?: boolean | number; } -interface ParagraphSizes { - default: string; - medium: string; - large: string; - [key: string]: string; -} - -const PARAGRAPH_SIZES: ParagraphSizes = { - default: '18px', - small: '14px', - medium: '22px', - large: '28px', -}; - const StyledHeading = styled.h1<HeadingProps>` color: ${props => props.color || props.theme.textColor}; - font-size: ${props => `var(--${props.size}Heading)`}; + font-size: ${props => `var(--${props.size || 'default'}Heading)`}; padding: ${props => props.padding && getCSSPadding(props.padding)}; - line-height: ${props => `var(--${props.size}HeadingHeight)`}; + line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`}; margin-bottom: ${props => !props.isNoMargin && '30px'}; text-align: ${props => props.isCentered && 'center'}; font-weight: 300; @@ -57,7 +43,7 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { // and be more generic. e.g. <Text /> with a props asElement so we can use it // for literally anything = export const Paragraph = styled.p<ParagraphProps>` - font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']}; + font-size: ${props => `var(--${props.size || 'default'}Paragraph)`}; margin-bottom: ${props => !props.isNoMargin && '30px'}; padding: ${props => props.padding && getCSSPadding(props.padding)}; color: ${props => props.color || props.theme.textColor}; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index a0b8cfc47..7ee6f480e 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -40,6 +40,10 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` --defaultHeadingHeight: 1.357142857em; --mediumHeadingHeight: 1.16em; --largeHeadingHeight: 1em; + --smallParagraph: 14px; + --defaultParagraph: 18px; + --mediumParagraph: 22px; + --largeParagraph: 28px; } } @@ -53,6 +57,10 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` --defaultHeadingHeight: 1.357142857em; // TO DO --mediumHeadingHeight: 1.16em; // TO DO --largeHeadingHeight: 1em; // TO DO + --smallParagraph: 14px; // TO DO + --defaultParagraph: 18px; // TO DO + --mediumParagraph: 22px; // TO DO + --largeParagraph: 28px; // TO DO } } |