fix(storefront): BCTHEME-341 fix placeholder contrast ratio (bigcomme…

…rce#1933)
sacr3dc0w · Mar 31, 2021 · 45fe62a · 45fe62a
1 parent 232f0bb
commit 45fe62a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed input placeholder color contrast according to AA standard. [#1933](https://github.com/bigcommerce/cornerstone/pull/1933)
 
 ## 5.0.0 (12-14-2020)
 - Parse HTML entities in jsContext. [#1917](https://github.com/bigcommerce/cornerstone/pull/1917)

diff --git a/assets/scss/components/citadel/forms/_forms.scss b/assets/scss/components/citadel/forms/_forms.scss
@@ -137,6 +137,11 @@
 //    appear before the button.
 //
 // -----------------------------------------------------------------------------
+@mixin placeholder {
+    &::-webkit-input-placeholder {@content}
+    &::-moz-placeholder          {@content}
+    &:-ms-input-placeholder      {@content}
+}
 
 .form-label--alternate {
     font-family: fontFamily("headingSans");
@@ -209,6 +214,10 @@
         @include breakpoint("large") {
             width: auto;
         }
+
+        @include placeholder {
+            color: $formInput-placeholder-color;
+        }
     }
 
     .button {

diff --git a/assets/scss/settings/citadel/forms/_settings.scss b/assets/scss/settings/citadel/forms/_settings.scss
@@ -231,3 +231,5 @@ $form-checkRadio-labelBefore-top:           remCalc(3px);
 $form-checkRadio-labelAfter-top:            remCalc(4px);
 
 $form-minMaxRow-column-gutter:              $column-gutter / 4;
+
+$formInput-placeholder-color:                  stencilColor("input-font-color");
Original file line number	Diff line number	Diff line change
Expand Up		@@ -231,3 +231,5 @@ $form-checkRadio-labelBefore-top: remCalc(3px);
		$form-checkRadio-labelAfter-top: remCalc(4px);

		$form-minMaxRow-column-gutter: $column-gutter / 4;

		$formInput-placeholder-color: stencilColor("input-font-color");