import { createTheme } from "@mantine/core";

const commonInputStyles = {
  label: {
    padding: 5,
  },
  root: {
    margin: "0",
  },
};

// Shared by MantineProvider and the theme-picker preview iframes.
export const baseTheme = createTheme({
  defaultRadius: "sm",
  respectReducedMotion: true,
  fontFamily: '"Inter", sans-serif',
  headings: { fontFamily: '"League Spartan", sans-serif' },
  activeClassName: "flxn-press",
  components: {
    TextInput: {
      styles: commonInputStyles,
    },
    DateTimePicker: {
      styles: commonInputStyles,
    },
    Input: {
      styles: commonInputStyles,
    },
    Select: {
      styles: commonInputStyles,
    },
    Autocomplete: {
      styles: commonInputStyles,
    },
    Card: {
      defaultProps: {
        shadow: "xs",
      },
    },
    Title: {
      styles: {
        root: {
          letterSpacing: "-0.01em",
        },
      },
    },
  },
});