Optimized for: Gemini / ChatGPT / Claude
Advanced AI Prompt for Radix UI Dialog High-Contrast Mode Support
Use this engineered prompt to drastically optimize your workflow and output.
Required Variables
- ✦
[THEME_SYSTEM] - ✦
[CONTRAST_RATIO] - ✦
[FOCUS_VISIBLE_STYLE]
radix-dialog-high-contrast-a11y.txt
Focus on visual accessibility for Radix UI Dialogs. Write a CSS-in-JS or CSS Module implementation that automatically adjusts for Windows High Contrast Mode and users with high contrast preferences. Ensure a [CONTRAST_RATIO] of at least 7:1 for all text. Customize the [FOCUS_VISIBLE_STYLE] to be highly prominent. Explain how to use the 'Radix UI Portal' while maintaining inherited theme variables from [THEME_SYSTEM]. Include a test suite description for verifying contrast with automated tools.
Example Output
"The AI provides a robust styling guide and code using media queries like '@media (forced-colors: active)' to ensure Radix components remain visible in restricted color modes."