231 lines
4.6 KiB
TypeScript
231 lines
4.6 KiB
TypeScript
import { styled } from '../tokens/stitches.config'
|
|
|
|
const textVariants = {
|
|
style: {
|
|
body: {
|
|
fontSize: '$2',
|
|
lineHeight: '1.25',
|
|
},
|
|
logoTitle: {
|
|
fontFamily: 'Inter',
|
|
fontWeight: 700,
|
|
fontSize: '18px',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.15em',
|
|
// '@smDown': {
|
|
// display: 'none',
|
|
// visibility: 'collapse',
|
|
// }
|
|
},
|
|
bodyBold: {
|
|
fontWeight: 'bold',
|
|
fontSize: '$2',
|
|
lineHeight: '1.25',
|
|
},
|
|
recommendedByline: {
|
|
fontWeight: 'bold',
|
|
fontSize: '13.5px',
|
|
paddingTop: '4px',
|
|
mt: '0px',
|
|
mb: '16px',
|
|
color: '$grayTextContrast',
|
|
},
|
|
userName: {
|
|
fontWeight: '600',
|
|
fontSize: '13.5px',
|
|
paddingTop: '4px',
|
|
my: '6px',
|
|
color: '$grayText',
|
|
},
|
|
userNote: {
|
|
fontSize: '16px',
|
|
paddingTop: '0px',
|
|
marginTop: '0px',
|
|
lineHeight: '1.5',
|
|
color: '$grayTextContrast',
|
|
},
|
|
headline: {
|
|
fontSize: '$4',
|
|
'@md': {
|
|
fontSize: '$6',
|
|
},
|
|
},
|
|
fixedHeadline: {
|
|
fontSize: '24px',
|
|
fontWeight: '500',
|
|
},
|
|
subHeadline: {
|
|
fontSize: '24px',
|
|
fontWeight: '500',
|
|
},
|
|
articleTitle: {
|
|
fontWeight: 'bold',
|
|
fontSize: '32px',
|
|
'@md': {
|
|
fontSize: '47px',
|
|
},
|
|
margin: 0,
|
|
},
|
|
boldHeadline: {
|
|
fontWeight: 'bold',
|
|
fontSize: '$4',
|
|
'@md': {
|
|
fontSize: '$6',
|
|
},
|
|
margin: 0,
|
|
},
|
|
modalHeadline: {
|
|
fontWeight: '500',
|
|
fontSize: '24px',
|
|
lineHeight: '1',
|
|
color: '$grayText',
|
|
margin: 0,
|
|
},
|
|
modalTitle: {
|
|
fontSize: '16px',
|
|
fontWeight: '600',
|
|
color: '$grayText',
|
|
lineHeight: '1.50',
|
|
margin: 0,
|
|
},
|
|
boldText: {
|
|
fontWeight: '600',
|
|
fontSize: '16px',
|
|
lineHeight: '1',
|
|
color: '$textDefault',
|
|
},
|
|
shareHighlightModalAnnotation: {
|
|
fontSize: '18px',
|
|
lineHeight: '23.4px',
|
|
color: '$utilityTextSubtle',
|
|
m: 0,
|
|
},
|
|
footnote: {
|
|
fontSize: '$1',
|
|
},
|
|
shareTitle: {
|
|
fontSize: '$1',
|
|
fontWeight: '600',
|
|
color: '$grayText',
|
|
},
|
|
shareSubtitle: {
|
|
fontSize: '$1',
|
|
color: '$grayText',
|
|
},
|
|
listTitle: {
|
|
fontSize: '16px',
|
|
fontWeight: '500',
|
|
color: '$grayTextContrast',
|
|
lineHeight: '1.5',
|
|
wordBreak: 'break-word',
|
|
},
|
|
caption: {
|
|
color: '$grayText',
|
|
fontSize: '12px',
|
|
lineHeight: '1.5',
|
|
wordBreak: 'break-word',
|
|
},
|
|
captionLink: {
|
|
fontSize: '$2',
|
|
textDecoration: 'underline',
|
|
lineHeight: '1.5',
|
|
cursor: 'pointer',
|
|
},
|
|
action: {
|
|
fontSize: '16px',
|
|
fontWeight: '500',
|
|
lineHeight: '1.5',
|
|
},
|
|
actionLink: {
|
|
fontSize: '16px',
|
|
fontWeight: '500',
|
|
lineHeight: '1.5',
|
|
textDecoration: 'underline',
|
|
cursor: 'pointer',
|
|
},
|
|
navLink: {
|
|
m: 0,
|
|
fontSize: '$1',
|
|
fontWeight: 400,
|
|
color: '$graySolid',
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
opacity: 0.7,
|
|
},
|
|
},
|
|
controlButton: {
|
|
color: '$grayText',
|
|
fontWeight: '500',
|
|
fontFamily: 'inter',
|
|
fontSize: '14px',
|
|
},
|
|
menuTitle: {
|
|
pt: '0px',
|
|
m: '0px',
|
|
color: '$utilityTextDefault',
|
|
fontSize: 16,
|
|
fontFamily: 'inter',
|
|
fontWeight: '500',
|
|
lineHeight: 'unset',
|
|
},
|
|
libraryHeader: {
|
|
pt: '0px',
|
|
m: '0px',
|
|
fontSize: 24,
|
|
fontFamily: 'inter',
|
|
lineHeight: 'unset',
|
|
fontWeight: 'bold',
|
|
color: '$textSubtle',
|
|
},
|
|
aboutFooter: {
|
|
pt: '0px',
|
|
m: '0px',
|
|
fontSize: 24,
|
|
fontFamily: 'inter',
|
|
lineHeight: 'unset',
|
|
fontWeight: 'bold',
|
|
color: 'white',
|
|
},
|
|
error: {
|
|
color: '$error',
|
|
fontSize: '$2',
|
|
lineHeight: '1.25',
|
|
},
|
|
},
|
|
}
|
|
|
|
export const StyledText = styled('p', {
|
|
fontFamily: 'Inter',
|
|
fontWeight: 'normal',
|
|
lineHeight: '120%',
|
|
color: '$grayTextContrast',
|
|
variants: textVariants,
|
|
defaultVariants: {
|
|
style: 'footnote',
|
|
},
|
|
})
|
|
|
|
export const StyledTextSpan = styled('span', StyledText)
|
|
|
|
export const StyledListElement = styled('li', {
|
|
fontFamily: 'Inter',
|
|
fontWeight: 'normal',
|
|
lineHeight: '1.35',
|
|
color: '$grayTextContrast',
|
|
})
|
|
|
|
export const StyledList = styled('ul', {
|
|
fontFamily: 'Inter',
|
|
fontWeight: 'normal',
|
|
lineHeight: '1.35',
|
|
color: '$grayTextContrast',
|
|
})
|
|
|
|
export const StyledImg = styled('img', {})
|
|
|
|
export const StyledAnchor = styled('a', {
|
|
textDecoration: 'none',
|
|
})
|
|
|
|
export const StyledMark = styled('mark', {})
|