import { vars } from '../vars.css';
import {
  FontsContract,
  FontSizesContract,
  FontWeightsContract,
  LetterSpacingsContract,
  LineHeightsContract,
} from './typography.contract';

/*-- Font families --*/

export const fonts: FontsContract = {
  primary: "'Cousine', monospace",
  mono: '$primary',
};

/*-- Font sizes --*/

export const fontSizes: FontSizesContract = {
  '2xs': '0.625rem',
  xs: '0.75rem',
  sm: '0.875rem',
  md: '1rem',
  lg: '1.125rem',
  xl: '1.375rem',
  '2xl': '1.625rem',
  '3xl': '2rem',
  '4xl': '2.5rem',

  // Semantic
  h1: vars.fontSizes['4xl'],
  h2: vars.fontSizes['2xl'],
  h3: vars.fontSizes['xl'],
  h4: vars.fontSizes['lg'],
  h5: vars.fontSizes['md'],
  h6: vars.fontSizes['md'],
  body1: vars.fontSizes['sm'],
  body2: vars.fontSizes['xs'],
  caption: vars.fontSizes['2xs'],
};

/*-- Font weights --*/

export const fontWeights: FontWeightsContract = {
  normal: '400',
  bold: '700',

  // Semantic
  h1: vars.fontWeights['bold'],
  h2: vars.fontWeights['bold'],
  h3: vars.fontWeights['bold'],
  h4: vars.fontWeights['bold'],
  h5: vars.fontWeights['bold'],
  h6: vars.fontWeights['normal'],
  body1: vars.fontWeights['normal'],
  body2: vars.fontWeights['normal'],
  caption: vars.fontWeights['normal'],
};

/*-- Line heights --*/

export const lineHeights: LineHeightsContract = {
  sm: '1.25',
  md: '1.5',
  lg: '1.625',

  // Semantic
  none: '1',
  base: vars.lineHeights['md'],
};

/*-- Letter spacings --*/

export const letterSpacings: LetterSpacingsContract = {
  tighter: '-0.05em',
  tight: '-0.025em',
  normal: '0',
  wide: '0.025em',
  wider: '0.05em',
  widest: '0.1em',
};