Merge e47fe1a into c860b70

primer · May 3, 2024 · 28e7bee · 28e7bee
2 parents c860b70 + e47fe1a
commit 28e7bee
Show file tree

Hide file tree

Showing 21 changed files with 20 additions and 7 deletions.
diff --git a/.changeset/thin-ligers-turn.md b/.changeset/thin-ligers-turn.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+BranchName: Fixing text color when rendered as span
diff --git a/...BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png b/...BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png
diff --git a/...nents/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-linux.png b/...nents/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-linux.png
diff --git a/...nts/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png b/...nts/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png
diff --git a/...omponents/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-linux.png b/...omponents/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-linux.png
diff --git a/...components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png b/...components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png
diff --git a/...nchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png b/...nchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png
diff --git a/...ts/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-linux.png b/...ts/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-linux.png
diff --git a/...shots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-linux.png b/...shots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-linux.png
diff --git a/...BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png b/...BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png
diff --git a/...nents/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-linux.png b/...nents/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-linux.png
diff --git a/...ranchName.test.ts-snapshots/BranchName-Default-light-colorblind-focus-linux.png b/...ranchName.test.ts-snapshots/BranchName-Default-light-colorblind-focus-linux.png
diff --git a/...ents/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-linux.png b/...ents/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-linux.png
diff --git a/...omponents/BranchName.test.ts-snapshots/BranchName-Default-light-focus-linux.png b/...omponents/BranchName.test.ts-snapshots/BranchName-Default-light-focus-linux.png
diff --git a/...chName.test.ts-snapshots/BranchName-Default-light-high-contrast-focus-linux.png b/...chName.test.ts-snapshots/BranchName-Default-light-high-contrast-focus-linux.png
diff --git a/...s/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-linux.png b/...s/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-linux.png
diff --git a/...hots/components/BranchName.test.ts-snapshots/BranchName-Default-light-linux.png b/...hots/components/BranchName.test.ts-snapshots/BranchName-Default-light-linux.png
diff --git a/...ranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-focus-linux.png b/...ranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-focus-linux.png
diff --git a/...ents/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-linux.png b/...ents/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-linux.png
diff --git a/packages/react/src/BranchName/BranchName.stories.tsx b/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>
+)
diff --git a/packages/react/src/BranchName/BranchName.tsx b/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(span) {
+    color: var(--fgColor-muted);
+  }
   ${sx};
 `