Creating Header-input class for dark header inputs (#1506)

* Creating Header-input class for dark header inputs * Create unlucky-cooks-punch.md * Adding placeholder color
primer · Jul 20, 2021 · 13cda22 · 13cda22
1 parent 9445847
commit 13cda22
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/.changeset/unlucky-cooks-punch.md 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.
diff --git 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
@@ -34,3 +34,15 @@
     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;
+
+  &::placeholder {
+    // stylelint-disable-next-line primer/colors
+    color: rgba(255, 255, 255, 0.75);
+  }
+}