import { breakpoints } from './media';

export const size = {
  0: 0,
  0.25: 1,
  0.5: 2,
  0.75: 3,
  1: 4,
  1.5: 6,
  2: 8,
  2.5: 10,
  3: 12,
  true: 12,
  3.5: 14,
  4: 16,
  4.5: 18,
  5: 20,
  6: 24,
  7: 28,
  8: 32,
  9: 36,
  10: 40,
  11: 44,
  12: 48,
  13: 52,
  14: 56,
  15: 60,
  16: 64,
  17: 68,
  18: 72,
  19: 76,
  20: 80,
  px: 1,
  pixel: 1,
  none: 0,
  gutter: 24,
  xxxxsmall: 2,
  xxxsmall: 4,
  xxsmall: 6,
  xsmall: 8,
  small: 12,
  medium: 20,
  large: 32,
  xlarge: 42,
  xxlarge: 96,
  regular: 20,
  full: '100%',

  // Add size token for each breakpoint. Eg. width="$mobile".
  ...breakpoints,

  // - Old break point sizes.
  // sm: 640,
  // md: 768,
  // lg: 1024,
  // xl: 1280,

  // - Do we want 1/2 etc % sizes?
};

export type Sizes = typeof size;
export type SizeKeys = `${keyof Sizes}`;