Fix: Bug with Tailwind gray color extension (#347)

hyperlane-xyz · Dec 6, 2024 · 39cbd47 · 39cbd47
1 parent b2c1d08
commit 39cbd47
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',