[SDPA-1576] Change placeholder colour to meet WCAG contrast. (#300)

* [SDPA-15766] Change placeholder colour to meet WCAG contrast. * Set placeholder color on vue-multiselect * fix lint issue on Imagegallery * make placeholder 011a3c
dpc-sdp · May 27, 2019 · b745e70 · b745e70
1 parent 51f4042
commit b745e70
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/Molecules/Form/index.vue b/packages/Molecules/Form/index.vue
@@ -287,6 +287,7 @@ export default {
   &__placeholder {
     margin-bottom: 0;
     padding: 0;
+    color: $rpl-form-element-placeholder-color;
   }
 
   &__single {

diff --git a/packages/Molecules/Form/scss/_form.scss b/packages/Molecules/Form/scss/_form.scss
@@ -9,6 +9,7 @@ $rpl-form-element-border-color: rpl-color('mid_neutral_1') !default;
 $rpl-form-element-border-color-focus: rpl-color('primary') !default;
 $rpl-form-element-border-radius: rem(4px) !default;
 $rpl-form-element-text-color: rpl-color('extra_dark_neutral') !default;
+$rpl-form-element-placeholder-color: rpl-color('extra_dark_neutral') !default;
 $rpl-form-element-text-highlighted: rpl-color('secondary') !default;
 $rpl-form-element-text-ruleset: ('xs', 1em, 'regular');
 $rpl-form-element-padding-s-horizontal: $rpl-space-4;
@@ -43,6 +44,10 @@ $rpl-form-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08) !default;
   padding: $rpl-form-element-padding-s;
   margin: 0;
 
+  &::placeholder {
+    color: $rpl-form-element-placeholder-color;
+  }
+
   @include rpl_breakpoint(m) {
     padding: $rpl-form-element-padding-m;
   }