Skip to content

fix(ui): fix transparency bleeding of copied tooltip - #1913

Merged
danielroe merged 1 commit into
npmx-dev:mainfrom
ShroXd:fix-copied-bg
Mar 4, 2026
Merged

fix(ui): fix transparency bleeding of copied tooltip#1913
danielroe merged 1 commit into
npmx-dev:mainfrom
ShroXd:fix-copied-bg

Conversation

@ShroXd

@ShroXdShroXd commented Mar 4, 2026

Copy link
Copy Markdown
Contributor

🔗 Linked issue

n/a

🧭 Context

The copied tooltip was transparent, which is inconsistent with the other tooltips.

📚 Description

ScenarioScreenshot
Before5672cac651f1ed3a788b595c998a878b
After - Light124f83a133407d5522da6d458f1961f4
After - DarkScreenshot From 2026-03-04 11-33-16
After - Different colorScreenshot From 2026-03-04 11-34-54

@vercel

vercelBot commented Mar 4, 2026

Copy link
Copy Markdown
Contributor

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

ProjectDeploymentActionsUpdated (UTC)
npmx.devReadyReadyPreview, CommentMar 4, 2026 3:20am
2 Skipped Deployments
ProjectDeploymentActionsUpdated (UTC)
docs.npmx.devIgnoredIgnoredPreviewMar 4, 2026 3:20am
npmx-lunariaIgnoredIgnoredMar 4, 2026 3:20am

Request Review

@ShroXdShroXd changed the title fix: fix transparency bleeding of copied tooltipfix(ui): fix transparency bleeding of copied tooltipMar 4, 2026
@coderabbitai

coderabbitaiBot commented Mar 4, 2026

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

The CopyToClipboardButton.vue component's styling logic for the copied state has been refactored. The template's dynamic class binding now uses an array format when copied, combining the existing 'text-accent' class with a new CSS module class. The non-copied state binding remains unchanged. A new .copiedBg CSS rule has been introduced that applies a background colour via the color-mix function, blending 10% accent with the background colour.

Suggested reviewers

  • danielroe
  • knowler
  • nicolo-ribaudo
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check nameStatusExplanation
Description check✅ PassedThe pull request description is directly related to the changeset, explaining the problem (transparent tooltip) and the solution (adjusting the background styling).

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


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

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov

codecovBot commented Mar 4, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

@danielroedanielroe left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you! ❤️

@danielroe
danielroe added this pull request to the merge queueMar 4, 2026
Merged via the queue into npmx-dev:main with commit 9216309Mar 4, 2026
22 checks passed
@github-actions

Copy link
Copy Markdown

Thanks for your first contribution, @ShroXd! ⭐

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@ShroXd@danielroe