149 lines
2.8 KiB
JavaScript
149 lines
2.8 KiB
JavaScript
import styled, { css } from 'styled-components';
|
|
import mq from './mq';
|
|
import { BOX_STYLED_SYSTEM, TEXT_STYLED_SYSTEM, Text } from './grid';
|
|
import typographyStyle from './lib/typographyStyle';
|
|
import colors from './colors';
|
|
|
|
export const WITH_COUNTER = css`
|
|
content: attr(data-counter);
|
|
margin-left: 5px;
|
|
color: ${colors.gray['800']};
|
|
font-size: 12px;
|
|
vertical-align: top;
|
|
`;
|
|
|
|
export const TYPOGRAPHY_STYLES = {
|
|
h1: typographyStyle([40, 45, 66, 68, 70], 1.05),
|
|
h1by2: typographyStyle([25, 30, 46, 48, 50], 1.05),
|
|
h2: typographyStyle([23, 23, 32, 36, 38], 1.25),
|
|
h3: typographyStyle([19, 19, 20, 22, 24], 1.4),
|
|
h5: typographyStyle([21, 21, 28, 30, 32], 1.2),
|
|
text: typographyStyle([14, 14, 16], 1.55),
|
|
};
|
|
|
|
export const H1 = styled(Text)`
|
|
${TYPOGRAPHY_STYLES.h1};
|
|
`;
|
|
H1.displayName = 'H1';
|
|
H1.defaultProps = {
|
|
as: 'h1',
|
|
m: 0,
|
|
fontWeight: 700,
|
|
};
|
|
|
|
export const H1by2 = styled(Text)`
|
|
${TYPOGRAPHY_STYLES.h1by2};
|
|
`;
|
|
H1by2.displayName = 'H1by2';
|
|
H1by2.defaultProps = {
|
|
as: 'div',
|
|
fontWeight: 700,
|
|
};
|
|
|
|
export const H2 = styled(Text)`
|
|
${TYPOGRAPHY_STYLES.h2};
|
|
`;
|
|
H2.displayName = 'H2';
|
|
H2.defaultProps = {
|
|
as: 'h2',
|
|
m: 0,
|
|
fontWeight: 400,
|
|
};
|
|
|
|
export const H3 = styled(Text)`
|
|
${TYPOGRAPHY_STYLES.h3};
|
|
`;
|
|
H3.displayName = 'H3';
|
|
H3.defaultProps = {
|
|
as: 'h3',
|
|
m: 0,
|
|
fontWeight: 700,
|
|
textTransform: 'uppercase',
|
|
};
|
|
|
|
export const H4 = styled(Text)`
|
|
${TYPOGRAPHY_STYLES.h2};
|
|
`;
|
|
H4.displayName = 'H4';
|
|
H4.defaultProps = {
|
|
as: 'h4',
|
|
m: 0,
|
|
fontWeight: 700,
|
|
};
|
|
|
|
export const H5 = styled(Text)`
|
|
${TYPOGRAPHY_STYLES.h5};
|
|
`;
|
|
H5.displayName = 'H5';
|
|
H5.defaultProps = {
|
|
as: 'h5',
|
|
m: 0,
|
|
fontWeight: 700,
|
|
};
|
|
|
|
export const MiniHeader = styled(Text)`
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
|
|
${mq.tablet`font-size: 1.2rem`};
|
|
`;
|
|
|
|
MiniHeader.defaultProps = {
|
|
fontWeight: 400,
|
|
};
|
|
|
|
export const Subheader = styled(H3)``;
|
|
Subheader.displayName = 'Subheader';
|
|
Subheader.defaultProps = {
|
|
as: 'div',
|
|
fontWeight: 400,
|
|
textTransform: 'none',
|
|
};
|
|
|
|
export const Text25 = styled(Text)`
|
|
padding-top: ${props => (props.borderTop ? '10px' : '0')};
|
|
${TYPOGRAPHY_STYLES.text};
|
|
`;
|
|
|
|
Text25.defaultProps = {
|
|
fontWeight: 400,
|
|
};
|
|
|
|
export const Text30 = styled(Text)`
|
|
${TYPOGRAPHY_STYLES.text};
|
|
letter-spacing: 0.01em;
|
|
`;
|
|
|
|
Text30.defaultProps = {
|
|
fontWeight: 400,
|
|
};
|
|
|
|
export const Subtext = styled(Text)`
|
|
font-size: 1.2rem;
|
|
line-height: ${({ line }) => line || 1.8};
|
|
|
|
${mq.desktop`font-size: 1.4rem`};
|
|
`;
|
|
|
|
Subtext.defaultProps = {
|
|
fontWeight: 400,
|
|
};
|
|
|
|
export const SmallText = styled(Text)`
|
|
font-size: 1.2rem;
|
|
line-height: 1.667;
|
|
`;
|
|
|
|
SmallText.defaultProps = {
|
|
fontWeight: 400,
|
|
};
|
|
|
|
export const List = styled.ul`
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
width: ${props => (props.limitWidth ? '76%' : '100%')};
|
|
${BOX_STYLED_SYSTEM};
|
|
${TEXT_STYLED_SYSTEM};
|
|
`;
|