Issue #60: Make the orgs for the various Block brands hover with their associated colors

Author: ALRubinger

src/components/block/BrandWall.astro

@@ -12,10 +12,15 @@ const {
   brands,
  } = Astro.props;
 
+const defaultBgHoverClasses = "hover:bg-gray-100 dark:hover:bg-gray-800";
+const defaultForegroundHoverClasses = "group-hover:text-black group-hover:dark:text-white";
+
 export interface Brand {
   name: string;
   href: string;
   iconName: string;
+  bgHoverClass?: string;
+  foregroundHoverClass?: string;
 }
 
 ---
@@ -24,21 +29,21 @@ export interface Brand {
   <p>
     <slot />
   </p>
-  <div id="projects" class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 gap-4 sm:gap-6 md:gap-8 py-6 md:py-8">
+  <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 gap-4 sm:gap-6 md:gap-8 py-6 md:py-8">
     {brands.map((brand) => (
       <a 
         href={brand.href} 
         target="_blank" 
         rel="noopener noreferrer"
-        class="group flex flex-col items-center text-center p-3 sm:p-4 md:p-6 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 no-underline"
+        class={`group flex flex-col items-center text-center p-3 sm:p-4 md:p-6 rounded-lg transition-colors duration-200 no-underline ${brand.bgHoverClass ? ('hover:' + brand.bgHoverClass) : defaultBgHoverClasses}`}
       >
         <div class="mb-2 sm:mb-3 md:mb-4 w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 lg:w-18 lg:h-18 xl:w-20 xl:h-20 flex items-center justify-center">
           <Icon 
             name={brand.iconName} 
-            class="w-full h-full text-black dark:text-white transition-transform duration-200 group-hover:scale-110"
+            class={`w-full h-full transition-transform duration-200 group-hover:scale-110 ${brand.foregroundHoverClass ? ('group-hover:' + brand.foregroundHoverClass) : defaultForegroundHoverClasses}`}
           />
         </div>
-        <span class="text-sm sm:text-base md:text-lg font-medium leading-tight">
+        <span class={`text-sm sm:text-base md:text-lg font-medium leading-tight ${brand.foregroundHoverClass ? ('group-hover:' + brand.foregroundHoverClass) : defaultForegroundHoverClasses}`}>
           {brand.name}
         </span>
       </a>

src/components/blockopensource/github-orgs.ts

@@ -5,50 +5,66 @@ export const githubOrganizations: Brand[] = [
     name: "Block",
     href: "https://github.com/block",
     iconName: "block-open-source/block",
+    bgHoverClass: "bg-square",
+    foregroundHoverClass: "text-white",
   },
   {
     name: "Square",
     href: "https://github.com/square",
     iconName: "block-open-source/square",
+    bgHoverClass: "bg-square",
+    foregroundHoverClass: "text-white",
   },
   {
     name: "Square Developers",
     href: "https://github.com/Square-Developers",
     iconName: "block-open-source/square",
+    bgHoverClass: "bg-square",
+    foregroundHoverClass: "text-white",
   },
   {
     name: "Cash App",
     href: "https://github.com/cashapp",
     iconName: "block-open-source/cashapp",
+    bgHoverClass: "bg-cashapp",
+    foregroundHoverClass: "text-white",
   },
   {
     name: "Weebly",
     href: "https://github.com/weebly",
     iconName: "block-open-source/weebly",
+    bgHoverClass: "bg-weebly",
+    foregroundHoverClass: "text-white",
   },
   {
     name: "Afterpay",
     href: "https://github.com/afterpay",
     iconName: "block-open-source/afterpay",
+    bgHoverClass: "bg-afterpay",
   },
   {
     name: "TIDAL",
     href: "https://github.com/tidal-music",
     iconName: "block-open-source/tidal",
+    bgHoverClass: "bg-tidal",
   },
   {
     name: "Proto",
     href: "https://github.com/proto-at-block",
     iconName: "block-open-source/proto",
+    bgHoverClass: "bg-proto",
   },
   {
     name: "c equals",
     href: "https://github.com/cequals",
     iconName: "block-open-source/c-equals",
+    bgHoverClass: "bg-proto",
   },
   {
     name: "Spiral",
     href: "https://spiral.xyz/",
     iconName: "block-open-source/spiral",
+    bgHoverClass: "bg-spiral",
+    foregroundHoverClass: "text-white",
   },
 ];

src/styles/global.css

@@ -32,6 +32,16 @@
   --color-card: hsl(var(--card));
   --color-card-foreground: hsl(var(--card-foreground));
 
+  /* Block brand colors */
+  --color-afterpay: #b2fce4;
+  --color-tidal: #0ec7c7;
+  --color-proto: #ff5b00;
+  --color-cashapp: #01c846;
+  --color-square: #006aff;
+  --color-block: #000000;
+  --color-spiral: #ff00ff;
+  --color-weebly: #4285f4;
+
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
@@ -512,4 +522,48 @@
 .animate-on-scroll.visible {
     opacity: 1;
     transform: translateY(0);
+}
+
+/* Ensure Tailwind generates hover variants for custom brand colors */
+@layer utilities {
+  .hover\:bg-afterpay:hover {
+    background-color: var(--color-afterpay);
+  }
+  
+  .hover\:bg-tidal:hover {
+    background-color: var(--color-tidal);
+  }
+  
+  .hover\:bg-proto:hover {
+    background-color: var(--color-proto);
+  }
+  
+  .hover\:bg-cashapp:hover {
+    background-color: var(--color-cashapp);
+  }
+  
+  .hover\:bg-square:hover {
+    background-color: var(--color-square);
+  }
+  
+  .hover\:bg-block:hover {
+    background-color: var(--color-block);
+  }
+  
+  .hover\:bg-spiral:hover {
+    background-color: var(--color-spiral);
+  }
+  
+  .hover\:bg-weebly:hover {
+    background-color: var(--color-weebly);
+  }
+
+  /* Ensure group-hover text color variants are generated */
+  .group:hover .group-hover\:text-white {
+    color: white;
+  }
+  
+  .group:hover .group-hover\:text-black {
+    color: black;
+  }
 }

tailwind.config.js

@@ -56,6 +56,14 @@ module.exports = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        // Block brand colors
+        afterpay: "#b2fce4",
+        tidal: "#0ec7c7",
+        proto: "#ff5b00",
+        cashapp: "#01c846",
+        square: "#006aff",
+        block: "#000000",
+        spiral: "#ff00ff",
       },
       borderRadius: {
         lg: "var(--radius)",