Untitled

import { createTheme } from "@mui/material";
import { Inter } from "next/font/google";
import localFont from "next/font/local";

export const breakpoints = {
  xs: 480,
  sm: 768,
  md: 992,
  lg: 1240,
  xl: 1800,
};

export const inter = Inter({
  weight: ["300", "400", "500", "700"],
  subsets: ["latin"],
  display: "swap",
  fallback: ["Helvetica", "Arial", "sans-serif"],
});

export const helvetica = localFont({
  src: [
    {
      path: "./fonts/Helvetica/HelveticaNowDisplay-Regular.ttf",
      weight: "400",
    },
    { path: "./fonts/Helvetica/HelveticaNowDisplay-Bold.ttf", weight: "600" },
  ],
});

const theme = createTheme({
  palette: {
    background0: "#18181B",
    base0: "#FFFFFF",
    gray_900: "#18181B",
    gray_700: "#3F3F46",
    gray_600: "#51525C",
    gray_300: "#D1D1D6",
    primary_600: "#155EEF",
  },
  typography: {
    fontFamily: `${helvetica.style.fontFamily}, ${inter.style.fontFamily}`,
    button: {
      textTransform: "none",
    },
    ui_header: {
      fontFamily: inter.style.fontFamily,
      fontSize: "16px",
      fontWeight: 600,
      lineHeight: "20px",
      letterSpacing: "0em",
    },
    ui_button: {
      fontFamily: inter.style.fontFamily,
      fontSize: "16px",
      fontWeight: 600,
      lineHeight: "24px",
      letterSpacing: "0em",
    },
    ui_text1: {
      fontFamily: helvetica.style.fontFamily,
      fontSize: "48px",
      fontWeight: 500,
      lineHeight: "60px",
      letterSpacing: "-0.02em",
    },
    ui_text2: {
      fontFamily: helvetica.style.fontFamily,
      fontSize: "20px",
      fontWeight: 400,
      lineHeight: "30px",
      letterSpacing: "0em",
    },
    ui_text3: {
      fontFamily: helvetica.style.fontFamily,
      fontSize: "16px",
      fontWeight: 400,
      lineHeight: "35px",
      letterSpacing: "0em",
    },
    ui_text4: {
      fontFamily: helvetica.style.fontFamily,
      fontSize: "18px",
      fontWeight: 600,
      lineHeight: "28px",
      letterSpacing: "0em",
    },
    ui_text5: {
      fontFamily: helvetica.style.fontFamily,
      fontSize: "14px",
      fontWeight: 400,
      lineHeight: "20px",
      letterSpacing: "0em",
    },
    ui_text1_inter: {
      fontFamily: inter.style.fontFamily,
      fontSize: "48px",
      fontWeight: 500,
      lineHeight: "60px",
      letterSpacing: "-0.02em",
    },
    ui_text2_inter: {
      fontFamily: inter.style.fontFamily,
      fontSize: "20px",
      fontWeight: 400,
      lineHeight: "30px",
      letterSpacing: "0em",
    },
    ui_text3_inter: {
      fontFamily: inter.style.fontFamily,
      fontSize: "16px",
      fontWeight: 400,
      lineHeight: "35px",
      letterSpacing: "0em",
    },
    ui_text4_inter: {
      fontFamily: inter.style.fontFamily,
      fontSize: "18px",
      fontWeight: 600,
      lineHeight: "28px",
      letterSpacing: "0em",
    },
    ui_text5_inter: {
      fontFamily: inter.style.fontFamily,
      fontSize: "14px",
      fontWeight: 400,
      lineHeight: "20px",
      letterSpacing: "0em",
    },
  },
});

export default theme;