apphouse/dist/styles/getTypographyStyles.ts

Component library for React that uses observable state management and theme-able components.

import { BaseStyleProps } from '../styles/baseStyles.interface';
import { TypographyStyles } from '../styles/defaults/themes.interface';

export const getTypographyStyles = ({
  colors,
  tokens
}: BaseStyleProps): TypographyStyles => {
  const { fontSize, spacings, fontFamily, fontWeight, lineHeight } = tokens;

  const defaultStyles = {
    color: 'inherit',
    fontFamily: 'inherit',
    fontWeight: 'inherit',
    margin: 0,
    padding: 0,
    wordBreak: 'break-word',
    textAlign: 'initial',
    marginBlockStart: 0,
    marginBlockEnd: 0,
    marginInlineStart: 0,
    marginInlineEnd: 0
  };
  return {
    a: {
      ...defaultStyles,
      fontSize: fontSize.standard,
      lineHeight: lineHeight?.standard,
      paddingBottom: '1px',
      textDecoration: 'underline',
      ':hover': {
        cursor: 'pointer',
        color: colors.brand
      }
    },
    standard: {
      fontFamily: fontFamily.default,
      fontSize: fontSize.standard,
      lineHeight: lineHeight?.standard
    },
    caption: {
      fontFamily: fontFamily.default,
      fontSize: fontSize.caption,
      lineHeight: lineHeight?.caption
    },
    underlined: {
      borderBottom: '2px solid',

      fontFamily: fontFamily.default,
      fontSize: 'inherit',
      lineHeight: 'inherit',
      fontWeight: 'inherit',

      paddingBottom: '1px',
      textDecoration: 'none',
      transition: 'all .1s ease'
    },
    header: {
      color: 'inherit',
      fontFamily: fontFamily.heading,
      fontSize: fontSize.header,
      fontWeight: fontWeight.extraBold,

      lineHeight: lineHeight?.header,
      marginBottom: spacings.xs,
      marginTop: spacings.xs
    },
    subheader: {
      color: 'inherit',
      fontFamily: fontFamily.heading,
      fontSize: fontSize.subheader,
      fontWeight: fontWeight.bold,
      lineHeight: lineHeight?.subheader,
      marginBlockStart: 0,
      marginBottom: spacings.xxs,
      marginTop: spacings.xxs,
      wordBreak: 'break-word'
    },
    title: {
      fontFamily: fontFamily.heading,
      fontSize: fontSize.title,
      fontWeight: fontWeight.bolder,
      lineHeight: lineHeight?.title,
      marginBlockStart: 0,
      marginBottom: spacings.xxs,
      marginTop: spacings.xxs
    },
    subtitle: {
      fontFamily: fontFamily.heading,
      fontSize: fontSize.subtitle,
      fontWeight: fontWeight.standard,
      lineHeight: lineHeight?.subtitle,
      marginBottom: spacings.xxs,
      marginTop: spacings.xxs
    },
    large: {
      fontFamily: fontFamily.heading,
      fontSize: fontSize.large,
      fontWeight: fontWeight.extraBold,
      lineHeight: lineHeight?.large,
      marginBottom: spacings.s,
      marginTop: spacings.s
    },
    accent: {
      color: colors.brand,
      fontFamily: 'inherit',
      fontSize: 'inherit',
      lineHeight: 'inherit',
      wordBreak: 'break-word'
    },
    emphasis: {
      color: 'inherit',
      fontFamily: 'inherit',
      fontSize: 'inherit',
      fontStyle: 'italic',
      wordBreak: 'break-word'
    },
    label: {
      fontSize: fontSize.standardSmall,
      lineHeight: lineHeight?.standardSmall
    }
  };
};