FIxes jgthms#2886 - cross-browser placeholder opacity

This is a bug fix. Issue: jgthms#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.
scheinercc · Jul 4, 2021 · 097fa09 · 097fa09
1 parent 0c43b9e
commit 097fa09
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/docs/_data/variables/elements/form.json b/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"
-}
+}
diff --git a/docs/_data/variables/form/shared.json b/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"
-}
+}
diff --git a/sass/form/shared.sass b/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