From 57a332a7a2f141df4479f265f235df56fb1654bf Mon Sep 17 00:00:00 2001
From: vadim <vadim@appsmith.com>
Date: Tue, 28 May 2024 12:16:47 +0200
Subject: [PATCH] Adjust inputs dark mode for better visibility

---
 .../theming/src/color/src/DarkModeTheme.ts             |  8 ++++----
 .../theming/src/color/tests/DarkModeTheme.test.ts      | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
index 8346c8a6ad70..c28829cc9aac 100644
--- a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
@@ -389,8 +389,8 @@ export class DarkModeTheme implements ColorModeTheme {
     const color = this.seedColor.clone();
 
     // Adjusted version of bgAccentSubtle (less or no chroma)
-    if (this.seedLightness > 0.25) {
-      color.oklch.l = 0.25;
+    if (this.seedLightness > 0.29) {
+      color.oklch.l = 0.29;
     }
 
     // If the color is too dark it won't be visible against bg.
@@ -398,8 +398,8 @@ export class DarkModeTheme implements ColorModeTheme {
       color.oklch.l = 0.22;
     }
 
-    if (this.seedChroma > 0.015) {
-      color.oklch.c = 0.015;
+    if (this.seedChroma > 0.025) {
+      color.oklch.c = 0.025;
     }
 
     if (this.seedIsAchromatic) {
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 fc8ad80917f8..9a87fab4624b 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
@@ -283,7 +283,7 @@ describe("bgNeutralSubtle color", () => {
     const { bgNeutralSubtle } = new DarkModeTheme(
       "oklch(0.3 0.03 170)",
     ).getColors();
-    expect(bgNeutralSubtle).toEqual("rgb(13.15% 13.15% 13.15%)");
+    expect(bgNeutralSubtle).toEqual("rgb(16.952% 16.952% 16.952%)");
   });
 
   it("should return correct color when lightness < 0.2", () => {
@@ -297,14 +297,14 @@ describe("bgNeutralSubtle color", () => {
     const { bgNeutralSubtle } = new DarkModeTheme(
       "oklch(0.3 0.03 170)",
     ).getColors();
-    expect(bgNeutralSubtle).toEqual("rgb(13.15% 13.15% 13.15%)");
+    expect(bgNeutralSubtle).toEqual("rgb(16.952% 16.952% 16.952%)");
   });
 
   it("should return correct color when chroma < 0.025 (achromatic)", () => {
     const { bgNeutralSubtle } = new DarkModeTheme(
       "oklch(0.3 0.01 170)",
     ).getColors();
-    expect(bgNeutralSubtle).toEqual("rgb(13.15% 13.15% 13.15%)");
+    expect(bgNeutralSubtle).toEqual("rgb(16.952% 16.952% 16.952%)");
   });
 });
 
@@ -313,7 +313,7 @@ describe("bgNeutralSubtleHover color", () => {
     const { bgNeutralSubtleHover } = new DarkModeTheme(
       "oklch(0.3 0.01 170)",
     ).getColors();
-    expect(bgNeutralSubtleHover).toEqual("rgb(15.988% 15.988% 15.988%)");
+    expect(bgNeutralSubtleHover).toEqual("rgb(19.892% 19.892% 19.892%)");
   });
 });
 
@@ -322,7 +322,7 @@ describe("bgNeutralSubtleActive color", () => {
     const { bgNeutralSubtleActive } = new DarkModeTheme(
       "oklch(0.3 0.01 170)",
     ).getColors();
-    expect(bgNeutralSubtleActive).toEqual("rgb(11.304% 11.304% 11.304%)");
+    expect(bgNeutralSubtleActive).toEqual("rgb(15.033% 15.033% 15.033%)");
   });
 });