import merge from "lodash-es/merge";
import { getColors } from "../styles/colors";
import createTheme from "./createTheme";
var defaultConfig = {
  spacers: {
    values: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 384, 512],
    unit: "px"
  },
  colors: getColors(),
  typography: {
    font1: ["Montserrat", "sans-serif"].join(","),
    font2: ["Nunito", "sans-serif"].join(","),
    fontWeight: 400,
    fontSizeBase: {
      constant: 18,
      unit: "px"
    },
    lineHeight: 1.25,
    color: "#4a4a4a",
    sizing: {
      h1: 36,
      h2: 24,
      h3: 21,
      h4: 18,
      h5: 18,
      h6: 18,
      body0: 14,
      body1: 18,
      body2: 21,
      body3: 24,
      span: 18
    },
    variants: {
      title: {},
      subtitle: {},
      title2: {},
      paragraph: {},
      inputText: {},
      label: {},
      small: {},
      smallItalic: {},
      caption: {}
    }
  },
  shadows: {
    none: "none",
    hover: "0 2px 20px rgba(0,0,0,0.1)",
    normal: "0 2px 20px rgba(0,0,0,0.1)"
  },
  borderRadius: {
    small: "4px",
    normal: "8px",
    full: "999999rem"
  },
  formControls: {
    heights: {
      normal: "48px"
    }
  },
  transitions: {
    easings: {
      agressive: "cubic-bezier(.38,.01,.07,1)",
      ease_in_out: "cubic-bezier(.4,0,.2,1)"
    },
    duration: {
      "short": "300ms",
      quick: "150ms"
    }
  },
  spaces: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
    xl: "32px",
    "2xl": "48px",
    "3xl": "72px",
    "4xl": "96px",
    apply: function apply() {}
  },
  breakpoints: {
    values: {
      sm: 800,
      md: 1400,
      lg: 1800
    },
    up: function up() {},
    down: function down() {}
  }
};
export default (function () {
  var themeConfigInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var themeConfig = merge(defaultConfig, themeConfigInput);
  return createTheme(themeConfig);
});