Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Windows: Improve support for High Contrast Mode #116

Open
ItsJonQ opened this issue Nov 16, 2020 · 1 comment
Open

Windows: Improve support for High Contrast Mode #116

ItsJonQ opened this issue Nov 16, 2020 · 1 comment

Comments

@ItsJonQ
Copy link
Owner

ItsJonQ commented Nov 16, 2020

@jasmussen Has done some work in Gutenberg to improve support for high contrast mode in Windows.

Example:
https://github.com/WordPress/gutenberg/blob/e259fd03b7ba4852ef6b01be06ad4f5c4a100eec/packages/components/src/form-toggle/style.scss#L49

I'm not too familiar with how to do this. It appears that we need to leverage the outline CSS property for this.
The thing I'm unsure about is outline-offset. Within the Gutenberg codebase, it seems to vary between 2px and -2px.

@jasmussen
Copy link
Collaborator

Border and outline become fully opaque. Background-color and box shadow are removed entirely.

The way to trick it is to leverage that even a transparent outline, becomes opaque. So you can make a 2px solid transparent outline around a button, and you have a windows 10 focus style, even if you use box shadow for the focus style in the normal mode.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants