🎨 UI - Inline code styling blends into gray code block backgrounds

[tiagov8]

Requested by: @tiagov8 via YakShaver.ai 🦬
cc: @tiagov8, @Marxoz, @PothieuG, @Freego1783 @Aibono1225 @designbyalex @hveraus @micsblank

Hi Team!

  🟥  Watch the video (1 min 33 sec)

  Url from screen share: https://ssw.com.au/rules/centralize-ai-workflows

Pain

In Rules V3 (TinaCMS), inline code styling becomes difficult to distinguish when displayed inside gray content boxes because the inline code background color blends into the surrounding container background. Update the inline code styling within gray boxes to improve contrast and readability. Suggested approaches include using a white background or a darker contrasting shade for inline code elements inside gray containers.

Acceptance Criteria

1. Inline code inside gray content boxes is visually distinguishable from the surrounding background.
2. Inline code styling maintains sufficient contrast and readability across supported themes and layouts.
3. Standard inline code styling outside gray boxes remains unchanged.
4. The updated styling is applied consistently across all SSW Rules pages containing inline code inside gray containers.
5. The solution is visually validated against existing examples in Rules V3 (TinaCMS).

Reproduce Steps

1. Open a rule page in Rules V3 (TinaCMS) that contains inline code within a gray content box.
2. Observe the inline code styling inside the gray container.
3. Notice that the inline code background blends with the gray box background, making the code harder to distinguish and read.

Screenshot

Figure: Inline code styling blends into gray box background

[github-actions]

Pull request created: #2678

Generated by Issue Triage