theme.js

const breakpoints = ["480px", "700px", "1025px", "1280px"];

// TODO should this be `small` medium and large
breakpoints.sm = breakpoints[0];
breakpoints.med = breakpoints[1];
breakpoints.lg = breakpoints[2];

const colors = {
  primary: "#0c40fc",
  blue: "#0c40fc",
  black: "#000000",
  charcoal: "#333333",
  darkgrey: "#666666",
  grey: "#999999",
  lightgrey: "#cccccc",
  smoke: "#e6e6e6",
  smokewhite: "#f2f2f2",
  smokeblue: "#f3f5ff",
  white: "#ffffff",

  transparentwhite10: "rgba(255,255,255,.1)",
  transparentwhite20: "rgba(255,255,255,.2)",

  gradient1:
    "linear-gradient(180deg, #F3F5FF 0%, #FFFFFF 44.6%, #FFFFFF 54.82%, #FFFFFF 63.49%, #F3F5FF 100%)",
};

const space = [0, 4, 8, 16, 24, 32, 64, 128, 256];

export const abeTheme = {
  borders: {
    light: `1px solid ${colors.smoke}`,
    primary: `1px solid ${colors.primary}`,
    dark: `1px solid ${colors.charcoal}`,
  },

  breakpoints,

  colors,

  fontSizes: {
    huge: "64px",
    title1: "40px",
    title2: "32px",
    title3: "24px",
    title4: "20px",
    title5: "16px",
    title6: "12px",

    body1: "18px",
    body2: "14px",
    body3: "12px",

    buttonNormal: "16px",
  },

  fonts: {
    base: "Regular,Segoe UI,sans-serif",
  },

  fontWeights: {
    normal: "400",
    bold: "700",

    huge: 700,
    title1: 700,
    title2: 700,
    title3: 700,
    title4: 500,
    title5: 500,
    title6: 500,

    body1: 400,
    body2: 400,
    body3: 400,

    buttonNormal: 400,
  },

  lineHeights: {
    huge: "80px",

    title1: "44px",
    title2: "40px",
    title3: "32px",
    title4: "28px",
    title5: "20px",
    title6: "16px",

    body1: "28px",
    body2: "20px",
    body3: "18px",

    loose: "1.6",
    tight: "1.25",
    base: "1.4",

    buttonNormal: "20px",
  },

  mediaQueries: {
    small: `@media screen and (min-width: ${breakpoints[0]})`,
    medium: `@media screen and (min-width: ${breakpoints[1]})`,
    large: `@media screen and (min-width: ${breakpoints[2]})`,
  },

  radii: {
    none: 0,
    small: 8,
    big: 12,
    full: "50%",
    sides: "9999px",
  },

  shadows: {
    none: "none",
    light: "0px 1px 3px rgba(0, 0, 0, 0.1)",
    medium: "0px 3px 6px rgba(0, 0, 0, 0.12)",
    heavy: "0px 10px 20px rgba(0, 0, 0, 0.12)",
  },

  space,

  sizes: {
    // breakpoint sizes
    wrapper: [
      breakpoints[0],
      breakpoints[1],
      breakpoints[2] - 2 * 20 /* padding */,
    ],
  },
};