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.

Sign up for GitHub

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

Jump to bottom

[core] feat: support windows high contrast mode #5524

Merged
merged 23 commits into from Sep 27, 2022
Merged

[core] feat: support windows high contrast mode #5524

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
690cbea
Add border colors for high contrast mode only
styu Sep 2, 2022
df13070
fix selects and switches
styu Sep 2, 2022
d9aa285
forgot to save
styu Sep 2, 2022
7822896
typo
styu Sep 2, 2022
ff6eecd
add a couple more
styu Sep 2, 2022
67bf451
Merge remote-tracking branch 'origin/develop' into syu/high-contrast-…
adidahiya Sep 14, 2022
ed3b9f3
Disable overly prescriptive stylelint rule
adidahiya Sep 14, 2022
cd254c4
fix value type of high-contrast-control-border-color
adidahiya Sep 14, 2022
378bafc
Use system colors
styu Sep 21, 2022
90ce6a6
fix compile
styu Sep 21, 2022
9a15a8d
More fixes
styu Sep 21, 2022
f0946d9
fix popovers and more controls
styu Sep 21, 2022
9c643c1
fix elevations, tables, inputs
styu Sep 21, 2022
18af9c0
fix popover2, more controls
styu Sep 21, 2022
29834b7
refactor into variables, lint
styu Sep 21, 2022
a932a65
undo dumb find and replace
styu Sep 23, 2022
49e3c44
fix disabled styles
styu Sep 23, 2022
5b5a8ff
lint
styu Sep 23, 2022
bee6b85
fix table styles again
styu Sep 23, 2022
6e73182
address comments, fix dialog and drawer
styu Sep 26, 2022
dbf64ca
fix compile
styu Sep 27, 2022
e831c5e
fix compile?
styu Sep 27, 2022
a969534
alph
styu Sep 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .stylelintrc
View file
Open in desktop
Expand Up @@ -21,6 +21,7 @@
"no-invalid-position-at-import-rule": [true, {
"ignoreAtRules": ["use"]
}],
"scss/media-feature-value-dollar-variable": null,
"selector-max-universal": 1
}
}
6 changes: 6 additions & 0 deletions packages/core/src/common/_typography-colors.scss
View file
Open in desktop
Expand Up @@ -63,6 +63,12 @@
box-shadow: none;
color: inherit;
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
border: 1px solid $pt-high-contrast-mode-border-color;
box-shadow: none;
}
}

.#{$ns}-key,
Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/common/_variables.scss
View file
Open in desktop
Expand Up @@ -145,3 +145,11 @@ $pt-dark-popover-box-shadow: 0 0 0 1px $pt-dark-popover-border-color,
$pt-dark-tooltip-box-shadow: 0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
$pt-dark-toast-box-shadow: $pt-dark-elevation-shadow-3 !default;

// 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.
Copy link
Contributor

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

$pt-high-contrast-mode-border-color: buttonborder;
$pt-high-contrast-mode-active-background-color: highlight;
$pt-high-contrast-mode-disabled-border-color: graytext;
$pt-high-contrast-mode-disabled-text-color: graytext;
5 changes: 5 additions & 0 deletions packages/core/src/components/button/_button.scss
View file
Open in desktop
Expand Up @@ -193,6 +193,11 @@ Styleguide button
&.#{$ns}-active {
background: $orange3;
color: $pt-text-color;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
background: $pt-high-contrast-mode-active-background-color;
}
}
}

Expand Down
22 changes: 22 additions & 0 deletions packages/core/src/components/button/_common.scss
View file
Open in desktop
Expand Up @@ -129,6 +129,11 @@ $button-intents: (
background: $button-background-color-active-disabled;
}
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
border: 1px solid $pt-high-contrast-mode-border-color;
}
}

@mixin pt-button-default-colors() {
Expand All @@ -146,6 +151,11 @@ $button-intents: (
@mixin pt-button-active() {
background-color: $button-background-color-active;
box-shadow: $button-box-shadow-active;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
background: $pt-high-contrast-mode-active-background-color;
}
}

@mixin pt-button-disabled() {
Expand Down Expand Up @@ -182,13 +192,25 @@ $button-intents: (
&.#{$ns}-disabled {
@include pt-button-intent-disabled($default-color);
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
border: 1px solid $pt-high-contrast-mode-border-color;
box-shadow: none;
}
}

@mixin pt-button-intent-disabled($default-color) {
background-color: rgba($default-color, 0.5);
border-color: transparent;
box-shadow: none;
color: $button-intent-color-disabled;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
border-color: $pt-high-contrast-mode-disabled-border-color;
color: $pt-high-contrast-mode-disabled-border-color;
}
}

// N.B. this mixin cannot be used on pseudo element selectors because it will produce invalid CSS
Expand Down
9 changes: 9 additions & 0 deletions packages/core/src/components/callout/_callout.scss
View file
Open in desktop
Expand Up @@ -42,6 +42,11 @@ Styleguide callout
}
}

// High contrast mode hides backgrounds, so we need to use a border instead
@media (forced-colors: active) and (prefers-color-scheme: dark) {
border: 1px solid $pt-high-contrast-mode-border-color;
}

&.#{$ns}-callout-icon {
padding-left: ($pt-grid-size * 2) + $pt-icon-size-large;

Expand Down Expand Up @@ -76,6 +81,10 @@ Styleguide callout
&.#{$ns}-intent-#{$intent} {
background-color: rgba($color, 0.1);

@media (forced-colors: active) and (prefers-color-scheme: dark) {
border: 1px solid $pt-high-contrast-mode-border-color;
}

&[class*="#{$ns}-icon-"]::before,
> .#{$ns}-icon:first-child,
.#{$ns}-heading {
Expand Down
10 changes: 10 additions & 0 deletions packages/core/src/components/card/_card.scss
View file
Open in desktop
Expand Up @@ -54,6 +54,12 @@ $dark-elevation-shadows: (
background-color: $dark-card-background-color;
box-shadow: $pt-dark-elevation-shadow-0;
}

// High contrast mode hides box-shadows, so we need to use a border instead
@media (forced-colors: active) and (prefers-color-scheme: dark) {
border: 1px solid $pt-high-contrast-mode-border-color;
box-shadow: none;
}
}

@for $index from 1 through length($elevation-shadows) {
Expand All @@ -64,6 +70,10 @@ $dark-elevation-shadows: (
.#{$ns}-dark & {
box-shadow: nth($dark-elevation-shadows, $index);
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
border: 1px solid $pt-high-contrast-mode-border-color;
}
}
}

Expand Down
6 changes: 6 additions & 0 deletions packages/core/src/components/editable-text/_editable-text.scss
View file
Open in desktop
Expand Up @@ -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 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should add disabled styles as well; we don't want to keep showing a border in this case:

image

border: 1px solid $pt-high-contrast-mode-border-color;
}
}

@each $intent, $color in $pt-intent-colors {
&.#{$ns}-intent-#{$intent} {
.#{$ns}-editable-text-content,
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/components/forms/_common.scss
View file
Open in desktop
Expand Up @@ -121,6 +121,10 @@ $control-group-stack: (
&.#{$ns}-disabled {
@include pt-input-disabled();
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
border: 1px solid $pt-high-contrast-mode-border-color;
}
}

@mixin pt-input-placeholder() {
Expand Down
65 changes: 65 additions & 0 deletions packages/core/src/components/forms/_controls.scss
View file
Open in desktop
Expand Up @@ -34,10 +34,21 @@ $control-indicator-spacing: $pt-grid-size !default;
background-color: $control-checked-background-color;
box-shadow: $control-checked-box-shadow;
color: $white;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
background-color: $pt-high-contrast-mode-active-background-color;
// Windows High Contrast dark theme
border: 1px solid $pt-high-contrast-mode-active-background-color;
}
}

&:hover input#{$selector} ~ .#{$ns}-control-indicator {
background-color: $control-checked-background-color-hover;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
background-color: $pt-high-contrast-mode-active-background-color;
styu marked this conversation as resolved.
Show resolved Hide resolved
}
}

input:not(:disabled):active#{$selector} ~ .#{$ns}-control-indicator {
Expand All @@ -53,6 +64,11 @@ $control-indicator-spacing: $pt-grid-size !default;
.#{$ns}-dark & {
input#{$selector} ~ .#{$ns}-control-indicator {
box-shadow: $dark-control-checked-box-shadow;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
border: 1px solid $pt-high-contrast-mode-border-color;
}
}

&:hover input#{$selector} ~ .#{$ns}-control-indicator {
Expand Down Expand Up @@ -145,6 +161,18 @@ $control-indicator-spacing: $pt-grid-size !default;
height: 1em;
width: 1em;
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
border: 1px solid $pt-high-contrast-mode-border-color;

&::before {
// Because we're using a border in high contrast mode, we need to adjust the margins
// to compensate for the space the border takes up
margin-left: -1px;
margin-top: -1px;
}
}
}

&:hover .#{$ns}-control-indicator {
Expand Down Expand Up @@ -215,6 +243,10 @@ $control-indicator-spacing: $pt-grid-size !default;
// embed SVG icon image as backgroud-image above gradient.
// the SVG image content is inlined into the CSS, so use this sparingly.
background-image: svg-icon("16px/#{$icon}.svg", (path: (fill: $white)));

@media (forced-colors: active) and (prefers-color-scheme: dark) {
background-image: svg-icon("16px/#{$icon}.svg", (path: (fill: $black)));
}
}
}

Expand Down Expand Up @@ -259,6 +291,16 @@ $control-indicator-spacing: $pt-grid-size !default;

input:checked ~ .#{$ns}-control-indicator::before {
background-image: radial-gradient($white, $white 28%, transparent 32%);

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
background: $pt-high-contrast-mode-active-background-color;
// Subtract border on either end, and then an extra 2px for space between the border
height: $control-indicator-size - 4px;
margin-left: 1px;
margin-top: 1px;
width: $control-indicator-size - 4px;
}
}

input:checked:disabled ~ .#{$ns}-control-indicator::before {
Expand Down Expand Up @@ -339,6 +381,7 @@ $control-indicator-spacing: $pt-grid-size !default;
$selector,
$text-color,
$background-color,
$high-contrast-background-color,
$hover-color,
$active-color,
$disabled-text-color,
Expand All @@ -348,10 +391,21 @@ $control-indicator-spacing: $pt-grid-size !default;
input#{$selector} ~ .#{$ns}-control-indicator {
background: $background-color;
color: $text-color;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
background: $high-contrast-background-color;
border: 1px solid $pt-high-contrast-mode-border-color;
}
}

&:hover input#{$selector} ~ .#{$ns}-control-indicator {
background: $hover-color;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
background: $high-contrast-background-color;
}
}

input#{$selector}:not(:disabled):active ~ .#{$ns}-control-indicator {
Expand All @@ -373,6 +427,7 @@ $control-indicator-spacing: $pt-grid-size !default;
"",
$switch-text-color,
$switch-background-color,
$switch-background-color,
$switch-background-color-hover,
$switch-background-color-active,
$switch-text-color-disabled,
Expand All @@ -383,6 +438,7 @@ $control-indicator-spacing: $pt-grid-size !default;
":checked",
$switch-checked-text-color,
$switch-checked-background-color,
$pt-high-contrast-mode-active-background-color, // Use the system color for selected items
$switch-checked-background-color-hover,
$switch-checked-background-color-active,
$switch-checked-text-color-disabled,
Expand Down Expand Up @@ -412,6 +468,13 @@ $control-indicator-spacing: $pt-grid-size !default;
position: absolute;
transition: left $pt-transition-duration $pt-transition-ease;
width: $switch-indicator-size;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// 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;
Copy link
Contributor

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?

}
}
}

Expand All @@ -429,6 +492,7 @@ $control-indicator-spacing: $pt-grid-size !default;
"",
$dark-switch-text-color,
$dark-switch-background-color,
$dark-switch-background-color,
$dark-switch-background-color-hover,
$dark-switch-background-color-active,
$dark-switch-text-color-disabled,
Expand All @@ -439,6 +503,7 @@ $control-indicator-spacing: $pt-grid-size !default;
":checked",
$dark-switch-checked-text-color,
$dark-switch-checked-background-color,
$pt-high-contrast-mode-active-background-color,
$dark-switch-checked-background-color-hover,
$dark-switch-checked-background-color-active,
$dark-switch-checked-text-color-disabled,
Expand Down
21 changes: 21 additions & 0 deletions packages/core/src/components/html-table/_html-table.scss
View file
Open in desktop
Expand Up @@ -132,6 +132,10 @@ table.#{$ns}-html-table {
&.#{$ns}-html-table-bordered {
th:not(:first-child) {
box-shadow: inset $table-border-width 0 0 0 $table-border-color;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
border-left: 1px solid $pt-high-contrast-mode-border-color;
}
}

tbody tr td,
Expand All @@ -140,6 +144,15 @@ table.#{$ns}-html-table {

&:not(:first-child) {
box-shadow: inset $table-border-width $table-border-width 0 0 $table-border-color;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
border-left: 1px solid $pt-high-contrast-mode-border-color;
border-top: 1px solid $pt-high-contrast-mode-border-color;
}
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
border-top: 1px solid $pt-high-contrast-mode-border-color;
}
}

Expand All @@ -159,10 +172,18 @@ table.#{$ns}-html-table {
&:hover td {
background-color: rgba($gray3, 0.3);
cursor: pointer;

@media (forced-colors: active) and (prefers-color-scheme: dark) {
background-color: $pt-high-contrast-mode-active-background-color;
}
}

&:active td {
background-color: rgba($gray3, 0.35);

@media (forced-colors: active) and (prefers-color-scheme: dark) {
background-color: $pt-high-contrast-mode-active-background-color;
}
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions packages/core/src/components/menu/_common.scss
View file
Open in desktop
Expand Up @@ -231,6 +231,11 @@ $dark-menu-item-intent-colors: (
}
}
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
// Windows High Contrast dark theme
background-color: $pt-high-contrast-mode-active-background-color;
}
}

@mixin menu-item-intent($intent, $is-dark, $bg-color, $fg-color, $fg-color-active) {
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/components/navbar/_navbar.scss
View file
Open in desktop
Expand Up @@ -62,6 +62,10 @@ $dark-navbar-background-color: $dark-gray4 !default;
right: 0;
top: 0;
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
border: 1px solid $pt-high-contrast-mode-border-color;
}
}

.#{$ns}-navbar-heading {
Expand Down