Colors

In a design system, it's common to use a color palette that includes a set of base colors. This palette should preferrably not be directly included as values in the theme. The naming of colors in the theme object should instead be used to assign semantic meaning to the palette,

Defning color paletter and colors object

const palette = {
  // bg color hex
  color1: '#F9FAFB',
  color2: '#FFFFFF',

  // primary colors hex (cool blue tones)
  color3: '#E8F0FE',
  color4: '#CDE1FB',
  color5: '#AACDF6',
  color6: '#82B7F0',
  color7: '#589FEB',
  color8: '#4287E8',
  color9: '#376EC5',
  color10: '#2B579F',
  color11: '#1F4278',
  color12: '#162F52',

  // secondary colors hex (warm gray tones)
  color13: '#F5F5F7',
  color14: '#DADDE1',
  color15: '#BCC0C6',
  color16: '#9EA4AC',
  color17: '#808892',
  color18: '#6B727C',
  color19: '#575D66',
  color20: '#42474F',
  color21: '#30353C',
  color22: '#202428',

  // black colors hex
  color23: '#EDEDED',
  color24: '#C8C8C8',
  color25: '#A5A5A5',
  color26: '#818181',
  color27: '#5F5F5F',
  color28: '#3B3B3B',
  color29: '#2D2D2D',
  color30: '#212121',
  color31: '#181818',
  color32: '#0F0F0F',

  // success colors hex (green tones)
  color33: '#ECFDF5',
  color34: '#D2F7E1',
  color35: '#AAF0C8',
  color36: '#6EE7AC',
  color37: '#34D487',
  color38: '#22C176',
  color39: '#1CA162',
  color40: '#14814E',
  color41: '#0F633B',
  color42: '#0A4A2B',

  // warning colors hex (amber tones)
  color43: '#FFF7E6',
  color44: '#FEEAC6',
  color45: '#FEDFA4',
  color46: '#FDD584',
  color47: '#FCCB65',
  color48: '#FBB949',
  color49: '#E1A83F',
  color50: '#B38230',
  color51: '#886525',
  color52: '#664D1C',

  // danger colors hex (red tones)
  color53: '#FCEBEB',
  color54: '#F9C6C6',
  color55: '#F6A3A3',
  color56: '#F07A7A',
  color57: '#E75252',
  color58: '#DD2C2C',
  color59: '#C22525',
  color60: '#9B1E1E',
  color61: '#771818',
  color62: '#571313',

  color63: 'transparent',

  // neutral colors hex (muted tones)
  color64: '#F3F4F6',
  color65: '#D9DBDE',
  color66: '#BDC1C4',
  color67: '#9FA3A7',
  color68: '#80868C',
  color69: '#4A4F55',
  color70: '#3F4349',
  color71: '#35383E',
  color72: '#2A2D32',
  color73: '#1F2124',
};


export const colors = {
  // bg color
  background: palette.color1,
  white: palette.color2,
  transparent: palette.color63,
  overlay: palette.color63,

  // primary colors
  primary: palette.color8,
  primary50: palette.color3,
  primary100: palette.color4,
  primary200: palette.color5,
  primary300: palette.color6,
  primary400: palette.color7,
  primary500: palette.color8,
  primary600: palette.color9,
  primary700: palette.color10,
  primary800: palette.color11,
  primary900: palette.color12,

  // secondary colors
  secondary: palette.color18,
  secondary50: palette.color13,
  secondary100: palette.color14,
  secondary200: palette.color15,
  secondary300: palette.color16,
  secondary400: palette.color17,
  secondary500: palette.color18,
  secondary600: palette.color19,
  secondary700: palette.color20,
  secondary800: palette.color21,
  secondary900: palette.color22,

  // black colors
  black: palette.color28,
  black50: palette.color23,
  black100: palette.color24,
  black200: palette.color25,
  black300: palette.color26,
  black400: palette.color27,
  black500: palette.color28,
  black600: palette.color29,
  black700: palette.color30,
  black800: palette.color31,
  black900: palette.color32,

  // success colors
  success: palette.color38,
  success50: palette.color33,
  success100: palette.color34,
  success200: palette.color35,
  success300: palette.color36,
  success400: palette.color37,
  success500: palette.color38,
  success600: palette.color39,
  success700: palette.color40,
  success800: palette.color41,
  success900: palette.color42,

  // warning colors
  warning: palette.color48,
  warning50: palette.color43,
  warning100: palette.color44,
  warning200: palette.color45,
  warning300: palette.color46,
  warning400: palette.color47,
  warning500: palette.color48,
  warning600: palette.color49,
  warning700: palette.color50,
  warning800: palette.color51,
  warning900: palette.color52,

  // danger colors
  danger: palette.color58,
  danger50: palette.color53,
  danger100: palette.color54,
  danger200: palette.color55,
  danger300: palette.color56,
  danger400: palette.color57,
  danger500: palette.color58,
  danger600: palette.color59,
  danger700: palette.color60,
  danger800: palette.color61,
  danger900: palette.color62,

  // neutral colors
  neutral: palette.color69,
  neutral50: palette.color64,
  neutral100: palette.color65,
  neutral200: palette.color66,
  neutral300: palette.color67,
  neutral400: palette.color68,
  neutral500: palette.color69,
  neutral600: palette.color70,
  neutral700: palette.color71,
  neutral800: palette.color72,
  neutral900: palette.color73,
};