Update River and SectionIntro default link colors to blue (#811)

.changeset/tough-lobsters-sleep.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': minor
+---
+
+`River` and `SectionIntro` link colors now default to blue (accent) for consistency with `Card`, `Pillar` and similar components that feature blue links.
+
+:warning: This is a visual breaking change. Please manually review all usages of `River` and `SectionIntro` to ensure there is sufficient contrast with the background color.

packages/react/src/Bento/Bento.stories.tsx

@@ -30,9 +30,7 @@ export const Default = () => (
           Push what's possible with GitHub Copilot, the world's most trusted and widely adopted AI developer
           tool.
         </Bento.Heading>
-        <Link href="#" variant="default">
-          Learn more about Copilot
-        </Link>
+        <Link href="#">Learn more about Copilot</Link>
       </Bento.Content>
     </Bento.Item>
   </Bento>

packages/react/src/SectionIntro/SectionIntro.tsx

@@ -109,13 +109,21 @@ function _Label({children, ...rest}: PropsWithChildren<SectionIntroLabelProps>)
 
 type SectionIntroLinkProps = Omit<LinkProps, 'size'> & BaseProps<HTMLAnchorElement>
 
-const _Link = forwardRef(({className, children, ...props}: SectionIntroLinkProps, ref: Ref<HTMLAnchorElement>) => {
-  return (
-    <Link ref={ref} className={clsx(styles['SectionIntro-link'], className)} size="medium" {...props}>
-      {children}
-    </Link>
-  )
-})
+const _Link = forwardRef(
+  ({className, children, variant = 'accent', ...props}: SectionIntroLinkProps, ref: Ref<HTMLAnchorElement>) => {
+    return (
+      <Link
+        ref={ref}
+        className={clsx(styles['SectionIntro-link'], className)}
+        size="medium"
+        variant={variant}
+        {...props}
+      >
+        {children}
+      </Link>
+    )
+  },
+)
 
 export const SectionIntro = Object.assign(Root, {
   Heading: _Heading,

packages/react/src/river/River/River.tsx

@@ -185,7 +185,10 @@ export const RiverContent = forwardRef(
         )}
         {React.isValidElement(LinkChild) && (
           <div className={styles['River__call-to-action']}>
-            {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {size: 'medium'})}
+            {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {
+              size: 'medium',
+              variant: LinkChild.props.variant || 'accent',
+            })}
           </div>
         )}
         {TrailingComponent && (