BranchName: Add style for span and add v8 tokens (#4556)

* add style for branchName as span adn add v8 tokens

* added changeset

* Update thin-ligers-turn.md

* test(vrt): update snapshots

* use not a instead of matching for span

---------

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: lukasoppermann <lukasoppermann@users.noreply.github.com>

.changeset/thin-ligers-turn.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+BranchName: Fixing text color when rendered as span

packages/react/src/BranchName/BranchName.stories.tsx

@@ -1,10 +1,16 @@
 import React from 'react'
 import type {Meta} from '@storybook/react'
 import BranchName from './BranchName'
+import {Stack} from '../Stack'
 
 export default {
   title: 'Components/BranchName',
   component: BranchName,
 } as Meta<typeof BranchName>
 
-export const Default = () => <BranchName href="#">branch_name</BranchName>
+export const Default = () => (
+  <Stack align="start">
+    <BranchName href="#">branch_name</BranchName>
+    <BranchName as="span">branch_name as span</BranchName>
+  </Stack>
+)

packages/react/src/BranchName/BranchName.tsx

@@ -7,13 +7,15 @@ import type {ComponentProps} from '../utils/types'
 const BranchName = styled.a<SxProp>`
   display: inline-block;
   padding: 2px 6px;
-  font-size: ${get('fontSizes.0')};
-  font-family: ${get('fonts.mono')};
-  color: ${get('colors.accent.fg')};
-  background-color: ${get('colors.accent.subtle')};
-  border-radius: ${get('radii.2')};
+  font-size: var(--text-body-size-small, ${get('fontSizes.0')});
+  font-family: var(--fontStack-monospace, ${get('fonts.mono')});
+  color: var(--fgColor-link, ${get('colors.accent.fg')});
+  background-color: var(--bgColor-accent-muted, ${get('colors.accent.subtle')});
+  border-radius: var(--borderRadius-medium, ${get('radii.2')});
   text-decoration: none;
-
+  &:is(:not(a)) {
+    color: var(--fgColor-muted);
+  }
   ${sx};
 `