theme.js

import icons from "./icons";

const breakpoints = ["480px", "900px", "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",
  smoke2: "#F9FAFB",
  white: "#ffffff",

  success: "#2EC777",
  error: "#C63D2E",

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

  overlay: "rgba(0,0,0,.5)",

  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: {
    none: "0px",
    light: `1px solid ${colors.smoke}`,
    error: `1px solid ${colors.error}`,
    lightgrey: `1px solid ${colors.lightgrey}`,
    primary: `1px solid ${colors.primary}`,
    dark: `1px solid ${colors.charcoal}`,
    white: `1px solid ${colors.white}`,
  },

  breakpoints,

  colors,

  fontSizes: {
    huge: "64px",
    hugemobile: "64px",
    title1: "48px",
    title1mobile: "32px",
    title2: "28px",
    title2mobile: "20px",
    title3: "24px",
    title3mobile: "16px",
    title4: "18px",
    title4mobile: "14px",
    title5: "16px",
    title5mobile: "12px",
    title6: "12px",
    title6mobile: "10px",

    body1: "18px",
    body1mobile: "14px",
    body2: "16px",
    body2mobile: "12px",
    body3: "14px",
    body3mobile: "10px",

    buttonNormal: "16px",
    buttonSmall: "14px",
  },

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

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

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

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

    buttonNormal: 400,
  },

  lineHeights: {
    huge: "80px",
    hugemobile: "80px",

    title: "1.2",
    // title1: "44px",
    // title1mobile: "32px",
    // title2: "40px",
    // title2mobile: "40px",
    // title3: "32px",
    // title3mobile: "32px",
    // title4: "28px",
    // title4mobile: "20px",
    // title5: "20px",
    // title5mobile: "20px",
    // title6: "16px",
    // title6mobile: "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: 4,
    big: 12,
    smallPill: 20,
    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)",

    dialog: "0px 19px 38px rgba(0, 0, 0, 0.32)",

    "100light": "0px 1px 3px rgba(0, 0, 0, 0.12)",
    "100dark": "0px 1px 3px rgba(0, 0, 0, 0.24)",

    "200light": "0px 3px 6px rgba(0, 0, 0, 0.12)",
    "200dark": "0px 3px 6px rgba(0, 0, 0, 0.24)",

    "300light": "0px 10px 20px rgba(0, 0, 0, 0.12)",
    "300dark": "0px 10px 20px rgba(0, 0, 0, 0.24)",

    "400light": "0px 14px 28px rgba(0, 0, 0, 0.16)",
    "400dark": "0px 14px 28px rgba(0, 0, 0, 0.28)",

    "500light": "0px 19px 38px rgba(0, 0, 0, 0.2)",
    "500dark": "0px 19px 38px rgba(0, 0, 0, 0.32)",
  },

  space,

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

  zIndices: {
    overlay: 39,
    drawer: 40,
    dialogContent: 41,
    header: 10,
    subheader: 20,
    tooltip: 25,
  },

  icons,
};