From 617008a14affddb298b45cdccc73cc70b95f65ce Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Thu, 25 Jul 2024 17:27:13 +0200
Subject: [PATCH] :lipstick: - style: alter color of input controls based on
 placeholder state

---
 src/components/form/input/input.scss   | 4 ++++
 src/components/form/select/select.scss | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/src/components/form/input/input.scss b/src/components/form/input/input.scss
index 370c7852..457b592a 100644
--- 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
index aefd1ea9..41eb6db0 100644
--- 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);