theme/color.js

color.js

import color from 'color'

export const SHAPE = {
  RED: '#EB5C55',
  ORANGE: '#F6A623',
  PURPLE: '#A076C5',
  BLACK: '#3B3B3B',
  GREEN: '#2ECC71',
  PRIMARY: '#389BFF',
  PRIMARYBOLD: '#007EE5',
  PINK: '#FE6C88',
  GRAYLIGHT: '#fafbfb',
  GRAYMORELIGHT: '#f5f5f5',
  GRAYLIGHTMEDIUM: '#d5d5d5',
  GRAYMEDIUM: '#eee',
  GRAYBOLD: '#D4D4D4',
  GRAYTEXT: '#999999',
  YELLOW: '#f1c40f'
}

export const TEXT = {
  NORMAL: '#3B3B3B',
  PRIMARY: '#389BFF',
  PRIMARYBOLD: '#007EE5',
  GRAY: '#999999'
}

export const INPUT = {
  BORDER: SHAPE.GRAYMEDIUM,
  PLACEHOLDER: color(SHAPE.GRAYMEDIUM).darken(0.4).string(),
  FOCUS: SHAPE.PRIMARY
}

export default { SHAPE, TEXT, INPUT }

utils.js

import { SHAPE } from 'theme/color'

export function getColorFromText (text, charCodeAt = 1) {
  var colors = [
    '#3498db',
    '#1abc9c',
    '#e67e22',
    '#e74c3c',
    '#34495e',
    '#8e44ad',
    '#2ecc71',
    '#d35400',
    '#f39c12',
    '#f1c40f'
  ]
  var number = 0
  if (text) {
    number = text.charCodeAt(charCodeAt)
  } else number = 2
  if (number > 10) {
    number = number % 10
  }
  if (number > 100) {
    number = number % 100
  }
  return colors[number]
}

export function getColorByNumber (number) {
  number = number % 10
  switch (number) {
    case 1:
      return SHAPE.RED
    case 2:
      return SHAPE.GREEN
    case 3:
      return SHAPE.ORANGE
    case 4:
      return SHAPE.YELLOW
    case 5:
      return SHAPE.PURPLE
    case 6:
      return SHAPE.BLACK
    case 7:
      return SHAPE.PRIMARY
    case 8:
      return SHAPE.PRIMARYBOLD
    case 9:
      return SHAPE.GRAYTEXT
    default:
      return SHAPE.PINK
  }
}