Merge branch 'main' into stamat/remove-icon-lazyloading-from-eyebrow-banner

Author: stamat

.changeset/gentle-wolves-vanish.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Adds hover states to the social icon links in MinimalFooter

packages/design-tokens/src/tokens/functional/components/footer/colors.json

@@ -6,6 +6,12 @@
           "value": "var(--base-color-scale-white)",
           "dark": "var(--base-color-scale-gray-9)"
         }
+      },
+      "socialIcon": {
+        "hoverFilter": {
+          "value": "brightness(0)",
+          "dark": "brightness(2)"
+        }
       }
     }
   }

packages/react/src/MinimalFooter/MinimalFooter.module.css

@@ -59,6 +59,11 @@
   padding-bottom: var(--base-size-48);
 }
 
+.Footer__social-link:hover .Footer__social-icon,
+.Footer__social-link:focus-visible .Footer__social-icon {
+  filter: var(--brand-footer-socialIcon-hoverFilter);
+}
+
 .Footer__social-icon {
   width: 24px;
   height: auto;

packages/react/src/MinimalFooter/MinimalFooter.module.css.d.ts

@@ -6,6 +6,7 @@ declare const styles: {
   readonly "Footer__social-links": string;
   readonly "Footer__logomarks": string;
   readonly "Footer__legal-and-links": string;
+  readonly "Footer__social-link": string;
   readonly "Footer__social-icon": string;
   readonly "Footer__copyright": string;
   readonly "Footer__links": string;

packages/react/src/MinimalFooter/MinimalFooter.tsx

@@ -229,6 +229,7 @@ function SocialLogomarks({socialLinks, logoHref}: SocialLogomarksProps) {
       <li key={link.name}>
         <a
           href={link.url}
+          className={styles['Footer__social-link']}
           data-analytics-event={`{"category":"Footer","action":"go to ${link.fullName}","label":"text:${link.name}"}`}
         >
           <img