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

const baseFontFamily = '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif';

export const defaultTheme = createTheme({
  primaryColor: 'blue',
  fontFamily: baseFontFamily,
  headings: {
    fontFamily: baseFontFamily,
  },
  defaultRadius: 'md',
});

export const compactTheme = createTheme({
  primaryColor: 'blue',
  fontFamily: baseFontFamily,
  headings: {
    fontFamily: baseFontFamily,
  },
  defaultRadius: 'md',
  spacing: {
    xs: '4px',
    sm: '6px',
    md: '10px',
    lg: '12px',
    xl: '16px',
  },
  fontSizes: {
    xs: '11px',
    sm: '12px',
    md: '13px',
    lg: '15px',
    xl: '18px',
  },
  components: {
    Table: {
      defaultProps: {
        verticalSpacing: 'xs',
        horizontalSpacing: 'xs',
        fz: 'sm',
      },
    },
    Card: {
      defaultProps: {
        padding: 'sm',
      },
    },
    AppShell: {
      defaultProps: {
        padding: 'xs',
      },
    },
  },
});

/** @deprecated Use `defaultTheme` or `compactTheme` instead */
export const theme = defaultTheme;