theme.ts

interface ITheme {
  font: string;
  colors: IColors;
  fontWeights: IFontWeights;
  space: string[];
  breakpoints: string[];
  fontSize: IFontSize;
}

interface IColors {
  black: string;
  jetBlack: string;
  offWhite: string;
  primeWhite: string;
  grey1: string;
  grey2: string;
  grey3: string;
  grey4: string;
  palm: string;
  fresh: string;
  cherry: string;
  info: string;
  linkSpecial: string;
  linkRegular: string;
  ciroc: string;
  error: string;
  brandGradient: string;
}

interface IFontWeights {
  bold: number;
  black: number;
  light: number;
}

interface IFontSize {
  tiny: string;
  small: string;
  normal: string;
  big: string;
  super: string;
}

const theme: ITheme = {
  font: `Avenir, -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI",
  "Helvetica Neue", "Lucida Grande", sans-serif`,
  colors: {
    black: '#333',
    jetBlack: '#050002',
    offWhite: 'rgb(245, 249, 250)',
    primeWhite: 'rgb(250, 252, 251)',
    grey1: '#E7E7E7',
    grey2: '#ccc',
    grey3: '#999',
    grey4: '#666',
    palm: '#0c9',
    fresh: '#6DDDD4',
    cherry: '#ff3366',
    info: '#13a3f7',
    linkSpecial: '#004ae1',
    linkRegular: '#333333',
    ciroc: '#0099FF',
    error: '#ec3a3a',
    brandGradient: 'linear-gradient(141deg, rgb(109, 221, 212) 0%, rgb(109, 221, 212) 31%, rgb(80, 163, 236) 75%)',
  },
  fontWeights: {
    bold: 700,
    black: 900,
    light: 500,
  },
  space: [
    '0',
    '0.5rem',
    '1rem',
    '1.5rem',
    '2rem',
    '2.5rem',
    '3rem',
    '3.5rem',
    '4rem',
  ],
	breakpoints: [
		'700px',
		'972px',
		'1200px',
		'1800px',
	],
  fontSize: {
    tiny: '0.675rem',
    small: '0.85rem',
    normal: '1rem',
    big: '2.5rem',
    super: '3rem',
  }
};

export { theme };