fix: resolve high contrast hover visibility issue

[Ram-sah19]

This pull request fixes an accessibility issue affecting interactive UI elements in High Contrast Mode.

Under data-theme="high-contrast", several buttons and tab switchers became unreadable on hover due to a white-on-white color combination caused by hover:bg-[var(--border)].

Closes #797

Problem
In High Contrast Mode:

--surface becomes black (#000000)
--border becomes white (#FFFFFF)
Components using hover:bg-[var(--border)] switched their background to white on hover
Nested text, spans, and Lucide icons still inherited white foreground colors
This resulted in:

Invisible button labels
Hidden SVG icons
Broken accessibility and poor UX
WCAG contrast violations
Affected components included:

Updates / “Stay Tuned” button
Community GitHub button
Editor tab switchers
Other shared hover-border styled buttons
Solution
A centralized accessibility fix was implemented in src/app/globals.css.

Instead of adding component-level conditional logic, a targeted CSS override was introduced specifically for High Contrast Mode using:

[data-theme="high-contrast"] [class*="hover:bg-[var(--border)]"]:hover
The rule:

Forces hovered backgrounds to pure white (#FFFFFF)
Forces text and nested child elements (*, spans, SVG icons, etc.) to black (#000000)
Restores full readability and proper visual contrast
Maintains consistent behavior across all current and future components using the shared hover style
This achieves WCAG AAA compliant contrast ratios (21:1).

Changes Included
Added high-contrast hover accessibility overrides in src/app/globals.css

Fixed invisible text/icons for:

Screen.Recording.2026-05-22.140257.mp4

Footer “Stay Tuned” button
Footer GitHub community button
Classic Editor / Pipeline Studio switchers
Any reusable button using hover:bg-[var(--border)]
Testing
Steps to Verify
Screen.Recording.2026-05-22.140257.mp4
Run the application locally:

npm run dev
Enable High Contrast Mode using the theme toggle.

Hover over:

Footer action buttons
Community/GitHub button
Editor mode switchers
Expected Result
Hovered elements should:

Display a white background
Show fully visible black text/icons
Maintain strong accessibility contrast
Remain readable under all interaction states
Impact
Improves accessibility compliance
Fixes visibility regressions in High Contrast Mode
Prevents future hover contrast issues globally
Keeps implementation clean and maintainable

[vercel]

@Ram-sah19 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Thanks for your PR, @Ram-sah19!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

✅ PR Format Check Passed — @Ram-sah19

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.