From 9233a14ec4bfc6eeb3691c6e29349dc1af19c2bb Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 11 Dec 2024 17:32:56 +0000
Subject: [PATCH 1/2] Add `onPrimary` variant to `KeybindingHint`

---
 .../KeybindingHint.examples.stories.tsx              | 11 ++++++++++-
 .../KeybindingHint.features.stories.tsx              | 11 ++++++++++-
 .../react/src/KeybindingHint/components/Chord.tsx    | 12 +++++++++---
 packages/react/src/KeybindingHint/props.ts           |  4 ++--
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.tsx b/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.tsx
index f0f80c6a6a9..a0d95d538b8 100644
--- a/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.tsx
+++ b/packages/react/src/KeybindingHint/KeybindingHint.examples.stories.tsx
@@ -20,7 +20,16 @@ export const PrimaryButton: StoryObj<KeybindingHintProps> = {
       Submit
     </Button>
   ),
-  args: {keys: 'Mod+Enter', variant: 'onEmphasis'},
+  args: {keys: 'Mod+Enter', variant: 'onPrimary'},
+}
+
+export const DangerButton: StoryObj<KeybindingHintProps> = {
+  render: args => (
+    <Button variant="danger" trailingVisual={() => <KeybindingHint {...args} />}>
+      Delete
+    </Button>
+  ),
+  args: {keys: 'Mod+Delete', variant: 'normal'},
 }
 
 export const ActionListExample: StoryObj<KeybindingHintProps> = {
diff --git a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx
index a9a20a0ca21..30809f5ebb6 100644
--- a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx
+++ b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx
@@ -22,11 +22,20 @@ export const SequenceFull = {args: {keys: sequence, format: 'full'}}
 
 export const OnEmphasis: StoryObj<KeybindingHintProps> = {
   render: args => (
-    <Box sx={{backgroundColor: 'accent.fg', p: 3}}>
+    <Box sx={{backgroundColor: 'var(--bgColor-black)', p: 3}}>
       <KeybindingHint {...args} />
     </Box>
   ),
   args: {keys: chord, variant: 'onEmphasis'},
 }
 
+export const OnPrimary: StoryObj<KeybindingHintProps> = {
+  render: args => (
+    <Box sx={{backgroundColor: 'var(--button-primary-bgColor-rest)', p: 3}}>
+      <KeybindingHint {...args} />
+    </Box>
+  ),
+  args: {keys: chord, variant: 'onPrimary'},
+}
+
 export const Small = {args: {keys: chord, size: 'small'}}
diff --git a/packages/react/src/KeybindingHint/components/Chord.tsx b/packages/react/src/KeybindingHint/components/Chord.tsx
index 280769db16d..7713517eab8 100644
--- a/packages/react/src/KeybindingHint/components/Chord.tsx
+++ b/packages/react/src/KeybindingHint/components/Chord.tsx
@@ -29,14 +29,20 @@ const splitChord = (chord: string) =>
     .map(k => k.toLowerCase())
     .sort(compareLowercaseKeys)
 
+const backgroundColors = {
+  normal: 'var(--bgColor-transparent)',
+  onEmphasis: 'var(--counter-bgColor-emphasis)',
+  onPrimary: 'var(--button-primary-bgColor-active)',
+}
+
 export const Chord = ({keys, format = 'condensed', variant = 'normal', size = 'normal'}: KeybindingHintProps) => (
   <Text
     sx={{
       display: 'inline-flex',
-      bg: variant === 'onEmphasis' ? 'var(--counter-bgColor-emphasis)' : 'var(--bgColor-transparent)',
-      color: variant === 'onEmphasis' ? 'var(--fgColor-onEmphasis)' : 'var(--fgColor-muted)',
+      bg: backgroundColors[variant],
+      color: variant === 'normal' ? 'var(--fgColor-muted)' : 'var(--fgColor-onEmphasis)',
       border: '1px solid',
-      borderColor: variant === 'onEmphasis' ? 'transparent' : 'var(--borderColor-default)',
+      borderColor: variant === 'normal' ? 'var(--borderColor-default)' : 'transparent',
       borderRadius: size === 'small' ? 1 : 2,
       fontWeight: 'normal',
       fontFamily: 'normal',
diff --git a/packages/react/src/KeybindingHint/props.ts b/packages/react/src/KeybindingHint/props.ts
index bc384fafd08..7df8f7ebd21 100644
--- a/packages/react/src/KeybindingHint/props.ts
+++ b/packages/react/src/KeybindingHint/props.ts
@@ -1,6 +1,6 @@
 export type KeybindingHintFormat = 'condensed' | 'full'
 
-export type KeybindingHintVariant = 'normal' | 'onEmphasis'
+export type KeybindingHintVariant = 'normal' | 'onEmphasis' | 'onPrimary'
 
 export interface KeybindingHintProps {
   /**
@@ -24,7 +24,7 @@ export interface KeybindingHintProps {
    */
   format?: KeybindingHintFormat
   /**
-   * Set to `onEmphasis` for display on emphasis colors.
+   * Set to `onEmphasis` for display on emphasis colors, and `onPrimary` for display on primary buttons.
    */
   variant?: KeybindingHintVariant
   /**

From 2ab4c4db9d388ca75849dc72baf35774a573d3e3 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 11 Dec 2024 12:37:12 -0500
Subject: [PATCH 2/2] Create flat-sheep-look.md

---
 .changeset/flat-sheep-look.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/flat-sheep-look.md

diff --git a/.changeset/flat-sheep-look.md b/.changeset/flat-sheep-look.md
new file mode 100644
index 00000000000..da9fc660038
--- /dev/null
+++ b/.changeset/flat-sheep-look.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `onPrimary` `variant` to `KeybindingHint`