Set theme colors in Tailwind config

tailwind.config.js

@@ -1,3 +1,5 @@
+const colors = require('tailwindcss/colors')
+
 module.exports = {
   content: [
       './assets/**/*.{js,vue}',
@@ -5,62 +7,41 @@ module.exports = {
       './src/CoreBudnle/Resources/views/**/*.html.twig',
   ],
   theme: {
+    colors: {
+      'primary': '#2e75a3',
+      'secondary': '#fd6600',
+      'gray': {
+        5: '#fcfcfc',
+        10: '#fafafa',
+        15: '#f7f8f9',
+        20: '#edf0f2',
+        25: '#e4e9ed',
+        30: 'rgba(0, 0, 0, 0.12)',
+        50: '#a2a6b0',
+        90: '#333333',
+      },
+      'support': {
+        1: 'rgba(46, 117, 163, 0.08)',
+        2: '#f5f8fa',
+        3: 'rgba(46, 117, 163, 0.5)',
+        4: '#244d67',
+        5: '#e06410',
+        6: '#faf7f5',
+      },
+      'warning': '#f5ce01',
+      'success': '#77aa0c',
+      'error': '#df3b3b',
+      'info': '#0d7bfd',
+
+      'white': colors.white,
+      'black': colors.black,
+      'transparent': colors.transparent,
+      'current': colors.current,
+    },
     extend: {
       fontFamily: {
         sans: ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
       },
-      colors: {
-        'ch-primary': {
-          DEFAULT: '#84bd00', //default to '#2e75a3'
-          'dark': '#649d00', //default to '#1c6391',
-          'light': '#84bd00', //default '#9cc2da'
-        },
-        'ch-secondary': {
-          DEFAULT: '#772583', //default to '#fd6600',
-          'dark': '#570563', //default to '#ea5300',
-          'light': '#772583', //default to '#ff7913',
-        },
-        'ch-ternary': {
-          DEFAULT: '#162A83',
-          'dark': '#031770',
-          'light': '#293A96',
-        },
-        'ch-text': {
-          DEFAULT: '#333',
-          'primary': '#fff',
-          'secondary': '#fff',
-          'warning': '#333',
-          'success': '#fff',
-          'error': '#fff',
-          'info': '#fff',
-        },
-        'ch-support-1': 'rgba(46, 117, 163, 0.08)',
-        'ch-support-2': '#f5f8fa',
-        'ch-support-3': 'rgba(46, 117, 163, 0.5)',
-        'ch-support-4': '#244d67',
-        'ch-support-5': '#e06410',
-        'ch-support-6': '#faf7f5',
-        'ch-warning': {
-          DEFAULT: '#eddf0e',
-          'dark': '#dacc0a',
-          'light': '#ffef1f',
-        },
-        'ch-success': {
-          DEFAULT: '#a4dc2d',
-          'dark': '#91c91a',
-          'light': '#b7ef3f',
-        },
-        'ch-error': {
-          DEFAULT: '#ef3e3e',
-          'dark': '#dc2b2b',
-          'light': '#ff4f4f',
-        },
-        'ch-info': {
-          DEFAULT: '#3e9aef',
-          'dark': '#2b87dc',
-          'light': '#4fadff',
-        }
-      }
     },
   },
   plugins: [