import * as CSS from "csstype";
import { ThemeSpaces } from "styled-system";


/**
 * Values used for 
 * 
 * width, height, minWidth, maxWidth, minHeight, maxHeight, size
 */
declare module "styled-system" {

  export interface ThemeSpaces {
    NONE: CSS.Property.Margin<number | string>;
    XS: CSS.Property.Margin<number | string>;
    S: CSS.Property.Margin<number | string>;
    M: CSS.Property.Margin<number | string>;
    L: CSS.Property.Margin<number | string>;
    XL: CSS.Property.Margin<number | string>;
    XXL: CSS.Property.Margin<number | string>;
  }
}

export const spacesMap: Partial<ThemeSpaces> = {
  NONE: 0,
  XS: 2,
  S: 4,
  M: 8,
  L: 16,
  XL: 32,
  XXL: 64
};