fix: high contrast mode for checkboxes. (#791)

partly resolves #786

This will not work in IE11 or with our legacy build. It must support CSS vars.

Author: jnurthen

components/checkbox/skin.css

@@ -26,6 +26,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Checkbox-box {
   &:before {
+    forced-color-adjust: none;
     border-color: var(--spectrum-checkbox-emphasized-box-border-color);
     background-color: var(--spectrum-checkbox-emphasized-box-background-color);
   }
@@ -97,6 +98,7 @@ governing permissions and limitations under the License.
   }
 
   &:disabled ~ .spectrum-Checkbox-label {
+    forced-color-adjust: none;
     color: var(--spectrum-checkbox-text-color-disabled);
   }
 }
@@ -206,3 +208,36 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Checkbox-input {
+    &:focus-ring + .spectrum-Checkbox-box {
+      forced-color-adjust: none;
+      outline-color: var(--spectrum-checkbox-focus-ring-color-key-focus);
+      outline-style: auto;
+      outline-offset: var(--spectrum-checkbox-focus-ring-gap-key-focus);
+      outline-width: var(--spectrum-checkbox-focus-ring-size-key-focus);    }
+  }
+  :root {
+    --spectrum-checkbox-emphasized-box-background-color : var(--spectrum-alias-background-color-transparent);
+    --spectrum-checkbox-emphasized-box-background-color-disabled : var(--spectrum-alias-background-color-transparent);
+    --spectrum-checkbox-emphasized-box-border-color-disabled : GrayText;
+    --spectrum-checkbox-text-color-disabled : GrayText;
+    --spectrum-checkbox-box-border-color-key-focus: FieldText;
+    --spectrum-checkbox-emphasized-box-border-color: FieldText;
+    --spectrum-checkbox-quiet-box-border-color: FieldText; 
+    --spectrum-checkbox-box-border-color-selected-hover : Highlight;
+    --spectrum-checkbox-emphasized-box-border-color-selected-hover : Highlight;
+    --spectrum-checkbox-quiet-box-border-color-selected-hover : Highlight;
+    --spectrum-checkbox-emphasized-box-border-color-selected: Highlight; 
+    --spectrum-checkbox-quiet-box-border-color-selected: Highlight;
+    --spectrum-checkbox-checkmark-color: HighlightText;
+    --spectrum-checkbox-focus-ring-color-key-focus: Highlight;
+    --spectrum-checkbox-focus-ring-gap-key-focus: var(--spectrum-global-dimension-static-size-25);
+    --spectrum-checkbox-focus-ring-size-key-focus: var(--spectrum-global-dimension-static-size-40);
+    --spectrum-checkbox-box-border-color-error: FieldText;
+    --spectrum-checkbox-box-border-color-error-hover: FieldText;
+    --spectrum-checkbox-box-border-color-error-selected: FieldText;
+    --spectrum-checkbox-text-color-error: FieldText;
+  }        
+}