feat(core): add neutral variant to InlineCode

static/app/components/core/code/inlineCode.mdx

@@ -11,9 +11,9 @@ resources:
     WCAG 1.4.4: https://www.w3.org/TR/WCAG22/#resize-text
 ---
 
-import {InlineCode} from 'sentry/components/core/code/inlineCode';
-import {Text} from 'sentry/components/core/text';
-import {Prose} from 'sentry/components/core/text/prose';
+import {InlineCode} from '@sentry/scraps/code';
+import {Heading, Prose, Text} from '@sentry/scraps/text';
+
 import * as Storybook from 'sentry/stories';
 
 import documentation from '!!type-loader!@sentry/scraps/code/inlineCode';
@@ -78,6 +78,21 @@ For long form content, `<code>` elements are automatically styled within the [`<
 </Prose>
 ```
 
+## Variants
+
+Use `variant="neutral"` for page headings or other situations where the vibrancy of the default `variant="accent"` would be distracting.
+
+<Storybook.Demo>
+  <Heading as="h3">
+    Hello <InlineCode variant="neutral">:user</InlineCode>
+  </Heading>
+</Storybook.Demo>
+```tsx
+<Heading as="h3">
+  Hello <InlineCode variant="neutral">:user</InlineCode>
+</Heading>
+```
+
 ## Common Use Cases
 
 `<InlineCode>` is perfect for:

static/app/components/core/code/inlineCode.tsx

@@ -1,6 +1,6 @@
 import {css, useTheme, type Theme} from '@emotion/react';
 
-export const inlineCodeStyles = (theme: Theme) => css`
+export const inlineCodeStyles = (theme: Theme, props?: InlineCodeProps) => css`
   /**
    * Reset any properties that might be set by the global CSS styles.
    */
@@ -15,19 +15,28 @@ export const inlineCodeStyles = (theme: Theme) => css`
    */
   font-size-adjust: ex-height 0.57;
 
-  color: ${theme.tokens.content.promotion};
-  background: color-mix(in oklab, currentColor, transparent 92%);
+  color: ${props?.variant === 'neutral'
+    ? theme.tokens.content.primary
+    : theme.tokens.content.promotion};
+  background: ${props?.variant === 'neutral'
+    ? theme.tokens.background.transparent.neutral.muted
+    : theme.tokens.background.transparent.promotion.muted};
 
   padding-inline: 0.3ch;
   margin-inline: -0.15ch;
-  border-radius: 2px;
+  border-radius: ${theme.radius['2xs']};
+  /* 3px (2xs) at 14px font-size and 8px (lg) at 24px font */
+  border-radius: clamp(0.21em, 0.28em, 0.57em);
 
   text-box-edge: text text;
   text-box-trim: trim-both;
 `;
 
-interface InlineCodeProps extends React.HTMLProps<HTMLElementTagNameMap['code']> {}
+interface InlineCodeProps extends React.HTMLProps<HTMLElementTagNameMap['code']> {
+  variant?: 'neutral' | 'accent';
+}
 export function InlineCode(props: InlineCodeProps) {
   const theme = useTheme();
-  return <code css={inlineCodeStyles(theme)} {...props} />;
+  const {variant: _, ...domProps} = props;
+  return <code css={inlineCodeStyles(theme, props)} {...domProps} />;
 }