Arena-config NPM

// GLOBALS

// size

export const LARGEST = 94
export const LARGER = 76
export const LARGE = 60
export const MEDIUM = 46
export const SMALL = 34
export const SMALLER = 24
export const SMALLEST = 16

// color

export const RED = '#de4c02'
export const ORANGE = '#f39c12'
export const YELLOW = '#f1c40f'
export const GREEN = '#27ae60'
export const BLUE = '#3498db'
export const PURPLE = '#9a59b8'
export const PINK = '#de659c'

// grayscale

export const BLACK = '#0a0b0c'
export const DARKEST_GRAY = '#2a2d2f'
export const DARKER_GRAY = '#35393d'
export const DARK_GRAY = '#4c4e51'
export const GRAY = '#777879'
export const LIGHT_GRAY = '#999b9c'
export const LIGHTER_GRAY = '#bbbdbf'
export const LIGHTEST_GRAY = '#d5d7d8'
export const WHITE = '#ffffff'

// font weight

export const FONT_WEIGHT_1 = 300
export const FONT_WEIGHT_2 = 400
export const FONT_WEIGHT_3 = 500
export const FONT_WEIGHT_4 = 700
export const FONT_WEIGHT_5 = 800
export const FONT_2_WEIGHT_1 = 300
export const FONT_2_WEIGHT_2 = 400

// animation speed

export const ANIMATION_SPEED_FASTEST = '.1s'
export const ANIMATION_SPEED_FASTER = '.125s'
export const ANIMATION_SPEED_FAST = '.15s'
export const ANIMATION_SPEED_MEDIUM = '.2s'
export const ANIMATION_SPEED_SLOW = '.25s'
export const ANIMATION_SPEED_SLOWER = '.375s'
export const ANIMATION_SPEED_SLOWEST = '.5s'

// border

export const BORDER_COLOR = 'transparent'
export const BORDER_RADIUS = '1px'
export const BORDER_STYLE = 'solid'
export const BORDER_WIDTH = '1px'

export const BORDER = `${BORDER_WIDTH} ${BORDER_STYLE} ${BORDER_COLOR}`
export const DASHED_BORDER = `${BORDER_WIDTH} dashed ${LIGHTER_GRAY}`
export const SOLID_BORDER = `${BORDER_WIDTH} solid ${GRAY}`

// media queries

export const MIN_DEVICE_PIXEL_RATIO = 2
export const MOBILE_WIDTH = 320
export const TABLET_WIDTH = 736

export const FOR_MOBILE = `@media (max-width: ${MOBILE_WIDTH}px)`
export const FOR_TABLET = `@media (min-width: ${MOBILE_WIDTH + 1}px) and (max-width: ${TABLET_WIDTH}px)`
export const FOR_DESKTOP = `@media (min-width: ${TABLET_WIDTH + 1}px)`

export const FOR_RETINA = `@media (-webkit-min-device-pixel-ratio: ${MIN_DEVICE_PIXEL_RATIO})`

// field types

export const DATE_TIME_FIELD = 'dateTime'
export const NUMBER_FIELD = 'number'
export const SELECT_FIELD = 'select'
export const TEXT_FIELD = 'text'
export const TEXT_AREA_FIELD = 'textArea'

// DEFAULTS (maybe move this)

export const ALIGN_ITEMS = 'center'
export const COLOR = DARK_GRAY
export const DATE_FORMAT = 'YYYY-MM-DD'
export const FIELD_WIDTH = '200px'
export const FONT_1 = 'effra'
export const FONT_2 = 'din-condensed'
export const FONT_FALLBACK = 'Avenir, Open Sans, Helvetica Neue, Calibri, Arial, sans-serif'
export const INLINE_SPACING = SMALLER
export const LINE_HEIGHT = 1.1
export const TIME_FORMAT = 'h:mm a'
export const SELECT_MENU_MAX_HEIGHT = '12em'