From cb8788a5f931cb3dcefe4a75a2e3b5fe9e17a9f4 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Wed, 21 Jan 2026 12:06:43 -0500 Subject: [PATCH 1/6] feat(core): add neutral variant to InlineCode --- .../app/components/core/code/inlineCode.mdx | 4 ++++ .../app/components/core/code/inlineCode.tsx | 19 +++++++++++++------ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/static/app/components/core/code/inlineCode.mdx b/static/app/components/core/code/inlineCode.mdx index ffdf9283186343..f750d1024b6466 100644 --- a/static/app/components/core/code/inlineCode.mdx +++ b/static/app/components/core/code/inlineCode.mdx @@ -78,6 +78,10 @@ For long form content, `` elements are automatically styled within the [`< ``` +## Within Titles + +awesome + ## Common Use Cases `` is perfect for: diff --git a/static/app/components/core/code/inlineCode.tsx b/static/app/components/core/code/inlineCode.tsx index 33c623a1403a1a..424820c5f727fd 100644 --- a/static/app/components/core/code/inlineCode.tsx +++ b/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,26 @@ 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']}; + border-radius: clamp(${theme.radius['2xs']}, 0.33em, ${theme.radius.lg}); text-box-edge: text text; text-box-trim: trim-both; `; -interface InlineCodeProps extends React.HTMLProps {} +interface InlineCodeProps extends React.HTMLProps { + variant?: 'neutral' | 'accent'; +} export function InlineCode(props: InlineCodeProps) { const theme = useTheme(); - return ; + return ; } From f6c2ff01f589c0ba1cab718e2f9cf4a4a0f3bc7c Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Fri, 23 Jan 2026 15:20:21 -0500 Subject: [PATCH 2/6] feat(core): update docs --- static/app/components/core/code/inlineCode.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/components/core/code/inlineCode.mdx b/static/app/components/core/code/inlineCode.mdx index f750d1024b6466..d9168ab216868d 100644 --- a/static/app/components/core/code/inlineCode.mdx +++ b/static/app/components/core/code/inlineCode.mdx @@ -78,9 +78,9 @@ For long form content, `` elements are automatically styled within the [`< ``` -## Within Titles +## Neutral Variant -awesome +`` is useful for page headings or other situations where the vibrancy of the default `variant="accent"` would be distracting. ## Common Use Cases From 4b0a302738a9e110778feeda2d98c2fb1f5e6e82 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Fri, 23 Jan 2026 15:20:33 -0500 Subject: [PATCH 3/6] feat(core): responsive radius --- static/app/components/core/code/inlineCode.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/app/components/core/code/inlineCode.tsx b/static/app/components/core/code/inlineCode.tsx index 424820c5f727fd..53d8c51d91816d 100644 --- a/static/app/components/core/code/inlineCode.tsx +++ b/static/app/components/core/code/inlineCode.tsx @@ -25,7 +25,8 @@ export const inlineCodeStyles = (theme: Theme, props?: InlineCodeProps) => css` padding-inline: 0.3ch; margin-inline: -0.15ch; border-radius: ${theme.radius['2xs']}; - border-radius: clamp(${theme.radius['2xs']}, 0.33em, ${theme.radius.lg}); + /* 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; From 0e52b0f52bdbef4eb30aabb9ef864090e6694987 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Fri, 23 Jan 2026 15:23:11 -0500 Subject: [PATCH 4/6] feat(core): update docs --- static/app/components/core/code/inlineCode.mdx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/static/app/components/core/code/inlineCode.mdx b/static/app/components/core/code/inlineCode.mdx index d9168ab216868d..1e4a6e55e78d38 100644 --- a/static/app/components/core/code/inlineCode.mdx +++ b/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'; @@ -82,6 +82,17 @@ For long form content, `` elements are automatically styled within the [`< `` is useful for page headings or other situations where the vibrancy of the default `variant="accent"` would be distracting. + + + Hello :user + + +```tsx + + Hello :user + +``` + ## Common Use Cases `` is perfect for: From 9da97a0b74d8b8c569d86f6b9e566d1f30c8035c Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Fri, 23 Jan 2026 15:26:17 -0500 Subject: [PATCH 5/6] feat(core): update docs --- static/app/components/core/code/inlineCode.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/components/core/code/inlineCode.mdx b/static/app/components/core/code/inlineCode.mdx index 1e4a6e55e78d38..4c44d6ca29934a 100644 --- a/static/app/components/core/code/inlineCode.mdx +++ b/static/app/components/core/code/inlineCode.mdx @@ -78,9 +78,9 @@ For long form content, `` elements are automatically styled within the [`< ``` -## Neutral Variant +## Variants -`` is useful for page headings or other situations where the vibrancy of the default `variant="accent"` would be distracting. +Use `variant="neutral"` for page headings or other situations where the vibrancy of the default `variant="accent"` would be distracting. From e9e2e7fb9724cc896892fe130c62bf9a2736f716 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Fri, 23 Jan 2026 17:06:03 -0500 Subject: [PATCH 6/6] fix(core): do not spread variant --- static/app/components/core/code/inlineCode.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/app/components/core/code/inlineCode.tsx b/static/app/components/core/code/inlineCode.tsx index 53d8c51d91816d..5ffd589c7969ee 100644 --- a/static/app/components/core/code/inlineCode.tsx +++ b/static/app/components/core/code/inlineCode.tsx @@ -37,5 +37,6 @@ interface InlineCodeProps extends React.HTMLProps } export function InlineCode(props: InlineCodeProps) { const theme = useTheme(); - return ; + const {variant: _, ...domProps} = props; + return ; }