-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
[core] feat: support windows high contrast mode #5524
Conversation
Add border colors for high contrast mode onlyPreviews: documentation | landing | table | demo |
typoPreviews: documentation | landing | table | demo |
add a couple morePreviews: documentation | landing | table | demo |
Based on this Microsoft Edge blog post, I think it would be more appropriate to use the following media queries: @media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
// Windows High Contrast light theme
} see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors |
@adidahiya sounds good, i'm picking this back up today! |
fix value type of high-contrast-control-border-colorPreviews: documentation | landing | table | demo |
More fixesPreviews: documentation | landing | table | demo |
fix popovers and more controlsPreviews: documentation | landing | table | demo |
fix elevations, tables, inputsPreviews: documentation | landing | table | demo |
fix popover2, more controlsPreviews: documentation | landing | table | demo |
undo dumb find and replacePreviews: documentation | landing | table | demo |
fix disabled stylesPreviews: documentation | landing | table | demo |
fix table styles againPreviews: documentation | landing | table | demo |
Visual review only (code review coming separately): This is a huge improvement over the current state of Blueprint in high contrast mode, nice work! I reviewed all the components in the docs preview and found some areas we could still do better. To address in this PRMinimal button groups have extra bordersWe should make these look the same as regular buttons, without the double border between adjacent buttons: Time picker inputs have no bordersTo address in separate PRsListed below roughly in order of importance: Dialogs and Drawers should get a border to separate them from underlying content(should look similar to popover/tooltips and dark theme dialogs) Active tab indicator is hard/impossible to seeProgress bar is invisibleSlider filled track is invisibleNon ideal state icon stroke has low contrastwe shouldn't apply the opacity adjustment in high contrast mode: Skeleton styling has no effectmaybe we should make the text color transparent? TablesNot 100% sure what we should do here, but adding borders between all cells probably makes the most sense. Also a thicker border between row/col headers and the table body |
|
||
// Colors used for Windows high contrast mode | ||
// Because high contrast mode doesn't actually obey any colors we define, but uses system colors, | ||
// we define these variables in terms of System colors so that it's easier to understand the intent. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it might be helpful to link to documentation here, like https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/system_color_keywords
@@ -31,6 +31,12 @@ | |||
box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus; | |||
} | |||
|
|||
@media (forced-colors: active) and (prefers-color-scheme: dark) { | |||
&::before { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// Windows High Contrast dark theme | ||
border: 1px solid $pt-high-contrast-mode-border-color; | ||
// Because we're using a border for the outline, we need to decrease the top margin | ||
margin-top: 1px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should this be $switch-indicator-margin - 1px
?
I can address dialog + drawer styling in this same PR (I tried to hit the commonly-used components, but for some reason missed those). I did try to fix the active tab indicator, but that one's a bit tricky since it throws off all the spacing as a border |
fix compile?Previews: documentation | landing | table | demo |
alphPreviews: documentation | landing | table | demo |
I filed #5622 for the follow-up issues |
Changes proposed in this pull request:
This adds windows high contrast mode support for most components in Blueprint:
Reviewers should focus on:
For the components affected, do the following show up correctly in windows high contrast mode:
Screenshot