my theme-ui theming config

theme.ts

// @ts-ignore
import {base, dark} from '@theme-ui/presets';

export const theme = {
  ...base,
  initialColorModeName: 'light',
  useColorSchemeMediaQuery: true,
  fontSizes: [
    '0.75em',
    '0.875em',
    '1em',
    '1.250em',
    '1.5em',
    '2em',
    '3em',
    '4em',
    '6em',
  ],
  fonts: {
    body: '"Inter", system-ui, sans-serif',
    heading: '"Inter", system-ui, sans-serif',
    monospace: 'Menlo, monospace',
  },
  styles: {
    ...base.styles,
    spinner: {
      color: 'text',
    },
    button: {
      color: 'background',
      bg: 'text',
      '&:focus': {
        outline: 'auto 5px',
        outlineColor: 'text',
      },
      fontWeight: 'bold',
      cursor: 'pointer',
    },
  },
  buttons: {
    close: {
      cursor: 'pointer',
      '&:focus': {
        outline: 'auto 5px',
        outlineColor: 'text',
      },
    },
  },
  badges: {
    primary: {
      color: 'background',
      bg: 'primary',
    },
    outline: {
      color: 'primary',
      bg: 'transparent',
      boxShadow: 'inset 0 0 0 2px',
      borderRadius: 6,
      px: 2,
      py: 1,
    },
  },
  forms: {
    input: {
      fontWeight: 'bold',
      border: '2px solid',
      borderColor: 'text',
      '&:focus': {
        outline: 'solid 4px',
        outlineColor: 'text',
      },
      '&[aria-checked=true]': {
        bg: 'text',
      },
    },
    switch: {
      cursor: 'pointer',
      color: 'background',
      bg: 'background',
      border: '2px solid',
      borderColor: 'text',
      '&[aria-checked=true]': {
        bg: 'text',
      },
      thumb: {
        border: '2px solid',
        borderColor: 'text',
        bg: 'background',
        mt: '-2px',
        ml: '-2px',
      },
    },
  },
  colors: {
    ...base.colors,
    shadow1: 'rgba(0,0,0,0.12)',
    shadow2: 'rgba(0,0,0,0.24)',
    primary: base.colors.text,
    secondary: base.colors.muted,
    tertiary: '#DDD',
    modes: {
      dark: {
        ...dark.colors,
        shadow1: 'rgba(0,0,0,0.12)',
        shadow2: 'rgba(0,0,0,0.24)',
        primary: dark.colors.text,
        secondary: dark.colors.muted,
        tertiary: '#333',
      },
    },
  },
};