feat(code): visual refresh of inline code#11610
Open
jd wants to merge 1 commit into
Open
Conversation
Replace the inline `<code>` styling that pre-dated Pass A: - Add horizontal padding (0.4em) so the bg no longer sits flush against the glyphs - Add a 1px --theme-divider border so the chip has a defined edge against prose - Lift border-radius 3px → 4px (matches Pass A's small-element convention) - Drop the negative-margin hack: with real padding, it's no longer needed to keep the bg from stretching line-height - Inline the 0.2rem value into `a > code`'s text-underline-offset (was passed via a custom prop on the generic `code` rule) `pre > code` (block code via Expressive Code) explicitly resets the new border and radius since the Expressive Code frame already owns that visual. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Change-Id: I6c9be75b7c04d47a76d3d7718129e8f125dcee95
Contributor
Merge ProtectionsYour pull request matches the following merge protections and will not be merged until they are valid. 🔴 👀 Review RequirementsWaiting for
This rule is failing.
🔴 🔎 ReviewsWaiting for
This rule is failing.
🟢 🤖 Continuous IntegrationWonderful, this rule succeeded.
🟢 Enforce conventional commitWonderful, this rule succeeded.Make sure that we follow https://www.conventionalcommits.org/en/v1.0.0/
🟢 📕 PR descriptionWonderful, this rule succeeded.
|
There was a problem hiding this comment.
Pull request overview
Visual refresh for inline <code> styling in the docs theme, shifting from legacy “flush background” styling to a padded, bordered chip-like appearance while keeping block code styling owned by <pre>.
Changes:
- Inline
a > codeunderline offset value and remove shared--padding-block/--border-radiuscustom props from the genericcoderule. - Move inline-only visuals (padding/border/radius) into the inline-code selector
:not(pre) > code:not([class*="language"]).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
829
to
+833
| /* Inline code */ | ||
| :not(pre) > code:not([class*="language"]) { | ||
| background: var(--theme-code-inline-bg); | ||
| padding: 0.15rem 0.4rem; | ||
| border: 1px solid var(--theme-border); | ||
| padding: 0.1em 0.4em; |
Comment on lines
831
to
+834
| background: var(--theme-code-inline-bg); | ||
| padding: 0.15rem 0.4rem; | ||
| border: 1px solid var(--theme-border); | ||
| padding: 0.1em 0.4em; | ||
| border-radius: 4px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replace the inline
<code>styling that pre-dated Pass A:against the glyphs
against prose
convention)
needed to keep the bg from stretching line-height
a > code's text-underline-offset(was passed via a custom prop on the generic
coderule)pre > code(block code via Expressive Code) explicitly resets thenew border and radius since the Expressive Code frame already owns
that visual.
Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com