v1.11.9-alpha-9 : Fix InputField and ListBox placeholder opacity

fictoan · Jan 12, 2025 · b984e54 · b984e54
1 parent 9f6692f
commit b984e54
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.11.9-alpha.8",
+    "version": "1.11.9-alpha.9",
     "private": false,
     "description": "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository": {

diff --git a/src/components/Form/InputField/input-field.css b/src/components/Form/InputField/input-field.css
@@ -23,11 +23,12 @@ input[data-input-field] {
 
     ::placeholder {
         color   : var(--input-placeholder-default);
-        opacity : 1; /* For Firefox */
+        opacity : var(--input-placeholder-opacity);
     }
 
     ::-ms-input-placeholder {
-        color : var(--input-placeholder-default);
+        color   : var(--input-placeholder-default);
+        opacity : var(--input-placeholder-opacity);
     }
 
     &:active,
@@ -44,9 +45,9 @@ input[data-input-field] {
     /* VALIDATION /////////////////////////////////////////////////////////// */
     /* Red everything when invalid ========================================== */
     &:invalid:not(:focus):not(:placeholder-shown) {
-        color               : var(--input-text-invalid);
-        border              : var(--global-border-width) solid var(--input-border-invalid);
-        background-color    : var(--input-bg-invalid);
+        color            : var(--input-text-invalid);
+        border           : var(--global-border-width) solid var(--input-border-invalid);
+        background-color : var(--input-bg-invalid);
     }
 }
 

diff --git a/src/components/Form/ListBox/list-box.css b/src/components/Form/ListBox/list-box.css
@@ -37,6 +37,7 @@
     span.placeholder {
         line-height : 1;
         color       : var(--input-placeholder-default);
+        opacity     : var(--input-placeholder-opacity);
     }
 
     p { color : var(--input-text-default) }

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -228,8 +228,9 @@
     --input-border-width-default      : var(--global-border-width);
 
     --input-label-default             : var(--paragraph-text-colour);
-    --input-placeholder-default       : var(--slate-light40);
     --input-text-default              : var(--paragraph-text-colour);
+    --input-placeholder-default       : var(--slate-light40);
+    --input-placeholder-opacity       : 0.5;
 
     --input-bg-focus                  : var(--white);
     --input-border-focus              : var(--slate-light40);