Colors

colors.js

@@ -0,0 +1,75 @@
+export const colors = {
+  transparent: "transparent",
+  current: "currentColor",
+
+  // primary
+  coral: {
+    light: '#F17A5D',
+    DEFAULT: '#F17A5D',
+  },
+  caramel: {
+    light: '#EAD6CE',
+    DEFAULT: '#EAD6CE',
+  },
+  cream: {
+    light: '#FCE8DE',
+    DEFAULT: '#FCE8DE',
+  },
+
+  // accent
+  yellow: {
+    light: '#F8B03D',
+    DEFAULT: '#F8B03D',
+  },
+  green: {
+    light: '#34B4A1',
+    DEFAULT: '#34B4A1',
+  },
+  purple: {
+    light: '#9473B0',
+    DEFAULT: '#9473B0',
+  },
+  pink: {
+    light: '#DD9BC7',
+    DEFAULT: '#DD9BC7',
+  },
+  blue: {
+    light: '#79CDE0',
+    DEFAULT: '#79CDE0',
+  },
+  fake: "#C51D34",
+  // status
+  red: {
+    light: '#D75353',
+    DEFAULT: '#D75353',
+  },
+  error: {
+    light: '#D75353',
+    DEFAULT: '#D75353',
+  },
+  success: {
+    light: '#33BC8B',
+    DEFAULT: '#33BC8B',
+  },
+  warning: {
+    light: '#F8B03D',
+    DEFAULT: '#F8B03D',
+  },
+  neutral: {
+    light: '#538AD4',
+    DEFAULT: '#538AD4',
+  },
+
+  // grey scale
+  black: '#0E1116',
+  white: '#FAF5F3',
+  grey: {
+    900: '#1A1C21',
+    700: '#494A4D',
+    500: '#848384',
+    250: '#BFBCBC',
+    100: '#E2DEDD',
+    50: '#EEEAE8',
+  },
+  milk: '#FAF5F3',
+}

src/index.ts

@@ -66,3 +66,4 @@ export { HeroIllustration } from "./hero-illustration";
 
 // tailwind config
 export { default as tailwindConfig } from "../tailwind.config";
+export { colors } from '../colors'

tailwind.config.js

@@ -1,3 +1,5 @@
+const { colors } = require('./colors');
+
 module.exports= {
   content: ["./src/**/*.{js,jsx,ts,tsx,vue}"],
   theme: {
@@ -53,81 +55,7 @@ module.exports= {
       '4xl': '7.5rem', // 120px
       '4xl-fluid': 'clamp(2.9rem, 12vw, 7.5rem)', // 120px
     },
-    colors: {
-      transparent: "transparent",
-      current: "currentColor",
-
-      // primary
-      coral: {
-        light: '#F17A5D',
-        DEFAULT: '#F17A5D',
-      },
-      caramel: {
-        light: '#EAD6CE',
-        DEFAULT: '#EAD6CE',
-      },
-      cream: {
-        light: '#FCE8DE',
-        DEFAULT: '#FCE8DE',
-      },
-
-      // accent
-      yellow: {
-        light: '#F8B03D',
-        DEFAULT: '#F8B03D',
-      },
-      green: {
-        light: '#34B4A1',
-        DEFAULT: '#34B4A1',
-      },
-      purple: {
-        light: '#9473B0',
-        DEFAULT: '#9473B0',
-      },
-      pink: {
-        light: '#DD9BC7',
-        DEFAULT: '#DD9BC7',
-      },
-      blue: {
-        light: '#79CDE0',
-        DEFAULT: '#79CDE0',
-      },
-      fake: "#C51D34",
-      // status
-      red: {
-        light: '#D75353',
-        DEFAULT: '#D75353',
-      },
-      error: {
-        light: '#D75353',
-        DEFAULT: '#D75353',
-      },
-      success: {
-        light: '#33BC8B',
-        DEFAULT: '#33BC8B',
-      },
-      warning: {
-        light: '#F8B03D',
-        DEFAULT: '#F8B03D',
-      },
-      neutral: {
-        light: '#538AD4',
-        DEFAULT: '#538AD4',
-      },
-
-      // grey scale
-      black: '#0E1116',
-      white: '#FAF5F3',
-      grey: {
-        900: '#1A1C21',
-        700: '#494A4D',
-        500: '#848384',
-        250: '#BFBCBC',
-        100: '#E2DEDD',
-        50: '#EEEAE8',
-      },
-      milk: '#FAF5F3',
-    },
+    colors,
     extend: {
       animation: {
         "marquee-slow": "marquee 60s linear infinite",