text: // @flow
  
  export const borderRadius = 4;
  
  export const colors = {
    text: '#222',
    textLight: '#444',
    primary: '#2684FF',
    primary75: '#4C9AFF',
    primary50: '#B2D4FF',
    primary25: '#DEEBFF',
    danger: '#DE350B',
    dangerLight: '#FFBDAD',
  
    neutral0: 'hsl(0, 0%, 100%)',
    neutral1: 'hsl(0, 0%, 99%)',
    neutral2: 'hsl(0, 0%, 98%)',
    neutral3: 'hsl(0, 0%, 97%)',
    neutral4: 'hsl(0, 0%, 96%)',
    neutral5: 'hsl(0, 0%, 95%)',
    neutral10: 'hsl(0, 0%, 90%)',
    neutral20: 'hsl(0, 0%, 80%)',
    neutral30: 'hsl(0, 0%, 70%)',
    neutral40: 'hsl(0, 0%, 60%)',
    neutral50: 'hsl(0, 0%, 50%)',
    neutral60: 'hsl(0, 0%, 40%)',
    neutral70: 'hsl(0, 0%, 30%)',
    neutral80: 'hsl(0, 0%, 20%)',
    neutral90: 'hsl(0, 0%, 10%)',
    neutral100: 'hsl(0, 0%, 0%)',
  
    neutral1a: 'hsla(0, 0%, 0%, 0.01)',
    neutral2a: 'hsla(0, 0%, 0%, 0.02)',
    neutral3a: 'hsla(0, 0%, 0%, 0.03)',
    neutral4a: 'hsla(0, 0%, 0%, 0.04)',
    neutral5a: 'hsla(0, 0%, 0%, 0.05)',
    neutral10a: 'hsla(0, 0%, 0%, 0.1)',
    neutral20a: 'hsla(0, 0%, 0%, 0.2)',
    neutral30a: 'hsla(0, 0%, 0%, 0.3)',
    neutral40a: 'hsla(0, 0%, 0%, 0.4)',
    neutral50a: 'hsla(0, 0%, 0%, 0.5)',
    neutral60a: 'hsla(0, 0%, 0%, 0.6)',
    neutral70a: 'hsla(0, 0%, 0%, 0.7)',
    neutral80a: 'hsla(0, 0%, 0%, 0.8)',
    neutral90a: 'hsla(0, 0%, 0%, 0.9)',
  };
  
  const baseUnit = 4;
  
  export const spacing = {
    /* Used to calculate consistent margin/padding on elements */
    baseUnit,
    /* The minimum height of the control */
    controlHeight: 38,
    /* The amount of space between the control and menu */
    menuGutter: baseUnit * 2,
  };
  