chore: WDS text inputs visual refinements (#35581)

## Description

Fixes #34844  

Fixes several issues that were spotted related to that:
- We were not applying `--fg-neutral-subtle` to our placeholder because
ADS has `!important` for their placeholder styling, so I added it to
ours for now
- After applying it, it became obvious that `--fg-neutral-subtle` and
the “parent” `--fg-neutral` needed adjustments too
- Disabled opacity needed an increase (became obvious) after making our
`--bg-neutral-subtle` lighter to deal with the primary issue of the
ticket)
- `--bg-neutral-subtle` were derived from the seed, despite the intent
to be derived from `--bg-accent-subtle`, fixed that too

| Before | After |
|--------|--------|
| <img width="1114" alt="before-light"
src="https://github.com/user-attachments/assets/a2c8b8ca-db5c-443d-84bf-8b7f7dd2333d">
| <img width="1102" alt="after-light"
src="https://github.com/user-attachments/assets/dd924865-ea19-4d74-b4ed-3037e0b418ef">
|

Additional preview of how dark mode looks after these changes:
<img width="1119" alt="after-dark"
src="https://github.com/user-attachments/assets/2d06df1e-211d-4b1d-a293-99710b34f7bd">


## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!CAUTION]
> 🔴 🔴 🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10319662006>
> Commit: e1f99f2
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319662006&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.Anvil
> Spec: 
> The following are new failures, please fix them before merging the PR:
<ol>
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilHeadingWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInlineButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilParagraphWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Fri, 09 Aug 2024 13:25:27 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Enhanced color themes for both dark and light modes, improving
aesthetic coherence and visual accessibility.

- **Bug Fixes**
- Adjusted opacity of disabled components to improve clarity and user
experience.

- **Style**
- Updated placeholder text styling in input fields to ensure consistent
visibility across different contexts.

- **Tests**
- Modified expected output values in color theme tests for improved
accuracy and alignment with new color definitions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts

@@ -393,7 +393,7 @@ export class DarkModeTheme implements ColorModeTheme {
   }
 
   private get bgNeutralSubtle() {
-    const color = this.seedColor.clone();
+    const color = this.bgAccentSubtle.clone();
 
     // Adjusted version of bgAccentSubtle (less or no chroma)
     if (this.seedLightness > 0.29) {
@@ -726,15 +726,15 @@ export class DarkModeTheme implements ColorModeTheme {
     // Neutral foreground. Slightly less prominent than main fg
     const color = this.fg.clone();
 
-    color.oklch.l -= 0.02;
+    color.oklch.l -= 0.1;
 
     return color;
   }
 
   private get fgNeutralSubtle() {
     const color = this.fgNeutral.clone();
 
-    color.oklch.l -= 0.15;
+    color.oklch.l -= 0.3;
 
     return color;
   }

app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts

@@ -391,23 +391,19 @@ export class LightModeTheme implements ColorModeTheme {
   }
 
   private get bgNeutralSubtle() {
-    const color = this.seedColor.clone();
+    const color = this.bgAccentSubtle.clone();
 
-    // Adjusted version of bgAccentSubtle (less or no chroma)
+    // Adjusted version of bgAccentSubtle (less or no chroma), slightly higher lightness since neutrals are perceived heavier than saturated colors
     if (this.seedIsVeryLight) {
-      color.oklch.l = 0.985;
+      color.oklch.l = 0.955;
     }
 
     if (!this.seedIsVeryLight) {
-      color.oklch.l = 0.935;
+      color.oklch.l = 0.97;
     }
 
-    if (this.seedChroma > 0.001) {
-      color.oklch.c = 0.001;
-    }
-
-    if (this.seedIsAchromatic) {
-      color.oklch.c = 0;
+    if (this.seedChroma > 0.002) {
+      color.oklch.c = 0.002;
     }
 
     return color;
@@ -416,7 +412,7 @@ export class LightModeTheme implements ColorModeTheme {
   private get bgNeutralSubtleHover() {
     const color = this.bgNeutralSubtle.clone();
 
-    color.oklch.l += 0.02;
+    color.oklch.l += 0.012;
 
     return color;
   }
@@ -734,15 +730,15 @@ export class LightModeTheme implements ColorModeTheme {
     // Neutral foreground. Slightly less prominent than main fg
     const color = this.fg.clone();
 
-    color.oklch.l += 0.1;
+    color.oklch.l += 0.125;
 
     return color;
   }
 
   private get fgNeutralSubtle() {
     const color = this.fgNeutral.clone();
 
-    color.oklch.l += 0.1;
+    color.oklch.l += 0.35;
 
     return color;
   }
@@ -1164,15 +1160,15 @@ export class LightModeTheme implements ColorModeTheme {
     // Low contrast indicator of interactivity in TextInput and similar
     const color = this.bgNeutralSubtle.clone();
 
-    color.oklch.l -= 0.06;
+    color.oklch.l -= 0.03;
 
     return color;
   }
 
   private get bdOnNeutralSubtleHover() {
     const color = this.bdOnNeutralSubtle.clone();
 
-    color.oklch.l += 0.03;
+    color.oklch.l -= 0.015;
 
     return color;
   }

app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts

@@ -567,19 +567,19 @@ describe("fgNeutral color", () => {
   it("should return correct color when chroma < 0.04", () => {
     const { fgNeutral } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
 
-    expect(fgNeutral).toEqual("rgb(88.912% 88.912% 88.912%)");
+    expect(fgNeutral).toEqual("rgb(78.709% 78.709% 78.709%)");
   });
 
   it("should return correct color when chroma > 0.04 and hue is between 120 and 300", () => {
     const { fgNeutral } = new DarkModeTheme("oklch(0.45 0.1 150)").getColors();
 
-    expect(fgNeutral).toEqual("rgb(86.896% 89.904% 87.34%)");
+    expect(fgNeutral).toEqual("rgb(76.736% 79.678% 77.172%)");
   });
 
   it("should return correct color when chroma > 0.04 and hue is not between 120 and 300", () => {
     const { fgNeutral } = new DarkModeTheme("oklch(0.45 0.1 110)").getColors();
 
-    expect(fgNeutral).toEqual("rgb(89.043% 89.298% 85.788%)");
+    expect(fgNeutral).toEqual("rgb(78.837% 79.085% 75.653%)");
   });
 });
 
@@ -589,7 +589,7 @@ describe("fgNeutralSubtle color", () => {
       "oklch(0.45 0.03 60)",
     ).getColors();
 
-    expect(fgNeutralSubtle).toEqual("rgb(69.98% 69.98% 69.98%)");
+    expect(fgNeutralSubtle).toEqual("rgb(42.772% 42.772% 42.772%)");
   });
 });
 

app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts

@@ -307,28 +307,28 @@ describe("bgNeutralSubtle color", () => {
     const { bgNeutralSubtle } = new LightModeTheme(
       "oklch(0.95 0.03 170)",
     ).getColors();
-    expect(bgNeutralSubtle).toEqual("rgb(98.026% 98.026% 98.026%)");
+    expect(bgNeutralSubtle).toEqual("rgb(93.635% 94.291% 94.022%)");
   });
 
   it("should return correct color when lightness < or equal to 0.93", () => {
     const { bgNeutralSubtle } = new LightModeTheme(
       "oklch(0.92 0.03 170)",
     ).getColors();
-    expect(bgNeutralSubtle).toEqual("rgb(91.499% 91.499% 91.499%)");
+    expect(bgNeutralSubtle).toEqual("rgb(95.592% 96.251% 95.981%)");
   });
 
   it("should return correct color when seedChroma >  0.01", () => {
     const { bgNeutralSubtle } = new LightModeTheme(
       "oklch(0.92 0.1 170)",
     ).getColors();
-    expect(bgNeutralSubtle).toEqual("rgb(91.268% 91.594% 91.461%)");
+    expect(bgNeutralSubtle).toEqual("rgb(95.592% 96.251% 95.981%)");
   });
 
   it("should return correct color when chroma < 0.04", () => {
     const { bgNeutralSubtle } = new LightModeTheme(
       "oklch(0.92 0.03 170)",
     ).getColors();
-    expect(bgNeutralSubtle).toEqual("rgb(91.499% 91.499% 91.499%)");
+    expect(bgNeutralSubtle).toEqual("rgb(95.592% 96.251% 95.981%)");
   });
 });
 
@@ -338,7 +338,7 @@ describe("bgNeutralSubtleHover color", () => {
       "oklch(0.92 0.1 170)",
     ).getColors();
 
-    expect(bgNeutralSubtleHover).toEqual("rgb(93.867% 94.195% 94.061%)");
+    expect(bgNeutralSubtleHover).toEqual("rgb(97.164% 97.825% 97.554%)");
   });
 });
 
@@ -348,7 +348,7 @@ describe("bgNeutralSubtleActive color", () => {
       "oklch(0.92 0.1 170)",
     ).getColors();
 
-    expect(bgNeutralSubtleActive).toEqual("rgb(89.974% 90.299% 90.166%)");
+    expect(bgNeutralSubtleActive).toEqual("rgb(94.286% 94.944% 94.674%)");
   });
 });
 
@@ -597,19 +597,19 @@ describe("fgNeutral color", () => {
   it("should return correct color when chroma < 0.04", () => {
     const { fgNeutral } = new LightModeTheme("oklch(0.45 0.03 60)").getColors();
 
-    expect(fgNeutral).toEqual("rgb(10.396% 10.396% 10.396%)");
+    expect(fgNeutral).toEqual("rgb(12.685% 12.685% 12.685%)");
   });
 
   it("should return correct color when chroma >  0.04 and hue is between 120 and 300", () => {
     const { fgNeutral } = new LightModeTheme("oklch(0.45 0.1 150)").getColors();
 
-    expect(fgNeutral).toEqual("rgb(9.6799% 10.739% 9.8424%)");
+    expect(fgNeutral).toEqual("rgb(11.952% 13.038% 12.117%)");
   });
 
   it("should return correct color when chroma >  0.04 and hue is not between 120 and 300", () => {
     const { fgNeutral } = new LightModeTheme("oklch(0.45 0.1 110)").getColors();
 
-    expect(fgNeutral).toEqual("rgb(10.444% 10.527% 9.2918%)");
+    expect(fgNeutral).toEqual("rgb(12.734% 12.82% 11.553%)");
   });
 });
 
@@ -619,7 +619,7 @@ describe("fgNeutralSubtle color", () => {
       "oklch(0.45 0.03 60)",
     ).getColors();
 
-    expect(fgNeutralSubtle).toEqual("rgb(19.892% 19.892% 19.892%)");
+    expect(fgNeutralSubtle).toEqual("rgb(49.631% 49.631% 49.631%)");
   });
 });
 

app/client/packages/design-system/theming/src/token/src/defaultTokens.json

@@ -17,7 +17,7 @@
     "2": "2px"
   },
   "opacity": {
-    "disabled": 0.3
+    "disabled": 0.65
   },
   "zIndex": {
     "1": 3,

app/client/packages/design-system/widgets/src/styles/src/text-input.module.css

@@ -126,7 +126,7 @@
   *-----------------------------------------------------------------------------
   */
   & [data-field-input] :is(input, textarea)::placeholder {
-    color: var(--color-fg-neutral-subtle);
+    color: var(--color-fg-neutral-subtle) !important;
     opacity: 1;
   }