Add outlines for high contrast mode (#2456)

primer · Dec 15, 2023 · fd38b17 · fd38b17
1 parent 37304f6
commit fd38b17
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/.changeset/fair-kings-retire.md b/.changeset/fair-kings-retire.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Adds visible outlines to `Overlay` and `Tooltip` in high contrast mode.
diff --git a/app/components/primer/alpha/overlay.pcss b/app/components/primer/alpha/overlay.pcss
@@ -25,3 +25,9 @@ anchored-position.not-anchored::backdrop, dialog::backdrop {
   background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
 }
 
+@media (forced-colors: active) {
+  .Overlay {
+    outline: solid 1px transparent;
+  }
+}
+
diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts
@@ -187,6 +187,16 @@ class ToolTipElement extends HTMLElement {
         margin-top: -6px;
         border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
+
+      @media (forced-colors: active) {
+        :host {
+          outline: solid 1px transparent;
+        }
+
+        :host:before {
+          display: none;
+        }
+      }
     `
   }