FIxes #2886 - cross-browser placeholder opacity

This is a bug fix.

Issue: #2886

TL;DR Firefox and Safari/Chrome have different computed styles for placeholders. The current implementation only targets Safari/Chrome and renders them too faint in Firefox.

### Proposed solution
Split the single RGBA color value into a solid color and an opacity value. This renders the placeholder the same in all browsers.

### Tradeoffs
Users who change the  alpha values of `$input-placeholder-color` and `$input-disabled-placeholder-color`, would have to set that alpha value now in the new `$input-placeholder-opacity` and `$input-disabled-placeholder-opacity`.

No changes if the alpha value has not been altered.

docs/_data/variables/elements/form.json

@@ -33,9 +33,14 @@
     },
     "$input-placeholder-color": {
       "name": "$input-placeholder-color",
-      "value": "rgba($input-color, 0.3)",
+      "value": "$input-color",
       "type": "color"
     },
+    "$input-placeholder-opacity": {
+      "name": "$input-placeholder-opacity",
+      "value": "0.3",
+      "type": "size"
+    },
     "$input-hover-color": {
       "name": "$input-hover-color",
       "value": "$grey-darker",
@@ -97,9 +102,14 @@
     },
     "$input-disabled-placeholder-color": {
       "name": "$input-disabled-placeholder-color",
-      "value": "rgba($input-disabled-color, 0.3)",
+      "value": "$input-disabled-color",
       "type": "color"
     },
+    "$input-disabled-placeholder-opacity": {
+      "name": "$input-disabled-placeholder-opacity",
+      "value": "0.3",
+      "type": "size"
+    },
     "$input-arrow": {
       "name": "$input-arrow",
       "value": "$link",
@@ -221,6 +231,7 @@
     "$input-height",
     "$input-shadow",
     "$input-placeholder-color",
+    "$input-placeholder-opacity",
     "$input-hover-color",
     "$input-hover-border-color",
     "$input-focus-color",
@@ -231,6 +242,7 @@
     "$input-disabled-background-color",
     "$input-disabled-border-color",
     "$input-disabled-placeholder-color",
+    "$input-disabled-placeholder-opacity",
     "$input-arrow",
     "$input-icon-color",
     "$input-icon-active-color",
@@ -250,4 +262,4 @@
     "$help-size"
   ],
   "file_path": "elements/form.sass"
-}
+}

docs/_data/variables/form/shared.json

@@ -36,6 +36,11 @@
       "value": "rgba($input-color, 0.3)",
       "type": "color"
     },
+    "$input-placeholder-opacity": {
+      "name": "$input-placeholder-opacity",
+      "value": "0.3",
+      "type": "size"
+    },
     "$input-hover-color": {
       "name": "$input-hover-color",
       "value": "$text-strong",
@@ -100,6 +105,11 @@
       "value": "rgba($input-disabled-color, 0.3)",
       "type": "color"
     },
+    "$input-disabled-placeholder-opacity": {
+      "name": "$input-disabled-placeholder-opacity",
+      "value": "0.3",
+      "type": "size"
+    },
     "$input-arrow": {
       "name": "$input-arrow",
       "value": "$link",
@@ -136,6 +146,7 @@
     "$input-height",
     "$input-shadow",
     "$input-placeholder-color",
+    "$input-placeholder-opacity",
     "$input-hover-color",
     "$input-hover-border-color",
     "$input-focus-color",
@@ -146,10 +157,11 @@
     "$input-disabled-background-color",
     "$input-disabled-border-color",
     "$input-disabled-placeholder-color",
+    "$input-disabled-placeholder-opacity",
     "$input-arrow",
     "$input-icon-color",
     "$input-icon-active-color",
     "$input-radius"
   ],
   "file_path": "form/shared.sass"
-}
+}

sass/form/shared.sass

@@ -3,7 +3,8 @@ $input-background-color: $scheme-main !default
 $input-border-color: $border !default
 $input-height: $control-height !default
 $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
-$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
+$input-placeholder-color: $input-color !default
+$input-placeholder-opacity: 0.3 !default
 
 $input-hover-color: $text-strong !default
 $input-hover-border-color: $border-hover !default
@@ -16,7 +17,8 @@ $input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
 $input-disabled-color: $text-light !default
 $input-disabled-background-color: $background !default
 $input-disabled-border-color: $background !default
-$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
+$input-disabled-placeholder-color: $input-disabled-color !default
+$input-disabled-placeholder-opacity: 0.3 !default
 
 $input-arrow: $link !default
 
@@ -33,6 +35,7 @@ $input-radius: $radius !default
   color: $input-color
   +placeholder
     color: $input-placeholder-color
+    opacity: $input-placeholder-opacity
   &:hover,
   &.is-hovered
     border-color: $input-hover-border-color
@@ -50,6 +53,7 @@ $input-radius: $radius !default
     color: $input-disabled-color
     +placeholder
       color: $input-disabled-placeholder-color
+      opacity: $input-disabled-placeholder-opacity
 
 %input
   +input