From f45c206acc8dc57d759622ad291f4bbdbdb00eb3 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan@appsmith.com>
Date: Fri, 22 Sep 2023 12:34:10 +0530
Subject: [PATCH] fix: in WDS TextInputcolor token fg is not applied to entered
 text (#27533)

Fixes #27511
---
 .../theming/src/color/tests/DarkModeTheme.test.ts      | 10 ++++++++++
 .../theming/src/color/tests/LightModeTheme.test.ts     | 10 ++++++++++
 .../widgets/src/styles/src/textInputStyles.ts          |  1 +
 3 files changed, 21 insertions(+)

diff --git a/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts
index 7361926b65..cc5ee694be 100644
--- a/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts
+++ b/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts
@@ -574,6 +574,16 @@ describe("fgNeutral color", () => {
   });
 });
 
+describe("fgNeutralSubtle color", () => {
+  it("should return correct color", () => {
+    const { fgNeutralSubtle } = new DarkModeTheme(
+      "oklch(0.45 0.03 60)",
+    ).getColors();
+
+    expect(fgNeutralSubtle).toEqual("rgb(59.646% 59.646% 59.646%)");
+  });
+});
+
 describe("fgPositive color", () => {
   it("should return correct color when chroma < 0.04", () => {
     const { fgPositive } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
diff --git a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
index 35cd52404f..8541ed1850 100644
--- a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
+++ b/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts
@@ -604,6 +604,16 @@ describe("fgNeutral color", () => {
   });
 });
 
+describe("fgNeutralSubtle color", () => {
+  it("should return correct color", () => {
+    const { fgNeutralSubtle } = new LightModeTheme(
+      "oklch(0.45 0.03 60)",
+    ).getColors();
+
+    expect(fgNeutralSubtle).toEqual("rgb(44.47% 44.47% 44.47%)");
+  });
+});
+
 describe("fgPositive color", () => {
   it("should return correct color when chroma < 0.04", () => {
     const { fgPositive } = new LightModeTheme(
diff --git a/app/client/packages/design-system/widgets/src/styles/src/textInputStyles.ts b/app/client/packages/design-system/widgets/src/styles/src/textInputStyles.ts
index 244ab99253..c95eb114d3 100644
--- a/app/client/packages/design-system/widgets/src/styles/src/textInputStyles.ts
+++ b/app/client/packages/design-system/widgets/src/styles/src/textInputStyles.ts
@@ -18,6 +18,7 @@ export const textInputStyles = css<HeadlessTextInputProps>`
     background-color: transparent;
     font-family: inherit;
     flex-grow: 1;
+    color: var(--color-fg);
 
     &:autofill,
     &:autofill:hover,