Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 13x 13x 4x 4x 4x 13x | import styled, { css } from 'styled-components'; import { string, bool } from 'prop-types'; import { getBaseLineHeight, calcLineHeight } from '../typographySelectors'; import { getTextSizingStyle, getTextColor, getTextCommonStyle, getTextOpacity, getTextColorOnBg, } from './textSelectors'; const propTypes = { color: string.isRequired, sizing: string.isRequired, marginBottom: bool.isRequired, emphasis: string.isRequired, ignoreBackground: bool.isRequired, bgColor: string, }; const StyledText = styled.span` display: block; ${({ theme, color, sizing, marginBottom, emphasis, ignoreBackground, bgColor, }) => { const baseLineHeight = getBaseLineHeight(theme); const sizingStyle = getTextSizingStyle(theme, sizing); return css` ${getTextCommonStyle(theme)} color: ${ ignoreBackground ? getTextColor(theme, color) : getTextColorOnBg(theme, bgColor, color) }; line-height: ${calcLineHeight(sizingStyle.fontSize, baseLineHeight)}; margin-bottom: ${marginBottom ? `${getBaseLineHeight(theme)}rem` : '0'}; opacity: ${getTextOpacity(theme, emphasis)}; ${sizingStyle} `; }} `; StyledText.propTypes = propTypes; export default StyledText; |