From 54276377ef9f2bfc40f3ad0713cd97062bb620c2 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Mon, 19 Jul 2021 11:09:26 -0700
Subject: [PATCH 1/3] Creating Header-input class for dark header inputs

---
 docs/content/components/header.md | 4 ++--
 src/header/header.scss            | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/content/components/header.md b/docs/content/components/header.md
index 58484e1c55..a16a179fd7 100644
--- a/docs/content/components/header.md
+++ b/docs/content/components/header.md
@@ -22,7 +22,7 @@ The `.Header` class is the wrapping class that aligns all the items properly and
     </a>
   </div>
   <div class="Header-item">
-    <input type="search" class="form-control input-dark" />
+    <input type="search" class="form-control Header-input" />
   </div>
   <div class="Header-item Header-item--full">
     Menu
@@ -49,7 +49,7 @@ All items directly under the `.Header` component should be a `.Header-item` comp
 
   <!-- Form item  -->
   <div class="Header-item">
-    <input class="form-control input-dark" type="text"/>
+    <input class="form-control Header-input" type="text"/>
   </div>
 
   <!-- Image item  -->
diff --git a/src/header/header.scss b/src/header/header.scss
index 7c5c100045..06a91438ac 100644
--- a/src/header/header.scss
+++ b/src/header/header.scss
@@ -34,3 +34,10 @@
     text-decoration: none;
   }
 }
+
+.Header-input {
+  color: var(--color-header-text);
+  background-color: var(--color-header-search-bg);
+  border: $border-width $border-style var(--color-header-search-border);
+  box-shadow: none;
+}

From 848dbe7a783bb25b75df6ace2e14bf4f2b5f8bd2 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Mon, 19 Jul 2021 11:14:03 -0700
Subject: [PATCH 2/3] Create unlucky-cooks-punch.md

---
 .changeset/unlucky-cooks-punch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/unlucky-cooks-punch.md

diff --git a/.changeset/unlucky-cooks-punch.md b/.changeset/unlucky-cooks-punch.md
new file mode 100644
index 0000000000..635a9c48c1
--- /dev/null
+++ b/.changeset/unlucky-cooks-punch.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Creating `.Header-input` class for dark header inputs. This `Header-input` will be used with a `form-control` class.

From f19ff7b0868e0fb3f5f169523c2df5682b6d5224 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 20 Jul 2021 08:27:53 -0700
Subject: [PATCH 3/3] Adding placeholder color

---
 src/header/header.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/header/header.scss b/src/header/header.scss
index 06a91438ac..64bdddec1e 100644
--- a/src/header/header.scss
+++ b/src/header/header.scss
@@ -40,4 +40,9 @@
   background-color: var(--color-header-search-bg);
   border: $border-width $border-style var(--color-header-search-border);
   box-shadow: none;
+
+  &::placeholder {
+    // stylelint-disable-next-line primer/colors
+    color: rgba(255, 255, 255, 0.75);
+  }
 }