Merge branch '30618-change-placeholder-color' into 'master'

fix placeholder visibility

Closes #30618

See merge request !10804

app/assets/stylesheets/framework/typography.scss

@@ -338,3 +338,32 @@ h4 {
 .idiff.addition {
   background: $line-added-dark;
 }
+
+
+/**
+ * form text input i.e. search bar, comments, forms, etc.
+ */
+input,
+textarea {
+  &::-webkit-input-placeholder {
+    color: $placeholder-text-color;
+  }
+
+  // support firefox 19+ vendor prefix
+  &::-moz-placeholder {
+    color: $placeholder-text-color;
+    opacity: 1; // FF defaults to 0.54
+  }
+
+  // scss-lint:disable PseudoElement
+  // support Edge vendor prefix
+  &::-ms-input-placeholder {
+    color: $placeholder-text-color;
+  }
+
+  // scss-lint:disable PseudoElement
+  // support IE vendor prefix
+  &:-ms-input-placeholder {
+    color: $placeholder-text-color;
+  }
+}

app/assets/stylesheets/framework/variables.scss

@@ -111,6 +111,7 @@ $gl-gray: $gl-text-color;
 $gl-gray-dark: #313236;
 $gl-header-color: #4c4e54;
 $gl-header-nav-hover-color: #434343;
+$placeholder-text-color: rgba(0, 0, 0, .42);
 
 /*
  * Lists