[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 |
adidahiya
changed the title
|
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 |
styu
changed the title
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 borders
To 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 see
Progress bar is invisible
Slider filled track is invisible
Non 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.
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.
I think we should add disabled styles as well; we don't want to keep showing a border in this case:
| // 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.
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 |
|
latest changes look good 👍
|
alphPreviews: documentation | landing | table | demo |
|
I filed #5622 for the follow-up issues |
adidahiya
changed the title
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