fix: Improve library and demo text contrast

[stefashkaa]

Description

• What does this PR do?

  • Gives the Prompt API header and writing-tool panes opaque dark backgrounds, with a fallback header text color
  • Sets an explicit demo input placeholder color
  • Darkens the documentation primary-button gradient and raises its footer button above the decorative overlay

• Why is this change needed?

  • Translucent library surfaces allowed light host backgrounds to reduce contrast for availability labels, errors, and proofreading highlights
  • The demo placeholder and documentation button also had confirmed contrast failures
  • These changes address those failures without changing passing color pairs flagged by Sonar

Type of Change

• Bug fix (non-breaking)
• New feature (non-breaking)
• Breaking change
• Documentation update
• Tests
• Maintenance

Testing

• Checked rendered contrast at 1280 × 900 and 390 × 900, including default, hover, focus, availability, error, and proofreading-highlight states
• Verified standalone library styles on a white host page: affected text now measures 8.62–12.41:1
• Verified documentation button contrast improved from 3.60:1 to 4.87:1 and demo placeholder contrast from 3.72:1 to 6.68:1

Screenshots (if applicable)

• N/A

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex code
• Documentation updated
• No new warnings generated
• Tests added/updated
• All tests passing

Manual Coverage (Optional)

Maintainers with write, maintain, or admin access: open the workflow, click Run workflow, and set pr_number to this PR's number to post or update its coverage comment.

Summary by CodeRabbit

• Style
  • Improved contrast for task-form placeholder text.
  • Updated backgrounds in the prompt and writing-tool panels.
  • Refined the primary documentation button color and adjusted the “Next step” button layering.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
browser-ai-demo	Ready	Preview	Oct 3, 2026 3:32pm UTC

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-03T15:34:37.284994Z	99f9fae	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: 184d03e0-1a47-4767-8744-0db23f6f8d3c

📥 Commits

Reviewing files that changed from the base of the PR and between 3b22b16 and 99f9fae.

📒 Files selected for processing (3)

• common/demo/demo.css
• common/styles/_components.scss
• demo/app/pages/docs.vue

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The changes update placeholder text, panel backgrounds, and button styling in the demo and documentation views.

Changes

Visual style refinements

Layer / File(s)	Summary
Demo input and panel styles common/demo/demo.css, common/styles/_components.scss	Task-form placeholders use muted text. The prompt API header and writing tool pane use opaque background colors.
Documentation page buttons demo/app/pages/docs.vue	The primary button gradient changes color. The “Next step” button gains relative positioning and a stacking level of 1.

Priority: ➖ Normal

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 99f9f

The styling changes improve text contrast and keep the Next step button above its decorative ring. No material regression was identified in the inspected states.

Architecture Summary

Architecture risk: 🔵 Low · up to 99f9f

The change affects 2 systems.

Changed systems: common, demo

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — common (service) was modified; 2 changed files map to changed impact.
• observed — demo (ui) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in common/demo/demo.css: Added .demo-task-form input::placeholder styling with muted #94a3b8 text.
• observed — Modified behavior in common/styles/_components.scss: The .prompt-api__header background keeps its radial gradient but replaces the translucent dark base color with opaque #050811; its border and radius are unchanged.
• observed — Modified behavior in common/styles/_components.scss: The .writing-tool__pane background changes from translucent rgba(8, 10, 18, 0.46) to opaque #080a12.
• observed — Modified behavior in demo/app/pages/docs.vue: The primary button gradient’s second color changes from #5275df to #4667d0.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: improving text contrast across library components and the demo.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit hops past forms of blue,
And finds the placeholders muted too.
Dark panels settle into place,
A button shifts with measured grace.
The docs page shines in a softer hue.}

_{Comment @coderabbitai help to get the list of available commands.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[gitar-bot]

Important

You are using the Gitar free plan. Upgrade to unlock code review, CI analysis, auto-apply, custom automations, and more.

_Gitar

[Copilot]

Copilot review overview

🔵 Needs a closer look

The changes are purely visual contrast adjustments whose correctness depends on rendered WCAG contrast ratios that cannot be objectively verified without human visual review.

Review effort: Balanced
Findings: None

What changed in this PR

This PR is a small, targeted CSS/SCSS change aimed at fixing text-contrast (accessibility) failures flagged by Sonar in both the shared library styles and the demo/docs site. It replaces translucent surfaces with opaque dark backgrounds so light host pages can no longer bleed through and reduce contrast, sets an explicit placeholder color, darkens a button gradient, and raises the docs footer button above a decorative overlay. It fits into the codebase as a non-breaking styling refinement to the shared common/ styles and the Nuxt demo site.

Changes:

• Make the Prompt API header and writing-tool pane backgrounds opaque dark (and add a fallback header text color consistent with the file's existing var(--color-primary, #fff) pattern).
• Darken the docs primary-button gradient and give the docs-next footer button position: relative; z-index: 1 so it renders above the decorative ::after overlay.
• Add an explicit placeholder color for the demo task-form input.

File	Description
common/​styles/​_components.scss	Adds opaque header/pane backgrounds and a fallback header text color to improve contrast on light host pages.
demo/​app/​pages/​docs.vue	Darkens the primary-button gradient and stacks the footer button above the decorative overlay.
common/​demo/​demo.css	Sets an explicit placeholder color for the demo task-form input.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.