diff --git a/.changeset/placeholder-vscode-token.md b/.changeset/placeholder-vscode-token.md new file mode 100644 index 00000000000..4c4ed7a085b --- /dev/null +++ b/.changeset/placeholder-vscode-token.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Use the VS Code-native placeholder color for input fields so placeholder text is consistently distinct from values you have typed (Settings, Agent Manager, prompt input, model search, etc.). diff --git a/packages/kilo-ui/src/components/text-field.css b/packages/kilo-ui/src/components/text-field.css index a8579590cfc..9c675564518 100644 --- a/packages/kilo-ui/src/components/text-field.css +++ b/packages/kilo-ui/src/components/text-field.css @@ -44,7 +44,7 @@ color: var(--text-base); &::placeholder { - color: var(--icon-weak-base); + color: var(--vscode-input-placeholderForeground, var(--text-weaker)); } } diff --git a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css index 5181f537af1..d94558636cd 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css +++ b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css @@ -1403,7 +1403,7 @@ body.am-wt-dragging-active * { } .am-tabs-menu-search-input::placeholder { - color: var(--text-weaker); + color: var(--vscode-input-placeholderForeground, var(--text-weaker)); } .am-tabs-menu-list { @@ -2482,7 +2482,7 @@ body.am-wt-dragging-active * { } .am-nv-name-input::placeholder { - color: var(--text-weaker); + color: var(--vscode-input-placeholderForeground, var(--text-weaker)); } /* Dialog overrides for prompt-input-container — resizable from bottom edge */ @@ -2665,7 +2665,7 @@ body.am-wt-dragging-active * { } .am-mm-search-input::placeholder { - color: var(--text-weaker); + color: var(--vscode-input-placeholderForeground, var(--text-weaker)); } .am-mm-list { @@ -2808,7 +2808,7 @@ body.am-wt-dragging-active * { } .am-advanced-input::placeholder { - color: var(--text-weaker); + color: var(--vscode-input-placeholderForeground, var(--text-weaker)); } /* Branch selector */ diff --git a/packages/kilo-vscode/webview-ui/kiloclaw/kiloclaw.css b/packages/kilo-vscode/webview-ui/kiloclaw/kiloclaw.css index a97a06b08c7..cd595c9c76f 100644 --- a/packages/kilo-vscode/webview-ui/kiloclaw/kiloclaw.css +++ b/packages/kilo-vscode/webview-ui/kiloclaw/kiloclaw.css @@ -170,7 +170,7 @@ } .kiloclaw-input::placeholder { - color: var(--vscode-input-placeholderForeground); + color: var(--vscode-input-placeholderForeground, var(--text-weaker)); } /* Status sidebar */ diff --git a/packages/kilo-vscode/webview-ui/src/styles/model-selector.css b/packages/kilo-vscode/webview-ui/src/styles/model-selector.css index 7dbfaba6e55..4504a29c2da 100644 --- a/packages/kilo-vscode/webview-ui/src/styles/model-selector.css +++ b/packages/kilo-vscode/webview-ui/src/styles/model-selector.css @@ -234,7 +234,7 @@ } .model-selector-search::placeholder { - color: var(--vscode-input-placeholderForeground); + color: var(--vscode-input-placeholderForeground, var(--text-weaker)); } .model-selector-list { diff --git a/packages/kilo-vscode/webview-ui/src/styles/prompt-input.css b/packages/kilo-vscode/webview-ui/src/styles/prompt-input.css index 84b665c6963..99b98ef7329 100644 --- a/packages/kilo-vscode/webview-ui/src/styles/prompt-input.css +++ b/packages/kilo-vscode/webview-ui/src/styles/prompt-input.css @@ -327,7 +327,7 @@ } .prompt-input::placeholder { - color: var(--vscode-input-placeholderForeground); + color: var(--vscode-input-placeholderForeground, var(--text-weaker)); } /* Input overlay (highlight + ghost text) */ diff --git a/packages/kilo-vscode/webview-ui/src/styles/question-dock.css b/packages/kilo-vscode/webview-ui/src/styles/question-dock.css index e730d07fe66..97fea9ee903 100644 --- a/packages/kilo-vscode/webview-ui/src/styles/question-dock.css +++ b/packages/kilo-vscode/webview-ui/src/styles/question-dock.css @@ -298,7 +298,7 @@ line-height: var(--line-height-large); &::placeholder { - color: var(--text-weak); + color: var(--vscode-input-placeholderForeground, var(--text-weaker)); } &:disabled {