fix(ld-input): use placeholder opacity instead of color

emdgroup-liquid · Oct 10, 2023 · ab72034 · ab72034
1 parent 77cb5fa
commit ab72034
Show file tree

Hide file tree

Showing 22 changed files with 275 additions and 164 deletions.
diff --git a/screenshot/images/128dbbe7b0662501ff233952645b203d.png b/screenshot/images/128dbbe7b0662501ff233952645b203d.png
diff --git a/screenshot/images/15fa6eacb1f87ed534b52a95879eaf4a.png b/screenshot/images/15fa6eacb1f87ed534b52a95879eaf4a.png
diff --git a/screenshot/images/1cbdc53f9d46748dd171eed005486482.png b/screenshot/images/1cbdc53f9d46748dd171eed005486482.png
diff --git a/screenshot/images/2221246fd86d3cac05c05d0da496fec3.png b/screenshot/images/2221246fd86d3cac05c05d0da496fec3.png
diff --git a/screenshot/images/2eb8872be06357ac57478a2b2a9674fc.png b/screenshot/images/2eb8872be06357ac57478a2b2a9674fc.png
diff --git a/screenshot/images/3d88024c84a62d3e828856d988f678dd.png b/screenshot/images/3d88024c84a62d3e828856d988f678dd.png
diff --git a/screenshot/images/423b67bafa037b1ad75642ce8eda0797.png b/screenshot/images/423b67bafa037b1ad75642ce8eda0797.png
diff --git a/screenshot/images/43f3c4b17d72c7cbd9cc81b4dfe73707.png b/screenshot/images/43f3c4b17d72c7cbd9cc81b4dfe73707.png
diff --git a/screenshot/images/585eb070d702d92c7e7ddf3574054afa.png b/screenshot/images/585eb070d702d92c7e7ddf3574054afa.png
diff --git a/screenshot/images/6783509b9cc88d069277b9dd2aba5dd7.png b/screenshot/images/6783509b9cc88d069277b9dd2aba5dd7.png
diff --git a/screenshot/images/75028d4938fe29e0f549c33784b0180f.png b/screenshot/images/75028d4938fe29e0f549c33784b0180f.png
diff --git a/screenshot/images/75845cfda4d38a61fad6a98f77302e10.png b/screenshot/images/75845cfda4d38a61fad6a98f77302e10.png
diff --git a/screenshot/images/848217e32b13a13815d6908a83c423ae.png b/screenshot/images/848217e32b13a13815d6908a83c423ae.png
diff --git a/screenshot/images/8e1302d977f759d327ffef0d179ad534.png b/screenshot/images/8e1302d977f759d327ffef0d179ad534.png
diff --git a/screenshot/images/b3e9c6eb4f58d6bdd27d549ccacff0fe.png b/screenshot/images/b3e9c6eb4f58d6bdd27d549ccacff0fe.png
diff --git a/screenshot/images/c035986b47d760fad614602293175524.png b/screenshot/images/c035986b47d760fad614602293175524.png
diff --git a/screenshot/images/ced81f7bf9ef475f045d8e1e06eb31b3.png b/screenshot/images/ced81f7bf9ef475f045d8e1e06eb31b3.png
diff --git a/screenshot/images/cf05a3ee4f630e579501f695cc4889a9.png b/screenshot/images/cf05a3ee4f630e579501f695cc4889a9.png
diff --git a/screenshot/images/e1140a964a347808f1fff02871f65bf2.png b/screenshot/images/e1140a964a347808f1fff02871f65bf2.png
diff --git a/screenshot/images/ed201108d0e4ef1c989fb6e984bfbb32.png b/screenshot/images/ed201108d0e4ef1c989fb6e984bfbb32.png
diff --git a/src/liquid/components/ld-input/ld-input.css b/src/liquid/components/ld-input/ld-input.css
@@ -34,8 +34,7 @@
   --ld-input-icon-col-focus: var(--ld-thm-primary-focus);
   --ld-input-icon-col-invalid-focus: var(--ld-thm-error-focus);
   --ld-input-icon-col: var(--ld-thm-primary);
-  --ld-input-placeholder-col-invalid: var(--ld-thm-error-focus);
-  --ld-input-placeholder-col: var(--ld-col-neutral-600);
+  --ld-input-placeholder-opacity: 0.6;
   --ld-input-text-col-disabled: var(--ld-col-neutral-300);
   --ld-input-text-col-invalid-focus: var(--ld-col-neutral-900);
   --ld-input-text-col-invalid: var(--ld-thm-error);
@@ -164,7 +163,7 @@
     box-sizing: border-box;
 
     &::placeholder {
-      color: var(--ld-input-placeholder-col);
+      opacity: var(--ld-input-placeholder-opacity);
     }
   }
 
@@ -438,10 +437,6 @@
   > textarea {
     color: var(--ld-input-text-col-invalid);
     -webkit-text-fill-color: var(--ld-input-text-col-invalid);
-
-    &::placeholder {
-      color: var(--ld-input-placeholder-col-invalid);
-    }
   }
 
   > input::-webkit-calendar-picker-indicator {
@@ -451,10 +446,6 @@
       background: var(--ld-input-icon-col-invalid-focus);
     }
   }
-
-  .ld-input__placeholder {
-    color: var(--ld-input-placeholder-col-invalid);
-  }
 }
 
 :host(
@@ -494,10 +485,6 @@
     color: var(--ld-input-text-col-disabled);
     caret-color: transparent;
     -webkit-text-fill-color: var(--ld-input-text-col-disabled);
-
-    &::placeholder {
-      opacity: 0.25;
-    }
   }
 
   input::-webkit-calendar-picker-indicator {
@@ -519,18 +506,13 @@
   height: 100%;
   align-items: center;
   pointer-events: none;
-  color: var(--ld-input-placeholder-col);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   right: var(--ld-input-padding-x-md);
   left: var(--ld-input-padding-x-md);
   margin-right: 0;
-
-  :host(.ld-input--disabled) &,
-  .ld-input.ld-input--disabled & {
-    opacity: 0.25;
-  }
+  opacity: var(--ld-input-placeholder-opacity);
 }
 
 .ld-select__slot-container {