From 00fe47109ea35b14d1f02d27d0126acaed4cd4d2 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 14 Apr 2026 10:21:28 +0200
Subject: [PATCH 1/2] fix(TextInput): placeholder color

---
 .changeset/fix-placeholder-color.md                   | 5 +++++
 src/components/Root.tsx                               | 5 +++--
 src/components/fields/TextInput/TextInput.stories.tsx | 6 +++++-
 3 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fix-placeholder-color.md

diff --git a/.changeset/fix-placeholder-color.md b/.changeset/fix-placeholder-color.md
new file mode 100644
index 000000000..646f259af
--- /dev/null
+++ b/.changeset/fix-placeholder-color.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix placeholder color in input recipes to use `#placeholder` token consistently
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index 491888b6c..43ea2c394 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -63,6 +63,7 @@ configure({
       '-webkit-text-fill-color': {
         '': 'currentColor',
         '@autofill | (@autofill & :hover) | (@autofill & :focus)': '#primary',
+        ':placeholder-shown': '(#placeholder, currentColor)',
       },
       caretColor: {
         '@autofill | (@autofill & :hover) | (@autofill & :focus)': '#primary',
@@ -80,8 +81,8 @@ configure({
       },
     },
     'input-placeholder': {
-      '-webkit-text-fill-color': 'var(--placeholder-color, initial)',
-      color: 'var(--placeholder-color, initial)',
+      '-webkit-text-fill-color': '#placeholder',
+      color: '#placeholder',
     },
     'input-search-cancel-button': {
       hide: true,
diff --git a/src/components/fields/TextInput/TextInput.stories.tsx b/src/components/fields/TextInput/TextInput.stories.tsx
index 1d96b1aad..3b462e215 100644
--- a/src/components/fields/TextInput/TextInput.stories.tsx
+++ b/src/components/fields/TextInput/TextInput.stories.tsx
@@ -160,7 +160,11 @@ export default {
 };
 
 const Template: StoryFn<CubeTextInputProps> = (props) => (
-  <TextInput {...props} onChange={(query) => console.log('change', query)} />
+  <TextInput
+    placeholder="Placeholder"
+    {...props}
+    onChange={(query) => console.log('change', query)}
+  />
 );
 
 export const Default = Template.bind({});

From 9ebe248065a59b96016c195e18b965c35259687d Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Tue, 14 Apr 2026 10:31:06 +0200
Subject: [PATCH 2/2] fix(TextInput): placeholder color * 2

---
 src/components/Root.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index 43ea2c394..9aa344102 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -63,7 +63,6 @@ configure({
       '-webkit-text-fill-color': {
         '': 'currentColor',
         '@autofill | (@autofill & :hover) | (@autofill & :focus)': '#primary',
-        ':placeholder-shown': '(#placeholder, currentColor)',
       },
       caretColor: {
         '@autofill | (@autofill & :hover) | (@autofill & :focus)': '#primary',