@retailmenot/anchor/ts/Typography/Typography.component.js

A React UI Library by RetailMeNot

// VENDOR
import styled, { css } from '@xstyled/styled-components';
import { th, variant } from '@xstyled/system';
// ANCHOR
import { space as spaceStyles } from '@xstyled/system';
import { rem } from '../utils/rem/rem';
const { isArray } = Array;
export const Typography = styled('span').attrs(props => ({
    $color: props.color,
    color: undefined,
    className: 'anchor-typography',
    asVariant: variant({
        key: 'typography.as',
        default: 'none',
        prop: 'as',
    })(props),
    scaleVariant: variant({
        key: 'typography.scale',
        default: 'none',
        prop: 'scale',
    })(props),
})) `

    box-sizing: border-box;
    margin: 0;

    // Variant styles
    ${({ asVariant, scaleVariant }) => css({
    fontFamily: 'base',
    fontSize: th('typography.fontSize'),
    lineHeight: th('typography.lineHeight'),
    fontWeight: th('typography.fontWeight'),
    textAlign: 'inherit',
    color: 'inherit',
    // Don't include variants that are css-blocks
    ...(!isArray(asVariant) ? asVariant : {}),
    ...(!isArray(asVariant) && !isArray(scaleVariant)
        ? scaleVariant
        : {}),
})}

    // If the "asVariant" is a css block, then we aren't spreading it above and must
    // include it here. We also include the scale variant so that it's still defined
    // "after" the as variant, and takes precedence.
    ${({ asVariant }) => isArray(asVariant) && asVariant}
    ${({ scaleVariant, asVariant }) => (isArray(asVariant) || isArray(scaleVariant)) && scaleVariant}

    // Prop overrides. We don't have any defaults here because then they
    // would always override the variants above.
    ${({ $color, align, display, transform, lineHeight, size, weight }) => css({
    color: $color,
    textAlign: align,
    display,
    textTransform: transform,
    lineHeight: rem(lineHeight),
    fontSize: rem(size),
    fontWeight: weight,
})};

    // Spacing
    ${spaceStyles}

    small {
        font-size: 87.5%;
    }
`;
//# sourceMappingURL=Typography.component.js.map