import { Theme } from '@emotion/react';
import { COLOR_DARK, COLOR_LIGHT } from './color';
import { FONT_FAMILY, FONT_SIZE } from './font';
import { BORDER_RADIUS } from './radius';
import { SIZE } from './size';

export const lightTheme: Theme = {
  colors: COLOR_LIGHT,
  fontSizes: FONT_SIZE,
  fonts: FONT_FAMILY,
  radii: BORDER_RADIUS,
  sizes: SIZE,
  space: SIZE,
};

export const darkTheme: Theme = {
  colors: COLOR_DARK,
  fontSizes: FONT_SIZE,
  fonts: FONT_FAMILY,
  radii: BORDER_RADIUS,
  sizes: SIZE,
  space: SIZE,
};

export const themes: Themes = {
  dark: darkTheme,
  light: lightTheme,
};

export type ThemeMode = 'dark' | 'light';
export type Themes = Record<ThemeMode, Theme>;