import { Theme } from '@emotion/react';

export const BASE_SIZE = {
  1: 1,
  2: 2,
  4: 4,
  8: 8,
  12: 12,
  16: 16,
  20: 20,
  24: 24,
  32: 32,
  40: 40,
  48: 48,
};

export const SIZE: Theme['sizes'] = {
  '3xs': BASE_SIZE['4'],
  '2xs': BASE_SIZE['8'],
  xs: BASE_SIZE['12'],
  s: BASE_SIZE['16'],
  m: BASE_SIZE['20'],
  l: BASE_SIZE['24'],
  xl: BASE_SIZE['32'],
  '2xl': BASE_SIZE['40'],
  '3xl': BASE_SIZE['48'],
};

export const PADDING: Theme['sizes'] = SIZE;

export const MARGIN: Theme['sizes'] = SIZE;

export const BORDER_WIDTH = {};

export const BORDER_RADIUS = {};