feat: tailiwnd configs for colors

Author: Guru

demo/redirect-flow-example/tailwind.config.ts

@@ -54,6 +54,18 @@ export default {
           100: "var(--app-blue-100)",
           50: "var(--app-blue-50)",
         },
+        red: {
+          900: "var(--app-red-900)",
+          800: "var(--app-red-800)",
+          700: "var(--app-red-700)",
+          600: "var(--app-red-600)",
+          500: "var(--app-red-500)",
+          400: "var(--app-red-400)",
+          300: "var(--app-red-300)",
+          200: "var(--app-red-200)",
+          100: "var(--app-red-100)",
+          50: "var(--app-red-50)",
+        },
         light: {
           "surface-main": "var(--app-gray-100)",
           surface1: "var(--app-white)",
@@ -169,6 +181,18 @@ export default {
               100: "#e1effe",
               50: "#ebf5ff",
             },
+            red: {
+              900: "#7f1d1d",
+              800: "#991b1b",
+              700: "#b91c1c",
+              600: "#dc2626",
+              500: "#ef4444",
+              400: "#f87171",
+              300: "#fca5a5",
+              200: "#fecaca",
+              100: "#fee2e2",
+              50: "#fef2f2",
+            },
             success: "#30cca4",
             warning: "#fbc94a",
             error: "#fb4a61",
@@ -188,4 +212,4 @@ export default {
     containerQueries,
   ],
   darkMode: "class",
-} as Config;
+} as Config;