Merge pull request #13886 from ethereum/fix-hubhero

Fix bg color in `HubHero` component

Author: wackerow

src/components/Hero/HubHero/index.tsx

@@ -37,7 +37,7 @@ const HubHero = ({
           "gap-4 p-4 lg:p-8",
           "text-center xl:text-start",
           "xl:rounded",
-          "xl:bg-hub-hero-content-bg",
+          "xl:bg-hub-hero-content",
           "xl:absolute xl:top-1/2 xl:max-w-sm",
           "xl:-translate-y-1/2 xl:transform",
           "xl:backdrop-blur xl:backdrop-filter",

src/styles/global.css

@@ -22,7 +22,7 @@
     /* Misc sematics: light mode */
     --tooltip-shadow: rgba(0, 0, 0, 0.24);
     --switch-background: var(--gray-300);
-    --hub-hero-content-bg: rgba(255, 255, 255, 0.8);
+    --hub-hero-content: rgba(255, 255, 255, 0.8);
     --gradient-main: linear-gradient(
       102.7deg,
       rgba(185, 185, 241, 0.2) 0%,
@@ -61,7 +61,7 @@
     /* Misc sematics: dark mode */
     --tooltip-shadow: rgba(255, 255, 255, 0.24);
     --switch-background: rgba(255, 255, 255, 0.24);
-    --hub-hero-content-bg: rgba(34, 34, 34, 0.8);
+    --hub-hero-content: rgba(34, 34, 34, 0.8);
     --gradient-main: linear-gradient(
       102.7deg,
       rgba(185, 185, 241, 0.2) 0%,

tailwind.config.ts

@@ -217,13 +217,13 @@ const config = {
             "active-background": "hsla(var(--menu-4-active-background))",
           },
         },
-      },
 
-      /** @deprecated */
-      "switch-background": "hsla(var(--switch-background))", // TODO: Migrate
-      "tooltip-shadow": "var(--tooltip-shadow)",
-      "hub-hero-content-bg": "var(--hub-hero-content-bg)",
-      "search-background": "var(--search-background)",
+        /** @deprecated */
+        "switch-background": "hsla(var(--switch-background))", // TODO: Migrate
+        "tooltip-shadow": "var(--tooltip-shadow)",
+        "hub-hero-content": "var(--hub-hero-content)",
+        "search-background": "var(--search-background)",
+      },
 
       backgroundImage: {
         "gradient-main": "var(--gradient-main)",