feat: improve badge customization with dynamic text based on contrast#1979
feat: improve badge customization with dynamic text based on contrast#1979sandros94 wants to merge 4 commits intonpmx-dev:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
sandros94
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe PR adds automatic text-colour selection for badge label and value using WCAG contrast calculations. It validates and normalises colour inputs with SafeColorSchema, introduces toLinear and getContrastTextColor utilities, computes labelTextColor and valueTextColor from finalLabelColor and finalColor, and threads those into badge renderers. renderDefaultBadgeSvg and renderShieldsBadgeSvg signatures were extended to accept the computed text colours and their SVG output was adjusted. Documentation examples and an examples table were updated, and end-to-end tests were added to verify contrast behaviour and 3-character hex expansion. Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/content/2.guide/1.features.md (1)
162-162: Minor grammar improvement: add comma before 'so' in compound sentences.Static analysis flags that a comma should precede 'so' when it connects two independent clauses.
📝 Suggested fix
-Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix). The label text color is automatically chosen (black or white) based on WCAG contrast ratio so the badge remains readable. +Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix). The label text colour is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.-Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix). The text color is automatically chosen (black or white) based on WCAG contrast ratio so the badge remains readable. +Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix). The text colour is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.Also applies to: 176-176
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ac835d6d-5831-4cab-b294-b020da103551
📒 Files selected for processing (3)
docs/content/2.guide/1.features.mdserver/api/registry/badge/[type]/[...pkg].get.tstest/e2e/badge.spec.ts
2 participants
🔗 Linked issue
Followup from working on the unjs/automd#137 integration
Reproduction:
📚 Description
Currently the badges have the text hardcoded to white, we can simply add a WCAG luminance evaluation to properly decide if the text should be white or black depending on the color input
Also added proper hex color validation for badges.