From 39cbd476f520298c1b6ac4d780553d8a5a1981fa Mon Sep 17 00:00:00 2001
From: J M Rossy <jm.rossy@gmail.com>
Date: Fri, 6 Dec 2024 17:23:30 -0500
Subject: [PATCH] Fix: Bug with Tailwind gray color extension (#347)

---
 src/consts/app.ts                                | 4 ++--
 src/features/transfer/TransfersDetailsModal.tsx  | 2 +-
 src/features/wallet/WalletFloatingButtons.tsx    | 4 ++--
 src/features/wallet/context/EvmWalletContext.tsx | 2 +-
 src/styles/Color.ts                              | 9 ++++-----
 tailwind.config.js                               | 3 ++-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/consts/app.ts b/src/consts/app.ts
index 2f235bdc..2dc51e86 100644
--- a/src/consts/app.ts
+++ b/src/consts/app.ts
@@ -10,6 +10,6 @@ export const MAIN_FONT = SpaceGrotesk({
 export const APP_NAME = 'Hyperlane Warp UI Template';
 export const APP_DESCRIPTION = 'A DApp for Hyperlane Warp Route transfers';
 export const APP_URL = 'hyperlane-warp-template.vercel.app';
-export const BRAND_COLOR = Color.primary;
-export const BACKGROUND_COLOR = Color.primary;
+export const BRAND_COLOR = Color.primary['500'];
+export const BACKGROUND_COLOR = Color.primary['500'];
 export const BACKGROUND_IMAGE = 'url(/backgrounds/main.svg)';
diff --git a/src/features/transfer/TransfersDetailsModal.tsx b/src/features/transfer/TransfersDetailsModal.tsx
index e0b0bad8..aa859430 100644
--- a/src/features/transfer/TransfersDetailsModal.tsx
+++ b/src/features/transfer/TransfersDetailsModal.tsx
@@ -263,7 +263,7 @@ function WideChevron() {
       width="16"
       height="100%"
       direction="e"
-      color={Color.lightGray}
+      color={Color.gray['300']}
       rounded={true}
     />
   );
diff --git a/src/features/wallet/WalletFloatingButtons.tsx b/src/features/wallet/WalletFloatingButtons.tsx
index c0ab5b24..e93093e9 100644
--- a/src/features/wallet/WalletFloatingButtons.tsx
+++ b/src/features/wallet/WalletFloatingButtons.tsx
@@ -18,14 +18,14 @@ export function WalletFloatingButtons() {
         title="History"
         onClick={() => setIsSideBarOpen(!isSideBarOpen)}
       >
-        <HistoryIcon color={Color.primary} height={20} width={20} />
+        <HistoryIcon color={Color.primary['500']} height={20} width={20} />
       </IconButton>
       <Link
         href={links.warpDocs}
         target="_blank"
         className={`p-0.5 ${styles.roundedCircle} ${styles.link}`}
       >
-        <DocsIcon color={Color.primary} height={19} width={19} className="p-px" />
+        <DocsIcon color={Color.primary['500']} height={19} width={19} className="p-px" />
       </Link>
     </div>
   );
diff --git a/src/features/wallet/context/EvmWalletContext.tsx b/src/features/wallet/context/EvmWalletContext.tsx
index d8f802da..830948f6 100644
--- a/src/features/wallet/context/EvmWalletContext.tsx
+++ b/src/features/wallet/context/EvmWalletContext.tsx
@@ -68,7 +68,7 @@ export function EvmWalletContext({ children }: PropsWithChildren<unknown>) {
     <WagmiProvider config={wagmiConfig}>
       <RainbowKitProvider
         theme={lightTheme({
-          accentColor: Color.primary,
+          accentColor: Color.primary['500'],
           borderRadius: 'small',
           fontStack: 'system',
         })}
diff --git a/src/styles/Color.ts b/src/styles/Color.ts
index d53b8e45..b59ee171 100644
--- a/src/styles/Color.ts
+++ b/src/styles/Color.ts
@@ -6,9 +6,8 @@ const themeColors = theme.extend.colors as unknown as Record<string, string>;
 export const Color = {
   black: themeColors.black,
   white: themeColors.white,
-  gray: themeColors.gray[500],
-  lightGray: themeColors.gray[200],
-  primary: themeColors.primary[500],
-  accent: themeColors.accent[500],
-  red: themeColors.red[500],
+  gray: themeColors.gray,
+  primary: themeColors.primary,
+  accent: themeColors.accent,
+  red: themeColors.red,
 } as const;
diff --git a/tailwind.config.js b/tailwind.config.js
index 66adf091..17ea7efc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 const defaultTheme = require('tailwindcss/defaultTheme');
+const defaultColors = require('tailwindcss/colors');
 
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
@@ -19,7 +20,7 @@ module.exports = {
       colors: {
         black: '#010101',
         white: '#ffffff',
-        gray: { ...defaultTheme.colors.gray, 150: '#EBEDF0', 250: '#404040', 350: '#6B6B6B' },
+        gray: { ...defaultColors.gray, '150': '#EBEDF0', '250': '#404040', '350': '#6B6B6B' },
         primary: {
           50: '#E6EDF9',
           100: '#CDDCF4',