// https://material.io/design/typography/the-type-system.html#type-scale

const letterSpacings = {
  xxs: -1.5,
  xs: -0.5,
  sm: 0,
  md: 0.1,
  lg: 0.15,
  xl: 0.25,
  xxl: 0.4,
  '3xl': 0.5,
  '4xl': 1.25,
  '5xl': 1.5,
};

const fontSizes = {
  xxs: 10,
  xs: 12,
  sm: 14,
  md: 16,
  lg: 20,
  xl: 24,
  xxl: 32,
  '3xl': 48,
  '4xl': 64,
  '5xl': 96,
};

const fontWeights = {
  light: 300,
  normal: 400,
  medium: 500,
  bold: 700,
};

const textVariants = {
  headline1: {
    fontWeight: fontWeights.light,
    fontSize: fontSizes['5xl'],
    letterSpacing: letterSpacings.xs,
  },
  headline2: {
    fontWeight: fontWeights.light,
    fontSize: fontSizes['4xl'],
    letterSpacing: letterSpacings.xxs,
  },
  headline3: {
    fontWeight: fontWeights.normal,
    fontSize: fontSizes['3xl'],
    letterSpacing: letterSpacings.sm,
  },
  headline4: {
    fontWeight: fontWeights.normal,
    fontSize: fontSizes.xxl,
    letterSpacing: letterSpacings.sm,
  },
  headline5: {
    fontWeight: fontWeights.normal,
    fontSize: fontSizes.xl,
    letterSpacing: letterSpacings.sm,
  },
  headline6: {
    fontWeight: fontWeights.medium,
    fontSize: fontSizes.lg,
    letterSpacing: letterSpacings.lg,
  },
  subtitle1: {
    fontWeight: fontWeights.normal,
    fontSize: fontSizes.md,
    letterSpacing: letterSpacings.lg,
  },
  subtitle2: {
    fontWeight: fontWeights.medium,
    fontSize: fontSizes.sm,
    letterSpacing: letterSpacings.md,
  },
  body1: {
    fontWeight: fontWeights.normal,
    fontSize: fontSizes.md,
    letterSpacing: letterSpacings['3xl'],
  },
  body2: {
    fontWeight: fontWeights.normal,
    fontSize: fontSizes.sm,
    letterSpacing: letterSpacings.xl,
  },
  button: {
    fontWeight: fontWeights.medium,
    fontSize: fontSizes.sm,
    letterSpacing: letterSpacings['4xl'],
    textTransform: 'uppercase',
  },
  caption: {
    fontWeight: fontWeights.normal,
    fontSize: fontSizes.xs,
    letterSpacing: letterSpacings.xxl,
  },
  overline: {
    fontWeight: fontWeights.normal,
    fontSize: fontSizes.xxs,
    letterSpacing: letterSpacings['5xl'],
    textTransform: 'uppercase',
  },
};

export const typography = {
  letterSpacings,
  fontSizes,
  fontWeights,
  textVariants,
};

export type LetterSpacings = typeof letterSpacings;
export type FontSizes = typeof fontSizes;
export type FontWeights = typeof fontWeights;
export type TextVariants = typeof textVariants;