refactor(tailwind): add-consistent-theme-colors-to-tailwind EE-3255 (#6989)

* refactor(tailwind): add custom colors EE-3255

tailwind.config.js

@@ -4,6 +4,97 @@ module.exports = {
     preflight: false,
   },
   theme: {
-    colors: { transparent: 'transparent', current: 'currentColor', white: '#ffffff' },
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: 'var(--white-color)',
+      black: 'var(--black-color)',
+      'grey-1': 'var(--grey-1)',
+      'grey-2': 'var(--grey-2)',
+      'grey-3': 'var(--grey-3)',
+      'grey-4': 'var(--grey-4)',
+      'grey-5': 'var(--grey-5)',
+      'grey-6': 'var(--grey-6)',
+      'grey-7': 'var(--grey-7)',
+      'grey-8': 'var(--grey-8)',
+      'grey-9': 'var(--grey-9)',
+      'grey-10': 'var(--grey-10)',
+      'grey-11': 'var(--grey-11)',
+      'grey-12': 'var(--grey-12)',
+      'grey-13': 'var(--grey-13)',
+      'grey-14': 'var(--grey-14)',
+      'grey-15': 'var(--grey-15)',
+      'grey-16': 'var(--grey-16)',
+      'grey-17': 'var(--grey-17)',
+      'grey-18': 'var(--grey-18)',
+      'grey-19': 'var(--grey-19)',
+      'grey-20': 'var(--grey-20)',
+      'grey-21': 'var(--grey-21)',
+      'grey-22': 'var(--grey-22)',
+      'grey-23': 'var(--grey-23)',
+      'grey-24': 'var(--grey-24)',
+      'grey-25': 'var(--grey-25)',
+      'grey-26': 'var(--grey-26)',
+      'grey-27': 'var(--grey-27)',
+      'grey-28': 'var(--grey-28)',
+      'grey-29': 'var(--grey-29)',
+      'grey-30': 'var(--grey-30)',
+      'grey-31': 'var(--grey-31)',
+      'grey-32': 'var(--grey-32)',
+      'grey-33': 'var(--grey-33)',
+      'grey-34': 'var(--grey-34)',
+      'grey-35': 'var(--grey-35)',
+      'grey-36': 'var(--grey-36)',
+      'grey-37': 'var(--grey-37)',
+      'grey-38': 'var(--grey-38)',
+      'grey-39': 'var(--grey-39)',
+      'grey-40': 'var(--grey-40)',
+      'grey-41': 'var(--grey-41)',
+      'grey-42': 'var(--grey-42)',
+      'grey-43': 'var(--grey-43)',
+      'grey-44': 'var(--grey-44)',
+      'grey-45': 'var(--grey-45)',
+      'grey-46': 'var(--grey-46)',
+      'grey-47': 'var(--grey-47)',
+      'grey-48': 'var(--grey-48)',
+      'grey-49': 'var(--grey-49)',
+      'grey-50': 'var(--grey-50)',
+      'grey-51': 'var(--grey-51)',
+      'grey-52': 'var(--grey-52)',
+      'grey-53': 'var(--grey-53)',
+      'grey-54': 'var(--grey-54)',
+      'grey-55': 'var(--grey-55)',
+      'grey-56': 'var(--grey-56)',
+      'grey-57': 'var(--grey-57)',
+      'grey-58': 'var(--grey-58)',
+      'grey-59': 'var(--grey-59)',
+      'grey-60': 'var(--grey-60)',
+      'grey-61': 'var(--grey-61)',
+      'blue-1': 'var(--blue-1)',
+      'blue-2': 'var(--blue-2)',
+      'blue-3': 'var(--blue-3)',
+      'blue-4': 'var(--blue-4)',
+      'blue-5': 'var(--blue-5)',
+      'blue-6': 'var(--blue-6)',
+      'blue-7': 'var(--blue-7)',
+      'blue-8': 'var(--blue-8)',
+      'blue-9': 'var(--blue-9)',
+      'blue-10': 'var(--blue-10)',
+      'blue-11': 'var(--blue-11)',
+      'blue-12': 'var(--blue-12)',
+      'blue-13': 'var(--blue-13)',
+      'blue-14': 'var(--blue-14)',
+      'red-1': 'var(--red-1)',
+      'red-2': 'var(--red-2)',
+      'red-3': 'var(--red-3)',
+      'red-4': 'var(--red-4)',
+      'red-5': 'var(--red-5)',
+      'red-6': 'var(--red-6)',
+      'red-7': 'var(--red-7)',
+      'green-1': 'var(--green-1)',
+      'green-2': 'var(--green-2)',
+      'green-3': 'var(--green-3)',
+      'orange-1': 'var(--orange-1)',
+    },
   },
 };