export const colorsWhite = '#FFFFFF'

export const colorsBlack = '#000000'

export const colorsBlue = {
  1: '#D9F1FF',
  2: '#B9E4FD',
  3: '#8ED1F6',
  4: '#58B9EB',
  5: '#2EA0D6',
  6: '#0084BD',
  7: '#0074AB',
  8: '#006395',
  9: '#005685',
  10: '#00446B'
}
export const colorsTeal = {
  1: '#D5FAF5',
  2: '#AFFAEF',
  3: '#84F0E1',
  4: '#5CE6D4',
  5: '#2FD1BE',
  6: '#00BAA5',
  7: '#00A894',
  8: '#009380',
  9: '#007A6A',
  10: '#006658'
}
export const colorsGreen = {
  1: '#D9FAE5',
  2: '#ADF0C8',
  3: '#82E2AB',
  4: '#57D08E',
  5: '#2BB970',
  6: '#009E52',
  7: '#008F46',
  8: '#007C3A',
  9: '#00672E',
  10: '#005724'
}
export const colorsLime = {
  1: '#ECFFC7',
  2: '#DEFFA3',
  3: '#CCFC7A',
  4: '#B8F052',
  5: '#A3E029',
  6: '#8CCA08',
  7: '#7BB600',
  8: '#6BA300',
  9: '#588A00',
  10: '#4C7700'
}
export const colorsYellow = {
  1: '#FFFBCC',
  2: '#FFF7A8',
  3: '#FFF380',
  4: '#FFEB57',
  5: '#FFDF29',
  6: '#FAD000',
  7: '#E2B500',
  8: '#CC9E00',
  9: '#B28300',
  10: '#946500'
}
export const colorsOrange = {
  1: '#FFECD1',
  2: '#FFDCAD',
  3: '#FFCD8A',
  4: '#FFBA61',
  5: '#FFA43E',
  6: '#F59127',
  7: '#E27A18',
  8: '#CB670B',
  9: '#B85500',
  10: '#9E4100'
}
export const colorsRed = {
  1: '#FFD6D6',
  2: '#FFB3B3',
  3: '#FF8A8A',
  4: '#F86968',
  5: '#E94A3F',
  6: '#D21C09',
  7: '#C00F00',
  8: '#AB0600',
  9: '#920000',
  10: '#750000'
}
export const colorsPink = {
  1: '#FFDDEB',
  2: '#FFC2DB',
  3: '#FFA3C8',
  4: '#FF8AB5',
  5: '#F66FA1',
  6: '#E7558B',
  7: '#D1487B',
  8: '#C13368',
  9: '#A22554',
  10: '#8A1A45'
}
export const colorsPurple = {
  1: '#E9DEFF',
  2: '#D6C2FF',
  3: '#C0A3FF',
  4: '#A883F8',
  5: '#956CED',
  6: '#8359DF',
  7: '#7048C6',
  8: '#5934AC',
  9: '#482592',
  10: '#351973'
}

export const colorsTextIcon = {
  highOnDark: 'rgba(255, 255, 255, 0.95)',
  highOnLight: 'rgba(0, 0, 0, 0.90)',
  lowOnDark: 'rgba(255, 255, 255, 0.70)',
  lowOnLight: 'rgba(0, 0, 0, 0.65)'
}

export const colorsBorder = {
  highOnDark: 'rgba(255, 255, 255, 0.30)',
  highOnLight: 'rgba(0, 0, 0, 0.30)',
  lowOnDark: 'rgba(255, 255, 255, 0.15)',
  lowOnLight: 'rgba(0, 0, 0, 0.15)'
}

export const colorsBackgroundDark = {
  1: '#0D0F12',
  2: '#181C20',
  3: '#1E2429'
}

export const colorsBackgroundLight = {
  1: '#F0F3F5',
  2: '#F7F9FA',
  3: '#FFFFFF'
}

// TODO: rename this with rgb suffix so the color system is in the var name
export const colorsBackgroundUtilityCsv = '138,153,168'

export const colorsBackgroundUtility = {
  10: 'rgba(138,153,168, 0.10)',
  15: 'rgba(138,153,168, 0.15)',
  20: 'rgba(138,153,168, 0.20)',
  25: 'rgba(138,153,168, 0.25)',
  30: 'rgba(138,153,168, 0.30)',
  40: 'rgba(138,153,168, 0.40)',
  60: 'rgba(138,153,168, 0.60)'
}

export const colorsGradient = {
  skillsBackground: 'linear-gradient(90deg, #E80A89 0%, #F15B2A 100%)',
  skillsStop0: '#E80A89',
  skillsStop100: '#F15B2A',
  flowBackground: 'linear-gradient(90deg, #2968B2 0%, #27AAE1 100%)',
  flowStop0: '#2968B2',
  flowStop100: '#27AAE1'
}

export const colorsPrimaryAction = {
  background: colorsBlue[7],
  textDarkTheme: colorsBlue[5],
  textLightTheme: colorsBlue[7]
}

export const colorsStatus = {
  error: colorsRed[6],
  info: colorsBlue[6],
  success: colorsGreen[6],
  warning: colorsYellow[6]
}

export const colorsCode = {
  white: '#F2F2F2',
  gray: '#AAAAAA',
  red: '#F26D6D',
  orange: '#FF9466',
  yellow: '#FFCA80',
  green: '#B8CC7A',
  turquoise: '#ABD9C6',
  blue: '#8AC7E6',
  purple: '#E695BD',
  sand: '#D99077'
}