💄 - style: alter color of input controls based on placeholder state

maykinmedia · Jul 25, 2024 · 617008a · 617008a
1 parent d850ad6
commit 617008a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/components/form/input/input.scss b/src/components/form/input/input.scss
@@ -16,6 +16,10 @@
   width: min(320px, 100%);
   max-width: 100%;
 
+  &::placeholder {
+    color: var(--typography-color-muted);
+  }
+
   &[size] {
     width: auto;
   }

diff --git a/src/components/form/select/select.scss b/src/components/form/select/select.scss
@@ -32,6 +32,11 @@
     width: fit-content;
   }
 
+  // Empty state
+  &:has(option[selected][value=""]) {
+    color: var(--typography-color-muted);
+  }
+
   &--text-size-xs {
     --mykn-select-padding-xs: calc(var(--spacing-h) / 2);
     --select-font-size: var(--typography-font-size-body-xs);