add coporate theme color variables

pkgs/ui/tailwind.config.js

@@ -1,4 +1,26 @@
 /** @type {import('tailwindcss').Config} */
+import colors from "@clan/colors/colors.json";
+
+const {
+  ref: { palette, common },
+} = colors;
+
+/**
+ * @param {typeof palette} palette
+ * @param {string} baseName
+ * @returns {import("tailwindcss/types/config").ThemeConfig['colors']}
+ */
+const getTailwindColors = (palette) => (baseName) =>
+  Object.entries(palette).reduce((acc, [_, v]) => {
+    if (v.meta.color.baseName === baseName) {
+      return {
+        ...acc,
+        [Math.round(v.meta.color.shade)]: v.value,
+      };
+    }
+    return acc;
+  }, {});
+
 module.exports = {
   corePlugins: {
     preflight: false,
@@ -10,7 +32,30 @@ module.exports = {
   ],
   important: "#__next",
   theme: {
-    extend: {},
+    colors: {
+      white: common.white.value,
+      black: common.black.value,
+      neutral: getTailwindColors(palette)("neutral"),
+      purple: {
+        ...getTailwindColors(palette)("purple"),
+        DEFAULT: palette.purple50.value,
+      },
+      red: {
+        ...getTailwindColors(palette)("red"),
+        DEFAULT: palette.red50.value,
+      },
+      primary: { DEFAULT: palette.green50.value },
+      secondary: { DEFAULT: palette.purple50.value },
+      paper: {
+        dark: palette.neutral5.value,
+        light: palette.neutral98.value,
+      },
+    },
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+      },
+    },
   },
   plugins: [],
 };