diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-06 01:07:28 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-06 01:07:28 +0800 |
commit | a9895c55f909b25dab52c4409d739e34709759b2 (patch) | |
tree | 82352f8aa90a5bc44e54cd8efdff055d55bda549 /packages/website/ts | |
parent | 682b0dd8f4d0425420839211aa254f65a299a29a (diff) | |
download | dexon-sol-tools-a9895c55f909b25dab52c4409d739e34709759b2.tar dexon-sol-tools-a9895c55f909b25dab52c4409d739e34709759b2.tar.gz dexon-sol-tools-a9895c55f909b25dab52c4409d739e34709759b2.tar.bz2 dexon-sol-tools-a9895c55f909b25dab52c4409d739e34709759b2.tar.lz dexon-sol-tools-a9895c55f909b25dab52c4409d739e34709759b2.tar.xz dexon-sol-tools-a9895c55f909b25dab52c4409d739e34709759b2.tar.zst dexon-sol-tools-a9895c55f909b25dab52c4409d739e34709759b2.zip |
[WIP] Adds paragraph sizes
Diffstat (limited to 'packages/website/ts')
-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 } } |