refac: styling

tailwind.config.js

@@ -9,14 +9,14 @@ export default {
 		extend: {
 			colors: {
 				gray: {
-					50: '#f9f9f9',
-					100: '#ececec',
-					200: '#e3e3e3',
-					300: '#cdcdcd',
-					400: '#b4b4b4',
-					500: '#9b9b9b',
-					600: '#676767',
-					700: '#4e4e4e',
+					50: 'var(--color-gray-50, #f9f9f9)',
+					100: 'var(--color-gray-100, #ececec)',
+					200: 'var(--color-gray-200, #e3e3e3)',
+					300: 'var(--color-gray-300, #cdcdcd)',
+					400: 'var(--color-gray-400, #b4b4b4)',
+					500: 'var(--color-gray-500, #9b9b9b)',
+					600: 'var(--color-gray-600, #676767)',
+					700: 'var(--color-gray-700, #4e4e4e)',
 					800: 'var(--color-gray-800, #333)',
 					850: 'var(--color-gray-850, #262626)',
 					900: 'var(--color-gray-900, #171717)',