fix(various): high contrast on Chromium Edge (#223)

allianz · Feb 5, 2021 · 7858f2f · 7858f2f
1 parent 86c6f69
commit 7858f2f
Show file tree

Hide file tree

Showing 15 changed files with 155 additions and 121 deletions.
diff --git a/projects/ng-aquila/src/circle-toggle/icon-toggle-button/icon-toggle-button.component.scss b/projects/ng-aquila/src/circle-toggle/icon-toggle-button/icon-toggle-button.component.scss
@@ -259,92 +259,44 @@ $check-icon-size: nx-spacer(2m);
 }
 
 @media screen and (-ms-high-contrast: active) {
-  .nx-toggle-circle__icon-wrapper {
-    border-color: buttonText;
-    background-color: buttonFace;
-  }
-
-  .nx-toggle-circle__content-text {
-    -ms-high-contrast-adjust: none;
-  }
-
-  .nx-toggle-circle__label-text,
-  .nx-toggle-circle__label-hint {
-    color: buttonText;
-  }
-
-  :host:not(.is-flipped),
-  :host(.is-negative):not(.is-flipped):not(.is-disabled):not(.is-touched) {
-
-    .nx-toggle-circle__icon nx-icon,
-    .nx-toggle-circle__content-text {
-      color: buttonText;
-    }
-  }
-
-  :host(.is-flipped),
-  :host(.is-negative.is-flipped) {
-
-    .nx-toggle-circle__icon-wrapper {
-      background: highlight;
-      border-color: highlight;
-      color: highlightText;
-    }
-
-    .nx-toggle-circle__icon nx-icon,
-    .nx-toggle-circle__content-text {
-      color: highlightText;
-    }
+  :host {
+    forced-color-adjust: none;
 
+    .nx-toggle-circle__icon-wrapper,
     .nx-toggle-circle__check-icon {
-      border-color: windowText;
-      color: windowText;
+      border-color: buttonText !important;
+      color: buttonText !important;
+      background: buttonFace !important;
     }
-  }
 
-  // Undo hover styles
-  :host:not(.is-disabled):not(.is-touched):hover,
-  :host.is-negative:not(.is-disabled):not(.is-touched):hover {
-    &.is-flipped {
-      .nx-toggle-circle__icon nx-icon,
-      .nx-toggle-circle__content-text {
-        color: highlightText;
-      }
+    .nx-toggle-circle__content-text,
+    .nx-toggle-circle__label-text,
+    .nx-toggle-circle__label-hint {
+      color: buttonText !important;
     }
 
-    &:not(.is-flipped) {
-      .nx-toggle-circle__icon nx-icon,
-      .nx-toggle-circle__content-text {
-        color: buttonText;
+    &.is-flipped {
+      .nx-toggle-circle__icon-wrapper {
+        background: highlight !important;
+        border-color: highlight !important;
+        color: highlightText !important;
       }
     }
-  }
 
-  // disabled
-  :host(.is-disabled.is-flipped),
-  :host(.is-disabled.is-flipped):hover,
-  :host(.is-disabled) {
-    opacity: 1;
+    &.is-disabled {
+      opacity: 1;
 
-    .nx-toggle-circle__icon-wrapper {
-      border-color: GrayText;
-      background: buttonFace;
-      color: GrayText;
-
-      .nx-toggle-circle__icon nx-icon,
-      .nx-toggle-circle__content-text {
-        color: GrayText;
+      .nx-toggle-circle__icon-wrapper,
+      .nx-toggle-circle__check-icon {
+        background: window !important;
+        border-color: GrayText !important;
+        color: GrayText !important;
       }
-    }
 
-    .nx-toggle-circle__check-icon {
-      border-color: GrayText;
-      color: GrayText;
-    }
-
-    .nx-toggle-circle__label-text,
-    .nx-toggle-circle__label-hint {
-      color: GrayText;
+      .nx-toggle-circle__label-text,
+      .nx-toggle-circle__label-hint {
+        color: GrayText !important;
+      }
     }
   }
 }
diff --git a/...ects/ng-aquila/src/circle-toggle/mobile-toggle-button/mobile-toggle-button.component.scss b/...ects/ng-aquila/src/circle-toggle/mobile-toggle-button/mobile-toggle-button.component.scss
@@ -125,39 +125,37 @@
 }
 
 @media screen and (-ms-high-contrast: active) {
-  :host,
-  :host(.is-negative) {
-    background-color: buttonFace;
-    border-color: buttonText;
+  :host {
+    forced-color-adjust: none;
+    background-color: buttonFace !important;
+    border-color: buttonText !important;
+    color: buttonText !important;
 
-    .nx-toggle-button__label-hint,
     .nx-toggle-button__label-text,
-    .nx-toggle-button__mobile-check {
-      color: buttonText;
-      -ms-high-contrast-adjust: none;
+    .nx-toggle-button__label-hint {
+      color: buttonText !important;
     }
   }
 
-  :host(.is-flipped),
-  :host(.is-negative.is-flipped) {
-    background-color: highlight;
+  :host.is-flipped {
+    background-color: highlight !important;
+    color: highlightText !important;
 
-    .nx-toggle-button__label-hint,
     .nx-toggle-button__label-text,
-    .nx-toggle-button__mobile-check {
-      color: highlightText;
+    .nx-toggle-button__label-hint {
+      color: highlightText !important;
     }
   }
 
-  :host(.is-disabled) {
+  :host.is-disabled {
     opacity: 1;
-    border-color: GrayText;
-    color: GrayText;
+    border-color: GrayText !important;
+    color: GrayText !important;
+    background-color: buttonFace !important;
 
-    &.is-flipped {
-      .nx-toggle-button__mobile-check {
-        color: GrayText;
-      }
+    .nx-toggle-button__label-text,
+    .nx-toggle-button__label-hint {
+      color: GrayText !important;
     }
   }
 }
diff --git a/projects/ng-aquila/src/code-input/code-input.scss b/projects/ng-aquila/src/code-input/code-input.scss
@@ -125,6 +125,22 @@ input[type=number] {
    -moz-appearance: textfield;
 }
 
+@media screen and (forced-colors: active) {
+  .nx-code-input__field {
+    border-bottom: 1px solid buttonText !important;
+  }
+
+  &:focus {
+    border-bottom: 2px solid highlight !important;
+  }
+
+  :host.is-disabled {
+    .nx-code-input__field {
+      border-bottom: 1px solid GrayText !important;
+    }
+  }  
+}
+
 @media screen and (-ms-high-contrast: active) {
   .nx-code-input__field {
     box-shadow: inset $default-box-shadow buttonText;

diff --git a/projects/ng-aquila/src/comparison-table/comparison-table.component.scss b/projects/ng-aquila/src/comparison-table/comparison-table.component.scss
@@ -504,3 +504,12 @@
     position: relative; // needed that z-index works
   }
 }
+
+@media screen and (-ms-high-contrast: active) {
+  ::ng-deep .nx-comparison-table__popular-cell,
+  ::ng-deep .nx-comparison-table__mobile-popular-cell {
+    border-top: 1px solid windowText;
+    border-right: 1px solid windowText;
+    border-left: 1px solid windowText;
+  }
+}
diff --git a/projects/ng-aquila/src/comparison-table/select-button/select-button.component.scss b/projects/ng-aquila/src/comparison-table/select-button/select-button.component.scss
@@ -16,5 +16,11 @@
     [dir="rtl"] & {
       margin-left: 4px;
     }
+
+    @media screen and (-ms-high-contrast: active) {
+      background: buttonFace;
+      border: 1px solid buttonText;
+      border-radius: 50%;
+    }
   }
 }
diff --git a/projects/ng-aquila/src/datefield/datepicker/calendar-body.scss b/projects/ng-aquila/src/datefield/datepicker/calendar-body.scss
@@ -88,6 +88,10 @@ $item-size: nx-spacer(3m);
 
   .nx-calendar-body-cell-content:not(.nx-calendar-body-selected) {
     @include var(background-color, datefield-cell-focused-background-color);
+
+    @media screen and (-ms-high-contrast: active) {
+      background-color: highlight;
+    }
   }
 }
 

diff --git a/projects/ng-aquila/src/datefield/datepicker/datepicker-toggle.scss b/projects/ng-aquila/src/datefield/datepicker/datepicker-toggle.scss
@@ -29,6 +29,10 @@ $icon-size: nx-spacer(m);
   &::-moz-focus-inner {
     border: 0;
   }
+
+  @media screen and (-ms-high-contrast: active) {
+    color: ButtonText;
+  }
 }
 
 .default-icon {
@@ -39,6 +43,10 @@ $icon-size: nx-spacer(m);
 
 :host(.nx-datepicker-toggle--disabled) .nx-datepicker-toggle-button {
   cursor: not-allowed;
+
+  @media screen and (-ms-high-contrast: active) {
+    color: GrayText;
+  }
 }
 
 .nx-datepicker-toggle-button.cdk-keyboard-focused {

diff --git a/projects/ng-aquila/src/dropdown/dropdown.scss b/projects/ng-aquila/src/dropdown/dropdown.scss
@@ -195,6 +195,7 @@ $dropdown-border-size: nx-border-size(xs);
 @media screen and (-ms-high-contrast: active) {
   .nx-dropdown__panel {
     box-shadow: 0 0 0 nx-border-size(xs) windowText;
+    border: 1px solid CanvasText;   // Chromium Edge
   }
 
   .nx-dropdown__panel-header {

diff --git a/projects/ng-aquila/src/dropdown/item/dropdown-item.scss b/projects/ng-aquila/src/dropdown/item/dropdown-item.scss
@@ -52,25 +52,6 @@ nx-checkbox {
   @include var(color, dropdown-item-hover-color);
 }
 
-@media screen and (-ms-high-contrast: active) {
-  :host:hover,
-  :host(.nx-dropdown-item--active):not(.nx-multiselect) {
-    .nx-dropdown-results__option-label {
-      color: highlightText;
-      background-color: highlight;
-    }
-  }
-
-  :host(.nx-dropdown-item--active):not(.nx-multiselect) {
-    .nx-dropdown-results__option-checkicon {
-      -ms-high-contrast-adjust: none;
-      color: highlightText;
-      background: highlight;
-      z-index: 1;
-    }
-  }
-}
-
 :host(.nx-selected) .nx-dropdown-results__option-checkicon {
   opacity: 1;
 }
@@ -151,3 +132,28 @@ nx-checkbox {
     @include var(color, dropdown-item-text-color-disabled);
   }
 }
+
+@media screen and (-ms-high-contrast: active) {
+  :host:hover:not(.nx-dropdown-item--disabled),
+  :host(.nx-dropdown-item--active):not(.nx-multiselect) {
+    .nx-dropdown-results__option-label {
+      color: highlightText;
+      background-color: highlight;
+    }
+  }
+
+  :host(.nx-dropdown-item--active):not(.nx-multiselect) {
+    .nx-dropdown-results__option-checkicon {
+      -ms-high-contrast-adjust: none;
+      color: highlightText;
+      background: highlight;
+      z-index: 1;
+    }
+  }
+
+  :host(.nx-dropdown-item--disabled) {
+    .nx-dropdown-results__option-label {
+      color: GrayText;
+    }
+  }
+}
diff --git a/projects/ng-aquila/src/formfield/formfield.scss b/projects/ng-aquila/src/formfield/formfield.scss
@@ -508,9 +508,16 @@ $outline-padding: 7px;
 
 // HIGH CONTRAST
 @media screen and (-ms-high-contrast: active) {
-  .nx-formfield__input-container {
+  .nx-formfield__input-container,
+  .nx-formfield.nx-formfield--negative .nx-formfield__input-container,
+  // overwrite hover in chromium edge:
+  .nx-formfield:not(.nx-formfield--negative):not(.has-error):not(.is-disabled):not(.is-focused):not(.has-outline)
+      .nx-formfield__row:hover .nx-formfield__input-container,
+  // overwrite error color
+  .nx-formfield.has-error:not(.nx-formfield--negative) .nx-formfield__input-container {
     border-bottom-color: buttonText;
   }
+
 
   .nx-formfield.has-outline {
     .nx-formfield__input-container {
@@ -540,7 +547,8 @@ $outline-padding: 7px;
     }
   }
 
-  .nx-formfield.is-focused:not(.has-outline) .nx-formfield__input-container {
+  .nx-formfield.is-focused:not(.has-outline) .nx-formfield__input-container,
+  .nx-formfield.is-focused:not(.nx-formfield--negative):not(.has-error) .nx-formfield__input-container {
     border-bottom-color: highlight;
   }
 

diff --git a/projects/ng-aquila/src/icon/icon.component.scss b/projects/ng-aquila/src/icon/icon.component.scss
@@ -31,7 +31,7 @@ $icon-outline-size-xl: 160px;
   }
 
   @media screen and (-ms-high-contrast: active) {
-    -ms-high-contrast-adjust: none;
+    color: inherit !important;
   }
 }
 

diff --git a/projects/ng-aquila/src/input/password-toggle.component.scss b/projects/ng-aquila/src/input/password-toggle.component.scss
@@ -10,7 +10,7 @@ $icon-size: nx-spacer(m);
   cursor: pointer;
 
   @media screen and (-ms-high-contrast: active) {
-    color: buttonText;
+    color: buttonText !important;
   }
 }
 
@@ -31,4 +31,8 @@ $icon-size: nx-spacer(m);
 
 :host-context(.is-disabled) {
   pointer-events: none;
+
+  @media screen and (-ms-high-contrast: active) {
+    color: GrayText !important;
+  }
 }
diff --git a/projects/ng-aquila/src/link/link.component.scss b/projects/ng-aquila/src/link/link.component.scss
@@ -162,9 +162,15 @@
   }
 }
 
+@media screen and (forced-colors: active) {
+  :host {
+    color: LinkText !important;
+  }
+}
+
 @media screen and (-ms-high-contrast: active) {
   :host::ng-deep a[disabled],
   :host::ng-deep a[aria-disabled] {
-    color: GrayText;
+    color: GrayText !important;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,7 @@ $icon-outline-size-xl: 160px; @@
       }
       @media screen and (-ms-high-contrast: active) {
-        -ms-high-contrast-adjust: none;
+        color: inherit !important;
       }
     }
@@ Expand Down @@