[codex] Fix glass button hover contrast

[anciity]

Summary

• preserve readable hover contrast for glass buttons by variant
• update the docs glass-button preview to exercise the actual glass prop

Root cause

Button appended one generic glass hover class for every variant:

hover:bg-white/80 dark:hover:bg-zinc-900/80

That class overrides filled variants such as primary. In light mode, variant="primary" glass becomes a near-white hover surface while the text remains text-white, making the label effectively disappear.

Changes

• add glassHoverClasses keyed by ButtonVariant
• keep filled variants on readable variant-colored hover surfaces
• keep neutral variants on frosted neutral hover surfaces
• update the docs preview to use glass directly instead of ad hoc backdrop classes

Validation

• npm run build
• cd docs && npm run build
• verified the docs Button > Glass example in light mode; the primary glass button no longer flips to a white hover surface

Summary by CodeRabbit

• Bug Fixes
  • Improved glass button behavior so hover and backdrop-blur styles are variant-aware, ensuring consistent visual effects across all button types.
• Documentation
  • Updated the example preview and accompanying comment to use the glass prop and clarify how glass styling is applied.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a40b5bba-cead-4e40-9270-976f39994d18

📥 Commits

Reviewing files that changed from the base of the PR and between 025fb50 and fbc0d65.

📒 Files selected for processing (1)

• docs/src/components/desktop/apps/DeveloperApp/previews.tsx

---

Walkthrough

Button glass styling is made variant-aware via a new lookup table, and the DeveloperApp preview now uses the glass prop for example buttons instead of className-based backdrop-blur styling.

Changes

Glass Button Variant-Awareness

Layer / File(s)	Summary
Glass hover classes and variant-aware styling src/components/button.tsx	Adds glassHoverClasses mapping per ButtonVariant and updates ButtonBase to use glassHoverClasses[variant] when glass is enabled.
Preview example update docs/src/components/desktop/apps/DeveloperApp/previews.tsx	Updates comment and changes ButtonGlassExample to pass the glass prop to primary, secondary, and outline buttons instead of applying glass/backdrop-blur via className.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through classes, tail a-fluff,
Mapped each variant so glass is enough,
No more one-size hover class in sight,
The preview now gleams with prop-driven light,
A tiny tweak — the UI feels right!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: fixing glass button hover contrast by making it variant-aware, which directly addresses the root cause of white-on-white text visibility issues in the changeset.
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.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

docs/src/components/desktop/apps/DeveloperApp/previews.tsx (1)

2011-2013: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Update the stale glass note to match the new API usage.

The nearby note still says glass styling is done via className, but this example now correctly uses the glass prop. Keeping that note will mislead future edits.

Suggested fix

-// Glass Example Components - These show glassmorphism styling concepts
-// Note: Glass styling is achieved via className, not a glass prop
+// Glass Example Components - These show glassmorphism styling concepts
+// Note: Button glass styling uses the `glass` prop; other components use `className` utilities.
 const glassStyles = "bg-white/10 dark:bg-white/5 backdrop-blur-xl border border-white/20 dark:border-white/10";

Also applies to: 2040-2042

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/src/components/desktop/apps/DeveloperApp/previews.tsx` around lines 2011
- 2013, The comment above the glassStyles example is stale — it says glass
styling is achieved via className but the component now uses the glass prop;
update the note to reflect the new API (e.g., "Note: Glass styling can be
applied via the glass prop or className" or simply "Note: Glass styling can be
applied via the glass prop") and revise any identical notes near the other
occurrence (around the glassStyles constant and the later block at lines
~2040-2042) so the comment aligns with the current usage of the glass prop.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@docs/src/components/desktop/apps/DeveloperApp/previews.tsx`:
- Around line 2011-2013: The comment above the glassStyles example is stale — it
says glass styling is achieved via className but the component now uses the
glass prop; update the note to reflect the new API (e.g., "Note: Glass styling
can be applied via the glass prop or className" or simply "Note: Glass styling
can be applied via the glass prop") and revise any identical notes near the
other occurrence (around the glassStyles constant and the later block at lines
~2040-2042) so the comment aligns with the current usage of the glass prop.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a9e8b611-38b7-427b-97ae-17ec877b2a8f

📥 Commits

Reviewing files that changed from the base of the PR and between 0633d69 and 025fb50.

📒 Files selected for processing (2)

• docs/src/components/desktop/apps/DeveloperApp/previews.tsx
• src/components/button.tsx