fix: DC-4710 code color

[carlagn]

Fixes #DC-4710

Summary by CodeRabbit

• Style
  • Improved the appearance of inline code snippets by updating font and background colors for better visual distinction.
  • Added consistent background color to inline code within tables and general content.
  • Enhanced spacing below code blocks for improved readability.

[coderabbitai]

Walkthrough

CSS styles were updated to adjust the appearance of inline code elements and code blocks. Inline code within tables and general inline code now uses a secondary font color and a specific background color. Additionally, a margin was added below code block content for improved vertical spacing.

Changes

Cohort / File(s)	Change Summary
Inline Code Styling src/css/custom.css	Updated color and background for table code, code:not(pre > code), and .anchor code to unify inline code appearance.
Code Block Spacing src/theme/CodeBlock/Content/styles.module.scss	Added margin-bottom: 1em; to .codeBlockContent for vertical spacing below code blocks.

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/DC-4710-table-code-color

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

Dangerous URL check

No absolute URLs to prisma.io/docs found.
No local URLs found.

[github-actions]

Redirect check

This PR probably requires the following redirects to be added to static/_redirects:

• This PR does not change any pages in a way that would require a redirect.

[cloudflare-workers-and-pages]

Deploying docs with    Cloudflare Pages

Latest commit:	647606e
Status:	✅  Deploy successful!
Preview URL:	https://6e459db8.docs-51g.pages.dev
Branch Preview URL:	https://fix-dc-4710-table-code-color.docs-51g.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 01995a4 and 647606e.

📒 Files selected for processing (2)

• src/css/custom.css (2 hunks)
• src/theme/CodeBlock/Content/styles.module.scss (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Check internal links
• GitHub Check: runner / linkspector
• GitHub Check: Lost Pixel
• GitHub Check: Cloudflare Pages

🔇 Additional comments (3)

src/theme/CodeBlock/Content/styles.module.scss (1)

6-6: Check downstream spacing before merging

Adding margin-bottom: 1em introduces vertical spacing that never existed on .codeBlockContent.
If any consumer component already pads the surrounding container (e.g. Markdown renderers that append <pre> margins), this extra margin can create double-spacing.

Please eyeball a few pages (especially nested tab panels & collapsible blocks) to ensure the new gap doesn’t break layout or scroll-snap calculations.

src/css/custom.css (2)

433-435: Ensure custom palette variables are defined for all themes

table code now relies on two new CSS custom properties:

var(--secondary-font-color)
var(--code-inline-bgd-color)

If either variable is missing in light / dark theme roots, inline code inside tables will inherit the browser fallback (usually black / transparent) and may lose contrast.

Double-check :root stylesheets for both colour schemes before releasing.

---

1570-1572: Potential contrast issue on anchor code

.anchor code now uses var(--primary-font-color) against var(--code-inline-bgd-color).
Verify that this combination meets WCAG AA contrast for both light and dark themes; anchor links often sit inside low-contrast headings.

If contrast is marginal, bump either the foreground or background shade.