From e9bb595680ff51a563260c020d1475102eba2535 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 17 Mar 2022 19:44:50 -0400
Subject: [PATCH] Firefox bug - fix contrast of <select> options in dark mode
 (#1981)

* reverts select options colors to initial

* adds changeset

* rm unnecessary option style
---
 .changeset/healthy-cooks-draw.md | 5 +++++
 src/Select.tsx                   | 9 ++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/healthy-cooks-draw.md

diff --git a/.changeset/healthy-cooks-draw.md b/.changeset/healthy-cooks-draw.md
new file mode 100644
index 00000000000..3680cb91a6f
--- /dev/null
+++ b/.changeset/healthy-cooks-draw.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Ensures select option text has acceptable contrast in Firefox when in dark mode
diff --git a/src/Select.tsx b/src/Select.tsx
index 25708efa576..6469abab957 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -16,15 +16,14 @@ const StyledSelect = styled.select`
   outline: none;
   width: 100%;
 
+  option {
+    color: initial;
+  }
+
   /* colors the select input's placeholder text */
   &:invalid {
     color: ${get('colors.fg.subtle')};
   }
-
-  /* For Firefox: reverts color of non-placeholder options in the dropdown */
-  &:invalid option:not(:first-child) {
-    color: ${get('colors.fg.default')};
-  }
 `
 
 const ArrowIndicatorSVG: React.FC<{className?: string}> = ({className}) => (